/* WHOOM views. Only design/tokens.css variables (see design/DESIGN.md); components in static/ui/.
   Layout dimensions that are not tokens are named once here. Media-query breakpoints stay literal. */
:root {
  --page-pad: var(--sp-10);       /* DESIGN: 40px page margin */
  --col-side: 290px;              /* staff view side columns (W10) */
  --h-video-staff: 300px;         /* staff video area (W10) */
  --h-strip: 132px;               /* row of small tiles under a shared screen (W08) */
  --w-chat: 360px;                /* customer chat panel (W09) */
  --w-signin: 420px;              /* W01 */
  --w-page-narrow: 820px;         /* W02 */
  --w-lobby-form: 400px;          /* W07 */
  --w-narrow: 780px;              /* full-screen single column (W18, W19) */
  --w-doc: 760px;                 /* protocol document (W22) */
  --w-pv-side: 520px;             /* protocol draft, right column (W21) */
  --w-share: 600px;               /* W12 */
  --w-split: 860px;               /* W14 */
  --h-split: 600px;
  --w-split-nav: 260px;
  --strip-tile-w: 80px;           /* video strip in protocol views (W21) */
  --w-steps: 340px;               /* W20 */
  --swatch: var(--sp-8);          /* agent colour swatch (W14) */
  --w-room-side: 400px;           /* project room side column (DESIGN: 400px) */
  --w-search: 280px;              /* search field in the meetings panel (W26) */
  --w-transcript: 520px;          /* archive transcript column (W06) */
  --w-sheet: 480px;               /* profile side panel (DESIGN: 480px from the right) */
  --w-plan-side: 340px;           /* W30 left column "Från samtalet" */
  --h-plan-strip: 104px;          /* W30 video strip */
  --w-dev-side: 320px;            /* developer mode list column */
}

/* ---------- shared helpers ---------- */
.wordmark { font-weight: var(--fw-semibold); letter-spacing: .12em; font-size: var(--fs-body-lg); color: var(--text); text-decoration: none; }
.wordmark--muted { font-size: var(--fs-small); color: var(--text-muted); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--sp-1); }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; display: flex; }
.grow > .input { flex: 1; }
.spacer { flex: 1; }
.center { text-align: center; }
.lead-muted { font-size: var(--fs-body-lg); color: var(--text-muted); }
.lead-2 { font-size: var(--fs-body-lg); color: var(--text-2); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.error { color: var(--danger-text); margin: 0; min-height: 1em; }
.field__error:empty { display: none; }
.t-label--accent { color: var(--accent-text); font-size: var(--fs-small); }
.divider-label { display: flex; align-items: center; gap: var(--sp-3); }
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: var(--sp-1); }
code { background: var(--surface-sunken); padding: 1px var(--sp-1); border-radius: var(--r-sm); font-size: var(--fs-small); }
.floating-btn { position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 30; box-shadow: var(--shadow-float); }

/* ---------- W01 sign-in ---------- */
.signin-page { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-6); }
.signin-page .wordmark { font-size: var(--fs-h3); }
.signin-card { width: min(var(--w-signin), 100%); background: var(--surface); border-radius: var(--r-dialog); padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-5); }
.signin-card h1 { font-size: calc(var(--fs-h1) - 2px); }
.google-button { display: flex; justify-content: center; min-height: var(--h-btn); }
.signin-note { margin-top: calc(var(--sp-2) * -1); }
.signin-customer { font-size: var(--fs-body); color: var(--text-muted); text-align: center; }

