/* ===========================================================================
   Briefing mode — immersive presentation surface
   Full-screen, TV/conference optimised. Inherits shell tokens from room.css.
   A briefing is a VIEW over blocks; this is its renderer's styling.
   =========================================================================== */

.briefing{
  position:fixed;inset:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);overflow:hidden;
  transition:background .45s ease,color .45s ease;
}

/* progress hairline across the very top */
.bf-progress{position:absolute;top:0;left:0;height:2px;background:var(--accent);
  width:0;z-index:40;transition:width .4s ease}

/* chapter stage — one chapter visible at a time, centred AND height-bounded */
.bf-stage{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:5vh 7vw 11vh}
.bf-chapter{display:none;width:100%;max-width:1100px;max-height:84vh;
  overflow-y:auto;overflow-x:hidden;animation:bf-in .5s ease both}
.bf-chapter.active{display:flex;flex-direction:column;justify-content:center}
/* thin scrollbar if a dense chapter ever exceeds the viewport */
.bf-chapter::-webkit-scrollbar{width:6px}
.bf-chapter::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
@keyframes bf-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bf-chapter.active{animation:none}
  .bf-progress{transition:none}
}

/* chapter eyebrow */
.bf-eyebrow{font-family:var(--mono);font-size:clamp(12px,1.1vw,15px);
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-deep);
  margin:0 0 1.8vh}

/* cover */
.bf-cover h1{font-family:var(--display);font-weight:600;
  font-size:clamp(34px,5.2vw,68px);line-height:1.0;letter-spacing:-0.015em;
  margin:0 0 3vh;color:var(--fg)}
.bf-cover .sub{font-size:clamp(16px,1.7vw,24px);color:var(--dim);max-width:30ch;margin:0}

/* blocks at presentation scale */
.bf-block{margin:0 0 2.4vh}
.bf-block:last-child{margin-bottom:0}

.bf-keyline{font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.6vw,48px);line-height:1.12;letter-spacing:-0.015em;
  color:var(--fg);max-width:20ch;padding-left:.6em;
  border-left:3px solid var(--accent)}

.bf-prose{font-size:clamp(16px,1.5vw,22px);line-height:1.45;color:var(--dim);
  max-width:34ch}
.bf-prose strong{color:var(--fg);font-weight:600}

.bf-metric{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.bf-metric .fig{font-family:var(--display);font-weight:600;
  font-size:clamp(48px,8vw,108px);line-height:.92;color:var(--accent);
  font-variant-numeric:tabular-nums}
.bf-metric .cap{font-size:clamp(15px,1.4vw,20px);color:var(--dim);max-width:24ch}

.bf-card{background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:clamp(22px,3vw,40px);max-width:640px}
.bf-card .ce{font-family:var(--mono);font-size:clamp(12px,1vw,15px);
  letter-spacing:0.1em;text-transform:lowercase;color:var(--faint);margin:0 0 1.2vh}
.bf-card .ct{font-weight:600;font-size:clamp(18px,2vw,26px);color:var(--fg);margin:0 0 1.2vh}
.bf-card .cb{font-size:clamp(15px,1.4vw,20px);color:var(--dim);margin:0 0 2vh;line-height:1.45}
.bf-card .cb b{color:var(--fg);font-variant-numeric:tabular-nums}
.bf-card .ca{font-size:clamp(16px,1.5vw,23px);color:var(--accent);font-weight:500}

/* embed frame — dashboards, demos, models, video, prototypes */
.bf-embed{width:100%;max-width:1100px;border:1px solid var(--hair);border-radius:16px;
  overflow:hidden;background:var(--surface)}
.bf-embed iframe{width:100%;height:62vh;border:0;display:block}
.bf-embed .ecap{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--faint);padding:12px 16px;
  border-top:1px solid var(--hair)}

/* evidence affordance — any block bound to evidence */
[data-evidence]{cursor:pointer;position:relative;transition:opacity .15s ease}
[data-evidence]:hover{opacity:.86}
[data-evidence]::after{content:"◹ evidence";font-family:var(--mono);
  font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);
  position:absolute;top:-1.4em;right:0;opacity:0;transition:opacity .15s ease;white-space:nowrap}
[data-evidence]:hover::after{opacity:.9}

/* ===========================================================================
   evidence drawer — slides in from the side, briefing dims but stays visible
   =========================================================================== */
.bf-scrim{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;
  pointer-events:none;transition:opacity .3s ease;z-index:45;backdrop-filter:blur(2px)}
.bf-scrim.open{opacity:1;pointer-events:auto}
.bf-drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,42vw);
  background:var(--surface);border-left:1px solid var(--hair);z-index:46;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,0.5)}
.bf-drawer.open{transform:none}
.bf-drawer-head{padding:26px 28px;border-bottom:1px solid var(--hair);
  display:flex;align-items:flex-start;gap:14px}
