/* Shared ROOM screen — projector-grade, token-driven.
   Persistent agenda strip on top; below it the single view the chair pushes,
   full width. Calm: the only motion is a gentle cross-fade on a view push and a
   slide-in drift toast that OVERLAYS so it never reflows the view. The running
   Notes record lives on the chair console, not here. Colour means status only;
   large type stays near-black; sentence-case labels. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg-primary);font-family:var(--font-mono);
  overflow:hidden;transition:background .8s ease,color .8s ease}
[hidden]{display:none !important}

.stage{height:100vh;width:100vw;display:grid;
  grid-template-rows:auto auto auto 1fr;gap:clamp(10px,1.6vh,18px);
  padding:clamp(14px,2.6vh,26px) clamp(20px,3.4vw,48px);min-height:0;overflow:hidden}

/* ── top bar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.brand{font-size:clamp(14px,1.3vw,19px);color:var(--fg-secondary)}
.topright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.status{display:inline-flex;align-items:center;gap:9px;color:var(--fg-secondary);font-size:clamp(12px,1vw,15px);flex:0 0 auto}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--state-gray)}
.status[data-state="in_call"] .dot{background:var(--state-green)}
.status[data-state="ended"] .dot,.status[data-state="failed"] .dot{background:var(--state-gray)}
.status[data-state="reconnecting"] .dot{background:var(--state-orange)}
.theme-toggle{font-family:var(--font-mono);font-size:16px;line-height:1;border:1px solid var(--separator);
  background:transparent;color:var(--fg-secondary);border-radius:999px;width:32px;height:32px;cursor:pointer;flex:0 0 auto}
.theme-toggle:hover{color:var(--fg-primary)}

/* ── title (centred) ── */
.title{font-weight:700;letter-spacing:-.02em;text-align:center;margin:0;
  font-size:clamp(24px,3.2vw,46px);max-width:92vw;justify-self:center;overflow-wrap:anywhere}

