/* v3 office (owner: pixel), Delta 3: the lit office stage on the coin pages (coin.html, gm.html) only. iris components O1 to O9, layouts O-L0 to O-L7,
   tokens O11, punch rounds 1 and 2 (qa/iris-office-punch.md, qa/nova-office-veto.md). Reads --of-* only; no box-shadow except focus rings.
   Kept apart from the shared rules so every other page can drop it (swift Delta 3 overage ruling, cut 1). */

/* office layout (iris office handoff C10 to C14, layouts O-L0 to O-L7). The dev card is the page heading above the office at every width (O10).
   Mobile first: under 64em the office wrapper is display: contents so the rail sits right under the plate and its pan bar, the lit panels follow it. */
.v3 .office { display: contents; }
.v3 .dev-card--coin { order: 0; } .v3 .office-plate { order: 1; } .v3 .office-pan { order: 2; } .v3 .coin-side { order: 3; } .v3 .office-panels { order: 4; } .v3 .rooms { order: 5; }
.v3 .office-panels { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); padding: 16px; background: var(--of-stage); }
@media (max-width: 63.99em) { .v3 .office-panels > .office-steps, .v3 .office-panels > .office-legend, .v3 .office:not([data-demo]) .office-sum { grid-column: 1 / -1; } }
@media (min-width: 45em) and (max-width: 63.99em) { .v3 .office-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v3 .dev-card--coin .dc-mandate { -webkit-line-clamp: 2; }
.v3 .dev-card--coin .stage-bar { margin: var(--s-3) 0 0; }
.v3 .dev-card--coin .stage-bar .tbtn { min-height: 28px; position: relative; } /* replay row 28 (O10); the hit area keeps 44 */
.v3 .dev-card--coin .stage-bar .tbtn::after { content: ""; position: absolute; inset: -8px 0; }
@media (max-width: 63.99em) { .v3 .dev-card--coin .stage-bar { margin-left: calc(-48px - var(--s-4)); } } /* the replay row runs under the 48 px face too, so its label holds one line at 390 */
@media (max-width: 63.99em) { .v3 .coin-grid { row-gap: var(--s-3); } .v3 .office-pan { margin-top: calc(-1 * var(--s-3)); } } /* the pan bar sits on the plate */
.v3 .dev-card--coin .dc-receipt { display: none; } /* O10 card heights (86 / 72 / 108): the latest move lives in the Treasury desk panel */
@media (min-width: 64em) {
  .v3 .office { display: grid; gap: 16px; grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-areas: "plate plate plate" ". sum ." ". staff ." ". steps ." ". legend ."; padding-bottom: 16px;
    background: var(--of-stage); min-width: 0; } /* square, flush window in the page (nova veto 5) */
  .v3 .office-panels { display: contents; }
  .v3 .office-plate { grid-area: plate; } .v3 .office-sum { grid-area: sum; } .v3 .office-staff { grid-area: staff; } .v3 .office-steps { grid-area: steps; } .v3 .office-legend { grid-area: legend; }
  .v3 .office-plate .scene { border-radius: 0; }
  .v3 .dev-card--coin { background: none; border: 0; padding: 14px 0; min-height: 86px; }
  .v3 .dev-card--coin .dc-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; }
  .v3 .dev-card--coin .dc-row { flex-wrap: nowrap; min-width: 0; }
  .v3 .dev-card--coin .dev-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .v3 .dev-card--coin .lamp, .v3 .dev-card--coin .chip, .v3 .dev-card--coin .demo-bug { flex: none; }
  .v3 .dev-card--coin .dc-mandate, .v3 .dev-card--coin .dc-receipt { grid-column: 1 / -1; }
  .v3 .dev-card--coin .dc-mandate { -webkit-line-clamp: 1; }
  .v3 .dev-card--coin .stage-bar { grid-column: 2; grid-row: 1; margin: 0; }
}
/* the summary and staff side by side once the office block is 720 px wide: 64em column = viewport - gutters - gap - rail */
/* edge columns of 0 width: the column gap is the 16 px inset of the panel rows, the plate spans them (full bleed) */
@media (min-width: 71em) { .v3 .office { grid-template-columns: 0 repeat(2, minmax(0, 1fr)) 0; grid-template-areas: "plate plate plate plate" ". sum staff ." ". steps steps ." ". legend legend ."; }
  .v3 .office:not([data-demo]) { grid-template-areas: "plate plate plate plate" ". sum sum ." ". legend legend ."; } }
@media (min-width: 114em) {
  .v3 .coin-grid { grid-template-columns: minmax(0, var(--of-stage-wide)) var(--rail-w); }
  .v3 .office[data-demo] { grid-template-columns: var(--of-side) minmax(0, 1fr) var(--of-side); grid-template-areas: "sum plate staff" "steps steps steps" "legend legend legend"; padding: 16px; }
  .v3 .office[data-demo] .of-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .v3 .office[data-demo] .of-dl dd { margin-bottom: 6px; }
}

/* ---------- office (Delta 3, iris components O1 to O9, tokens O11): the lit stage on the coin pages. Reads --of-* only, no shadow except focus rings ---------- */
.v3 .office, .v3 .office-panels, .v3 .emp-panel { color: var(--of-ink); }
.v3 .office-plate { container: plate / inline-size; width: 100%; max-width: var(--of-plate-max); justify-self: center; align-self: start; }
.v3 .office-plate .scene { height: auto; } /* the kit app.css gives .scene a fixed mobile height; the office box is its aspect ratio only */
.v3 .office :focus-visible, .v3 .emp-panel :focus-visible { outline: none; box-shadow: var(--of-ring); }
.v3 .office .staff-row:focus-visible, .v3 .office [role="tab"]:focus-visible, .v3 .office [role="tabpanel"]:focus-visible { box-shadow: var(--of-ring-inset); }
@media (forced-colors: active) { .v3 .office :focus-visible, .v3 .emp-panel :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
.v3 .lt--dim { background: var(--of-dim); }

/* tags (O1): dev tag = direction link label, zone tags, desk name tags. One shell */
.v3 .hot.hot--office .hot-name, .v3 .zone-tag, .v3 .desk-tag .tag-r1 { background: var(--of-panel); border: 1px solid var(--of-mu); border-radius: var(--of-r-tag); height: var(--of-tag-h);
  display: inline-flex; align-items: stretch; white-space: nowrap; overflow: hidden; max-width: none; padding: 0; font: 600 var(--of-tag-fs)/16px var(--sans); letter-spacing: 0; color: var(--of-ink); }
.v3 .tag-name, .v3 .tag-face, .v3 .tag-demo, .v3 .hot--office .tag-st { display: inline-flex; align-items: center; }
.v3 .tag-name { padding: var(--of-tag-pad); }
.v3 .tag-face { padding: 0 1px; }
.v3 .tag-face svg { width: var(--pfp-24); height: auto; display: block; }
.v3 .tag-demo { padding: var(--of-tag-seg-pad); background: var(--of-chip); border-right: 1px solid var(--of-mu); font: 500 0.75rem/16px var(--mono); letter-spacing: .01em; color: var(--of-ink); }
.v3 .tag-name ~ .tag-demo { border-right: 0; border-left: 1px solid var(--of-mu); }
.v3 .hot--office .tag-st { padding: var(--of-tag-pad); border-left: 1px solid var(--of-mu); font-weight: 400; }
/* zone links: the box is the room, the hit area its floor polygon, the label sits on the tag point */
.v3 .hot.hot--office { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); display: block; pointer-events: none;
  border-radius: 0; outline: 1px solid transparent; outline-offset: -1px; color: var(--of-ink); }
