/* ============================================================
   Oil, Visualized  ·  css/concepts.css
   index.html only — the tab strip, the panel router, and the
   per-concept interactive components (01-10 + Support +
   Roadmap). Loaded after base.css.
   ============================================================ */

/* ============ TABS ============ */
nav.tabs{border-bottom:1px solid var(--hair);background:var(--paper)}
.tablist{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:.4rem 0;touch-action:pan-x;overscroll-behavior-x:contain}
.tablist::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;display:flex;align-items:baseline;gap:.5rem;
  background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--muted);
  padding:.55rem .85rem;border-radius:8px;position:relative;transition:color .15s,background .15s;
}
.tab .num{font-family:var(--mono);font-size:.68rem;font-weight:500;opacity:.7}
.tab:hover{color:var(--ink);background:var(--paper-2)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:-.42rem;height:2.5px;background:var(--survey);border-radius:2px;
}
.tab .badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair-2);border-radius:20px;padding:.1rem .4rem;opacity:.85}

/* ============ PANELS ============ */
.panel{display:none;animation:fade .35s ease both}
.panel[data-active="true"]{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ STUDIO (interactive) ============ */
.studio{
  margin-top:2.4rem;border:1px solid var(--hair);border-radius:var(--radius-lg);
  background:linear-gradient(var(--paper),var(--paper));overflow:hidden;
}
.studio-head{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--paper-2);
}
.controls{display:flex;gap:.6rem;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--hair-2);border-radius:30px;padding:3px}
.seg button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  border:0;background:none;cursor:pointer;color:var(--muted);padding:.42rem .8rem;border-radius:24px;transition:all .15s;
}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.viewseg button[aria-pressed="true"]{background:var(--survey);color:#fff}

.studio-body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:880px){.studio-body{grid-template-columns:1.45fr .9fr}}

.stage{padding:clamp(1.1rem,3vw,2rem);display:flex;align-items:center;justify-content:center;min-height:340px;background:
  repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.025) 31px,rgba(0,0,0,.025) 32px);}
.stage svg{width:100%;height:auto;max-width:560px}
.stage .view{display:none}
.stage .view[data-show="true"]{display:block}

.sidepanel{border-top:1px solid var(--hair);padding:clamp(1.1rem,3vw,1.6rem)}
@media(min-width:880px){.sidepanel{border-top:0;border-left:1px solid var(--hair)}}
.sidepanel h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:.2rem;letter-spacing:-.01em}
.sidepanel .hint{font-size:.92rem;color:var(--muted);margin-bottom:1.1rem}

.ownerbar{margin:.85rem 0 1.1rem}
.ownerbar .lbl{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;margin-bottom:.3rem}
.ownerbar .track{display:flex;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--hair-2)}
.ownerbar .track span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.68rem;font-weight:700;color:#fff}
.seg-carl{background:var(--carl)}
.seg-susan{background:var(--susan)}

.undiv{font-size:.82rem;color:var(--muted);font-style:italic;border-left:2px solid var(--hair-2);padding-left:.7rem;margin-top:.4rem}

.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.2rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.03em}
.legend i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:.4rem;vertical-align:-2px}