/* ---------- W02 project list ---------- */
.page { min-height: 100%; display: flex; flex-direction: column; }
.topbar { height: calc(var(--sp-12) + var(--sp-4)); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-pad); border-bottom: 1px solid var(--line); }
.topbar__user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); color: var(--text-2); }
.page__main { width: min(var(--w-page-narrow), calc(100% - var(--sp-8))); margin: 0 auto; padding: var(--sp-12) 0; display: flex; flex-direction: column; gap: var(--sp-7); }
.page__title { font-size: calc(var(--fs-h1) + 2px); }
.row-form { display: flex; gap: var(--sp-3); }
.list-panel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list-panel:empty { display: none; }
.project-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.project-row + .project-row { border-top: 1px solid var(--line); }
.project-row__name { font-size: calc(var(--fs-lead) + 1px); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; }
.project-row__name:hover { color: var(--accent-text); }
.project-row__meta { font-size: var(--fs-small); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.project-row__meta.is-live { color: var(--accent-text); }
.live-dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent); display: inline-block; }
.project-row__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* ---------- W07 lobby ---------- */
.lobby { min-height: 100%; padding: var(--sp-8) var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8); }
.lobby__body { flex: 1; display: flex; gap: var(--sp-12); align-items: center; }
.lobby__preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.lobby__video { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-dialog); overflow: hidden; background: var(--tile-1); }
.lobby__video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.lobby__video .video-tile__name:empty { display: none; }
.lobby__toggles { display: flex; justify-content: center; gap: var(--sp-3); }
.lobby__form { width: var(--w-lobby-form); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.lobby__form h1 { font-size: calc(var(--fs-h1) + 2px); }
.lobby__form .btn--lg { margin-top: var(--sp-1); font-size: var(--fs-lead); }
.level-meter { display: flex; gap: var(--sp-1); align-items: flex-end; height: calc(var(--sp-4) + 2px); }
.level-meter span { width: calc(var(--sp-4) + 2px); border-radius: 2px; background: var(--line-strong); transition: background-color 60ms; }
.level-meter span.on { background: var(--accent); }
@media (max-width: 900px) {
  .lobby { padding: var(--sp-5); }
  .lobby__body { flex-direction: column; align-items: stretch; }
  .lobby__form { width: auto; }
}

/* ---------- meeting: shared ---------- */
#meeting { height: 100%; }
#col-main { min-width: 0; min-height: 0; }
#grid { display: grid; gap: var(--sp-3); min-height: 0; align-content: center; }
.video-tile.self video { transform: scaleX(-1); }
.video-tile.screen { background: var(--surface-raised); border-radius: var(--r-panel); }
.video-tile.screen video { object-fit: contain; }
.video-tile.screen .video-tile__name { background: var(--primary-bg); color: var(--primary-fg); }
.call-controls { display: flex; justify-content: center; align-items: center; gap: var(--sp-3); }
.call-controls .btn--icon[aria-pressed="true"] { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
#audio-sink { display: none; }

/* ---------- meeting: customer (W08, W09, W13) ---------- */
#meeting:not(.staff) { padding: var(--sp-7) var(--sp-10); }
#meeting:not(.staff) #col-main {
  height: 100%; display: grid; gap: var(--sp-5) var(--sp-6);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "header header" "banner chat" "grid chat" "controls controls";
}
#meeting:not(.staff) #call-header { grid-area: header; }
#meeting:not(.staff) #shared-banner { grid-area: banner; }
#meeting:not(.staff) #grid {
  grid-area: grid; grid-template-columns: repeat(auto-fit, minmax(var(--h-video-staff), 1fr)); align-content: center;
}
#meeting:not(.staff) #grid { overflow: auto; } /* many people: the grid scrolls instead of covering the controls */
#meeting:not(.staff) #grid .video-tile { border-radius: var(--r-panel); max-height: 100%; }
#meeting:not(.staff) #grid.has-screen { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) var(--h-strip); align-content: stretch; }
#meeting:not(.staff) #grid.has-screen .video-tile { aspect-ratio: auto; height: 100%; border-radius: var(--r-tile); }
#meeting:not(.staff) #grid.has-screen .video-tile.screen { grid-column: 1 / -1; border-radius: var(--r-panel); }
#meeting:not(.staff) #col-transcript { grid-area: chat; width: var(--w-chat); }
#meeting:not(.staff) #controls { grid-area: controls; }
#meeting:not(.staff) .call-controls .btn--icon { width: var(--h-btn-lg); height: var(--h-btn-lg); }
#meeting:not(.staff) .leave-btn { height: var(--h-btn-lg); padding: 0 var(--sp-6); margin-left: var(--sp-3); font-size: var(--fs-body-lg); }
.call-header { display: flex; justify-content: space-between; align-items: center; }
.call-header__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
#meeting.staff #call-header { display: none; }
@media (max-width: 860px) {
  #meeting:not(.staff) { padding: var(--sp-4); }
  #meeting:not(.staff) #col-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "banner" "grid" "chat" "controls"; }
  #meeting:not(.staff) #col-transcript { width: auto; max-height: 50vh; }
}

/* ---------- W13 banner ---------- */
.banner { background: var(--surface-raised); border-radius: var(--r-panel); padding: var(--sp-5) var(--sp-6); display: flex; gap: var(--sp-6); align-items: flex-start; box-shadow: var(--shadow-float); animation: fadein .25s ease-out; }
.banner__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.banner__label { color: var(--accent-text); font-size: var(--fs-caption); }
.banner__title { font-size: calc(var(--fs-h3) + 1px); font-weight: var(--fw-medium); }
.banner__body { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-2); }
.banner__body:empty { display: none; }
.banner__actions { display: flex; align-items: center; gap: var(--sp-2); }
.banner__actions .btn { height: var(--sp-10); }
.banner__actions .btn--icon { width: var(--sp-10); }

/* ---------- W09 chat ---------- */
.chat { background: var(--surface); border-radius: var(--r-panel); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.chat__head h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
#meeting.staff .chat__head { display: none; }
.chat__list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); line-height: var(--lh-body); }
.chat__form { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.chat__form.is-staff-only .input { background: var(--accent-tint); border-color: var(--accent); }
.msg-meta { font-size: var(--fs-caption); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); }
.msg-meta svg { width: var(--sp-3); height: var(--sp-3); }
.msg-bubble { background: var(--surface-raised); border-radius: var(--r-input); padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; }
.msg-bubble a { color: var(--accent-text); word-break: break-all; }
/* spoken: no bubble, small mic icon, bold name */
.chat-line.speech { display: flex; gap: var(--sp-2); color: var(--text-2); }
.chat-line.speech > svg { width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.chat-line.speech b { font-weight: var(--fw-semibold); color: var(--text); margin-right: var(--sp-1); }
.chat-line.speech.interim .chat-line__text { font-style: italic; color: var(--text-muted); }
/* written: "X skrev till alla" above a white bubble */
.chat-line.text { display: flex; flex-direction: column; gap: 2px; align-self: flex-start; max-width: 80%; }
.chat-line.text.staff-only .msg-meta { color: var(--accent-text); }
.chat-line.text.staff-only .msg-bubble { background: var(--accent-tint); }
/* agent note: tint, badge, name */
.chat-line.note { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--agent-tint); border-radius: var(--r-input); padding: var(--sp-3); }
.chat-line.note b { font-weight: var(--fw-semibold); color: var(--agent-text); margin-right: var(--sp-1); }
.chat-line.note a { color: var(--agent-text); }
/* customer chat (W09): bubble corners, own messages dark on the right, "Nya meddelanden" */
#meeting:not(.staff) .chat-line.text .msg-bubble { border-radius: var(--r-row) var(--r-row) var(--r-row) var(--sp-1); }
#meeting:not(.staff) .chat-line.text.own { align-self: flex-end; align-items: flex-end; }
#meeting:not(.staff) .chat-line.text.own .msg-bubble { background: var(--primary-bg); color: var(--primary-fg); border-radius: var(--r-row) var(--r-row) var(--sp-1) var(--r-row); }
#meeting:not(.staff) .chat-line.text.own .msg-bubble a { color: var(--primary-fg); }
.new-divider { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--danger-text); }
.new-divider::before, .new-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--danger-line) 35%, transparent); }

