/* H2B Session 1: styles for assets/visuals.js. Every person, client and number in the diagrams is made up.
   Every selector starts with .v-. Colours come only from the page tokens (app.css :root) through
   local --v-* aliases. Sizes are in em off .v-fit: on stage .v-fit is set in rem and multiplied by
   --v-k (the fit-to-box scale from visuals.js); on the reading page it is 15px and the layout
   reflows with container queries. Status is never colour alone: a glyph plus words. */

.v-root{
  --v-ink:var(--ink);--v-ink-2:var(--ink-2);--v-ink-3:var(--ink-3);
  --v-rule:var(--rule);--v-rule-2:var(--rule-2);
  --v-surface:var(--surface);--v-surface-2:var(--surface-2);--v-paper:var(--bg);
  --v-accent:var(--accent);--v-wash:var(--accent-wash);--v-on-accent:var(--on-accent);
  --v-amber:var(--warn);--v-amber-ink:var(--warn-ink);--v-amber-wash:var(--warn-wash);
  --v-good-ink:var(--good-ink);--v-good-wash:var(--good-wash);
  --v-ease:cubic-bezier(.16,1,.3,1);
  --v-k:1;
  position:relative;width:100%;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  container-type:inline-size;
  color:var(--v-ink);font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
.v-root.v-stage{height:100%;justify-content:flex-start}
.v-root.v-wide{min-width:var(--v-minw,0px)}
.v-root .v-fit{width:100%;flex:none;font-size:15px;line-height:1.45}
.v-root.v-stage .v-fit{font-size:calc(1.15rem * var(--v-k))}
.v-root .v-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.v-root button{font-family:inherit}
.v-root p{margin:0}
.v-root ul,.v-root ol{margin:0;padding:0;list-style:none}
.v-root table{border-collapse:collapse;border-spacing:0}

/* ---------- step machinery ---------- */
.v-root [data-at]{transition:opacity .45s var(--v-ease),transform .5s var(--v-ease)}
.v-root [data-at]:not(.v-in){opacity:0;transform:translateY(.4em)}
.v-root.v-back [data-at]{transition-duration:.2s}
.v-root.v-instant,.v-root.v-instant *,.v-root.v-instant *::before,.v-root.v-instant *::after{transition:none!important}
.v-root.v-rm *,.v-root.v-rm *::before,.v-root.v-rm *::after{transition:none!important;animation:none!important}

/* ---------- shared parts ---------- */
.v-topline{display:flex;justify-content:flex-end;margin-bottom:.55em}
.v-mu{display:inline-flex;align-items:center;gap:.45em;padding:.22em .75em .24em .55em;border-radius:999px;background:var(--v-amber-wash);color:var(--v-amber-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-amber-ink) 32%,transparent);font:600 12.5px/1.3 var(--f-body);white-space:nowrap}
.v-mu::before{content:"";width:.6em;height:.6em;border-radius:50%;border:1.5px dotted currentColor}
.v-root.v-stage .v-mu{font-size:1rem}
.v-ico{width:1.15em;height:1.15em;flex:none}
.v-ico path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v-file{display:inline-flex;align-items:center;gap:.45em;max-width:100%;padding:.3em .7em .32em .5em;border-radius:6px;background:var(--v-surface-2);box-shadow:inset 0 0 0 1px var(--v-rule-2),inset 3px 0 0 var(--v-ink-3);font:500 .86em/1.25 var(--f-mono);color:var(--v-ink);overflow-wrap:anywhere}
.v-file.is-xlsx{box-shadow:inset 0 0 0 1px var(--v-rule-2),inset 3px 0 0 var(--v-good-ink)}
.v-file-ic{color:var(--v-ink-3)}
.v-file.is-xlsx .v-file-ic{color:var(--v-good-ink)}
.v-file-n{min-width:0}
.v-tiles{display:flex;flex-wrap:wrap;gap:.35em}
.v-line{display:block;height:.55em;border-radius:3px;background:color-mix(in srgb,var(--v-ink-3) 26%,transparent)}
.v-line.w90{width:90%}.v-line.w75{width:75%}.v-line.w70{width:70%}.v-line.w60{width:60%}.v-line.w55{width:55%}.v-line.w50{width:50%}.v-line.w40{width:40%}.v-line.w30{width:30%}
.v-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--v-accent)}
@media (prefers-reduced-motion: no-preference){.v-caret{animation:v-blink 1.1s steps(1) infinite}}
@keyframes v-blink{50%{opacity:0}}
.v-bubble{align-self:flex-end;justify-self:end;max-width:88%;padding:.5em .9em;border-radius:1em 1em .3em 1em;background:var(--v-surface-2);color:var(--v-ink);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-tag{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;padding:.18em .65em;border-radius:999px;background:var(--v-wash);color:var(--v-accent);font:600 .78em/1.3 var(--f-body);white-space:nowrap}
.v-root.v-stage .v-tag{font-size:max(1rem,.78em)}

/* status glyphs: ! needs a look (amber), tick clean (green), i payroll, ring missing, sheet not provided */
.v-g{display:inline-grid;place-items:center;width:1.35em;height:1.35em;flex:none;border-radius:50%;font:800 .78em/1 var(--f-body);vertical-align:-.25em;margin-right:.45em}
.v-g.is-warn{background:var(--v-amber);color:#1e1f1e}
.v-g.is-ok{background:var(--v-good-wash);color:var(--v-good-ink);box-shadow:inset 0 0 0 1.5px var(--v-good-ink)}
.v-g.is-info{background:var(--v-surface-2);color:var(--v-ink-2);box-shadow:inset 0 0 0 1.5px var(--v-ink-3);font-family:var(--f-display);font-style:italic}
.v-g.is-miss{box-shadow:inset 0 0 0 2px var(--v-ink-2);background:transparent}
.v-g.is-gs{border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--v-ink-3);background:linear-gradient(var(--v-ink-3),var(--v-ink-3)) 0 50%/100% 1.5px no-repeat,linear-gradient(var(--v-ink-3),var(--v-ink-3)) 50% 0/1.5px 100% no-repeat;transform:scale(.85)}

/* tabs inside mocks (stage only; the reading page shows every panel) */
.v-tab{-webkit-appearance:none;appearance:none;margin:0;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 1em;border-radius:999px;border:0;background:transparent;color:var(--v-ink-2);font:600 .9em/1.1 var(--f-body);box-shadow:inset 0 0 0 1px var(--v-rule-2);touch-action:manipulation}
.v-tab[aria-pressed="true"]{background:var(--v-accent);color:var(--v-on-accent);box-shadow:none}
.v-root.v-stage .v-tab{min-height:2.5rem;font-size:max(1rem,.86em)}
@media (hover:hover){.v-tab:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1.5px var(--v-ink-3)}}