.v3 .hot--office::before { content: ""; position: absolute; inset: 0; clip-path: var(--hit, none); pointer-events: auto; }
.v3 .hot.hot--office .hot-name { position: absolute; left: calc(var(--tx) * 1%); top: calc(var(--ty) * 1%); transform: translate(-50%, -100%); z-index: 2; pointer-events: auto; }
.v3 .hot.hot--office[data-hot="reception"] .hot-name { transform: translate(-50%, 0); }
.v3 .hot.hot--office[data-hot="direction"] .hot-name { height: var(--of-tag-h-dev); }
.v3 .hot--office .hot-state { display: none; }
.v3 .hot.hot--office:hover { outline-color: var(--of-ink); }
.v3 .hot.hot--office:hover .hot-name { border-color: var(--of-ink); }
.v3 .hot.hot--office:active .hot-name { background: var(--of-chip); }
.v3 .hot.hot--office:focus-visible, .v3 .hot.hot--office:focus-visible .hot-name { box-shadow: var(--of-ring); }
.v3 .scene[data-hot-debug] .hot--office::before { background: color-mix(in srgb, var(--of-ink) 12%, transparent); }

/* figures (O2): desks are buttons on the figure box, at least 24 x 24; the dev is decoration, its tag never moves */
.v3 .office-figs, .v3 .of-open { position: absolute; inset: 0; pointer-events: none; }
.v3 .desks .desk, .v3 .dev-fig, .v3 .of-open .zone-tag { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -100%); }
.v3 .desks .desk { min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; border-radius: var(--of-r-tag); display: flex; align-items: flex-end; justify-content: center;
  pointer-events: auto; cursor: pointer; z-index: 1; color: var(--of-ink); }
.v3 .desk-fig, .v3 .dev-fig { display: block; width: calc(16px * var(--of-fig-scale)); height: calc(18px * var(--of-fig-scale)); }
.v3 .desk[data-pose="standing"] .desk-fig, .v3 .dev-fig[data-pose="standing"] { height: calc(24px * var(--of-fig-scale)); }
.v3 .desk-fig svg, .v3 .dev-fig svg { display: block; width: 100%; height: 100%; position: static; transform: none; } /* the dev sprite carries the map .sprite class */
.v3 .of-open .zone-tag { z-index: 2; }
.v3 .desk-tag { visibility: hidden; position: absolute; left: 50%; bottom: calc(100% + var(--of-tag-gap)); transform: translateX(-50%); display: inline-flex; flex-direction: column; pointer-events: none; }
.v3 .desk-tag .tag-r1 { border-radius: var(--of-r-tag) var(--of-r-tag) 0 0; }
.v3 .desk-tag .tag-st { background: var(--of-panel); border: 1px solid var(--of-mu); border-top: 0; border-radius: 0 0 var(--of-r-tag) var(--of-r-tag); padding: 2px 6px;
  font: 400 0.75rem/16px var(--sans); color: var(--of-ink); white-space: nowrap; text-align: left; }
.v3 .desk:hover, .v3 .desk:focus-visible, .v3 .desk[data-peek] { z-index: 3; }
.v3 .desk[aria-expanded="true"] { z-index: 4; }
.v3 .desk:hover .desk-tag, .v3 .desk:focus-visible .desk-tag, .v3 .desk[aria-expanded="true"] .desk-tag, .v3 .desk[data-peek] .desk-tag { visibility: visible; }
.v3 .desk[data-peek-off] .desk-tag { visibility: hidden; }
.v3 .desk[aria-expanded="true"] .tag-name { background: var(--of-c-inv-bg); color: var(--of-c-inv-fg); }

/* pan bar (O7, under 48em) and the 2-axis pan of the office plate */
.v3 .office-pan { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; background: var(--of-stage); scrollbar-width: thin; }
.v3 .office-pan[hidden] { display: none; }
@media (min-width: 48em) { .v3 .office-pan { display: none; } } /* from 48em the full plate shows; zone tags are the controls */
.v3 .of-pan { flex: none; height: 40px; padding: 0 12px; background: var(--of-panel); border: 1px solid var(--of-mu); border-radius: var(--of-r-tag); color: var(--of-ink);
  font: 600 0.8125rem/18px var(--sans); white-space: nowrap; cursor: pointer; }
.v3 .of-pan:hover { background: var(--of-chip); }
.v3 .of-pan[aria-pressed="true"] { background: var(--of-c-inv-bg); color: var(--of-c-inv-fg); }
@media (max-width: 47.99em) {
  .v3 .office-plate .scene--pan { touch-action: pan-y; }
  .v3 .office-plate .scene--pan .scene-plate { width: calc(var(--pan-w) * 1%); height: calc(var(--pan-h) * 1%); inset: 0 auto auto 0;
    transform: translate(calc(var(--pan-x) * -1%), calc(var(--pan-y) * -1%)); transition: transform var(--d-base) var(--e-out); }
  .v3 .office-plate .scene--pan[data-dragging] .scene-plate { transition: none; }
  .v3 .scene--pan .hot.hot--office { display: block; }
  .v3 .desk-tag .tag-st { font-size: 0.6875rem; }
}

/* panels (O3 to O5, O8, O9) */
.v3 .office-sum, .v3 .office-staff, .v3 .office-steps { background: var(--of-panel); border: 1px solid var(--of-edge); border-radius: var(--of-r-panel); padding: var(--q-pad);
  display: grid; gap: 12px; align-content: start; min-width: 0; }
