/* ==========================================================================
   THE DUST PENALTY — components.css   (Layer 2/3)
   Content + evidence kit, in the unified language. Landing components
   (cinematic) and entry components (datasheet) share one token set.
   ========================================================================== */

/* ---- RUBRIC STRIP — "what this entry evidences" (entries) --------------- */
.rubric-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--sdg7);border-radius:var(--radius);
  padding:.8rem 1rem;margin:var(--s5) 0 var(--s6)}
.rubric-strip__label{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.rubric-strip__tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:600;color:var(--ink-700);
  background:var(--sand-50);border:1px solid var(--line);border-radius:var(--radius);padding:.2rem .6rem}
.rubric-strip__tag b{color:var(--sdg7-deep);font-family:var(--mono);font-size:.74rem}

/* ---- PROVENANCE CHIPS — Measured / Calculated / Sourced ---------------- */
.prov{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;font-family:var(--mono);
  font-size:.68rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:.12em .5em;
  border-radius:var(--radius);line-height:1.5;white-space:nowrap;border:1px solid}
.prov::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.prov--measured{color:#0c6b75;background:rgba(38,189,226,.12);border-color:rgba(38,189,226,.4)}
.prov--calculated{color:var(--sdg7-deep);background:rgba(253,183,20,.14);border-color:rgba(253,183,20,.45)}
.prov--sourced{color:var(--blue-500);background:rgba(35,110,144,.1);border-color:rgba(35,110,144,.35)}
.section--dark .prov,.premise .prov,.foot .prov{filter:brightness(1.4)}
/* inline citation [n] */
.cite{font-family:var(--mono);font-size:.72em;vertical-align:super;color:var(--blue-500);padding:0 1px}
.cite:hover{text-decoration:underline}

/* ---- DATASHEET HEADER + META GRID (entries) ---------------------------- */
.doc-head{border-bottom:2px solid var(--ink-900);padding-bottom:var(--s5);margin-bottom:var(--s6)}
.doc-title{font-family:var(--display);font-size:clamp(2.05rem,4.2vw + 1rem,2.95rem);font-weight:800;
  line-height:1.04;letter-spacing:-.02em;color:var(--ink-900);margin:var(--s3) 0 var(--s4)}
.doc-sub{font-size:var(--t-lede);color:var(--ink-600);max-width:44rem;line-height:1.45}
.meta-grid{margin-top:var(--s5);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.meta-grid>div{display:flex;gap:var(--s3);padding:.5rem 0;border-bottom:1px solid var(--line)}
.meta-grid dt{flex:0 0 8.2rem;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-400);padding-top:.12em}
.meta-grid dd{font-size:var(--t-sm);color:var(--ink-700)}
@media(min-width:760px){.meta-grid>div:nth-child(odd){padding-right:var(--s6)}}
@media(max-width:560px){.meta-grid{grid-template-columns:1fr}.meta-grid dt{flex-basis:7rem}}

/* ---- SECTION HEAD (entries) -------------------------------------------- */
.sec{margin-top:var(--s8);scroll-margin-top:calc(var(--bar-h) + 1rem)}
.sec-head{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.sec-no{font-family:var(--mono);font-size:.92rem;color:var(--sdg7-deep);font-weight:500}
.sec-head h2{font-family:var(--display);font-size:var(--t-h2);font-weight:700;letter-spacing:-.01em;color:var(--ink-900)}
.lede{font-size:var(--t-lede);color:var(--ink-700);line-height:1.5}

/* ---- IMAGE PLATE + CAPTION (entries) ----------------------------------- */
.plate{position:relative;margin:var(--s6) 0 var(--s3);border:1px solid var(--line-strong);
  border-radius:var(--radius);overflow:hidden;background:var(--blue-900)}
.plate__img{width:100%;height:clamp(200px,28vw,340px);object-fit:cover;object-position:center 40%}
.cap{font-size:var(--t-cap);color:var(--ink-500);line-height:1.45;padding:.65rem .85rem;background:var(--sand-50);border:1px solid var(--line);border-top:0}
.cap .mono{color:var(--ink-700);margin-right:.5rem;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}

/* ---- FIGURE / EMBED PLACEHOLDERS --------------------------------------- */
.figph{margin:var(--s5) 0}
.figph__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:172px;padding:var(--s5);text-align:center;
  background:repeating-linear-gradient(135deg,var(--sand-50),var(--sand-50) 11px,#F0E7D6 11px,#F0E7D6 22px);
  border:1.5px dashed var(--line-strong);border-radius:var(--radius)}
.figph__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sdg7-deep);
  background:var(--paper);border:1px solid var(--line-strong);padding:.2rem .6rem;border-radius:var(--radius)}