/* ---------- W10 staff view ---------- */
#meeting.staff {
  display: grid; gap: var(--sp-4); padding: var(--sp-5);
  grid-template-columns: var(--col-side) minmax(0, 1fr) var(--col-side);
}
#meeting.staff #col-main { display: flex; flex-direction: column; gap: var(--sp-3); }
#meeting.staff #grid {
  height: var(--h-video-staff); flex-shrink: 0; align-content: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: hidden;
}
#meeting.staff #grid .video-tile { aspect-ratio: auto; height: 100%; }
#meeting.staff #grid.has-screen .video-tile.screen { grid-column: span 2; grid-row: span 2; }
#meeting.staff #col-transcript { flex: 1; }
#meeting.staff .leave-btn { background: var(--surface); border-color: var(--line); color: var(--text); }
#meeting.staff .leave-btn:hover { background: var(--surface-sunken); }

.side-panel { background: var(--surface); border-radius: var(--r-panel); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; overflow-y: auto; font-size: var(--fs-small); }
.timer-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.timer-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.timer { font-size: var(--fs-h1); }
.timer.low { color: var(--warn-text); }
.timer.over { color: var(--danger-text); }
.timer-row .btn--text { font-size: inherit; color: var(--text-muted); padding: 0; }
.progress { height: var(--sp-1); border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.progress span.over { background: var(--danger-line); }
.side-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) 0; }
.side-section > summary::-webkit-details-marker { display: none; }
.side-section > summary::after { content: ""; width: var(--sp-2); height: var(--sp-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: var(--sp-1); transition: transform .15s; }
.side-section:not([open]) > summary::after { transform: rotate(-45deg); }
.side-section > *:not(summary) { margin-top: var(--sp-2); }
.side-text { font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; }
.side-text--2 { font-size: var(--fs-small); color: var(--text-2); }
.side-text:empty::before { content: "–"; color: var(--text-muted); }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.agenda-list li { display: flex; gap: var(--sp-2); align-items: baseline; }
.agenda-list button.agenda-item { all: unset; display: flex; gap: var(--sp-2); flex: 1; cursor: pointer; }
.agenda-list button.agenda-item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.agenda-list .num { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.agenda-list li.done { color: var(--text-faint); }
.agenda-list li.done .title { text-decoration: line-through; }
.agenda-list li.current { font-weight: var(--fw-semibold); }
.agenda-list li.current .num { color: var(--accent-text); }
.agenda-list .item-time { margin-left: auto; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda-list .item-time.over { color: var(--danger-text); }
.agenda-list .empty { color: var(--text-muted); }
.agenda-actions { flex-wrap: wrap; }
.people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.person { display: flex; flex-direction: column; gap: 2px; }
.person__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.person__name { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.person__pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.person .chip { font-size: var(--fs-label); padding: 1px var(--sp-2); }
.person .bar { height: 2px; border-radius: var(--r-pill); background: var(--line); }
.person .bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--text-faint); transition: width .4s; }
.person .btn--text { font-size: var(--fs-caption); padding: 0; height: auto; }
.end-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.end-actions .btn--text { align-self: center; }
#meeting:not(.is-host) .host-only { opacity: .45; pointer-events: none; }
#meeting:not(.is-host) .host-only-block { display: none !important; }

/* W15 agenda round form */
.round-card { background: var(--surface-raised); border-radius: var(--r-tile); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 0 0 1px var(--line); }
.round-card__head { display: flex; justify-content: space-between; align-items: center; }
.round-card__head h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.round-card .segmented { display: flex; }
.round-card .segmented__option { flex: 1; }

/* agents column */
.agents-col { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; overflow-y: auto; }
.agents-col__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-1) 0; }
.agent-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.agent-card.fresh { box-shadow: 0 0 0 2px var(--agent, var(--accent)); }
.agent-card__title { font-weight: var(--fw-semibold); }
.agent-card__bullets { white-space: pre-wrap; }
.agent-card__bullets:empty { display: none; }
.agent-card__link { align-self: flex-start; }
.ac-history { list-style: none; margin: var(--sp-1) 0 0; padding: var(--sp-3) 0 0; border-top: 1px dashed color-mix(in srgb, var(--agent, var(--line)) 35%, transparent); display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text-2); }
.ac-history li { white-space: pre-wrap; }
.ac-history .t-caption { color: inherit; opacity: .8; }

@media (max-width: 1100px) {
  #meeting.staff { grid-template-columns: minmax(0, 1fr) var(--col-side); }
  #meeting.staff #col-agenda { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  #meeting.staff { display: flex; flex-direction: column; height: auto; min-height: 100%; }
  #meeting.staff #col-transcript { max-height: 60vh; }
}