/* ============ ROADMAP / PLACEHOLDER PANELS ============ */
.comingsoon{padding:clamp(2.6rem,7vw,5rem) 0;max-width:62ch}
.comingsoon .status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair-2);border-radius:30px;padding:.32rem .8rem;margin-bottom:1.3rem}
.comingsoon .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--surface)}
.comingsoon h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.4rem+2.4vw,3rem);letter-spacing:-.025em;line-height:1.05}
.comingsoon p{margin-top:1.1rem;color:#322f29}
.willcover{margin-top:1.6rem;display:grid;gap:.6rem}
.willcover li{list-style:none;display:flex;gap:.7rem;align-items:baseline;font-size:.98rem}
.willcover li::before{content:"—";color:var(--survey);font-family:var(--mono)}

/* ============ ROADMAP TAB ============ */
.roadmap{padding:clamp(2.4rem,5vw,3.5rem) 0}
.roadmap .lede{max-width:60ch;margin:1rem 0 2.4rem;color:#322f29}
.tier{border-top:1px solid var(--hair);padding:1.6rem 0}
.tier-head{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.tier-num{font-family:var(--mono);font-size:.72rem;color:var(--survey);letter-spacing:.1em}
.tier h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.015em}
.tier .tier-sub{color:var(--muted);font-size:.95rem;flex-basis:100%;margin-top:.1rem}
.steps{margin-top:1rem;display:grid;gap:.55rem}
.step{display:flex;gap:.8rem;align-items:center;font-size:.97rem;padding:.55rem .8rem;border:1px solid var(--hair);border-radius:var(--radius);background:var(--paper)}
.step .chip{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .5rem;border-radius:20px;flex:0 0 auto}
.chip.live{background:var(--mineral);color:var(--paper)}
.chip.next{background:var(--surface);color:#3a2c10}
.chip.later{background:var(--paper-2);color:var(--muted);border:1px solid var(--hair-2)}
.step .t{flex:1}
.step .t small{display:block;color:var(--muted);font-size:.82rem;margin-top:.1rem}

/* ===== POOLING / DILUTION ===== */
.dil{margin-top:2.4rem;border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.dil-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1.1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.dil-control{display:flex;align-items:center;gap:.8rem;flex:1;min-width:240px}
.dil-control label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dil-control input[type=range]{flex:1;accent-color:var(--survey);min-width:120px}
.dil-control output{font-family:var(--mono);font-weight:700;font-size:.85rem;min-width:60px;text-align:right}
.dil-state{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--survey)}
/* Narrow screens. The header row's three items — nowrap label, slider with its
   own min-width, and a readout wide enough for its longest word — have a
   combined minimum wider than a phone in portrait. .dil clips its overflow, so
   the right edge of the longest readout ("Point of sale") was being cut off.
   Below 620px the row stacks: label and readout share the top line, slider
   takes the full width beneath. */
@media(max-width:619px){
  .dil-control{flex-wrap:wrap;row-gap:.5rem;min-width:0}
  .dil-control label{order:1;flex:1 1 auto;white-space:normal}
  .dil-control output{order:2;flex:0 0 auto;min-width:0;text-align:right}
  .dil-control input[type=range]{order:3;flex:1 0 100%;min-width:0}
}
.dil-body{padding:clamp(1.2rem,3vw,2rem)}
.unit-wrap{margin-bottom:1.6rem}
.wellmark{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink);margin-bottom:.35rem}
.wellmark span{display:inline-block;background:var(--paper-2);border:1px solid var(--hair-2);border-radius:6px;padding:.22rem .55rem}
.unitbar{display:flex;height:54px;border-radius:8px;overflow:hidden;border:1px solid var(--hair-2)}
.unitbar span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;transition:width .35s ease}
.seg-big{background:#C0613A}
.seg-small{background:#2F7E86}
.seg-others{background:#A39C8E;color:#2c2a25}
.unitscale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:.35rem}
.dil-metrics{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 1.3rem}
@media(min-width:620px){.dil-metrics{grid-template-columns:1fr 1fr}}
.metric{background:var(--paper-2);border:1px solid var(--hair);padding:1.1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0}
.metric-big{border-left:4px solid #C0613A}
.metric-small{border-left:4px solid #2F7E86}
.m-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.m-num{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.4rem+2vw,2.7rem);line-height:1.04;letter-spacing:-.02em;margin:.15rem 0 .1rem}
.m-delta{font-family:var(--mono);font-size:.72rem;margin:0;color:var(--muted)}
.m-delta.down{color:#A23A2A}
.m-delta.up{color:#1D7A52}
.m-delta.warn{color:#A23A2A}
.dil-readout{font-size:1.02rem;line-height:1.6;color:#322f29;border-top:1px solid var(--hair);padding-top:1.1rem;margin:0}
.dil-readout strong{font-weight:500}
.decision{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.3rem}
@media(min-width:680px){.decision{grid-template-columns:1fr 1fr}}
.dcol{border:1px solid var(--hair);padding:1.3rem 1.4rem;background:var(--paper);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.dcol-for{border-top:4px solid #1D7A52}
.dcol-against{border-top:4px solid #A23A2A}
.dcol-h{font-family:var(--display);font-weight:600;font-size:1.1rem;margin:0 0 .7rem}
.dcol-h strong{font-weight:800}
.dcol-for .dcol-h strong{color:#1D7A52}
.dcol-against .dcol-h strong{color:#A23A2A}
.dcol ul{list-style:none;display:grid;gap:.55rem;padding:0;margin:0}
/* The <li> is deliberately NOT a flex container. It used to be, with the bullet
   as the first flex item — but that blockifies every child, so an inline <em>
   mid-sentence became its own flex item and split the line into three
   side-by-side columns of wrapped text. On a phone that reads as the sentence
   scrambling. Absolute-positioned marker instead: the li stays a normal block
   and inline markup flows as text. Geometry matches the old flex version
   (6px dot, 15.6px text indent, dot sitting on the x-height). */
.dcol li{position:relative;padding-left:.98rem;font-size:.97rem;line-height:1.45}
.dcol li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%}
.dcol-for li::before{background:#1D7A52}
.dcol-against li::before{background:#A23A2A}
.aside-note{margin-top:1.6rem;font-size:.92rem;color:var(--muted);font-style:italic;border-left:2px solid var(--hair-2);padding-left:.9rem;line-height:1.55}

/* ===== SEPARATE TRACTS TIMELINE ===== */
.tl{margin-top:2.4rem;border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.tl-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.tl-steps{display:flex;gap:.5rem;align-items:center}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--hair-2);transition:background .2s,transform .2s}
.tl-dot.on{background:var(--survey);transform:scale(1.3)}
.tl-nav{display:flex;gap:.5rem}
.tl-nav button{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--hair-2);background:var(--paper);color:var(--ink);padding:.42rem .85rem;border-radius:24px;cursor:pointer;transition:all .15s}
.tl-nav button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.tl-nav button:disabled{opacity:.38;cursor:not-allowed}
.tl-body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:820px){.tl-body{grid-template-columns:1.05fr .95fr}}
.tl-stage{padding:clamp(1.2rem,3vw,2rem);display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.025) 31px,rgba(0,0,0,.025) 32px)}
.tl-stage svg{width:100%;height:auto;max-width:340px}
.tl-stage svg [id]{transition:opacity .35s ease,fill .35s ease}
.tl-info{padding:clamp(1.3rem,3vw,1.7rem);border-top:1px solid var(--hair);display:flex;flex-direction:column;justify-content:center}
@media(min-width:820px){.tl-info{border-top:0;border-left:1px solid var(--hair)}}
.tl-badge{align-self:flex-start;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:var(--mineral);color:var(--paper);border-radius:20px;padding:.26rem .7rem;margin-bottom:.85rem}
.tl-title{font-family:var(--display);font-weight:700;font-size:1.25rem;margin-bottom:.55rem;letter-spacing:-.01em}
.tl-cap{font-size:1rem;line-height:1.62;color:#322f29;margin:0}
/* ===== FRACTION BARS (03) ===== */
.fracbar{margin:1.1rem 0}
.fracbar .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-bottom:.3rem}
.fracbar .track{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--hair-2)}
.fracbar .track span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;font-weight:700;color:#fff;border-right:1px solid rgba(255,255,255,.5)}
.fracbar .track span:last-child{border-right:0}
/* ===== LEASE TIMELINE (04) ===== */
.lease-tl{margin-top:2rem;display:grid;gap:0;position:relative;padding-left:26px}
.lease-tl::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--hair-2)}
.lt-item{position:relative;padding:0 0 1.5rem 1rem}
.lt-item::before{content:"";position:absolute;left:-24px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--surface)}
.lt-item.alive::before{border-color:#1D7A52}
.lt-item.dead::before{border-color:#A23A2A}
.lt-item .when{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lt-item h4{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:.2rem 0 .3rem;letter-spacing:-.01em}
.lt-item p{font-size:.96rem;color:#322f29;margin:0;line-height:1.55}
/* ===== DOI STAGES (06) ===== */
.doi-stage{margin-top:2rem;border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden}
.doi-stage .ds-head{padding:.85rem 1.3rem;background:var(--paper-2);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.doi-stage .ds-head .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--survey)}
.doi-stage .ds-head .t{font-family:var(--display);font-weight:700;font-size:1.1rem}
.ds-body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:780px){.ds-body{grid-template-columns:1fr 1fr}}
.ds-viz{padding:clamp(1rem,3vw,1.6rem);display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.02) 31px,rgba(0,0,0,.02) 32px)}
.ds-viz svg{width:100%;height:auto;max-width:330px}
.ds-math{padding:clamp(1.1rem,3vw,1.6rem);border-top:1px solid var(--hair);display:flex;flex-direction:column;justify-content:center}
@media(min-width:780px){.ds-math{border-top:0;border-left:1px solid var(--hair)}}
.ds-formula{font-family:var(--mono);font-size:.82rem;line-height:1.9;color:#3a372f;margin:0 0 .8rem}
.ds-formula b{font-weight:700;color:var(--ink)}
.ds-dec{font-family:var(--mono);font-weight:700;font-size:clamp(1.5rem,1.1rem+2vw,2.2rem);letter-spacing:.01em;color:var(--ink);margin:0}
.ds-dec small{display:block;font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.ds-note{font-size:.9rem;color:var(--muted);margin:.8rem 0 0;line-height:1.5}
.doi-shrink{margin-top:2.2rem;display:flex;flex-direction:column;gap:0}
.doi-shrink .ds-brow{padding:.15rem 0}
.doi-shrink .ds-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.4rem}
.doi-shrink .ds-bar-stage{font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--ink)}
.doi-shrink .ds-bar-num{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.doi-shrink .ds-track{height:24px;background:var(--paper-2);border:1px solid var(--hair-2);border-radius:6px;overflow:hidden}
.doi-shrink .ds-fill{height:100%;background:var(--mineral);min-width:4px;border-radius:5px 0 0 5px;transition:width .45s ease}
.doi-shrink .ds-mult{font-family:var(--mono);font-size:.74rem;letter-spacing:.01em;color:var(--survey);padding:.55rem 0 .55rem 1.5rem;position:relative;line-height:1.4}
.doi-shrink .ds-mult::before{content:"↓ ×";position:absolute;left:0;top:.5rem;font-weight:700}
.doi-shrink .ds-mult b{font-weight:700}
.doi-shrink .ds-mult span{color:var(--muted)}
/* ===== CHECK STUB (07) ===== */
.stub{margin-top:2rem;border:1px solid var(--hair-2);border-radius:var(--radius-lg);overflow:hidden;background:#FBFAF6;box-shadow:0 1px 0 var(--hair)}
.stub-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.4rem;border-bottom:2px solid var(--ink);background:var(--paper-2)}
.stub-top .co{font-family:var(--display);font-weight:800;font-size:1.05rem}
.stub-top .meta{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:right;line-height:1.6}
.stub table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.8rem}
.stub th,.stub td{padding:.6rem 1.4rem;text-align:left;border-bottom:1px dashed var(--hair-2)}
.stub th{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.stub td.r,.stub th.r{text-align:right}
.stub td.neg{color:#A23A2A}
.stub tr.net td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700;font-size:.9rem;background:#F0EDE3}
/* ===== TAXES (08) ===== */
.taxgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:2rem}
@media(min-width:760px){.taxgrid{grid-template-columns:1fr 1fr}}
.taxcard{border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.taxcard .tc-head{padding:1rem 1.3rem;border-bottom:1px solid var(--hair)}
.taxcard.sev .tc-head{background:#EAF0F5;border-left:4px solid #2F7E86}
.taxcard.adv .tc-head{background:#F5EFE2;border-left:4px solid #C8A45E}
.taxcard .tc-head .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.taxcard .tc-head h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:.15rem 0 0}
.taxcard .tc-viz{padding:1.2rem 1.3rem .4rem;display:flex;justify-content:center}
.taxcard .tc-viz svg{width:100%;max-width:300px;height:auto}
.taxcard .tc-body{padding:.8rem 1.3rem 1.3rem;font-size:.95rem;line-height:1.6;color:#322f29}

/* ===== SUPPORT / DONATE (tab ♥) ===== */
.support-card{max-width:540px;margin:2.2rem auto 0;border:1px solid var(--hair-2);border-radius:var(--radius-lg);background:var(--paper-2);overflow:hidden}
.support-card .sc-head{padding:1.4rem 1.4rem .3rem;text-align:center}
.support-card .sc-head .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--survey)}
.support-card .sc-head h3{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.015em;margin:.25rem 0 0}
.support-card .handle{font-family:var(--mono);font-size:.9rem;color:var(--muted);text-align:center;margin:.2rem 0 0}
.support-card .qr{display:flex;justify-content:center;padding:1.3rem 1.4rem .4rem}
.support-card .qr img{width:210px;height:210px;display:block;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px;image-rendering:pixelated}
.support-card .qr-cap{text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 0}
.support-cta{display:flex;justify-content:center;padding:1.2rem 1.4rem 1.6rem}
.support-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.02rem;text-decoration:none;background:var(--mineral);color:var(--paper);padding:.8rem 1.6rem;border-radius:30px;transition:transform .15s ease,background .15s ease}
.support-btn:hover{background:#16241f;transform:translateY(-1px)}
.support-note{max-width:60ch;margin:1.7rem auto 0;text-align:center;font-size:.95rem;color:var(--muted);line-height:1.62}

.first-support{margin-top:2rem;text-align:center;font-size:.92rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:1.4rem}
.first-support a{color:var(--survey);text-decoration:underline;font-weight:500}

/* ===== POST-PRODUCTION COSTS (10) ===== */
.vp-wrap{margin-bottom:1.6rem}
.vp-outer{position:relative}
.vp-bar{display:flex;height:62px;border-radius:8px;overflow:hidden;border:1px solid var(--hair-2)}
.vp-bar span{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:.64rem;font-weight:700;line-height:1.3;color:#fff;overflow:hidden;padding:0 2px;transition:opacity .3s ease}
.vp-mineral{background:#243A35}
.vp-cost{color:#3a2c10}
.vp-cost.c1{background:#C8A45E}
.vp-cost.c2{background:#D8BA80}
.vp-cost.c3{background:#E7D3A8}
.vp-bar span.off{opacity:.26}
.vp-marker{position:absolute;top:-9px;bottom:-9px;width:0;border-left:2.5px dashed var(--survey);transition:left .35s ease;pointer-events:none}
.vp-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:.55rem}
#ppc .dil-control output{font-size:.74rem}
@media(min-width:620px){#ppc .dil-control output{min-width:118px}}
@media(max-width:619px){.vp-bar span{font-size:0}}

/* ===== SAVINGS CLAUSES (11) ===== */
.lt-item p + p{margin-top:.55rem}
.lt-ask{font-size:.9rem;color:var(--muted);font-style:italic}
.lt-ask b{font-weight:600;font-style:normal;color:var(--survey)}
.yrgrid{display:grid;gap:.6rem;margin:.2rem 0 0}
.yrrow{display:flex;align-items:center;gap:.7rem}
.yrrow .yrlbl{flex:0 0 auto;width:9.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
  color:var(--ink);line-height:1.3}
.yrrow .yrlbl small{display:block;color:var(--muted);font-size:.62rem;letter-spacing:.02em;margin-top:.1rem}
.yrcells{display:flex;gap:3px;flex:1;min-width:0}
.yrcell{flex:1;min-width:0;height:32px;border-radius:4px;background:var(--paper-2);
  border:1px solid var(--hair-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
.yrcell.held{background:#A23A2A;border-color:#A23A2A;color:#fff}
.yrcell.free{background:#1D7A52;border-color:#1D7A52;color:#fff}
.yrcell.future{opacity:.3}
@media(max-width:619px){
  .yrrow{align-items:flex-start;flex-direction:column;gap:.35rem}
  .yrrow .yrlbl{width:auto}
  .yrcells{width:100%}
  .yrcell{font-size:.56rem;height:28px}
}
@media(min-width:620px){#shutin .dil-control output{min-width:74px}}

/* ===== HBP MONITORING (12) ===== */
.hb-chart{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;
  margin-bottom:1.4rem;padding-bottom:.2rem}
.hb-chart::-webkit-scrollbar{display:none}
.hb-chart svg{width:100%;min-width:560px;height:auto;display:block}
.hb-chart svg #hb-hl{transition:x .35s ease,width .35s ease}
.hb-info{border-top:1px solid var(--hair);padding-top:1.3rem;display:flex;flex-direction:column;align-items:flex-start}
.hb-rec{margin-top:1.1rem;width:100%;border:1px solid var(--hair-2);border-left:4px solid var(--surface);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--paper-2);padding:.85rem 1.05rem}
.hb-rec-k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--survey)}
.hb-rec-n{display:block;font-family:var(--display);font-weight:700;font-size:1rem;margin:.18rem 0 .25rem}
.hb-rec-d{display:block;font-size:.92rem;line-height:1.55;color:#3a372f}

/* ===== THE MONEY TRAIL (13) ===== */
.mt-stubs{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:860px){.mt-stubs{grid-template-columns:1fr 1fr}}
.mt-stubs .stub{margin-top:0;display:flex;flex-direction:column}
.mt-stubs .stub table{flex:1}
.mt-stubs .stub th,.mt-stubs .stub td{padding:.55rem 1.1rem}
.mt-stubs .stub-top{padding:.9rem 1.1rem}
.mt-stubs .stub-top .co{font-size:.98rem}
.mt-stubs .stub-top .meta{font-size:.64rem}
/* rows that only exist once the upstream reveal is on */
.mt-ghost{display:none}
#mt.reveal .mt-ghost{display:table-row}
#mt.reveal .mt-ghost td{background:#F5E6E3;color:#A23A2A;font-style:italic}
#mt.reveal .mt-ghost td.r{font-style:normal;font-weight:700}
/* rows the reveal points at */
.mt-hit td{transition:background .25s ease}
#mt.reveal .mt-hit td{background:#F3EBDA}
#mt .dil-state{white-space:nowrap}
@media(max-width:479px){
  .mt-stubs .stub th,.mt-stubs .stub td{padding:.5rem .7rem;font-size:.74rem}
}