.figph__hint{font-size:var(--t-cap);color:var(--ink-500);max-width:42ch}
.embedph{display:grid;place-items:center;gap:.6rem;min-height:160px;padding:var(--s5);text-align:center;
  border:1.5px dashed var(--blue-500);border-radius:var(--radius);background:rgba(35,110,144,.05);color:var(--blue-600)}
.embedph__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* ---- RESEARCH-QUESTION PANEL ------------------------------------------- */
.rq{background:var(--sand-50);border:1px solid var(--line);border-left:5px solid var(--sdg7);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem)}
.rq__label{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--sdg7-deep)}
.rq__q{font-family:var(--display);font-weight:600;color:var(--ink-900);font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.3;margin:.5rem 0 0;max-width:46rem;letter-spacing:-.01em}
.rq__subs{margin-top:1.6rem;display:grid;gap:.7rem;counter-reset:q;max-width:46rem}
.rq__subs li{counter-increment:q;position:relative;padding-left:2.6rem;color:var(--ink-700)}
.rq__subs li::before{content:"Q"counter(q);position:absolute;left:0;top:.05em;font-family:var(--mono);font-size:.74rem;
  color:#fff;background:var(--sdg7-deep);width:1.9rem;height:1.5rem;border-radius:4px;display:grid;place-items:center}

/* ---- CALLOUT / NOTE ----------------------------------------------------- */
.callout{margin:var(--s5) 0;background:var(--sand-100);border:1px solid var(--line);border-left:3px solid var(--blue-600);
  border-radius:var(--radius);padding:var(--s4) var(--s5)}
.callout__label{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);margin-bottom:.4rem}
.callout p{font-size:var(--t-sm);max-width:none}
.callout--verdict{border-left-color:var(--sdg7);background:rgba(253,183,20,.08)}
.callout--verdict .callout__label{color:var(--sdg7-deep)}
.callout--insight{border-left-color:#26BDE2;background:rgba(38,189,226,.07)}
.callout--insight .callout__label{color:#0c6b75}
.callout--ethics{border-left-color:var(--bh-red);background:rgba(206,17,38,.05)}
.callout--ethics .callout__label{color:var(--bh-red)}
.note{display:flex;gap:.6rem;align-items:baseline;font-size:var(--t-sm);color:var(--ink-600);
  background:#FBEFD2;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.7rem .9rem;margin-top:var(--s4);max-width:var(--measure)}
.note b,.note__tag{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--sdg7-deep);flex:0 0 auto}

/* ---- PREMISE / BENTO FACTS (dark band) --------------------------------- */
.premise{background:var(--night-800);color:var(--on-blue);position:relative;overflow:hidden}
.premise::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--spectrum)}
.premise .kicker{color:var(--sdg7-soft)}.premise .h2{color:#fff}.premise p{color:var(--on-blue-dim)}
.facts{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.fact{background:var(--night-800);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.fact__n{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:var(--sdg7)}
.fact__t{font-weight:600;color:#fff}.fact__d{font-size:.9rem;color:var(--on-blue-dim)}
.fact--red .fact__n{color:#FF6B7A}
@media(max-width:760px){.facts{grid-template-columns:1fr}}

/* ---- SDG-7 BADGE + TARGETS + ASIDE ------------------------------------- */
.sdg__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2.2rem}
@media(max-width:860px){.sdg__grid{grid-template-columns:1fr}}
.sdg7-badge{display:inline-flex;flex-direction:column;justify-content:space-between;width:108px;height:108px;
  background:var(--sdg7);color:#3a2a00;border-radius:10px;padding:.7rem .75rem;margin-bottom:1.1rem}
.sdg7-badge .g{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.sdg7-badge .n{font-family:var(--display);font-weight:900;font-size:2.5rem;line-height:.8}
.sdg7-badge .l{font-family:var(--display);font-weight:700;font-size:.62rem;line-height:1.05;text-transform:uppercase}
.targets{margin-top:1.2rem;display:grid;gap:.7rem}
.target{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;padding:.8rem 1rem;
  background:var(--sand-50);border:1px solid var(--line);border-radius:7px}
.target b{font-family:var(--mono);color:var(--sdg7-deep);font-size:.85rem}
.target span{font-size:.92rem;color:var(--ink-700)}
.sdg__aside{background:#fff;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;position:sticky;top:calc(var(--bar-h) + 1.2rem)}
.sdg__aside img{width:100%;padding:1.4rem 1.4rem 0}
.sdg__aside .spectrum-bar{height:5px;background:var(--spectrum);margin-top:1.2rem}
.sdg__aside .body{padding:1.1rem 1.4rem 1.4rem}
.sdg__aside p{font-size:.9rem;color:var(--ink-500);max-width:none}

/* ---- CONTEXT PARALLAX BAND --------------------------------------------- */
.ctx{position:relative;height:clamp(340px,52vw,560px);overflow:hidden;background:var(--night-900)}
.ctx__img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;object-position:center 45%;will-change:transform}
.ctx__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,30,.25),rgba(7,12,30,.8))}
.ctx__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.5rem,4vw,3rem);color:var(--on-blue);max-width:var(--maxw);margin:0 auto}
.ctx__cap .mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sdg7-soft)}
.ctx__cap p{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.7rem);max-width:40rem;margin-top:.5rem;line-height:1.3;text-wrap:balance}
.ctx__cred{display:block;margin-top:.6rem;font-size:.78rem;color:var(--on-blue-dim);font-weight:400;font-family:var(--mono)}