/* the app window: a light Claude-ish frame in light theme, dark in dark */
.v-appwin{position:relative;min-width:0;overflow:hidden;border-radius:10px;background:var(--v-surface);box-shadow:0 22px 44px -30px rgba(0,0,0,.55),inset 0 0 0 1px var(--v-rule)}
.v-aw-bar{display:flex;align-items:center;gap:.7em;min-height:2.1em;padding:.3em 1em;border-bottom:1px solid var(--v-rule);background:var(--v-surface-2);font:500 .82em/1.2 var(--f-mono);color:var(--v-ink-2)}
.v-aw-dots{display:flex;gap:5px;flex:none}
.v-aw-dots i{width:9px;height:9px;border-radius:50%;background:var(--v-rule-2)}
.v-aw-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-root.v-stage .v-aw-bar{font-size:max(1rem,.82em)}
.v-root:not(.v-stage) .v-aw-title{white-space:normal}

/* =====================================================================
   p1-split: blank chat against a chat with the Roster
   ===================================================================== */
.v-ps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4em}
.v-ps-col{display:grid;gap:.6em;align-content:start;padding:1em 1.1em 1.1em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-ps-col.is-ctx{box-shadow:inset 0 0 0 2px var(--v-accent)}
.v-ps-label{font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.v-ps-col.is-ctx .v-ps-label{color:var(--v-accent)}
.v-root.v-stage .v-ps-label{font-size:max(1rem,.8em)}
.v-ps-chat{display:grid;gap:.7em}
.v-ps-ans{padding:.6em .9em;border-radius:1em 1em 1em .3em;line-height:1.45;max-width:94%}
.v-ps-ans.is-guess{background:var(--v-surface-2);color:var(--v-ink-2);font-style:italic}
.v-ps-ans.is-known{background:var(--v-wash);color:var(--v-ink);font-weight:600}
.v-ps-src{display:grid;gap:.35em;margin-top:.3em;padding:.7em .9em;border-radius:8px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-rule-2),inset 4px 0 0 var(--v-good-ink)}
.v-ps-file{display:flex;align-items:center;gap:.4em;font:500 .82em/1.2 var(--f-mono);color:var(--v-good-ink)}
.v-root.v-stage .v-ps-file{font-size:max(1rem,.82em)}
.v-ps-row{font-weight:700;line-height:1.35}
.v-ps-sep{color:var(--v-ink-3);font-weight:400}
.v-p1-split.is-recap .v-ps-grid{gap:.9em}
.v-p1-split.is-recap .v-tiles{margin-top:.2em}
.v-p1-split.is-recap .v-file{font-size:.78em}
html.is-stage .beat-why .v-p1-split .v-ps-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* =====================================================================
   anatomy: a Project window, three zones
   ===================================================================== */
.v-an-win{background:var(--v-paper)}
.v-an-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"instr files" "chats files";gap:.9em;padding:1em}
.v-an-zone{display:grid;gap:.6em;align-content:start;padding:.9em 1em 1em;border-radius:8px;background:var(--v-surface);box-shadow:inset 0 0 0 1.5px var(--v-rule);transition:box-shadow .4s ease,background-color .4s ease,opacity .4s ease}
.v-an-zone.is-instr{grid-area:instr}
.v-an-zone.is-files{grid-area:files}
.v-an-zone.is-chats{grid-area:chats}
.v-an-zone[data-on]:not(.v-on){opacity:.42}
.v-an-zone[data-on]:not(.v-on) .v-an-body{opacity:.25}
.v-an-zone.v-on,.v-an-zone.is-filled{box-shadow:inset 0 0 0 2px var(--v-accent);background:var(--v-surface)}
.v-an-h{display:flex;align-items:center;gap:.55em;font-weight:700}
.v-an-n{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--v-wash);color:var(--v-accent);font:600 .95em/1 var(--f-num)}
.v-an-zone.v-on .v-an-n,.v-an-zone.is-filled .v-an-n{background:var(--v-accent);color:var(--v-on-accent)}
.v-an-body{display:grid;gap:.5em;transition:opacity .4s ease}
.v-an-files{display:grid;gap:.4em}
.v-an-files .v-file{width:100%}
.v-an-chats{display:grid;gap:.3em}
.v-an-chats li{display:flex;align-items:center;gap:.5em;padding:.35em .6em;border-radius:6px;background:var(--v-surface-2);font-size:.92em}
.v-an-chats .v-ico{color:var(--v-ink-3)}
.v-an-note{font-size:.84em;color:var(--v-ink-3);font-style:italic}
.v-root.v-stage .v-an-note{font-size:max(1rem,.84em)}
/* the Lab 1 recap: only the instructions zone is filled */
.v-anatomy.is-instr .v-an-zone:not(.is-filled){opacity:.45}
.v-anatomy.is-instr .v-an-zone:not(.is-filled) .v-an-body{opacity:.25}
.v-anatomy.is-instr .v-an-zone.is-instr .v-line{background:color-mix(in srgb,var(--v-accent) 45%,transparent)}
@media (prefers-reduced-motion: no-preference){
  .v-an-zone.is-files.v-on li{animation:v-drop .5s var(--v-ease) both;animation-delay:calc(var(--n,0) * 70ms)}
}
@keyframes v-drop{from{opacity:0;transform:translateY(-.6em)}}

/* =====================================================================
   eye-to-rule: by eye, then written down
   ===================================================================== */
