/* copilot/public/styles.css
   Ported from pilot/public/index.html (the 1,534-line laptop board), Field
   Journal brand tokens intact: Mist #EEF2F7, Ink #0B1220, Deep Blue #2F5DA0,
   OCore Blue #5890D8. Dropped with their features: mic meter, MP4 export
   progress, sim button, site nav dropdown (the hosted board keeps its chrome
   to itself). Added: auth screen, session create/join screen, degraded
   identity banner. */
:root {
  --bg: #eef2f7; --card: #ffffff; --card2: #f6f8fb; --line: rgba(11,18,32,.16);
  --ink: #0b1220; --ink2: #46536a; --ink3: #75839a;
  --accent: #2f5da0; --accent-text: #274e87; --accent-soft: #e6edf7;
  --good: #2e9e6b; --good-text: #1e7a51; --good-soft: #e4f2ea;
  --warn-text: #8a6400; --warn-soft: #f7efd8;
  --gold-text: #7c5d0c; --gold-soft: #f7efd8; --gold: #96700f;
  --track: #dbe2ec; --btn-bg: #0b1220; --btn-text: #eef2f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070c16; --card: #0f1828; --card2: #141f33; --line: rgba(238,242,247,.16);
    --ink: #f2f6fb; --ink2: #a3b0c4; --ink3: #74829a;
    --accent: #5890d8; --accent-text: #8db4e6; --accent-soft: rgba(88,144,216,.16);
    --good: #38a273; --good-text: #7ecfa9; --good-soft: rgba(56,162,115,.16);
    --warn-text: #e0b04f; --warn-soft: rgba(224,161,0,.14);
    --gold-text: #e2bc5e; --gold-soft: rgba(201,155,50,.13); --gold: #c99b32;
    --track: #1c2940; --btn-bg: #f2f6fb; --btn-text: #070c16;
  }
}
* { box-sizing: border-box; }
/* display:flex on a class would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.45; }

/* Masthead, minimal in v2: brand, page name, signed-in identity. */
.masthead { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line); }
.masthead-inner { max-width: 1600px; margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.masthead-brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.masthead-brand svg { height: 22px; width: auto; display: block; color: var(--ink); }
.masthead-page { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.masthead-page-sep { color: var(--line); font-size: 16px; font-weight: 300; }
.masthead-page-name { font-family: "Newsreader", Georgia, serif; font-size: 15px;
  letter-spacing: .01em; color: var(--ink2); white-space: nowrap; }
.masthead-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.masthead-links a { color: var(--ink2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.masthead-links a:hover { color: var(--accent); }
.masthead-user { display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink2); }
@media (max-width: 720px) {
  .masthead-inner { gap: 14px; }
  .masthead-page { display: none; }
  .masthead-links { gap: 14px; }
}
@media (max-width: 480px) {
  .masthead-brand { display: none; }
  .masthead-links { width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; }
  .masthead-links a { font-size: 12px; }
  .masthead-user { display: none !important; }
}
.mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 20px 22px 48px; }

/* Compact header: eyebrow, then title and facility on one baseline, then the
   mode chips. The vertical room belongs to the board, not the chrome. */
header.board-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.brandline { display: flex; align-items: center; gap: 10px; }
.eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.title-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 1px 0 2px; }
h1 { font-family: "Newsreader", Georgia, serif; font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0; }
.meta { font-size: 12px; color: var(--ink2); }
.chips { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.chip { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500;
  padding: 2px 9px; border-radius: 999px; background: var(--card2); color: var(--ink2); border: 1px solid var(--line); }
.chip.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.chip.err { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-text);
  text-transform: none; letter-spacing: 0; font-size: 11px; }
/* One control height for the whole row: selects, pill, timer, buttons. */
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; }
.controls > * { height: 32px; box-sizing: border-box; }
.timer { background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 0 12px;
  font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; }
/* Compact select: a short ellipsized label, the native select invisible on
   top so dropdown, keyboard, and change behavior stay the browser's. */