.v3 .office [hidden] { display: none; }
.v3 .of-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.v3 .of-h h2 { font: 600 0.9375rem/20px var(--sans); letter-spacing: 0; color: var(--of-ink); margin: 0; }
.v3 .office h3, .v3 .emp-panel h3 { font: 600 0.875rem/20px var(--sans); letter-spacing: 0; color: var(--of-ink); margin: 0; }
.v3 .office p, .v3 .emp-panel p { margin: 0; color: var(--of-ink); font-size: 0.875rem; line-height: 20px; }
.v3 .office .of-mu, .v3 .emp-panel .of-mu, .v3 .of-count, .v3 .dd-sub { color: var(--of-mu); font-size: 0.8125rem; line-height: 18px; }
.v3 .of-count .num { color: var(--of-ink); }
.v3 .office .of-band { background: var(--of-chip); border-left: 1px solid var(--of-mu); padding: 8px 12px; font-size: 0.8125rem; line-height: 18px; }
.v3 .of-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; align-items: baseline; }
.v3 .of-dl > div { display: contents; }
.v3 .of-dl dt { color: var(--of-mu); font-size: 0.8125rem; line-height: 18px; }
.v3 .of-dl dd { margin: 0; color: var(--of-ink); font-size: 0.875rem; line-height: 20px; }
.v3 .dd-sub { display: block; }
.v3 .of-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.v3 .of-link { background: none; border: 0; padding: 0; font: inherit; color: var(--of-ink); text-decoration: underline 1px var(--of-mu); text-underline-offset: 3px; cursor: pointer; }
.v3 .of-link:hover { text-decoration-color: var(--of-ink); }
.v3 .of-link { padding-block: 2px; } /* 24 px target (aegis A4); inline padding grows the hit box, not the line */
.v3 .office .road, .v3 .emp-panel .road { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 0 0 12px; border: 0; border-left: 1px dashed var(--of-mu); border-radius: 0;
  background: none; color: var(--of-ink); }
.v3 .office .road p, .v3 .office .road ul, .v3 .emp-panel .road p, .v3 .emp-panel .road ul { flex-basis: 100%; }
.v3 .office .road ul, .v3 .emp-panel .road ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--of-mu); font-size: 0.875rem; line-height: 20px; }
.v3 .office .chip--demo, .v3 .office .chip--sim, .v3 .office .chip--road, .v3 .emp-panel .chip--demo, .v3 .emp-panel .chip--sim, .v3 .emp-panel .chip--road { background: var(--of-chip); color: var(--of-ink); border-color: var(--of-mu); }
.v3 .office .chip--lore, .v3 .emp-panel .chip--lore { background: transparent; color: var(--of-mu); border-color: var(--of-mu); }
/* staff (O3): a list, rows split by lines; selected = --of-sel ground and a 3 px ink bar */
.v3 .staff-list { list-style: none; margin: 0 calc(-1 * var(--q-pad)); padding: 0; }
.v3 .staff-list li + li { border-top: 1px solid var(--of-edge); }
.v3 .staff-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: var(--of-row-h); padding: 12px var(--q-pad);
  background: none; border: 0; border-radius: 0; text-align: left; color: var(--of-mu); font: 400 0.875rem/20px var(--sans); cursor: pointer; }
.v3 .sr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3 .sr-name b { font-weight: 600; color: var(--of-ink); }
.v3 .sr-st { color: var(--of-ink); font-size: 0.8125rem; line-height: 18px; }
.v3 .staff-row:hover { background: var(--of-c-hover); }
.v3 .staff-row:active, .v3 .staff-row[aria-expanded="true"] { background: var(--of-c-sel); }
.v3 .staff-row[aria-expanded="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--of-ink); }
/* timeline (O5): square markers, a state word on every step, no percent, no bar */
.v3 .tl-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--of-edge); }
.v3 .tl-tab { flex: none; min-height: 44px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--of-ink); font: 600 0.875rem/20px var(--sans); cursor: pointer; }
.v3 .tl-tab:hover { text-decoration: underline 1px; text-underline-offset: 6px; }
.v3 .tl-tab[aria-selected="true"] { border-bottom-color: var(--of-ink); text-decoration: none; }
.v3 .tl-p { display: grid; gap: 12px; outline: none; }
.v3 .office .tl-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 0; font-size: 0.875rem; line-height: 20px; color: var(--of-ink); }
.v3 .tl-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.v3 .tl-s { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-content: start; min-height: 44px; }
.v3 .tl-s::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: var(--of-line); background: var(--of-mu); }
.v3 .tl-s:first-child::before { top: 10px; }
.v3 .tl-s:last-child::before { bottom: auto; height: 10px; }
.v3 .tl-s:only-child::before { display: none; }
.v3 .tl-m { position: relative; z-index: 1; grid-row: 1 / span 2; width: var(--of-marker); height: var(--of-marker); margin: 6px 4px 0; border: 1px solid var(--of-ink); background: var(--of-panel); }
.v3 .tl-s[data-state="done"] .tl-m { background: var(--of-ink); }
.v3 .tl-s[data-state="active"] .tl-m { background: linear-gradient(90deg, var(--of-ink) 50%, var(--of-panel) 50%); }
.v3 .tl-n { color: var(--of-ink); font-size: 0.8125rem; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3 .tl-s[data-state="active"] .tl-n { font-weight: 600; }
.v3 .tl-w { grid-column: 2; font: 500 0.75rem/16px var(--mono); color: var(--of-mu); }
@media (min-width: 48em) {
  .v3 .tl-steps { grid-auto-flow: column; grid-auto-columns: minmax(var(--of-step-min), 1fr); overflow-x: auto; }
  .v3 .tl-s { grid-template-columns: none; grid-template-rows: 16px auto auto; row-gap: 4px; padding-right: 12px; min-height: 0; }
  .v3 .tl-s::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: var(--of-line); }
  .v3 .tl-s:first-child::before { top: 7px; left: 4px; }
  .v3 .tl-s:last-child::before { right: auto; width: 4px; height: var(--of-line); }
  .v3 .tl-m { grid-row: 1; margin: 4px 0 0; }
  .v3 .tl-w { grid-column: 1; }
}
/* legend (O9) */
.v3 .office-legend { display: grid; gap: 4px; max-width: 72ch; }
.v3 .office-legend p { color: var(--of-mu); font-size: 0.8125rem; line-height: 18px; }
.v3 .office-legend .chip { margin-right: 8px; }
.v3 .office-legend summary { color: var(--of-ink); font-size: 0.8125rem; line-height: 18px; text-decoration: underline 1px var(--of-mu); text-underline-offset: 3px; cursor: pointer; width: max-content; }

