/* One in a Hundred v0.3: a three-column sheet on top of ledger.css.
   Modes on the left, the sentence and the curve in the middle, evidence on the right.
   No radius, no shadow, no transition, two accents with fixed jobs:
   oxide = the chosen percentile, pine = you. */

[hidden]{display:none !important}
body{font-size:16px}
.sheet{max-width:1440px;margin:0 auto;padding:var(--s3) var(--s3) var(--s5);
  display:grid;grid-template-columns:272px minmax(0,1fr) 304px;grid-template-rows:auto 1fr auto;
  column-gap:var(--s4);row-gap:var(--s3);
  grid-template-areas:"head head head" "rail stage evidence" "foot foot foot"}
.masthead{grid-area:head;display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:var(--s2)}
.brand{font-family:var(--font-head);font-weight:600;font-size:1.25rem;color:var(--ink);text-decoration:none}
.tagline{margin:0;color:var(--ink-2);font-size:.9rem;flex:1}
.masthead-links{display:flex;gap:var(--s2);font-size:.9rem}
.masthead-links a{color:var(--ink-2)}
.rail{grid-area:rail}
.stage{grid-area:stage;min-width:0}
.evidence{grid-area:evidence;font-size:.9rem;border-left:1px solid var(--rule);padding-left:var(--s3)}
.foot{grid-area:foot;border-top:1px solid var(--rule);padding-top:var(--s2);font-size:.85rem;color:var(--ink-2)}
.foot p{margin:0}