.sel { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card); max-width: 250px; }
.sel .caret { color: var(--ink3); flex: none; }
.sel-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; }
.sel:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#model-sel { max-width: 150px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink3); background: var(--card2); white-space: nowrap; }
.status-pill.live { color: var(--good-text); background: var(--good-soft); border-color: var(--good); }
.status-pill.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 1.6s ease-in-out infinite; }
.status-pill.paused { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn-text); }
.status-pill.ended { color: var(--ink2); }
.status-pill.engine-err { border-color: #d43d2a; color: #d43d2a; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
button, select, input, textarea { font: inherit; color: var(--ink); }
button, select { cursor: pointer; border: 1px solid var(--line); background: var(--card);
  border-radius: 2px; padding: 6px 11px; font-size: 13px; font-weight: 600;
  transition: background .25s ease, border-color .25s ease, color .25s ease; }
.controls button { display: inline-flex; align-items: center; gap: 6px; }
.controls button svg { flex: none; }
button:disabled { opacity: .45; cursor: default; }
select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
button.primary:hover { background: var(--accent); border-color: var(--accent); color: #f2f6fb; }
button.quiet { color: var(--ink2); }
button.small { padding: 4px 10px; font-size: 12.5px; }
button.recording { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-text); }

.session-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--good); background: var(--card); padding: 10px 14px; font-size: 13px; }
.session-banner.paused { border-left-color: var(--warn-text); }
.session-banner.ended { border-left-color: var(--ink3); color: var(--ink2); }
.session-banner .who { font-weight: 600; }
.session-banner .chip { background: var(--card2); }
/* Degraded speaker identity (spec section 8): persistent while a live session
   has zero platform-attributed lines. The hook renders here; T20 completes
   the condition logic. */
.degraded-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
  border: 1px solid var(--warn-text); border-left: 3px solid var(--warn-text); background: var(--warn-soft);
  color: var(--warn-text); padding: 10px 14px; font-size: 13px; }
.degraded-banner .who { font-weight: 600; }

/* Capture strip: the whole point of the session, one glance. One 3-segment
   block per gap (cue, rationale, consequence), same meter language as the cards. */
.capture-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--card);
  padding: 10px 14px; }
.capture-strip .cap-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); font-weight: 500; }
.cap-gaps { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-gap { display: flex; gap: 2px; }
.cap-gap .seg { width: 14px; height: 8px; background: var(--track); }
.cap-gap .seg.done { background: var(--good); }
.cap-stats { font-size: 12.5px; color: var(--ink2); margin-left: auto; }
.cap-toggle { height: 22px; width: 22px; padding: 0; border: 1px solid var(--line); background: var(--card2);
  color: var(--ink2); border-radius: 2px; font-size: 12px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; }
.capture-strip.collapsed .cap-toggle { transform: rotate(-90deg); }
.capture-strip.collapsed .cap-gaps, .capture-strip.collapsed .cap-legend { display: none; }
.cap-legend { display: inline-flex; gap: 12px; align-items: center; }
.cap-key { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink3); }
.cap-key .sw { width: 12px; height: 8px; background: var(--good); border-radius: 0; display: inline-block; opacity: .85; }
.cap-audit { margin-left: 8px; font-size: 12px; padding: 4px 10px; }
.cap-audit.reviewing { border-color: var(--gold); color: var(--gold-text); background: var(--gold-soft); }

.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .lanes { grid-template-columns: 1fr; } }
.lane-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.lane-head h2 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink2); margin: 0; font-weight: 500; }
.lane-head .count { font-size: 12px; color: var(--ink3); }
.lane { display: flex; flex-direction: column; gap: 10px; min-height: 30px; }
.col.progress .lane-head h2 { color: var(--accent-text); }
.col.covered .lane-head h2 { color: var(--good-text); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; }
.card.live { border-color: var(--accent); }
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .4; }
.col.drop { outline: 2px dashed var(--accent); outline-offset: -3px; border-radius: 2px; }
.card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.gap-id { font-size: 12px; color: var(--ink2); font-weight: 500; }
.tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.tag.experiential { background: var(--accent-soft); color: var(--accent-text); }
.tag.factual { background: var(--card2); color: var(--ink2); border: 1px solid var(--line); }
.tag.seed { background: var(--card2); color: var(--ink2); border: 1px dashed var(--ink3); }
.tag.golden { background: var(--gold-soft); color: var(--gold-text); }
.tag.cues { background: var(--accent-soft); color: var(--accent-text); }
.tag.contradiction { background: var(--warn-soft); color: var(--warn-text); }
.tag.hypothetical { background: var(--good-soft); color: var(--good-text); }
.tag.expectancy { background: var(--card2); color: var(--ink2); border: 1px solid var(--line); }
.q { font-size: 13.5px; margin: 0; }
.cdm-track { display: flex; gap: 2px; margin-top: 10px; }
.cdm-seg { flex: 1; height: 6px; border-radius: 0; background: var(--track); }
.cdm-seg.done { background: var(--good); }
.cdm-labels { display: flex; gap: 2px; margin-top: 4px; }
.cdm-labels span { flex: 1; font-size: 10px; color: var(--ink3); }
.cdm-labels .done { color: var(--good-text); }
/* Manual-covered note: a gap the interviewer marked covered by hand, without
   three depth elements, says so instead of showing an empty meter. */