/* ---- ROADMAP TIMELINE --------------------------------------------------- */
.road__spectrum{height:4px;background:var(--spectrum);border-radius:2px;max-width:var(--measure);margin-top:1rem}
.timeline{margin-top:2.4rem;position:relative;padding-left:.5rem}
.timeline::before{content:"";position:absolute;left:1.55rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(180deg,var(--sdg7),var(--line-strong))}
.step{position:relative;display:grid;grid-template-columns:3.3rem 1fr;gap:1.1rem;padding:.5rem 0 1.6rem}
.step__no{position:relative;z-index:1;width:3.3rem;height:3.3rem;border-radius:50%;background:var(--paper);
  border:2px solid var(--line-strong);display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--ink-400);font-size:1.05rem}
.step.is-now .step__no{background:var(--sdg7);border-color:var(--sdg7-deep);color:#3a2a00}
.step__card{display:block;background:#fff;border:1px solid var(--line);border-radius:9px;padding:1.05rem 1.25rem;transition:transform .18s,box-shadow .18s,border-color .18s}
a.step:hover .step__card,a.step__card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(16,24,38,.09);border-color:var(--line-strong)}
.step__title{display:block;font-family:var(--display);font-weight:700;color:var(--ink-900);font-size:1.05rem;line-height:1.25}
.step__desc{display:block;font-size:.9rem;color:var(--ink-500);margin-top:.25rem}
.step__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
@media(max-width:560px){.step{grid-template-columns:2.7rem 1fr;gap:.8rem}.step__no{width:2.7rem;height:2.7rem}.timeline::before{left:1.3rem}}

/* ---- DOCUMENT LIST (styled bullets — base reset strips list-style) ------ */
.doclist{display:grid;gap:.5rem;max-width:var(--measure);margin:var(--s4) 0;color:var(--ink-700)}
.doclist li{position:relative;padding-left:1.5rem}
.doclist li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;
  background:var(--sdg7);border-radius:2px;transform:rotate(45deg)}

/* ---- INITIATIVE CARDS (regional initiatives, Entry 2) ------------------- */
.inits{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:var(--s5)}
@media(max-width:700px){.inits{grid-template-columns:1fr}}
.init{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem 1.15rem;
  transition:border-color .15s,box-shadow .15s}
.init:hover{border-color:var(--line-strong);box-shadow:0 8px 22px rgba(16,24,38,.07)}
.init__k{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sdg7-deep);background:rgba(253,183,20,.14);
  border:1px solid #F2DDA8;border-radius:4px;padding:.12em .55em;margin-bottom:.5rem}