/* ---------- full-screen views (W16–W22) ---------- */
.fullscreen {
  position: fixed; inset: 0; z-index: 15; background: var(--bg);
  display: flex; flex-direction: column; gap: var(--sp-7); padding: var(--sp-8) var(--sp-12); overflow: auto;
}
.fullscreen__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); }
.fullscreen__head h1 { font-size: var(--fs-h1); }
.fullscreen__head h1:empty { display: none; }
.fullscreen__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-top: auto; }
.fullscreen__foot .btn--lg { font-size: var(--fs-body-lg); }
.fullscreen__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6); }
.fullscreen__center h1 { font-size: calc(var(--fs-h1) + 2px); }
.fullscreen__center h2 { font-size: calc(var(--fs-h1) - 2px); font-weight: var(--fw-medium); }
.fullscreen__center p { max-width: calc(var(--w-steps) + var(--sp-5)); line-height: 1.55; }
.timer-box { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.timer-box .low { color: var(--warn-text); }
.ws-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.ws-cols .panel { min-height: 0; overflow-y: auto; }
.questions { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-lead); line-height: var(--lh-body); }
.listening { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--accent-text); }
.listening::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent); }
.listening.off { color: var(--text-muted); }
.listening.off::before { background: var(--text-faint); }
.said { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-2); }
.said p.interim { color: var(--text-faint); }
.point-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.point-list li { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface-raised); border-radius: var(--r-input); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); font-size: var(--fs-body); animation: fadein .25s ease-out; }
.point-list li span { flex: 1; }
.point-list li .btn--icon { color: var(--text-faint); }
.point-list .empty { background: none; color: var(--text-muted); padding: 0; }
.ws-narrow { width: min(var(--w-narrow), 100%); align-self: center; flex: 1; }
.fullscreen > .fullscreen__head, .fullscreen > .fullscreen__foot { width: 100%; }
#workshop:has(#ws-preview:not([hidden])) > .fullscreen__head,
#workshop:has(#ws-preview:not([hidden])) > .fullscreen__foot,
#workshop:has(#ws-vote:not([hidden])) > .fullscreen__head,
#workshop:has(#ws-vote:not([hidden])) > .fullscreen__foot { width: min(var(--w-narrow), 100%); align-self: center; }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.topic-list li { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border-radius: var(--r-row); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body-lg); }
.topic-list li.editable { padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); }
.topic-list .topic-title { flex: 1; min-width: 0; }
.topic-list input.topic-title { height: var(--sp-10); border: 0; background: transparent; padding: 0; font-size: var(--fs-body-lg); }
.topic-list .topic-meta { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.topic-list .empty { background: none; color: var(--text-muted); padding: 0; font-size: var(--fs-body); }
#ws-vote h1 { line-height: 1.3; }

/* W20 steps, W21 draft, W22 approval */
.steps { list-style: none; margin: 0; padding: 0; width: var(--w-steps); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-lead); }
.steps li { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); }
.steps li.done, .steps li.active { color: var(--text-2); }
.steps li svg { width: calc(var(--sp-4) + 2px); height: calc(var(--sp-4) + 2px); color: var(--accent); }
.steps li .waiting { width: calc(var(--sp-4) + 2px); height: calc(var(--sp-4) + 2px); border-radius: 50%; border: 2px solid var(--line-strong); }
.video-strip { display: flex; align-items: center; gap: var(--sp-2); }
.video-strip .video-tile { width: var(--strip-tile-w); aspect-ratio: 16 / 10; border-radius: var(--r-sm); }
.video-strip .video-tile__name { left: var(--sp-1); bottom: var(--sp-1); padding: 0 var(--sp-1); font-size: var(--fs-label); }
.video-strip .video-tile__avatar { transform: scale(.45); }
.video-strip .btn--icon { margin-left: var(--sp-1); }
.pv-edit { flex: 1; min-height: 0; display: flex; gap: var(--sp-5); }
.pv-edit > .panel { min-height: 0; overflow-y: auto; }
.pv-edit > .panel:first-child { flex: 1; }
.pv-edit__side { width: var(--w-pv-side); flex-shrink: 0; }
.grow-field { flex: 1; }
.grow-field textarea { flex: 1; min-height: calc(var(--h-input) * 2.5); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-row .chip { font-size: var(--fs-small); padding: var(--sp-1) var(--sp-3); font-weight: var(--fw-regular); color: var(--text); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--sp-2); }
.check-list { display: flex; flex-direction: column; }
.check-row { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-1) 0; }
.check-row input[type="text"] { flex: 1; border: 0; background: transparent; padding: var(--sp-1) 0; font-size: var(--fs-body); }
.check-row input[type="text"]:focus { box-shadow: none; border-bottom: 1px solid var(--accent); }
.check-row.unchecked input[type="text"] { color: var(--text-faint); }
.action-grid { display: grid; grid-template-columns: auto minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--sp-2); align-items: center; font-size: var(--fs-small); }
.action-grid .head { color: var(--text-muted); padding: var(--sp-2) 0; }
.action-grid input[type="text"] { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: var(--sp-3) 0; font-size: var(--fs-small); min-width: 0; }
.action-grid input[type="text"]:focus { box-shadow: none; border-top-color: var(--accent); }
.action-grid .unchecked { color: var(--text-faint); }
.proto-check { display: flex; gap: var(--sp-3); align-items: center; background: var(--agent-tint, var(--accent-tint)); border-radius: var(--r-input); padding: var(--sp-3) var(--sp-4); }
.proto-check span { flex: 1; }
.proto-check a { color: var(--agent-text, var(--accent-text)); font-weight: var(--fw-medium); }
.pv-approve { flex: 1; min-height: 0; display: flex; justify-content: center; }
.protocol-doc { width: min(var(--w-doc), 100%); background: var(--surface-raised); border-radius: var(--r-panel); padding: var(--sp-8) var(--sp-10); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); font-size: var(--fs-body-lg); line-height: 1.6; }
.protocol-doc h1 { font-size: calc(var(--fs-h2) + 2px); line-height: 1.3; }
.protocol-doc ul { margin: 0; padding-left: var(--sp-5); }
.protocol-doc .doc-section .t-label { margin-bottom: var(--sp-1); }
#protocol-view:has(#pv-approve:not([hidden])) > .fullscreen__foot { width: min(var(--w-doc), 100%); align-self: center; }
.done-bar { height: var(--h-btn-lg); width: min(var(--w-doc), 100%); display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
.done-bar svg { width: calc(var(--sp-4) + 2px); height: calc(var(--sp-4) + 2px); }
#protocol-view:has(#pv-done:not([hidden])) .fullscreen__foot { justify-content: center; }
#protocol-view:has(#pv-done:not([hidden])) .fullscreen__foot > .row { width: min(var(--w-doc), 100%); justify-content: center; }
@media (max-width: 860px) {
  .fullscreen { padding: var(--sp-5); }
  .ws-cols, .pv-edit { grid-template-columns: 1fr; flex-direction: column; }
  .pv-edit__side { width: auto; }
  .video-strip .video-tile { display: none; }
}
@keyframes fadein { from { opacity: 0; } }

/* ---------- W23 ended ---------- */
.ended { min-height: 100%; padding: var(--sp-10); gap: var(--sp-5); }
.ended h1 { font-size: var(--fs-h1); }
.ended p { max-width: calc(var(--w-steps) + var(--sp-5)); }

/* ---------- W12 share dialog, W14 agent settings ---------- */
.dialog--wide { width: min(var(--w-share), calc(100% - var(--sp-8))); }
.dialog form { display: flex; flex-direction: column; }
.dialog__intro { margin-bottom: var(--sp-5); }
.dialog__intro .dialog__title { margin: 0; }
.share-from { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--agent-text); }
.share-from .agent-card__badge { width: calc(var(--sp-5) + 2px); height: calc(var(--sp-5) + 2px); }
.dialog--split { width: min(var(--w-split), calc(100% - var(--sp-8))); height: min(var(--h-split), calc(100% - var(--sp-8))); padding: 0; display: none; overflow: hidden; }
.dialog--split[open] { display: flex; }
.split__nav { width: var(--w-split-nav); flex-shrink: 0; background: color-mix(in srgb, var(--surface-sunken) 40%, var(--surface)); padding: var(--sp-7) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; }
.split__nav h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3) var(--sp-2); }
.split__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.split__item { height: var(--sp-12); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-input); background: transparent; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); color: var(--text); text-align: left; }
.split__item:hover { background: var(--surface-sunken); }
.split__item[aria-current="true"] { background: var(--surface-raised); font-weight: var(--fw-medium); }
.split__item.is-off { color: var(--text-faint); }
.split__item.is-off .agent-card__badge { background: var(--line-strong); color: var(--text-2); }
.split__main { flex: 1; min-width: 0; padding: var(--sp-7) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; }
.split__main h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.af-emoji { width: calc(var(--sp-12) * 2); }
.af-head { align-items: flex-start; gap: var(--sp-3); }
.af-name { flex: 1; min-width: 0; }
.swatches { display: flex; gap: var(--sp-3); }
.swatch { width: var(--swatch); height: var(--swatch); border-radius: 50%; border: 0; background: var(--agent); padding: 0; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 var(--sp-1) var(--text); }
.switch-rows { display: flex; flex-direction: column; }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; font-size: var(--fs-body); cursor: pointer; }