.manual-note { font-size: 11px; color: var(--good-text); margin-top: 8px; }
.gap-actions { display: flex; gap: 6px; margin-top: 8px; }
.gap-mini { font-size: 11px; padding: 3px 8px; color: var(--ink2); font-weight: 500; }
.gap-mini:hover { color: var(--accent-text); }
.card.on-now { box-shadow: inset 3px 0 0 var(--accent); }
.dismissed-tray { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12px; color: var(--ink3); }
.dismissed-tray .dm-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; }
.dismissed-tray .dm { display: inline-flex; align-items: center; gap: 4px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 9px; }
.dismissed-tray .dm button { padding: 1px 7px; font-size: 11px; border-radius: 999px; color: var(--ink2); }
/* On-now anchor above the probe cards: the current topic stays put while the
   probe cards below it change, so the interviewer never loses the thread. */
.current-topic { border: 1px solid var(--accent); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 2px; padding: 7px 10px; margin-bottom: 10px; font-size: 12.5px; }
.current-topic .ct-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; margin-right: 6px; }

.panels { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-top: 18px; align-items: start; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.panel-head h2 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; margin: 0; color: var(--ink2); font-weight: 500; }
.panel-head .sub { font-size: 12px; color: var(--ink3); }
.probe { border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; background: var(--card2); margin-bottom: 10px; }
.probe p { margin: 6px 0 10px; font-size: 13px; }
.probe .actions { display: flex; gap: 8px; }
.gm { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 2px; padding: 10px 12px; background: var(--card2); margin-bottom: 10px; }
.gm.confirmed { border-left-color: var(--good); }
.gm .quote { font-family: "Newsreader", Georgia, serif; font-size: 14.5px; font-style: italic; margin: 4px 0 8px; }
.gm .meta2 { font-size: 11px; color: var(--ink3); }
.empty { font-size: 12.5px; color: var(--ink3); }

/* Board on the left, live transcript on the right. The normal board keeps
   document scrolling, so every section remains reachable with an ordinary
   page scroll. Focus mode switches to the room-sized, internally scrolling
   layout below. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw, 420px); gap: 14px; margin-top: 0; align-items: start; }
.layout.general-session { grid-template-columns: minmax(0, 1fr); }
.layout.general-session .transcript { min-height: 58vh; }
.t-scroll { max-height: calc(100vh - 240px); overflow-y: auto; }
@media (min-width: 1101px) {
  body.on-board.focus { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.on-board.focus .wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  body.on-board.focus #screen-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.on-board.focus header.board-head, body.on-board.focus .capture-strip { flex: none; }
  body.on-board.focus .layout { flex: 1; min-height: 0; align-items: stretch; }
  /* The board is a flex column: the three lanes take the room and each scrolls
     on its own, while the probe/golden panels stay pinned at the foot. */
  body.on-board.focus .board { display: flex; flex-direction: column; min-height: 0; }
  body.on-board.focus .lanes { flex: 1; min-height: 0; align-items: stretch; margin: 0; }
  body.on-board.focus .col { min-height: 0; overflow-y: auto; padding-right: 4px; }
  body.on-board.focus .lane-head { position: sticky; top: 0; z-index: 1; margin: 0 0 8px; padding-top: 2px; background: var(--bg); }
  /* Probe cards are the copilot's whole output to the interviewer; they never
     fall below the fold. Bounded height, internal scroll when cards overflow. */
  body.on-board.focus .panels { flex: none; margin-top: 14px; max-height: 38%; align-items: stretch; }
  body.on-board.focus .panels .panel { display: flex; flex-direction: column; min-height: 0; }
  body.on-board.focus .panels .panel > div:last-child { overflow-y: auto; min-height: 0; }
  body.on-board.focus .transcript { display: flex; flex-direction: column; min-height: 0; }
  body.on-board.focus .t-scroll { flex: 1; max-height: none; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .t-scroll { max-height: 260px; }
}
/* Focus mode requests browser fullscreen and still works as a compact board
   if the browser declines the request. Keep live controls in a room-visible
   dock while removing navigation and descriptive chrome. */