/* employee sheet (O6): side sheet over the rail column from 64em (show), bottom sheet below (showModal) */
.v3 .emp-panel { background: var(--of-panel); border: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.v3 .emp-panel[open] { display: grid; gap: 12px; align-content: start; }
.v3 .emp-panel[open]:not(:modal) { position: fixed; z-index: var(--z-sheet); inset: var(--chrome-top) 0 0 auto; width: var(--of-sheet-w); max-width: 100%; height: auto; max-height: none; margin: 0; padding: 20px;
  border-left: 1px solid var(--of-edge); }
.v3 .emp-panel:modal { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85dvh; margin: 0; border-top: 1px solid var(--of-edge); border-radius: var(--of-r-sheet) var(--of-r-sheet) 0 0; }
.v3 .emp-panel::backdrop { background: var(--of-backdrop); }
.v3 .emp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3 .emp-head h2 { font: 800 1.5rem/28px var(--head); letter-spacing: -0.01em; color: var(--of-ink); margin: 0; outline: none; }
.v3 .emp-panel .emp-head h2:focus-visible { box-shadow: none; } /* programmatic focus target on open, not a control */
.v3 .emp-close { margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--of-panel); border: 1px solid var(--of-mu); border-radius: var(--of-r-tag);
  color: var(--of-ink); font: 600 0.875rem/20px var(--sans); cursor: pointer; }
.v3 .emp-close:hover { background: var(--of-chip); }
.v3 .emp-dl { grid-template-columns: 112px minmax(0, 1fr); }
.v3 .emp-dl dd b { font-weight: 600; }
.v3 .emp-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v3 .emp-tasks li { position: relative; padding-left: 14px; font-size: 0.875rem; line-height: 20px; }
.v3 .emp-tasks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--of-ink); }
.v3 .office p.emp-limit, .v3 .emp-panel p.emp-limit { border-top: 1px solid var(--of-edge); padding-top: 12px; color: var(--of-mu); font-size: 0.8125rem; line-height: 18px; }
.v3 .emp-nav { display: flex; justify-content: space-between; gap: 12px; }
.v3 .emp-nav .of-link { min-height: 44px; }
.v3 .emp-nav .of-link + .of-link { margin-left: auto; }

/* ---------- punch round 2 (nova veto 1 to 5, iris P1 and P2) ---------- */
/* one Demo chip for the whole office, top left of the window; the dev tag and the Occupied state keep their own */
.v3 .office-plate .of-demo { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 5; }
/* the dev tag rides with the dev when it leaves its office; the direction link then shows its quiet zone name */
.v3 .of-open .dev-tag { height: var(--of-tag-h-dev); z-index: 3; }
.v3 .hot.hot--office .hot-name--quiet { font-weight: 400; color: var(--of-mu); }
/* the dev is the first figure found: an ink outline on its silhouette only (nova veto 2, data figure, exempt from the plate art rules) */
.v3 .dev-fig svg { --o: calc(1px * var(--of-fig-scale)); filter: drop-shadow(var(--o) 0 0 var(--of-ink)) drop-shadow(calc(-1 * var(--o)) 0 0 var(--of-ink))
  drop-shadow(0 var(--o) 0 var(--of-ink)) drop-shadow(0 calc(-1 * var(--o)) 0 var(--of-ink)); }
