/* Layout: summary strip (counts + everything waiting on you), then a responsive grid of agent cards fed live from db `agents/*`. */
:root {
  --bg: #F7F6FB;
  --panel: #FFFFFF;
  --sunken: #EFEDF5;
  --ink: #17151F;
  --mute: #55526A;
  --faint: #6B6880; /* was #8C899C (3.40:1 on panel); >= 4.5:1 on panel / bg / sunken */
  --line: rgba(23, 21, 31, 0.09);
  --accent: #7C3AED;
  --accent-soft: #EDE4FE;
  --working: #2563EB; --working-soft: #DCE7FD;
  --review: #7C3AED;  --review-soft: #EDE4FE;
  --meeting: #BE185D; --meeting-soft: #FCE4F1;
  --needs: #B13A0A;   --needs-soft: #FFE6D8; /* ink was #C2410C (4.33:1 on soft) */
  --done: #0A7550;    --done-soft: #D7F3E7; /* ink was #0E8A5F (3.71:1 on soft) */
  --idle: #6B6880;    --idle-soft: #ECEAF2;
  --blocked: #B91C1C; --blocked-soft: #FDE2E2;
  /* office.* (REQ-28 3D building): light stage. Status dots >= 3:1 on floor and hall. */
  --office-bg: #ECE9F4; --office-floor: #DCD6EC; --office-wall: #C9C2DE; --office-wall-2: #BDB5D6;
  --office-hall: #CDC3EE; --office-trim: #7C3AED;
  --office-hud: rgba(255, 255, 255, 0.88); --office-hud-ink: #17151F; --office-line: rgba(23, 21, 31, 0.14);
  --office-status-working: #2563EB; --office-status-idle: #6B6880; --office-status-blocked: #B91C1C;
  --office-status-waiting: #B13A0A; --office-status-meeting: #BE185D; --office-status-review: #7C3AED;
  --office-status-done: #0A7550;
  /* office.celebrate.* (REQ-38 release celebration): confetti, from the brand accent bases; decoration only. */
  --office-confetti-1: #7C3AED; --office-confetti-2: #0E8A5F; --office-confetti-3: #F97257; --office-confetti-4: #C28A2B;
  /* office.* physical parts (REQ-28 28.6.4): the same in light and dark, so set once here.
     Sign = the COURT.LIVE roof letters; king = Steven's office; board = whiteboard status inks
     (light inks on a white board, >= 4.5:1). Furniture and props stay literal by design. */
  --office-sign-panel: #FFFFFF; --office-sign-letter: #17131F; --office-sign-live-panel: #7C3AED; --office-sign-live-letter: #FFFFFF;
  --office-sign-frame: #111018; --office-sign-post: #3F3A55;
  --office-king-gold: #FBBF24; --office-king-velvet: #9F1239;
  --office-board-status-working: #2563EB; --office-board-status-idle: #6B6880; --office-board-status-done: #0A7550;
  --office-board-status-blocked: #B91C1C; --office-board-status-waiting: #B13A0A; --office-board-status-meeting: #BE185D;
  --office-board-status-review: #7C3AED;
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0B13; --panel: #181520; --sunken: #110E18; --ink: #F2F0F7; --mute: #C4C1D2; --faint: #9592A6;
    --line: rgba(255,255,255,0.11); --accent: #A78BFA; --accent-soft: #2A1F45;
    --working: #7FA8FF; --working-soft: #172443; --review: #B79CFF; --review-soft: #2A1F45; --meeting: #F472B6; --meeting-soft: #3A1229;
    --needs: #FB8F5A; --needs-soft: #3A1E12; --done: #4ADE9B; --done-soft: #12322A;
    --idle: #B3B0C4; --idle-soft: #24202E; --blocked: #F87171; --blocked-soft: #3A1414;
    --office-bg: #14111E; --office-floor: #2A2440; --office-wall: #241E38; --office-wall-2: #1D1830;
    --office-hall: #3A2F63; --office-trim: #8B5CF6;
    --office-hud: rgba(20, 17, 30, 0.86); --office-hud-ink: #F2F0F7; --office-line: rgba(255, 255, 255, 0.18);
    --office-status-working: #7FA8FF; --office-status-idle: #B3B0C4; --office-status-blocked: #F87171;
    --office-status-waiting: #FB8F5A; --office-status-meeting: #F472B6; --office-status-review: #B79CFF;
    --office-status-done: #4ADE9B;
    --office-confetti-1: #C4A9F2; --office-confetti-2: #5FD3A3; --office-confetti-3: #FDB4A3; --office-confetti-4: #E6C779;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0B13; --panel: #181520; --sunken: #110E18; --ink: #F2F0F7; --mute: #C4C1D2; --faint: #9592A6;
  --line: rgba(255,255,255,0.11); --accent: #A78BFA; --accent-soft: #2A1F45;
  --working: #7FA8FF; --working-soft: #172443; --review: #B79CFF; --review-soft: #2A1F45; --meeting: #F472B6; --meeting-soft: #3A1229;
  --needs: #FB8F5A; --needs-soft: #3A1E12; --done: #4ADE9B; --done-soft: #12322A;
  --idle: #B3B0C4; --idle-soft: #24202E; --blocked: #F87171; --blocked-soft: #3A1414;
  --office-bg: #14111E; --office-floor: #2A2440; --office-wall: #241E38; --office-wall-2: #1D1830;
  --office-hall: #3A2F63; --office-trim: #8B5CF6;
  --office-hud: rgba(20, 17, 30, 0.86); --office-hud-ink: #F2F0F7; --office-line: rgba(255, 255, 255, 0.18);
  --office-status-working: #7FA8FF; --office-status-idle: #B3B0C4; --office-status-blocked: #F87171;
  --office-status-waiting: #FB8F5A; --office-status-meeting: #F472B6; --office-status-review: #B79CFF;
  --office-status-done: #4ADE9B;
  --office-confetti-1: #C4A9F2; --office-confetti-2: #5FD3A3; --office-confetti-3: #FDB4A3; --office-confetti-4: #E6C779;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; padding-block: 32px 64px; display: flex; flex-direction: column; gap: 28px; }

header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 42px); line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0 0; }
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live.on i { background: var(--done); box-shadow: 0 0 0 0 var(--done); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--done) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live.on i { animation: none; } }

.summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .summary { grid-template-columns: minmax(0, 1fr); } }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.count { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.count strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.count span { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.count span i { width: 8px; height: 8px; border-radius: 50%; }
.inbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inbox h2 { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--needs); }
.inbox ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.inbox li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.inbox li b { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.inbox .none { color: var(--mute); font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--st); }
.top { display: flex; align-items: center; gap: 12px; }
.mono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--st); background: var(--st-soft); flex: none; }
.who { flex: 1; min-width: 0; }
.who h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.who p { margin: 2px 0 0; color: var(--mute); font-size: 13px; }
.pill { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--st); background: var(--st-soft); white-space: nowrap; align-self: flex-start; }
.now { font-weight: 700; font-size: 15px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: 8px; background: var(--sunken); color: var(--mute); overflow-wrap: anywhere; }
.chip a { color: var(--accent); text-decoration: none; }
.chip a:hover { text-decoration: underline; }
.block h4 { margin: 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.block.needs h4 { color: var(--needs); }
.block ul { margin: 0; padding-left: 18px; color: var(--mute); font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.log { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.log div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--mute); }
.log time { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.foot { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.foot .session-link { color: var(--accent); font-weight: 700; text-decoration: none; padding: 6px 0; }
.foot .session-link:hover { text-decoration: underline; }
.foot .session-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.empty { background: var(--panel); border: 1px dashed var(--line); border-radius: 18px; padding: 28px; text-align: center; color: var(--mute); }

details.protocol { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
details.protocol summary { cursor: pointer; font-weight: 700; }
details.protocol summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
details.protocol p { color: var(--mute); margin: 10px 0; max-width: 72ch; }
pre { margin: 0; overflow-x: auto; background: var(--sunken); border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink); }

.st-working { --st: var(--working); --st-soft: var(--working-soft); }
.st-review  { --st: var(--review);  --st-soft: var(--review-soft); }
.st-meeting { --st: var(--meeting); --st-soft: var(--meeting-soft); }
.st-needs-you { --st: var(--needs); --st-soft: var(--needs-soft); }
.st-done    { --st: var(--done);    --st-soft: var(--done-soft); }
.st-idle    { --st: var(--idle);    --st-soft: var(--idle-soft); }
.st-blocked { --st: var(--blocked); --st-soft: var(--blocked-soft); }

/* Office: isometric scene + questions panel (goes full screen together). */
.office { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
@media (max-width: 860px) { .office { grid-template-columns: minmax(0, 1fr); } }
.office:fullscreen { background: var(--bg); padding: 16px; height: 100vh; box-sizing: border-box; grid-template-rows: minmax(0, 1fr); }
.office:-webkit-full-screen { background: var(--bg); padding: 16px; height: 100vh; box-sizing: border-box; }
.office:fullscreen .office-stage, .office:-webkit-full-screen .office-stage { height: 100%; }
.office:fullscreen .office-questions, .office:-webkit-full-screen .office-questions { max-height: none; }
.office-stage { position: relative; height: clamp(320px, 56vw, 640px); border-radius: 20px; overflow: hidden; background: var(--office-bg, #14111e); border: 1px solid var(--line); }
.office-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.office-stage canvas:active { cursor: grabbing; }
.office-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--office-hud-ink, #c4c1d2); font-size: 14px; text-align: center; padding: 24px; }

/* Office overlays: "started a new job" bubbles and the agent pop-over. */
.ofx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.office-stage canvas.over-agent { cursor: pointer; }
.obubble { position: absolute; left: 0; top: 0; max-width: 280px; padding: 7px 12px; border-radius: 14px; background: #fff; color: #17131f; border-left: 4px solid var(--c); font: 600 12.5px/1.3 var(--font-body); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform; opacity: 0; transition: opacity .35s; }
.obubble.on { opacity: 1; }
.obubble b { font-weight: 800; }
.opop { position: absolute; left: 0; top: 0; width: 300px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: #fff; color: #17131f; border-top: 5px solid var(--c); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); pointer-events: auto; font: 500 13px/1.45 var(--font-body); will-change: transform; }
.opop[hidden] { display: none; }
.opop h3 { margin: 0 24px 0 0; font: 800 19px/1.2 var(--font-display); }
.opop .role { color: #6b6880; margin: 2px 0 8px; }
.opop .st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--s) 18%, #fff); color: #17131f; font-weight: 800; font-size: 12px; }
.opop .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.opop .asleep { margin-left: 6px; font-size: 12px; color: #6b6880; }
.opop .item { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font: 800 12px/1.2 var(--font-mono); }
.opop .now { margin: 10px 0 4px; font-weight: 700; }
.opop .sec { margin-top: 10px; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #8c899c; }
.opop ul { margin: 4px 0 0; padding-left: 18px; }
.opop ul.needs li { color: #9a3412; }
.opop .ago { color: #8c899c; font-family: var(--font-mono); font-size: 11.5px; }
.opop .prs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opop .pr { padding: 2px 8px; border-radius: 8px; background: #f3f0ff; color: #6d28d9; font: 700 11.5px/1.4 var(--font-mono); }
.opop .pr.merged { background: #ede9fe; } .opop .pr.closed { background: #f4f4f5; color: #52525b; }
.opop .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #8c899c; font-size: 12px; }
.opop .open { border: 0; border-radius: 999px; padding: 6px 12px; background: #17131f; color: #fff; font: 700 12px/1 var(--font-body); cursor: pointer; }
.opop .x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #8c899c; font-size: 15px; cursor: pointer; }
.opop button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

.hud-top { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.hud-live { position: relative; background: #ef4444; color: #fff; font: 800 12px/1 var(--font-mono); letter-spacing: .16em; padding: 8px 12px 8px 24px; border-radius: 999px; }
.hud-live::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fecaca; }
.hud-live.off { background: #3f3a55; color: #c4c1d2; }
.hud-live.replay { background: #f59e0b; color: #1a1020; }
.hud-btn { border: 1px solid var(--office-line, rgba(255, 255, 255, 0.22)); background: var(--office-hud, rgba(20, 17, 30, 0.82)); color: var(--office-hud-ink, #fff); font: 700 12.5px/1 var(--font-body); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.hud-btn:hover { background: rgba(60, 50, 90, 0.9); }
.hud-seg { display: inline-flex; pointer-events: auto; border: 1px solid var(--office-line, rgba(255, 255, 255, 0.22)); border-radius: 999px; overflow: hidden; background: var(--office-hud, rgba(20, 17, 30, 0.82)); }
.hud-seg button { border: 0; background: transparent; color: #c4c1d2; font: 700 12.5px/1 var(--font-body); padding: 8px 12px; cursor: pointer; }
.hud-seg button.on { background: #a78bfa; color: #17131f; }
.hud-seg button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hud-btn.on { background: #f59e0b; border-color: #f59e0b; color: #1a1020; }
.hud-btn:focus-visible, .hud-room button:focus-visible, .hud-replay :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Zoomed into a room */
.hud-room { position: absolute; top: 60px; left: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--office-hud, rgba(20, 17, 30, 0.9)); border: 2px solid var(--c); color: var(--office-hud-ink, #fff); z-index: 2; }
.hud-room[hidden] { display: none; }
.hud-room b { font: 800 14px/1 var(--font-display); white-space: nowrap; }
.hud-room button { white-space: nowrap; }
/* The whole building is tall: a taller stage on phones. */
@media (max-width: 600px) { .office-stage.building { height: clamp(480px, 140vw, 640px); } }
.hud-room button { border: 0; border-radius: 999px; min-height: 44px; padding: 0 16px; background: #fff; color: #17131f; font: 700 13px/1 var(--font-body); cursor: pointer; }
/* Replay bar */
.hud-replay { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(760px, calc(100% - 140px)); box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: rgba(20, 17, 30, 0.92); border: 1px solid rgba(245, 158, 11, 0.6); color: #fff; z-index: 2; font: 600 12.5px/1.2 var(--font-body); }
.hud-replay[hidden] { display: none; }
.hud-replay input[type=date], .hud-replay select { background: #2a2440; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 5px 6px; font: inherit; color-scheme: dark; }
.hud-replay .rp, .hud-replay .rx { border: 0; border-radius: 999px; padding: 7px 11px; background: #f59e0b; color: #1a1020; font: 800 12px/1 var(--font-body); cursor: pointer; flex: none; }
.hud-replay .rx { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rtrack { position: relative; flex: 1 1 auto; min-width: 80px; height: 26px; display: flex; align-items: center; }
.rtrack input { width: 100%; margin: 0; accent-color: #f59e0b; position: relative; z-index: 1; background: transparent; }
.rticks { position: absolute; left: 0; right: 0; top: 2px; height: 6px; pointer-events: none; }
.rticks i { position: absolute; top: 0; width: 2px; height: 6px; margin-left: -1px; background: #fcd34d; opacity: .8; }
.rtime { flex: none; font: 700 12px/1.2 var(--font-mono); color: #fde68a; font-variant-numeric: tabular-nums; min-width: 92px; }
@media (max-width: 700px) {
  .hud-replay { width: calc(100% - 20px); bottom: 62px; flex-wrap: wrap; }
  .hud-replay select { display: none; }
  .rtrack { flex-basis: 100%; order: 5; }
}
.hud-clock { background: var(--office-hud, rgba(255, 255, 255, 0.08)); color: var(--office-hud-ink, #e4e1ee); font: 700 13px/1 var(--font-mono); padding: 8px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.hud-counts { position: absolute; top: 14px; right: 14px; display: flex; border: 1px solid var(--office-line, rgba(255, 255, 255, 0.14)); border-radius: 14px; overflow: hidden; background: var(--office-hud, rgba(20, 17, 30, 0.72)); color: var(--office-hud-ink, #fff); pointer-events: none; }
.hud-count { padding: 8px 14px; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hud-count:first-child { border-left: 0; }
.hud-count .n { font: 800 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.hud-count.work .n { color: var(--office-status-working, #22c55e); } .hud-count.moving .n { color: var(--office-status-waiting, #fb923c); } .hud-count.resting .n { color: var(--office-status-review, #a78bfa); }
.hud-count .l { font: 700 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--office-hud-ink, #c4c1d2); opacity: .8; margin-top: 5px; }
.hud-hint { position: absolute; left: 14px; bottom: 14px; color: var(--office-hud-ink, #a8a3b8); opacity: .75; font: 500 12.5px/1.3 var(--font-body); pointer-events: none; }
.hud-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.hud-zoom button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--office-line, rgba(255, 255, 255, 0.22)); background: var(--office-hud, rgba(20, 17, 30, 0.82)); color: var(--office-hud-ink, #fff); font: 700 18px/1 var(--font-body); cursor: pointer; }
.hud-zoom button:hover { background: rgba(60, 50, 90, 0.9); }
.hud-zoom button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  .hud-hint { display: none; }
  .hud-count { padding: 6px 9px; } .hud-count .n { font-size: 17px; } .hud-count .l { font-size: 8px; }
  .obubble { max-width: 200px; font-size: 11.5px; }
}

.office-questions { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: clamp(320px, 56vw, 640px); overflow: auto; min-width: 0; }
.qhead { font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--needs); }
.qnone { margin: 0; color: var(--mute); font-size: 14px; }
.qitem { display: flex; gap: 10px; align-items: flex-start; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.qitem:focus-visible .qbubble { outline: 2px solid var(--accent); outline-offset: 2px; }
.qav { width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); background: #1f1a2e; }
.qcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qwho { font: 700 11.5px/1.2 var(--font-mono); color: var(--mute); }
.qbubble { position: relative; background: var(--sunken); border: 1.5px solid var(--c); border-radius: 4px 14px 14px 14px; padding: 8px 11px; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.qbubble::before { content: ""; position: absolute; left: -7px; top: 8px; border: 6px solid transparent; border-right-color: var(--c); border-left: 0; }

.card.flash { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .3s; }
.counts { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1000px) { .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.with { font-size: 13px; color: var(--meeting); font-weight: 700; }
@media (max-width: 760px) { .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Sign-in gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { max-width: 420px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.gate-card h1 { font-size: 32px; }
.gate-card p { margin: 0; color: var(--mute); }
.btn { font: 700 15px/1 var(--font-body); border: 0; border-radius: 12px; padding: 14px 18px; background: var(--accent); color: #fff; cursor: pointer; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--mute); border: 1px solid var(--line); padding: 8px 12px; font-size: 13px; }
.err { color: var(--blocked); font-size: 14px; }
.userbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }

[hidden] { display: none !important; }

/* System settings */
.settings-block { display: flex; flex-direction: column; gap: 10px; }
.settings-block h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 0; }
.settings-block .sub { color: var(--mute); margin: 0; max-width: 70ch; }
.people { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.people-empty { padding: 16px; color: var(--mute); font-size: 14px; }
.person { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.person:first-child { border-top: 0; }
.person.declined { opacity: 0.7; }
.person-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 800 16px/1 var(--font-display); overflow: hidden; flex: none; }
.person-av img { width: 100%; height: 100%; object-fit: cover; }
.person-who { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.person-who b { font-size: 15px; overflow-wrap: anywhere; }
.person-who span { font-family: var(--font-mono); font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.person-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.person-act .btn { padding: 9px 14px; font-size: 13px; }
.btn.danger { color: var(--blocked); border-color: color-mix(in srgb, var(--blocked) 40%, transparent); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.role-select { font: 600 13px/1 var(--font-body); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.role-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
#settingsView .wrap { gap: 24px; }
.gate-card .btn.ghost { align-self: flex-start; }
.gate-card .back { font-size: 14px; }
.gate-card .back a { color: var(--mute); text-decoration: none; }
.gate-card .back a:hover { color: var(--ink); }

/* Teams: one section of cards per team, and a room tag in the office. */
.teams { display: flex; flex-direction: column; gap: 28px; }
.team { display: flex; flex-direction: column; gap: 12px; }
.team-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--tc) 55%, transparent); }
.team-head i { width: 12px; height: 12px; border-radius: 4px; background: var(--tc); align-self: center; flex: none; }
.team-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.team-focus { color: var(--mute); font-size: 14px; }
.team-n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
@media (max-width: 400px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.team .empty { padding: 18px; font-size: 14px; }


/* System settings → Teams */
.settings-sub { margin: 8px 0 0; font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.team-row { border-left: 4px solid var(--tc); }
.field { font: 600 14px/1.2 var(--font-body); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-width: 0; flex: 1 1 160px; }
.field:focus-visible, .swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch { width: 38px; height: 38px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; flex: none; }

/* Agent avatars */
.card .avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--st); background: var(--st-soft); }
.opop .phead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.opop .phead .pav { width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--c); }
.opop .phead .role { margin: 2px 0 0; }

/* Shipped stories (top of the page) */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.story .ring { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 3px; box-sizing: border-box; background: conic-gradient(from 200deg, #facc15, #f97316, #ec4899, #8b5cf6, #facc15); display: grid; place-items: center; }
.story .ring img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); box-sizing: border-box; background: var(--panel); }
.story.seen .ring { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.story-item { font: 800 12px/1.1 var(--font-mono); max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-who { font: 600 11px/1.1 var(--font-body); color: var(--mute); }
.story:focus-visible .ring { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-none { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 14px; }
.story-none .ring.empty { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); display: grid; place-items: center; font-size: 22px; flex: none; }
body.story-open { overflow: hidden; }
.story-viewer { position: fixed; inset: 0; z-index: 50; background: rgba(8, 6, 14, 0.92); display: grid; place-items: center; padding: 16px; }
.story-viewer[hidden] { display: none; }
.sv-card { position: relative; width: min(400px, 100%); height: min(711px, calc(100vh - 32px)); border-radius: 18px; overflow: hidden; color: #fff; background: radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--c) 75%, #fff 0%), color-mix(in srgb, var(--c) 35%, #0b0814) 70%, #0b0814); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); user-select: none; cursor: pointer; display: flex; flex-direction: column; }
.sv-bars { display: flex; gap: 4px; padding: 10px 10px 0; }
.sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.sv-bars span i { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars span.done i { width: 100%; }
.sv-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.sv-head img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.sv-head b { display: block; font: 800 14px/1.2 var(--font-body); }
.sv-head span { font: 600 12px/1.2 var(--font-body); opacity: .8; }
.sv-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 16px; cursor: pointer; }
.sv-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px 24px 34px; text-align: center; }
.sv-avatar { width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 12px 30px rgba(0, 0, 0, 0.35); background: #fff; }
.sv-pkg { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: #c8955a; color: #3b1d0b; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15); }
.sv-box { font-size: 28px; }
.sv-id { font: 800 26px/1 var(--font-mono); }
.sv-stamp { transform: rotate(-8deg); border: 3px solid #4ade80; color: #4ade80; font: 900 22px/1 var(--font-display); letter-spacing: .14em; padding: 6px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.sv-text { margin: 0; font: 700 17px/1.4 var(--font-body); max-width: 320px; }
.sv-role { margin: 0; font: 600 13px/1.3 var(--font-body); opacity: .8; }
.sv-link { color: #fff; font: 800 14px/1 var(--font-body); padding: 9px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); text-decoration: none; }
.sv-link:focus-visible, .sv-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story-n { position: absolute; right: -2px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #ec4899; color: #fff; border: 2px solid var(--bg); font: 800 11px/18px var(--font-mono); text-align: center; }

/* View switch + Replay: a bar above the office, in the page's theme. */
.office-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: -14px; }
.office-bar .hud-seg { border-color: var(--line); background: var(--panel); }
.office-bar .hud-seg button { color: var(--mute); padding: 10px 16px; font-size: 14px; }
.office-bar .hud-seg button.on { background: var(--accent); color: var(--panel); }
.office-bar .hud-btn { border-color: var(--line); background: var(--panel); color: var(--ink); padding: 10px 16px; font-size: 14px; }
.office-bar .hud-btn:hover { background: var(--accent-soft); }
.office-bar .hud-btn.on { background: #f59e0b; border-color: #f59e0b; color: #1a1020; }
.office-bar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* REQ-28: the floor switch (Building · Rooftop · L3 · L2 · L1 · B1), office layout only. Controls are 44 px. */
.office-bar .hud-seg button, .office-bar .hud-btn { min-height: 44px; }
.office-bar .floor-seg[hidden] { display: none; }
.office-bar .floor-seg button { padding: 10px 14px; }
@media (max-width: 600px) { .office-bar .floor-seg button { padding: 10px 11px; font-size: 13px; min-width: 44px; } }
@media (max-width: 600px) {
  .wrap { padding-inline: 16px; }
  .hud-top { gap: 6px; }
  .hud-counts { top: auto; bottom: 60px; right: 10px; }
}

/* Back office navigation: Dashboard · Project plan · System settings */
:root { --qa: #0369A1; --qa-soft: #E0F2FE; --staging: #4338CA; --staging-soft: #E0E7FF; --release: #8A6212; --release-soft: #FBF1D6; --app: #7C3AED; --app-soft: #EDE4FE; --web: #0F766E; --web-soft: #CCF3EC; --both: #55526A; --both-soft: #ECEAF2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --qa: #7DD3FC; --qa-soft: #0C2A3D; --staging: #A5B4FC; --staging-soft: #1E1B4B; --release: #E6C779; --release-soft: #33270D; --app: #B79CFF; --app-soft: #2A1F45; --web: #4FD1C1; --web-soft: #0F2E2B; --both: #C4C1D2; --both-soft: #24202E; } }
:root[data-theme="dark"] { --qa: #7DD3FC; --qa-soft: #0C2A3D; --staging: #A5B4FC; --staging-soft: #1E1B4B; --release: #E6C779; --release-soft: #33270D; --app: #B79CFF; --app-soft: #2A1F45; --web: #4FD1C1; --web-soft: #0F2E2B; --both: #C4C1D2; --both-soft: #24202E; }
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topnav-in { max-width: 1120px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.topnav .brand { text-decoration: none; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sunken); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tab { flex: none; padding: 8px 14px; border-radius: 10px; color: var(--mute); font: 700 14px/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topnav .userbar { margin-left: auto; }
@media (max-width: 600px) {
  .topnav-in { padding: 8px 16px; }
  .topnav .brand { display: none; }
  .tabs { order: 2; flex: 1 1 100%; }
  .tab { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: 13px; }
  .topnav .userbar { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Project plan */
.plan section { display: flex; flex-direction: column; gap: 12px; }
.plan-lede { margin: -8px 0 0; color: var(--mute); max-width: 75ch; }
.plan-h { margin: 0; font: 800 24px/1.15 var(--font-display); }
.plan .sub { margin: 0; color: var(--mute); font-size: 14px; max-width: 75ch; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sunken); max-width: 100%; overflow-x: auto; }
.seg button { flex: none; border: 0; background: transparent; color: var(--mute); padding: 8px 12px; border-radius: 10px; font: 700 13.5px/1 var(--font-body); cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-app { --t: var(--app); --t-soft: var(--app-soft); }
.t-website { --t: var(--web); --t-soft: var(--web-soft); }
.t-both { --t: var(--both); --t-soft: var(--both-soft); }
.pill-t, .pill-s { font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.pill-t { color: var(--t); background: var(--t-soft); }
.pill-s { color: var(--mute); background: var(--sunken); }
.pill-s.s-done { color: var(--done); background: var(--done-soft); }
.pill-s.s-doing { color: var(--working); background: var(--working-soft); }
.pill-s.s-review { color: var(--review); background: var(--review-soft); }
.dim { opacity: .45; }

.tracks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; }
@media (max-width: 900px) { .tracks { grid-template-columns: minmax(0, 1fr); } }
.track { background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--t); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tr-app { --t: var(--app); --t-soft: var(--app-soft); } .tr-website { --t: var(--web); --t-soft: var(--web-soft); } .tr-both { --t: var(--both); --t-soft: var(--both-soft); }
.track-tag { align-self: flex-start; font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t); background: var(--t-soft); padding: 5px 9px; border-radius: 999px; }
.track h3 { margin: 0; font: 800 22px/1.1 var(--font-display); }
.track p { margin: 0; color: var(--mute); font-size: 14px; }
.track .warn { color: var(--needs); font-weight: 700; }
.products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.products li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--sunken); font-weight: 700; font-size: 14px; }
.products li b { font: 700 12px/1.6 var(--font-mono); color: var(--t); }
.track-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--mute); }
.track-nums strong { font: 800 18px/1 var(--font-mono); color: var(--ink); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--mute); }
.lg::before { content: ""; display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.lg.app { --c: var(--app); } .lg.website { --c: var(--web); } .lg.both { --c: var(--both); }
.lg.both::before { background: repeating-linear-gradient(90deg, var(--both) 0 5px, transparent 5px 9px); }
.map-scroll { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.map { min-width: 680px; }
.map svg { display: block; width: 100%; height: auto; }
.map .lane { fill: var(--sunken); opacity: .7; }
.map .lane-app { fill: var(--app-soft); } .map .lane-website { fill: var(--web-soft); }
.map .lane-name { font: 700 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--faint); }
.map .edge { fill: none; stroke-width: 2.5; transition: opacity .2s; }
.map .e-app { stroke: var(--app); } .map .e-website { stroke: var(--web); } .map .e-both { stroke: var(--both); stroke-dasharray: 6 5; }
.map .mk-app { fill: var(--app); } .map .mk-website { fill: var(--web); } .map .mk-both { fill: var(--both); }
.map .off { opacity: .14; }
.map .node { cursor: pointer; transition: opacity .2s; }
.map .node-box { fill: var(--panel); stroke-width: 2; }
.map .node.sel .node-box { stroke-width: 4; }
.map .node:focus-visible { outline: none; } .map .node:focus-visible .node-box { stroke-width: 4; stroke-dasharray: 4 3; }
.map .node-name { font: 800 16px var(--font-display); fill: var(--ink); }
.map .node-focus { font: 600 12px var(--font-body); fill: var(--mute); }
.map .sd { stroke: var(--panel); stroke-width: 2; fill: var(--idle); }
.map .sd-working { fill: var(--working); } .map .sd-review { fill: var(--review); } .map .sd-meeting { fill: var(--meeting); } .map .sd-needs-you { fill: var(--needs); } .map .sd-done { fill: var(--done); } .map .sd-blocked { fill: var(--blocked); }
.map .badge { cursor: pointer; }
.map .badge circle { fill: var(--panel); stroke-width: 2.5; }
.map .b-app circle { stroke: var(--app); } .map .b-website circle { stroke: var(--web); } .map .b-both circle { stroke: var(--both); }
.map .badge text { font: 800 12px var(--font-mono); fill: var(--ink); }
.map .badge:focus-visible { outline: none; } .map .badge:focus-visible circle { stroke-width: 4; }
.handoffs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.ho { overflow-wrap: anywhere; }
.ho { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--t); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: opacity .2s; }
.ho.off { opacity: .4; }
.ho.sel { box-shadow: 0 0 0 2px var(--t); }
.ho-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
div.ho-head { cursor: default; }
.ho-head b { flex: 1; min-width: 0; font-size: 14px; }
.ho-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ho-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--t); font: 800 11px/1 var(--font-mono); }
.ho ul { margin: 0; padding: 0 0 0 32px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ho ul li { display: flex; flex-direction: column; }
.ho-who { font: 600 11.5px/1.4 var(--font-mono); color: var(--faint); }

.plan-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 400px) { .plan-teams { grid-template-columns: minmax(0, 1fr); } }
.pteam { background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--tc); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pteam-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pteam-head h3 { margin: 0; font: 800 20px/1.15 var(--font-display); }
.crew { display: flex; flex-wrap: wrap; gap: 6px; }
.mate { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--sunken); font-size: 13px; font-weight: 700; }
.mate img { border-radius: 50%; }
.sd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--idle)); }
.dls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dl { border-left: 3px solid var(--t); padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 4px; }
.dl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-head b { font-size: 14.5px; margin-right: 2px; }
.dl p { margin: 0; color: var(--mute); font-size: 13.5px; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 6px; font: 600 11.5px/1.4 var(--font-mono); color: var(--faint); }
.dl-meta .owners { color: var(--mute); }
.dl-meta .ref { color: var(--accent); text-decoration: none; }
.dl-meta a.ref:hover { text-decoration: underline; }
.dl-none { color: var(--mute); font-size: 13.5px; }

.road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .road { grid-template-columns: minmax(0, 1fr); } }
.road-col { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px !important; min-width: 0; }
.road-col h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; font: 800 18px/1.1 var(--font-display); }
.road-n { font: 700 12px/1 var(--font-mono); color: var(--faint); }
.road-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.road-item { border-left: 3px solid var(--t); background: var(--sunken); border-radius: 4px 10px 10px 4px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; }
.road-item b { font-size: 13.5px; }
.road-item span { font-size: 12px; color: var(--mute); }
.ph-shipped h3 { color: var(--done); }
.plan-q { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.plan-q .q-team, .plan-q .q-owner { color: var(--needs); font-weight: 700; }
.map .edge.quiet { stroke-width: 1.3; stroke-dasharray: 2 4; opacity: .55; }
.map .edge.quiet.off { opacity: .08; }
.ho-n.ho-thin { border-style: dotted; }
/* Phone widths: the live label stays on one line; long code paths wrap. */
#liveText { white-space: nowrap; }
details.protocol code { overflow-wrap: anywhere; }
.tab-short { display: none; }
/* Five tabs: above phone width the signed-in email moves into the Sign out
   button's tooltip so the bar stays on one line. */
@media (min-width: 601px) { .topnav #who { display: none; } }
/* Five tabs with long labels need about 560 px; below that, the short ones. */
@media (max-width: 560px) { .tab-long { display: none; } .tab-short { display: inline; } }
/* Plan filter: short labels on the narrowest phones. */
.lbl-short { display: none; }
@media (max-width: 359px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
@media (max-width: 420px) { .tab { padding: 9px 6px; } .tabs { gap: 2px; } .tab-badge { margin-left: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; } }
@media (max-width: 360px) { .tab { padding: 9px 6px; font-size: 12.5px; } .tabs { gap: 2px; padding: 3px; } }

/* Questions panel: a timeline, oldest question first */
.qtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.qseg button { border: 0; background: transparent; color: var(--mute); padding: 5px 9px; border-radius: 8px; font: 700 12px/1 var(--font-body); cursor: pointer; }
.qseg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.qseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qsum { margin: -4px 0 0; font: 600 12px/1.4 var(--font-mono); color: var(--faint); }
.qline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.qline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); border-radius: 1px; }
.qday { position: relative; padding-left: 20px; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.qday::before { content: ""; position: absolute; left: 1px; top: 2px; width: 10px; height: 10px; border-radius: 3px; background: var(--faint); }
.qday:not(:first-child) { margin-top: 4px; }
.qrow { position: relative; padding-left: 20px; }
.qrow::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 3px solid var(--c); box-sizing: border-box; }
.qrow.answered::before { background: var(--c); opacity: .55; }
.qrow .qav { width: 32px; height: 32px; }
.qmeta { font: 600 11.5px/1.3 var(--font-mono); color: var(--faint); }
.qmeta time { color: var(--mute); font-weight: 700; }
.qmeta.long { color: var(--needs); }
.qrow.answered .qbubble { background: transparent; border-style: dashed; color: var(--mute); }
.qrow.answered .qbubble::before { display: none; }
.qrow.answered .qav { opacity: .6; }
.qrow.answered .qmeta { color: var(--done); }

/* Requirements (#requirements): board, table, detail panel, new form */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-draft { --st: var(--idle); --st-soft: var(--idle-soft); }
.rs-to-review { --st: var(--review); --st-soft: var(--review-soft); }
.rs-ready { --st: var(--web); --st-soft: var(--web-soft); }
.rs-in-development { --st: var(--working); --st-soft: var(--working-soft); }
.rs-closed { --st: var(--done); --st-soft: var(--done-soft); }
/* REQ-46: In QA, Ready for staging, Ready for release (ink on soft >= 4.5:1, light and dark). */
.rs-in-qa { --st: var(--qa); --st-soft: var(--qa-soft); }
.rs-ready-for-staging { --st: var(--staging); --st-soft: var(--staging-soft); }
.rs-ready-for-release { --st: var(--release); --st-soft: var(--release-soft); }
.rs-to-approve { --st: var(--needs); --st-soft: var(--needs-soft); }
.rs-waiting { --st: var(--meeting); --st-soft: var(--meeting-soft); }
.rq-waiting { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--meeting); }
.rq-assign { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--mute); }
.rq-assign select { max-width: 100%; }
.rs-blocked { --st: var(--blocked); --st-soft: var(--blocked-soft); }
/* Rejected is done with, so grey; red now means Blocked. */
.rs-rejected { --st: var(--idle); --st-soft: var(--idle-soft); }
/* Swimlanes by epic: a row of status columns per epic. */
.rq-board.rq-lanes { display: flex; flex-direction: column; align-items: stretch; gap: 18px; overflow: visible; }
.rq-lane { border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: var(--panel); min-width: 0; }
.rq-lane.done { opacity: .75; }
.rq-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.rq-lane-head h2 { font: 800 18px/1.2 var(--font-display); margin: 0; flex: 1 1 auto; min-width: 0; }
.rq-lane-meta { color: var(--mute); font-size: 13px; }
.rq-lane-bar { flex: 0 0 120px; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.rq-lane-bar i { display: block; height: 100%; background: var(--done); }
.rq-lane > .rq-blurb { margin: 0 0 10px; }
/* In a swimlane the status columns wrap instead of scrolling sideways, so
   every requirement in the lane is on screen; empty statuses shrink to a
   small box (still a drop target). Phones stack the columns anyway. */
@media (min-width: 761px) {
  .rq-board.rq-lane-row { display: flex; flex-wrap: wrap; align-items: flex-start; overflow-x: visible; }
  .rq-board.rq-lane-row > .rq-col { flex: 1 1 240px; min-width: 240px; max-width: 100%; }
  .rq-board.rq-lane-row > .rq-col.empty { flex: 0 1 150px; min-width: 150px; }
}
.rq-lane-row .rq-col.empty .rq-blurb { display: none; }
.rq-lane-row .rq-col.empty .rq-empty { font-size: 12px; margin: 0; }
.rq-head-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rq-head-act .btn { padding: 11px 16px; font-size: 14px; }
.rq-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.rq-search { flex: 1 1 260px; display: flex; min-width: 0; }
.rq-search .field { width: 100%; }
.rq-filter-sel { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rq-sel { display: flex; flex-direction: column; gap: 3px; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); min-width: 0; }
.rq-sel select { max-width: 180px; }
.rq-count { margin: -14px 0 -10px; font: 600 12px/1.4 var(--font-mono); color: var(--faint); }
.rq-pill { display: inline-flex; align-items: center; font: 700 10.5px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; color: var(--mute); background: var(--sunken); }
.rq-pill.rs { color: var(--st); background: var(--st-soft); }
.pr-must { color: var(--blocked); background: var(--blocked-soft); }
.pr-should { color: var(--needs); background: var(--needs-soft); }
.pr-could { color: var(--working); background: var(--working-soft); }
.pr-wont { color: var(--idle); background: var(--idle-soft); }
.rq-q { color: var(--panel); background: var(--needs); }
.rq-cm { color: var(--review); background: var(--review-soft); }
.ck { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ck-ok { color: var(--done); background: var(--done-soft); }
.ck-questions, .ck-changes { color: var(--needs); background: var(--needs-soft); }
.rq-id { font: 800 12px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.rq-none { font-size: 12px; color: var(--faint); }

/* Board: columns scroll sideways inside their own box; stacked on phones. */
.rq-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; scrollbar-width: thin; }
.rq-col { background: var(--sunken); border: 1px solid var(--line); border-top: 4px solid var(--st); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rq-col.collapsed { opacity: .85; }
.rq-col-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.rq-col-head b { font: 800 16px/1.2 var(--font-display); flex: 1; min-width: 0; }
.rq-col-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rq-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex: none; }
.rq-n { font: 700 12px/1 var(--font-mono); color: var(--mute); background: var(--panel); padding: 4px 7px; border-radius: 999px; }
.rq-chev { color: var(--faint); font-size: 12px; }
.rq-blurb { margin: -2px 0 0; font-size: 12.5px; color: var(--mute); }
.rq-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; border-radius: 12px; }
.rq-col-body.drop-end { box-shadow: inset 0 -3px 0 var(--accent); }
.rq-empty { margin: 0; color: var(--mute); font-size: 13.5px; padding: 6px 4px; }
.rq-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--st); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; cursor: pointer; }
.rq-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); border-left-color: var(--st); }
.rq-card[draggable="true"] { cursor: grab; }
.rq-card.dragging, tr.dragging { opacity: .45; }
.rq-card.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.rq-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rq-title { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.rq-title:hover { text-decoration: underline; }
.rq-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rq-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.rq-meta .chip { font-size: 11px; padding: 2px 7px; }
.rq-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.rq-owners { display: inline-flex; align-items: center; }
.rq-owners img { border-radius: 50%; border: 2px solid var(--panel); margin-left: -6px; background: var(--sunken); }
.rq-owners img:first-child { margin-left: 0; }
.rq-checks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rq-rank { margin-left: auto; display: inline-flex; gap: 4px; }
.btn.icon { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; font-size: 11px; border-radius: 8px; }
.btn.ghost.icon:hover:not(:disabled) { color: var(--ink); background: var(--accent-soft); }
.btn.ghost:disabled { opacity: .35; cursor: default; }

/* Table: scrolls inside its own box on narrow screens. */
.rq-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.rq-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 920px; }
.rq-tbl th { text-align: left; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rq-tbl td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.rq-tbl tr[draggable="true"] { cursor: grab; }
.rq-tbl tr.drop-before td { box-shadow: inset 0 3px 0 var(--accent); }
.rq-tbl tbody.drop-end tr:last-child td { box-shadow: inset 0 -3px 0 var(--accent); }
.rq-tbl td.num { font: 700 12px/1 var(--font-mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.rq-tbl td.tt { min-width: 220px; }
.rq-tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

/* Detail panel and the new-requirement form: a drawer on the right, full screen on phones. */
body.rq-modal { overflow: hidden; }
.rq-panel { margin: 0 0 0 auto; padding: 0; width: min(680px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--ink); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25); }
.rq-panel[open] { display: flex; flex-direction: column; }
.rq-panel::backdrop { background: rgba(8, 6, 14, 0.5); }
.rq-panel > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.rq-phead { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 16px 60px 14px 20px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.rq-phead h2 { margin: 0; font: 800 22px/1.2 var(--font-display); overflow-wrap: anywhere; }
.rq-pline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rq-edit { margin-left: auto; padding: 6px 14px; font-size: 13px; }
.rq-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; font-size: 15px; }
.rq-pbody { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.rq-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rq-sec h3 { margin: 0; font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rq-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-moves { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.rq-note { flex: none; width: 100%; resize: vertical; font-weight: 500; }
.rq-move-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-move-btns .btn { padding: 10px 14px; font-size: 13.5px; }
.btn.ghost.warn { color: var(--needs); border-color: color-mix(in srgb, var(--needs) 45%, transparent); }
.rq-confirm { border-radius: 12px; padding: 12px; background: var(--needs-soft); color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.rq-confirm ul, .rq-gate ul { margin: 0; padding-left: 20px; }
.rq-confirm p { margin: 0; }
.rq-gate { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.rq-gate.ok { background: var(--done-soft); color: var(--done); }
.rq-gate.gaps { background: var(--needs-soft); color: var(--ink); }
.rq-gate.gaps b { color: var(--needs); }
.rq-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rq-dl dt { font: 700 10.5px/1.9 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rq-dl dd { margin: 0; overflow-wrap: anywhere; }
.rq-owner-list, .rq-links { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-links .ref { font: 700 12.5px/1.6 var(--font-mono); color: var(--accent); }
.rq-proto figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.rq-proto img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.rq-proto figcaption a { color: var(--accent); overflow-wrap: anywhere; font-size: 13.5px; }
.rq-story { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rq-story-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rq-by { font: 600 11.5px/1.3 var(--font-mono); color: var(--faint); }
.rq-story h4 { margin: 4px 0 0; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.rq-story ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.rq-story .warn { margin: 0; color: var(--needs); font-weight: 700; font-size: 13.5px; }
.rq-comments, .rq-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rq-replies { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line); }
.rq-c { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.rq-replies .rq-c { background: var(--sunken); }
.rq-c.open { border-color: color-mix(in srgb, var(--needs) 55%, transparent); }
.rq-c-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.rq-c-h b { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.rq-c-h time { font: 600 11.5px/1 var(--font-mono); color: var(--faint); }
.kind.k-question { color: var(--review); background: var(--review-soft); }
.kind.k-answer { color: var(--done); background: var(--done-soft); }
.kind.k-ux { color: var(--meeting); background: var(--meeting-soft); }
.qs.open { color: var(--needs); background: var(--needs-soft); }
.qs.done { color: var(--done); background: var(--done-soft); }
.qs.wait { color: var(--review); background: var(--review-soft); }
.kind.k-comment { color: var(--accent); background: var(--accent-soft); }
.rq-sthread { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.rq-sthread .rq-c { background: var(--sunken); }
.rq-sthread .rq-cform { margin-top: 0; }
.rq-cbtn { padding: 7px 12px; font-size: 13px; }
.rq-answer, .rq-cform { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rq-answer textarea, .rq-cform textarea { flex: 1 1 220px; resize: vertical; font-weight: 500; }
.rq-answer .btn, .rq-cform .btn { padding: 10px 16px; font-size: 13.5px; }
.rq-answer .err, .rq-cform .err { flex-basis: 100%; margin: 0; }
details.rq-notes summary { cursor: pointer; font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
details.rq-notes pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; }
.rq-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.rq-hist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 10px; }
.rq-hist time { font: 600 11.5px/1.6 var(--font-mono); color: var(--faint); }
.rq-hnote { grid-column: 2; color: var(--mute); font-style: italic; overflow-wrap: anywhere; }
.rq-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-content: start; }
.rq-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rq-f > label { font: 700 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.rq-f .field { flex: none; width: 100%; font-weight: 500; }
.rq-f textarea.field { resize: vertical; }
.rq-f-title, .rq-f-why, .rq-f-what, .rq-f-prototype, .rq-f-devices, .rq-f-owners, .rq-formerr { grid-column: 1 / -1; }
.rq-f [aria-invalid="true"] { border-color: var(--blocked); box-shadow: 0 0 0 1px var(--blocked); }
.rq-hint { margin: 0; font-size: 12.5px; color: var(--faint); }
.rq-ferr { margin: 0; font-size: 13px; font-weight: 700; color: var(--blocked); }
.rq-boxes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 10px; }
.rq-box { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rq-box:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.rq-box input { accent-color: var(--accent); margin: 0; }
.rq-ffoot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.rq-ffoot .rq-hint { margin-right: auto; }
.rq-ffoot .btn { padding: 11px 16px; font-size: 14px; }

@media (max-width: 760px) {
  .rq-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .rq-filter-sel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .rq-sel select { max-width: none; width: 100%; }
  .rq-head-act { width: 100%; justify-content: space-between; }
  .rq-panel { width: 100vw; border-left: 0; }
  .rq-phead { padding: 14px 56px 12px 16px; }
  .rq-pbody { padding: 14px 16px 32px; }
  .rq-fgrid { grid-template-columns: minmax(0, 1fr); }
  .rq-hist li { grid-template-columns: minmax(0, 1fr); }
  .rq-hnote { grid-column: 1; }
  .rq-ffoot { padding: 10px 16px; }
}

/* Social (#social): one card per proposal, EN and NL side by side; on a
   phone the languages are tabs. */
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--needs); color: #fff; font: 700 11px/1 var(--font-mono); vertical-align: 1px; }
.tab-badge[hidden] { display: none; }
.so-list { display: flex; flex-direction: column; gap: 16px; }
.so-card { --st: var(--needs); --st-soft: var(--needs-soft); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--st); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.so-card.ss-posted { --st: var(--done); --st-soft: var(--done-soft); }
.so-card.ss-rejected { --st: var(--blocked); --st-soft: var(--blocked-soft); }
.so-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.so-title { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 800 20px/1.15 var(--font-display); }
.so-ch { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: var(--sunken); color: var(--ink); }
.so-meta { margin: -6px 0 0; color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.so-meta a, .so-decision a { color: var(--accent); }
.so-langtabs { display: none; align-self: flex-start; }
.so-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.so-lang { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.so-lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.so-lhead h3 { margin: 0; font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.so-count { font: 600 12px/1 var(--font-mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.so-count.over { color: var(--blocked); font-weight: 700; }
.so-img { border-radius: 12px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); min-height: 80px; display: grid; place-items: center; }
.so-img img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.so-noimg { color: var(--faint); font-size: 13px; padding: 24px; }
.so-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; background: var(--sunken); border-radius: 12px; padding: 12px 14px; }
.so-edit { width: 100%; flex: none; resize: vertical; font: 500 14px/1.55 var(--font-body); }
.so-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.so-btns .btn { padding: 10px 14px; font-size: 13.5px; }
.so-btns .btn.ghost { padding: 9px 12px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn.danger-solid { background: var(--blocked); }
.so-decisions { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.so-decision { margin: 0; font-size: 13.5px; color: var(--mute); overflow-wrap: anywhere; }
.so-act { display: flex; flex-direction: column; gap: 10px; }
.so-form { display: flex; flex-direction: column; gap: 5px; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.so-form .field { width: 100%; flex: none; font-family: var(--font-body); letter-spacing: 0; text-transform: none; resize: vertical; }
@media (max-width: 760px) {
  .so-card { padding: 14px; }
  .so-langtabs { display: inline-flex; }
  .so-langs { grid-template-columns: minmax(0, 1fr); }
  .so-lang:not(.on) { display: none; }
  .so-filter-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Your office (REQ-21): the waiting room as a queue, in the side panel. */
.mo-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 20px; }
.mo-head h2 { margin: 4px 0 0; font: 800 26px/1.1 var(--font-display); }
.mo-body { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.mo-sec { display: flex; flex-direction: column; gap: 10px; }
.mo-sec h3 { margin: 0; font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.mo-empty { margin: 0; color: var(--mute); font-size: 14px; }
.mo-row { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--needs); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mo-row.in { border-left-color: #f59e0b; box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 35%, transparent); }
.mo-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mo-av { width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--sunken); }
.mo-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mo-who b { font: 800 17px/1.15 var(--font-display); }
.mo-who span { color: var(--mute); font-size: 12.5px; overflow-wrap: anywhere; }
.mo-wait { font: 600 11.5px/1 var(--font-mono); color: var(--mute); white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: var(--sunken); }
.mo-wait.long { color: var(--needs); background: var(--needs-soft); }
.mo-qs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.mo-noq, .mo-now, .mo-by { margin: 0; font-size: 13.5px; color: var(--mute); overflow-wrap: anywhere; }
.mo-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.mo-ago { font: 600 11px/1 var(--font-mono); color: var(--faint); }
.mo-nosession { font-size: 12.5px; color: var(--faint); }
.mo-act .btn { padding: 10px 14px; font-size: 13.5px; }
.mo-act .btn.ghost { padding: 9px 12px; }
.office-bar .my-office-btn { border-color: color-mix(in srgb, #f59e0b 55%, var(--line)); }

/* REQ-28 LED walls: six columns (shape, number, label). Waiting has its
   own column in the "needs" colour and is never counted under blocked. */
.led { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button.led { cursor: pointer; }
.led-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.led-live { color: var(--done); }
.led-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.led-c { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.led-c i { font-style: normal; font-size: 11px; line-height: 1; }
.led-c b { font: 800 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.led-c span { font: 700 9px/1.15 var(--font-mono); letter-spacing: .08em; text-align: center; }
.led .sh, .led.short .lg { display: none; }
.led.short .sh { display: inline; }
.c-working i { color: var(--working); } .c-idle i { color: var(--idle); } .c-blocked i { color: var(--blocked); }
.c-waiting i, .c-waiting b { color: var(--needs); } .c-meeting i { color: var(--meeting); }
.led-w { margin-top: 8px; font: 800 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--needs); }
.led-w[hidden] { display: none; }
.led-tot { margin-top: 4px; font: 700 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
/* The building wall, in the bar above the office (page theme). */
.office-bar .led-strip { flex: 1 1 100%; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.led-strip[hidden], .led-cards[hidden], .led-layer[hidden], .led-this-wrap[hidden] { display: none; }
.led-below { display: grid; gap: 8px; min-width: 0; }
.led-below[hidden] { display: none; }
.led-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.led-cards .led, .led-below .led-this-wrap .led { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.led-below .led-this-wrap .led { --working: inherit; --idle: inherit; --blocked: inherit; --needs: inherit; --meeting: inherit; --done: inherit; --mute: inherit; }
.led-cards .led-c b { font-size: 19px; }
.led-below button.led:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.office-bar .led-strip .led-cols { max-width: 760px; }
/* Beside each floor (building view) and "this floor" (floor view): on the dark stage. */
.led-layer { position: absolute; top: 0; right: 14px; width: 270px; pointer-events: none; z-index: 1; }
.led-layer .led, .led-this-wrap .led { --working: var(--office-status-working); --idle: var(--office-status-idle); --blocked: var(--office-status-blocked); --needs: var(--office-status-waiting); --meeting: var(--office-status-meeting); --done: var(--office-status-done); --mute: var(--office-hud-ink);
  color: var(--office-hud-ink); background: var(--office-hud); border: 1px solid var(--office-line); border-radius: 12px; padding: 8px 10px; }
.led-layer .led { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; min-height: 44px; }
.led-layer .led:hover { border-color: #a78bfa; }
.led-layer .led:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.led-layer .led-c b { font-size: 17px; }
.side-col { position: absolute; top: 84px; right: 14px; width: 400px; max-width: calc(100% - 28px); z-index: 1; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.side-col[hidden] { display: none; }
.side-col.narrow { position: static; width: auto; max-width: none; }
.led-this-wrap { pointer-events: none; }
.led-this-wrap .led.short { width: auto; }
/* Wide screens: the building wall is one compact row. */
@media (min-width: 861px) {
  .office-bar .led-strip { padding: 10px 14px; }
  .office-bar .led-strip > .led { display: grid; grid-template-columns: 150px minmax(0, 520px) minmax(0, 1fr); align-items: center; column-gap: 18px; }
  .office-bar .led-strip > .led .led-h { flex-direction: column; align-items: flex-start; gap: 4px; }
  .office-bar .led-strip > .led .led-cols { margin-top: 0; }
  .office-bar .led-strip > .led .led-notes > div:first-child { margin-top: 0; }
  .office-bar .led-strip > .led .led-c b { font-size: 21px; }
}

/* Moving now (REQ-28): agents on the way to another floor. */
.moving { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.moving-h { font: 800 10.5px/1.2 var(--font-mono); letter-spacing: .14em; }
.moving-note { font: 500 12px/1.3 var(--font-body); color: var(--mute); }
.moving-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.moving-list:empty { display: none; }
.moving-row { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); color: var(--ink); font: 500 12.5px/1.25 var(--font-body); cursor: pointer; text-align: left; max-width: 100%; }
.moving-row i { font-style: normal; color: var(--st, var(--idle)); }
.moving-row b { font-weight: 800; }
.moving-row span { color: var(--mute); }
.moving-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Minimap (REQ-28): R at the top; slide column left, lift column right. */
.mm { --working: var(--office-status-working); --idle: var(--office-status-idle); --blocked: var(--office-status-blocked); --needs: var(--office-status-waiting); --meeting: var(--office-status-meeting); --review: var(--office-status-review); --done: var(--office-status-done);
  pointer-events: auto; color: var(--office-hud-ink); background: var(--office-hud); border: 1px solid var(--office-line); border-radius: 12px; padding: 8px 10px; font: 600 11px/1.2 var(--font-body); }
.mm-h { display: flex; justify-content: space-between; gap: 8px; }
.mm-h b { font: 800 10px/1.2 var(--font-mono); letter-spacing: .14em; }
.mm-h span { opacity: .75; }
.mm-title { text-align: center; margin: 4px 0 2px; font: 800 11px/1 var(--font-mono); letter-spacing: .08em; }
.mm-title span { color: #a78bfa; }
.mm-grid { position: relative; }
.mm-row { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) 26px; align-items: center; height: 44px; border-radius: 8px; }
.mm-row.on { box-shadow: inset 0 0 0 1.5px #a78bfa; background: rgba(167, 139, 250, 0.08); }
.mm-floor { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font: 800 11px/1 var(--font-mono); cursor: pointer; border-radius: 8px; }
.mm-col { height: 100%; }
.mm-col.slide { background: linear-gradient(90deg, transparent 45%, rgba(34, 211, 238, 0.35) 45%, rgba(34, 211, 238, 0.35) 55%, transparent 55%); }
.mm-col.lift { background: linear-gradient(90deg, transparent 40%, rgba(253, 230, 138, 0.3) 40%, rgba(253, 230, 138, 0.3) 60%, transparent 60%); }
.mm-dots { display: flex; align-items: center; gap: 0; min-width: 0; padding-left: 4px; }
.mm-dot { width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--st, var(--idle)); font: 400 15px/44px system-ui, sans-serif; cursor: pointer; text-align: center; }
span.mm-dot { cursor: default; }
.mm-dot.st-working { --st: var(--working); } .mm-dot.st-idle { --st: var(--idle); } .mm-dot.st-done { --st: var(--done); } .mm-dot.st-blocked { --st: var(--blocked); }
.mm-dot.st-needs-you { --st: var(--needs); } .mm-dot.st-meeting { --st: var(--meeting); } .mm-dot.st-review { --st: var(--review); }
.mm-more { min-width: 44px; height: 44px; border: 1px solid var(--office-line); border-radius: 10px; background: transparent; color: inherit; font: 800 12px/1 var(--font-mono); cursor: pointer; margin-left: 4px; }
.mm-floor:focus-visible, .mm-dot:focus-visible, .mm-more:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mm-trails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mm-trails line { stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.mm-trails line.lift { stroke: #d97706; } .mm-trails line.slide { stroke: #0891b2; }
.mm-transit { position: absolute; inset: 0; pointer-events: none; }
.mm-transit .mm-dot { position: absolute; left: 0; top: 0; width: 44px; height: 44px; line-height: 44px; pointer-events: auto; border-radius: 50%; background: transparent; will-change: transform; animation: mm-pulse 1.4s ease-in-out infinite; }
@keyframes mm-pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18); } }
.mm.reduce .mm-transit .mm-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .mm-transit .mm-dot { animation: none; } }
.mm-f { display: flex; justify-content: space-between; margin-top: 4px; opacity: .75; font: 600 10.5px/1.2 var(--font-body); }
.mm-tip { position: absolute; right: calc(100% + 8px); width: 210px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #17131f; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font: 500 12px/1.4 var(--font-body); pointer-events: none; }
.mm-tip[hidden] { display: none; }
.mm-tip b { font: 800 14px/1.2 var(--font-display); }
.mm-tip .k { margin-top: 4px; font-weight: 800; }
/* Phones: under the 3D view, full width, page theme. */
.side-col.narrow .mm { background: var(--panel); color: var(--ink); border-color: var(--line); --working: inherit; --idle: inherit; --blocked: inherit; --needs: inherit; --meeting: inherit; --review: inherit; --done: inherit; }
.side-col.narrow .mm-floor { color: var(--ink); }
.side-col.narrow .mm-h span, .side-col.narrow .mm-f { color: var(--mute); }
.side-col.narrow .mm-more { color: var(--ink); border-color: var(--line); background: var(--sunken); }
.side-col.narrow .mm-transit .mm-dot { background: var(--panel); }
.side-col.narrow .mm { padding: 8px 6px; }
.side-col.narrow .mm-row { grid-template-columns: 44px 18px minmax(0, 1fr) 18px; }
/* Rooms on this floor (REQ-28.1.2) */
.room-list { pointer-events: auto; background: var(--office-hud); color: var(--office-hud-ink); border: 1px solid var(--office-line); border-radius: 12px; padding: 8px 10px; }
.room-list[hidden] { display: none; }
.room-list > b { font: 800 10px/1.2 var(--font-mono); letter-spacing: .14em; }
.room-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.room-btn { min-height: 44px; padding: 0 12px; border: 1px solid var(--office-line); border-radius: 10px; background: transparent; color: inherit; font: 700 12.5px/1 var(--font-body); cursor: pointer; }
.room-btn:hover { border-color: var(--office-trim); }
.room-btn:focus-visible { outline: 2px solid var(--office-trim); outline-offset: 2px; }
.side-col.narrow .room-list { background: var(--panel); color: var(--ink); border-color: var(--line); }

/* Room view: the room's whiteboard as a panel (REQ-28, Whiteboard detail). Boards look the same in light and dark. */
.wb-panel { pointer-events: auto; background: #fbfbfd; color: #17131f; border: 1px solid rgba(23, 21, 31, 0.14); border-radius: 12px; padding: 12px; max-height: 470px; overflow: auto;
  --working: var(--office-board-status-working); --idle: var(--office-board-status-idle); --done: var(--office-board-status-done); --blocked: var(--office-board-status-blocked); --needs: var(--office-board-status-waiting); --meeting: var(--office-board-status-meeting); --review: var(--office-board-status-review); }
.wb-panel[hidden], .mm[hidden], .led-this-wrap[hidden] { display: none; }
.wb-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wb-h b { font: 800 18px/1.2 var(--font-display); }
.wb-h .led-live { color: #0A7550; font: 800 10.5px/1 var(--font-mono); letter-spacing: .14em; }
.wb-sec { margin-top: 10px; font: 800 10px/1.2 var(--font-mono); letter-spacing: .12em; color: #6b6880; }
.wb-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: 500 12.5px/1.3 var(--font-body); }
.wb-row:hover { background: #f3f0ff; }
.wb-row:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.wb-row i { font-style: normal; color: var(--st, var(--idle)); width: 14px; text-align: center; }
.wb-row b { font-weight: 800; }
.wb-row span { color: #55526a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wb-more, .wb-empty { margin-top: 6px; color: #6b6880; font: 600 12px/1.3 var(--font-body); }
.wb-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wb-items span { padding: 3px 9px; border-radius: 8px; background: #f3f0ff; color: #6d28d9; font: 700 11.5px/1.4 var(--font-mono); }
.wb-items .more { background: none; color: #6b6880; }

/* Your office (REQ-32): numbered questions with their state as shape plus label (Pablo's UX note). */
.mo-qs { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.mo-q { padding-left: 2px; }
.mo-qtext { font-weight: 600; overflow-wrap: anywhere; }
.mo-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; color: var(--mute); }
.mo-qst { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font: 800 11px/1.6 var(--font-mono); letter-spacing: .04em; background: var(--needs-soft); color: var(--needs); flex: none; }
.mo-qst i { font-style: normal; }
.q-answered .mo-qst { background: var(--done-soft); color: var(--done); }
.q-dropped .mo-qst { background: var(--idle-soft); color: var(--idle); }
.mo-qwait { font: 600 11.5px/1.3 var(--font-mono); color: var(--faint); }
.mo-qnote { margin: 4px 0 0; font-size: 13px; color: var(--ink); }
.q-needs-more .mo-qnote { color: var(--needs); font-weight: 700; }
.mo-qctx-btn { min-height: 44px; margin-top: 2px; }
.mo-qctx { margin: 2px 0 0; font-size: 13px; color: var(--mute); overflow-wrap: anywhere; }
.mo-qctx[hidden] { display: none; }
.mo-done { margin: 8px 0 0; font-weight: 800; color: var(--done); }

/* REQ-33: on a wide screen outside full screen the office takes the full
   browser width (a 20 px gutter) and its panels open as overlays from the
   chips in the bar above it. Everything below keeps the 1120 px column. */
.office-bar.ov, .office.ov { width: calc(100vw - var(--sbw, 0px) - 40px); margin-inline: calc(50% - (100vw - var(--sbw, 0px)) / 2 + 20px); box-sizing: border-box; }
.office.ov { grid-template-columns: minmax(0, 1fr); }
.office.ov .office-stage { height: clamp(480px, calc(100vh - 220px), 980px); }
.office.ov .led-below { display: none; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.ov-chips[hidden], .ov-chip[hidden], .ov-col[hidden], .ov-pill[hidden], .ov-wait[hidden] { display: none; }
.ov-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 700 13.5px/1 var(--font-body); cursor: pointer; }
.ov-chip i { font-style: normal; color: var(--mute); }
.ov-chip:hover { background: var(--accent-soft); }
.ov-chip.on { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ov-chip.on i { color: inherit; }
.ov-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The overlay column: right side, under the counts and the pill, above the zoom buttons. */
.ov-col { position: absolute; top: 118px; right: 14px; bottom: 70px; width: 400px; max-width: calc(100% - 28px); z-index: 3; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
.ov-col > * { pointer-events: auto; flex: none; }
.ov-col > .led, .ov-col > .moving, .ov-col > .office-questions { box-sizing: border-box; background: var(--office-hud); color: var(--office-hud-ink); border: 1px solid var(--office-line); border-radius: 12px; padding: 10px 12px; margin: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ov-col > .led { --working: var(--office-status-working); --idle: var(--office-status-idle); --blocked: var(--office-status-blocked); --needs: var(--office-status-waiting); --meeting: var(--office-status-meeting); --done: var(--office-status-done); --mute: var(--office-hud-ink); }
.ov-col > .led .led-c b { font-size: 19px; }
.ov-col > .moving .moving-note { color: inherit; opacity: .8; }
.ov-col > .office-questions { max-height: none; overflow: visible; border-radius: 12px; }
.ov-col > .office-questions[hidden], .ov-col > .led[hidden], .ov-col > .moving[hidden] { display: none; }
.ov-col .side-col { position: static; width: auto; max-width: none; pointer-events: none; }
.ov-col .side-col > * { pointer-events: auto; }
/* Always visible: N on floors + N in transit = total, and who waits on you. */
.ov-pill { position: absolute; top: 74px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); flex-wrap: wrap; justify-content: flex-end; }
.ov-tot { padding: 8px 12px; border-radius: 999px; background: var(--office-hud); color: var(--office-hud-ink); border: 1px solid var(--office-line); font: 700 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ov-wait { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--needs) 45%, transparent); background: var(--needs-soft, var(--panel)); color: var(--needs); font: 800 13px/1 var(--font-body); cursor: pointer; }
.ov-wait:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.led-layer.beside-ov { right: 428px; }

/* REQ-42: the office on its own page, and Waiting on you. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.office-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; min-height: 44px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--ink); text-decoration: none; }
.office-link:hover { border-color: var(--accent); }
.office-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.office-link-t { display: flex; flex-direction: column; gap: 4px; }
.office-link-t b { font: 800 18px/1.2 var(--font-display); color: var(--accent); }
.office-link-t span { color: var(--mute); font-size: 14px; }
.office-link-w { padding: 8px 12px; border-radius: 999px; background: var(--needs-soft); color: var(--needs); font: 800 13px/1 var(--font-body); }
.office-link-w.none { background: var(--done-soft); color: var(--done); }
.office-link-w:empty { display: none; }
/* The shortcut: diamond, label, count badge (needs ink on needs-soft). */
.office-bar .wait-btn { display: inline-flex; align-items: center; gap: 8px; }
.office-bar .wait-btn i { font-style: normal; color: var(--needs); }
.wait-n { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: var(--needs-soft); color: var(--needs); font: 800 12.5px/1 var(--font-mono); text-align: center; }
/* The list: a panel by the top right on a wide screen, a bottom sheet on a phone. */
.wy-panel { inset: 0 0 auto auto; margin: 120px 20px 0 0; width: min(460px, calc(100vw - 40px)); height: auto; max-height: calc(100dvh - 140px); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.wy-panel::backdrop { background: rgba(8, 6, 14, 0.25); }
.wy-head .wy-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; }
.wy-body { gap: 16px; padding-bottom: 20px; }
.wy-sec h3 { margin: 0 0 6px; font: 800 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; }
.wy-row:hover { border-color: var(--accent); }
.wy-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wy-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wy-t b { font: 700 14px/1.3 var(--font-body); overflow-wrap: anywhere; }
.wy-d { color: var(--mute); font-size: 12.5px; overflow-wrap: anywhere; }
.wy-verb { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 800 12px/1 var(--font-body); }
.wy-none { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mute); font-size: 15px; }
.wy-none i { font-style: normal; color: var(--done); font-weight: 800; }
@media (max-width: 600px) {
  .wy-panel { inset: auto 0 0 0; margin: 0; width: 100vw; max-width: 100vw; max-height: 85dvh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; }
}
/* REQ-42 (Pablo): six tabs, every one a 44 px target. Under 600 px, where
   the tabs take a full row, they wrap into a 3-column grid (two rows), so no
   destination hides behind a scroll; the text stays 13.5 px and the short
   labels show (full name in aria-label). Above 600 px: one row, with the
   overflow scroll only as a safety net for very narrow desktop windows. */
.tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding-block: 0; }
@media (max-width: 600px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  .tab { min-width: 0; font-size: 13.5px; padding-inline: 4px; }
  .tab-long { display: none; } .tab-short { display: inline; }
}
/* 601–800 px: one row only fits with the short labels (no tab out of view). */
@media (min-width: 601px) and (max-width: 800px) { .tab-long { display: none; } .tab-short { display: inline; } }
/* REQ-46: the release path's glyphs (⌕ In QA, ▣ Ready for staging, ★ Ready for release) next to the label. */
.rs-glyph { font-style: normal; margin-right: 4px; color: var(--st, inherit); }
/* REQ-53: a story built by a merged PR, and the automation's own history rows. */
.rq-built { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; background: var(--done-soft); color: var(--done); font: 700 12px/1.2 var(--font-body); text-decoration: none; }
a.rq-built:hover { text-decoration: underline; }
a.rq-built:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rq-auto { font-weight: 700; color: var(--mute); }
.rq-undo { min-height: 44px; margin-top: 4px; }

/* Team page (#team, REQ-22 / REQ-23): the organogram and the idea-to-feature flow. Semantic variables only;
   --pod is a team's own colour from its Firestore document. */
.tm { gap: 36px; }
.tm-sec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tm-sec > h2 { margin: 0; font: 800 24px/1.15 var(--font-display); }
.tm-org { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tm-owner { display: flex; align-items: center; gap: 14px; align-self: center; max-width: 100%; padding: 14px 20px; border-radius: 16px; background: var(--accent-soft); border: 1px solid var(--line); }
.tm-owner h3 { margin: 0; font: 800 20px/1.2 var(--font-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-owner p { margin: 2px 0 0; color: var(--mute); font-size: 14px; }
.tm-stem { width: 2px; height: 22px; background: var(--line); align-self: center; }
.tm-tag { display: inline-block; font: 700 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 8px; background: var(--sunken); color: var(--mute); margin-left: 6px; }
.tm-tag--owner { background: var(--panel); color: var(--accent); margin-left: 0; }
.tm-av { --sz: 36px; flex: none; border-radius: 50%; background: var(--sunken); object-fit: cover; }
span.tm-av { display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); font: 800 calc(var(--sz) * .42)/1 var(--font-display); }
.tm-av--human { background: var(--accent); color: var(--panel); }
.tm-av--group { background: var(--sunken); color: var(--mute); border: 1px solid var(--line); font-family: var(--font-mono); }
.tm-pods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .tm-pods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tm-pods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tm-pods { grid-template-columns: minmax(0, 1fr); margin-left: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
  .tm-owner { align-self: stretch; }
  .tm-stem { display: none; }
  .tm-org > .tm-owner { margin-bottom: 14px; }
}
.tm-pod, .tm-loose { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--pod, var(--line)); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tm-loose { margin-top: 14px; border-top: 1px dashed var(--faint); border: 1px dashed var(--faint); background: transparent; }
.tm-pod h3, .tm-loose h3 { margin: 0; font: 800 17px/1.2 var(--font-display); display: flex; align-items: center; gap: 8px; }
.tm-pod h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--pod); flex: none; }
.tm-pod-head { display: flex; flex-direction: column; gap: 6px; }
.tm-focus { margin: 0; color: var(--mute); font-size: 13.5px; }
.tm-lead { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font: 700 13px/1.2 var(--font-body); }
.tm-lead.none { background: var(--sunken); color: var(--mute); }
.tm-lead-i { color: var(--accent); margin-right: 2px; }
.tm-pick { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mute); }
.tm-pick select { min-height: 44px; max-width: 100%; }
.tm-small { margin: 0; font-size: 12px; color: var(--faint); }
.tm-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-person { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
a.tm-person:hover { background: var(--accent-soft); }
a.tm-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tm-who { display: flex; flex-direction: column; min-width: 0; }
.tm-who b { font-size: 14px; overflow-wrap: anywhere; }
.tm-who span { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.tm-who .tm-podname { color: var(--faint); }
.tm-none { color: var(--mute); font-size: 13.5px; padding: 6px; }

.tm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.tm-bar .seg button { min-height: 44px; }
/* Phones: the four products in a 2 x 2 grid, so every tab is on screen and reachable by touch. */
@media (max-width: 760px) {
  .tm-bar .seg { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; width: 100%; }
  .tm-bar .seg button { white-space: normal; }
}
.tm-propose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
.tm-propose p { margin: 0; flex: 1 1 220px; }
.tm-propose .btn { min-height: 44px; }
.tm-editbtn { min-height: 44px; }
.tm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--mute); }
.tm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tm-state { display: inline-flex; align-items: center; gap: 3px; font: 700 11px/1 var(--font-mono); letter-spacing: .04em; padding: 4px 7px; border-radius: 8px; white-space: nowrap; }
.tm-state--implemented { background: var(--done-soft); color: var(--done); }
.tm-state--partly { background: var(--needs-soft); color: var(--needs); }
.tm-state--planned { background: var(--review-soft); color: var(--review); }
.tm-state--proposed { background: transparent; color: var(--faint); border: 1px dashed var(--faint); }
.tm-legend { margin-bottom: 4px; }
.tm-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: stretch; }
.tm-stepli { position: relative; display: flex; flex-direction: column; width: 196px; }
.tm-stepli:has(.tm-detail) { width: 100%; }
.tm-stepli .tm-step { width: 196px; height: auto; flex: 1 1 auto; }
.tm-stepli:has(.tm-detail) .tm-step { flex: none; }
.tm-detail { flex: none; }
.tm-detail { margin-top: 10px; }
.tm-arrow { position: absolute; right: -19px; top: 22px; width: 16px; text-align: center; color: var(--faint); font-size: 16px; line-height: 1; }
.tm-stepli:last-child .tm-arrow, .tm-stepli:has(.tm-detail) .tm-arrow { display: none; }
.tm-step { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; min-height: 44px; height: 100%; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
.tm-step:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tm-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-step[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tm-step--proposed { border: 1px dashed var(--faint); background: transparent; }
.tm-step-n { font: 800 14.5px/1.25 var(--font-display); }
.tm-step-w { font-size: 12.5px; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-step--proposed .tm-step-n, .tm-step--proposed .tm-step-w { color: var(--faint); }
.tm-step-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: auto; }
.tm-faces { display: inline-flex; align-items: center; }
.tm-faces .tm-av { width: 24px; height: 24px; margin-left: -6px; border: 2px solid var(--panel); box-sizing: content-box; }
.tm-faces .tm-av:first-child { margin-left: 0; }
.tm-faces span.tm-av { --sz: 24px; }
.tm-more { margin-left: 4px; font: 700 11.5px/1 var(--font-mono); color: var(--mute); }
.tm-detail, .tm-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.tm-detail { width: 100%; box-sizing: border-box; }
.tm-detail-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tm-detail h3, .tm-dialog h2 { margin: 0; font: 800 18px/1.2 var(--font-display); }
.tm-detail h4, .tm-dialog h4 { margin: 4px 0 0; font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tm-what, .tm-why, .tm-req { margin: 0; font-size: 14px; color: var(--mute); }
.tm-detail .tm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tm-detail .btn.ghost, .tm-dialog .btn.ghost { align-self: flex-start; min-height: 44px; }
.tm-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; box-sizing: border-box; }
.tm-dialog[open] { display: flex; }
.tm-dialog::backdrop { background: rgba(8, 6, 14, 0.5); }
@media (max-width: 760px) {
  .tm-steps { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .tm-stepli, .tm-stepli:has(.tm-detail) { width: 100%; }
  .tm-stepli .tm-step { width: 100%; }
  .tm-arrow { display: none; }
}
.tm-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 24px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 700 14px/1.3 var(--font-body); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.tm-toast.bad { background: var(--blocked); color: var(--panel); }
.tm-toast[hidden] { display: none; }
.tm-edit { display: flex; flex-direction: column; gap: 12px; }
.tm-edit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.tm-edit-step fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tm-edit-step legend { font: 700 11px/1 var(--font-mono); color: var(--mute); padding: 0 6px; }
.tm-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--mute); }
.tm-field input, .tm-field textarea, .tm-field select { font: 600 14px/1.3 var(--font-body); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-height: 40px; box-sizing: border-box; width: 100%; }
.tm-field input:focus-visible, .tm-field textarea:focus-visible, .tm-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tm-edit-act, .tm-edit-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-edit-act .btn, .tm-edit-foot .btn { min-height: 44px; }
.tm-problems { margin: 0; padding-left: 20px; }
.wy-row.nolink:hover { border-color: var(--line); }
/* REQ-54: only an agent picks work up. */
.rq-pickup { margin: 6px 0 0; color: var(--faint); font-size: 12px; }
.rq-col.rq-nodrop { opacity: .6; cursor: not-allowed; }
.rq-col.rq-nodrop * { cursor: not-allowed; }
.rq-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--panel); font: 600 14px/1.35 var(--font-body); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.rq-toast[hidden] { display: none; }
.rq-picked { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rq-picked-av { width: 20px; height: 20px; border-radius: 50%; }

/* Claude setup page (#claude-setup, REQ-27). Tables become label/value cards on a phone. */
.cs .cs-tabs { margin: 4px 0 12px; flex-wrap: wrap; overflow-x: visible; }
.cs-body { display: flex; flex-direction: column; gap: 12px; }
.cs-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 18px 0 0; }
.cs-updated { margin: 0; color: var(--mute); font-size: 13.5px; }
.cs-sub { margin: 0; color: var(--mute); max-width: 75ch; }
.cs-mono { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: break-word; }
.cs-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.cs-table col.w-event { width: 17%; } .cs-table col.w-script { width: 21%; } .cs-table col.w-does { width: 25%; } .cs-table col.w-blocks { width: 16%; } .cs-table col.w-escape { width: 11%; } .cs-table col.w-link { width: 10%; }
.cs-table col.w-target { width: 13%; } .cs-table col.w-paths { width: 20%; } .cs-table col.w-check { width: 11%; } .cs-table col.w-cmd { width: 34%; } .cs-table col.w-takes { width: 12%; }
.cs-table thead th:first-child { border-top-left-radius: 14px; } .cs-table thead th:last-child { border-top-right-radius: 14px; }
.cs-table caption { text-align: left; padding: 0 0 6px; color: var(--faint); font: 700 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; caption-side: top; }
.cs-table th, .cs-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.cs-table thead th { border-top: 0; background: var(--sunken); color: var(--mute); font: 700 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-table tbody th { font-weight: 700; overflow-wrap: break-word; }
.cs-empty { color: var(--mute); }
.cs-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cs-when { color: var(--mute); font-size: 12.5px; }
.cs-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.cs-chip::before { content: ""; width: 7px; height: 7px; flex: none; }
.cs-chip.blocks { color: var(--blocked); background: var(--blocked-soft); }
.cs-chip.blocks::before { background: currentColor; border-radius: 1px; }
.cs-chip.never { color: var(--idle); background: var(--idle-soft); }
.cs-chip.never::before { border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.cs-gh { font-weight: 700; color: var(--accent); }
.cs-gh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cs-nolink { color: var(--faint); }
.cs-agents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cs-agent { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.cs-agent p { margin: 0; color: var(--mute); font-size: 13.5px; }
.cs-role { color: var(--mute); font-size: 13px; }
.cs-proposed { border: 1.5px dashed var(--faint); background: transparent; }
.cs-proposed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 700px) {
  .cs-table, .cs-table tbody, .cs-table tr, .cs-table th, .cs-table td { display: block; width: 100%; box-sizing: border-box; }
  .cs-table colgroup { display: none; }
  .cs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cs-table { border: 0; background: transparent; }
  .cs-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .cs-table tr { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 0; }
  .cs-table th, .cs-table td { border-top: 0; padding: 6px 14px; white-space: normal; }
  .cs-table [data-label]::before { content: attr(data-label); display: block; color: var(--faint); font: 700 10.5px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
}

/* Sign-offs page (#sign-offs, REQ-25). Pending first, then history; one column on a phone. */
.sg .sg-filter { margin: 4px 0 8px; flex-wrap: wrap; overflow-x: visible; }
.sg-body { display: flex; flex-direction: column; gap: 10px; }
.sg-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 14px 0 0; }
.sg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.sg-card.pending { border-color: color-mix(in srgb, var(--needs) 45%, var(--line)); }
.sg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sg-product { font-size: 16px; }
.sg-sha { font-family: var(--font-mono); font-size: 12.5px; color: var(--mute); min-width: 0; max-width: 100%; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-chip { margin-left: auto; display: inline-flex; align-items: center; font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.sg-chip.pending { color: var(--needs); background: var(--needs-soft); }
.sg-chip.approved { color: var(--done); background: var(--done-soft); }
.sg-chip.rejected { color: var(--blocked); background: var(--blocked-soft); }
.sg-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13.5px; }
.sg-meta dt { color: var(--faint); font: 700 10.5px/1.9 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sg-meta dd { margin: 0; overflow-wrap: anywhere; }
.sg-meta a { color: var(--accent); font-weight: 700; }
.sg-meta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sg-decide { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.sg-label { font: 700 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sg-note { flex: none; width: 100%; box-sizing: border-box; resize: vertical; font: 14px/1.4 var(--font-body); }
.sg-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-btns .btn { min-height: 44px; }
.sg-decide .err { margin: 0; }
@media (max-width: 700px) {
  .sg-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sg-meta dd { margin-bottom: 6px; }
  .sg-chip { margin-left: 0; }
}

/* Back-office version (REQ-39.1): one footer line on every page, and the new-version notice. */
.bo-foot { max-width: 1120px; margin: 0 auto; padding: 0 20px 28px; box-sizing: border-box; }
.bo-foot a { font: 12px/1.5 var(--font-mono); color: var(--faint); text-decoration: none; overflow-wrap: anywhere; }
.bo-foot a:hover { text-decoration: underline; }
.bo-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.bo-update { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; max-width: calc(100vw - 32px); box-sizing: border-box; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-weight: 700; font-size: 14px; }
.bo-update[hidden] { display: none; }
.bo-update .btn { min-height: 44px; padding-block: 0; }
.bo-update span { flex: 1 1 auto; min-width: 0; }
.bo-update .btn { flex: none; }
.bo-update .bo-dismiss { min-width: 44px; }
@media (max-width: 700px) {
  .bo-foot { padding-inline: 16px; }
  .bo-update { left: 16px; right: 16px; transform: none; max-width: none; }
}

/* Release notes (#release-notes, REQ-39.2): an h2 per day, an h3 per version. */
.rn-list { display: flex; flex-direction: column; gap: 18px; }
.rn-day { display: flex; flex-direction: column; gap: 10px; }
.rn-day h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 6px 0 0; }
.rn-entry { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; scroll-margin-top: 96px; }
.rn-entry.target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rn-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rn-head h3 { margin: 0; font-size: 17px; }
.rn-self { color: var(--ink); text-decoration: none; }
.rn-self:hover { text-decoration: underline; }
.rn-self:focus-visible, .rn-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rn-meta { font: 12px/1.5 var(--font-mono); color: var(--faint); }
.rn-bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.rn-refs { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rn-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 12px/1.2 var(--font-mono); text-decoration: none; overflow-wrap: anywhere; }
.rn-chip:hover { text-decoration: underline; }
.rn-by, .rn-coming { margin: 0; color: var(--faint); font-size: 13px; }
.rn-edit { align-self: flex-start; min-height: 44px; }
.rn-form { display: flex; flex-direction: column; gap: 6px; }
.rn-label { font: 700 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.rn-text, .rn-refs-input { flex: none; width: 100%; box-sizing: border-box; font: 14px/1.4 var(--font-body); }
.rn-text { resize: vertical; }
.rn-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rn-btns .btn { min-height: 44px; }
.rn-form .err { margin: 0; }

/* Plan releases (Requirements page, REQ-39.3). */
.rp .rq-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.rp .rq-panel-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.rp .rq-panel-head .btn.icon { min-width: 44px; min-height: 44px; }
.rp-lede, .rp-body { padding: 0 20px; }
.rp-lede { margin: 0 0 12px; color: var(--mute); }
.rp-body { overflow-y: auto; padding-bottom: 24px; }
.rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.rp-name { display: flex; align-items: baseline; gap: 10px; }
.rp-name b { font-size: 17px; }
.rp-count, .rp-note { color: var(--mute); font-size: 13px; margin: 0; }
.rp-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rp-date { flex: 0 1 200px; min-height: 44px; box-sizing: border-box; }
.rp-form .btn { min-height: 44px; }
.rp-shipped { margin: 0; color: var(--done); font-weight: 700; }
.rp-row .err { margin: 0; }

/* Releases page switch and Release calendar (#release-calendar, REQ-39.3). */
.rn-switch { align-self: flex-start; }
.rn-switch a { flex: none; display: inline-flex; align-items: center; min-height: 36px; color: var(--mute); padding: 4px 12px; border-radius: 10px; font: 700 13.5px/1 var(--font-body); text-decoration: none; }
.rn-switch a.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.rn-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#rnNotesPane, #rcPane { display: flex; flex-direction: column; gap: 18px; }
#rnNotesPane[hidden], #rcPane[hidden] { display: none; }
.rc { display: flex; flex-direction: column; gap: 12px; }
.rc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-month { margin: 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 22px; min-width: 9em; text-align: center; }
.rc-nav { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.rc-legend { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: 700 12px/1.3 var(--font-mono); text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.rc-chip.shipped { color: var(--done); background: var(--done-soft); }
.rc-chip.planned { color: var(--review); background: var(--review-soft); }
a.rc-chip:hover, summary.rc-chip:hover { text-decoration: underline; }
.rc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-legend .rc-chip { cursor: default; }
.rc-rel summary { list-style: none; }
.rc-rel summary::-webkit-details-marker { display: none; }
.rc-reqs { margin: 6px 0 0; padding: 8px 10px 8px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.rc-reqs a { color: var(--accent); font-weight: 700; }
.rc-status { color: var(--faint); font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.rc-grid { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rc-grid th { padding: 8px; color: var(--mute); font: 700 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; background: var(--sunken); }
.rc-grid td { vertical-align: top; height: 96px; padding: 6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rc-grid td:first-child { border-left: 0; }
.rc-grid td > * + * { margin-top: 4px; }
.rc-grid td.out .rc-day { color: var(--faint); opacity: .6; }
.rc-grid td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.rc-day { display: block; font: 700 12px/1.4 var(--font-mono); color: var(--mute); }
.rc-grid .rc-chip { display: flex; }
.rc-list { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 10px; }
.rc-listday { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.rc-listday.today { border-color: var(--accent); }
.rc-listday h3 { margin: 0; font-size: 15px; }
.rc-empty { color: var(--mute); }
@media (max-width: 700px) {
  .rc-grid { display: none; }
  .rc-list { display: flex; }
  .rc-month { min-width: 0; flex: 1; font-size: 19px; }
}

/* UAT reports (REQ-29.2): badges are glyph + label on a colour pair, never colour alone (Pablo). */
.ua-badge, .ua-sum { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.t-done { color: var(--done); background: var(--done-soft); }
.t-blocked { color: var(--blocked); background: var(--blocked-soft); }
.t-needs { color: var(--needs); background: var(--needs-soft); }
.t-idle { color: var(--idle); background: var(--idle-soft); }
.ua-badge.t-faint { color: var(--faint); background: transparent; border: 1px solid var(--line); }
.ua-story { margin-top: 10px; }
.ua-story h4 { margin: 0 0 6px; }
.ua-none { margin: 0; color: var(--faint); font-size: 13.5px; }
.ua-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ua-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 44px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: 13.5px; min-width: 0; }
.ua-row:hover { border-color: var(--accent); }
.ua-row:focus-visible, .ua-thumb:focus-visible, .ua-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ua-date { color: var(--mute); }
.ua-who { display: inline-flex; align-items: center; gap: 6px; }
.ua-who img { border-radius: 50%; }
.ua-build { font-family: var(--font-mono); font-size: 12px; color: var(--mute); min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-more { margin-top: 6px; min-height: 44px; }
.ua-report { display: flex; flex-direction: column; gap: 16px; }
.ua-rhead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ua-back { min-height: 44px; }
.ua-rline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ua-rline h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.ua-rline h2:focus { outline: none; }
.ua-sub { margin: 0; color: var(--mute); font-size: 13.5px; }
.ua-sec h3 { margin: 0 0 8px; font-size: 15px; }
.ua-crit { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: c; }
.ua-crit li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ua-ctext, .ua-cnote { margin: 0; overflow-wrap: anywhere; }
.ua-cnote { color: var(--mute); font-size: 13.5px; }
.ua-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13.5px; }
.ua-dl dt { color: var(--faint); font: 700 10.5px/1.9 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ua-dl dd { margin: 0; overflow-wrap: anywhere; }
.ua-dl a { color: var(--accent); font-weight: 700; }
.ua-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ua-pre { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ua-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ua-thumb { padding: 0; height: 96px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sunken); cursor: zoom-in; display: grid; place-items: center; }
.ua-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ua-broken { color: var(--faint); font: 12px/1.3 var(--font-mono); padding: 6px; overflow-wrap: anywhere; }
.ua-lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; }
.ua-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ua-lightbox::backdrop { background: rgba(8, 6, 14, 0.85); }
.ua-lbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px; background: var(--panel); border-radius: 12px; }
.ua-lbar .btn { min-width: 44px; min-height: 44px; }
.ua-lbar a { color: var(--accent); font-weight: 700; }
.ua-count { font: 700 13px/1 var(--font-mono); color: var(--mute); }
.ua-full { max-width: 100vw; max-height: calc(100dvh - 80px); object-fit: contain; }
@media (max-width: 700px) {
  .ua-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ua-dl dd { margin-bottom: 6px; }
}

/* REQ-56.1.4: Gus's card, auto-merge turned off for a repository (neutral: ring + text). */
.chip.am-off { background: var(--idle-soft); color: var(--idle); box-shadow: inset 0 0 0 1.5px currentColor; }

/* REQ-56.2.2 / 56.3: Gus's card, a deploy waiting for Steven and a direct push (needs: ring + word). */
.chip.dep-wait, .chip.push-warn { background: var(--needs-soft); box-shadow: inset 0 0 0 1.5px var(--needs); }
.chip.dep-wait a, .chip.push-warn a { color: var(--needs); font-weight: 700; }

/* REQ-66.3: a note from Nora on an agent's card. Reuses the block and chip styles; state = shape + word. */
.block.anote h4 { display: flex; gap: 6px; align-items: baseline; }
.block.anote h4 time { text-transform: none; letter-spacing: 0; color: var(--faint); }
.note-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.note-state { display: inline-flex; align-items: center; gap: 5px; }
.note-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: none; }
.ns-open::before { border: 1.5px solid currentColor; }
.ns-accepted::before { content: "✓"; width: auto; height: auto; border-radius: 0; }
.ns-declined::before { content: "✕"; width: auto; height: auto; border-radius: 0; }
.ns-done::before { content: "✓"; width: 12px; height: 12px; line-height: 12px; text-align: center; font-size: 9px; background: currentColor; color: var(--panel); }
.note-ref { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent); }
.note-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.note-text { margin: 4px 0 0; color: var(--mute); font-size: 14px; overflow-wrap: anywhere; }
.note-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.note-more { margin-top: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.note-one { color: var(--mute); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.note-reason { display: block; margin-top: 4px; color: var(--mute); font-size: 13.5px; font-style: italic; }