/* ═══════════════════════════════════════════════════════════════════════════
   Notebook Slides — a PowerPoint-style presentation mode for notebooks.
   Renders a notebook whose Format = "slides" as a 16:9 deck with keyboard /
   click / swipe navigation and a full-screen Present mode for live meetings.
   Namespaced .nbs-* so it never collides with the .nbk-* document viewer.
   Dark theme, cyan/violet accents — consistent with the Stockertim chrome.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --nbs-bg:#05070e; --nbs-panel:#0b1220; --nbs-panel2:#0f1728; --nbs-line:rgba(120,150,210,.16);
  --nbs-ink:#eaf2ff; --nbs-dim:#9fb4d6; --nbs-mut:#5f728f; --nbs-cyan:#44f1ff; --nbs-violet:#a78bfa;
  --nbs-radius:16px; --nbs-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}

.nbs{max-width:1120px;margin:8px auto 30px;padding:0 16px}
.nbs *{box-sizing:border-box}

/* Presenter bar (above the stage) */
.nbs-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.nbs-bar .nbs-title{font:700 15px/1.3 var(--nbs-sans);color:var(--nbs-ink);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbs-badge{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--nbs-sans);letter-spacing:.1em;
  text-transform:uppercase;color:#04121a;background:linear-gradient(135deg,var(--nbs-cyan),var(--nbs-violet));
  padding:5px 10px;border-radius:20px}