.v-er-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;margin-bottom:1em;overflow-x:auto}
.v-er-sheet{font-size:.9em;background:var(--v-surface);border-radius:8px;box-shadow:inset 0 0 0 1px var(--v-rule-2);overflow:hidden}
.v-er-sheet th,.v-er-sheet td{padding:.35em .65em;text-align:center;border-left:1px solid var(--v-rule);white-space:nowrap}
.v-er-sheet thead th{font:500 .85em/1.2 var(--f-mono);color:var(--v-ink-3);border-bottom:1px solid var(--v-rule)}
.v-er-sheet .is-who{text-align:left;border-left:0;font:700 1em/1.2 var(--f-body);color:var(--v-ink)}
.v-er-sheet tbody th.is-who{font-weight:500;color:var(--v-ink-2)}
.v-er-sheet td{font:600 1.05em/1.2 var(--f-num);font-variant-numeric:tabular-nums}
.v-er-sheet td.is-blank{background:var(--v-amber-wash);box-shadow:inset 0 0 0 2px var(--v-amber)}
.v-er-pairs{display:grid;gap:.5em}
.v-er-head,.v-er-pair{display:grid;grid-template-columns:minmax(0,1fr) 3em minmax(0,1.25fr);align-items:center;gap:.6em}
.v-er-head span{font:500 .8em/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.v-root.v-stage .v-er-head span{font-size:max(1rem,.8em)}
.v-er-eye{display:flex;align-items:center;gap:.6em;padding:.55em .8em;border-radius:1.2em;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule-2);color:var(--v-ink-2);font-style:italic}
.v-er-thought{width:.9em;height:.9em;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--v-ink-3),.55em .5em 0 -.28em var(--v-ink-3)}
.v-er-arrow{position:relative;height:2px;background:var(--v-accent);margin:0 .3em}
.v-er-arrow::after{content:"";position:absolute;right:-2px;top:-5px;width:9px;height:12px;background:var(--v-accent);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%)}
.v-er-rule{display:flex;align-items:center;gap:.6em;padding:.55em .8em;border-radius:8px;background:var(--v-wash);color:var(--v-ink);font-weight:700}
.v-er-rule .v-ico{color:var(--v-accent)}

/* =====================================================================
   describe-show: a paragraph against the layout itself
   ===================================================================== */
.v-ds-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.6em;align-items:start}
.v-ds-col{display:grid;gap:.7em}
.v-ds-h{font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.v-root.v-stage .v-ds-h{font-size:max(1rem,.8em)}
.v-ds-para{padding:.9em 1em;border-radius:8px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule);color:var(--v-ink-3);line-height:1.55;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--v-ink-3) 55%,transparent);text-decoration-thickness:1px}
.v-ds-right{display:grid;gap:.9em}
.v-ds-sheet{width:100%;background:var(--v-surface);border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--v-good-ink);overflow:hidden}
.v-ds-sheet th,.v-ds-sheet td{padding:.4em .75em;border-bottom:1px solid var(--v-rule);border-left:1px solid var(--v-rule);text-align:left}
.v-ds-sheet th:first-child{border-left:0}
.v-ds-sheet thead th{background:var(--v-good-wash);color:var(--v-good-ink);font:700 .82em/1.2 var(--f-body);letter-spacing:.06em}
.v-ds-sheet tbody th{font:500 .9em/1.2 var(--f-mono);color:var(--v-ink-2)}
.v-ds-sheet tr.is-more th{color:var(--v-ink-3)}
.v-ds-sheet tfoot th{font:800 .85em/1.2 var(--f-body);letter-spacing:.06em;border-bottom:0}
.v-ds-sheet tfoot td{border-bottom:0}
.v-ds-cap{display:flex;align-items:center;gap:.4em;font:500 .86em/1.2 var(--f-mono);color:var(--v-good-ink)}
.v-root.v-stage .v-ds-cap{font-size:max(1rem,.86em)}
.v-ds-note{display:grid;gap:.3em;padding:.7em .9em;border-radius:8px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule-2),inset 3px 0 0 var(--v-ink-3)}
.v-ds-nf{display:flex;align-items:center;gap:.4em;font:500 .86em/1.2 var(--f-mono);color:var(--v-ink-2)}
.v-root.v-stage .v-ds-nf{font-size:max(1rem,.86em)}
.v-ds-nt{font-weight:600}

/* =====================================================================
   flag-cards: it flags, for payroll, it drafts; you decide
   ===================================================================== */
.v-fc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;align-items:stretch}
.v-fc-card{position:relative;display:flex;flex-direction:column;gap:.6em;padding:1em 1.1em 1.1em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-fc-card.is-warn{background:var(--v-amber-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-amber-ink) 35%,transparent)}
.v-fc-card.is-info{background:var(--v-surface-2);box-shadow:none}
.v-fc-card.is-draft{box-shadow:inset 0 0 0 1.5px var(--v-accent)}
.v-fc-k{display:flex;align-items:center;font:500 .82em/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink-2)}
.v-root.v-stage .v-fc-k{font-size:max(1rem,.82em)}
.v-fc-k .v-g{font-size:1.15em}
.v-fc-ic{color:var(--v-accent);margin-right:.45em;width:1.4em;height:1.4em}
.v-fc-t{line-height:1.45}
.v-fc-card.is-draft .v-fc-t{font-family:var(--f-display);font-size:1.05em;line-height:1.4}
.v-fc-sign{margin-top:auto;font-size:.88em;color:var(--v-ink-2)}
.v-root.v-stage .v-fc-sign{font-size:max(1rem,.88em)}
.v-fc-done{position:absolute;right:.7em;top:.7em;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--v-accent);color:var(--v-on-accent)}
.v-fc-done .v-ico{width:1.1em;height:1.1em}
.v-fc-done .v-ico path{stroke-width:2.6}
.v-fc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5em 1.4em;margin-top:1em;padding:.7em 1.1em;border-radius:8px;background:var(--band);color:var(--band-ink)}
.v-fc-decide{font:500 1.15em/1.3 var(--f-display)}
.v-fc-bar{font:500 .86em/1.3 var(--f-mono);color:var(--band-ink-2)}
.v-root.v-stage .v-fc-bar{font-size:max(1rem,.86em)}
/* the Lab 3 recap sits in a narrow column: the cards stack */
.beat-why .v-flag-cards .v-fc-row{grid-template-columns:1fr;gap:.6em}
.beat-why .v-flag-cards .v-fc-card{padding:.8em 3em .8em 1em;gap:.35em}
.beat-why .v-flag-cards .v-fc-card.is-draft .v-fc-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* =====================================================================
   chat-vs-file: three Tuesdays, fixed in the chat or in the Roster
   ===================================================================== */