body.focus .masthead, body.focus .head-info, body.focus .session-banner,
body.focus .degraded-banner, body.focus footer { display: none; }
body.focus header.board-head { margin: 0; min-height: 0; }
body.focus .wrap { max-width: none; padding: 12px 16px 76px; }
body.focus .controls { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 70; flex-wrap: nowrap; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 12px; box-shadow: 0 12px 34px rgba(11,18,32,.22); }
body.focus .controls button { border-radius: 999px; }
body.focus #btn-focus { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 760px) {
  body.focus .controls { max-width: calc(100vw - 20px); overflow-x: auto; }
  body.focus #model-sel { display: none; }
}
.t-line { display: grid; grid-template-columns: 52px 92px 1fr; gap: 10px; font-size: 13px; padding: 3px 0; }
.t-time { color: var(--ink3); }
.t-speaker { color: var(--ink2); font-weight: 600; }
.t-speaker.renameable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.t-partial { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }
.t-partial span { color: var(--ink3); font-style: italic; }
.transcript { position: relative; }
.jump-live { position: absolute; right: 16px; bottom: 14px; z-index: 5; font-size: 12px; padding: 5px 12px;
  border-radius: 999px; background: var(--accent); color: #f2f6fb; border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(11,18,32,.22); }
/* Voice roster: every voice heard so far, plus roster names still unmatched. */
.speakers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.speakers .chip.unnamed { background: var(--warn-soft); color: var(--warn-text); border-color: transparent; }
.speakers .chip.pending { border-style: dashed; background: transparent; }
.speakers .chip.renameable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

dialog { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
  padding: 20px 22px; width: min(540px, 92vw); }
dialog::backdrop { background: rgba(11,18,32,.5); }
.dialog-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0; }
dialog h2 { font-family: "Newsreader", Georgia, serif; font-size: 20px; font-weight: 500; margin: 3px 0 14px; }
dialog.dialog-sm { width: min(420px, 92vw); }
dialog.dialog-sm .dialog-text { font-size: 13.5px; margin: 10px 0 0; line-height: 1.5; }
dialog.dialog-sm input, dialog.dialog-sm textarea { font: inherit; font-size: 13px; padding: 0 10px; width: 100%;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card2); color: var(--ink); }
dialog.dialog-sm input { height: 32px; }
dialog.dialog-sm textarea { padding: 8px 10px; resize: vertical; }
dialog.dialog-sm input:focus-visible, dialog.dialog-sm textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dialog-actions { display: flex; gap: 8px; margin-top: 18px; }
.dialog-actions button { height: 32px; padding: 0 16px; }
#audit-body { max-height: 52vh; overflow-y: auto; margin-top: 6px; }
.af { border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; margin-bottom: 8px; background: var(--card2); }
.af-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.af-verdict { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.af-verdict.missed { background: var(--accent-soft); color: var(--accent-text); }
.af-verdict.not_supported { background: var(--warn-soft); color: var(--warn-text); }
.af-verdict.supported { background: var(--good-soft); color: var(--good-text); }
.af .af-ev { font-size: 12.5px; color: var(--ink2); margin: 4px 0 8px; }
.af .actions { display: flex; gap: 8px; }
.audit-empty { font-size: 13px; color: var(--ink3); padding: 8px 0; }

/* Auth and session start/join screens. */
.gate { max-width: 560px; margin: 8vh auto 0; }
.gate .panel { padding: 24px 26px; }
.gate h2 { font-family: "Newsreader", Georgia, serif; font-size: 22px; font-weight: 500; margin: 4px 0 12px; }
.gate p { font-size: 13.5px; color: var(--ink2); }
.start-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } }
.field { display: block; margin: 16px 0 0; }
.field-label { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); font-weight: 500; margin-bottom: 5px; }
.field input[type="text"], .field input[type="url"], .field select, .field textarea {
  display: block; width: 100%; height: 32px; padding: 0 10px; font-size: 13px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--ink3); margin: 12px 0 0; line-height: 1.5; }
.notice { font-size: 12px; color: var(--warn-text); background: var(--warn-soft); padding: 8px 10px;
  border-radius: 2px; margin: 14px 0 0; }
.placeholder-region { border: 1px dashed var(--line); border-radius: 2px; padding: 12px 14px; margin-top: 16px;
  background: var(--card2); }
/* Person grid: a header row of mono micro-labels over 32px input rows that
   share its column template, so each label sits above its field. */
.person-head, .person-row { display: grid; grid-template-columns: 1.4fr 1fr 92px 32px; gap: 8px; align-items: center; }
.person-head { margin-bottom: 5px; margin-top: 14px; }
.person-head span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500; }
.person-row { margin-bottom: 6px; }
.person-row input { font: inherit; font-size: 13px; height: 32px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--card2); color: var(--ink); min-width: 0; }
.person-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.person-row .row-del { height: 32px; padding: 0; font-size: 16px; line-height: 1; color: var(--ink3);
  display: inline-flex; align-items: center; justify-content: center; }
.person-row .row-del:hover { color: var(--warn-text); }
.session-list { display: flex; flex-direction: column; gap: 8px; }
.session-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card2); padding: 10px 12px;
  font-weight: 400; font-size: 13px; }
