/* ─────────────────────────────────────────────────────────────
   present-mode.css — projector / "zoom" experience for the explainer
   pages. Pairs with present-mode.js, which self-injects the launch
   button and the control dock. No per-page markup.

   Ported from reference/workshop-finance/presentation-mode.css. The source
   targets a dark, emerald-accented site with a theme toggle; these pages
   are light with Synapxe purple and no toggle, so the launch button is
   re-themed (purple on white) and the light/dark branches are dropped.
   Selector coverage is widened from `.container`/`.explainer-section` to
   include `.tab-content`, which is what the 9 tabbed explainers use.
   ───────────────────────────────────────────────────────────── */

/* ── Launch button ──
   Fixed top-right. The drawer's hamburger owns the top-LEFT corner, so the
   two never meet. `.tab-nav` gets a matching padding-right below so the
   button never sits on top of the last tab once the bar is stuck to the top. */
.present-fab {
  position: fixed; top: 14px; right: 18px; z-index: 300;
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(91, 33, 182, .2);
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--brand, #5B21B6); cursor: pointer;
  box-shadow: 0 4px 14px rgba(91, 33, 182, .18);
  transition: transform .2s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.present-fab:hover {
  background: #fff; transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .5);
  box-shadow: 0 6px 18px rgba(91, 33, 182, .28);
}
.present-fab:active { transform: scale(.97); }
.present-fab:focus-visible { outline: 2px solid var(--brand, #5B21B6); outline-offset: 2px; }
.present-fab svg { width: 16px; height: 16px; display: block; margin-left: 2px; }
body.presenting .present-fab { display: none; }

/* Keep the sticky tab bar clear of the launch button. Mirrors the
   padding-left the drawer injects for its hamburger.
   Qualified with `body` so it outranks a plain single-class rule whatever the
   load order: tokenizer-explainer.html declares `.section-nav{...padding:12px 0}`
   in a page-local <style>, and that shorthand would otherwise reset this. */
body .tab-nav,
body .section-nav { padding-right: 58px; }

/* ── Hide the site chrome while presenting ── */
body.presenting #wsnav,
body.presenting .nav-rail,
body.presenting .nr-crumb,
body.presenting .sidebar,
body.presenting .exp-footer,
body.presenting .footer { display: none !important; }

/* The rail may have left `body.rail-active` set, which fades the real tabs
   out. In present mode the tabs ARE the navigation, so force them back. */
body.presenting .tab-nav button,
body.presenting .section-nav button {
  opacity: 1 !important; pointer-events: auto !important; transform: none !important;
}
body.presenting .tab-nav { overflow: visible !important; padding-right: 0; }
body.presenting .section-nav { padding-right: 0; }
/* The drawer injects `.tab-nav{padding-left:58px}` globally; with the
   hamburger hidden that indent is just an off-centre bar. */
body.presenting .tab-nav { padding-left: 0 !important; }
body.presenting .exp-back,
body.presenting .back-link { display: none; }

/* ── Full-bleed projector layout ──
   All three content shells are width-capped and centred by default. On a
   projector that wastes half the screen, so let them fill it. */
body.presenting .container,
body.presenting .tab-content,
body.presenting .explainer-section {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 24px clamp(36px, 5vw, 140px) 128px;
}
body.presenting.has-sidebar .container,
body.presenting.has-sidebar .module-hero,
body.presenting.has-sidebar .footer { margin-left: 0 !important; }

/* Compact the hero so the first section is on screen with little scrolling */
body.presenting .exp-hero,
body.presenting .hero,
body.presenting .module-hero { padding-top: 34px; padding-bottom: 24px; }
body.presenting .exp-hero h1,
body.presenting .hero h1,
body.presenting .module-hero h1 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.12; }
body.presenting .exp-hero .subtitle,
body.presenting .hero .subtitle,
body.presenting .module-hero .mod-subtitle {
  font-size: clamp(16px, 1.7vw, 23px);
  max-width: min(1100px, 80vw);
}

/* ── Scale type for the back of the room ── */
body.presenting .tab-nav button,
body.presenting .section-nav button { font-size: 15px; padding: 13px 20px; }

body.presenting .exp-card p, body.presenting .exp-card li,
body.presenting .card p, body.presenting .card li,
body.presenting .section p, body.presenting .section li,
body.presenting .concept-card p {
  font-size: clamp(16px, 1.15vw, 21px);
  line-height: 1.7;
}
body.presenting .exp-card h2,
body.presenting .card h2,
body.presenting .section > h2 { font-size: clamp(22px, 2.1vw, 34px); }
body.presenting .exp-card h3, body.presenting .exp-card h4,
body.presenting .card h3, body.presenting .card h4,
body.presenting .section h3, body.presenting .section h4,
body.presenting .concept-card h4 { font-size: clamp(17px, 1.45vw, 24px); line-height: 1.3; }

/* Wider viewport means the grids can breathe */
body.presenting .concept-grid,
body.presenting .info-grid { gap: 20px; }

/* ── Control dock ──
   Dark glass reads cleanly over a light page and stays legible against any
   card it happens to overlap. Nothing else on these pages is anchored to the
   bottom, so the dock has the corner to itself. */
.present-dock {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1300;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 28px);
  padding: 9px 12px; border-radius: 16px;
  background: rgba(11, 5, 20, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 44px rgba(11, 5, 20, .45);
  font-family: 'Outfit', system-ui, sans-serif; color: #E2E8F0;
  transition: opacity .45s ease;
}
.present-dock.dock-idle { opacity: .12; }
.present-dock:hover { opacity: 1; }

.present-dock .pd-title {
  display: flex; flex-direction: column; gap: 1px;
  max-width: 300px; line-height: 1.2;
}
.present-dock .pd-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-bright, #A78BFA);
}
.present-dock .pd-name {
  font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.present-dock .pd-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .14); flex: none; }