/* one tag speaks per zone: a shown meeting or break desk tag hides that zone's tag (the link keeps its name for AT); break tags hang left */
.v3 .office-plate:has(.desk[data-status="meeting"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) #hot-office-meeting .hot-name,
.v3 .office-plate:has(.desk[data-status="break"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) #hot-office-cafeteria .hot-name { visibility: hidden; }
.v3 .desk[data-status="break"] .desk-tag { left: auto; right: calc(50% - 8px); transform: none; }
/* under 48em scene.js keeps every visible plate tag 4 px inside the pan window */
.v3 .office-plate .scene--pan :is(.hot--office .hot-name, .zone-tag, .desk-tag) { translate: var(--tag-dx, 0) var(--tag-dy, 0); }
/* the dev tag speaks for the zone it stands in: the meeting and cafeteria tags give way to it, and it gives way to a shown desk tag there */
.v3 .office-plate[data-dz="meeting"] #hot-office-meeting .hot-name, .v3 .office-plate[data-dz="cafeteria"] #hot-office-cafeteria .hot-name,
.v3 .office-plate:is([data-dz="meeting"], [data-dz="cafeteria"]):has(.desk:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) .dev-tag { visibility: hidden; }
/* at reception the dev tag hangs right of the figure so it clears the Open floor tag (the Growth Mind's 154 px tag at 1024) */
.v3 .office-plate[data-dz="reception"] .of-open .dev-tag { transform: translate(calc(-1 * var(--s-5)), -100%); }
/* under 48em a shown desk tag hides the plate tags it would cover (scene.js fitTags marks them data-y<n>, n = desk order) */
.v3 .office-plate:has(.desk[data-i="1"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y1],
.v3 .office-plate:has(.desk[data-i="2"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y2],
.v3 .office-plate:has(.desk[data-i="3"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y3],
.v3 .office-plate:has(.desk[data-i="4"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y4],
.v3 .office-plate:has(.desk[data-i="5"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y5],
.v3 .office-plate:has(.desk[data-i="6"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y6],
.v3 .office-plate:has(.desk[data-i="7"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y7],
.v3 .office-plate:has(.desk[data-i="8"]:is(:hover, :focus-visible, [aria-expanded="true"], [data-peek]):not([data-peek-off])) [data-y8] { visibility: hidden; }

/* ---------- token page (coin.html only; moved here from coin.css in r15, which sits at its 6 KB cap). GC0 values, then the r15 rebuild (owner
   2026-10-13: the office is the hero, a status card per figure, the swap form in a sticky right column, three cards, the team, details tabs) ---------- */
.v3 .tok { --tk-tok: 48px; --tk-dev: 24px; --tk-box: 56px; --tk-main: 868px; --of-on: #16794A; display: block; padding-bottom: var(--s-9); }
.v3 .tk-grid, .v3 .tk-rooms { max-width: calc(var(--tk-main) + 20px + var(--rail-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.v3 .tk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 12px; }
.v3 .tk-grid > * { min-width: 0; }
/* hero: one frame, the identity band on top of the lit office */
.v3 .tk-hero { background: var(--sf); border: 1px solid var(--ln2); border-radius: var(--step); overflow: hidden; min-width: 0; }
.v3 .tk-id { display: grid; grid-template-columns: var(--tk-box) minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; align-items: center; }
.v3 .tk-lock { position: relative; width: var(--tk-box); height: var(--tk-box); grid-row: 1; }
.v3 .tk-names { min-width: 0; }
.v3 .tk-mkt, .v3 .tk-acts { grid-column: 1 / -1; }
.v3 .tok-pfp { position: relative; display: block; width: var(--sz); height: var(--sz); border-radius: var(--step); overflow: hidden; background: var(--sf2); flex: none; }
.v3 .tok-pfp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.v3 .tok-mono { display: grid; place-items: center; height: 100%; font: 800 calc(var(--sz) * 0.45) / 1 var(--head); color: var(--fgl); }
.v3 .tk-lock-dev { position: absolute; right: -4px; bottom: -4px; width: var(--tk-dev); height: var(--tk-dev); outline: 2px solid var(--sf); background: var(--sf); }
.v3 .tk-lock-dev svg, .v3 .tk-who-face svg { display: block; width: 100%; height: auto; }
.v3 .tk-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.v3 .tok .dev-name { font-size: var(--t-dev-h1); line-height: 1.05; overflow-wrap: anywhere; }
.v3 .tk-sub { margin-top: 2px; font-size: var(--t-small); line-height: var(--lh-meta); color: var(--mu); }
.v3 .tk-sub [data-ticker] { font-size: var(--t-small); color: var(--fg); }
.v3 .tk-sub [data-dev-name] { color: var(--fgl); }
/* market (GC8, r15): market cap big with the 24 h change, the price and its source under */
.v3 .tk-mkt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.v3 .tk-fig { display: contents; margin: 0; }
.v3 .tk-f { margin: 0; display: flex; align-items: baseline; gap: 6px; } .v3 .tk-f dd { margin: 0; }
.v3 .tk-f dt { font-size: var(--t-small); line-height: 16px; color: var(--mu); }
.v3 .tk-f--mcap dd { order: -1; font: 500 1.75rem/34px var(--mono); color: var(--fg); letter-spacing: -0.02em; }
.v3 .tk-f--chg { font-size: var(--t-body); } .v3 .tk-f--chg dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.v3 .tk-f--price { flex-basis: 100%; }
.v3 .tk-price { font-size: var(--t-small); line-height: var(--lh-meta); color: var(--fgl); }
.v3 .tk-price sub { font-size: 0.55em; vertical-align: -0.15em; }
.v3 .tk-price[data-empty] { font-family: var(--sans); }
.v3 .tk-src, .v3 .prov { font-family: var(--mono); font-size: 0.78125rem; line-height: var(--lh-meta); color: var(--mu); }
.v3 .tk-mkt[data-demo] dd, .v3 .tk-mkt[data-demo] dd span { color: var(--fgl); }
.v3 .tk-dex { display: none; align-items: baseline; gap: 6px; color: var(--mu); font-size: var(--t-small); } .v3 .tk-dx-s { color: var(--mu); }
.v3 .tk-word.tk-dx-s { color: var(--fg); padding: 1px 6px; }
.v3 .na { color: var(--mu); font: 400 var(--t-small) / var(--lh-meta) var(--sans); letter-spacing: normal; }
.v3 .tk-dl dt { white-space: nowrap; }
.v3 .tk-f--chg[data-na] dt { position: static; width: auto; height: auto; clip-path: none; }
/* Buy + contract address pill (GC9) */
.v3 .tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v3 .tk-buy { min-height: 40px; padding: 0 20px; }
.v3 .tk-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); min-height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--ln2); border-radius: var(--r-pill); font-size: var(--t-small); color: var(--mu); }
.v3 .tk-ca-v { color: var(--fgl); font-size: 0.78125rem; }
.v3 .tk-ca-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.v3 .tk-copy, .v3 .tk-exp { min-height: 32px; position: relative; } .v3 .tk-copy::after, .v3 .tk-exp::after { content: ""; position: absolute; inset: -6px 0; }
.v3 .tk-exp { display: none; }
.v3 .tk-ca-err { flex-basis: 100%; color: var(--fg); }
/* the office in the hero: flush, no panels here (they live in the Office tab) */
.v3 .tok .tk-stage { display: block; padding: 0; background: var(--of-stage); }
.v3 .tok .tk-stage .office-plate { position: relative; max-width: none; }
.v3 .tok .tk-stage .scene { border-radius: 0; }
/* warmth (owner addendum i): a warm light layer over the plate picture (never a filter on the img), screen glow at every busy desk.
   Both sit on the plate box, so a richer office picture can replace office.svg and keep them */
.v3 .tok .tk-stage .scene-plate::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(120% 90% at 45% 35%, #FFFBF2 0 40%, #F6E6CE 75%, #EAD3B4 100%); }
.v3 .tok .tk-stage .scene { background: #F3E7D3; }
.v3 .tok .desk:is([data-status="working"], [data-status="meeting"])::before, .v3 .tok .dev-fig::before { content: ""; position: absolute; left: 50%; top: 30%; width: 300%; height: 160%;
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 214 140 / .75), rgb(255 214 140 / 0)); }
.v3 .tok .dev-fig { isolation: isolate; }
.v3 .tok .desk[data-status="working"]::before { background: radial-gradient(closest-side, rgb(150 200 255 / .8), rgb(150 200 255 / 0)); }
/* status cards (r15): a strip under the plate on narrow plates, cards on the plate edges with a leader line from 560 px of plate */
.v3 .of-cards { list-style: none; margin: 0; padding: 8px 12px 12px; display: flex; gap: 8px; overflow-x: auto; background: var(--of-stage); scrollbar-width: thin; }
.v3 .of-card { flex: none; width: 172px; display: grid; gap: 1px; align-content: start; padding: 6px 9px 7px; background: #FFFDF8; border: 1px solid #E3D6C1; border-radius: 10px;
  color: var(--of-ink); font: 400 0.71875rem/15px var(--sans); }
.v3 .of-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v3 .of-card-h b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3 .of-st { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--of-mu); font-size: 0.6875rem; }
.v3 .of-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.v3 .of-card[data-on="true"] .of-st { color: var(--of-on); } .v3 [data-on="true"] > .of-dot, .v3 .of-card[data-on="true"] .of-dot { background: currentColor; }
.v3 .of-card-l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3 .of-card-t { color: var(--of-mu); }
.v3 .of-card .wk-m { background: var(--of-ink); } .v3 .of-card .wk-m--r { background: linear-gradient(45deg, transparent 44%, var(--of-ink) 44% 56%, transparent 56%); box-shadow: inset 0 0 0 1px var(--of-ink); }
.v3 .of-leads { display: none; }
.v3 .of-card { cursor: pointer; transition: transform var(--d-fast, .12s) var(--e-out, ease-out), border-color var(--d-fast, .12s); }
.v3 .of-card-r { display: none; margin-top: 3px; padding-top: 3px; border-top: 1px dashed #E3D6C1; color: var(--of-mu); font-style: italic; }
.v3 .of-card[data-hi] { z-index: 8; border-color: var(--of-ink); } .v3 .of-card[data-hi] .of-card-r { display: block; }
.v3 .of-card[data-hi] .of-card-l { -webkit-line-clamp: 3; }
.v3 .tok .tk-stage .dev-fig { pointer-events: auto; }
.v3 .tk-more-l { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (prefers-reduced-motion: reduce) { .v3 .of-card { transition: none; } }
@container plate (min-width: 560px) {
  .v3 .of-cards { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; background: none; pointer-events: none; }
  .v3 .of-card { pointer-events: auto; } .v3 .of-card[data-hi] { transform: translate(calc(var(--ax) * -1%), calc(var(--ay) * -1%)) scale(1.04); }
  /* the zone tags step back while the cards speak: still links, they show on hover and focus (and keep their names for AT) */
  .v3 .tok .tk-stage [data-busy] :is(.hot--office .hot-name, .of-open .zone-tag) { opacity: 0; }
  .v3 .tok .tk-stage [data-busy] .hot--office:is(:hover, :focus-visible) .hot-name { opacity: 1; }
  .v3 .tok .tk-stage [data-busy] .desk .desk-tag { visibility: hidden; } /* the figure's card speaks for it */
  .v3 .of-card { position: absolute; z-index: 6; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); width: 156px; transform: translate(calc(var(--ax) * -1%), calc(var(--ay) * -1%));
    margin: 6px; margin-left: calc(6px - var(--ax) * 0.12px); margin-top: calc(6px - var(--ay) * 0.12px); }
  .v3 .of-card-l { -webkit-line-clamp: 1; }
  .v3 .of-leads { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; fill: var(--of-ink); stroke: var(--of-mu); stroke-width: 1; stroke-dasharray: 2 2; }
}
/* swap panel (r15): heading, Buy | Sell, the form (demo) or the Jupiter plugin (launched), fee lines */
.v3 .tk-rail { padding: 14px 0 4px; gap: 12px; align-self: start; }
.v3 .sw-top { padding: 0 var(--rail-pad); display: grid; gap: 2px; }
.v3 .sw-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-small); color: var(--mu); }
.v3 .sw-h { font: 800 1.375rem/1.2 var(--head); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.v3 .tk-rail .tabs-bs { height: 40px; }
.v3 .tk-rail .slot { gap: 12px; }
.v3 .tk-rail .still { gap: 8px; }
.v3 .tk-rail .still-row { position: relative; } .v3 .tk-rail .still-l { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); }
.v3 .tk-rail .slot:is([data-state="demo"], [data-state="closed"]) .still { display: none; }
.v3 .tk-rail .still-f { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--s-4); color: var(--mu); }
.v3 .sw-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.v3 .sw-l { font-size: var(--t-small); font-weight: var(--w-strong); color: var(--fgl); }
.v3 .sw-in { display: flex; align-items: center; height: 52px; padding: 0 12px; background: var(--sf2); border: 1px solid var(--c-control); border-radius: var(--r2); }
.v3 .sw-in:focus-within { box-shadow: var(--focus-ring); }
.v3 .sw-in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--fg); font-size: 1.25rem; }
.v3 .sw-in input::placeholder { color: var(--mu); }
.v3 .sw-u { flex: none; max-width: 40%; padding-left: 10px; border-left: 1px solid var(--ln2); color: var(--fg); font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3 .sw-chips { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .sw-chips[hidden] { display: none; }
.v3 .sw-c { min-height: 28px; padding: 0 10px; border: 1px solid var(--ln2); border-radius: var(--r-pill); color: var(--fgl); font-size: 0.78125rem; position: relative; }
.v3 .sw-c::after { content: ""; position: absolute; inset: -8px 0; }
.v3 .sw-c:hover { border-color: var(--c-control); color: var(--fg); }
.v3 .sw-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 36px; padding: 1px; border: 1px solid var(--c-control); border-radius: var(--r-pill); }
.v3 .sw-seg button { border-radius: var(--r-pill); color: var(--mu); font-size: var(--t-small); border: 1px solid transparent; }
.v3 .sw-seg button:hover { color: var(--fg); }
.v3 .sw-seg button[aria-checked="true"] { background: var(--sf3); color: var(--fg); border-color: var(--fg); }
.v3 .sw-q { display: grid; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--ln); }
.v3 .sw-q > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--t-small); line-height: var(--lh-meta); }
.v3 .sw-q dt { color: var(--mu); flex: none; } .v3 .sw-q dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; color: var(--fgl); text-align: right; }
.v3 .sw-go { width: 100%; }
.v3 .sw-why { font-size: var(--t-small); line-height: var(--lh-meta); color: var(--fgl); }
.v3 .sw-launch { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-small); color: var(--mu); }
.v3 .tk-k5 { margin: 0; color: var(--mu); }
.v3 .tk-rail .fee-line { padding-bottom: 12px; }
/* three cards under the hero (r15): chart, latest work, about */
.v3 .tk-trio { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.v3 .tk-card { margin: 0; background: var(--sf); border: 1px solid var(--ln2); border-radius: var(--step); padding: 12px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.v3 .tk-card-h, .v3 .tk-chart-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 var(--t-body) / 1.3 var(--sans); color: var(--fg); }
.v3 .tk-chart .chart-plot { height: auto; min-height: 148px; } .v3 .tk-chart .chart-box { height: 148px; }
.v3 .tk-chart .chart-src { min-height: 24px; }
.v3 .tk-wl { display: grid; margin: 0; padding: 0; list-style: none; }
.v3 .wk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--ln); font-size: var(--t-small); line-height: var(--lh-meta); color: var(--fgl); }
.v3 .wk-t { color: var(--mu); font-size: 0.78125rem; white-space: nowrap; }
.v3 .wk-m { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; background: var(--fg); }
.v3 .wk-m--r { background: linear-gradient(45deg, transparent 44%, var(--fg) 44% 56%, transparent 56%); box-shadow: inset 0 0 0 1px var(--fg); }
.v3 .tk-more-l { font-size: var(--t-small); }
.v3 .tk-adl { display: grid; margin: 0; }
.v3 .tk-adl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--ln); }
.v3 .tk-adl dt { color: var(--mu); font-size: var(--t-small); } .v3 .tk-adl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--fg); font-size: var(--t-small); line-height: var(--lh-meta); }
.v3 .tk-adl .tk-copy { min-height: 24px; }
/* the team (r15, hireagents card structure in our kit): chips switch one card */
.v3 .tk-team { display: grid; gap: 12px; margin-top: 24px; outline: none; }
.v3 .tk-team-top { display: grid; gap: 4px; }
.v3 .tm-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.v3 .tm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; background: var(--sf); border: 1px solid var(--ln2); border-radius: var(--r-pill); color: var(--fgl);
  font-weight: var(--w-strong); font-size: var(--t-small); }