.v-cf-grid{display:grid;gap:.6em}
.v-cf-row{display:grid;grid-template-columns:11em repeat(3,minmax(0,1fr));gap:.6em;align-items:stretch}
.v-cf-row.is-head{align-items:end}
.v-cf-wk{font:600 1.1em/1.2 var(--f-num);letter-spacing:.04em;color:var(--v-ink-2);padding:0 .2em;border-bottom:2px solid var(--v-rule-2);padding-bottom:.3em}
.v-cf-lab{align-self:center;font:500 1.25em/1.2 var(--f-display);color:var(--v-ink)}
.v-cf-row.is-file .v-cf-lab{color:var(--v-accent);font-weight:600}
.v-cf-cell{display:grid;gap:.45em;align-content:start;padding:.7em .8em;border-radius:8px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-cf-cell.is-warn{background:var(--v-amber-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-amber-ink) 35%,transparent)}
.v-cf-cell.is-ok{background:var(--v-good-wash);box-shadow:none}
.v-cf-fix{display:flex;align-items:flex-start;gap:.45em;font-size:.95em;color:var(--v-ink)}
.v-cf-fix .v-ico{color:var(--v-accent);margin-top:.1em}
.v-cf-res{display:flex;align-items:center;font-weight:700;font-size:.95em}
.v-cf-res.is-warn{color:var(--v-amber-ink)}
.v-cf-res.is-ok{color:var(--v-good-ink)}
.v-chat-vs-file.is-yours .v-cf-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.v-chat-vs-file.is-yours .v-cf-lab{display:none}
.v-chat-vs-file.is-yours .v-cf-row:not(.is-head)::before{content:none}
.v-chat-vs-file.is-yours .v-cf-cell{min-height:6em}
.v-chat-vs-file.is-yours .v-cf-row.is-head .v-cf-wk:first-of-type{color:var(--v-accent)}

/* =====================================================================
   lab-mock: the "your turn" mocks
   ===================================================================== */
.v-lm{display:grid;gap:.8em}
.v-lm-dialog{display:grid;gap:1em;max-width:28em;width:100%;justify-self:center;padding:1.3em 1.4em;border-radius:12px;background:var(--v-surface);box-shadow:0 24px 48px -30px rgba(0,0,0,.55),inset 0 0 0 1px var(--v-rule)}
.v-lm-dh{font:500 1.5em/1.2 var(--f-display)}
.v-lm-field{display:grid;gap:.4em}
.v-lm-fl{font-weight:700;font-size:.9em;color:var(--v-ink-2)}
.v-lm-input{display:flex;align-items:center;min-height:2.4em;padding:.3em .8em;border-radius:8px;background:var(--v-paper);box-shadow:inset 0 0 0 2px var(--v-accent);font-weight:600}
.v-lm-input.is-tall{min-height:4.2em;box-shadow:inset 0 0 0 1px var(--v-rule-2)}
.v-lm-field.is-ghost{opacity:.6}
.v-lm-btns{display:flex;justify-content:flex-end;gap:.6em}
.v-lm-b{display:inline-flex;align-items:center;min-height:2.3em;padding:0 1em;border-radius:8px;box-shadow:inset 0 0 0 1px var(--v-rule-2);font-weight:700;font-size:.92em}
.v-lm-b.is-go{background:var(--v-accent);color:var(--v-on-accent);box-shadow:none}
.v-lm-files{padding:1em 1.1em}
.v-lm-rh{font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3);margin-bottom:.6em}
.v-root.v-stage .v-lm-rh{font-size:max(1rem,.8em)}
.v-lm-rail{display:grid;gap:.4em}
.v-lm-rail li{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.v-lm-tick{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--v-accent);color:var(--v-on-accent);flex:none}
.v-lm-tick .v-ico{width:1em;height:1em}
.v-lm-tick .v-ico path{stroke-width:2.6}
@media (prefers-reduced-motion: no-preference){
  .beat.is-current .v-lm-rail li,html:not(.is-stage) .v-lm-rail li{animation:v-drop .5s var(--v-ease) both;animation-delay:calc(300ms + var(--n,0) * 220ms)}
  .beat.is-current .v-lm-rail .v-lm-tick,html:not(.is-stage) .v-lm-rail .v-lm-tick{animation:v-pop .35s var(--v-ease) both;animation-delay:calc(560ms + var(--n,0) * 220ms)}
}
.v-lm-rail li:nth-child(1){--n:0}.v-lm-rail li:nth-child(2){--n:1}.v-lm-rail li:nth-child(3){--n:2}.v-lm-rail li:nth-child(4){--n:3}.v-lm-rail li:nth-child(5){--n:4}.v-lm-rail li:nth-child(6){--n:5}
.v-lm-rail li .v-lm-tick{--n:inherit}
@keyframes v-pop{from{opacity:0;transform:scale(.4)}}
.v-lm-chat{display:grid;align-content:end;min-height:9em;padding:1em;background:var(--v-paper)}
.v-lm-box{display:grid;gap:.7em;padding:.8em .9em;border-radius:12px;background:var(--v-surface);box-shadow:inset 0 0 0 1.5px var(--v-rule-2)}
.v-lm-chips{display:flex;flex-wrap:wrap;gap:.35em}
.v-lm-chips .v-file{font-size:.8em}
.v-lm-typed{font-weight:600;line-height:1.4}
.v-lm.is-drop8{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "win" "guess";align-items:stretch}
.v-lm.is-drop8 > .v-topline{grid-area:top;margin:0}
.v-lm.is-drop8 > .v-appwin{grid-area:win}
.v-lm-guess{grid-area:guess;display:grid;grid-template-columns:auto repeat(2,minmax(0,1fr));gap:.4em 1em;align-items:end;padding:.7em 1em .9em;border-radius:10px;background:var(--v-amber-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-amber-ink) 30%,transparent);transform:rotate(-.6deg);margin:0 .4em}
.v-lm-guess .v-lm-gl:nth-of-type(3){display:none}
.v-lm-gh{font:500 1.1em/1.2 var(--f-display);color:var(--v-amber-ink)}
.v-lm-gl{display:block;height:1.3em;border-bottom:1.5px solid color-mix(in srgb,var(--v-amber-ink) 45%,transparent)}
.v-lm.is-drop8 .v-lm-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.v-lm.is-drop8 .v-file{min-width:0;white-space:nowrap;font-size:.8em}
.v-lm.is-drop8 .v-file-n{overflow:hidden;text-overflow:ellipsis}
.v-lm.is-drop8 .v-lm-chat{min-height:0}

/* =====================================================================
   instructions-box: the nine-line excerpt, three lines picked out
   ===================================================================== */