/* ---------- project pages: topbar crumbs (W06, W26, W27) ---------- */
.crumbs { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; font-size: var(--fs-body-lg); color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs a.wordmark { color: var(--text); margin-right: var(--sp-1); }
.crumbs__sep { color: var(--text-faint); }
.crumbs__current { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs__muted { color: var(--text-muted); }
.preview-bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-2) var(--page-pad); background: var(--accent-tint); color: var(--accent-strong); font-size: var(--fs-body); }

/* ---------- W26/W27 project room ---------- */
.room { flex: 1; padding: var(--sp-7) var(--page-pad) var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-5); }
.room__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.room__title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.room__title h1 { font-size: calc(var(--fs-h1) + 2px); }
.room__cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-room-side); gap: var(--sp-5); align-items: start; }
.room__main, .room__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.panel__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.panel__head h2 { font-size: var(--fs-h3); }
.live-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-radius: var(--r-row); background: var(--accent-tint); color: var(--accent-strong); font-size: var(--fs-body-lg); }
.grow-text { flex: 1; min-width: 0; }

.overview-panel { padding: var(--sp-5) var(--sp-6); }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-7); }
.overview-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.overview-item__label { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.overview-item__text { margin: 0; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; white-space: pre-line; }
.overview-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.overview-grid:not([hidden]) + .overview-foot { margin-top: var(--sp-3); }

/* list rows (DESIGN: 12px vertical padding, 1px line between) */
.row-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row-list > li + li { border-top: 1px solid var(--line); }
.row-list__empty { padding: var(--sp-3) 0; }
.t-caption { font-size: var(--fs-caption); color: var(--text-muted); }
.t-meta-lg { font-size: var(--fs-body); color: var(--text-muted); }

.todo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start; padding: var(--sp-3) 0; }
.todo__mark { width: calc(var(--sp-6) - 2px); height: calc(var(--sp-6) - 2px); margin-top: 2px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--primary-fg); }
.todo.is-done .todo__mark { background: var(--accent); border-color: var(--accent); }
.todo__mark svg { width: var(--sp-3); height: var(--sp-3); }
.todo__text { font-size: var(--fs-body-lg); }
.todo.is-done .todo__text { text-decoration: line-through; color: var(--text-muted); }
.todo__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.todo__side { padding-top: 2px; white-space: nowrap; }
.todo__comment { margin-top: var(--sp-2); background: var(--surface-raised); border-radius: var(--r-input); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.todo__comment p { margin: 0; font-size: var(--fs-body); }
.other-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; font-size: var(--fs-body); }
.other-row .is-overdue { color: var(--danger-text); }

