/* The Sweep surface. Register 1: hard edges, hairlines, Jost over Geist Mono, one green.
   State is carried by ink rank alone -- idle is the dimmest, running is the brightest, and there is
   no rail, no underline and no accent bar anywhere on this screen. On a deep ground there is one
   direction, so an inverted encoding is not expressible (ground.css says why). */

.sw{padding:18px 0 40px;display:grid;gap:22px}

.sw-head b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em}
.sw-lead{margin:5px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.sw-where{margin:9px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
          color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── the spine: the engine's own order, cheapest first ── */
.sw-spine{border:1px solid var(--line);background:var(--g-1)}
.sw-stage{display:grid;grid-template-columns:26px minmax(160px,auto) minmax(0,1fr) minmax(0,1fr) 92px;
          gap:14px;align-items:baseline;min-height:38px;padding:9px 13px;border-bottom:1px solid var(--line)}
.sw-stage:last-child{border-bottom:0}
.sw-stage-n,.sw-stage-fact,.sw-stage-state{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
          font-variant-numeric:tabular-nums}
.sw-stage b{font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.sw-stage-fact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-stage-say{font-size:12px;line-height:1.5}
.sw-stage-state{text-align:right}
/* Not started carries no numbers and the dimmest ink. A zero here would be a measurement. */
.sw-stage[data-state="idle"]{color:var(--ink-3)}
.sw-stage[data-state="idle"] b{color:var(--ink-3)}
.sw-stage[data-state="done"]{color:var(--ink-3)}
.sw-stage[data-state="done"] b{color:var(--ink-2)}
.sw-stage[data-state="done"] .sw-stage-fact{color:var(--ink-2)}
.sw-stage[data-state="running"]{color:var(--ink-2);background:var(--g-2)}
.sw-stage[data-state="running"] b,
.sw-stage[data-state="running"] .sw-stage-fact,
.sw-stage[data-state="running"] .sw-stage-state{color:var(--ink)}
.sw-stage[data-state="capped"],.sw-stage[data-state="spent"]{color:var(--hold)}
.sw-stage[data-state="capped"] b,.sw-stage[data-state="spent"] b,
.sw-stage[data-state="capped"] .sw-stage-state,.sw-stage[data-state="spent"] .sw-stage-state{color:var(--hold)}
/* The one motion on the spine: the running row breathes. It never moves and never resizes. */
.sw-stage[data-state="running"] .sw-stage-n{animation:swpulse 1.6s cubic-bezier(.22,.68,.32,1) infinite}
@keyframes swpulse{50%{opacity:.32}}

/* What the sweep could not do, under the spine that says what it did. A coverage hole is a finding
   about the harness, and leaving it off the screen is how a partial run reads as a whole one. */
.sw-gaps{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--hold);max-width:78ch}

/* ── figures ──
   One column, not two. The curve's own turn axis needs the room: at half a pane its last tick and
   its axis name land on top of each other, and the figure is drawn 1:1 at the width it is read at. */
.sw-grid{display:grid;gap:20px}
.sw-figure{margin:0}
.sw-eyebrow{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.sw-fig{border:1px solid var(--line);background:var(--g-1);padding:14px 16px 8px;overflow-x:auto}
.sw-fig svg{display:block;width:100%;height:auto}
.sw-figure figcaption{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3);max-width:72ch}
.sw-figure figcaption b{color:var(--ink-2);font-weight:500}
.sw-unmapped{display:block;margin-top:5px;color:var(--ink-3)}
/* The report's SVG marks read the room's own tokens, so one figure means one thing in both places. */
.sw-fig .f-held{fill:var(--held)}
.sw-fig .f-broke{fill:var(--broke)}
.sw-fig .f-ink{fill:var(--ink)}
.sw-fig .f-ink2{fill:var(--ink-2)}
.sw-fig .f-ink3{fill:var(--ink-3)}
.sw-fig .f-line2{fill:var(--line-2)}
.sw-fig .f-g1{fill:var(--g-1)}
.sw-fig .s-ink{stroke:var(--ink);fill:none}
.sw-fig .s-line{stroke:var(--line);fill:none}
.sw-fig .s-line2{stroke:var(--line-2);fill:none}
.sw-fig text{font-family:var(--disp)}
.sw-fig text.m{font-family:var(--mono);letter-spacing:.09em}

/* The Behavior screen's own bar graph, on the room's ground. */
.sw-fig .graph{display:none}
.sw-fig .graph.on{display:grid;padding-top:14px;gap:14px 4px;align-items:end}
.sw-fig .graph .slot{appearance:none;border:0;background:none;padding:0 2px 2px;cursor:pointer;
     display:flex;flex-direction:column;align-items:center;min-width:0;font:inherit;color:inherit}
.sw-fig .graph .slot canvas{width:100%;max-width:76px;height:auto;display:block;image-rendering:pixelated}
.sw-fig .graph .slot b{margin-top:5px;font-family:var(--mono);font-size:14px;font-weight:500;
     color:var(--held);font-variant-numeric:tabular-nums;line-height:1.15}
.sw-fig .graph .slot span{font-family:var(--mono);font-size:8.5px;line-height:1.35;letter-spacing:.08em;
     text-transform:uppercase;color:var(--ink-3);text-align:center;overflow-wrap:anywhere}
/* Picked is the lit bar plus brighter ink. Colour and luminance only. */
.sw-fig .graph .slot:hover span,.sw-fig .graph .slot.on span{color:var(--ink)}
.sw-fig .graph .slot.on span{font-weight:600}
.sw-fig .graph .slot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── the two purses, never added together ── */
.sw-cost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
         border:1px solid var(--line)}
.sw-purse{background:var(--g-1);padding:13px 15px;min-width:0}
.sw-purse-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--ink-3)}
.sw-purse b{display:block;margin-top:7px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.sw-purse p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* ── the case list ── */
.sw-cases{border:1px solid var(--line);background:var(--g-1)}
.sw-cases-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
               padding:10px 13px;border-bottom:1px solid var(--line)}