/* ── persistent agenda strip (every view) — wraps neatly past 4 items ── */
.agenda-strip{list-style:none;margin:0;padding:clamp(8px,1.1vh,12px) clamp(14px,1.8vw,22px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(7px,1vh,11px) clamp(14px,2vw,26px);
  background:var(--bg-tertiary);border:1px solid var(--separator);border-radius:14px;
  min-width:0;max-height:24vh;overflow:auto}
.agenda-strip li{display:inline-flex;align-items:center;gap:9px;font-size:clamp(13px,1.1vw,17px);
  color:var(--fg-secondary);min-width:0;max-width:min(40vw,340px)}
.agenda-strip li.now{color:var(--fg-primary);font-weight:600}
.ag-dot{width:clamp(11px,1vw,14px);height:clamp(11px,1vw,14px);border-radius:50%;flex:0 0 auto;
  border:2px solid var(--fg-tertiary);background:transparent}
.ag-dot.touched{background:var(--state-orange);border-color:var(--state-orange)}
.ag-dot.resolved{background:var(--state-green);border-color:var(--state-green)}
.ag-strip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-done{color:var(--fg-tertiary)}
.ag-now-tag{font-size:.7em;color:var(--accent);background:var(--accent-tint-12);padding:2px 9px;border-radius:999px;flex:0 0 auto}

/* ── drift: soft slide-up toast at the BOTTOM, OVERLAYS (never reflows the view).
   Anchored to the bottom so it can never sit on the centred title / agenda
   strip at the top. A gentle orange accent bar (not a hard orange pill) +
   readable text + a dismiss ×. Auto-hides after 4s (JS). ── */
.drift{position:fixed;bottom:clamp(20px,3.4vh,36px);top:auto;left:50%;z-index:60;
  transform:translate(-50%,18px) scale(.98);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:12px;max-width:min(86vw,640px);
  background:var(--bg-tertiary);border:1px solid var(--separator);border-left:3px solid var(--state-orange);
  color:var(--fg-primary);border-radius:14px;padding:11px 12px 11px 16px;
  font-size:clamp(13px,1.05vw,16px);line-height:1.35;box-shadow:var(--shadow-pop);
  transition:transform .4s cubic-bezier(.2,.9,.25,1),opacity .35s ease}
.drift.show{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.drift-icon{color:var(--state-orange);flex:0 0 auto;font-size:1.05em}
.drift #drift-note{min-width:0;overflow-wrap:anywhere}
.drift-close{flex:0 0 auto;width:24px;height:24px;border:0;border-radius:8px;
  background:transparent;color:var(--fg-tertiary);font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.drift-close:hover{background:var(--separator);color:var(--fg-primary)}

/* ── the single pushed view, full width ── */
/* ONE block: shows the view the chair pushed, full width. It stays put — only
   a chair push changes it. */
.screen{min-height:0;min-width:0;display:flex;flex-direction:column;
  background:var(--bg-tertiary);border:1px solid var(--separator);border-radius:18px;
  padding:clamp(16px,2.2vh,26px) clamp(18px,2.4vw,34px);overflow:hidden}
.col-head{color:var(--fg-secondary);font-size:clamp(12px,.95vw,15px);margin-bottom:clamp(12px,1.6vh,18px);
  letter-spacing:.04em;flex:0 0 auto}
.col-head:empty{display:none}
.view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:safe center;
  transition:opacity .28s ease}
.view > *{min-height:0;max-height:100%}   /* content sits centred; scrolls inside the block if long */
.view.swap{opacity:0}
.view-placeholder{color:var(--fg-tertiary);font-size:clamp(15px,1.5vw,22px);line-height:1.5;text-align:center;margin:auto}

/* overflowing lists scroll with a subtle scrollbar + bottom fade.
   The fade is applied ONLY when the list actually overflows (.is-overflow,
   set in JS) — otherwise a short list's last line was being greyed out with
   empty space below it, which reads as "cut off" on the projected screen. */
.scroll{overflow-y:auto;min-height:0}
.scroll.is-overflow{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--fg-tertiary);border-radius:999px}
.scroll{scrollbar-width:thin;scrollbar-color:var(--fg-tertiary) transparent}
.empty{color:var(--fg-tertiary);font-size:clamp(15px,1.4vw,22px);text-align:center}

/* ── view: agenda detail ── */
.ag-list{list-style:none;margin:0 auto;padding:0;width:100%;max-width:760px;
  display:flex;flex-direction:column;gap:clamp(13px,2.2vh,26px)}
.ag-item{display:flex;align-items:flex-start;gap:clamp(11px,1.2vw,18px);font-size:clamp(18px,2vw,30px);line-height:1.35;min-width:0}
.ag-item .ag-dot{margin-top:.28em}
.ag-item-body{min-width:0}
.ag-item-title{font-weight:500;overflow-wrap:anywhere}
.ag-item.resolved .ag-item-title{color:var(--fg-secondary)}
.ag-outcome{color:var(--fg-secondary);font-size:.6em;margin-top:4px;overflow-wrap:anywhere}
.tag{font-size:clamp(11px,.95vw,14px);padding:2px 12px;border-radius:999px;flex:0 0 auto;margin-left:6px}
.tag.now{color:var(--accent);background:var(--accent-tint-12)}
.tag.agreed{color:var(--state-green);background:var(--tint-green)}
.tag.forming{color:var(--state-orange);background:var(--tint-orange)}

/* ── view: alignment (no live number on the shared screen) ── */
.align-view{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.spark{width:100%;max-width:760px;height:clamp(110px,18vh,190px);display:block}
.align-read{text-align:center;font-size:clamp(18px,2vw,30px);font-weight:600;letter-spacing:-.01em;
  line-height:1.3;max-width:26ch;margin-top:clamp(14px,2vh,22px);overflow-wrap:anywhere}
.align-converge{text-align:center;font-size:clamp(14px,1.3vw,19px);color:var(--accent);line-height:1.4;
  max-width:46ch;margin-top:clamp(8px,1.4vh,14px);overflow-wrap:anywhere}

/* ── view: decisions / actions ── */
.stack{list-style:none;margin:0 auto;padding:0;width:100%;max-width:760px;
  display:flex;flex-direction:column;gap:clamp(13px,2.2vh,26px)}
.stack li{display:flex;align-items:flex-start;gap:clamp(11px,1.2vw,18px);font-size:clamp(18px,2vw,30px);line-height:1.35;min-width:0}
.dec-mark{flex:0 0 auto;font-size:1.05em;line-height:1.2}
.dec-mark.settled{color:var(--state-green)}
.dec-mark.forming{color:var(--state-orange)}
.li-text{font-weight:500;overflow-wrap:anywhere}
.li-body{min-width:0}
.act-box{width:clamp(15px,1.3vw,20px);height:clamp(15px,1.3vw,20px);border-radius:5px;
  border:2px solid var(--fg-tertiary);flex:0 0 auto;margin-top:.2em}
.li-owner{color:var(--fg-secondary);font-size:.6em;margin-top:5px}
.ins-dot{width:clamp(13px,1.3vw,18px);height:clamp(13px,1.3vw,18px);border-radius:50%;flex:0 0 auto;margin-top:.32em}
.ins-detail{color:var(--fg-secondary);font-size:.62em;margin-top:6px;line-height:1.45;overflow-wrap:anywhere}

/* ── theme: default light; dark via data-theme="dark" ── */
:root[data-theme="dark"]{
  --bg:#0E0E10;--bg-secondary:#1C1C1E;--bg-tertiary:#161618;
  --fg-primary:#FFFFFF;--fg-secondary:rgba(235,235,245,.62);--fg-tertiary:rgba(235,235,245,.32);
  --fg-quaternary:rgba(235,235,245,.16);--separator:rgba(255,255,255,.12);
  --accent-tint-12:rgba(0,122,255,.22);
  --tint-green:rgba(52,199,89,.18);--tint-orange:rgba(255,149,0,.18);--tint-red:rgba(255,59,48,.18)}

/* ── narrow / portrait ── */
@media (max-width:760px){
  .title{font-size:clamp(22px,6vw,34px)}
  .ag-item,.stack li{font-size:clamp(17px,4.6vw,24px)}
}