.v-ib-body{padding:.8em 1.1em 1em}
.v-ib-h{display:flex;align-items:center;gap:.45em;margin-bottom:.5em;font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.v-root.v-stage .v-ib-h{font-size:max(1rem,.8em)}
.v-ib-lines{display:grid;gap:.1em}
.v-ib-lines li{display:grid;grid-template-columns:1.6em minmax(0,1fr) 2.4em;gap:.7em;align-items:baseline;padding:.32em .5em;border-radius:6px;transition:background-color .35s ease,box-shadow .35s ease,opacity .35s ease}
.v-ib-n{font:600 1em/1 var(--f-num);color:var(--v-ink-3);text-align:right;font-variant-numeric:tabular-nums}
.v-ib-t{line-height:1.4}
.v-ib-hl{font-weight:800}
.v-ib-p{justify-self:end;display:inline-grid;place-items:center;min-width:2.2em;height:1.5em;border-radius:4px;font:600 .9em/1 var(--f-num);background:var(--v-accent);color:var(--v-on-accent);opacity:0;transition:opacity .35s ease}
.v-ib-p.is-none{background:none}
.v-ib-lines li.v-on{background:var(--v-wash)}
.v-ib-lines li.v-on .v-ib-p{opacity:1}
.v-ib-lines li.v-on .v-ib-hl{color:var(--v-accent)}
.v-ib-lines li.v-cur{box-shadow:inset 4px 0 0 var(--v-accent),inset 0 0 0 1px color-mix(in srgb,var(--v-accent) 40%,transparent)}
.v-ib-h > span:first-of-type{margin-right:auto}
.v-ib-count{display:none}
/* stage: one group of lines per press, at a size that reads on a call */
.v-root.v-stage.v-instructions-box .v-fit{font-size:calc(1.5rem * var(--v-k))}
.v-root.v-stage .v-ib-body{padding:1em 1.3em 1.2em}
.v-root.v-stage .v-ib-h{margin-bottom:.7em}
.v-root.v-stage .v-ib-count{display:inline}
.v-root.v-stage .v-ib-count span{display:none;letter-spacing:.06em}
.v-root.v-stage .v-ib-lines{gap:.35em}
.v-root.v-stage .v-ib-lines li{padding:.45em .6em;grid-template-columns:1.4em minmax(0,1fr) 2.4em}
.v-root.v-stage .v-ib-lines li:not(.is-mark){box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-root.v-stage .v-ib-lines li.v-on{box-shadow:inset 4px 0 0 var(--v-accent),inset 0 0 0 1px color-mix(in srgb,var(--v-accent) 40%,transparent)}
.v-root.v-stage.v-instructions-box[data-step="0"] .v-ib-lines li:not([data-g="0"]),
.v-root.v-stage.v-instructions-box[data-step="1"] .v-ib-lines li:not([data-g="1"]),
.v-root.v-stage.v-instructions-box[data-step="2"] .v-ib-lines li:not([data-g="2"]),
.v-root.v-stage.v-instructions-box[data-step="3"] .v-ib-lines li:not([data-g="3"]){display:none}
.v-root.v-stage.v-instructions-box[data-step="0"] .v-ib-count [data-g="0"],
.v-root.v-stage.v-instructions-box[data-step="1"] .v-ib-count [data-g="1"],
.v-root.v-stage.v-instructions-box[data-step="2"] .v-ib-count [data-g="2"],
.v-root.v-stage.v-instructions-box[data-step="3"] .v-ib-count [data-g="3"]{display:inline}

/* =====================================================================
   files-reply: the sanity-check answer
   ===================================================================== */
.v-fr-chat{display:grid;gap:.9em;padding:1em 1.2em 1.2em;background:var(--v-paper)}
.v-fr-list{display:grid;gap:.15em;padding:.6em .3em 0}
.v-fr-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;align-items:start;padding:.45em .6em;border-bottom:1px solid var(--v-rule)}
.v-fr-list li:last-child{border-bottom:0}
.v-fr-list .v-ico{margin-top:.15em;color:var(--v-ink-3)}
.v-fr-list .v-ico.is-sheet{color:var(--v-good-ink)}
.v-fr-list b{font:600 .95em/1.3 var(--f-mono)}

/* =====================================================================
   tuesday-answer: the shape of a Tuesday check answer
   ===================================================================== */
.v-root.v-stage.v-tuesday-answer .v-fit{font-size:calc(1.4rem * var(--v-k))}
/* stage: two halves, never a blank pane. Steps 0 to 4 the summary, full width; 5 and 6 the drafts and the check file, side by side */
.v-root.v-stage .v-ta-body{grid-template-columns:1fr}
.v-root.v-stage .v-ta-ans{padding:1em 1.4em 1.2em;gap:.55em}
.v-root.v-stage .v-ta-pane{display:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.2em 1.6em;padding:1em 1.4em 1.2em;border-left:0}
.v-root.v-stage.v-tuesday-answer.v-s5 .v-ta-ans{display:none}
.v-root.v-stage.v-tuesday-answer.v-s5 .v-ta-pane{display:grid}
.v-root.v-stage .v-ta-tally li{padding:.25em .7em .3em}
.v-root.v-stage .v-ta-tally span{font-size:max(1rem,.8em)}
.v-root.v-stage .v-ta-prev{font-size:max(1rem,.72em)}
.v-ta-top{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.7em}
.v-ta-tally{display:flex;flex-wrap:wrap;gap:.45em}
.v-ta-tally li{display:inline-flex;align-items:baseline;gap:.4em;padding:.3em .8em .35em;border-radius:8px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-ta-tally b{font:600 1.5em/1 var(--f-num);font-variant-numeric:tabular-nums}
.v-ta-tally span{font-size:.9em;color:var(--v-ink-2)}
.v-ta-tally li.is-ok b{color:var(--v-good-ink)}
.v-ta-tally li.is-warn{background:var(--v-amber-wash)}
.v-ta-tally li.is-warn b{color:var(--v-amber-ink)}
.v-ta-tally li.is-gs b,.v-ta-tally li.is-miss b{color:var(--v-ink-2)}
.v-ta-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;background:var(--v-paper)}
.v-ta-ans{display:grid;gap:.5em;align-content:start;padding:.9em 1.1em 1em}
.v-ta-ans > .v-bubble{margin-bottom:.2em}
.v-ta-head{font-weight:600;color:var(--v-ink-2);padding-bottom:.4em;border-bottom:1px solid var(--v-rule)}
.v-ta-grp{line-height:1.42}
.v-ta-grp b{font-weight:800;margin-right:.1em}
.v-ta-grp.is-gs{padding:.35em .6em;border-radius:6px;background:var(--v-surface-2);color:var(--v-ink-2)}
.v-ta-grp.is-info{padding:.35em .6em;border-radius:6px;box-shadow:inset 0 0 0 1px var(--v-rule-2)}
.v-ta-looks{display:grid;gap:.3em;padding:.45em .6em .55em;border-radius:6px;background:var(--v-amber-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-amber-ink) 30%,transparent)}
.v-root .v-ta-items{display:grid;gap:.25em;padding-left:1.8em}
.v-ta-items li{position:relative;line-height:1.38}
.v-ta-items li::before{content:"";position:absolute;left:-.95em;top:.6em;width:.38em;height:.38em;border-radius:50%;background:var(--v-amber-ink)}
.v-ta-pane{display:grid;gap:.8em;align-content:start;padding:.9em 1.1em 1em;border-left:1px solid var(--v-rule);background:var(--v-surface)}
.v-ta-ph{font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3);margin-bottom:.35em}
.v-root.v-stage .v-ta-ph{font-size:max(1rem,.8em)}
.v-ta-drafts{display:grid;gap:.45em}
.v-ta-tabs{display:flex;flex-wrap:wrap;gap:.3em}
.v-ta-draft{display:grid;gap:.45em;padding:.7em .85em;border-radius:8px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-rule-2)}
.v-ta-draft p{font-family:var(--f-display);font-size:1.04em;line-height:1.42}
.v-ta-file{display:grid;gap:.4em}
.v-ta-fn .v-file{font-size:.92em}
.v-ta-fl{font-size:.92em;color:var(--v-ink-2)}
.v-root.v-stage .v-ta-fl{font-size:max(1rem,.92em)}
.v-ta-prev{width:100%;font-size:.8em;background:var(--v-paper);border-radius:6px;box-shadow:inset 0 0 0 1px var(--v-good-ink);overflow:hidden}
.v-root.v-stage .v-ta-prev{font-size:max(1rem,.8em)}
.v-ta-prev th{padding:.3em .45em;background:var(--v-good-wash);color:var(--v-good-ink);font-weight:700;text-align:left;border-left:1px solid var(--v-rule)}
.v-ta-prev th:first-child,.v-ta-prev td:first-child{border-left:0}
.v-ta-prev td{padding:.4em .45em;border-left:1px solid var(--v-rule);border-top:1px solid var(--v-rule)}
/* on the reading page every draft shows, one under the other */
.v-root:not(.v-stage) .v-ta-tabs{display:none}
.v-root:not(.v-stage) .v-ta-draft[hidden]{display:grid!important}
.v-root:not(.v-stage) .v-ta-draft + .v-ta-draft{margin-top:.2em}