.sw-cases-head b{font-size:12.5px}
.sw-cases-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sw-rows{max-height:52vh;overflow-y:auto}
/* A fixed row height is what makes the list scroll-stable and safe to insert into at the top. */
.swrow{display:grid;grid-template-columns:10px minmax(0,1.25fr) 168px auto minmax(0,1.6fr);
       gap:14px;align-items:center;height:40px;padding:0 13px;border-bottom:1px solid var(--line)}
.swrow:last-child{border-bottom:0}
.sw-lane{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-rule{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:baseline}
.sw-rule b{min-width:0;font-size:12.5px;font-weight:500;color:var(--ink-2);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-rule b.sw-unnamed{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
.sw-rule i{flex:none;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.12em;
       text-transform:uppercase;color:var(--ink-3)}
.sw-say{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swrow[data-out="broke"] .sw-say{color:var(--broke)}
.swrow[data-out="unclear"] .sw-say{color:var(--hold)}
.swrow.fresh{animation:swfade 140ms linear both}
@keyframes swfade{from{opacity:0}to{opacity:1}}

@media(max-width:1180px){
  .swrow{grid-template-columns:10px minmax(0,1fr) 150px auto minmax(0,1.2fr)}
}
@media(max-width:760px){
  .sw-stage{grid-template-columns:26px minmax(0,1fr) auto;height:auto;padding:9px 13px;row-gap:3px}
  .sw-stage-n,.sw-stage b{grid-row:1}
  .sw-stage-state{grid-column:3;grid-row:1}
  .sw-stage-say{grid-column:2/4;grid-row:2;white-space:normal}
  .sw-stage-fact{grid-column:2/4;grid-row:3;white-space:normal}
  .sw-cost{grid-template-columns:minmax(0,1fr)}
  .swrow{height:auto;grid-template-columns:10px minmax(0,1fr);gap:4px 10px;padding:9px 13px;align-items:baseline}
  .swrow .sw-lane,.swrow .sw-rule,.swrow .sw-say{grid-column:2}
  .swrow .sw-rule b,.swrow .sw-say{white-space:normal}
  .swrow .arc{grid-column:2;margin:2px 0}
  .sw-say{white-space:normal}
  .sw-rows{max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .sw-stage[data-state="running"] .sw-stage-n{animation:none}
  .swrow.fresh{animation:none}
}