.present-dock .pd-dots { display: flex; gap: 7px; align-items: center; }
.present-dock .pd-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .26); border: none; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.present-dock .pd-dot:hover { background: rgba(255, 255, 255, .6); }
.present-dock .pd-dot.is-active {
  width: 22px; border-radius: 5px;
  background: linear-gradient(135deg, #A78BFA, #D946EF);
}

.present-dock .pd-nav { display: flex; align-items: center; gap: 6px; }
.present-dock .pd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.present-dock .pd-btn:hover { background: rgba(255, 255, 255, .2); }
.present-dock .pd-btn:active { transform: scale(.94); }
.present-dock .pd-btn:disabled { opacity: .3; cursor: default; }
.present-dock .pd-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: #A78BFA; min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.present-dock .pd-exit { background: rgba(220, 38, 38, .18); border-color: rgba(220, 38, 38, .34); }
.present-dock .pd-exit:hover { background: rgba(220, 38, 38, .34); }

/* Keyboard hint, shown briefly on entry so the shortcuts are discoverable. */
.present-hint {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
  z-index: 1299;
  padding: 7px 14px; border-radius: 10px;
  background: rgba(11, 5, 20, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; color: #C4B5FD;
  white-space: nowrap; pointer-events: none;
  opacity: 1; transition: opacity .6s ease;
}
.present-hint.fade { opacity: 0; }
.present-hint kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px; padding: 1px 5px; margin: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  .present-fab, .present-dock, .present-dock .pd-dot,
  .present-dock .pd-btn, .present-hint { transition: none; }
  .present-dock.dock-idle { opacity: 1; }
}
@media (max-width: 640px) {
  .present-dock .pd-title, .present-dock .pd-sep:first-of-type { display: none; }
  .present-fab { top: 10px; right: 12px; width: 36px; height: 36px; }
  body .tab-nav, body .section-nav { padding-right: 50px; }
}