/* =====================================================================
   three-fixes: Roster, Instructions, Reminder wording (lit by the beat's step)
   ===================================================================== */
.v-tf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em}
.v-tf-col{display:grid;gap:.7em;align-content:start;padding:.9em 1em 1em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule);transition:opacity .35s ease,box-shadow .35s ease,background-color .35s ease}
.v-tf-h{display:flex;align-items:center;gap:.5em;font-weight:800}
.v-tf-h .v-ico{color:var(--v-ink-3)}
.v-tf-l{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:6px;background:var(--v-wash);color:var(--v-accent);font:600 .95em/1 var(--f-num)}
.v-tf-ba{display:grid;grid-template-columns:minmax(0,1fr) 1.6em minmax(0,1fr);gap:.4em;align-items:center}
.v-tf-rt{width:100%;font-size:.84em;background:var(--v-paper);border-radius:6px;box-shadow:inset 0 0 0 1px var(--v-rule-2);overflow:hidden}
.v-root.v-stage .v-tf-rt{font-size:max(1rem,.84em)}
.v-tf-rt caption{caption-side:top;text-align:left;font:500 .9em/1.3 var(--f-mono);color:var(--v-ink-3);padding-bottom:.25em}
.v-tf-rt th{white-space:nowrap;padding:.25em .45em;font-weight:700;text-align:left;color:var(--v-good-ink);background:var(--v-good-wash)}
.v-tf-rt td{padding:.35em .45em;border-top:1px solid var(--v-rule);vertical-align:top}
.v-tf-rt td.is-empty{color:var(--v-ink-3)}
.v-tf-rt td:first-child{white-space:nowrap}
.v-tf-rt td.is-new{background:var(--v-wash);color:var(--v-accent);font-weight:800}
.v-tf-arrow,.v-fb-arrow{position:relative;height:2px;background:var(--v-accent)}
.v-tf-arrow::after,.v-fb-arrow::after{content:"";position:absolute;right:-2px;top:-5px;width:9px;height:12px;background:var(--v-accent);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%)}
.v-tf-doc{display:grid;gap:.45em;padding:.6em .7em;border-radius:6px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-rule-2)}
.v-tf-add{display:flex;gap:.45em;align-items:flex-start;padding:.35em .5em;border-radius:5px;background:var(--v-wash);font-weight:700;line-height:1.38}
.v-tf-plus{font:700 1.1em/1.2 var(--f-mono);color:var(--v-accent)}
.v-tf-words{padding:.6em .7em;border-radius:6px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-rule-2);font-family:var(--f-display);font-size:1.05em;line-height:1.5}
.v-tf-words del{color:var(--v-ink-3);text-decoration-thickness:2px}
.v-tf-words ins{text-decoration:none;padding:0 .2em;border-radius:3px;background:var(--v-wash);color:var(--v-accent);font-weight:600}
/* stage: the three files stack as rows; the group in play is lit, the others rest */
.v-root.v-stage .v-tf-cols{grid-template-columns:1fr;gap:.7em}
.v-root.v-stage .v-tf-col{grid-template-columns:7.6em minmax(0,1fr);align-items:center;gap:.6em 1em}
.v-root.v-stage .v-tf-col .v-tf-h{align-self:center}
#lab4-go[data-k] .v-tf-col{display:none}
#lab4-go[data-k="0"] .v-tf-col.g0,#lab4-go[data-k="1"] .v-tf-col.g1,#lab4-go[data-k="2"] .v-tf-col.g2{display:grid}
.v-root.v-stage.v-three-fixes .v-fit{font-size:calc(1.3rem * var(--v-k))}
.v-root.v-stage .v-tf-col{grid-template-columns:1fr}
#lab4-go[data-k="0"] .v-tf-col.g0,#lab4-go[data-k="1"] .v-tf-col.g1,#lab4-go[data-k="2"] .v-tf-col.g2{opacity:1;box-shadow:inset 0 0 0 2px var(--v-accent);background:var(--v-surface)}
#lab4-go[data-k="0"] .v-tf-col.g0 .v-tf-l,#lab4-go[data-k="1"] .v-tf-col.g1 .v-tf-l,#lab4-go[data-k="2"] .v-tf-col.g2 .v-tf-l{background:var(--v-accent);color:var(--v-on-accent)}