.session-item:hover { border-color: var(--accent); }
.session-item .sid { color: var(--ink3); font-size: 11px; }
/* Engagement combobox: a search input over a dropdown panel of results. */
.combo { position: relative; margin-top: 8px; }
.combo-input { display: block; width: 100%; height: 32px; padding: 0 10px; font-size: 13px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.combo-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.combo-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin-top: 0; padding: 6px; max-height: 264px; overflow-y: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.combo-panel[hidden] { display: none; }
.engagement-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.engagement-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card2); padding: 10px 12px; font-weight: 400; font-size: 13px; }
.engagement-item:not(:disabled):hover { border-color: var(--accent); }
.engagement-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.engagement-item .sid { color: var(--ink3); font-size: 11px; }
.engagement-item .reason { color: var(--warn-text); font-size: 11.5px; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 2px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .25s; max-width: 80vw; }
#toast.show { opacity: 1; }
footer { margin-top: 26px; font-size: 11.5px; color: var(--ink3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- stand-up note editor (T10) ---------- */
.dialog-notes { width: min(980px, 94vw); }
.note-stale { color: var(--warn-text); background: var(--warn-soft); padding: 6px 10px;
  border-radius: 2px; font-size: 12.5px; margin-bottom: 10px; display: inline-block; }
.note-versions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.note-version-row { display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); background: var(--card2); padding: 8px 12px; cursor: pointer; }
.note-version-row:hover { border-color: var(--accent); }
.note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.note-label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 10px; }
.note-label textarea, .note-entry textarea { width: 100%; box-sizing: border-box; }
.note-summary-ro { font-size: 13.5px; margin: 0 0 10px; }
.note-editor-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .note-editor-grid { grid-template-columns: 1fr; } }
.note-section { margin-bottom: 14px; }
.note-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink3); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.note-entry { border: 1px solid var(--line); background: var(--card2); padding: 8px 10px;
  margin-bottom: 6px; font-size: 13px; }
.note-entry p { margin: 0 0 4px; }
.note-entry-new { border-style: dashed; }
.note-entry-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.note-reviewer { font-size: 10.5px; }
.note-cite { border: 1px solid var(--line); background: none; color: var(--accent-text);
  font-size: 11px; padding: 1px 5px; cursor: pointer; border-radius: 2px; }
.note-cite:hover { border-color: var(--accent); }
.note-owner { max-width: 160px; }
.note-due { max-width: 150px; }
.note-cited { border-left: 1px solid var(--line); padding-left: 14px; max-height: 50vh; overflow-y: auto; }
.note-cited h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); margin: 0 0 6px; }
.note-line-hit { background: var(--accent-soft); }

/* ---------- Session Library (T14) ---------- */
.lib-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.lib-toolbar #lib-search { flex: 1 1 320px; min-width: 220px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card); }
.lib-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  border: 1px solid var(--line); background: var(--card2); padding: 12px; margin-bottom: 10px; }
.lib-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.lib-filters select, .lib-filters input { min-width: 130px; font-size: 13px;
  text-transform: none; letter-spacing: normal; }
.lib-filter-actions { display: flex; gap: 6px; }
.lib-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.lib-chip { cursor: pointer; }
.lib-chip:hover { border-color: var(--accent); }
.lib-panel { overflow-x: auto; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lib-table th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lib-table th.lib-sort { cursor: pointer; user-select: none; }
.lib-table th.lib-sort:hover { color: var(--accent); }
.lib-table th.lib-sort.active { color: var(--accent-text); }
.lib-table th.lib-sort.active::after { content: " " attr(data-marker); }
.lib-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lib-row { cursor: pointer; }
.lib-row:hover td { background: var(--card2); }
.lib-title-cell { max-width: 420px; }
.lib-snippet { margin-top: 4px; font-size: 12.5px; color: var(--ink2); }
.lib-snippet mark { background: var(--accent-soft); color: var(--accent-text); padding: 0 2px; }
.lib-foot { display: flex; align-items: center; gap: 12px; padding: 10px; }
.lib-detail-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.lib-detail-actions { justify-content: flex-start; margin-bottom: 8px; }
.lib-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink3); margin: 14px 0 6px; }
.lib-transcript { max-height: 40vh; overflow-y: auto; border: 1px solid var(--line);
  background: var(--card2); padding: 8px 10px; }
.lib-export-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--card2); padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; }
.lib-events { margin-top: 10px; font-size: 12.5px; }
.lib-verify { border: 1px dashed var(--line); padding: 10px 12px; margin-top: 10px; }
.lib-verify input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }

/* ---------- Interview Prep workspace (T06) ---------- */
/* Home: preparation list rows, styled like the existing session/engagement
   list rows but namespaced so this file's non-prep rules stay untouched. */
.prep-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.prep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card2); padding: 10px 12px; font-weight: 400; font-size: 13px; cursor: pointer; }
.prep-row:hover { border-color: var(--accent); }
.prep-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prep-row-title { font-weight: 600; font-size: 13.5px; }
.prep-row-meta { font-size: 12px; color: var(--ink2); }

/* Workspace tabs: Brief / Interview guide / Versions. */
.prep-tabs { display: flex; gap: 4px; margin-top: 8px; }
.prep-tab { border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--ink2); font-size: 13px; font-weight: 600; padding: 6px 4px; border-radius: 0; }
.prep-tab:hover { color: var(--accent-text); }
.prep-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.prep-tabpanel { margin-top: 14px; }
.prep-placeholder { color: var(--ink3); font-size: 13px; padding: 22px; text-align: center;
  border-style: dashed; }

/* Brief tab: the facility pair sits in a two-up grid with the other optional
   planning fields; collapses to one column at the phone tier. */
.prep-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 900px) { .prep-brief-grid { grid-template-columns: 1fr; } }
/* .field only styles input[type=text|url]; extend the same box to the date
   and number inputs the Brief grid also uses. */
.prep-field input[type="date"], .prep-field input[type="number"] {
  display: block; width: 100%; height: 32px; padding: 0 10px; font-size: 13px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.prep-required { color: var(--warn-text); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; margin-left: 6px; font-weight: 600; }
.prep-field-error { color: var(--warn-text); font-size: 11.5px; margin-top: 4px; }
.prep-client-readout { font-size: 13.5px; padding: 6px 0; color: var(--ink); font-weight: 600; }
.prep-save-state { font-size: 12px; color: var(--ink3); }

/* Client search dialog: results list plus the pinned "add as new client" row. */
.prep-client-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
  max-height: 260px; overflow-y: auto; }
.prep-client-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card2); padding: 8px 10px; font-weight: 400; font-size: 13px; cursor: pointer; }
.prep-client-result:hover { border-color: var(--accent); }
.prep-client-result small { color: var(--ink3); font-size: 11px; }
.prep-client-create { border-style: dashed; }
.prep-results-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); margin: 4px 0; }
.prep-dialog-error { color: var(--warn-text); }

/* Laptop-compact tier (spec: at or under 1480px). */
@media (max-width: 1480px) {
  .prep-tabs { gap: 2px; }
  .prep-tab { font-size: 12.5px; padding: 5px 3px; }
  .prep-brief-grid { gap: 0 12px; }
}

/* ---------- Interview guide editor (T07) ----------
   Modeless document (view G of the prototype, re-implemented rather than
   copied): a two-column shell (the editable guide, a Time plan rail),
   per-section handle menu, the Add-section form, and the Document/Source
   toggle. Section fields (title, purpose, question, minutes, follow-ups)
   are plain contenteditable blocks; there is no rich-text toolbar. */
.prep-guide-shell { display: grid; grid-template-columns: 1fr 300px; gap: 16px;
  margin-top: 14px; align-items: start; }
.prep-guide-hint { margin: 3px 0 0; }
.prep-guide-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.prep-guide-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Document / Source segmented toggle. */
.prep-guide-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.prep-guide-seg-btn { border: none; border-radius: 0; background: var(--card2); color: var(--ink2);
  font-size: 12.5px; padding: 5px 12px; }
.prep-guide-seg-btn + .prep-guide-seg-btn { border-left: 1px solid var(--line); }
.prep-guide-seg-btn.active { background: var(--btn-bg); color: var(--btn-text); }

/* One section block: a left gutter for the handle, then the row (number,
   title, flags), purpose, question, and follow-ups, each a contenteditable
   field committed straight to the in-memory model on input, never scraped
   from the DOM at save time. */
.prep-guide-sec { position: relative; padding: 14px 4px 14px 30px; border-top: 1px solid var(--line); }
.prep-guide-sec:first-child { border-top: none; }
.prep-guide-gutter { position: absolute; left: 0; top: 14px; }
.prep-guide-handle { border: none; background: none; padding: 2px 5px; color: var(--ink3);
  opacity: .55; font-size: 13px; letter-spacing: -1px; cursor: pointer; }