.v3 .tm-chip:hover { border-color: var(--c-control); color: var(--fg); }
.v3 .tm-chip[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.v3 .tm-chip[data-on="true"] .of-dot { background: currentColor; }
.v3 .tm-chip:focus-visible, .v3 .tm-card:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.v3 .tm-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--sf); border: 1px solid var(--ln2); border-radius: var(--step); }
.v3 .tm-face { width: 96px; height: 96px; } .v3 .tm-face svg { display: block; width: 100%; height: auto; }
.v3 .tm-face--fig { display: grid; place-items: center; background: var(--of-stage); border-radius: var(--step); } .v3 .tm-face--fig svg { width: 40px; height: auto; }
.v3 .tm-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.v3 .tm-role { color: var(--fgl); font-size: var(--t-small); font-weight: var(--w-strong); }
.v3 .tm-n { font: 800 2rem/1 var(--head); letter-spacing: -0.02em; }
.v3 .tm-line { color: var(--fgl); font-size: var(--t-ui); line-height: 20px; }
.v3 .tm-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.v3 .tm-tile { padding: 8px 10px; border: 1px solid var(--ln2); border-radius: var(--step); }
.v3 .tm-tile dt { color: var(--mu); font-size: 0.75rem; } .v3 .tm-tile dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--fg); font-size: var(--t-small); font-weight: var(--w-strong); }
.v3 .tm-h4 { margin: 4px 0 0; font-size: var(--t-small); color: var(--mu); font-weight: var(--w-strong); }
.v3 .tm-job { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.v3 .tm-job li { position: relative; padding-left: 16px; color: var(--fgl); font-size: var(--t-small); line-height: var(--lh-meta); }
.v3 .tm-job li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--fg); }
/* details tabs (r15): the old section link row is the tablist, one section shows */
.v3 .tk-more { margin-top: 24px; display: grid; }
.v3 .tk-nav { display: flex; gap: 4px 18px; overflow-x: auto; border-bottom: 1px solid var(--ln); scrollbar-width: none; }
.v3 .tk-nav a { flex: none; display: flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; font-weight: var(--w-strong); font-size: var(--t-ui); color: var(--mu); text-decoration: none; }
.v3 .tk-nav a:hover { color: var(--fg); }
.v3 .tk-nav a[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.v3 .tk-nav a:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); outline: none; }
.v3 .tk-sec { margin-top: 20px; outline: none; display: grid; gap: var(--s-4); align-content: start; }
.v3 .tk-sec[hidden] { display: none; }
.v3 .tk-sec:focus-visible { box-shadow: var(--focus-ring); }
.v3 .tk-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.v3 .tk-more .tk-h2 { font-size: var(--t-panel-title, 1.25rem); }
.v3 .tk-h3 { font-size: var(--t-body); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.v3 .tk-intro, .v3 .tk-fgl, .v3 .tk-empty { color: var(--fgl); font-size: var(--t-ui); line-height: 20px; }
.v3 .tk-mu, .v3 .tk-help { color: var(--mu); font-size: var(--t-small); line-height: var(--lh-meta); }
.v3 .tk-dl { margin: 0; display: grid; }
.v3 .tk-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--ln); }
.v3 .tk-dl dt { color: var(--mu); font-size: var(--t-small); line-height: 20px; }
.v3 .tk-dl dd { margin: 0; color: var(--fg); font-size: var(--t-body); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; min-width: 0; }
.v3 .tk-dl .tk-help { flex-basis: 100%; }
.v3 .tk-full { overflow-wrap: anywhere; font-size: 0.78125rem; user-select: all; }
.v3 .tk-who { display: grid; gap: var(--s-5); }
.v3 .tk-who-b { display: flex; gap: var(--s-4); align-items: center; }
.v3 .tk-who-face { width: 48px; } .v3 .tk-lbl { color: var(--mu); font-size: var(--t-small); }
.v3 .tk-who-n { font-weight: var(--w-strong); color: var(--fg); }
.v3 .tk-arch { display: inline-flex; gap: var(--s-3); align-items: center; } .v3 .tk-arch svg { width: 24px; height: auto; }
.v3 .tk-split { display: grid; grid-template-columns: 70fr 20fr 10fr; gap: 2px; height: 12px; }
.v3 .tk-split span:nth-child(1) { background: var(--fg); border-radius: var(--step-s) 0 0 var(--step-s); }
.v3 .tk-split span:nth-child(2) { background: var(--mu); }
.v3 .tk-split span:nth-child(3) { background: var(--c-control); border-radius: 0 var(--step-s) var(--step-s) 0; }
.v3 .tk-split-l { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--fgl); }
.v3 .tk-split-l li { display: flex; gap: var(--s-3); align-items: center; }
.v3 .sw { width: 12px; height: 8px; flex: none; } .v3 .sw--dev { background: var(--fg); } .v3 .sw--gm { background: var(--mu); } .v3 .sw--arch { background: var(--c-control); }
.v3 .tk-fee-txt { display: grid; gap: var(--s-3); }
.v3 .tk-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.v3 .tk-ledger { display: grid; margin: 0; padding: 0; list-style: none; }
.v3 .tk-ledger:empty { display: none; }
.v3 .tk-ledger li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--ln); align-items: baseline; }
.v3 .tk-date { grid-column: 1 / -1; color: var(--mu); font-size: 0.78125rem; }
.v3 .tk-sent { color: var(--fgl); font-size: var(--t-ui); line-height: 20px; }
.v3 .tk-word { justify-self: start; padding: 0 6px; background: var(--sf3); color: var(--fg); border-radius: var(--step-s); font-size: var(--t-chip); }
.v3 .tk-ledger--p li { grid-template-columns: auto 1fr; } .v3 .tk-ledger--p .tk-date { grid-column: 2; }
.v3 .tk-count { color: var(--fg); }
/* video shelf (GC17, watch.js) */
.v3 .wt-row { display: flex; gap: var(--s-5); overflow-x: auto; margin: 0; padding: 4px; list-style: none; }
.v3 .wt { flex: none; width: 200px; display: grid; gap: var(--s-2); align-content: start; }
.v3 .wt-p, .v3 .wt-f { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid transparent; border-radius: var(--r-screen); overflow: hidden; background: var(--sf); padding: 0; }
.v3 .wt-p:hover { border-color: var(--c-control); }
.v3 .wt-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 .wt-play { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; fill: var(--fg); background: var(--bg); border-radius: var(--step-s); }
.v3 .wt-t { color: var(--fg); font-size: var(--t-ui); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3 .wt-c { color: var(--mu); font-size: var(--t-small); }
/* the Office tab: intro, replay bar, then the lit panels (summary, staff, timeline, legend) */
.v3 .tk-office-h { display: grid; gap: var(--s-3); }
.v3 .tk-office .stage-bar { margin: 0; }
.v3 .tok .tk-office .office-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; padding: 16px; background: var(--of-stage); color: var(--of-ink); }
.v3 .tok .tk-office .office-steps, .v3 .tok .tk-office .office-legend { grid-column: 1 / -1; }
.v3 .tok .tk-office .office-panels p, .v3 .tok .tk-office .office-panels h3 { color: var(--of-ink); margin: 0; }
.v3 .tok .tk-office .office-panels .of-mu, .v3 .tok .tk-office .office-legend p { color: var(--of-mu); }
.v3 .tok .tk-office .office-panels [hidden] { display: none; }
.v3 .tok .tk-office .office-panels .chip { background: var(--of-chip); color: var(--of-ink); border-color: var(--of-mu); }
.v3 .tok .tk-office .office-panels :focus-visible { outline: none; box-shadow: var(--of-ring); }
/* rooms: the move log folds each move under its one line (r15) */
.v3 .tk-rooms { margin-top: 28px; }
.v3 .tok .move { padding: var(--s-2) var(--s-4); grid-template-columns: minmax(0, 1fr); }
.v3 .tok .move summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 32px; cursor: pointer; list-style: none; }
.v3 .tok .move summary::-webkit-details-marker { display: none; }
.v3 .tok .move summary::before { content: "+"; width: 1ch; font-family: var(--mono); color: var(--mu); }
.v3 .tok .move details[open] summary::before { content: "\2212"; }
.v3 .tok .move details[open] dl { margin: var(--s-2) 0 var(--s-2); }
.v3 .tok .move summary:focus-visible { box-shadow: var(--focus-ring); outline: none; }
@media (min-width: 48em) {
  .v3 .wt { width: 240px; }
  .v3 .tk-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .tk-trio > .tk-chart { grid-column: 1 / -1; }
  .v3 .tm-card { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 20px; }
  .v3 .tm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3 .tk-dl:not(.tk-dl--1) { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .v3 .tk-dl > div { grid-template-columns: minmax(8em, 1fr) 2fr; }
  .v3 .tk-who { grid-template-columns: 1fr 1fr; }
  .v3 .tk-ledger li { grid-template-columns: 112px 1fr auto; } .v3 .tk-ledger .tk-date { grid-column: auto; }
  .v3 .tk-ledger--p li { grid-template-columns: 96px 1fr 112px; } .v3 .tk-ledger--p .tk-date { grid-column: auto; }
}
@media (max-width: 37.49em) { .v3 .tk-rail .slot[data-open] { height: 480px; } }
@media (max-width: 63.99em) {
  .v3 .tk-rail .slot { height: auto; min-height: 0; }
  .v3 .tk-rail .slot .still { display: grid; }
  .v3 .tk-rail .slot[data-open] { height: var(--jup-h); }
  .v3 .tk-rail .slot[data-open] .still { display: none; }
  .v3 .tk-hero { margin-inline: calc(-1 * var(--gutter) + 8px); }
}
@media (min-width: 64em) {
  .v3 .tok { --tk-tok: 64px; --tk-dev: 28px; --tk-box: 64px; }
  .v3 .tk-grid { grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: 20px; align-items: start; padding-top: 16px; }
  .v3 .tk-grid > * { grid-column: 1; }
  .v3 .tk-grid > .tk-rail { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .v3 .tk-id { grid-template-columns: var(--tk-box) minmax(0, 1fr) auto; padding: 16px 20px 14px; }
  .v3 .tk-mkt { grid-column: 3; grid-row: 1; justify-content: flex-end; text-align: right; max-width: 18em; }
  .v3 .tk-acts { grid-column: 1 / -1; }
  .v3 .tk-ca .tk-dex:not(:empty) { display: inline-flex; } .v3 .tk-dex::before { content: "·" / ""; } .v3 .tk-dx-row { display: none !important; }
  .v3 .tk-exp { display: inline-flex; font-family: var(--sans); }
  /* the rooms take the main column, today's activity sits in the rail column beside them (r15: the page gets shorter) */
  .v3 .tk-rooms { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: 20px; align-items: start; }
  .v3 .tk-rooms > * { grid-column: 1; min-width: 0; }
  .v3 .tk-rooms > .today { grid-column: 2; grid-row: 1 / span 8; border-top: 0; padding-top: 0; }
  .v3 .tk-rooms .room-tabs { margin: 0; }
}
@container plate (min-width: 760px) { .v3 .of-card-l { -webkit-line-clamp: 2; } .v3 .of-card { width: 176px; } }
@media (min-width: 64em) and (min-height: 43em) { .v3 .tk-grid > .tk-rail { position: sticky; top: calc(var(--chrome-top) + 16px); } }
@media (min-width: 100em) { .v3 .tk-trio { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } .v3 .tk-trio > .tk-chart { grid-column: auto; } }