/* =====================================================================
   fix-before-after: three tabs (stage), three panels (reading page)
   ===================================================================== */
.v-fb-tabs{display:flex;flex-wrap:wrap;gap:.4em;margin-bottom:.9em}
.v-fb-panel{display:none;gap:.8em}
.v-fb-panel.is-on{display:grid}
.v-root:not(.v-stage) .v-fb-tabs{display:none}
.v-root:not(.v-stage) .v-fb-panel{display:grid;padding-bottom:1.4em;margin-bottom:1.2em;border-bottom:1px solid var(--v-rule)}
.v-root:not(.v-stage) .v-fb-panel:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.v-fb-ph{display:flex;align-items:center;justify-content:space-between;gap:1em;font:500 1.35em/1.2 var(--f-display)}
.v-fb-pair{display:grid;grid-template-columns:minmax(0,1fr) 3em minmax(0,1fr);gap:.6em;align-items:center}
.v-fb-card{display:grid;gap:.55em;align-content:start;padding:.9em 1.1em 1em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule);height:100%}
.v-fb-card.is-after{box-shadow:inset 0 0 0 2px var(--v-accent)}
.v-fb-ch{font:500 .8em/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.v-root.v-stage .v-fb-ch{font-size:max(1rem,.8em)}
.v-fb-card.is-after .v-fb-ch{color:var(--v-accent)}
.v-fb-ln{line-height:1.42}
.v-fb-ln b{font-weight:800}
.v-fb-ln.is-warn{padding:.35em .55em;border-radius:6px;background:var(--v-amber-wash)}
.v-fb-q{font-family:var(--f-display);font-size:1.12em;line-height:1.45}
.v-fb-card.is-before .v-fb-q{color:var(--v-ink-2)}
.v-fb-cap{font:italic 400 1.1em/1.4 var(--f-display);color:var(--v-ink-2)}
.v-fb-chat{display:grid;gap:.8em;padding:1.1em 1.2em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 1px var(--v-rule)}
.v-fb-ans{max-width:80%;padding:.7em 1em;border-radius:1em 1em 1em .3em;background:var(--v-wash);font-weight:600;line-height:1.45}

/* =====================================================================
   summary-draft: Lena's October draft and the compare checklist
   ===================================================================== */
.v-sd-grid{display:grid;grid-template-columns:minmax(0,1fr) 15em;gap:1.6em;align-items:start}
.v-sd-stack{position:relative;padding:0 .9em .9em 0}
.v-sd-back{position:absolute;right:0;bottom:0;left:.9em;top:.9em;border-radius:10px;background:var(--v-surface-2);box-shadow:inset 0 0 0 1px var(--v-rule-2);display:flex;align-items:flex-end;justify-content:flex-end;padding:.4em .8em}
.v-sd-back p{display:flex;gap:.6em;font-size:.88em;color:var(--v-ink-2)}
.v-root.v-stage .v-sd-back p{font-size:max(1rem,.88em)}
.v-sd-back.v-in{transform:translate(.15em,.15em)}
.v-sd-stack:has(.v-sd-back.v-in){padding-bottom:2.4em}
.v-sd-sheet{position:relative;z-index:1;padding-bottom:.5em;border-radius:10px;background:var(--v-surface);box-shadow:0 18px 40px -28px rgba(0,0,0,.5),inset 0 0 0 1px var(--v-rule)}
.v-sd-head{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .6em;padding:.7em 1em;border-bottom:1px solid var(--v-rule)}
.v-sd-head .v-ico{color:var(--v-good-ink)}
.v-sd-sub{flex-basis:100%;font-size:.88em;color:var(--v-ink-3)}
.v-root.v-stage .v-sd-sub{font-size:max(1rem,.88em)}
.v-sd-t{width:100%}
.v-sd-t th,.v-sd-t td{padding:.26em .9em;text-align:left;border-bottom:1px solid var(--v-rule)}
.v-sd-t thead th{background:var(--v-good-wash);color:var(--v-good-ink);font:700 .82em/1.3 var(--f-body);letter-spacing:.06em}
.v-root.v-stage .v-sd-t thead th{font-size:max(1rem,.82em)}
.v-sd-t tbody th{font:500 .92em/1.3 var(--f-mono);color:var(--v-ink-2);width:9em}
.v-root.v-stage .v-sd-t tbody th{font-size:max(1rem,.92em)}
.v-sd-t td.is-h{font:700 1.08em/1.25 var(--f-body);font-variant-numeric:tabular-nums lining-nums;width:8em}
.v-sd-t thead th{white-space:nowrap}
.v-sd-t tr.is-off th,.v-sd-t tr.is-off td{background:repeating-linear-gradient(135deg,var(--v-surface-2) 0 6px,transparent 6px 12px);color:var(--v-ink-3);font-style:italic}
.v-sd-t tr.is-wkend th,.v-sd-t tr.is-wkend td{color:var(--v-ink-3)}
.v-sd-t tfoot th{font:800 .85em/1.3 var(--f-body);letter-spacing:.06em;border-bottom:0}
.v-sd-t tfoot td{border-bottom:0;font-family:var(--f-body);font-size:1em;font-weight:800}
.v-sd-side{display:grid;gap:.7em;padding:1em 1.1em;border-radius:10px;background:var(--v-wash)}
.v-sd-ch{font:500 1.3em/1.2 var(--f-display)}
.v-sd-check{display:grid;gap:.55em}
.v-sd-check li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6em;align-items:center;font-weight:600}
.v-sd-n{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--v-accent);color:var(--v-accent);font:600 .95em/1 var(--f-num)}

/* =====================================================================
   month-flow: four weekly check files into one draft
   ===================================================================== */