.meeting-row { display: grid; grid-template-columns: calc(var(--sp-12) + var(--sp-7)) minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) 0; color: var(--text); text-decoration: none; font-size: var(--fs-body-lg); }
a.meeting-row:hover .meeting-row__title { color: var(--accent-text); text-decoration: underline; }
.meeting-row__date { color: var(--text-muted); }
.meeting-row__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-field { position: relative; display: flex; align-items: center; width: min(var(--w-search), 100%); }
.search-field [data-icon] { position: absolute; left: var(--sp-4); display: flex; color: var(--text-muted); pointer-events: none; }
.search-field svg { width: var(--sp-4); height: var(--sp-4); }
.search-field .input { height: var(--h-btn-sm); padding-left: calc(var(--sp-4) + var(--sp-6)); }
#search-area { margin-bottom: var(--sp-2); }
.search-hit { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) 0; color: var(--text); text-decoration: none; }
.search-hit:hover .search-hit__text { color: var(--accent-text); }
.search-hit__text { font-size: var(--fs-body); }
mark { background: var(--accent-soft); color: var(--accent-strong); border-radius: 2px; padding: 0 2px; }

.staff-label { display: flex; align-items: center; color: var(--accent-strong); }
.side-title { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.mood-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
.mood-bar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.mood-bar__track { width: 100%; height: var(--sp-8); display: flex; align-items: flex-end; }
.mood-bar__fill { width: 100%; border-radius: var(--r-sm); background: var(--line-strong); }
.mood-bar__fill--positive { background: var(--accent); }
.mood-bar__fill--concerned { background: var(--agent-ochre); }
.mood-latest { margin: var(--sp-2) 0 0; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }

.people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.person-row { display: flex; align-items: center; gap: var(--sp-3); }
.person-row .avatar { width: calc(var(--sp-8) + var(--sp-1)); height: calc(var(--sp-8) + var(--sp-1)); flex-shrink: 0; }
.person-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person-row__name { font-size: var(--fs-body-lg); }

/* ---------- W04 new meeting, W05 overview ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.check-row { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; font-size: var(--fs-body-lg); }
.check-row input { margin-top: 2px; }
.check-row__text { display: flex; flex-direction: column; gap: 2px; }
.dialog textarea.input { height: auto; min-height: calc(var(--h-input) * 1.6); padding: var(--sp-3); resize: vertical; }
#nm-duration-label { gap: var(--sp-2); }
#nm-duration .segmented { align-self: flex-start; }

/* ---------- W06 meeting page ---------- */
.archive { flex: 1; min-height: 0; padding: var(--sp-7) var(--page-pad) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.archive__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.archive__head h1 { font-size: calc(var(--fs-h1) - 2px); }
.archive__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--w-transcript); gap: var(--sp-5); align-items: start; }
.archive__cols.is-single { grid-template-columns: minmax(0, var(--w-doc)); }
.archive__doc { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); }
.doc-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-block p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.55; }
.doc-list { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-body-lg); line-height: 1.55; }
.pre-line { white-space: pre-line; }
.action-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.action-table th { text-align: left; font-weight: var(--fw-regular); color: var(--text-muted); padding: var(--sp-2) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.action-table td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.archive__transcript { padding: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-3); max-height: calc(100vh - var(--sp-12) * 4); }
.archive__transcript > .t-label { padding: 0 var(--sp-7); }
.transcript__line { position: relative; }
.transcript__fix { position: absolute; right: var(--sp-4); top: var(--sp-2); }
.transcript { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.transcript__line { display: grid; grid-template-columns: calc(var(--sp-12) + var(--sp-6)) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) calc(var(--sp-7) + var(--sp-10)) var(--sp-3) var(--sp-7); border-left: 2px solid transparent; font-size: var(--fs-body); line-height: 1.5; }
.transcript__line.is-hit { background: var(--accent-tint); border-left-color: var(--accent); }
.transcript__time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.transcript__body b { font-weight: var(--fw-semibold); }
.transcript__line--note .transcript__body { color: var(--text-2); }
.transcript__tag { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-caption); color: var(--text-muted); }
.transcript__tag svg { width: var(--sp-3); height: var(--sp-3); }
.btn[data-icon="download"] svg { width: var(--sp-4); height: var(--sp-4); }

