/* BENEFSAN — commodities.css (R03 — ores that answer to gravity). Page styles for commodities.html — unlayered, tokens only.
   Sections: 1 ore index rows (eight tiles) · 2 gravity index (chart + calculator + gravity-first block) · 3 motion/print */

/* ============ 1 · Ore index (eight entries as numbered datasheet rows) ============ */
.ore-index{border-top:2px solid var(--line-strong)}
.ore{position:relative;display:grid;gap:var(--sp-4) var(--gutter);padding-block:var(--sp-6);border-bottom:1px solid var(--line);grid-template-columns:1fr;grid-template-areas:"head" "note" "proof" "services"}
@media (min-width:720px){
  .ore{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"head note" "proof services";column-gap:var(--sp-7)}
}
@media (min-width:1200px){
  .ore{grid-template-columns:48px minmax(190px,1fr) minmax(0,2.1fr) minmax(170px,.9fr) minmax(210px,1fr);grid-template-areas:"idx head note proof services";padding-block:var(--sp-7);column-gap:var(--sp-6)}
}
/* gold bar on the inline-start edge when a tile links straight to #copper etc. */
.ore::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--sp-4));top:var(--sp-6);bottom:var(--sp-6);width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform var(--t-base) var(--ease)}
.ore:target::before{transform:scaleY(1)}
.ore__idx{grid-area:idx;display:none;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.1em;color:var(--gold-deep);padding-top:6px}
@media (min-width:1200px){.ore__idx{display:block}}
.ore__head{grid-area:head;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.ore__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ore__symbol{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.ore__icon{width:40px;height:40px;color:var(--navy);flex:none;fill:none}
.ore__name{font-family:var(--font-body);font-size:var(--fs-h4);font-weight:600;line-height:1.3;letter-spacing:0}
.ore__route{font-size:var(--fs-eyebrow);color:var(--muted);letter-spacing:.02em}
.ore__note{grid-area:note;color:var(--ink-2);max-width:54ch}
.ore__proof{grid-area:proof;display:flex;flex-direction:column;gap:var(--sp-2)}
.ore__figure{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.ore__figure--none{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-small);letter-spacing:0;color:var(--muted);line-height:1.5}
/* R03: CC values are an index, not a test result — ink, so only measured recoveries and grades read in gold */
.ore__figure--cc{color:var(--ink)}
.ore__figure--words{color:var(--ink);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;letter-spacing:-.01em;text-wrap:balance;max-width:12ch}
/* the tailings tile's "↺" symbol: not in the display face, so keep the fallback glyph the same visual size */
.ore__symbol--glyph{font-size:36px;font-weight:600}
.ore__ctx{font-size:var(--fs-eyebrow);color:var(--muted)}
.ore__services{grid-area:services;min-width:0}
.ore__k{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.ore__links{display:flex;flex-direction:column;gap:6px}
.ore__links a{display:inline-flex;align-items:baseline;gap:10px;min-height:28px;font:500 15px/1.4 var(--font-body);color:var(--ink);text-decoration:none;transition:color var(--t-fast)}
.ore__links a .mono{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.06em;color:var(--gold-deep)}
.ore__links a:hover{color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ore-index__foot{margin-top:var(--sp-5);color:var(--muted)}

/* ============ 2 · Gravity index ============ */
.gravity__grid{display:grid;gap:var(--sp-6) var(--gutter);align-items:start}
/* calculator stacks under the chart until 1200 so the CC track never drops below ~240px */
@media (min-width:1200px){.gravity__grid{grid-template-columns:7fr 5fr}}
/* band tints: token-only fallback first, color-mix() tints where supported */
.gi{--gi-label:188px;--gi-val:164px;--gi-easy:var(--bg-2);--gi-work:var(--bg-2);display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
@supports (background:color-mix(in srgb,red 10%,white)){
  .gi{--gi-easy:color-mix(in srgb,var(--gold) 18%,var(--surface));--gi-work:color-mix(in srgb,var(--gold) 8%,var(--surface))}
}
@media (min-width:720px) and (max-width:1439.98px){.gi{--gi-label:156px;--gi-val:140px}}

/* slider + presets */
.gi__controls{display:grid;gap:var(--sp-4) var(--sp-6);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
/* single column (chips in a row under the slider) until the chart column can hold a 2×2 chip block beside a ~360px slider */
@media (min-width:1440px){.gi__controls{grid-template-columns:minmax(0,1fr) 290px;align-items:end}}
.gi__slider{display:flex;flex-direction:column;gap:8px;min-width:0}
.gi__lab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gi__out{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gi__gname{color:var(--muted)}
.gi__range{position:relative;padding-bottom:26px}
.gi__range input[type="range"]{width:100%;height:32px;margin:0;cursor:pointer;accent-color:var(--gold-deep)}
.gi__scale{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:space-between;font-size:var(--fs-eyebrow);color:var(--muted);pointer-events:none}
/* quartz 2.65 marker: tick bar only (the chip and the output carry the name) */
.gi__quartz{position:absolute;top:-6px;inset-inline-start:calc(8px + (100% - 16px) * .3833);transform:translateX(-50%);display:block;width:2px;height:10px;background:var(--gold)}
[dir="rtl"] .gi__quartz{transform:translateX(50%)}
.gi__hint{font-size:var(--fs-eyebrow);color:var(--muted);line-height:1.4}
.gi__presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gi__reset{margin-inline-start:4px}
html:not(.js) .gi__controls{display:none}

/* chart */
.gi__chart{position:relative;padding:var(--sp-3) var(--sp-5) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
.gi__row,.gi__tickrow{display:grid;grid-template-columns:var(--gi-label) minmax(0,1fr) var(--gi-val);gap:0 var(--sp-4);align-items:center}
/* legend: the four separability classes with their band tints */
.gi__legend{display:flex;flex-wrap:wrap;gap:6px var(--sp-5);padding:8px 0 12px;font-size:var(--fs-small);color:var(--ink-2);line-height:1.4}
.gi__legend li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.gi__legend .mono{font-size:var(--fs-eyebrow);color:var(--muted)}
.gi__swatch{display:inline-block;width:14px;height:14px;border:1px solid var(--line);border-radius:2px;background:var(--bg-3)}
.gi__swatch--difficult{background:var(--bg-2)}
.gi__swatch--workable{background:var(--gi-work)}
.gi__swatch--easy{background:var(--gi-easy)}
.gi__rows{display:block}
.gi__row{border-top:1px solid var(--line);min-height:66px}
.gi__row[hidden]{display:none}
.gi__row--you{border-top:1px dashed var(--line-strong)}
.gi__label{display:flex;align-items:center;gap:12px;padding-block:10px;min-width:0}
.gi__sym{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em;min-width:3.6ch;color:var(--ink)}
.gi__sym--you{color:var(--gold-deep)}
.gi__row--you .gi__sg{white-space:normal;line-height:1.4}
.gi__name{display:flex;flex-direction:column;gap:2px;font:500 14px/1.3 var(--font-body);color:var(--ink);min-width:0}
.gi__sg{font-size:var(--fs-eyebrow);color:var(--muted);white-space:nowrap}
.gi__track{position:relative;align-self:stretch;min-height:66px;background:
  linear-gradient(90deg,transparent calc(27.78% - .5px),var(--steel) calc(27.78% - .5px),var(--steel) calc(27.78% + .5px),transparent calc(27.78% + .5px)),
  linear-gradient(90deg,transparent calc(38.89% - .5px),var(--steel) calc(38.89% - .5px),var(--steel) calc(38.89% + .5px),transparent calc(38.89% + .5px)),
  linear-gradient(90deg,transparent calc(55.56% - .5px),var(--steel) calc(55.56% - .5px),var(--steel) calc(55.56% + .5px),transparent calc(55.56% + .5px)),
  linear-gradient(90deg,var(--bg-3) 0 27.78%,var(--bg-2) 27.78% 38.89%,var(--gi-work) 38.89% 55.56%,var(--gi-easy) 55.56% 100%)}
.gi__bar{position:absolute;inset-inline-start:0;top:50%;height:16px;width:calc(var(--w,0) * 1%);max-width:100%;background:var(--gold-grad);transform:translateY(-50%) scaleX(0);transform-origin:left center;transition:width var(--t-base) var(--ease) 0s,transform var(--t-fill) var(--ease-out) calc(var(--i,0) * 80ms)}
[dir="rtl"] .gi__bar{transform-origin:right center}
.gi.is-in .gi__bar,html:not(.js) .gi__bar{transform:translateY(-50%) scaleX(1)}
.gi__bar.is-off::after{content:"";position:absolute;inset-inline-start:100%;top:50%;transform:translateY(-50%);border-inline-start:10px solid var(--gold-deep);border-block:8px solid transparent}
.gi__bar--you{background:transparent;border:1.5px dashed var(--ink);height:18px}
.gi__bar--you.is-off::after{border-inline-start-color:var(--ink)}
.gi__val{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-block:8px;min-width:0}
.gi__cc{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gi__cc b{font-weight:inherit}
.gi__off{font-size:var(--fs-eyebrow);color:var(--muted);letter-spacing:.04em}
.gi__verdict{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--ink-2);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.gi__verdict--easy{border-color:var(--gold);color:var(--gold-text-sm)}
.gi__verdict--workable{border-color:var(--line-strong);color:var(--ink)}
.gi__verdict--difficult{border-color:var(--line);background:var(--bg-2);color:var(--muted)}
.gi__verdict--none{border-color:transparent;background:var(--bg-3);color:var(--muted)}
.gi__ticks{border-top:1px solid var(--line-strong);padding-top:6px}
.gi__tickrow{height:18px}
.gi__tickrow>span{grid-column:2;grid-row:1;position:relative;justify-self:start;inset-inline-start:var(--x);transform:translateX(var(--tx,-50%));font-size:var(--fs-eyebrow);color:var(--muted);line-height:1}
.gi__tickrow>span:first-child{transform:none}
.gi__tickrow>span:last-child{transform:translateX(-100%)}
.gi__axislabel{margin-top:6px;text-align:center;font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-inline-start:var(--gi-label)}
.gi__note{color:var(--muted);font-size:var(--fs-eyebrow);line-height:1.6}
/* R03: one plain sentence under the chart (sphalerite near the workable limit → lead, not zinc, from old tailings) */
.gi__aside{color:var(--ink-2);font-size:var(--fs-small);line-height:1.55;max-width:64ch}

@media (max-width:719.98px){
  .gi__chart{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .gi__tickrow{grid-template-columns:1fr}
  .gi__tickrow>span{grid-column:1}
  .gi__legend{gap:4px var(--sp-4);font-size:13px}
  .gi__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label val" "track track";min-height:0;padding-bottom:12px}
  .gi__label{grid-area:label;padding-block:10px 4px}
  .gi__val{grid-area:val;align-items:flex-end;padding-block:10px 4px}
  .gi__track{grid-area:track;min-height:28px;align-self:auto}
  .gi__sym{font-size:20px;min-width:3.2ch}
  .gi__cc{font-size:20px}
  .gi__axislabel{padding-inline-start:0}
}

/* calculator */
.cc{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
@media (min-width:1200px){.cc{padding:var(--sp-6)}}
.cc .eyebrow{margin-bottom:0}
.cc__intro{color:var(--ink-2);max-width:40ch}
.cc__grid{display:grid;gap:var(--sp-4)}
@media (min-width:480px){.cc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cc__out{display:flex;flex-direction:column;gap:6px;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.cc__k{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cc__result{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.cc__value{font-family:var(--font-display);font-weight:700;font-size:var(--fs-figure);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);transition:color var(--t-fast)}
.cc__value.is-empty{color:var(--muted)}
.cc__verdict{font-size:var(--fs-eyebrow)}
.cc__formula{color:var(--muted)}
.cc__note{color:var(--ink-2);max-width:44ch}
html:not(.js) .cc__intro,html:not(.js) .cc__out,html:not(.js) .cc__grid{display:none}
html:not(.js) .cc::after{content:"The calculator needs JavaScript. The chart above holds the six reference values.";font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--muted)}

/* gravity-first block (text + datasheet; R03: no reagents, grind only to liberation) */
.gravity__photo{display:grid;gap:var(--sp-6) var(--gutter);margin-top:var(--sp-8);align-items:center}
/* 6/6: the people photo sits smaller than its 707px source instead of being upscaled at 7/12 */
@media (min-width:1024px){.gravity__photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--sp-9)}}
.gravity__text{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.gravity__text .eyebrow{margin-bottom:0}
.gravity__text p{color:var(--ink-2);max-width:48ch}
.gravity__text .datasheet{width:100%;margin-top:var(--sp-2)}

/* ============ 3 · Motion kill switches · print ============ */
@media (prefers-reduced-motion:reduce){
  .gi__bar{transition:none;transform:translateY(-50%) scaleX(1)}
  .ore::before{transition:none}
}
html[data-motion="off"] .gi__bar{transition:none;transform:translateY(-50%) scaleX(1)}
@media print{
  .gi__controls,.gi__reset,.cc__intro{display:none}
  .gi__bar{transform:translateY(-50%) scaleX(1) !important;transition:none !important}
  .gi__chart,.cc,.ore{break-inside:avoid}
  .gi__track{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* R02.1 — the gravity-first block without its photograph: text left, datasheet right (datasheet spans the text rows) */
.gravity__photo{border-top:1px solid var(--line);padding-top:var(--sp-7)}
.gravity__text p{max-width:60ch}
@media (min-width:1024px){
  .gravity__photo{grid-template-columns:minmax(0,1fr)}
  .gravity__text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--sp-8);row-gap:var(--sp-3);align-items:start}
  .gravity__text>*{grid-column:1}
  .gravity__text .datasheet{grid-column:2;grid-row:1/span 6;margin-top:0;align-self:start}
}