/* Mode rail */
.modes{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.modes button{font:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:10px 12px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.modes button[aria-pressed="true"] .mode-hint{color:var(--paper);opacity:.75}
.mode-name{font-family:var(--font-head);font-weight:600;font-size:1.05rem}
.mode-hint{font-size:.8rem;color:var(--ink-2)}
.pane{padding-top:var(--s3)}
.ctl{display:block;margin-bottom:var(--s2)}
.ctl>span{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:4px}
.selects{display:flex;flex-direction:column;gap:6px}
select,textarea,input[type="text"]{font:inherit;font-size:.95rem;width:100%;padding:7px 10px;border:1px solid var(--edge);background:var(--panel);color:var(--ink)}
textarea{resize:vertical;line-height:1.4}
.seg{display:flex}
.seg button{flex:1;font:inherit;font-size:.9rem;padding:7px 4px;border:1px solid var(--edge);border-left-width:0;background:var(--panel);color:var(--ink);cursor:pointer}
.seg button:first-child{border-left-width:1px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.seg button:disabled{color:var(--ink-2);cursor:default}
.pane-note{font-size:.85rem;color:var(--ink-2);margin:var(--s1) 0 0}
.btnrow{display:flex;gap:var(--s1);flex-wrap:wrap}
.examples{list-style:none;margin:6px 0 0;padding:0}
.examples button{font:inherit;font-size:.9rem;background:none;border:0;padding:4px 0;color:var(--signal);text-decoration:underline;text-underline-offset:1px;cursor:pointer;text-align:left}
.land-out{font-family:var(--font-head);font-size:1.1rem;margin:var(--s2) 0 0;line-height:1.35}
.land-out b{color:var(--signal-2);font-weight:600}
.profile{margin-top:var(--s3);border-top:1px solid var(--rule);padding-top:var(--s2)}
.profile h3{margin:0;font-size:1rem}
.profile ul{list-style:none;margin:var(--s1) 0 0;padding:0;font-size:.9rem}
.profile li{display:flex;justify-content:space-between;gap:var(--s1);padding:6px 0;border-bottom:1px solid var(--rule)}
.profile li b{font-family:var(--font-mono);font-weight:400;color:var(--signal-2);white-space:nowrap}
.profile li button{font:inherit;font-size:.8rem;background:none;border:0;color:var(--ink-2);cursor:pointer;padding:0}
.compare-line{font-family:var(--font-head);font-size:1.05rem;line-height:1.35;margin:var(--s2) 0 0}

/* Stage */
.chain{list-style:none;margin:0 0 var(--s2);padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:.9rem;color:var(--ink-2)}
.chain li{display:flex;align-items:center}
.chain li+li::before{content:"\203A";margin:0 8px;color:var(--rule)}
.chain button{font:inherit;font-size:.9rem;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule)}
.chain button:hover{text-decoration-color:var(--ink)}
.chain .root{color:var(--ink-2)}
.chain .hint{color:var(--ink-2);font-style:italic}
.punchline{font-family:var(--font-head);font-weight:600;font-size:2.6rem;line-height:1.12;margin:0 0 var(--s2);max-width:22ch;letter-spacing:-.005em}
.punchline b{color:var(--signal);font-weight:600;white-space:nowrap}
.punchline.empty{color:var(--ink-2);font-size:1.75rem}
.subline{color:var(--ink-2);font-size:.9rem;margin:0 0 var(--s3)}
.subline .grade{display:inline-block;border:1px solid var(--edge);padding:0 6px;margin-right:6px;font-family:var(--font-mono);font-size:.8rem;color:var(--ink)}
.subline .grade.d{border:2px solid var(--signal);color:var(--signal)}

figure.curve,figure.history{margin:0;padding:0}
figure.history{margin-top:var(--s3)}
.curve-svg svg,.history-svg svg{display:block;width:100%;height:auto}
figcaption{font-size:.8rem;color:var(--ink-2);margin-top:6px;line-height:1.4}
.curve .axis text,.history .axis text{font-family:var(--font-body);font-size:11px;fill:var(--ink-2)}
.curve .grid line,.history .grid line{stroke:var(--rule);stroke-width:1}
.curve .baseline,.history .baseline{stroke:var(--edge);stroke-width:1}
.curve .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.curve .line.b{stroke:var(--ink-2);stroke-dasharray:5 4}
.history .line{fill:none;stroke:var(--ink);stroke-width:2}
.mark-pct{fill:var(--signal)}
.mark-you{fill:var(--signal-2)}
.mark-ring{fill:var(--paper)}
.mark-label{font-family:var(--font-body);font-size:12px;fill:var(--ink)}
.mark-label.you{fill:var(--signal-2)}
.legend{display:flex;gap:var(--s2);font-size:.8rem;color:var(--ink-2);margin-top:4px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:18px;height:0;border-top:2px solid var(--ink);margin-right:6px;vertical-align:middle}
.legend span.b::before{border-top-style:dashed;border-color:var(--ink-2)}
.legend span.pct::before{width:9px;height:9px;border:0;background:var(--signal)}
.legend span.you::before{width:9px;height:9px;border:0;background:var(--signal-2)}
.tip{position:fixed;z-index:5;pointer-events:none;background:var(--panel);border:1px solid var(--edge);padding:6px 8px;font-size:.8rem;color:var(--ink);max-width:260px}
.tip b{font-family:var(--font-mono);font-weight:400}

.empty{border:1px solid var(--edge);padding:var(--s2) var(--s3);margin-top:var(--s2)}
.empty h2{margin:0 0 var(--s1);font-size:1.25rem}
.empty p{margin:0 0 var(--s1)}
.empty .btnrow{margin-top:var(--s2)}
.empty .btn{text-decoration:none}

/* Evidence */
.evidence h2{font-size:.8rem;color:var(--ink-2);font-weight:600;margin:0 0 var(--s1);font-family:var(--font-body)}
.ev-grade{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s1)}
.ev-grade .letter{font-family:var(--font-head);font-weight:600;font-size:2.44rem;line-height:1;color:var(--ink)}
.ev-grade .letter.d{color:var(--signal)}
.ev-grade .word{font-size:.95rem}
.evidence p{margin:0 0 var(--s2);line-height:1.5}
.evidence .unrev{border:2px solid var(--signal);padding:var(--s1) var(--s2);margin-bottom:var(--s2);font-weight:600;color:var(--signal)}
.evidence dl{margin:0 0 var(--s2);display:grid;grid-template-columns:1fr;gap:2px}
.evidence dt{color:var(--ink-2);font-size:.8rem;margin-top:6px}
.evidence dd{margin:0}
.evidence dd.num{font-family:var(--font-mono);font-size:.85rem}
.src{list-style:none;margin:0 0 var(--s2);padding:0}
.src li{padding:8px 0;border-top:1px solid var(--rule)}
.src li:last-child{border-bottom:1px solid var(--rule)}
.src .what{display:block;color:var(--ink-2);font-size:.8rem;margin-top:2px}
.src .val{font-family:var(--font-mono);font-size:.85rem;display:block;margin-top:2px}
.share{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.share .btn{text-decoration:none}

.skeleton{background:var(--rule);color:transparent;min-height:2.4em}
@media (prefers-reduced-motion:no-preference){.skeleton{animation:sk 1.6s ease-in-out infinite}}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.55}}

@media (max-width:1140px){
  .sheet{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"head head" "rail stage" "evidence evidence" "foot foot"}
  .evidence{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:var(--s2);columns:2;column-gap:var(--s4)}
  .evidence>*{break-inside:avoid}
}
@media (max-width:760px){
  .sheet{grid-template-columns:1fr;grid-template-areas:"head" "rail" "stage" "evidence" "foot";padding:var(--s2) var(--s2) var(--s4)}
  .modes{flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--rule)}
  .modes button{border-bottom:0;flex:0 0 auto;padding:8px 10px}
  .mode-hint{display:none}
  .punchline{font-size:1.9rem}
  .evidence{columns:1}
}