.prep-guide-handle:hover, .prep-guide-handle:focus-visible { opacity: 1; color: var(--ink); }
.prep-guide-sec-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prep-guide-num { font-size: 11px; color: var(--ink3); flex: none; }
.prep-guide-title { flex: 1 1 220px; font-weight: 600; font-size: 15px; border-radius: 2px; padding: 1px 3px; }
.prep-guide-flags { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.prep-guide-min { font-size: 12px; color: var(--ink2); padding: 1px 4px; border-radius: 2px; }
.prep-guide-purpose { color: var(--ink2); font-size: 13px; margin: 6px 0 0; padding: 1px 3px; border-radius: 2px; }
.prep-guide-question { font-size: 13.5px; margin: 6px 0 0; padding: 1px 3px; border-radius: 2px; }
/* The literal question text never contains quote marks; typographic quotes
   are decorative, keyed off the quoted model field, so a user typing in
   this field never has to fight over stray curly-quote characters. */
.prep-guide-question[data-quoted="true"]:not(:empty)::before { content: "\201C"; }
.prep-guide-question[data-quoted="true"]:not(:empty)::after { content: "\201D"; }
.prep-guide-question[data-quoted="false"] { font-style: italic; color: var(--ink2); }
.prep-guide-follow { margin: 6px 0 0; padding: 0 0 0 20px; font-size: 13px; color: var(--ink2); border-radius: 2px; }
.prep-guide-follow li { margin: 2px 0; }
/* A section with no follow-ups still renders one empty <li> so the list
   stays clickable/typeable; drop its marker and show a hint instead of a
   lonely bullet. */
.prep-guide-follow li:only-child:empty { list-style: none; margin-left: -20px; }
.prep-guide-follow li:only-child:empty::before { content: "Add a follow-up, optional"; color: var(--ink3); }
.prep-guide-title:focus-visible, .prep-guide-purpose:focus-visible, .prep-guide-question:focus-visible,
.prep-guide-min:focus-visible, .prep-guide-follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.prep-guide-title:empty::before, .prep-guide-purpose:empty::before, .prep-guide-question:empty::before {
  content: attr(data-placeholder); color: var(--ink3); }

/* The labeled handle menu (prototype NOTES.md Rev 8: replaced four icon
   buttons with one menu after user feedback that the icons were unclear). */
.prep-guide-menu { position: absolute; left: 26px; top: 30px; z-index: 20; display: flex; flex-direction: column;
  min-width: 180px; background: var(--card); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow: hidden; }
.prep-guide-menu-item { border: none; border-radius: 0; background: var(--card); text-align: left;
  font-weight: 500; font-size: 12.5px; padding: 8px 12px; color: var(--ink); }
.prep-guide-menu-item:hover, .prep-guide-menu-item:focus-visible { background: var(--card2); }
.prep-guide-menu-warn { color: #d43d2a; }

/* "+ Add section" and its structured form. */
.prep-guide-add-row { margin-top: 14px; }
.prep-guide-form { border: 1px dashed var(--line); border-radius: 2px; padding: 14px; margin-top: 10px; background: var(--card2); }
.prep-guide-form .field { margin: 12px 0 0; }
.prep-guide-form .field:first-child { margin-top: 0; }
.prep-guide-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; flex-wrap: wrap; }
.prep-guide-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.prep-guide-minutes-field { margin: 0; }
.prep-guide-minutes-field input { width: 90px; }

/* Source pane: the canonical markdown, monospace, no formatting help. */
.prep-guide-source { display: block; width: 100%; min-height: 360px; box-sizing: border-box; padding: 10px 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.5;
  background: var(--card2); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); resize: vertical; }

.prep-guide-time-total { margin-top: 5px; }
.prep-guide-over { color: var(--warn-text); }

/* Laptop-compact tier: rail 300 to 260, tighter section rhythm, smaller
   title (spec: at or under 1480px; prototype NOTES.md Rev 9). */
@media (max-width: 1480px) {
  .prep-guide-shell { grid-template-columns: 1fr 260px; gap: 12px; }
  .prep-guide-sec { padding: 11px 4px 11px 26px; }
  .prep-guide-gutter { top: 11px; }
  .prep-guide-title { font-size: 14px; }
}

/* Phone collapse: the rail moves above the document and the two-column
   grid drops to one (spec: under 900px). The handle stays visible (never
   hover-only) at every width already, so no touch-specific reveal rule is
   needed here. */
@media (max-width: 900px) {
  .prep-guide-shell { grid-template-columns: 1fr; }
  .prep-guide-rail { order: -1; }
  .prep-guide-menu { left: 20px; }
}

/* ---------- Tracked-change proposals + readiness rail (T09) ----------
   Inline Accept/Dismiss on an AI-suggested edit, del/ins per the prototype
   (docs/specs/2026-08-08-interview-prep-workspace/prototype/index.html,
   views E and G), and the Readiness rail panel under Time plan. */