.nbs-present{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;border-radius:11px;
  padding:10px 18px;font:800 13px/1 var(--nbs-sans);color:#04121a;
  background:linear-gradient(135deg,var(--nbs-cyan),#22d3ee);transition:filter .15s,transform .15s}
.nbs-present:hover{filter:brightness(1.08);transform:translateY(-1px)}
.nbs-ghost{background:var(--nbs-panel2);border:1px solid var(--nbs-line);color:var(--nbs-dim);
  border-radius:11px;padding:10px 14px;font:700 12px/1 var(--nbs-sans);cursor:pointer}
.nbs-ghost:hover{color:var(--nbs-ink);border-color:var(--nbs-cyan)}

/* Stage — a fixed 16:9 canvas */
.nbs-stage{position:relative;width:100%;aspect-ratio:16/9;background:var(--nbs-bg);
  border:1px solid var(--nbs-line);border-radius:var(--nbs-radius);overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.nbs-track{position:absolute;inset:0;display:flex;height:100%;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nbs-slide{position:relative;flex:0 0 100%;width:100%;height:100%;padding:6% 8%;
  display:flex;flex-direction:column;justify-content:center;gap:.5em;overflow:hidden;
  background:radial-gradient(1200px 600px at 82% -10%,rgba(124,92,255,.12),transparent 60%),
             radial-gradient(900px 500px at 6% 108%,rgba(56,189,248,.10),transparent 55%),var(--nbs-bg)}
.nbs-slide::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(80,120,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(80,120,220,.05) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(130% 100% at 50% 0,#000 45%,transparent);mask-image:radial-gradient(130% 100% at 50% 0,#000 45%,transparent)}
.nbs-slide>*{position:relative;z-index:1;max-width:100%}

/* Typographic scale (relative to stage width via cqw where supported) */
.nbs-stage{container-type:inline-size}
.nbs-slide h1{font:800 clamp(26px,6.2cqw,68px)/1.08 var(--nbs-sans);color:#fff;letter-spacing:-.02em;margin:0}
.nbs-slide h2{font:800 clamp(20px,4.2cqw,42px)/1.15 var(--nbs-sans);color:#fff;margin:0 0 .1em}
.nbs-slide h3{font:700 clamp(16px,3cqw,28px)/1.2 var(--nbs-sans);color:var(--nbs-cyan);margin:.2em 0}
.nbs-slide p{font:400 clamp(14px,2.5cqw,26px)/1.5 var(--nbs-sans);color:var(--nbs-dim);margin:.15em 0}
.nbs-slide ul{margin:.2em 0;padding-left:1.1em;display:flex;flex-direction:column;gap:.35em}
.nbs-slide li{font:400 clamp(14px,2.5cqw,26px)/1.4 var(--nbs-sans);color:var(--nbs-ink);position:relative}
.nbs-slide li::marker{color:var(--nbs-cyan)}
.nbs-slide a{color:var(--nbs-cyan);text-decoration:underline}
.nbs-slide img{max-width:100%;max-height:64cqh;border-radius:10px;object-fit:contain;align-self:center}
.nbs-slide strong{color:#fff}

/* Slide layouts */
.nbs-slide--title{align-items:flex-start;justify-content:center;text-align:left}
.nbs-slide--title .nbs-kick{font:700 clamp(11px,1.9cqw,17px)/1 var(--nbs-sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--nbs-cyan);margin-bottom:.6em}
.nbs-slide--title .nbs-sub{font:500 clamp(13px,2.3cqw,22px)/1.4 var(--nbs-sans);color:var(--nbs-dim);margin-top:.5em}
.nbs-slide--title .nbs-metabar{margin-top:1.2em;display:flex;gap:8px;flex-wrap:wrap}
.nbs-slide--title .nbs-chip{font:700 clamp(9px,1.5cqw,12px)/1 var(--nbs-sans);letter-spacing:.06em;
  color:var(--nbs-dim);background:rgba(120,150,210,.12);border:1px solid var(--nbs-line);padding:5px 10px;border-radius:20px}
/* ── Cover image on the title slide — BLENDED, not pasted ────────────────────
   The image bleeds full-frame; a theme-coloured gradient scrim (the theme's own
   --nbs-bg) dissolves it into the slide toward the text, so the cover reads as
   part of the design in every template. Kept to two flat gradients + the image
   — no radial/color-mix/backdrop-filter — so it paints cheaply even in the live
   editor preview, which re-renders on every keystroke. */
.nbs-slide--title.has-cover{justify-content:flex-end;padding-bottom:8.5%}
.nbs-slide--title.has-cover::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg, var(--nbs-bg) 6%, rgba(0,0,0,0) 80%),
    linear-gradient(0deg, var(--nbs-bg) 1%, rgba(0,0,0,0) 46%),
    var(--nbs-cover) center/cover no-repeat}
.nbs-slide--title.has-cover>*{text-shadow:0 2px 18px rgba(0,0,0,.55)}

/* ── Full-bleed image slide — a blurred fill of the same image behind the sharp
   one, so any aspect ratio sits in a designed frame rather than on a black bar.
   The backdrop uses a SMALL thumbnail (set in JS) and a modest blur with no
   scale, so the GPU cost stays low even with several image slides in a deck. */
.nbs-slide--image{padding:4.5%;align-items:center;justify-content:center;background:var(--nbs-bg)}
.nbs-slide--image::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--nbs-img) center/cover no-repeat;filter:blur(22px) brightness(.55)}
.nbs-slide--image::after{opacity:0}
.nbs-slide--image img{position:relative;z-index:1;max-width:90%;max-height:88%;width:auto;height:auto;
  object-fit:contain;border-radius:14px;background:transparent;box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* ── Inline images in content — framed & lifted so they feel integrated ─────── */
.nbs-slide--content img,.nbs-slide--section img{border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.45);border:1px solid rgba(120,150,210,.18)}
.nbs-slide--section{align-items:center;justify-content:center;text-align:center}
.nbs-slide--section h1{font-size:clamp(30px,7cqw,80px)}

/* Slide number chip */
.nbs-slide .nbs-num{position:absolute;right:3.5%;bottom:3.2%;z-index:2;font:700 clamp(9px,1.4cqw,13px)/1 var(--nbs-sans);
  color:var(--nbs-mut);letter-spacing:.08em}
.nbs-wm{position:absolute;left:3.5%;bottom:3.2%;z-index:2;display:flex;align-items:center;gap:6px;
  font:700 clamp(9px,1.4cqw,12px)/1 var(--nbs-sans);letter-spacing:.14em;color:var(--nbs-mut);text-transform:uppercase}

/* Edge click zones (present mode only) */
.nbs-zone{position:absolute;top:0;bottom:0;width:22%;z-index:3;cursor:pointer;opacity:0}
.nbs-zone--prev{left:0} .nbs-zone--next{right:0;width:78%}
.nbs[data-present="false"] .nbs-zone{display:none}

/* Controls */
.nbs-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.nbs-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--nbs-line);background:var(--nbs-panel2);
  color:var(--nbs-ink);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.nbs-nav:hover:not(:disabled){border-color:var(--nbs-cyan);color:var(--nbs-cyan)}
.nbs-nav:disabled{opacity:.35;cursor:default}
.nbs-count{font:700 13px/1 var(--nbs-sans);color:var(--nbs-dim);min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.nbs-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:60%}
.nbs-dot{width:9px;height:9px;border-radius:50%;background:rgba(120,150,210,.22);border:none;cursor:pointer;padding:0;transition:.15s}
.nbs-dot.is-active{background:var(--nbs-cyan);box-shadow:0 0 10px var(--nbs-cyan)}
.nbs-progress{height:4px;border-radius:4px;background:rgba(120,150,210,.14);overflow:hidden;margin-top:10px}
.nbs-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--nbs-cyan),var(--nbs-violet));
  border-radius:4px;transition:width .4s cubic-bezier(.22,1,.36,1)}

.nbs-hint{text-align:center;color:var(--nbs-mut);font:400 11px/1.5 var(--nbs-sans);margin-top:10px}
.nbs-hint kbd{font-family:ui-monospace,monospace;background:var(--nbs-panel2);border:1px solid var(--nbs-line);
  border-radius:4px;padding:1px 6px;color:var(--nbs-dim)}

/* ── Present (full-screen) mode ─────────────────────────────────────────── */
.nbs.is-present{position:fixed;inset:0;z-index:99999;max-width:none;margin:0;padding:0;background:#000;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.nbs.is-present .nbs-bar,.nbs.is-present .nbs-hint{display:none}
.nbs.is-present .nbs-stage{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));
  aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.nbs.is-present .nbs-ctrl{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(6,10,20,.72);backdrop-filter:blur(8px);border:1px solid var(--nbs-line);border-radius:30px;
  padding:6px 12px;margin:0;opacity:0;transition:opacity .25s}
.nbs.is-present:hover .nbs-ctrl,.nbs.is-present .nbs-ctrl:focus-within{opacity:1}
.nbs.is-present .nbs-progress{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;height:5px}
.nbs.is-present .nbs-dots{display:none}

@media(max-width:640px){
  .nbs-dots{display:none}
  .nbs-slide{padding:7% 7%}
}
@media print{.nbs-bar,.nbs-ctrl,.nbs-progress,.nbs-hint,.nbs-zone{display:none}
  .nbs-stage{aspect-ratio:auto;height:auto;box-shadow:none}
  .nbs-track{position:static;flex-direction:column}
  .nbs-slide{page-break-after:always;aspect-ratio:16/9}}

/* ── YouTube / video embed inside a slide (responsive 16:9) ─────────────────── */
.nbs-embed{position:relative;width:100%;max-width:80cqw;aspect-ratio:16/9;margin:0 auto;border-radius:12px;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45);align-self:center}
.nbs-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Live stock chart (TradingView) embedded from a [[chart:SYMBOL]] directive ── */
.nbs-chart{position:relative;width:100%;max-width:84cqw;aspect-ratio:16/9;margin:.4em auto;border-radius:12px;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45);align-self:center;background:#0f1728;border:1px solid var(--nbs-line)}
.nbs-chart iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nbs-chart-tag{position:absolute;left:10px;top:9px;z-index:2;font:700 clamp(9px,1.4cqw,12px)/1 var(--nbs-sans);
  letter-spacing:.04em;color:#eaf2ff;background:rgba(6,10,20,.66);border:1px solid var(--nbs-line);
  padding:4px 9px;border-radius:20px;pointer-events:none}
