/* BENEFSAN — sustainability.css (sustainability.html = "Tailings & waste", R03). Loaded after main.css, unlayered. Tokens only.
   The only px values below are SVG viewBox units (02 · Flow, 03 · Water) — they are not CSS font sizes. */

/* ---------- footnote marks (quote cite → footnote) ---------- */
.fn{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;color:var(--gold-text-sm);text-decoration:none;margin-inline-start:2px;padding:2px 3px;border-radius:2px;vertical-align:baseline;text-transform:none;letter-spacing:0}
.fn:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
sup{line-height:0}

/* ---------- 01 · Vision: four target cards (2 × 2) beside one figure ---------- */
.vision{align-items:start}
.targets{display:grid;gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:599.98px){.targets{grid-template-columns:1fr}}
.target{gap:var(--sp-3)}
.target__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.target__title{margin-top:var(--sp-1)}
.target .card__body{text-wrap:pretty}
.vision__photo .fig img{aspect-ratio:677/499}
@media (max-width:1023.98px){.vision__photo{max-width:640px}}

/* ---------- 02 · Flow: dump → inert residue ---------- */
.flow-figure{margin:0;padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
@media (min-width:1024px) and (max-width:1199.98px){.flow-figure{padding-inline:var(--sp-4)}}
@media (min-width:1200px){.flow-figure{padding:var(--sp-6) var(--sp-7)}}
.flow-stage svg{display:block;width:100%;height:auto}
.flow-stage--stacked{display:none;max-width:460px;margin-inline:auto}
.flow-hint{display:none;margin-top:var(--sp-3);font-size:var(--fs-eyebrow);letter-spacing:.02em;color:var(--muted)}
/* <720: the stacked drawing bleeds over the panel padding so the type stays large enough */
@media (max-width:719.98px){
  .flow-stage--wide{display:none}
  .flow-stage--stacked{display:block;max-width:none;width:calc(100% + 2 * var(--sp-5));margin-inline:calc(-1 * var(--sp-5))}
}
/* 720–1023: the wide drawing keeps its scale and scrolls sideways (sustainability.js makes the scroller focusable only while it overflows) */
@media (min-width:720px) and (max-width:1023.98px){
  .flow-stage--wide{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:var(--sp-3);scrollbar-width:thin}
  .flow-stage--wide svg{min-width:1080px}
  .flow-hint{display:block}
}
.flow-stage--wide:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* SVG type is set in viewBox units (wide 1200 units, stacked 480 units): rendered px = units × (svg width ÷ viewBox width).
   Per breakpoint the two custom properties are raised so the block titles render at ≥12px:
   ≥1440 scale ≈.98–1.01 (13 → 12.7px) · 1200–1439 .81–1.01 (16 → 13–16px) · 1024–1199 .76–.86 (16 → 12.2–13.8px; the
   secondary sub-labels sit at 11.4px right at 1024) · 720–1023 the svg is ≥1080px wide, scale .9 (14 → 12.6px) · stacked at 390px ≈ .73 (17 → 12.4px) */
.flow-stage{--fl-fs:13px;--fl-fs-sm:12.5px}
@media (min-width:1024px) and (max-width:1439.98px){.flow-stage--wide{--fl-fs:16px;--fl-fs-sm:15px}}
@media (min-width:720px) and (max-width:1023.98px){.flow-stage--wide{--fl-fs:14px;--fl-fs-sm:13.5px}}
.flow-stage--stacked{--fl-fs:17px;--fl-fs-sm:13.5px}
@media (max-width:479.98px){
  .flow--stacked .fl-unit .fl-sub{display:none}
  .flow--stacked .fl-unit .fl-lbl{transform:translateY(9px)}
}
.flow .fl-box{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.flow .fl-box--gold{stroke:var(--gold);stroke-width:2}
.flow .fl-lbl{font-size:var(--fl-fs);font-weight:500;fill:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.flow .fl-lbl--gold{fill:var(--gold-deep)}
.flow .fl-sub,.flow .fl-note{font-size:var(--fl-fs-sm);fill:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.flow .fl-note--gold{fill:var(--gold-deep);font-weight:500}
.flow .fl-hdr{font-size:var(--fl-fs-sm);fill:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.flow .fl-rule{stroke:var(--line);stroke-width:1}
.flow .fl-line{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow .fl-line--proc{stroke:var(--ink)}
.flow .fl-line--val{stroke:var(--gold);stroke-width:2.5}
.flow .fl-line--res{stroke:var(--tailings)}
.flow .fl-line--water{stroke:var(--water);stroke-dasharray:6 6}
.flow .fl-dot{fill:var(--water)}
.flow .fl-m--proc{fill:var(--ink)}.flow .fl-m--val{fill:var(--gold)}.flow .fl-m--res{fill:var(--tailings)}.flow .fl-m--water{fill:var(--water)}
/* draw on reveal (sustainability.js adds .is-drawing, then .is-drawn): lines draw in order (--i, pathLength=1), blocks and notes
   fade in after their line, the water fades in last and keeps flowing; paused off-screen. Without JS the drawing is simply complete. */
html.js .flow.is-drawing .fl-line--proc,html.js .flow.is-drawing .fl-line--val,html.js .flow.is-drawing .fl-line--res{stroke-dasharray:1;stroke-dashoffset:1;animation:fl-draw var(--t-draw) var(--ease) forwards;animation-delay:calc(var(--i,0) * 120ms)}
html.js .flow.is-drawing .fl-dot{opacity:0;animation:fl-fade .4s var(--ease) forwards;animation-delay:calc(var(--i,0) * 120ms + .3s)}
html.js .flow.is-drawing .fl-line--water{opacity:0;animation:fl-fade .4s var(--ease) forwards,fl-flow 1.2s linear infinite;animation-delay:calc(var(--i,0) * 120ms + .3s),0s}
html.js .flow.is-drawing .fl-unit,html.js .flow.is-drawing .fl-note,html.js .flow.is-drawing .fl-hdrs{opacity:0;animation:fl-fade .32s var(--ease) forwards;animation-delay:calc(var(--i,0) * 120ms + .45s)}
html.js .flow.is-drawn .fl-line--water{animation:fl-flow 1.2s linear infinite}
.flow.is-offscreen .fl-line--water{animation-play-state:paused}
@keyframes fl-draw{to{stroke-dashoffset:0}}
@keyframes fl-fade{to{opacity:1}}
@keyframes fl-flow{to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion:reduce){
  html.js .flow.is-drawing .fl-line--proc,html.js .flow.is-drawing .fl-line--val,html.js .flow.is-drawing .fl-line--res{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  html.js .flow.is-drawing .fl-dot,html.js .flow.is-drawing .fl-unit,html.js .flow.is-drawing .fl-note,html.js .flow.is-drawing .fl-hdrs{opacity:1;animation:none}
  .flow .fl-line--water{animation:none !important}
}
/* QA kill switch (?motion=off → html[data-motion]) */
html[data-motion="off"] .flow .fl-line--proc,html[data-motion="off"] .flow .fl-line--val,html[data-motion="off"] .flow .fl-line--res{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
html[data-motion="off"] .flow .fl-dot,html[data-motion="off"] .flow .fl-unit,html[data-motion="off"] .flow .fl-note,html[data-motion="off"] .flow .fl-hdrs{opacity:1;animation:none}
html[data-motion="off"] .flow .fl-line--water{animation:none}
/* caption + line key */
.flow-figure figcaption{margin-top:var(--sp-5);padding-inline-start:12px;border-inline-start:2px solid var(--gold);font-size:var(--fs-small);line-height:1.45;color:var(--muted);text-wrap:pretty;max-width:var(--reading)}
.flow-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.flow-legend li{display:inline-flex;align-items:center;gap:8px}
.flow-legend i{display:inline-block;width:22px;height:0;border-top:2px solid var(--ink)}
.flow-legend i.is-val{border-top-width:3px;border-top-color:var(--gold)}
.flow-legend i.is-res{border-top-color:var(--tailings)}
.flow-legend i.is-water{border-top-style:dashed;border-top-color:var(--water)}

/* ---------- 03 · Water: closed-loop diagram ---------- */
.water{align-items:start}
.water__diagram{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
@media (min-width:1200px){.water__diagram{padding:var(--sp-6)}}
.loop-figure .loop{display:block;width:100%;height:auto;max-width:760px;margin-inline:auto}
.loop-figure img{display:none}
/* draw-in (1 → 0 on the pathLength=1 path) before the flow starts; the dash pattern is restored once drawn */
html.js .loop-figure.is-drawing .loop__water{stroke-dasharray:1 1;stroke-dashoffset:1;animation:sust-loop-draw var(--t-draw) var(--ease) forwards}
html.js .loop-figure.is-drawing .loop__arrow{opacity:0}
html.js .loop-figure.is-drawn .loop__arrow{opacity:1;transition:opacity var(--t-base) var(--ease)}
@keyframes sust-loop-draw{to{stroke-dashoffset:0}}
/* QA kill switch (?motion=off): the SVG's own reduced-motion query cannot see html[data-motion] */
html[data-motion="off"] .loop-figure .loop__water{animation:none;stroke-dashoffset:0}
/* stage emphasis: active node solid gold outline + light fill; others keep the ink outline */
.loop-figure .loop__node.is-active .loop__box{stroke:var(--gold);stroke-width:2;fill:var(--bg-2)}
.loop-figure .loop__node.is-active .loop__idx{fill:var(--gold-deep)}
.loop-figure .loop__node{outline:none}

/* SVG type is set in viewBox units (800 units wide), so rendered px = units × (svg width ÷ 800).
   The inline <style> sizes (mono 15 / title 20 / centre 28) suit scale ≥ .80: ≥1200px (.80–.95 → 12–14.3px mono)
   and 900–1023px (svg capped at 760px → .95). The ranges below render smaller and get bigger units:
   720–899px (.74–.95) and 1024–1199px (.72–.80) → mono 17 = 12.2–16px, title 22 = 15.8–21px. */
@media (min-width:720px) and (max-width:899.98px),(min-width:1024px) and (max-width:1199.98px){
  .loop-figure .loop__sub,.loop-figure .loop__note,.loop-figure .loop__eyebrow,.loop-figure .loop__idx{font-size:17px}
  .loop-figure .loop__sub,.loop-figure .loop__note{letter-spacing:.02em}
  .loop-figure .loop__title{font-size:22px}
}
/* phones: the diagram takes the full panel width (bleeds over the panel padding) and sustainability.js swaps in the
   tight viewBox (640 units wide) — 390px → scale .55, 479px → .69. Without JS the 800-unit box gives .44 at 390px.
   Sub-lines, notes, indices and the unlabelled make-up / residue arrows are dropped; the caption and buttons carry them. */
@media (max-width:719.98px){
  .loop-figure .loop__sub,.loop-figure .loop__note,.loop-figure .loop__eyebrow,.loop-figure .loop__idx,.loop-figure .loop__aux{display:none}
  .loop-figure .loop{max-width:none;width:calc(100% + 2 * var(--sp-5));margin-inline:calc(-1 * var(--sp-5))}
  .loop-figure .loop__title{font-size:30px}   /* 13.1px without JS at 390, 16.4px with the tight viewBox */
  .loop-figure .loop__centre{font-size:30px}
}
@media (min-width:480px) and (max-width:719.98px){
  .loop-figure .loop__title{font-size:24px}   /* 440px panel: 13.2px without JS, 16.5px with the tight viewBox */
  .loop-figure .loop__centre{font-size:26px}
}

/* stage buttons (keyboard path) + the swapped one-liner */
.loop-stages{display:flex;flex-direction:column;gap:var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.loop-stages__btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
/* label size mirrors the global .btn (Inter 600 15px — the system's label size, VD §3) */
.loop-stage{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;padding:8px 14px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);font:600 15px/1 var(--font-body);cursor:pointer;text-align:start;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.loop-stage__idx{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.1em;color:var(--gold-deep)}
.loop-stage:hover{border-color:var(--ink);color:var(--ink)}
.loop-stage[aria-pressed="true"]{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.loop-stage[aria-pressed="true"] .loop-stage__idx{color:var(--gold)}
.loop-stages__note{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);min-height:calc(2 * 1.55 * var(--fs-body));text-wrap:pretty;max-width:60ch}
@media (max-width:719.98px){
  .loop-stages__btns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* progressive enhancement: buttons + live note need JS; the static list stands in without it */
html:not(.js) .loop-stages{display:none}
html.js .loop-notes-static{display:none}
.loop-notes-static{margin-top:var(--sp-2)}
.loop-notes-static>div{grid-template-columns:110px 1fr}

/* duties list (right column): icon · name · index, hairline rows */
.water__duties .eyebrow{margin-bottom:var(--sp-4)}
.duties{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.duty{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4);padding:14px 0;border-bottom:1px solid var(--line)}
.duty__icon{color:var(--navy);width:36px;height:36px}
.duty__name{font:600 var(--fs-body)/1.3 var(--font-body);color:var(--ink)}
.duty__idx{font-size:var(--fs-eyebrow);letter-spacing:.1em;color:var(--muted)}
.water__foot{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
@media (min-width:1024px){.water__duties{padding-top:var(--sp-2)}}
@media (max-width:1023.98px){.water__duties{max-width:560px}}

/* ---------- 04 · Levers: 3 × 2 icon rows + the one sourced aside ---------- */
.levers{display:grid;gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr))}
.levers--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lever{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) 0 var(--sp-5);border-top:1px solid var(--line);min-width:0}
.lever__icon{color:var(--navy);width:36px;height:36px;margin-top:2px}
.lever__title{font:600 var(--fs-h4)/1.25 var(--font-body);color:var(--ink);margin-bottom:var(--sp-1)}
.lever__line{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
@media (max-width:719.98px){
  .levers,.levers--3{grid-template-columns:1fr;gap:0}
  .lever{padding:var(--sp-4) 0}
  .lever:last-child{border-bottom:1px solid var(--line)}
}
/* the aside: a compact navy statement panel; the footnote sits under it */
.energy-aside{max-width:720px;margin-top:var(--sp-8);padding:var(--sp-6)}
@media (min-width:1200px){.energy-aside{padding:var(--sp-7)}}
.energy-aside .eyebrow{margin-bottom:var(--sp-5)}
.energy-aside .quote{max-width:none;border-color:var(--gold)}
.energy-aside .quote p{font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);font-weight:600;color:var(--on-navy)}
.energy-aside .quote cite{color:var(--on-navy-muted)}
.energy-aside .fn{color:var(--gold)}
.energy-aside .fn:hover{color:var(--on-navy)}
.energy-aside__note{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:1.55;color:var(--on-navy-muted);text-wrap:pretty}
.footnote{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-3);max-width:720px;margin-top:var(--sp-4);padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-eyebrow);line-height:1.6;color:var(--muted)}
.footnote__n{font-weight:500;color:var(--gold-text-sm)}
.footnote cite{font-style:normal;color:var(--ink-2)}
.footnote:target{background:var(--bg-3);outline:0}

/* ---------- 05 · Commitments (navy) ---------- */
.commitments{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023.98px){.commitments{grid-template-columns:1fr}}
.commit{padding:var(--sp-6);gap:var(--sp-3)}
.commit .icon--glyph{width:48px;height:48px;color:var(--gold);margin-bottom:var(--sp-3)}
.commit .card__idx{color:var(--gold)}
.commit .card__title{margin-top:0}
.commit .card__body{text-wrap:pretty}
.band--navy .sec-head .lead{color:var(--on-navy-muted)}

/* ---------- print ---------- */
@media print{
  .loop-stages,.loop-notes-static,.flow-hint{display:none !important}
  html.js .loop-notes-static{display:block !important}
  .loop-figure .loop__water{animation:none !important;stroke-dashoffset:0 !important}
  .flow-stage--wide{display:block !important;overflow:visible !important}
  .flow-stage--wide svg{min-width:0 !important}
  .flow-stage--stacked{display:none !important}
  .flow .fl-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;opacity:1 !important}
  .flow .fl-line--water{stroke-dasharray:6 6 !important}
  .flow .fl-unit,.flow .fl-note,.flow .fl-hdrs,.flow .fl-dot{opacity:1 !important;animation:none !important}
  .energy-aside{background:var(--bg) !important;color:var(--ink) !important}
  .energy-aside *{color:var(--ink) !important}
}