/* spire-analysis.css — the live analysis readout.
 *
 * Loaded by BOTH replay.html and analysis-test.html so the test page is styling
 * the shipped component, not a copy of it. Every colour is one of the page's
 * existing custom properties, so the dark/light toggle keeps working with no
 * extra work here and the panel cannot drift from the rest of the site.
 *
 * Identity is never colour-alone: the three finding tones carry a dot SHAPE
 * (filled / hollow / dashed) as well as a hue, and the exact/sampled chips are
 * labelled in words. */

.sabox .sa-body { font-size:12.5px; color:var(--ink-2); }

.sa-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
           font-size:11.5px; color:var(--ink-3); padding-bottom:8px;
           border-bottom:1px solid var(--line); margin-bottom:10px; }
.sa-head b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; }
.sa-head .sa-sep { color:var(--line-2); }
.sa-head .sa-state { margin-left:auto; display:inline-flex; align-items:center; gap:6px;
                     text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
.sa-head .sa-state.run { color:var(--accent); }
.sa-head .sa-state.done { color:var(--win); }
.sa-spin { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--accent);
           border-top-color:transparent; animation:sa-rot .7s linear infinite; }
@keyframes sa-rot { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-spin { animation:none; opacity:.6; } }

.sa-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px; margin-bottom:12px; }
.sa-cell { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
.sa-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.sa-v { font-size:21px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.25; }
.sa-sub { font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sa-sub.warn { color:var(--warn); }
.sa-note { font-size:10.5px; color:var(--ink-3); font-style:italic; margin-top:2px; line-height:1.4;
           font-variant-numeric:normal; }

.sa-finds { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.sa-find { display:flex; align-items:center; flex-wrap:wrap; gap:7px;
           background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
.sa-findtext { color:var(--ink); font-weight:600; }
.sa-findline { flex-basis:100%; }
.sa-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
/* filled = affirmed, hollow = disproved, dashed = unknown. Shape carries it. */
.sa-find.sa-yes   .sa-dot { background:var(--win); }
.sa-find.sa-maybe .sa-dot { background:var(--warn); }
.sa-find.sa-no    .sa-dot { background:transparent; border:2px solid var(--ink-3); }
.sa-find.sa-none  .sa-dot { background:transparent; border:2px dashed var(--line-2); }
.sa-find.sa-none .sa-findtext { color:var(--ink-3); font-weight:400; font-style:italic; }

.sa-chip { font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:1px 5px;
           border-radius:3px; border:1px solid var(--line-2); color:var(--ink-3); white-space:nowrap; }
.sa-chip.exact { color:var(--win); border-color:var(--win); }
.sa-chip.sampled { color:var(--warn); border-color:var(--warn); }

.sa-caveat { font-size:11px; color:var(--ink-3); font-style:italic; margin:-2px 0 10px; line-height:1.45; }

.sa-row { display:flex; gap:10px; align-items:baseline; margin:6px 0; flex-wrap:wrap; }
.sa-row .sa-k { flex:0 0 132px; }
.sa-pvwrap { flex:1 1 200px; min-width:0; }
.sa-pv { display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px; }
.sa-card { color:var(--ink); font-weight:600; }
.sa-arrow { color:var(--ink-3); }
.sa-none { color:var(--ink-3); }

.sa-sec { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);
          margin:14px 0 6px; padding-top:8px; border-top:1px solid var(--line); }

.sa-tbl { width:100%; border-collapse:collapse; font-size:11.5px; font-variant-numeric:tabular-nums; }
.sa-tbl th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
             color:var(--ink-3); font-weight:600; padding:3px 8px 3px 0; border-bottom:1px solid var(--line); }
.sa-tbl td { padding:4px 8px 4px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.sa-tbl tr:last-child td { border-bottom:none; }
.sa-tbl tr.cur td { background:var(--hi); }
.sa-vs { color:var(--ink-3); font-size:10.5px; }
.sa-up { color:var(--win); } .sa-down { color:var(--loss); } .sa-flat { color:var(--ink-3); }
.sa-yes { color:var(--win); font-weight:600; } .sa-maybe { color:var(--warn); font-weight:600; }
.sa-conv { color:#4aa3ff; font-weight:600; }
/* the column the search prioritizes */
th.sa-pri { text-decoration:underline; text-underline-offset:2px; }
.sa-no { color:var(--ink-3); }
.sa-ladder .sa-pvcell { max-width:280px; }

.sa-skip { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--warn);
           border-radius:6px; padding:8px 11px; color:var(--ink-2); }
.sa-skip b { color:var(--ink); }
.sa-skipwhy { font-size:11px; color:var(--ink-3); font-style:italic; margin-top:4px; line-height:1.45; }
.sa-status { color:var(--ink-3); font-style:italic; }
.sa-err { background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--loss);
          border-radius:6px; padding:8px 11px; color:var(--ink-2); font-size:12px; }
.sa-err b { color:var(--loss); }

/* The panel header control strip. */
.sabox h3 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sa-toggle { font-size:11.5px; font-weight:400; color:var(--ink-3); display:inline-flex;
             align-items:center; gap:5px; cursor:pointer; text-transform:none; letter-spacing:0; }
.sa-opts { margin-left:auto; display:inline-flex; gap:10px; align-items:center;
           font-size:11px; font-weight:400; color:var(--ink-3); text-transform:none; letter-spacing:0; }
.sa-opts select { background:var(--page); color:var(--ink); border:1px solid var(--line-2);
                  border-radius:4px; padding:1px 4px; font:inherit; font-size:11px; }

/* ---- PV-change marking (opt-in: `render(snap, {pvDiff:true})`) -------------
   Off by default, so the run page's readout is unchanged. The sandbox turns it
   on: a search abandoning the line it preferred is the most informative thing
   it does, and without a mark the new line simply replaces the old one. */
.sa-card.sa-new { color:var(--accent); font-weight:600; }
html[data-theme="dark"] .sa-card.sa-new { color:var(--accent-hi); }
.sa-chip.changed { background:var(--hi); color:var(--accent); border-color:var(--accent); }
.sa-ladder tr.chg td:first-child { border-left:2px solid var(--accent); }

/* "open in sandbox" — the hand-off from a replay turn to the position editor.
   The disabled form is a span, not a dead <a>: there is nothing to open, and a
   link that does nothing is a worse answer than one that says why. */
.sa-sandbox { font-size:11.5px; font-weight:500; white-space:nowrap; margin-left:auto; }
.sa-sandbox.off { color:var(--ink-3); cursor:help; }

/* ---- the exact solve's readout -------------------------------------------
   Visually distinct from the turn search above it on purpose: they answer
   different questions and must not read as two estimates of one number. The
   headline's colour is the CERTIFICATE, not the value — a bound is amber
   however small it is. */
.sx-headline { display:flex; gap:14px; align-items:flex-start; padding:10px 12px; margin:10px 0;
               border-radius:8px; border:1px solid var(--line-2); background:var(--surface); }
.sx-headline.sx-bound     { border-color:var(--warn); }
.sx-headline.sx-attained  { border-color:var(--accent); }
.sx-headline.sx-converged { border-color:#4aa3ff; }
.sx-headline.sx-exact     { border-color:var(--win); }
.sx-headline.sx-none      { border-style:dashed; }
.sx-num { font-size:30px; font-weight:700; line-height:1.05; color:var(--ink); white-space:nowrap; }
.sx-headline.sx-bound .sx-num { color:var(--warn); }
.sx-headline.sx-converged .sx-num { color:#4aa3ff; }
.sx-headline.sx-exact .sx-num { color:var(--win); }
.sx-unit { display:block; font-size:10.5px; font-weight:500; letter-spacing:.05em;
           text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.sx-claim { flex:1 1 auto; min-width:0; font-size:12.5px; }
.sx-claim > b { text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
.sx-claim .sa-chip { margin-left:7px; }
.sa-body ul { margin:4px 0 0; padding-left:18px; }

/* The scope line. "depth 4/12 · complete · exhaustive" was read as "four turns
   into the fight"; it is four CARD PLAYS inside one turn. The panel caused that
   reading, so the panel carries the correction. */
.sa-scope { font-size:11.5px; color:var(--ink-2); line-height:1.55; margin:2px 0 10px;
            padding-left:8px; border-left:2px solid var(--line-2); }
.sa-scope b { color:var(--ink); }
.sa-scopetag { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);
               border:1px solid var(--line-2); border-radius:3px; padding:0 4px; margin-left:5px; }

/* Drill-down (sandbox): an openings row that can be PLAYED. The hover is the
   affordance; the trail names the line taken so a sampled world never
   masquerades as the expectation. */
.sa-drillrow { cursor:pointer; }
.sa-drillrow:hover td { background:var(--row-hover, rgba(127,127,127,.08)); }
.sx-trail { font-size:12px; color:var(--ink-2); margin:0 0 10px; line-height:1.7; }
.sx-trail .sx-crumb { color:var(--ink); font-weight:600; cursor:pointer; }
.sx-trail .sx-crumb:hover { color:var(--accent); }
.sx-trail i { color:var(--ink-3); font-style:normal; font-size:11px; }
.sx-trail .sx-inherit { color:var(--ink-3); font-size:11px; }

/* averages | distribution view tabs (the sandbox's solve readout) */
.sx-viewrow { margin:8px 0 4px; display:flex; align-items:center; gap:8px; font-size:11.5px; }
.sx-vtab { cursor:pointer; padding:2px 9px; border:1px solid var(--line-2); border-radius:99px; color:var(--ink-3); }
.sx-vtab.on { color:var(--ink); border-color:#4aa3ff; }