/* The room: the shell, the tab strip, the heads, and the list/detail that replaced the deck of
   boxes. The list's geometry is structurally incapable of changing when the detail changes -- they
   are siblings in a fixed grid, not parent and child. */

/* ── the marks. Three shapes and one fill, used by the room and by the conversation. ── */
.ok{width:10px;height:10px;flex:none;box-sizing:border-box;display:block}
.ok.held{background:var(--held)}
/* Struck through with a mask so the row's own ground shows in the gap: at 10px colour is not a
   shape, and this pair has to survive greyscale. */
.ok.broke{background:var(--ink);
  -webkit-mask:linear-gradient(#000 0 4px,transparent 4px 6px,#000 6px 10px);
          mask:linear-gradient(#000 0 4px,transparent 4px 6px,#000 6px 10px)}
.ok.unclear{background:var(--hatch);box-shadow:inset 0 0 0 1px var(--line-2)}
/* Waiting is the same empty square as not run yet: an absence, whichever side of Run it sits on. */
.ok.queued,.ok.waiting{box-shadow:inset 0 0 0 1px var(--line-2)}
.ok.hold{background:var(--hold)}
/* It does not pulse. State changes move once and hold; the seconds go in the mono meta. */
.ok.running{box-shadow:inset 0 0 0 1px var(--ink-3);
  background:radial-gradient(closest-side,var(--ink-3) 100%,transparent) center/4px 4px no-repeat}
.ok.none{background:none;box-shadow:none}

.arc{display:inline-flex;align-items:center;gap:3px;height:8px;flex:none}
.arc i{display:block;width:12px;flex:none;
       transition:height 180ms cubic-bezier(.22,.68,.32,1),background 180ms linear}
.arc i{height:2px;background:var(--line-2)}      /* never reached */
.arc i.on{height:3px;background:var(--ink-3)}    /* survived */
.arc i.brk{height:7px;background:var(--ink)}   /* gave way here */
.arc.held i.on:last-child{background:var(--held)}
.arcnum{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}

.meter{display:block;width:64px;height:3px;background:var(--line);position:relative;overflow:hidden}
.meter::after{content:'';position:absolute;inset:0 auto 0 0;background:var(--ink-3);
              width:calc(var(--v,0) * 100%);transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.gap{margin:12px 0}
.hatchrule{height:3px;background:var(--hatch);margin-bottom:9px}


/* ── the shell ── */
.shell{position:relative;height:100%;display:grid;grid-template-rows:minmax(0,1fr);
       grid-template-columns:minmax(0,1fr) var(--chatw,560px);gap:0 6px;padding:12px 12px 0 0}
.shell.chatshut{grid-template-columns:minmax(0,1fr) 80px}
/* One column that cannot be widened by a row: the header's nowrap pieces used to set the floor's
   min-content and push the whole room past the viewport by their overflow. */
.floor{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr)}

/* The report, opened in the floor beside the conversation. It covers the tabs and the pane and
   nothing above them: the product's own header stays, so the customer can see they are still in
   their world rather than on a page that replaced it. */
/* One sentence over the art, and the plan under it in one line each. */
.oneline{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.work{margin:22px 0 0}
.workhead{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.workrow{display:flex;align-items:baseline;gap:14px;font-size:13.5px;line-height:1.5;
         color:var(--ink-2);padding:8px 0;border-top:1px solid var(--line)}
.workrow:last-of-type{border-bottom:1px solid var(--line)}
.workstate{margin-left:auto;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
           color:var(--ink-3);white-space:nowrap}
.workrow.running .worktext{color:var(--ink)}
.workrow.running .workstate{color:var(--held)}
.workrow.done .worktext{color:var(--ink-3)}
.workrow.done .workstate{color:var(--held)}
.briefmore{margin:12px 0 0;padding:0;border:0;background:none;cursor:pointer;
           font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.briefmore:hover{color:var(--ink)}

/* The plan tab: the plans this repository has, then the open one told stage by stage. A stage is
   a card of labelled sentences and one state word; there are no step rows and no button on it. */
.planshelf{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.plantab{display:grid;gap:3px;text-align:left;padding:9px 12px 8px;border:0;cursor:pointer;
         background:transparent;color:var(--ink-3);font:inherit;box-shadow:inset 0 0 0 1px var(--line);
         transition:color .12s,background .12s,box-shadow .12s}
.plantab:hover{color:var(--ink-2);background:var(--g-2)}
.plantab.on,.plantab.on:hover{color:var(--ink);background:var(--g-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.plantab b{font-size:13px;font-weight:600;color:inherit}
.plantab span{font:400 10.5px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.plantab.on span{color:var(--ink-2)}
.planwait{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.planlead{margin:6px 0 18px}
.planhow{margin:0;font-size:14px;line-height:1.55;color:var(--ink);max-width:72ch}
.plansum{margin:8px 0 0;font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink-3)}

.planstage{margin:0 0 12px;padding:16px 18px 14px;border:1px solid var(--line);background:var(--g-1)}
.stagehead{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.stageno{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stagetitle{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.stagestate{margin-left:auto;font:500 11.5px var(--mono);letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}
.stagestate[data-state="running"],.stagestate[data-state="waiting"]{color:var(--ink)}
.stagestate[data-state="held"]{color:var(--held)}
.stagestate[data-state="broke"]{color:var(--ink);font-weight:600}
.stagerow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 16px;padding:8px 0;border-top:1px solid var(--line)}
.stagelabel{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.stagelist{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.stagelist li{font-size:13.5px;line-height:1.5;color:var(--ink);max-width:78ch}
.stagelist.mono li{font:400 11.5px var(--mono);color:var(--ink-2)}
.stagestop{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}
.stageact{margin:10px 0 0;height:30px;padding:0 13px;border:0;cursor:pointer;font:600 12.5px var(--disp);
          background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .12s,box-shadow .12s}
.stageact:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.planrest{margin:18px 0 0;padding:14px 18px;border:1px solid var(--line)}
.planrest .stagelist li{font-size:12.5px;color:var(--ink-2)}

/* The plan in the thread, as Sandy works it: one line per stage and its state word. */
.pcnow{margin:0 0 8px;font:500 11.5px var(--mono);color:var(--held)}
.pcnow[hidden]{display:none}
.pcart{width:34px;height:34px;display:block;image-rendering:pixelated;flex:none;margin:-2px 2px -2px -2px}
.plancard{display:grid;gap:0;width:100%;margin:10px 0 2px;padding:10px 14px 8px;border:1px solid var(--line-2);border-radius:12px;
          background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s}
.plancard:hover{border-color:var(--held)}
.pchead{display:flex;align-items:center;gap:10px;width:100%;padding:0 0 6px;border:0;background:transparent;color:inherit;text-align:left;font:600 13px var(--disp);letter-spacing:-.01em;cursor:pointer}
.pccount{flex:1}
.pcchev{width:6px;height:6px;border:solid var(--ink-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-bottom:2px;transition:transform .18s}
.plancard.open .pcchev{transform:rotate(-135deg);margin-bottom:-2px}
/* Shown whole from the start; the head folds it when pressed. */
.pcbody{display:none}
.plancard.open .pcbody{display:block}
.plancard{cursor:default}
.plancard:hover{border-color:var(--line-2)}
.pcfull{display:block;width:100%;margin:10px 0 2px;padding:9px 12px;border:0;border-radius:8px;background:var(--held);color:#0F1E08;font:600 12.5px var(--disp);cursor:pointer}
.pcfull:hover{filter:brightness(1.06)}
/* The count on the input box: a small tab joined to its top edge, words only. */
.planstrip{margin:0 0 -1px 12px;padding:5px 12px 6px;width:max-content;border:1px solid var(--held);border-bottom:0;border-radius:8px 8px 0 0;background:var(--g-1);font:500 11px var(--mono);color:var(--ink-2)}
.pccount{font:400 11px var(--mono);color:var(--ink-3);font-style:normal}
/* One line of what lands, and the box that fills when it has. */
.pcrow{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 12px;align-items:start;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45}
.pcdo{color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcbox{position:relative;width:14px;height:14px;margin-top:2px;border:1.5px solid var(--ink-3);border-radius:3px;transition:border-color .2s,background .2s}
.pcrow[data-state="paid"] .pcbox{border-style:dashed;opacity:.7}
.pcrow[data-state="paid"] .pcdo{color:var(--ink-2)}
.pcrow[data-state="running"] .pcbox,.pcrow[data-state="waiting"] .pcbox{border-color:var(--held)}
.pcrow[data-state="running"] .pcbox::after,.pcrow[data-state="waiting"] .pcbox::after{content:'';position:absolute;inset:3px;border-radius:1px;background:var(--held);animation:pcpulse 1.2s ease-in-out infinite}
.pcrow[data-state="held"] .pcbox{border-color:var(--held);background:var(--held)}
.pcrow[data-state="held"] .pcbox::after{content:'';position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pcrow[data-state="held"] .pcdo{color:var(--ink-2)}
.pcrow[data-state="broke"] .pcbox{border-color:var(--ink)}
.pcrow[data-state="broke"] .pcbox::before,.pcrow[data-state="broke"] .pcbox::after{content:'';position:absolute;left:5px;top:2px;width:1.5px;height:7px;background:var(--ink);transform:rotate(45deg)}
.pcrow[data-state="broke"] .pcbox::after{transform:rotate(-45deg)}
@keyframes pcpulse{0%,100%{opacity:.35}50%{opacity:1}}
.plancard .aopen{margin:8px 0 0}

/* The wall, on the plan it stands in front of. */
.upg{margin:14px 0 26px;padding:18px 20px;border:1px solid var(--line-2);background:var(--g-1)}
.upg .idline{margin:0 0 8px;font:500 9.5px var(--mono);letter-spacing:.11em;color:var(--ink-3)}
.upg h3{margin:0 0 8px;font-size:16px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.upg p{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.upg .muted{color:var(--ink-3);font-size:12.5px}
/* The status line under the offer is a sentence, not the conversation's bubble of the same name. */
.upg .said{align-self:auto;max-width:78ch;padding:0;margin:8px 0 0;background:none;box-shadow:none;
           font-size:12.5px;color:var(--ink-3)}
.upg .said:empty{display:none}
.upg-offer{display:grid;gap:10px;margin:14px 0;padding:14px 16px;border:1px solid var(--line);background:var(--g-2)}
.upg-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.upg-list{font-family:var(--mono);font-size:15px;color:var(--ink-3)}
.upg-now{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.upg-unit{font-size:12.5px;color:var(--ink-2)}
.upg-why{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:70ch}
.upg-coderow{display:flex;gap:8px;align-items:center}
.upg-code{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;
          border:1px solid var(--line-2);background:var(--g-1);color:var(--ink);min-width:180px}
.upg-code:focus{outline:none;border-color:var(--ink-2)}
.upg .acts{display:flex;gap:10px;margin:4px 0 0}

/* The artifact she hands over. A slab in the thread, not a link in a sentence. */
.artifact{display:flex;align-items:center;gap:11px;width:100%;margin:10px 0 2px;padding:11px 13px;
          border:1px solid var(--line-2);background:var(--g-2);color:inherit;cursor:pointer;
          font:inherit;text-align:left;transition:border-color .15s,background .15s}
.artifact:hover{border-color:var(--held);background:var(--g-1)}
.artifact .amark{width:17px;height:17px;flex:none;shape-rendering:crispEdges}
.artifact .amark rect{fill:var(--held)}
.abody{display:flex;flex-direction:column;gap:2px;min-width:0}
.abody b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.acount{font:500 11px var(--mono);color:var(--ink-3)}
.aopen{margin-left:auto;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
/* While the world is still being raised behind this screen, the strip takes a row of its own above
   the tabs rather than pushing the pane out of the grid. */
.floor:has(.rstrip){grid-template-rows:auto auto auto minmax(0,1fr) auto}
.floor .rstrip{margin:0 14px 10px 16px}

.ident{display:flex;align-items:center;gap:10px;padding:8px 14px 12px 16px;min-width:0}
/* One flat bar. No chips, no boxes-inside-boxes, no rounding: the name, the button, the fact,
   and two quiet items on the right. */
.runslot{display:flex;align-items:center;gap:9px;min-width:0}
.hright{margin-left:auto;display:flex;align-items:center;gap:9px;min-width:0}
/* The note yields first: the picker, the price and the button keep their width, the sentence
   between them takes what is left and ends in an ellipsis. */
/* The sentence beside the button wraps rather than truncating. Sandy's column took width from this
   bar, and a line that ends "9 changes across 1 f..." tells the reader nothing: two short lines
   read, one clipped line does not. */
.runslot .gonote{flex:1 1 auto;min-width:0;white-space:normal;text-wrap:balance;line-height:1.35;max-height:2.7em;overflow:hidden}
/* The price, beside the button that spends it: the figure, and under it whose rate, which model,
   read when. Two lines inside the bar's height; the figure is what the eye lands on. */
.rate{display:inline-flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.2;
      padding-right:11px;box-shadow:inset -1px 0 0 var(--line)}
.rate b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rate small{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.rate.unknown b{color:var(--ink-2)}
@media(max-width:900px){.rate small{display:none}}
.wallet{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;color:var(--ink-2)}
.wallet svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wallet b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ident .mk{height:34px;width:auto;flex:none;display:block}
/* The product's own name is the one thing on this bar that must never be cut: a customer reading
   "Refund & su..." is reading our layout, not their product. It keeps its width and the sentence
   beside the button gives way first. */
.ident .nm{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;max-width:38ch}

.taps{display:flex;align-items:stretch;border-bottom:1px solid var(--line);overflow-x:auto;
      height:40px;padding-left:12px}
.tap{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 12px;background:transparent;
     border:0;cursor:pointer;white-space:nowrap;font-family:var(--disp);
     font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-3);
     box-shadow:inset 0 -2px 0 transparent;transition:color .12s,box-shadow .12s}
.tap:hover{color:var(--ink-2)}
.tap.on,.tap.on:hover{color:var(--ink)}
.tap b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tap.on b{color:var(--ink)}
.mode{flex:none;width:30px;height:30px;display:grid;place-content:center;border:0;
      background:transparent;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.mode:hover{background:var(--g-2);color:var(--ink)}
.mode svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.mode .moon{display:none;fill:currentColor;stroke:none}
html[data-mode="light"] .mode .sun{display:none}
html[data-mode="light"] .mode .moon{display:block}
/* Named, not just drawn. It sits in the top bar rather than the bottom corner, which is Sandy's:
   two floating things in one corner is one of them covering the other. */
.feedback{display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;padding:0 9px;
          border:1px solid var(--line);background:transparent;color:var(--ink-2);
          font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
          transition:border-color .15s,color .15s}
.feedback:hover{border-color:var(--held);color:var(--ink)}
.feedback svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feedback[data-unread]{border-color:var(--held);color:var(--ink)}
.feedback[data-unread]::after{content:"";width:6px;height:6px;background:var(--held)}

/* The homepage of the session: three live instruments, the one button, then what the run found.
   Each instrument is an animated figure with its numbers beside it -- the meter IS the design. */
.insts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px 0 2px}
.inst{background:var(--g-1);border:1px solid var(--line);box-shadow:var(--sh-1);cursor:pointer;color:inherit;font:inherit;text-align:left;
      padding:16px 18px;display:flex;gap:18px;align-items:center;min-width:0;overflow:hidden}
.inst:hover{border-color:var(--held)}
.inst .ic{width:150px;height:150px;flex:none;image-rendering:pixelated}
/* One column beside a full-width chat; nudge the chat a little narrower and the three snap into
   a row. In the tight band the art gives one step so the row always fits; wide, it is full size. */
.insts{grid-template-columns:1fr}
@container (min-width:800px){
  .insts{grid-template-columns:repeat(3,1fr)}
  .inst{padding:12px 14px;gap:14px}
  .inst .ic{width:118px;height:118px}
}
@container (min-width:1100px){
  .inst{padding:16px 18px;gap:18px}
  .inst .ic{width:150px;height:150px}
}
.iwords{display:flex;flex-direction:column;gap:2px;min-width:0}
.inum{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.iname{font-size:12px;font-weight:500;color:var(--ink-2)}
.isub{font-size:11.5px;color:var(--ink-3)}

/* The view is a fixed two-row grid: the head, then the pane. Neither scrolls the page. */
.view{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;
      container-type:inline-size;padding:0}
#head{padding:16px clamp(14px,2vw,24px) 0}
/* A tab with no head leaves no white band for the page to scroll under. */
#head:empty{display:none}
#drawn{overflow-y:auto;padding:16px clamp(14px,2vw,24px) 32px;min-height:0}

.band{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
      font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);
      padding:0 0 9px;border-bottom:1px solid var(--line);margin:18px 0 0}
#head>.band:first-child{margin-top:0}
.band span:last-child{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.aside{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:74ch}
.none{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:14px 0 0}

.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--sh-1)}
@container (max-width:720px){.planes{grid-template-columns:1fr}}
.plane{background:var(--g-1);padding:13px 15px 14px}
.plane .pn{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.plane .pv{font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.plane .ps{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.plane .meter{width:auto;margin-top:10px}

.gorow{display:flex;align-items:center;gap:13px;margin:16px 0 0;flex-wrap:wrap}
.go{display:inline-flex;align-items:center;height:30px;background:var(--held);
    color:#FFFFFF;border:0;padding:0 13px;cursor:pointer;
    font-size:12.5px;font-weight:600;letter-spacing:.005em;box-shadow:var(--sh-1);
    transition:filter .12s,box-shadow .12s}
.go:hover{filter:brightness(1.08)}
.go:active{filter:brightness(.95)}
/* Running wears the same solid green as the button it was -- only the icon and the word change. */
.go.live,.go.live:hover{filter:none;cursor:default}
.go:disabled:not(.live){cursor:default;background:transparent;color:var(--ink-2);filter:none;
    box-shadow:inset 0 0 0 1px var(--line-2)}
.gonote{font-size:12px;color:var(--ink-3)}
.ghost{background:transparent;color:var(--ink-2);border:0;box-shadow:inset 0 0 0 1px var(--line-2);
       padding:7px 12px;cursor:pointer;font-size:12.5px;font-weight:500;
       transition:color .12s,box-shadow .12s}
.ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.ghost:disabled{color:var(--ink-3);cursor:default}
.filters{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 2px}
.fchip{font-family:var(--mono);font-size:10.5px;border:0;
       background:var(--g-2);color:var(--ink);padding:5px 9px;cursor:pointer;transition:color .12s,background .12s}
/* Shown is the resting state, so it is quiet; switched off has to be unmistakable, and a strike
   says it without spending the green. */
.fchip[aria-pressed="false"]{background:transparent;color:var(--ink-3);text-decoration:line-through;
                             box-shadow:inset 0 0 0 1px var(--line-2)}
.fchip:hover{color:var(--ink)}

/* ── the list and its detail ── */
.pane{display:grid;grid-template-columns:minmax(268px,336px) minmax(0,1fr);
      grid-template-rows:minmax(0,1fr);min-height:0;position:relative;margin-top:14px}
.index{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0;border-top:1px solid var(--line)}
.ihead{display:grid;grid-template-columns:26px 10px minmax(0,1fr) auto;gap:0 10px;align-items:center;
       height:28px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);
       font-size:10.5px;font-weight:500;color:var(--ink-3)}
.rows{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0}
.rows:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* 44px, fixed, forever. A fixed row height is what makes the list scroll-stable, patchable in
   place, and safe to insert into above the fold. */
.row{display:grid;grid-template-columns:26px 10px minmax(0,1fr) auto;gap:0 10px;align-items:center;
     height:44px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);background:transparent;
     cursor:pointer;transition:background 90ms linear}
.row:hover{background:var(--g-1)}
.row[aria-selected="true"]{background:var(--g-2);box-shadow:inset 2px 0 0 var(--ink)}
.row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.row .rk{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
/* One line, ellipsised. The full title is the sheet's h2 -- a list that wraps is a list that
   reflows, and reflow is the whole complaint. */
.row .ti{font-size:13.5px;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row[aria-selected="true"] .ti{color:var(--ink)}
.row .right{display:flex;align-items:center;justify-content:flex-end;font-family:var(--mono);
            font-size:10px;color:var(--ink-3);white-space:nowrap}
/* A row that has just been settled is FILLED, not faded: the row was already on the list as a
   planned conversation, and fading its ink in reads as the row itself arriving. */
.row.fresh .ti,.row.fresh .right{animation:ink 160ms linear both}
@keyframes ink{from{color:var(--line)}}

/* The pen, while a line is being written. It marks the place the words are landing. */
.pen::after{content:'';display:inline-block;width:.45em;height:1em;vertical-align:-.14em;margin-left:2px;
      background:var(--held);animation:pen 1s steps(1,end) infinite}
@keyframes pen{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pen::after{animation:none}}

.detail{background:var(--g-1);border-left:1px solid var(--line);border-top:1px solid var(--line);
        overflow-y:auto;overscroll-behavior:contain;min-width:0;min-height:0;
        padding:22px clamp(18px,2.4vw,30px) 44px;box-shadow:var(--sh-1)}
.detail:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.sheet{max-width:66ch;animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
@keyframes sheet{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The opened row's sheet, standing between the rows. */
.sheetbox{padding:18px clamp(14px,2vw,24px) 26px 46px;border-bottom:1px solid var(--line);background:var(--g-1);
          animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
.detail{display:none}

/* The homepage never splits: the findings list is the page, and a row opens its sheet over it.
   No table header either -- "# Case Arc" over the findings made the page read as a data pane. */
.pane.solo{grid-template-columns:minmax(0,1fr)}
.pane.solo .ihead{display:none}
.pane.solo .index{border-top:0}
/* Parked off-screen it is INVISIBLE, shadow included -- a translated pane kept painting its
   shadow back over the floor's right edge as a border that never finished. */
.pane.solo .detail{position:absolute;inset:0;z-index:2;border-left:0;box-shadow:none;
                   visibility:hidden;transform:translateX(100%);
                   transition:transform 220ms cubic-bezier(.22,.68,.32,1),visibility 0s 220ms}
.pane.solo.showing .detail{visibility:visible;transform:none;
                   transition:transform 220ms cubic-bezier(.22,.68,.32,1)}
.pane.solo .detail .back{display:inline-block}

/* Narrow: the detail becomes a sheet over the list. A container query, not a media query -- the
   conversation is drag-resizable, so the viewport width lies about this column. */
@container (max-width:720px){
  .pane{grid-template-columns:minmax(0,1fr)}
  .detail{position:absolute;inset:0;z-index:2;border-left:0;
          transform:translateX(100%);transition:transform 220ms cubic-bezier(.22,.68,.32,1)}
  .pane.showing .detail{transform:none}
  .detail .back{display:inline-block}
}

.dmeta{font-size:11px;font-weight:500;color:var(--ink-3);margin:0 0 9px}
.sheet h2{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 10px;
          color:var(--ink);overflow-wrap:anywhere}
.dverd{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.lede{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.lab{display:block;font-size:11px;font-weight:600;letter-spacing:.01em;
     color:var(--ink-3);margin:26px 0 8px}
.lab.hold{color:var(--hold)}
.keel{margin:0;padding:3px 0 3px 13px;border-inline-start:2px solid var(--held);font-size:14px;
      line-height:1.6;color:var(--ink);font-style:italic;overflow-wrap:anywhere}
.defends{display:flex;align-items:center;gap:11px;margin:0;font-size:14px;color:var(--ink)}
.defends .mv{font-size:11px;color:var(--ink-3);white-space:nowrap}
.facts{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.7;overflow-wrap:anywhere}

.turns{list-style:none;margin:0;padding:0}
.turns li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:11px;align-items:baseline;
          padding:5px 0;border-top:1px solid var(--line)}
.turns li:first-child{border-top:0}
.turns .lvl{font-size:10.5px;font-weight:500;color:var(--ink-3);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turns li.brk .lvl{color:var(--ink)}
.turns li.brk .at{color:var(--ink)}
.turns .at{font-size:13px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
@container (max-width:520px){.turns li{grid-template-columns:1fr;gap:2px}}

.checks{list-style:none;margin:0;padding:0}
.checks li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:baseline;padding:5px 0}
.checks li .ok{margin-top:5px}
.checks span{font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.checks .dim{display:block;font-size:10px;font-weight:500;color:var(--ink-3);margin-bottom:1px}
.checks .ruled{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.checks blockquote.keel{margin-top:5px}
.paths{display:flex;flex-direction:column;font-family:var(--mono);font-size:10.5px;line-height:1.8;color:var(--ink-2)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
pre.mono{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-2);background:var(--g-2);
         padding:10px 12px;margin:0;overflow-x:auto;white-space:pre}

/* ── the figures ── */
.figures{max-width:900px;padding-top:16px}
.figure{margin:14px 0 0}
.runline{width:100%;height:auto;display:block;overflow:visible}
.runline .grid{stroke:var(--line);stroke-width:1}
.runline .axis{font-family:var(--mono);font-size:9px;fill:var(--ink-3)}
.runline .path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.runline .dot{fill:none;stroke:var(--line-2);stroke-width:2}
.runline .dot.cur{fill:var(--ink);stroke:none}
.runline .path.held{stroke:var(--held);stroke-width:2;stroke-dasharray:4 3}
.runline .dot.held{stroke:var(--held);stroke-width:2}
.aside .heldkey{color:var(--held)}
.tracks{margin-top:14px}
.track{display:grid;grid-template-columns:170px minmax(0,1fr) 116px;gap:12px;align-items:center;
       padding:7px 0;border-top:1px solid var(--line)}
.track .lbl{font-size:11.5px;font-weight:500;color:var(--ink-3);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track .rail{position:relative;height:11px;background:var(--line);}
.track .mk{position:absolute;top:0;width:9px;height:11px;margin-left:-4px;display:block}
.track .mk.prev{box-shadow:inset 0 0 0 2px var(--line-2)}
.track .mk.cur{background:var(--ink)}
/* Ink, never held/broke: the join spans two readings, and no floor exists per dimension to call one
   of them an improvement. */
.track .join{position:absolute;top:4px;height:3px;width:0;background:var(--ink-3);
             transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.track .val{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.track .notest{font-size:10.5px;color:var(--ink-3);padding-left:6px}

/* ── the sandbox drawer: a terminal, deliberately, identical in both rooms. The ground is OUR
   green taken dark, the prompt and accents are the green itself, and every word is the house blue
   ink -- green text on green ground read as soup. ── */
.drawer{border:0;margin:0 6px 0 0;font-family:var(--mono);overflow:hidden;border-radius:0 12px 0 0;
        /* a neutral dark ground with the pixel texture; green is chrome, never the wall */
        background:
          repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
          repeating-conic-gradient(rgba(255,255,255,.022) 0% 25%,transparent 0% 50%) 0 0/4px 4px,
          #14181C;
        /* a doubled pixel frame; corners stay square -- pixels are square */
        box-shadow:inset 0 0 0 2px rgba(118,185,0,.4),inset 0 0 0 4px rgba(118,185,0,.1)}
.dbar{display:flex;align-items:center;gap:4px;padding-right:6px}
.dhead{display:flex;align-items:center;gap:9px;padding:0 14px;height:34px;cursor:pointer;flex:none;
       min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:10.5px;
       letter-spacing:.07em;color:#93A9BC}
.dhead:hover{color:#D5E1EA}
.dhead .prompt{color:#76B900;letter-spacing:0;margin-right:2px}
.dhead .chev{display:grid;place-content:center;transition:transform .2s;margin-left:2px}
.dhead .chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dhead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dbody{padding:4px 14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
       gap:14px 26px;align-items:start;max-height:38vh;overflow-y:auto}
.dbody dl{margin:0;min-width:0;overflow:hidden}
.dbody dl.wide{grid-column:1/-1}
.dbody dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#7C93A6}
.dbody dd{margin:4px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.65;color:#C6D4E0;
          overflow-wrap:anywhere;min-width:0}
.dbody dd.lock{color:#EDF2F7}
.dbody dd.lock::before{content:'';display:inline-block;width:7px;height:7px;background:#76B900;margin-right:7px}
.dbody dd.many{display:flex;flex-wrap:wrap;gap:4px 8px}
.dbody dd.many span{white-space:normal;background:#202730;padding:2px 8px;max-width:100%;overflow-wrap:anywhere}
/* In the light room the terminal turns the lamp on: the same green family, pale. */
html[data-mode="light"] .drawer{
  background:
    repeating-linear-gradient(0deg,rgba(28,43,54,.05) 0 1px,transparent 1px 3px),
    repeating-conic-gradient(rgba(28,43,54,.04) 0% 25%,transparent 0% 50%) 0 0/4px 4px,
    #F1F3F0;
  box-shadow:inset 0 0 0 2px rgba(92,145,0,.5),inset 0 0 0 4px rgba(92,145,0,.14)}
html[data-mode="light"] .dhead{color:#5A6B7C}
html[data-mode="light"] .dhead:hover{color:#1C2B36}
html[data-mode="light"] .dhead .prompt{color:#5C9100}
html[data-mode="light"] .dbody dt{color:#75838F}
html[data-mode="light"] .dbody dd{color:#2E4152}
html[data-mode="light"] .dbody dd.lock{color:#14202C}
html[data-mode="light"] .dbody dd.lock::before{background:#76B900}
html[data-mode="light"] .dbody dd.many span{background:#E3E8EB}


.pop{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:180px;padding:4px;
     background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-2)}
.pop[hidden]{display:none}
.pop button{display:block;width:100%;border:0;background:transparent;cursor:pointer;padding:8px 11px;
            text-align:left;font-family:var(--disp);font-size:13px;color:var(--ink-2)}
.pop button:hover{background:var(--g-2);color:var(--ink)}
.pop button.locked{cursor:default;color:var(--ink-3)}
.pop button.locked:hover{background:transparent}

@media(prefers-reduced-motion:reduce){.sheet,.row.fresh{animation:none}.detail{transition:none}}
@media(max-width:1000px){.shell{grid-template-columns:minmax(0,1fr) minmax(0,var(--chatw,560px))}}
/* The chat's own hiding rule lives at the bottom of chat.css, not here: a media query adds no
   specificity, chat.css loads after this file, and `.chat{display:grid}` therefore won. */
@media(max-width:820px){.shell,.shell.chatshut{grid-template-columns:1fr}}

/* The fixture bar itself is drawn by /app/onboarding/fixture-bar.js, which four screens share.
   The shell is height:100%, so the bar has to take a row rather than push it off the bottom. */
body.hasfix{display:flex;flex-direction:column}
body.hasfix .shell{flex:1;height:auto;min-height:0;width:100%}

.ident .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
.ident .brand{color:var(--ink-3);font-weight:500}
.ident .sep{color:var(--ink-3);font-style:normal;opacity:.65}
.ident #pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The rulebook screen's isometric bars, reused: one material for the whole walk rather than a new
   chart per tab. Same geometry, same ramp, same tabular count under each bar. */
.found { margin: 0 0 26px; }
.foundhead { margin: 0 0 14px; font: 500 15px/1.2 var(--disp); }
.found .graph { display: grid; padding-top: 26px; gap: 16px 4px; align-items: end; margin: 0 0 20px; }
.found .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; }
.found .graph .slot canvas { width: 100%; max-width: 88px; height: auto; display: block; image-rendering: pixelated; }
.found .graph .slot b { margin-top: 5px; font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.15; }
.found .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; }
.found .graph .slot:hover b { color: var(--ink); }
.found .graph .slot:hover span { color: var(--ink-2); }
.found .graph .slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* One card per kind of thing the run drives: the share that held, and what that kind checks. The
   figure above carries how many; nothing here repeats it. */
.found-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 22px; }
.found-card { display: grid; gap: 6px; align-content: start; padding: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--g-1); }
.found-card:hover { border-color: var(--line-2); }
.found-card.hurt { border-color: var(--line-2); }
.found-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.found-pct { font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--held); }
.found-card.hurt .found-pct { color: var(--ink); }
.found-n { font: 400 11px/1.3 var(--mono); color: var(--ink-3); }
.found-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.found-says { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.found-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px;
  font: 400 11px/1 var(--mono); color: var(--ink-3); }
.band-key::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; }
.band-key.held::before { background: var(--held); }
.band-key.broke::before { background: var(--ink); }
.band-key.unclear::before { background: var(--hold); }
.band-key.broke { color: var(--ink); }

/* The customer's own rules lead the page: the only cards on it they wrote themselves. */
.found-card.mine { background: var(--g-2); border-color: var(--line-2); }

/* ── the overview, as one column that patches in place ──
   The head no longer holds its own height: on the run tab the view scrolls as one document and the
   list sits under the head rather than being squeezed by it. The sheet a row opens covers the
   whole column. */
.view.column{overflow-y:auto;position:relative}
.view.column .pane.solo{position:static;min-height:0;margin-top:0}
.view.column .pane.solo .index{border-top:1px solid var(--line);margin:8px clamp(14px,2vw,24px) 40px}
.view.column .pane.solo .rows{overflow:visible}
.view.column .pane.solo .detail{position:absolute;top:0;left:0;right:0;bottom:auto;height:100%;z-index:2}
.view.column #head{padding-bottom:0}

.rv{display:grid;gap:18px;padding:2px 0 6px}
.rv-status{display:grid;gap:6px}
.rv-line{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.rv-meta{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
         font-variant-numeric:tabular-nums}
/* The one bar. Ink, never green: it moves because work finished, and progress is not an outcome. */
.rv-rail{height:3px;background:var(--line);position:relative;overflow:hidden;margin-top:4px}
.rv-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);
         transition:width 420ms cubic-bezier(.22,.68,.32,1)}
/* While the run is on: the door being driven and what has come back on it, under the rail. */
.rv-driven{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.rv-quote{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.rv-skipped{display:grid;gap:6px}
.rv-skip{display:flex;align-items:baseline;gap:10px;margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.rv-skip .ok{position:relative;top:2px}
.rv-compile{margin-left:auto;flex:none;border:0;background:none;cursor:pointer;padding:0;
            font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.rv-compile:hover{color:var(--ink)}
.rv-h{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}

/* The conversations in flight, one card each: who is asking, which turn, what was said, what came back. */
.rv-lanegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rv-lane{display:grid;gap:5px;padding:12px 13px;border:1px solid var(--line);background:var(--g-1);min-width:0}
.rv-lane-title{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-lane-kind{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
              color:var(--ink-3);margin-right:8px}
.rv-lane-kind:empty{display:none}
.rv-lane-meta{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-said{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-reply{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;
          display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rv-lane.waiting .rv-reply{color:var(--ink-3)}
.rv-lane.waiting .rv-reply:empty::before{content:'waiting for the reply';font-family:var(--mono);font-size:10px;letter-spacing:.08em}

/* What it found: the rulebook screen's bars once, then cards whose numbers move in place. */
.rv-found .graph{display:grid;padding-top:22px;gap:16px 4px;align-items:end;margin:0 0 16px}
.rv-found .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}
.rv-found .graph .slot canvas{width:100%;max-width:88px;height:auto;display:block;image-rendering:pixelated}
.rv-found .graph .slot b{margin-top:5px;font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.15}
.rv-found .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}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.rv-card{display:grid;gap:6px;align-content:start;padding:14px;cursor:pointer;border:1px solid var(--line);
         background:var(--g-1)}
.rv-card:hover{border-color:var(--line-2)}
.rv-card.hurt{border-color:var(--line-2)}
.rv-card.mine{background:var(--g-2)}
.rv-card.quiet .rv-pct{color:var(--ink-3)}
.rv-card-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.rv-pct{font:500 24px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--held)}
.rv-card.hurt .rv-pct{color:var(--ink)}
.rv-n{font:400 11px/1.3 var(--mono);color:var(--ink-3)}
.rv-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.rv-says{margin:0;font-size:12px;line-height:1.45;color:var(--ink-2)}
.rv-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;font:400 11px/1 var(--mono);color:var(--ink-3)}

/* A row this run never dispatched: an outline square, struck through the middle. */
.ok.skipped{box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--line-2),var(--line-2)) center/100% 1px no-repeat}

/* The run picker, beside the product's name. */
.runpick{position:relative;display:inline-flex}
.runpick-trigger{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;
  background:transparent;color:var(--ink-3);cursor:pointer;font:500 11px var(--mono);letter-spacing:.06em}
.runpick-trigger:hover,.runpick-trigger[aria-expanded="true"]{color:var(--ink);background:var(--g-2)}
.runpick-trigger svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.runpick-menu{min-width:280px;left:auto;right:0}
.runpick-menu button{display:grid;gap:2px}
.runpick-menu button b{font-size:12.5px;font-weight:600;color:var(--ink)}
.runpick-menu button span{font:400 10.5px var(--mono);color:var(--ink-3)}
.runpick-menu button.on{background:var(--g-2)}

/* A turn the agent works through many tools at once: the calls fold into one row with a count,
   so a plan being written does not put twenty rows between the customer and the answer. */
.quiet{background:var(--g-2);border-radius:8px;padding:9px 12px;display:grid;gap:4px}
.quiet-line{font-size:12.5px;color:var(--ink-2)}
.quiet-line b{font-weight:500;color:var(--ink)}
.quiet-more{border:0;background:none;padding:0;cursor:pointer;text-align:left;
            font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.quiet-more:hover{color:var(--ink)}
.quiet[data-open="1"] .quiet-body{display:grid;gap:6px;margin-top:6px}
.quiet .quiet-body{display:none}
@media(prefers-reduced-motion:reduce){.rv-fill{transition:none}}

/* The map of the run: one column of stages, in the order the worker drives them. The rail on each
   stage fills because rows settled; the number on the left is the order, not a score. */
.rv-map{display:grid;gap:2px}
.rv-stage{display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:10px 0;border-top:1px solid var(--line)}
.rv-stage:last-child{border-bottom:1px solid var(--line)}
.rv-stage-n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);padding-top:2px}
.rv-stage[data-state="running"] .rv-stage-n,.rv-stage[data-state="done"] .rv-stage-n{color:var(--ink)}
.rv-stage-body{display:grid;gap:3px}
.rv-stage-name{font-size:13px;font-weight:600;color:var(--ink)}
.rv-stage[data-state="planned"] .rv-stage-name{color:var(--ink-2)}
.rv-stage-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.rv-stage.hurt .rv-stage-count{color:var(--ink)}
.rv-stage-says{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:78ch}
.rv-stage-rail{display:block;height:2px;background:var(--line);position:relative;overflow:hidden;margin-top:6px}
.rv-stage-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);transition:width .4s ease-out}
.rv-stage[data-state="done"] .rv-stage-fill{background:var(--ink)}
.rv-stage.hurt .rv-stage-fill{background:var(--ink)}

/* Work in flight, behind the settled fill on the same rail: a conversation opening is work that
   finished, and it moves the rail a step before its verdict does. A step below the settled ink. */
.rv-flight,.rv-stage-flight{position:absolute;inset:0 auto 0 0;width:0;background:var(--line-2);
                            transition:width 420ms cubic-bezier(.22,.68,.32,1)}
@media(prefers-reduced-motion:reduce){.rv-flight,.rv-stage-flight{transition:none}}

/* The doors: one pixel door per place the product answers, in a row, the name and what this run
   holds for it under each. The one this run drives is marked by colour alone, the way a selected
   tab is: full ink on the name, full ember in the doorway. */

/* The palette's fact cards: the same frame as the three with art, one number and one line. */
.inst.plain{align-items:flex-start;padding:14px 16px}
.inst.plain .inum{font-size:22px}
.inst.hurt .inum{color:var(--ink)}
.rv-go{margin:2px 0 0;font-size:13.5px;font-weight:600;color:var(--ink)}

/* The doors as buttons: the product's door open and lit, the team's shut. */

/* The three lanes: one row, never a wall of sets. */
.rv-lanegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:900px){.rv-lanegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* After the run: the facts under the verdict, the columns where it gave way, and what was learned. */
.rv-facts{margin:2px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2)}
.rv-gave{display:grid;gap:8px}
.rv-bars{display:grid;gap:12px 10px;align-items:end}
.rv-bar{appearance:none;border:0;background:none;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;
        display:grid;justify-items:center;gap:3px;width:100%}
.rv-bar canvas{display:block;image-rendering:pixelated}
.rv-bar-pct{font:500 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.rv-bar-name{font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.rv-bar-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.4}
.rv-bar:hover .rv-bar-name{color:var(--held)}
.rv-learned{display:grid;gap:6px}
.rv-read{display:grid;gap:6px}
.rv-read p{margin:0;font-size:13px;line-height:1.55;color:var(--ink);max-width:78ch}
/* The shares, in the bars' material. The words sit under the figure, never above it. */
.rv-pies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:10px;align-items:start}
.rv-pie{display:grid;justify-items:center;gap:3px;margin:0;min-width:0}
.rv-pie canvas{display:block;image-rendering:pixelated}
.rv-pie figcaption{display:grid;justify-items:center;gap:3px;min-width:0}
.rv-pie-name{font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.rv-pie-legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.5;max-width:30ch}

.rv-gate{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.rv-bar-count{min-height:2.9em}

/* How it behaves: two columns of observations with the words it said. */
.rv-habits{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.rv-habit-head{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rv-habit{margin:0 0 12px;font-size:13px;line-height:1.45}
.rv-habit b{display:block;font-weight:500;color:var(--ink)}
.rv-habit q{display:block;color:var(--ink-2);font-style:italic;quotes:'\201C' '\201D'}
.rv-habit-more{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
@media (max-width:760px){.rv-habits{grid-template-columns:1fr}}

/* The funnel: one figure per layer this run stopped at, in the pies' material, a sentence under each. */
.rv-paid{margin-top:26px}
.rv-paid-figs{display:grid;gap:8px;margin:0 0 4px}
.rv-paid-said{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.rv-paid-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:18px}
.rv-paid-open{padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.rv-paid-open:hover{border-color:var(--ink-3)}
.rv-paid-price{margin:0;font-size:12.5px;color:var(--ink-2)}
.rv-paid-wall{margin-top:14px}

/* ── the arrival: the loading page, then the room one thing at a time ── */
.join{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#2E5379;
      transition:opacity .7s ease,visibility .7s}
.join.gone{opacity:0;visibility:hidden}
#world{width:min(300px,52vw);height:min(300px,52vw);image-rendering:pixelated;display:block}
/* Veiled until its turn: in place, invisible, then it settles in. */
/* Nothing on this screen fades into existence. A thing that has not arrived stands as its own
   shape in grey, at its own size, in its own place; when it arrives it is FILLED, in place. No
   opacity ramp and no slide: a fade is a thing appearing from nowhere, and the eye has nothing to
   walk. One rule for every region, because the moment one of them fades the whole room reads as a
   page still loading. */
.veil{transition:opacity .34s cubic-bezier(.22,.68,.32,1)}
/* Nothing waits as a grey bar. A line that has not been written yet takes no room at all, so the
   page grows downward as the words arrive rather than filling in slots that were already standing
   empty. A button holds its place and fades in, because its place is beside things already read. */
p.veil:not(.in),div.veil:not(.in),h1.veil:not(.in),button.veil:not(.in){opacity:0}
button.veil:not(.in){pointer-events:none}
/* A region that has not arrived keeps its own layout and greys its own parts: a tab stays tab
   shaped, a button stays button shaped, the identity bar keeps its columns, and nothing jumps when
   the row arrives. They are invisible rather than grey: a grey slab is a picture of a thing that is
   not there yet, and the eye reads it as content it cannot make out. */
.shell.arriving .ident:not(.in) > *,.shell.arriving .taps:not(.in) > *,
.shell.arriving .drawer:not(.in) > *,.shell.arriving .strip:not(.in) > *{
      opacity:0;transition:opacity .34s cubic-bezier(.22,.68,.32,1)}
/* A rule with nothing on either side of it is furniture for content that has not arrived. The tab
   row and the list keep their rules once they hold something; until then they draw none. */
.shell.arriving .taps:not(.in){border-bottom-color:transparent;background:transparent}
.shell.arriving .view .pane .index,.shell.arriving .index{border-top-color:transparent}
.taps,.index{transition:border-color .34s ease,background-color .34s ease}
.rv-surfaces{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.iline{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.rv-words{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink);max-width:70ch;min-height:1.5em}
.rv-plan{justify-self:start;width:max-content;margin:10px 0 18px;padding:7px 12px;border:0;background:transparent;color:var(--ink);font:600 12.5px var(--disp);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .12s}
.rv-plan:hover{box-shadow:inset 0 0 0 1px var(--held)}

/* The skeleton: the box and its art stand from the first frame; the words are grey bars until the
   reveal reaches the card, then they fade in and the art takes the room's inks. */
.inst.skel{cursor:default}
.inst.skel .inum,.inst.skel .iname,.inst.skel .isub,.inst.skel .iline{opacity:0}
.inst .inum,.inst .iname,.inst .isub,.inst .iline{transition:opacity .4s ease}
/* The price, pointed at: the whole bill in plain English, built from the page. */
.rate{position:relative;cursor:default;outline:none}
.rate:focus-visible{box-shadow:inset -1px 0 0 var(--line),0 2px 0 var(--held)}
.ratetip{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:44ch;padding:10px 12px;
         border:1px solid var(--line-2);background:var(--g-1);color:var(--ink);font:400 12.5px/1.5 var(--disp);
         white-space:normal;text-align:left;box-shadow:var(--sh-1)}
.rate:hover .ratetip,.rate:focus-within .ratetip{display:block}
.rv-words{margin:14px 0 0}

/* ── every tab in one language: a lead in sentences, mono-caps labels, rows and cards that read as
   sentences, a state word, and nothing marked by a strip. ── */
.tablead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;margin:4px 0 6px}
.tabhow{margin:0;font-size:14px;line-height:1.55;color:var(--ink);max-width:76ch}
.tabsum{font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.aside{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:74ch}

/* The filters: each group under its own label; the chosen value is ink and heavy, nothing more. */
.sift{display:grid;gap:6px;margin:12px 0 4px}
.siftgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px}
.siftlabel{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);min-width:84px}
.siftgroup button{appearance:none;border:0;background:transparent;padding:4px 8px;cursor:pointer;font:400 12.5px var(--disp);
                  color:var(--ink-3);transition:color .12s}
.siftgroup button:hover{color:var(--ink-2)}
.siftgroup button[aria-pressed="true"]{color:var(--ink);font-weight:600}

/* The list: a taller row, the title in ink, its facts under it in mono, the chosen row by colour. */
.ihead{height:26px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.row{height:52px}
.row .ti{font-size:14px;color:var(--ink)}
.row .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
.row[aria-selected="true"]{background:var(--g-2);box-shadow:none}
.ghead{padding:14px 12px 6px 10px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* The sheet: the same labels as the plan's cards, the title a little quieter. */
.sheet h2{font-size:18px}
.dmeta{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.lab{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
     margin:22px 0 8px;padding-top:10px;border-top:1px solid var(--line)}
.lab.hold{color:var(--hold)}

/* Earlier runs: one card each, the verdict as a sentence, our fault said as ours. */
.runs{display:grid;gap:10px;margin-top:4px}
.runrow{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;
        padding:14px 18px;border:1px solid var(--line);background:var(--g-1)}
.runrow b{font-size:14px;font-weight:600;color:var(--ink)}
.runwhen,.runlen{font:400 11px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.runsaid{font-size:13.5px;line-height:1.5;color:var(--ink)}
.runfault{display:block;font-size:12.5px;color:var(--ink-2)}
.runhere{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Your numbers: the same card as the plan's stages, with its labels. */
#drawn .outcomes-page h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
#drawn .outcomes-lede{font-size:14px;color:var(--ink);max-width:76ch;margin:8px 0 18px}
#drawn .outcome-card{border-radius:0;background:var(--g-1);min-height:0;gap:6px;padding:16px 18px 14px}
#drawn .outcome-card .stagelabel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
#drawn .outcome-why{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
#drawn .outcome-proof{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink)}
#drawn .outcome-proof b{font:500 11px var(--mono);color:var(--ink-3)}
#drawn .outcome-proof b.failed{color:var(--ink)}
#drawn .outcome-segment{font:400 11px var(--mono);color:var(--ink-3)}

/* The plan opens with one picture beside its words; the stage numbers are ours, in green. */
.planlead{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
.planart{width:96px;height:96px;image-rendering:pixelated}
.planleadwords{min-width:0}
.stageno{color:var(--held)}
.stageno{font-size:11px}

/* The agents: one card each, the same rows as the plan's stages. */
.agentgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;margin-top:6px}
.agent{display:grid;align-content:start;gap:2px;padding:16px 18px 14px;border:1px solid var(--line);background:var(--g-1)}
.agenthead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.agentname{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.agentkind{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.agenthead .stagestate{margin-left:auto}
.agentjob{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* Production, in the same language: square cards on the room's surface, the labels ours. */
#drawn .production-notice,#drawn .production-form,#drawn .production-choice{border-radius:0;background:var(--g-1);border-color:var(--line)}
#drawn .production-field input{border-radius:0}
#drawn .production-form-head b,#drawn .production-notice-copy b{font-size:15px;font-weight:600;letter-spacing:-.01em}
#drawn .production-field span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* The plan's rows in the thread arrive one at a time. */
.plancard .pcrow.veil,.plancard .aopen.veil{opacity:0;transition:opacity .3s ease}
.plancard .pcrow.veil.in,.plancard .aopen.veil.in{opacity:1}

/* ── the overview, built like the onboarding screens: art left, headline with its number in green,
   one sentence, the plan written under it. The same head counts the run and then reads the verdict. */
.rv{display:grid;gap:0;padding:6px 0 18px}
.rv-top .rv-art{float:none;width:100%;max-width:260px;height:auto;margin:0}
.rv-top{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;align-items:center}
.rv-art{width:190px;height:190px;display:block;image-rendering:pixelated;justify-self:center;margin-top:0}
/* While the run plays the basin fills beside the head, one block per finished conversation. */
.rv-words{min-width:0;padding-top:14px}
.rv-head{margin:0;font-size:27px;font-weight:600;line-height:1.22;letter-spacing:-.022em;color:var(--ink);
         max-width:22ch;font-variant-numeric:tabular-nums;min-height:1.22em}
.rv-head b{color:var(--held);font-weight:600}
.rv-line{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:62ch;min-height:1.6em;
         font-variant-numeric:tabular-nums}
.rv-rail{height:4px;background:var(--line);position:relative;overflow:hidden;margin:16px 0 0;max-width:62ch}
.rv-rail[hidden]{display:none}
.rv-flight{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);opacity:.3;
           transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.rv-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--held);
         transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.rv-gate{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:62ch}
/* Whose fault it was and what to do, as a sentence under the head: no box, no strip. */
.rv-fault{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.rv-side{display:block;margin:0 0 4px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rv-label{margin:28px 0 8px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rv-planbox{max-width:62ch}
.rv-planrows{margin:0;padding:0;list-style:none}
.rv-planrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 12px;align-items:baseline;
            padding:9px 0;border-top:1px solid var(--line);cursor:pointer;transition:color .12s}
.rv-planrow:last-child{border-bottom:1px solid var(--line)}
.rv-planrow:hover .rv-plantitle{color:var(--held)}
.rv-planno{font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-plantitle{font-size:13.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.rv-planrow.more .rv-plantitle{color:var(--ink-3)}
.rv-planfile{font:400 11px var(--mono);color:var(--ink-3);white-space:nowrap}
.rv-lanegrid{display:grid;grid-template-columns:1fr;gap:6px}
.rv-lane{display:grid;gap:4px;padding:10px 0 10px 16px;border:0;background:transparent;border-left:2px solid var(--line-2);min-width:0;
         animation:sheet 220ms cubic-bezier(.22,.68,.32,1) both}
.rv-lane.waiting{border-left-color:var(--held)}
.rv-lane-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-lane-meta{font:400 10.5px var(--mono);letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-said{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-reply{margin:0;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv-lane.waiting .rv-reply:empty::before{content:'waiting for the reply';font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--ink-3)}
/* Held back until the arrival reaches it; then in place, in one motion. */
.rv .veil{opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.22,.68,.32,1),transform .45s cubic-bezier(.22,.68,.32,1)}
.rv .veil.in{opacity:1;transform:none}
.rv-head.veil,.rv-line.veil{transform:none}
@container (max-width:640px){.rv-top{grid-template-columns:1fr}.rv-art{width:150px;height:150px;justify-self:start}}
@media(prefers-reduced-motion:reduce){.rv .veil{transition:none}.rv-lane{animation:none}}
/* The art stands grey from the first frame and colours in; the headline waits as bars like a line. */
.rv canvas.veil{opacity:1;transform:none}
.rv-lane[data-verdict="broke"]{border-left-color:var(--ink)}
.rv-lane[data-verdict="held"]{border-left-color:var(--held)}
.rv-lane[data-verdict="unclear"]{border-left-color:var(--line-2)}

/* ── the television: one screen, the conversation as it happens ── */
/* Four small screens, two by two. */
.tvwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px;margin:18px 0 6px}
@media(max-width:520px){.tvwall{grid-template-columns:1fr}}
.tvwall:not(.on){display:none}
.tvwall .tvm{font-size:11px;line-height:1.4;padding:5px 8px;border-radius:8px;max-width:92%}

/* The glass clips what is on it, the way a screen does, and a line arrives rather than appears. */
.tvwall .tv-glass{overflow:hidden}
/* The set does not scroll. A conversation the customer is watching is a thing they watch, not a
   region they operate; the glass clips it and the newest turn sits at the bottom. The wheel goes
   through it to the page: a feed that took the pointer held the page still under it. */
.tvwall .tv-feed{overflow:hidden;pointer-events:none;overscroll-behavior:auto;mask-image:linear-gradient(to bottom,transparent,#000 14%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%)}
/* Every set says whose conversation is on it. Four screens talking at once with no label is four
   strangers, and a reader cannot tell a whole visit from a single question. One line, clipped
   rather than wrapped, so the glass keeps its shape. */
.tvwall .tv-tag{position:absolute;left:8px;right:8px;top:5px;margin:0;padding:1px 6px;border-radius:4px;background:rgba(15,30,8,.85);font:600 10px var(--mono);letter-spacing:.06em;color:#A5E800;
    display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.tvwall .tv-tag-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tvwall .tv-tag-at{flex:0 0 auto;font-style:normal;opacity:.8}
.tvwall .tv-tag:not(:has(.tv-tag-name:not(:empty))){display:none}
/* A whole visit is marked as one: the tag takes the house green rather than the run's. */
.tvwall .tv.journey .tv-tag{background:#A5E800;color:#0F1E08}
/* What a journey is, said once, the first time one lands on the wall. */
.tv-note{margin:16px 0 -8px;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.tv-note[hidden]{display:none}
.tvwall .tv-feed::-webkit-scrollbar{display:none}
.tvwall .tv-glass{display:block}
/* Lines fill the glass from the bottom, like a terminal; the verdict sits over the corner. The
   newest line is the one the reader came for, so the feed stops short of the tag above it and of
   the verdict below it: with inset:0 and 6px the last reply was typed under the stamp and could
   not be read. */
.tvwall .tv-feed{position:absolute;inset:0;top:24px;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 8px 22px}
.tvwall .tv-stamp{position:absolute;right:8px;bottom:5px;margin:0;min-height:0;padding:1px 6px;border-radius:4px;background:rgba(15,30,8,.85)}
.tvwall .tv-stamp:empty{display:none}
/* The old-set look: faint scanlines over the glass. */
.tvwall .tv-glass::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.09) 2px 3px)}
.tvwall .tvm{animation:tvin .22s ease-out}
@keyframes tvin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tvwall .tv-stamp{font-size:10px}
.tvwall .tv.framed .tv-glass{min-height:0;max-height:none}
.tvwall .tv:not(.framed) .tv-glass{min-height:132px;max-height:196px}
.tvwall .tv-feed{gap:5px}
.tv{position:relative;margin:0;padding:14px;border-radius:16px;background:var(--g-2);
    box-shadow:inset 0 0 0 1px var(--line)}
.tv.framed{padding:0;background:transparent;box-shadow:none}
.tv-frame{display:block;width:100%;height:auto;image-rendering:pixelated}
.tv.framed .tv-glass{position:absolute}
.tv-glass{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-height:250px;max-height:340px;
          padding:12px 14px;border-radius:8px;background:#151D22;color:#E7EEF4;overflow:hidden;
          background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.3px);background-size:6px 6px}
.tv-feed{overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:4px;scrollbar-width:thin}
.tv-stamp{margin:0;font:600 11px var(--mono);letter-spacing:.06em;color:#8FA3B5;min-height:1.4em}
.tv-stamp[data-state="broke"]{color:#F2F6FA}
.tv-stamp[data-state="held"]{color:#A5E800}
.tv.stopped .tv-glass{box-shadow:0 0 0 2px #F58C77}
.tv-stamp[data-state="stopped"]{color:#F58C77}
.tv-idle{position:absolute;inset:0;display:grid;place-content:center;margin:0;font:500 11px var(--mono);letter-spacing:.1em;color:#8FA3B5}
.tv-idle::after{content:'';display:inline-block;width:8px;height:12px;margin-left:8px;vertical-align:-2px;background:#76B900;animation:pen 1s steps(1,end) infinite}
.tv-idle[hidden]{display:none}
.tvm{margin:0;max-width:82%;padding:8px 11px;font-size:13px;line-height:1.5;border-radius:12px;overflow-wrap:anywhere;white-space:pre-wrap}
.tvm.you{align-self:flex-end;background:#76B900;color:#0F1E08;border-bottom-right-radius:4px}
.tvm.app{align-self:flex-start;background:#EAF1F8;color:#132338;border-bottom-left-radius:4px}
.tvm.app.none{background:transparent;color:#8FA3B5;box-shadow:inset 0 0 0 1px #2B3A44;font-family:var(--mono);font-size:11px}
.tvm.app.brk{box-shadow:0 0 0 2px var(--ink)}
.tv:not(.on) .tv-glass{opacity:.55}
.tv:not(.on){display:none}

/* ── the overview's sections: art, a label, a few plain sentences ── */
.rv-truth{margin:10px 0 0;max-width:72ch}
.rv-truth[hidden]{display:none}
.rv-truth>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
                  font:500 11.5px var(--mono);color:var(--ink-3)}
.rv-truth>summary::-webkit-details-marker{display:none}
.rv-truth>summary::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--held)}
.rv-truth>summary:hover{color:var(--ink-2)}
.rv-truth[open]>summary{color:var(--ink-2)}
.rv-truth-why{border-left:1px solid var(--line);margin:7px 0 0 3px;padding:2px 0 2px 11px}
.rv-truth-row{margin:0 0 5px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.rv-truth-row b{color:var(--ink);font-weight:600}
/* The differences that cost nothing, kept apart from the ones that did. */
.rv-truth-head{margin:11px 0 5px;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rv-truth-free{color:var(--ink-3)}
.rv-truth-free b{color:var(--ink-2);font-weight:600}
/* auto-FILL, not auto-fit: the tracks are decided by the width of the room, never by how many
   cards have arrived. Under auto-fit a lone card stretched across the whole row and then shrank as
   each sibling landed, so every card that arrived rewrapped the words of the ones already read. */
.rv-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px;margin:28px 0 8px}
.rv-sec{padding:15px 16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--g-1)}
.rv-art{float:left;width:46px;height:46px;display:block;image-rendering:pixelated;margin:1px 12px 2px 0;shape-margin:10px}
.rv-fig{margin:0 0 6px;font:600 15px/1.2 var(--head,inherit);color:var(--ink-3)}
.rv-fig b{font-size:26px;font-weight:600;color:var(--held);letter-spacing:-.01em}
.rv-fig span{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rv-sec-text{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);min-height:1.6em}
.rv-sec-text b{color:var(--ink);font-weight:600}
.rv-sec-text b.n{color:var(--held)}
.rv-sec-more{margin:4px 0 0;padding:0;border:0;background:none;cursor:pointer;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.rv-sec-more:hover{color:var(--ink)}

/* The metrics: one card each, in the same shape as every other card on this screen. They were
   drawn as landing-page figures -- three hairline-joined panels, each led by its name in 21px
   display green -- which is a price table, not a run. Everything else here leads with the number
   this run put behind it, so these do too. */
.rv-metrics{margin:22px 0 8px}
.rv-metrics[hidden]{display:none}
.rv-metrics .rv-label{margin:0 0 10px}
.rv-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.rv-metric{display:flex;flex-direction:column;gap:7px;padding:15px 16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--g-1)}
.rv-metric[hidden]{display:none}
.rv-metric-head{display:flex;align-items:center;gap:10px}
.rv-metric-art{display:block;width:44px;height:44px;flex:none;image-rendering:pixelated}
.rv-metric .rv-fig{margin:0}
.rv-metric .mname{font:600 15px/1.35 var(--head,inherit);color:var(--ink);overflow-wrap:anywhere}
.rv-metric p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.rv-metrics .rv-sec-more{margin-top:10px}

/* ── the cases, as conversations ── */
.cg{display:grid;gap:26px;padding:6px clamp(14px,2vw,24px) 40px}
.cg.empty::before{content:'Nothing to show here yet.';font-size:13.5px;color:var(--ink-3)}
.cg-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:0 12px;align-items:center;margin:0 0 10px}
.cg-art{width:40px;height:40px;display:block;image-rendering:pixelated}
.cg-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cg-count{font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container (max-width:760px){.cg-grid{grid-template-columns:1fr}}
.cc{display:grid;gap:8px;padding:12px 14px 11px;border-radius:12px;background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line);
    cursor:pointer;min-width:0;transition:box-shadow .12s,background .12s}
.cc:hover,.cc.open{box-shadow:inset 0 0 0 1px var(--line-2)}
.cc:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cc-open{margin:0;align-self:start;justify-self:end;max-width:92%;padding:7px 11px;border-radius:12px;border-bottom-right-radius:4px;
         background:var(--held);color:#0F1E08;font-size:13px;line-height:1.45;overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-open.quiet{justify-self:start;background:transparent;color:var(--ink);padding:0;border-radius:0;font-weight:600}
.cc-ask{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-state{margin:0;display:flex;align-items:center;gap:8px;font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cc[data-outcome="broke"] .cc-state{color:var(--ink)}
.cc[data-outcome="held"] .cc-state{color:var(--held)}
.cc-sheet{grid-column:1/-1;display:grid;gap:10px;padding:14px 16px 18px;border-radius:12px;background:var(--g-2);
          animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
.cc-feed{display:flex;flex-direction:column;gap:7px;max-width:70ch}
.cc-feed .tvm.you{background:var(--held);color:#0F1E08}
.cc-feed .tvm.app{background:var(--g-1);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.cc-feed .tvm.app.brk{box-shadow:inset 0 0 0 2px var(--ink)}
.cc-feed.planned .tvm.you{opacity:.8}
.cc-turn{margin:-2px 0 4px;font:400 10px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.cc-label{margin:6px 0 0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cc-why{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);max-width:70ch}
.cc-why.quiet{color:var(--ink-2);font-size:12.5px}
.cc-checks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cc-checks li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:4px 10px;align-items:baseline;font-size:12.5px;line-height:1.5;color:var(--ink)}
.cc-checks li .ok{position:relative;top:1px}
.cc-checks li small{grid-column:2;font-size:11.5px;color:var(--ink-3)}
.cc-where{margin:0;font:400 11px var(--mono);color:var(--ink-3)}
.dprose{grid-column:1/-1;margin:0;padding:0 0 12px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:#C6D4E0;max-width:110ch}
html[data-mode="light"] .dprose{color:var(--ink-2)}

/* The Run button arrives last, and asks to be pressed. */
.runslot.veil{opacity:0;transition:opacity .5s cubic-bezier(.22,.68,.32,1)}
.runslot.veil.in{opacity:1}
.shell:not(.arriving) .runslot.veil{opacity:1}
.go.pulse{animation:go-pulse 1.5s ease-in-out 4}
@keyframes go-pulse{0%,100%{box-shadow:0 0 0 0 rgba(118,185,0,.0)}50%{box-shadow:0 0 0 7px rgba(118,185,0,.28)}}
@media(prefers-reduced-motion:reduce){.go.pulse{animation:none}}
.tv:not(.framed) .tv-frame{display:none}

/* A stage, told in sentences. */
.stagesay{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink);max-width:78ch}
.stagesay b{font-weight:600;color:var(--ink)}
.stagesay.quiet{color:var(--ink-2);font-size:12.5px}
.stagefile{font:400 11.5px var(--mono);color:var(--ink-2)}
.stagestd{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}
.stagestd:hover{text-decoration-color:currentColor}

/* A figure's columns, with their words under them. */
.rv-columns{display:block;width:100%;height:auto;image-rendering:pixelated}
.rv-collabels{position:relative;height:64px;margin-top:4px}
.rv-collabel{position:absolute;top:0;display:grid;gap:2px;box-sizing:border-box;padding:0 3px;text-align:center;font-size:11.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.rv-collabel b{font-weight:600;color:var(--ink);white-space:normal;line-height:1.15}
.rv-collabel i{font:400 9.5px var(--mono);font-style:normal;color:var(--ink-3);white-space:normal;line-height:1.3}
.rv-collabel[data-hurt="1"] b{color:var(--ink)}

/* Cards land one after another, in reading order, the first time they are drawn. */
.cc{animation:sheet 260ms cubic-bezier(.22,.68,.32,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.cg-group{animation:sheet 300ms cubic-bezier(.22,.68,.32,1) both}
@media(prefers-reduced-motion:reduce){.cc,.cg-group{animation:none}}

/* The seven steps: the staircase beside its words. */
.rv-ladder{margin-top:8px;max-width:760px}
.rv-ladder-row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:22px;align-items:center}
.rv-ladder-art{display:block;width:100%;height:auto;image-rendering:pixelated}
.rv-steps{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.rv-step{display:grid;gap:1px;font-size:12.5px;line-height:1.35}
.rv-step b{font-weight:600;color:var(--ink)}
.rv-step span{font:400 10.5px var(--mono);color:var(--ink-3)}
.rv-step.broke span{color:var(--ink)}
.rv-step.held span{color:var(--held)}
.rv-step.notGraded b{color:var(--ink-3)}
@container (max-width:700px){.rv-ladder-row{grid-template-columns:1fr}}

/* The plan is temporary: Sandy writes a new one whenever the run moves. It has no tab; it opens as a
   sheet over her column from the card in the thread, and leaving it is one press. */
.plansheet{position:absolute;inset:0;z-index:5;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--paper,#fff);border-radius:inherit;overflow:hidden}
.plansheet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.plansheet-bar b{font-size:14px;font-weight:600}
.plansheet-bar button{border:0;background:transparent;color:var(--ink-3);font:500 12px var(--disp);cursor:pointer;padding:6px 8px}
.plansheet-bar button:hover{color:var(--ink)}
.plansheet-body{overflow-y:auto;padding:6px 18px 24px}

/* The plan, docked over Sandy's thread: one line folded, two stages at a time unfolded. */

/* The drawer's head keeps its prompt; the words are green. */
.dhead{color:var(--held)}
html[data-mode="light"] .dhead{color:#5C9100}
/* Room between the staircase and the sentence under it; the sentence reads as a caption. */
.rv-ladder .rv-sec-text{margin-top:22px;max-width:60ch;font-size:12.5px;color:var(--ink-3)}

/* The report after a run. It takes the whole pane it sits in, because a quarter of the page left
   empty is a quarter the customer paid for. Width is spent on the tables and the folds; the prose
   keeps its own measure inside it, since a paragraph set to the full pane is a paragraph nobody
   finishes a line of. */
.rp{margin:8px 0 24px}
.rp-head{margin:26px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
.rp-headline{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rp-kept{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
/* The compiler's word on a second run. Improved is the only one that wears the live colour; the
   other two carry weight, so the verdict survives a greyscale print and a colour-blind read. */
.rp-moved{font-weight:600;text-transform:lowercase}
.rp-moved.improved{color:var(--held)}
.rp-moved.regressed{color:var(--ink)}
.rp-moved.no-change{color:var(--ink-3)}
.rp-part{margin:0 0 22px}
.rp-written{display:grid;gap:15px;margin-bottom:26px}
.rp-written .rp-part{margin-bottom:18px}
.rp-para{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink);max-width:70ch}
/* The right of reply. Quiet, always there, never a colour that begs to be pressed. */
.rp-dispute{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 0}
.rp-dispute-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
                font:inherit;font-size:11.5px;padding:4px 10px;border-radius:6px;cursor:pointer}
.rp-dispute-btn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.rp-dispute-btn:disabled{opacity:.45;cursor:default}
.rp-dispute-said{font-size:11.5px;color:var(--ink-3)}

/* Everything the run touched: a reference, folded, in the same disclosure the failures use. */
.rp-kit{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 22px}
.rp-kit[open]{padding-bottom:14px}
.rp-kit-body{display:grid;gap:9px}
.rp-kit-body .rv-label{margin:6px 0 2px}
.rp-kit-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-kit-table td{padding:5px 10px 5px 0;border-bottom:1px solid var(--line)}
.rp-kit-table td.n{text-align:right;padding-right:0;white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rp-kit-table .rp-what{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.rp-kit-table tr.thin .rp-what,.rp-kit-table tr.thin td.n{color:var(--ink-3)}

/* The numbers. The figure sits against its own name so the eye never travels: label, then the rate
   and its give or take, then what it rests on. */
.rp-table{width:100%;border-collapse:collapse;margin:2px 0 10px;font-size:12.5px}
.rp-table th{padding:0 0 7px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
             color:var(--ink-3);font-weight:500;text-align:left;border-bottom:1px solid var(--line)}
.rp-table th.n{text-align:right}
.rp-table td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.rp-table td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-3);
               font:400 11px var(--mono);width:9ch;padding-left:10px}
.rp-what{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rp-what b{color:var(--ink);font-weight:600}
.rp-rowfig{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
           background:color-mix(in srgb,#76b900 24%,transparent);border-radius:3px;padding:1px 6px}
.rp-table tr.thin .rp-what b{color:var(--ink-3)}
.rp-table tr.thin .rp-rowfig{background:none;color:var(--ink-3);font-weight:500;padding:0}
/* The interval plot. One axis for every row, so bands are compared by eye down the column, which
   is the whole reason the table is drawn rather than written. Green is the observed rate; the band
   around it is the uncertainty and is deliberately quieter than the tick, never a second colour. */
/* Capped, so a label and its own figure are read together instead of across the page. */
.rp-rates{max-width:660px}
.rp-rates td.rp-plot{width:clamp(190px,42%,300px);padding-left:16px;vertical-align:middle}
.rp-rates th.rp-axis-head{position:relative;padding-left:18px;overflow:visible}
.rp-axis-label{display:block}
.rp-axis{position:relative;display:block;height:9px;margin-top:5px}
.rp-axis-tick{position:absolute;top:0;width:1px;height:4px;background:var(--line-2)}
.rp-axis-tick::after{content:attr(data-at) "%";position:absolute;top:4px;left:0;transform:translateX(-50%);
                     font:400 8.5px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.rp-axis-tick[data-at="0"]::after{transform:none}
.rp-axis-tick[data-at="100"]::after{transform:translateX(-100%)}
.rp-track{position:relative;display:block;height:12px;border-radius:3px;background:var(--g-2);
          border:1px solid var(--line);overflow:hidden}
.rp-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rp-band{position:absolute;top:1px;bottom:1px;border-radius:2px;
         background:color-mix(in srgb,#76b900 30%,transparent)}
.rp-point{position:absolute;top:-1px;bottom:-1px;width:2px;transform:translateX(-1px);background:var(--held)}
.rp-pips{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-height:12px}
.rp-pip{width:9px;height:9px;border-radius:2px;border:1px solid var(--line-2);background:transparent}
.rp-pip.on{background:var(--held);border-color:var(--held)}
.rp-pct{display:inline-block;margin-top:5px;font-variant-numeric:tabular-nums;font-weight:600;
        font-size:13px;color:var(--ink)}
.rp-pct.thin{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.rp-span{margin-left:8px;font:400 10.5px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rp-rates tr.thin .rp-what b{color:var(--ink-3)}
@media (max-width:640px){
  .rp-rates td.rp-plot{width:auto;min-width:120px;padding-left:10px}
  .rp-rates td.n{width:8ch;padding-left:8px}
}
/* Observed behaviour: the statement, then the reply that proves it. A left rule carries whether it
   is wanted, so the mark is positional and not colour alone. */
.rp-habits{display:grid;gap:10px;margin:2px 0 12px}
.rp-habit{border-left:2px solid var(--line-2);padding:2px 0 2px 12px}
.rp-habit.off{border-left-color:var(--hold)}
.rp-habit.on{border-left-color:var(--held)}
.rp-habit-what{margin:0 0 5px;color:var(--ink);font-size:13px;line-height:1.5;max-width:70ch}
.rp-habit .rp-said{margin:0;font-size:12px}
.rp-floor{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3);max-width:62ch}
/* The one word on this table nobody is born knowing, explained where it is used, on hover and on
   focus. Not a title attribute: that is the browser's furniture, not a state we designed. */
.rp-table thead th:first-child{position:relative;overflow:visible}
.rp-ask{appearance:none;border:0;background:none;padding:0;cursor:help;font:inherit;color:inherit;
        letter-spacing:inherit;text-transform:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.rp-note{position:absolute;left:0;top:100%;z-index:3;width:min(36ch,80vw);margin-top:6px;padding:10px 12px;
         background:var(--paper,#fff);color:var(--ink-2);border:1px solid var(--line);border-radius:8px;
         box-shadow:0 8px 24px var(--shadow,rgba(16,26,38,.12));font:400 11.5px/1.5 var(--disp);
         text-transform:none;letter-spacing:0;opacity:0;visibility:hidden;transition:opacity .12s}
.rp-ask:hover + .rp-note,.rp-ask:focus-visible + .rp-note{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.rp-note{transition:none}}

/* A fold in this report opens like a section of a document, not like a browser disclosure: the
   native triangle is gone and a caret turns in its place, so the only thing on the row that moves
   is the one we drew. */
.rp-fails{display:grid;border-top:1px solid var(--line)}
.rp-fail{border-bottom:1px solid var(--line)}
.rp-fail[open]{padding-bottom:16px}
.rp-fail-title{display:flex;align-items:baseline;gap:11px;margin:0;padding:12px 2px;
               cursor:pointer;list-style:none;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.rp-fail-title::-webkit-details-marker{display:none}
.rp-fail-title:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rp-fold{order:-1;flex:0 0 auto;width:7px;height:7px;align-self:center;
         border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
         transform:rotate(-45deg);transform-origin:60% 60%;transition:transform .16s}
.rp-fail[open]>.rp-fail-title .rp-fold,.rp-kit[open]>.rp-fail-title .rp-fold{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.rp-fold{transition:none}}

/* Inside a fold: the run's own facts, then the customer's rule, then the line their product said,
   then why it counted. Each keeps a measure, and a rule long enough to wrap breaks inside the
   column instead of pushing it. */
.rp-fail-cell{margin:0 0 2px;font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);
              font-style:normal;max-width:76ch}
.rp-rule{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:76ch;overflow-wrap:anywhere}
.rp-why{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:76ch}
.rp-fail .rp-said{display:block;margin:12px 0 0;padding:10px 14px;max-width:76ch;
                  background:var(--g-2);border-left:2px solid var(--line-2);border-radius:0 6px 6px 0;
                  font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.rp-fail .rp-dispute{margin:14px 0 0}

/* A figure inside a sentence is marked the way somebody marks a page: a wash behind the words, the
   ink left alone. Colour on the text itself reads as a link and dies in greyscale. */
.rp-n{background:color-mix(in srgb,#76b900 26%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,#76b900 26%,transparent);
      border-radius:2px;color:inherit;font-weight:500}
.rp-name{font-weight:600;color:var(--ink)}
.rp-said{color:var(--ink);font-style:normal}
.rp-line{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:76ch}
.rp-lines{display:grid;gap:7px}

/* The room change: one cross-fade of the whole page, long enough to read as a change of light
   rather than a flicker. The old frame holds under the new one so the canvases cross-fade too. */
::view-transition-old(root),::view-transition-new(root){animation-duration:520ms;
  animation-timing-function:cubic-bezier(.4,0,.2,1);mix-blend-mode:normal}
::view-transition-old(root){animation-name:roomout}
::view-transition-new(root){animation-name:roomin}
@keyframes roomout{to{opacity:0}}
@keyframes roomin{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* One continuing activity surface, with the audit trail available on expansion. */
.plan-activity{margin:10px 0;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.plan-activity-now{padding:12px 14px;cursor:pointer;font:500 13px/1.5 var(--disp);color:var(--ink-2)}
.plan-activity-history{padding:0 14px 12px;max-height:320px;overflow:auto}
.plan-activity-history .turn{border:0;box-shadow:none}
.pcprogress{width:100%;height:4px;margin:2px 0 8px;border:0;border-radius:3px;overflow:hidden;appearance:none;background:var(--g-2)}
.pcprogress::-webkit-progress-bar{background:var(--g-2)}
.pcprogress::-webkit-progress-value{background:#76b900;transition:width .25s ease}
.pcprogress::-moz-progress-bar{background:#76b900}
.pcnow{font:400 12px/1.5 var(--disp);color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.pcprogress::-webkit-progress-value{transition:none}}

.plan-activity-now{display:flex;align-items:center;gap:10px;list-style:none;min-height:52px}
.plan-activity-now::-webkit-details-marker{display:none}
.plan-activity-now::after{content:'⌄';margin-left:auto;color:var(--ink-3);transition:transform .18s}
.plan-activity[open]>.plan-activity-now::after{transform:rotate(180deg)}
.activity-art{width:32px;height:32px;image-rendering:pixelated;flex:none}
.activity-label{min-width:0;overflow-wrap:anywhere}
.composer .planstrip{display:block;margin:0 0 8px;padding:0;border:0;border-radius:0;background:none;cursor:pointer;font:500 11px var(--mono);color:var(--ink-2)}

::selection{background:var(--nv,#76B900);color:var(--nv-ink,#0F1E08)}

/* The report at a glance: five facts in one ruled row, each a label, a figure and what it rests on.
   Divided by rules, not boxed: one instrument, not six identical cards. */
.rp-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0 26px;
           border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rp-glance-cell{padding:14px 16px 16px;border-left:1px solid var(--line);min-width:0}
.rp-glance-cell:first-child{border-left:0;padding-left:0}
.rp-glance-label{margin:0 0 6px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rp-big{margin:0 0 8px;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rp-sub{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.rp-glance-cell .rp-track{max-width:220px}
@media (max-width:640px){
  .rp-glance{grid-template-columns:1fr 1fr}
  .rp-glance-cell{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .rp-glance-cell:nth-child(-n+2){border-top:0}
}

/* The judge's reading: a term column and its statement, read as a short document. */
.rp-diag{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:10px 18px;margin:4px 0 0;max-width:880px}
.rp-diag dt{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.rp-diag dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.rp-diag dd.rp-muted{color:var(--ink-3);font-size:12.5px}
@media (max-width:640px){.rp-diag{grid-template-columns:1fr}.rp-diag dd{margin-bottom:6px}}

/* Wide tables scroll inside themselves; the page never scrolls sideways. */
.rp-scroll{overflow-x:auto;max-width:100%}
.rp-score{max-width:880px}
.rp-table tr.rp-group th{padding:18px 0 6px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}

/* Counts by condition, worst first. A condition with any failure carries a wash on its failed count
   and a rule on its left edge, so where it breaks is visible before a number is read, in greyscale too. */
.rp-matrix{max-width:980px}
.rp-matrix td.rp-count{width:9ch;text-align:right;font:500 13px var(--mono);color:var(--ink)}
.rp-matrix td.rp-count.fail{background:color-mix(in srgb,var(--broke) 16%,transparent);color:var(--broke);font-weight:600}
.rp-matrix td.rp-count.open{color:var(--ink-3)}
.rp-matrix tr.rp-broke td:first-child{box-shadow:inset 2px 0 0 var(--broke);padding-left:10px}
.rp-matrix td.rp-plot{padding-left:18px;min-width:220px}
.rp-matrix th.n{padding-left:10px}

/* Severity leads the failure title in words, so it survives greyscale. */
.rp-sev{flex:0 0 auto;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 0;color:var(--ink-3);min-width:6ch}
.rp-sev.high{color:var(--broke)}
.rp-sev.medium{color:var(--hold)}
/* The matrix keeps its columns readable and scrolls inside its wrapper on a narrow screen. */
.rp-matrix{min-width:640px}
.rp-matrix th{padding-right:12px;line-height:1.35;vertical-align:bottom}
.rp-matrix th:last-child{padding-left:18px}
.rp-score{min-width:520px}
/* A name cell stays a table cell, so its rule lines up with the rest of the row. */
.rp-table td.rp-what{display:table-cell}
.rp-table td.rp-what b{margin-right:10px}