/* Two or more charts on one slide → stack them compactly so both fit the frame. */
.nbs-slide:has(.nbs-chart ~ .nbs-chart){justify-content:center;gap:1.4cqh}
.nbs-slide:has(.nbs-chart ~ .nbs-chart) .nbs-chart{aspect-ratio:auto;height:38cqh;max-width:78cqw}

/* ══ TEMPLATES ══ professional presentation themes. Applied as .nbs-theme-<id>
   on the deck root; they override the CSS variables + a few hard-coded colours.
   Pick one in the deck studio; the choice is stored as a <!--theme:id--> directive
   in the deck body so it round-trips through plain-markdown editing. */

/* Aurora — deep space with violet/teal auroral glows (default-adjacent, richer) */
.nbs.nbs-theme-aurora{--nbs-cyan:#7ef0ff;--nbs-violet:#c4b5fd}
.nbs.nbs-theme-aurora .nbs-slide{background:
  radial-gradient(1000px 620px at 80% -12%,rgba(167,139,250,.30),transparent 60%),
  radial-gradient(820px 520px at -2% 112%,rgba(56,189,248,.24),transparent 55%),#090a1a}

/* Corporate — clean light deck, blue accent, confident sans */
.nbs.nbs-theme-corporate{--nbs-ink:#0d1b3e;--nbs-dim:#40527a;--nbs-mut:#7d8db0;--nbs-cyan:#1f6bff;--nbs-violet:#1f6bff}
.nbs.nbs-theme-corporate .nbs-slide{background:linear-gradient(180deg,#ffffff,#eef3fb)}
.nbs.nbs-theme-corporate .nbs-slide::after{opacity:.22}
.nbs.nbs-theme-corporate .nbs-slide h1,.nbs.nbs-theme-corporate .nbs-slide h2,.nbs.nbs-theme-corporate .nbs-slide strong{color:#0d1b3e}

/* Editorial — warm paper, serif, magazine feel */
.nbs.nbs-theme-editorial{--nbs-ink:#1c1a17;--nbs-dim:#4f4a42;--nbs-mut:#8a8175;--nbs-cyan:#b45309;--nbs-violet:#b45309;
  --nbs-sans:Georgia,Cambria,"Times New Roman",serif}
.nbs.nbs-theme-editorial .nbs-slide{background:#faf6ee}
.nbs.nbs-theme-editorial .nbs-slide::after{opacity:.15}
.nbs.nbs-theme-editorial .nbs-slide h1,.nbs.nbs-theme-editorial .nbs-slide h2,.nbs.nbs-theme-editorial .nbs-slide strong{color:#1c1a17}

/* Sunset — bold warm gradient for launches & keynotes */
.nbs.nbs-theme-sunset{--nbs-ink:#fff5ec;--nbs-dim:#ffd9c2;--nbs-mut:#e8b79a;--nbs-cyan:#ffb86b;--nbs-violet:#ff9a8b}
.nbs.nbs-theme-sunset .nbs-slide{background:linear-gradient(135deg,#241549,#7a2c5e 55%,#c2410c)}
.nbs.nbs-theme-sunset .nbs-slide::after{opacity:.2}

/* Mono — minimalist near-black, no grid, quiet luxury */
.nbs.nbs-theme-mono{--nbs-ink:#fafafa;--nbs-dim:#a3a3a3;--nbs-mut:#6b6b6b;--nbs-cyan:#fafafa;--nbs-violet:#d4d4d4}
.nbs.nbs-theme-mono .nbs-slide{background:#0c0c0d}
.nbs.nbs-theme-mono .nbs-slide::after{opacity:0}
.nbs.nbs-theme-mono .nbs-slide h3{color:#d4d4d4}

/* Ocean — cool corporate-dark with teal accent */
.nbs.nbs-theme-ocean{--nbs-cyan:#2dd4bf;--nbs-violet:#38bdf8;--nbs-dim:#a7c7d8}
.nbs.nbs-theme-ocean .nbs-slide{background:
  radial-gradient(900px 560px at 84% -10%,rgba(45,212,191,.22),transparent 60%),
  radial-gradient(760px 480px at 0% 110%,rgba(56,189,248,.18),transparent 55%),#04121a}

/* ── NOTE / document view (format:'doc') — flowing prose, not a deck ─────────── */
.nbs-doc{max-width:820px;margin:4px auto;padding:8px 20px 40px;color:var(--nbs-ink);font-family:var(--nbs-sans)}
.nbs-doc-kick{font:700 11px/1 var(--nbs-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nbs-cyan);margin-bottom:8px}
.nbs-doc-title{font:800 clamp(24px,4vw,40px)/1.12 var(--nbs-sans);color:var(--nbs-ink);letter-spacing:-.02em;margin:0 0 6px}
.nbs-doc-meta{font-size:12.5px;color:var(--nbs-mut);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--nbs-line)}
.nbs-doc-body h1{font:800 clamp(20px,3vw,30px)/1.2 var(--nbs-sans);color:var(--nbs-ink);margin:1.4em 0 .4em}
.nbs-doc-body h2{font:800 clamp(18px,2.4vw,24px)/1.25 var(--nbs-sans);color:var(--nbs-ink);margin:1.2em 0 .35em}
.nbs-doc-body h3{font:700 clamp(15px,2vw,19px)/1.3 var(--nbs-sans);color:var(--nbs-cyan);margin:1em 0 .3em}
.nbs-doc-body p{font-size:16px;line-height:1.75;color:var(--nbs-dim);margin:.7em 0}
.nbs-doc-body ul{margin:.6em 0;padding-left:1.3em;display:flex;flex-direction:column;gap:.4em}
.nbs-doc-body li{font-size:16px;line-height:1.6;color:var(--nbs-ink)}
.nbs-doc-body li::marker{color:var(--nbs-cyan)}
.nbs-doc-body a{color:var(--nbs-cyan);text-decoration:underline}
.nbs-doc-body strong{color:var(--nbs-ink)}
.nbs-doc-body img{max-width:100%;border-radius:12px;margin:1em 0;display:block}
.nbs-doc-body .nbs-embed{margin:1.2em auto}