.bf-drawer-head .dk{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.bf-drawer-head h3{font-family:var(--display);font-weight:600;font-size:24px;
  color:var(--fg);margin:0;letter-spacing:-0.005em}
.bf-drawer-close{margin-left:auto;background:none;border:1px solid var(--hair);
  color:var(--dim);border-radius:8px;width:34px;height:34px;cursor:pointer;
  font-size:16px;flex-shrink:0;transition:color .15s,border-color .15s}
.bf-drawer-close:hover{color:var(--fg);border-color:var(--fg)}
.bf-drawer-body{padding:26px 28px;overflow-y:auto;font-size:16px;line-height:1.6;
  color:var(--dim)}
.bf-drawer-body p{margin:0 0 14px}
.bf-drawer-body strong{color:var(--fg)}
.bf-drawer-body .src{font-family:var(--mono);font-size:12px;color:var(--faint);
  letter-spacing:0.04em;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}

/* ===========================================================================
   chrome — chapter nav, controls, presenter notes
   =========================================================================== */
.bf-chrome{position:absolute;left:0;right:0;bottom:0;padding:20px 28px;
  display:flex;align-items:center;gap:18px;z-index:30;
  background:linear-gradient(transparent,rgba(0,0,0,.45))}
.bf-dots{display:flex;gap:9px;flex-wrap:wrap}
.bf-dot{width:auto;min-width:26px;height:26px;padding:0 8px;border-radius:7px;
  border:1px solid var(--hair);background:transparent;color:var(--faint);
  font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s ease}
.bf-dot:hover{color:var(--fg);border-color:var(--fg)}
.bf-dot.active{background:var(--accent);border-color:var(--accent);color:#06121a}
.bf-count{margin-left:auto;font-family:var(--mono);font-size:12px;
  letter-spacing:0.06em;color:var(--faint)}
.bf-hint{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--faint);opacity:.7}

/* presenter notes (only in ?present) */
.bf-notes{position:absolute;left:0;right:0;bottom:64px;z-index:29;
  padding:16px 28px;background:rgba(0,0,0,.7);border-top:1px solid var(--hair);
  font-size:16px;color:var(--p-ink-dim);line-height:1.5;display:none;max-height:26vh;overflow-y:auto}
body.present .bf-notes{display:block}
.bf-notes .nk{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px}

/* exit + present toggles (top-right, fade unless hovered) */
.bf-tools{position:absolute;top:18px;right:24px;z-index:31;display:flex;gap:10px;
  opacity:0;transition:opacity .25s ease}
.briefing:hover .bf-tools{opacity:1}
.bf-tool{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--faint);background:rgba(0,0,0,.4);
  border:1px solid var(--hair);border-radius:8px;padding:7px 12px;cursor:pointer;
  text-decoration:none;transition:color .15s,border-color .15s}
.bf-tool:hover{color:var(--fg);border-color:var(--fg)}

/* QR hand-off chapter */
.bf-qr{display:flex;flex-direction:column;align-items:center;gap:3vh;text-align:center}
.bf-qr .qbox{background:var(--fg);padding:22px;border-radius:18px}
.bf-qr .qbox svg{display:block}
.bf-qr .qcap{font-size:clamp(17px,1.7vw,24px);color:var(--dim);max-width:26ch}

/* image + split blocks for converted decks */
.bf-imgblock{display:flex;justify-content:center}
.bf-figure{margin:0;max-width:620px;width:100%}
.bf-img{width:100%;height:auto;max-height:46vh;object-fit:cover;border-radius:16px;display:block;
  border:1px solid var(--hair)}
.bf-figcap{font-family:var(--mono);font-size:13px;letter-spacing:0.04em;
  color:var(--faint);margin-top:12px;text-align:center}

.bf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);
  align-items:start;max-width:1100px}
.bf-split-col{display:flex;flex-direction:column;gap:1.4vh}
.bf-split-label{font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.9vw,24px);margin:0 0 1vh;color:var(--fg)}
.bf-split-col.acc-before .bf-split-label{color:var(--p-severe-ember)}
.bf-split-col.acc-after .bf-split-label{color:var(--p-signal-teal)}
.bf-split-item{font-size:clamp(14px,1.3vw,18px);line-height:1.4;color:var(--dim);margin:0}
.bf-split-item b{color:var(--fg);font-weight:600}
@media (max-width:760px){.bf-split{grid-template-columns:1fr}}

/* launch block — open a live demo from within a briefing */
.bf-launchblock{display:flex;justify-content:flex-start}
.bf-launch{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--accent);color:#06121a;border-radius:12px;
  padding:clamp(14px,1.6vw,18px) clamp(20px,2.2vw,28px);
  font-weight:600;font-size:clamp(15px,1.5vw,20px);transition:transform .15s ease,filter .15s ease}
.bf-launch:hover{transform:translateY(-1px);filter:brightness(1.06)}
.bf-launch-ico{font-size:1.2em;line-height:1}
.bf-launch-text{display:flex;flex-direction:column;line-height:1.2}
.bf-launch-note{font-family:var(--mono);font-weight:400;font-size:0.62em;
  letter-spacing:0.04em;opacity:0.7;margin-top:3px;text-transform:none}