@media (max-width: 1023px) {
  .room__cols, .archive__cols { grid-template-columns: minmax(0, 1fr); }
  .overview-grid, .overview-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive__transcript { max-height: none; }
}
@media (max-width: 640px) {
  .overview-grid, .overview-grid--four { grid-template-columns: minmax(0, 1fr); }
  .room, .archive { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
#ws-progress, #pv-progress { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* ---------- phase 4: shared computer (W08, W10) ---------- */
#grid .video-tile--shared { grid-column: span 2; aspect-ratio: 32 / 10; }
#meeting.staff #grid .video-tile--shared { aspect-ratio: auto; }
.video-tile__name .avatar-group .avatar { width: calc(var(--sp-5) + 2px); height: calc(var(--sp-5) + 2px); font-size: var(--fs-label); }
.video-tile__name .avatar.is-speaking { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 var(--sp-1) var(--accent); position: relative; }
.tile-action { margin-left: var(--sp-1); height: calc(var(--sp-5) + 2px); padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-raised); color: var(--text); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.tile-action:hover { border-color: var(--text-muted); }
.tile-action--hover { display: none; }
.video-tile:hover .tile-action--hover, .video-tile:focus-within .tile-action--hover { display: inline-block; }
.chat-line__fix, .transcript__fix { height: var(--h-btn-sm); padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--text-muted); font-size: var(--fs-caption); text-decoration: underline; opacity: 0; }
.chat-line:hover .chat-line__fix, .chat-line__fix:focus-visible, .transcript__line:hover .transcript__fix, .transcript__fix:focus-visible { opacity: 1; }
.chat-line.speech .chat-line__fix { margin-left: auto; align-self: flex-start; height: auto; }
.chat-line.is-uncertain .chat-line__who::after { content: " ?"; color: var(--text-muted); }
.name-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.name-row { display: flex; gap: var(--sp-2); align-items: center; }
.name-row .input { flex: 1; }
#seat-add { align-self: flex-start; }

/* ---------- W28 mark as done ---------- */
button.todo__mark { padding: 0; background: var(--surface-raised); cursor: pointer; }
button.todo__mark:hover { border-color: var(--accent); }
.todo.is-done button.todo__mark { background: var(--accent); }
.check-box { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-row); background: var(--accent-tint); cursor: pointer; font-size: var(--fs-body); }
.check-box input { margin-top: 2px; }
.field__help { font-weight: var(--fw-regular); }

/* ---------- W29 profile ---------- */
.person-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: 0; border: 0; background: transparent; color: inherit; text-align: left; border-radius: var(--r-row); }
button.person-row__main:hover .person-row__name { color: var(--accent-text); text-decoration: underline; }
.profile-summary { background: var(--surface-raised); border-radius: var(--r-input); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); line-height: 1.55; margin-top: var(--sp-2); }
.dialog.sheet[open] { display: flex; flex-direction: column; margin: 0 0 0 auto; width: min(var(--w-sheet), 100%); height: 100%; max-height: 100%; padding: 0; border-radius: 0; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.sheet__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.sheet__head h2 { font-size: calc(var(--fs-h2) + 2px); }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-8); }
.sheet__foot > .t-meta { flex: 1; min-width: 0; }
.gdpr-row { display: flex; gap: var(--sp-4); }
.gdpr-row:not(:has(:not([hidden]))) { display: none; }
.profile-fields { margin: 0; display: flex; flex-direction: column; }
.profile-fields dd { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--fs-body-lg); line-height: 1.5; }
.source-box { background: var(--surface-raised); border-radius: var(--r-tile); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-body); }
.source-box p { margin: 0; color: var(--text-2); }
.source-box a { color: var(--accent-text); }

/* ---------- W30 plan the next meeting ---------- */
.planner { gap: var(--sp-4); }
.video-strip--wide { width: 100%; }
.video-strip--wide .video-tile { flex: 1; width: auto; height: var(--h-plan-strip); aspect-ratio: auto; border-radius: var(--r-tile); }
.video-strip--wide .video-tile--shared { flex: 2; }
.video-strip--wide .video-tile__name { left: var(--sp-2); bottom: var(--sp-2); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); }
.planner__panel { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface-raised); display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); }
.planner__head { display: flex; align-items: center; gap: var(--sp-3); }
.planner__head h1 { font-size: var(--fs-h2); }
.planner__badge { width: var(--sp-8); height: var(--sp-8); border-radius: 50%; background: var(--accent); color: var(--primary-fg); display: grid; place-items: center; }
.planner__badge svg { width: var(--sp-4); height: var(--sp-4); }
.planner__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.planner__fields .input[readonly] { background: var(--surface-raised); }
#pl-confirm, #pl-sent { position: sticky; top: calc(var(--sp-6) * -1); z-index: 1; }
.confirm-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6); border-radius: var(--r-row); background: var(--accent-soft); color: var(--accent-strong); }
.confirm-bar > [data-icon] { display: flex; }
.confirm-bar > [data-icon] svg { width: calc(var(--sp-4) + 2px); height: calc(var(--sp-4) + 2px); }
.confirm-bar__text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); }
.confirm-bar__text b { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.confirm-bar .btn--secondary { background: transparent; border-color: var(--accent-strong); color: var(--accent-strong); }
.confirm-bar .btn--accent { background: var(--accent-strong); }
.planner__cols { display: grid; grid-template-columns: var(--w-plan-side) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.quote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.quote { background: var(--bg); border-radius: var(--r-input); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); line-height: 1.5; }
.quote b { font-weight: var(--fw-semibold); }
.cand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cand { display: grid; grid-template-columns: calc(var(--sp-12) * 3) minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4); border-radius: var(--r-tile); background: var(--surface); }
.cand.is-chosen { box-shadow: inset 0 0 0 2px var(--accent); }
.cand__when { display: flex; flex-direction: column; font-size: var(--fs-body); color: var(--text-2); }
.cand__when b { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text); }
.cand.is-struck { grid-template-columns: calc(var(--sp-12) * 3) minmax(0, 1fr); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.cand.is-struck .cand__when, .cand.is-struck .cand__when b { color: var(--text-faint); text-decoration: line-through; }
.cand__reason { color: var(--danger-text); font-size: var(--fs-body); }
.cand__people { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.avatar.is-yes { background: var(--accent-soft); color: var(--accent-strong); }
.avatar.is-no { background: var(--danger-soft); color: var(--danger-text); text-decoration: line-through; }
.avatar.is-unknown { background: transparent; color: var(--text-muted); border: 1px dashed var(--line-strong); }
.cand__mine { display: flex; flex-direction: column; gap: var(--sp-2); }
.cand__row { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
.cand__name { min-width: calc(var(--sp-12) + var(--sp-2)); font-size: var(--fs-body); }
#pl-add-open { align-self: flex-start; }
#pl-add .input { width: auto; }

/* ---------- W27 next meeting ---------- */
.next-pill { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-body-lg); }
.btn--danger-text { text-decoration-color: var(--danger-line); }

@media (max-width: 1023px) {
  .planner__cols, .planner__fields { grid-template-columns: minmax(0, 1fr); }
  .cand { grid-template-columns: minmax(0, 1fr); }
  .cand__row { justify-content: flex-start; }
}

/* ---------- companies (start page, company room) ---------- */
.company-group { padding: 0; }
.company-group__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-2); }
.company-group__name { font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; }
.company-group__name:hover { color: var(--accent-text); text-decoration: underline; }
.company-group .project-row { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.overview-list { margin: 0; padding-left: var(--sp-5); color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.overview-list .t-meta { list-style: none; margin-left: calc(var(--sp-5) * -1); }
.system-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.system-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.system-row__main:hover .person-row__name { color: var(--accent-text); text-decoration: underline; }

/* ---------- review: agents propose, people decide ---------- */
.review-title { display: flex; align-items: center; gap: var(--sp-2); }
.proposal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.proposal { background: var(--surface-raised); border-radius: var(--r-row); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.proposal__head { display: flex; align-items: center; gap: var(--sp-3); }
.proposal__title { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.proposal__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--sp-12) * 5), 1fr)); gap: var(--sp-3); }
.proposal__fields:empty { display: none; }
.proposal__now { font-weight: var(--fw-regular); }
.proposal__quote { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--accent); background: var(--bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-body); color: var(--text-2); }
.proposal__quote a { color: var(--accent-text); font-size: var(--fs-caption); }
.proposal__actions { align-items: center; }
.proposal__feedback { flex: 1; height: var(--h-btn-sm); }