.v-mf-grid{display:grid;grid-template-columns:minmax(0,13.5em) 3em minmax(0,1fr);align-items:center;gap:0}
.v-mf-chips{display:grid;gap:1.1em}
.v-mf-chips .v-file{font-size:.78em;width:100%;white-space:nowrap}
.v-mf-lines{width:100%;height:100%;min-height:10em}
.v-mf-path{fill:none;stroke:var(--v-accent);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.7}
.v-mf-draft{display:grid;gap:.5em;padding:.8em .9em;border-radius:10px;background:var(--v-surface);box-shadow:inset 0 0 0 2px var(--v-accent)}
.v-mf-dh{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .5em}
.v-mf-dh .v-ico{color:var(--v-good-ink)}
.v-mf-dh span{font-size:.88em;color:var(--v-ink-3)}
.v-root.v-stage .v-mf-dh span{font-size:max(1rem,.88em)}
.v-mf-sheet{display:grid;gap:.35em;padding:.5em;border-radius:6px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-rule-2)}
.v-mf-cols,.v-mf-row{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:.5em;align-items:center}
.v-mf-cols span{font:700 .7em/1.2 var(--f-body);letter-spacing:.05em;color:var(--v-good-ink)}
.v-root.v-stage .v-mf-cols span{font-size:max(.8rem,.66em)}
.v-mf-foot{font:italic 400 1em/1.35 var(--f-display);color:var(--v-ink-2)}
@media (prefers-reduced-motion: no-preference){
  .beat.is-current .v-mf-path{stroke-dasharray:200;animation:v-flow 1.4s var(--v-ease) .3s both}
}
@keyframes v-flow{from{stroke-dashoffset:200}}

/* =====================================================================
   next-timeline (SVG)
   ===================================================================== */
.v-svg{display:block;width:100%;height:auto;max-height:100%;overflow:visible}
.v-svg text{font-family:var(--f-body);fill:var(--v-ink)}
.v-nt-s2{fill:var(--v-wash);stroke:var(--v-accent);stroke-width:1.5;stroke-dasharray:5 4}
.v-nt-band{fill:color-mix(in srgb,var(--v-accent) 16%,transparent)}
.v-nt-bandl{font:700 17px var(--f-body);fill:var(--v-accent)!important}
.v-nt-guide{stroke:var(--v-rule-2);stroke-width:1.5;stroke-dasharray:3 4}
.v-nt-ev{font:700 19px var(--f-body)}
.v-nt-ev.is-test{fill:var(--v-amber-ink)!important}
.v-nt-ev.is-s2,.v-nt-ev.is-today{fill:var(--v-accent)!important}
.v-nt-sub{font-weight:500;font-size:17px;fill:var(--v-ink-2)!important}
.v-nt-axis{stroke:var(--v-ink-3);stroke-width:2}
.v-nt-today{fill:var(--v-accent)}
.v-nt-test{fill:var(--v-amber)}
.v-nt-pay{fill:var(--v-ink)}
.v-nt-tue{fill:var(--v-paper);stroke:var(--v-accent);stroke-width:2.5}
.v-nt-tl{font:600 17px var(--f-body)}
.v-nt-brk{fill:none;stroke:var(--v-amber-ink);stroke-width:1.5}
.v-nt-testl{font:italic 500 17px var(--f-display);fill:var(--v-amber-ink)!important}

/* ---------- reading page: narrow screens ---------- */
@container (max-width: 700px){
  html:not(.is-stage) .v-ps-grid,html:not(.is-stage) .v-ds-grid,html:not(.is-stage) .v-fc-row,html:not(.is-stage) .v-sd-grid,html:not(.is-stage) .v-tf-cols{grid-template-columns:1fr}
  html:not(.is-stage) .v-an-grid{grid-template-columns:1fr;grid-template-areas:"instr" "files" "chats"}
  html:not(.is-stage) .v-er-head{display:none}
  html:not(.is-stage) .v-er-pair{grid-template-columns:1fr;gap:.35em}
  html:not(.is-stage) .v-er-arrow{display:none}
  html:not(.is-stage) .v-cf-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4em}
  html:not(.is-stage) .v-cf-row .v-cf-lab{grid-column:1/-1}
  html:not(.is-stage) .v-cf-row.is-head .v-cf-lab{display:none}
  html:not(.is-stage) .v-cf-cell{padding:.5em;font-size:.88em}
  html:not(.is-stage) .v-ta-body{grid-template-columns:1fr}
  html:not(.is-stage) .v-ta-pane{border-left:0;border-top:1px solid var(--v-rule)}
  html:not(.is-stage) .v-fb-pair{grid-template-columns:1fr}
  html:not(.is-stage) .v-fb-arrow{width:2px;height:1.4em;justify-self:center}
  html:not(.is-stage) .v-fb-arrow::after{right:-5px;top:auto;bottom:-6px;width:12px;height:9px;-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%)}
  html:not(.is-stage) .v-lm.is-drop8{grid-template-columns:1fr;grid-template-areas:"top" "win" "guess"}
  html:not(.is-stage) .v-lm-guess{transform:none}
  html:not(.is-stage) .v-mf-grid{grid-template-columns:minmax(0,1fr) 2.5em minmax(0,1.2fr)}
  html:not(.is-stage) .v-ib-lines li{grid-template-columns:1.4em minmax(0,1fr);gap:.5em}
  html:not(.is-stage) .v-ib-p{display:none}
  html:not(.is-stage) .v-ta-prev{font-size:.72em}
}
@container (max-width: 440px){
  html:not(.is-stage) .v-tf-ba{grid-template-columns:1fr}
  html:not(.is-stage) .v-tf-arrow{display:none}
  html:not(.is-stage) .v-mf-grid{grid-template-columns:1fr}
  html:not(.is-stage) .v-mf-lines{display:none}
  html:not(.is-stage) .v-mf-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4em;margin-bottom:.8em}
}

/* ---------- forced colours ---------- */
@media (forced-colors: active){
  .v-appwin,.v-ps-col,.v-an-zone,.v-fc-card,.v-cf-cell,.v-tf-col,.v-fb-card,.v-sd-sheet,.v-g,.v-mu,.v-file{border:1px solid CanvasText}
  .v-ib-lines li.v-on,.v-tf-col{outline:2px solid Highlight}
}

/* ---------- print: everything visible ---------- */
@media print{
  .v-root [data-at]{opacity:1!important;transform:none!important}
  .v-ta-tabs,.v-fb-tabs{display:none!important}
  .v-ta-draft[hidden]{display:grid!important}
  .v-fb-panel{display:grid!important;margin-bottom:1em}
  .v-an-zone{opacity:1!important}
  .v-mu,.v-g,.v-file,.v-er-rule,.v-ta-looks{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}