/* Commodities: /commodities/ and /commodities/<slug>/ (pipeline/pages/commodities.py).
   Only what the shared design system in style.css does not cover. */

/* the one big number takes the color of its line: gold its asset color,
   the other commodities their group's c1/c2/c3 */
/* calm "Bento mono" look: the big number stays in ink, the color lives in the chart line */
.cmd-k.c1, .cmd-k.c2, .cmd-k.c3, .cmd-k.a-gold, .cmd-k.a-spx { color: var(--ink); }
.hero .label { display: block; margin: 0 0 6px; }
.hero .hero-row .ico { margin-right: 2px; }

/* the page's one switch, under the lead: "Price" / "After inflation"
   (js/commodities.js; html.cmd-real while after inflation is on) */
.cmd-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.cmd-mode-note { margin: 0; font-size: 13px; color: var(--muted); }

/* dashed line at the first year's level in sparklines */
.cmd-ref { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }

/* ---------- overview ---------- */
.cmd-top { margin-top: 26px; }
.cmd-top .card { display: flex; flex-direction: column; gap: 8px; }
.cmd-top .hero-text { max-width: none; }
.cmd-big-row { gap: 8px 12px; }
.cmd-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* one dot per commodity: change since the first year, log scale; one axis for
   both views, so after inflation the dots slide left. The dashed red line is
   US consumer prices (inflation has the cash color): it lands on the first
   year's line after inflation and fades out. */
.cmd-strip { position: relative; margin-top: 2px; }
.cmd-strip-name { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.2; margin: 8px 0 3px; }
.cmd-strip-track { position: relative; height: 18px; border-radius: 9px; background: var(--track); }
.cmd-strip-track::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--ref); border-left: 2px solid var(--ink-2); opacity: 0.45; }
.cmd-cpi { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--cash); opacity: 0.85; }
html.cmd-real .cmd-cpi { opacity: 0; }
.cmd-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.cmd-dot.c1 { background: var(--s1); } .cmd-dot.c2 { background: var(--s2); } .cmd-dot.c3 { background: var(--s3); }
.cmd-dot.a-gold { background: var(--gold); }
html.cmd-anim .cmd-dot, html.cmd-anim .cmd-cpi { transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease; }
.cmd-strip-axis { position: relative; height: 16px; margin-top: 7px; font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmd-strip-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.cmd-strip-axis span:first-child { transform: none; }
.cmd-strip-axis span:last-child { transform: translateX(-100%); }
.cmd-strip-key { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cmd-strip-key i { flex: none; height: 12px; border-left: 2px dashed var(--cash); opacity: 0.85; }
.cmd-strip-key i.ref { border-left: 2px solid var(--ink-2); opacity: 0.45; }

.cmd-find-note { margin: 12px 0 0; max-width: 90ch; }
.cmd-jump { margin: 40px 0 0; }
.cmd-jump .chip { text-decoration: none; }
.cmd-group h2 .cmd-count { color: var(--muted); font-size: 0.55em; font-weight: 600; margin-left: 6px; vertical-align: middle; }

.cmd-card { display: flex; flex-direction: column; }
.cmd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmd-card .card-value small { font: 600 12px var(--font); letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.cmd-card .spark { margin: 10px 0 12px; }
.cmd-card-foot { margin-top: auto; gap: 6px 10px; }

.cmd-table th.cmd-l, .cmd-table td.cmd-l { text-align: left; }
.cmd-table th:first-child, .cmd-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.cmd-table tbody tr:hover td:first-child { background: var(--hover); }
.cmd-table thead th:first-child { z-index: 2; }
.cmd-table a { text-decoration: none; font-weight: 600; }
.cmd-table a:hover { text-decoration: underline; }
.cmd-table th[data-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the change in dollars and after inflation side by side: the shown view in bold */
.cmd-table td.cmd-cn, html.cmd-real .cmd-table td.cmd-cr { font-weight: 700; }
html.cmd-real .cmd-table td.cmd-cn { font-weight: 400; }

/* ---------- one commodity ---------- */
.cmd-stats { margin-top: 22px; }
.stat-value .cmd-u { font: 600 12px var(--font); letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.cmd-plot { min-height: 300px; }
@media (min-width: 700px) { .cmd-plot { min-height: 400px; } }
.cmd-tip-note { margin-top: 4px; font-size: 11px; color: var(--muted); }
.cmd-error { margin: 0; padding: 48px 16px; color: var(--muted); text-align: center; }

.cmd-notes { margin: 16px 0 0; padding: 20px 24px 12px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.cmd-notes h2 { font-size: clamp(18px, 2vw, 21px); margin: 0 0 10px; }
.cmd-notes ul { margin: 0; padding-left: 18px; max-width: 90ch; font-size: 14px; color: var(--ink-2); }
.cmd-notes li { margin: 0 0 8px; }
.cmd-notes b { color: var(--ink); font-weight: 600; }

.table-wrap th, .table-scroll th { white-space: normal; vertical-align: bottom; }
.section table b { font-weight: 700; }
.cmd-years { margin-top: 0; }
.section > .note { margin: 10px 0 0; }
.cmd-vs .stat-label { display: flex; align-items: center; gap: 8px; }
.cmd-lead { max-width: 72ch; margin: 0 0 4px; color: var(--ink-2); }
.cmd-find { max-width: 72ch; margin: 4px 0 0; color: var(--ink-2); }
.cmd-gap { margin-top: 16px; }
.cmd-more { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }

@media (max-width: 520px) {
  .cmd-stats, .cmd-vs .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmd-stats .stat-value { font-size: 19px; }
  .cmd-strip-axis span.m { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.cmd-anim .cmd-dot, html.cmd-anim .cmd-cpi { transition: none; }
}