.prep-guide-assist-state { font-size: 12px; color: var(--ink3); }
.prep-guide-assist-state.err { color: var(--warn-text); }

.prep-guide-empty { text-align: center; padding: 26px 14px; margin-bottom: 10px;
  border: 1px dashed var(--line); border-radius: 2px; }
.prep-guide-empty .hint { margin: 0 0 10px; }

.prep-proposal del { color: var(--warn-text); background: var(--warn-soft); text-decoration: line-through; }
.prep-proposal ins { color: var(--good-text); background: var(--good-soft); text-decoration: none; }
.prep-proposal-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 11.5px;
  color: var(--ink3); flex-wrap: wrap; }
.prep-proposal-fallback { border: 1px dashed var(--line); border-radius: 2px; padding: 10px 12px;
  margin: 10px 0 0; background: var(--card2); }
.prep-proposal-fallback del, .prep-proposal-fallback ins { display: block; font-size: 13px; padding: 2px 0; }
.prep-proposal-fallback del { color: var(--warn-text); text-decoration: line-through; }
.prep-proposal-fallback ins { color: var(--good-text); text-decoration: none; }

.prep-readiness { margin-top: 14px; }
.prep-check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.prep-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.prep-check-mark { flex: none; width: 16px; text-align: center; color: var(--good-text); font-weight: 600; }
.prep-check.open .prep-check-mark { color: var(--warn-text); }
.prep-check-text { flex: 1; }
.prep-check-text a.prep-jump-proposal { color: var(--accent-text); }
.prep-check .prep-dismiss-finding { flex: none; height: 22px; padding: 2px 8px; font-size: 11px; }

/* Laptop-compact tier: rail panels stay the same width as Time plan above
   them (spec: at or under 1480px), no additional rule needed beyond the
   .prep-guide-shell/.prep-guide-rail width change already in T07's block. */

/* ---------- Versions tab (T10, spec 8.4 list half) ----------
   Newest-first version cards: number, latest/facility chips, the published
   date/author/duration line, and a native <details> markdown viewer (no new
   JS wiring needed for expand/collapse). ".prep-guide-source" (T07) is
   reused for the <pre> markdown block so the monospace source styling
   matches the guide editor's own Source pane exactly. */
.prep-versions-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.prep-versions-head h2 { margin: 0; }
.prep-version-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.prep-version-card { border: 1px solid var(--line); border-radius: 2px; background: var(--card); padding: 12px 14px; }
.prep-version-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prep-version-num { font-weight: 600; font-size: 13.5px; }
.prep-version-meta { font-size: 12px; color: var(--ink2); margin: 4px 0 0; }
.prep-version-source { margin-top: 8px; }
.prep-version-source summary { cursor: pointer; font-size: 12px; color: var(--accent-text); }
.prep-version-source pre.prep-guide-source { white-space: pre-wrap; margin: 8px 0 0;
  max-height: 320px; overflow-y: auto; resize: none; }

/* Laptop-compact tier (spec: at or under 1480px). */
@media (max-width: 1480px) {
  .prep-guide-head-actions { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------- Invite Oracle attestation step (T07) ---------- */
.attestation-region { margin-top: 16px; border: 1px solid var(--line); border-radius: 2px;
  padding: 12px 14px; background: var(--card2); }
.attestation-policy { font-size: 13px; font-weight: 600; margin: 4px 0; min-height: 1em; }
.attestation-notice { font-style: italic; }
.attestation-refusal { margin: 10px 0 0; }
.attest-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  font-size: 12.5px; cursor: pointer; }
.attest-check input { margin: 2px 0 0; accent-color: var(--ink); }
.attest-check input:disabled + span { color: var(--ink3); }

/* ---------- Reservation orchestration state timeline (T07) ---------- */
.state-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 12px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; }
.timeline-step { padding: 2px 8px; border-radius: 999px; background: var(--card2);
  color: var(--ink3); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .06em; }
.timeline-step.done { background: var(--good-soft); color: var(--good-text); border-color: transparent; }
.timeline-step.current { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.timeline-sep { color: var(--ink3); }
.timeline-terminal { padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .06em; background: var(--warn-soft); color: var(--warn-text); }
.timeline-terminal.cancelled { background: var(--card2); color: var(--ink3); }
.timeline-reason { font-size: 11px; color: var(--ink3); margin-left: 6px; }

/* ---------- Organizer control strip: stop/leave + unresolved (T07) ---------- */
.control-unresolved { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; border: 1px solid #d43d2a; border-left: 3px solid #d43d2a;
  background: var(--warn-soft); color: var(--warn-text); padding: 10px 14px; font-size: 13px; }
.control-unresolved .who { font-weight: 600; }