/* ============================================================================
   DECK KIT - A MIRROR of `class-app/public/css/deck-kit.css`, byte-identical
   below this header. Edit that file, then copy it here.

   It is the lean deck's own vocabulary (`.ld*`), the sibling of
   `deck-slide-templates.css`, and it is mirrored for the same reason: the
   student area renders the same authored bodies and had none of these rules.
   See that file's header.

   Everything here is sized in `clamp(phone floor, em, projector cap)` off the
   surface's own body size rather than in `cqw`, so unlike the templates it needs
   no canvas and no container to be correct in a reading column.
   ============================================================================ */

/* deck-kit - the lean session deck's whole visual vocabulary, in twelve rules.
 *
 * Scoped to `.ld`. Sizes are clamp(phone floor, em, projector cap): `em` inherits
 * the surface's own body size, so ONE declaration serves both the 1920x1080
 * projector canvas and a student's phone. That is why nothing here is in `cqw` -
 * `cqw` resolves against the canvas on the projector and against the bare
 * viewport on a handset, so a body sized in it is unreadable on one of the two.
 *
 * It lives here, as a real file linked from index.html, and NOT in a slide's
 * bodyHtml. A <style> block is document-global but it is torn out of the DOM the
 * moment its slide unmounts, so a stylesheet authored on slide 1 would strip the
 * styling off every later slide mid-lecture. The presenter console also mounts
 * two SlideRenderers at once (the live slide and the next-slide preview), so
 * per-slide style blocks additionally overlap in one document.
 *
 * Everything `slides.css` already styles inside `.slide__body` - p, ul/li,
 * strong, code, a - is used bare and gets no rule here. Only what the house
 * sheet has no opinion about is declared.
 *
 * NEVER put the substring "10x" in this file: SlideHtml's brand-token swap walks
 * into <style> elements and would replace it with a logo component mid-CSS.
 */

.ld{display:flex;flex-direction:column;gap:clamp(10px,.5em,26px)}
.ld--center{align-items:center;text-align:center}
.ld .ld__eyebrow{align-self:center;font-family:var(--font-mono);font-size:clamp(13px,.68em,32px);letter-spacing:.14em;color:var(--text-tertiary)}
.ld .ld__rule{align-self:center;inline-size:clamp(72px,2.5em,128px);block-size:2px;border-radius:2px;background:linear-gradient(90deg,#0894FF,#BD32D6 50%,#FFA304)}
.ld .ld__mascot{align-self:center;inline-size:clamp(66px,4.4em,180px);block-size:clamp(66px,4.4em,180px)}
.ld .ld__lockup{font-size:clamp(22px,1.85em,72px);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--text-color)}
.ld .ld__kicker{max-inline-size:32em;font-size:clamp(14px,.72em,34px)}
.ld .ld__todo{margin-block-start:clamp(6px,.3em,16px);padding-block-start:clamp(8px,.4em,20px);border-block-start:1px dashed var(--border-default);font-family:var(--font-mono);font-size:clamp(13px,.6em,30px);letter-spacing:.04em;color:var(--text-tertiary)}
.ld .ld__agenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18em),1fr));gap:clamp(8px,.4em,20px) clamp(12px,.6em,28px);list-style:none;padding:0}
.ld .ld__row{display:flex;align-items:baseline;gap:clamp(8px,.35em,18px);padding:clamp(8px,.4em,20px) clamp(10px,.5em,24px);border:1px solid var(--border-light);border-inline-start:3px solid var(--primary-color);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);font-size:clamp(14px,.68em,32px);line-height:1.45;color:var(--text-color)}
.ld .ld__row--break{border-inline-start-color:var(--accent-warm);border-style:dashed;background:var(--primary-light)}
.ld .ld__num{flex:none;font-family:var(--font-mono);font-size:clamp(13px,.82em,26px);color:var(--text-tertiary)}