.init__t{font-family:var(--display);font-weight:700;color:var(--ink-900);font-size:.98rem;line-height:1.3}
.init__d{font-size:.88rem;color:var(--ink-500);margin-top:.3rem}
.init__d .cite{font-size:.72em}

/* ---- TAGS / CHIPS ------------------------------------------------------- */
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;padding:.16em .55em;
  border-radius:4px;background:var(--sand-150);color:var(--ink-600);border:1px solid var(--line)}
.tag--w{background:rgba(253,183,20,.16);color:var(--sdg7-deep);border-color:#F2DDA8}
.evchip{font-family:var(--mono);font-size:.74rem;background:var(--sand-50);border:1px solid var(--line);border-radius:5px;padding:.2em .6em;color:var(--ink-700)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* ---- VIVA-DEFENSE PANEL (farms Q&A 20%) -------------------------------- */
.viva{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin:var(--s4) 0;overflow:hidden}
.viva>summary{list-style:none;display:flex;gap:.7rem;align-items:center;padding:.85rem 1.1rem;cursor:pointer;
  font-family:var(--display);font-weight:700;color:var(--ink-900);font-size:1rem}
.viva>summary::-webkit-details-marker{display:none}
.viva>summary::before{content:"Q";flex:0 0 auto;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:5px;
  background:var(--blue-900);color:#fff;font-family:var(--mono);font-size:.8rem}
.viva__chev{margin-left:auto;color:var(--ink-400);transition:transform .2s}
.viva[open] .viva__chev{transform:rotate(180deg)}
.viva__a{padding:0 1.1rem 1.1rem 3.4rem;color:var(--ink-600);font-size:var(--t-sm)}
.viva__a p{max-width:none}
.viva-group{border-left:3px solid var(--sdg7);padding-left:var(--s4);margin:var(--s5) 0}

/* ---- STAT (count-up) ---------------------------------------------------- */
.stat{padding:1.3rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:left}
.premise .stat,.section--dark .stat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.stat__n{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1;color:var(--ink-900);letter-spacing:-.02em}
.premise .stat__n,.section--dark .stat__n{color:var(--sdg7)}
.stat__u{font-size:.55em;color:var(--ink-400);margin-left:2px}
.stat__l{margin-top:.6rem;font-size:var(--t-sm);color:var(--ink-500)}
.premise .stat__l,.section--dark .stat__l{color:var(--on-blue-dim)}
.stat__f{margin-top:.5rem}

/* ---- COMPARISON MATRIX (Entry 6) --------------------------------------- */
.matrix-wrap{overflow-x:auto;border:1px solid var(--line-strong);border-radius:var(--radius-lg)}
.matrix{width:100%;min-width:640px;border-collapse:collapse;background:#fff}
.matrix th,.matrix td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:var(--t-sm)}
.matrix thead th{background:var(--blue-900);color:var(--on-blue);font-family:var(--display);font-size:.92rem}
.matrix tbody th{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;background:var(--sand-50);width:180px;color:var(--ink-600)}
.matrix .win{color:#2c7a3f;font-weight:600}

/* ---- COMPARISON BARS ----------------------------------------------------
   NOTE: rows must use class "cbar", never "bar" — .bar is the fixed top
   navigation bar in main.css (position:fixed) and hijacks any element
   that reuses the name. */
.bars{display:grid;gap:1rem}
.cbar{display:block}
.bar__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:var(--t-sm)}
.bar__name{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-600)}
.bar__val{color:var(--ink-500);font-variant-numeric:tabular-nums}
.bar__track{height:13px;border-radius:7px;background:var(--sand-150);overflow:hidden;border:1px solid var(--line)}
.bar__fill{height:100%;width:0;border-radius:7px;background:var(--blue-500);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.bar__fill--gold{background:var(--sdg7)}
.bar__fill--red{background:var(--bh-red)}

/* ---- QUIZ / PRE-POST (Entry 8) ----------------------------------------- */
.quiz{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.2rem;margin:var(--s4) 0}
.quiz__q{font-family:var(--display);font-weight:700;color:var(--ink-900);margin-bottom:.7rem}
.quiz__row{display:flex;align-items:center;gap:.8rem;margin:.4rem 0;font-size:var(--t-sm)}
.quiz__opt{flex:0 0 130px;color:var(--ink-500)}
.quiz__meter{flex:1;height:10px;border-radius:6px;background:var(--sand-150);overflow:hidden}
.quiz__meter span{display:block;height:100%;width:0;background:#26BDE2;border-radius:6px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.quiz__pct{flex:0 0 44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-500)}

/* ---- REFERENCES --------------------------------------------------------- */
.reflist{counter-reset:ref;display:grid;gap:0}
.reflist li{counter-increment:ref;position:relative;padding:.7rem 0 .7rem 2.6rem;border-bottom:1px solid var(--line);font-size:var(--t-sm);line-height:1.5;max-width:50rem}
.reflist li::before{content:"["counter(ref)"]";position:absolute;left:0;top:.7rem;font-family:var(--mono);font-weight:500;color:var(--sdg7-deep)}
.reflist li:target{background:rgba(253,183,20,.12);border-radius:var(--radius)}

/* ---- ENTRY-5 INTERACTIVE SOILING SIMULATOR ----------------------------- */
.soilsim{border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;background:#fff;margin:var(--s5) 0}
.soilsim__stage{position:relative;background:linear-gradient(180deg,#0C1430 0%,#22305F 68%,#3b2c50 100%)}
.soilsim__canvas{display:block;width:100%;height:clamp(230px,34vw,310px)}
.soilsim__hud{position:absolute;top:.7rem;left:.8rem;display:flex;gap:.5rem;flex-wrap:wrap}
.soilsim__stat{background:rgba(7,12,30,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:.3rem .55rem;color:#fff;font-family:var(--mono);font-size:.7rem;line-height:1.35}
.soilsim__stat b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--sdg7)}
.soilsim__bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.16)}
.soilsim__bar span{display:block;height:100%;background:var(--sdg7);width:100%;transition:width .4s ease}
.soilsim__foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:var(--sand-50);border-top:1px solid var(--line)}
.soilsim__controls{display:flex;gap:.5rem;flex-wrap:wrap}
.soilsim__btn{font-family:var(--display);font-weight:700;font-size:.82rem;padding:.5rem .95rem;border-radius:var(--radius);border:1px solid var(--line-strong);background:#fff;color:var(--ink-900);cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.soilsim__btn:hover{border-color:var(--sdg7-deep);background:var(--sand-100);transform:translateY(-1px)}
.soilsim__btn--primary{background:var(--sdg7);border-color:var(--sdg7-deep);color:#3a2a00}
.soilsim__btn--clean{background:var(--blue-600);border-color:var(--blue-700);color:#fff}
.soilsim__btn--clean:hover{background:var(--blue-700);color:#fff}
.soilsim__note{font-size:var(--t-cap);color:var(--ink-500);font-family:var(--mono)}
/* v2 additions — status chip, schedule toggle, chart legend */
.soilsim__status{position:absolute;top:.7rem;right:.8rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:5px;
  border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(7,12,30,.55);backdrop-filter:blur(4px)}
.soilsim__status.is-soiling{color:var(--sdg7-soft);border-color:rgba(253,183,20,.5)}
.soilsim__status.is-washed{color:#8fe3ff;border-color:rgba(143,227,255,.5)}
.soilsim__toggle{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.74rem;color:var(--ink-600);cursor:pointer;user-select:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:.5rem .8rem;background:#fff}
.soilsim__toggle input{accent-color:var(--sdg7-deep);width:.95rem;height:.95rem;cursor:pointer}
.soilsim__toggle.is-on{background:rgba(253,183,20,.12);border-color:var(--sdg7-deep);color:var(--sdg7-deep)}
.soilsim__legend{display:flex;flex-wrap:wrap;gap:.9rem;padding:.55rem 1rem;background:var(--blue-950);
  font-family:var(--mono);font-size:.66rem;color:var(--on-blue-dim);letter-spacing:.03em}
.soilsim__legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:.35rem}
@media(max-width:640px){.soilsim__hud{gap:.35rem}.soilsim__stat{padding:.22rem .45rem}.soilsim__stat b{font-size:.92rem}}

/* ---- SCROLL REVEAL bridge (used by main.js) ---------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}[data-reveal][data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}