/* ---------- developer mode ---------- */
.dev-cols { display: grid; grid-template-columns: var(--w-dev-side) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.dev-main { min-width: 0; }
.dev-side { position: sticky; top: var(--sp-4); max-height: calc(100vh - var(--sp-8)); overflow-y: auto; }
.dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.dev-item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-input); background: transparent; color: var(--text); text-align: left; }
.dev-item:hover { background: var(--surface-raised); }
.dev-item.is-selected { background: var(--accent-tint); }
.dev-item__title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.dev-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.dev-agent-pick { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.input--sm { height: var(--h-btn-sm); padding: 0 var(--sp-2); font-size: var(--fs-small); width: auto; }
.dev-audio { display: flex; align-items: center; gap: var(--sp-3); }
.dev-audio audio { height: var(--h-btn-sm); }
.dev-run { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.dev-run__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-body); }
.dev-timeline { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--dev-cols, 1), minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); align-items: start; }
.dev-timeline__head { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.dev-line { grid-column: 1; display: grid; grid-template-columns: calc(var(--sp-12) + var(--sp-4)) minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); line-height: 1.45; }
.dev-line--redo { grid-column: auto; background: var(--surface-raised); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); }
.dev-line__time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); }
.dev-event { border-radius: var(--r-input); padding: var(--sp-2) var(--sp-3); background: var(--agent-tint, var(--surface-raised)); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-small); }
.dev-event--after { box-shadow: inset 2px 0 0 var(--accent); }
.dev-event--transcript { background: var(--surface-raised); }
.dev-event--score { background: var(--accent-soft); color: var(--accent-strong); }
.dev-event__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.dev-event__head b { color: var(--agent-text, var(--text)); }
.dev-event__title { font-weight: var(--fw-semibold); }
.dev-event__body { white-space: pre-line; }
.dev-event__payload { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-2); }
.dev-event__payload dd { margin: 0; white-space: pre-line; }
.dev-rate .btn[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); }
.dev-rate .input { height: var(--h-btn-sm); }
.helper-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) 0; }
.helper-row__name { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-weight: var(--fw-medium); }
.helper-row__stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.helper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.helper-list li { display: flex; flex-direction: column; gap: 2px; }
.helper-list__name { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.helper-command { background: var(--surface-sunken); border-radius: var(--r-input); padding: var(--sp-3); white-space: pre-wrap; word-break: break-all; margin: 0; }
.dev-code { font-family: var(--font-mono, monospace); font-size: var(--fs-small); line-height: 1.5; }
.dev-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-12) * 3), 1fr)); gap: var(--sp-2); }
.dev-version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; font-size: var(--fs-body); }
.dev-version.is-selected { background: var(--accent-tint); }
@media (max-width: 1023px) { .dev-cols, .dev-pick { grid-template-columns: minmax(0, 1fr); } .dev-side { position: static; max-height: none; } }

/* ---------- Läsaren ---------- */
.reading { border-radius: var(--r-tile); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.reading__persona { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.reading__persona:empty { display: none; }
.reading__advice { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-body); line-height: 1.5; }
.obs-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.obs { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-input); background: var(--surface-raised); font-size: var(--fs-body); }
label.obs { cursor: pointer; }
label.obs:has(input:not(:checked)) .obs__text { opacity: .5; text-decoration: line-through; }
.obs input { margin-top: 2px; }
.obs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obs__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.obs--interpreted { box-shadow: inset 2px 0 0 var(--agent-ochre); }
.obs--said { box-shadow: inset 2px 0 0 var(--accent); }
.obs__quote { font-style: italic; }