/* Reusable lecture-deck presentation shell.

   Visual language is a web-native descendant of the EE499 PowerPoint lecture
   template: navy-to-cyan header band with a chevron motif, a bounded white
   teaching canvas, a thin rule above a footer carrying the course label and
   the slide number, and dark gradient opening/closing slides.

   Layout is a persistent slide navigator down the left and a dominant slide
   canvas beside it, in a column that shares the slide's height so the two read
   as one composed presentation frame rather than a slide with an unrelated list
   running down the page. The navigator borrows the visual language of the
   long-form lecture nav (a hairline rule down the left of muted entries, the
   active one highlighted), so the deck reads as the same site rather than a
   separate application.

   The same slides serve both view modes, keyed off data-deck-view on the deck:
     slides  — one slide at a time (default)
     reading — the same slide sequence stacked vertically
   There is no second rendering of the lecture; reading view reveals the slides
   the presentation already uses.

   Appearance and layout only. Deck behaviour lives in shared/js/lecture-deck.js;
   no course physics or teaching content is defined here. */

:root{
  --deck-navy:#002141;--deck-navy-mid:#013074;--deck-blue:#174db1;
  --deck-cyan:#0dbffd;--deck-cyan-deep:#0692d0;--deck-ice:#b7e3fe;
  --deck-pale:#eaf5fe;--deck-gold:#eeaa00;
  --deck-canvas:1180px;--deck-rail:clamp(13rem,17.5vw,15rem);--deck-gap:clamp(.9rem,1.8vw,1.6rem);--deck-radius:14px;
  /* The presentation never becomes smaller than the geometry every slide was
     composed against, whatever the viewport height: below this the deck keeps
     its size and the page scrolls, as it did before the fit rule existed. */
  --deck-floor:1200px;
  /* Shared spacing rhythm for the presentation frame. One step above the slide,
     one step between stacked slides in reading view, one bar height that both
     the sticky offsets and the viewport-fit calculation are derived from. */
  --deck-step:1rem;--deck-stack:clamp(1.1rem,2.4vw,1.9rem);--deck-bar-h:3.5rem;
  /* Page chrome above the slide plus a little air beneath it, used to size the
     slide so the whole presentation frame lands above the fold on desktop.
     The default covers the site header, the deck bar and the step above the
     slide; a course with an extra chrome band raises it (see EE 499). The site
     footer is deliberately not counted — it belongs below the fold. */
  --deck-fit:9.5rem;
  /* Canonical lecture-slide geometry. Every slide shares this outer ratio, so
     one HTML slide maps to one widescreen page in a future PDF/PPTX export.
     Change it here only — never per slide. */
  --deck-ratio:16/9;
}

/* ---- deck shell --------------------------------------------------------- */
/* The navigator runs down the left, the slide leads beside it. `stretch` is
   what ties the two together: the row is sized by the slide (whose height comes
   from the canonical ratio) and the navigator fills exactly that height.
   The side is set here and only here — one template, both courses. */
.lecture-deck{display:grid;grid-template-columns:var(--deck-rail) minmax(0,1fr);column-gap:var(--deck-gap);align-items:stretch;
  width:min(calc(100% - 2rem),var(--deck-canvas));margin-inline:auto;padding-bottom:clamp(1.5rem,4vw,2.75rem)}
.deck-main{grid-column:2;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--deck-step);padding-top:var(--deck-step)}

/* ---- deck bar (chrome, injected by lecture-deck.js) --------------------- */
.deck-bar{grid-column:1/-1;position:sticky;top:0;z-index:16;display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1rem);min-height:var(--deck-bar-h);padding:.4rem 0;background:rgba(251,250,247,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.deck-bar__nav{display:flex;gap:.4rem;margin-left:auto}
.deck-button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.45rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--deck-navy-mid);font-size:.84rem;font-weight:750;line-height:1.2}
.deck-button:hover:not(:disabled){border-color:var(--deck-cyan-deep);color:var(--deck-cyan-deep);background:var(--deck-pale)}
.deck-button:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:2px}
.deck-button:disabled{opacity:.42;cursor:not-allowed}
.deck-button--overview{display:none;background:var(--deck-navy-mid);border-color:var(--deck-navy-mid);color:#fff}
.deck-button--overview:hover{background:var(--deck-navy);border-color:var(--deck-navy);color:#fff}
.deck-viewlink{color:var(--deck-navy-mid);font-size:.82rem;font-weight:750;text-decoration:none;white-space:nowrap}
.deck-viewlink:hover{color:var(--deck-cyan-deep);text-decoration:underline}
.deck-viewlink:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:3px;border-radius:6px}

/* Slides / Reading switch. Compact segmented control: one control, two labels,
   the active one filled rather than merely tinted so the state does not rest on
   colour alone. */
.deck-modes{flex:none;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}
.deck-mode{min-height:2.15rem;padding:.3rem .85rem;border:0;border-radius:999px;background:none;color:var(--muted);font-size:.8rem;font-weight:800;line-height:1.2;white-space:nowrap}
.deck-mode:hover{color:var(--deck-navy-mid);background:var(--deck-pale)}
.deck-mode:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:2px}
.deck-mode[aria-pressed="true"]{background:var(--deck-navy-mid);color:#fff;box-shadow:inset 0 0 0 1px var(--deck-navy-mid)}
.deck-mode[aria-pressed="true"]:hover{background:var(--deck-navy)}

.deck-progress{flex:1;min-width:0;display:grid;gap:.3rem}
.deck-progress__track{height:3px;border-radius:999px;background:var(--deck-pale)}
.deck-progress__fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--deck-navy-mid),var(--deck-cyan));transition:width .22s ease-out}
.deck-progress__label{margin:0;color:var(--muted);font-size:.78rem;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Mobile-reachable previous/next tray, injected after the slides. */
.deck-tray{display:none;position:sticky;bottom:0;z-index:16;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;background:rgba(251,250,247,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.deck-tray__label{margin:0;color:var(--muted);font-size:.78rem;font-weight:750;font-variant-numeric:tabular-nums}

.deck-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- persistent slide navigator ----------------------------------------- */
/* The navigator column is sized by the slide, never the other way round: the
   list is taken out of flow so a long deck cannot stretch the grid row, and the
   inner column then fills exactly the height the slide established. Overflow is
   absorbed inside the list, not by the page. */
.deck-nav{grid-column:1;position:relative;min-width:0;min-height:0}
.deck-nav__inner{position:absolute;inset:var(--deck-step) 0 0;display:flex;flex-direction:column;min-height:0;gap:.5rem}
.deck-nav__title{flex:none;margin:0;color:var(--muted);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.deck-nav__list{flex:1 1 auto;list-style:none;margin:0;padding:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
.deck-nav__link{display:flex;gap:.55rem;padding:.4rem .65rem;border-left:2px solid var(--line);border-radius:0 8px 8px 0;color:var(--muted);font-size:.82rem;line-height:1.35;text-decoration:none}
/* Two lines of title, then an ellipsis: long slide names stay scannable and
   the list keeps an even rhythm. */
.deck-nav__link>span:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.deck-nav__link:hover{border-left-color:var(--deck-cyan-deep);color:var(--deck-navy-mid);background:var(--deck-pale)}
.deck-nav__link:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:-1px;color:var(--deck-navy-mid)}
.deck-nav__link[aria-current="true"]{border-left-color:var(--deck-cyan-deep);border-left-width:3px;padding-left:calc(.65rem - 1px);color:var(--deck-navy);font-weight:800;background:var(--deck-pale)}
.deck-num{flex:none;color:var(--deck-cyan-deep);font-weight:850;font-variant-numeric:tabular-nums}
.deck-nav__link[aria-current="true"] .deck-num{color:var(--deck-navy-mid)}

/* ---- slide canvas -------------------------------------------------------- */
/* One canonical outer geometry for every slide: the aspect ratio fixes the
   height from the width, so no slide is ever sized individually and content
   that does not fit must be recomposed rather than given more room. */
.lecture-slide{position:relative;display:flex;flex-direction:column;aspect-ratio:var(--deck-ratio);min-height:0;background:#fff;border:1px solid var(--line);border-radius:var(--deck-radius);box-shadow:0 10px 28px rgba(1,33,65,.08);scroll-margin-top:calc(var(--deck-bar-h) + var(--deck-step))}
.lecture-slide[hidden]{display:none}
/* Presentation is the default view, so only the active slide is laid out from
   the first paint. Without this the whole deck renders as one long document and
   is then collapsed once the deck script runs — a reading-view flash. */
.lecture-deck .lecture-slide:not(.is-active){display:none}
.lecture-deck[data-deck-view="reading"] .lecture-slide{display:flex}
/* Scripting off: the deck cannot switch views, so fall back to the whole
   lecture as one continuous document. */
@media(scripting:none){.lecture-deck .lecture-slide:not(.is-active){display:flex}}
.lecture-slide:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:3px}

/* Header band carrying the nested chevron motif of the PowerPoint template. */
.slide-head{position:relative;flex:none;display:grid;align-content:center;gap:.1rem;min-height:62px;border-radius:var(--deck-radius) var(--deck-radius) 0 0;padding:.6rem clamp(1.1rem,3vw,1.9rem) .65rem clamp(3.8rem,6vw,4.9rem);color:#fff;
  background:linear-gradient(100deg,var(--deck-navy) 0,var(--deck-navy-mid) 26%,var(--deck-cyan-deep) 74%,var(--deck-cyan) 100%)}
.slide-head::before,.slide-head::after{content:"";position:absolute;top:0;bottom:0;width:2.1rem;clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);pointer-events:none}
.slide-head::before{left:.5rem;background:rgba(255,255,255,.22)}
.slide-head::after{left:1.95rem;background:rgba(103,219,253,.5)}
.slide-head h2{margin:0;color:#fff;font-size:clamp(1.25rem,2.4vw,1.85rem);font-weight:400;line-height:1.18;letter-spacing:-.015em}
.slide-kicker{margin:0;color:rgba(255,255,255,.8);font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* Teaching canvas. "safe center" keeps short slides optically centred while
   letting tall content start at the top instead of being clipped. */
/* Presentation typography sits a step above article typography: a slide is
   read from further away and carries less text, so body copy and display
   maths are larger here than in the long-form lecture. */
.slide-body{flex:1;min-height:0;display:grid;align-content:safe center;gap:0;min-width:0;font-size:1.01rem;line-height:1.6;padding:clamp(.9rem,1.9vw,1.35rem) clamp(1.2rem,2.6vw,2rem);
  /* Safety net only: after the composition pass nothing overflows at the
     canonical size, but scrolling is preferable to clipping teaching content
     if a reader's default font is unusually large. */
  overflow:auto}
.slide-body>*{min-width:0}
.slide-body>p,.slide-body>ul{max-width:68ch}
.slide-body>p:last-child{margin-bottom:0}
.slide-body mjx-container[display="true"]{max-width:100%;overflow-x:auto;overflow-y:hidden}
/* One presentation type scale for both courses: a sub-heading inside a slide
   sits a step above body copy, not at the article's h3 size, and display maths
   is the largest running element on the canvas. Courses may restate colour, not
   size. */
.lecture-slide h3{margin:0 0 .35rem;font-size:1.1rem;line-height:1.25}
.lecture-slide .equation{font-size:clamp(1.12rem,2.1vw,1.52rem);padding:.55rem 0}
/* The article stylesheet makes .equation a horizontal scroll container, which
   zeroes its intrinsic height and lets a fixed-height slide undersize its row.
   Wide maths still scrolls, one level in, on the MathJax container itself. */
.lecture-slide .equation{overflow:visible}
/* MathJax gives every display block a 1em margin. Where several equations
   stack on one slide that rhythm is too loose for the canonical canvas, so
   tighten it there only — single-equation slides keep the generous spacing. */
.slide-body:has(.equation ~ .equation) mjx-container[display="true"]{margin:.35em 0}
.lecture-slide .historical-note{padding:.8rem 1rem}
.lecture-slide .historical-note p{margin:0}
.lecture-slide .geo-widget{min-height:min-content}
/* Two-column composition for slides whose material reads better side by side
   than stacked. Used to fit existing content into the canonical canvas without
   shrinking type — never to introduce new material. */
.slide-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem);gap:clamp(1rem,2.4vw,1.9rem);align-items:center}
.slide-split>*{min-width:0}
.slide-split--even{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.slide-split--even>p{margin-bottom:0}
.slide-split p:last-child{margin-bottom:0}
.slide-split .comparison{margin:0}
/* Native compass rendering of the azimuth convention already stated in the
   adjacent paragraph. Presentation of existing information, not new content. */
.compass-figure{margin:0;display:grid;justify-items:center;gap:.4rem}
.compass-figure svg{width:min(100%,13.5rem);height:auto}
.compass-figure figcaption{color:var(--muted);font-size:.76rem;text-align:center}

/* Comparison cards carry the horizontal rhythm of the template content slide. */
.lecture-slide .geo-condition{padding:1.5rem 1.2rem;font-size:1.15rem}
.lecture-slide .geo-condition strong{font-size:1.2rem;margin-bottom:.45rem}
/* A single equation carrying a whole slide is set larger, as the focal object
   rather than a line of body text. */
.lecture-slide .equation--lead{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.lecture-slide .special-cases article{padding:1.15rem}
.lecture-slide .comparison th,.lecture-slide .comparison td{padding:.4rem .8rem}
.lecture-slide .source-note{margin:.55rem 0 0;font-size:.78rem;opacity:.85}
.lecture-slide .historical-note,.lecture-slide .calculation,.lecture-slide .visibility-figure{margin-block:.7rem}
.lecture-slide .comparison{margin-block:.35rem}
.lecture-slide .quiz{border:0;padding:0;margin-block:.5rem}
.lecture-slide .geo-conditions,.lecture-slide .special-cases{margin-block:.5rem}

/* Footer band: thin rule, course label, slide number. */
.slide-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.32rem clamp(1.2rem,2.6vw,2rem) .38rem;border-top:2px solid var(--deck-cyan-deep);color:var(--muted);font-size:.72rem}
.slide-foot__course{letter-spacing:.04em}
.slide-foot__number{color:var(--deck-cyan-deep);font-weight:850;font-variant-numeric:tabular-nums}

/* ---- slide types --------------------------------------------------------- */
.lecture-slide[data-slide-type="title"],.lecture-slide[data-slide-type="summary"],.lecture-slide[data-slide-type="section"]{border-color:var(--deck-navy);box-shadow:0 12px 32px rgba(1,33,65,.18)}
/* When a slide has no header band its body IS the full bleed surface, so the
   body's own background and decorative layers must be clipped to the slide's
   corner radius rather than squaring it off. Keyed on structure, not on slide
   type, so any future full-bleed slide clips correctly too. The body already
   hides its overflow, so the chevron pseudo-element follows the same curve. */
.lecture-slide:not(:has(.slide-head)) .slide-body{border-radius:inherit}

.lecture-slide[data-slide-type="title"] .slide-body,.lecture-slide[data-slide-type="summary"] .slide-body,.lecture-slide[data-slide-type="section"] .slide-body{position:relative;overflow:hidden;color:#fff;padding:clamp(1.7rem,4vw,2.9rem) clamp(1.5rem,4vw,2.9rem);
  background:linear-gradient(118deg,var(--deck-navy) 0,var(--deck-navy-mid) 34%,var(--deck-cyan-deep) 78%,var(--deck-cyan) 100%)}
/* Mirrored chevron motif of the template opening and closing slides. */
/* Bleeds horizontally only: vertical overflow would count against the slide in
   the canonical-size QA check. */
.lecture-slide[data-slide-type="title"] .slide-body::after,.lecture-slide[data-slide-type="summary"] .slide-body::after,.lecture-slide[data-slide-type="section"] .slide-body::after{content:"";position:absolute;top:0;bottom:0;right:-3rem;width:12rem;pointer-events:none;
  background:rgba(255,255,255,.16);clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%)}
.lecture-slide[data-slide-type="title"] .slide-body>*,.lecture-slide[data-slide-type="summary"] .slide-body>*,.lecture-slide[data-slide-type="section"] .slide-body>*{position:relative;z-index:1}
.lecture-slide[data-slide-type="title"] .slide-body>*{max-width:min(70ch,72%)}
.lecture-slide[data-slide-type="summary"] .slide-body>h2,.lecture-slide[data-slide-type="summary"] .slide-body>p{max-width:min(70ch,74%)}
.lecture-slide[data-slide-type="title"] h1{margin:.08em 0 .22em;color:#fff;font-size:clamp(1.8rem,3.3vw,2.5rem);line-height:1.1;letter-spacing:-.03em}
.lecture-slide[data-slide-type="summary"] h2{margin:.08em 0 .35em;color:#fff;font-size:clamp(1.6rem,2.9vw,2.2rem)}
.lecture-slide[data-slide-type="title"] p,.lecture-slide[data-slide-type="summary"] p,.lecture-slide[data-slide-type="section"] p{margin-bottom:.85em}
.lecture-slide[data-slide-type="title"] .hero__lede{font-size:1.08rem}
.lecture-slide[data-slide-type="title"] .eyebrow,.lecture-slide[data-slide-type="summary"] .eyebrow,.lecture-slide[data-slide-type="section"] .eyebrow{color:#95dcfe}
.lecture-slide[data-slide-type="title"] .muted,.lecture-slide[data-slide-type="summary"] .muted,.lecture-slide[data-slide-type="section"] .muted{color:rgba(255,255,255,.74)}
.lecture-slide[data-slide-type="title"] a,.lecture-slide[data-slide-type="summary"] a,.lecture-slide[data-slide-type="section"] a{color:var(--deck-ice)}
.lecture-slide[data-slide-type="title"] .button,.lecture-slide[data-slide-type="summary"] .button{background:#d8f2ff;color:#00243f!important}
.lecture-slide[data-slide-type="title"] .button:hover,.lecture-slide[data-slide-type="summary"] .button:hover{background:#fff}
.lecture-slide[data-slide-type="title"] .slide-foot,.lecture-slide[data-slide-type="summary"] .slide-foot{display:none}
/* Section divider. The same opening surface as the title and closing slides,
   carrying only the name of the group of teaching slides that follows, so a
   deck reads as parts rather than one undifferentiated run. It keeps its
   footer and slide number: unlike the opening and closing slides it sits
   inside the numbered sequence. */
.lecture-slide[data-slide-type="section"] .slide-body{align-content:center}
.lecture-slide[data-slide-type="section"] h2{margin:.05em 0 .3em;color:#fff;font-size:clamp(1.7rem,3.1vw,2.4rem);line-height:1.12;letter-spacing:-.025em}
.lecture-slide[data-slide-type="section"] .slide-body>*{max-width:min(60ch,74%)}
.lecture-slide[data-slide-type="section"] .slide-foot{border-top-color:rgba(255,255,255,.35);color:rgba(255,255,255,.75)}
.lecture-slide[data-slide-type="section"] .slide-foot__number{color:#fff}
.slide-part{margin:0 0 .35rem;color:#95dcfe;font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.slide-week{margin:0 0 .2rem;font-size:.95rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.slide-goals{border-left:3px solid var(--deck-gold);padding-left:.9rem}

/* Interactive, figure and derivation slides lead with their instrument: the
   content starts at the top and is given the width to be usable. */
.lecture-slide[data-slide-type="interactive"] .slide-body,.lecture-slide[data-slide-type="figure"] .slide-body,.lecture-slide[data-slide-type="derivation"] .slide-body{align-content:start}
.lecture-slide[data-slide-type="interactive"] .geo-widget{margin-block:.25rem}
/* Compact the instrument to the canonical canvas instead of stretching it:
   tighter control rows and a four-up readout, both still full size. */
.lecture-slide[data-slide-type="interactive"] .geo-widget__controls{gap:.5rem;padding:.85rem}
.lecture-slide[data-slide-type="interactive"] .geo-widget__controls label{gap:.2rem;font-size:.92rem}
.lecture-slide[data-slide-type="interactive"] .geo-widget__controls input{padding:.45rem}
.lecture-slide[data-slide-type="interactive"] .geo-widget__controls .muted{font-size:.85rem;margin:0}
.lecture-slide[data-slide-type="interactive"] .geo-widget__results{padding:.85rem;gap:.6rem}
.lecture-slide[data-slide-type="interactive"] .geo-widget__results div{padding:.5rem}
.lecture-slide[data-slide-type="interactive"] .geo-widget__status{padding:.6rem .9rem}
/* The plot leads and takes the width it needs; its caption and provenance sit
   beside it rather than stacking below and pushing past the canonical height. */
.lecture-slide[data-slide-type="figure"] .visibility-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:clamp(.9rem,2vw,1.6rem);align-items:center;border:0;padding:0;margin:0}
.lecture-slide[data-slide-type="figure"] .visibility-figure svg{width:100%;height:auto;min-height:0}
.lecture-slide[data-slide-type="figure"] .visibility-figure figcaption{font-size:.8rem;line-height:1.5}
.lecture-slide[data-slide-type="figure"] .slide-body{align-content:center}

/* Week-to-week navigation appears only on the closing slide. */
.lecture-slide .lesson-pagination{margin-top:1.3rem;border-top-color:rgba(255,255,255,.28)}
.lecture-slide[data-slide-type="summary"] .lesson-pagination strong{color:#fff}
.lecture-slide[data-slide-type="summary"] .lesson-pagination span{color:rgba(255,255,255,.7)}
.lecture-slide[data-slide-type="summary"] .lesson-pagination__course{border-inline-color:rgba(255,255,255,.28)}
.lecture-slide[data-slide-type="summary"] .concept-bridge li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.lecture-slide[data-slide-type="summary"] .concept-bridge li:not(:last-child)::after{color:var(--deck-ice)}

/* ---- reading view -------------------------------------------------------- */
/* The same slides, one after another, scrolled as a document. Nothing is
   re-rendered and no second copy of the lecture exists: the deck simply stops
   hiding the slides it is not presenting, so every composition, equation,
   figure and widget is the one the presentation already uses.

   The visual difference is deliberately small — calmer framing and air between
   the cards — so a student recognises the deck they were just presenting. */
.lecture-deck[data-deck-view="reading"] .deck-main{gap:var(--deck-stack)}
[data-deck-view="reading"] .lecture-slide{box-shadow:0 4px 14px rgba(1,33,65,.055)}
[data-deck-view="reading"] .lecture-slide[data-slide-type="title"],
[data-deck-view="reading"] .lecture-slide[data-slide-type="summary"],
[data-deck-view="reading"] .lecture-slide[data-slide-type="section"]{box-shadow:0 6px 18px rgba(1,33,65,.12)}
/* Reading is a scrolled document, so the navigator can no longer borrow the
   slide's height — the column is now as tall as the whole deck. It sticks under
   the bar instead and keeps the same internal scrolling. */
[data-deck-view="reading"] .deck-nav__inner{position:sticky;inset:auto;top:calc(var(--deck-bar-h) + var(--deck-step));max-height:calc(100vh - var(--deck-bar-h) - 3rem)}
[data-deck-view="reading"] .deck-bar__nav,[data-deck-view="reading"] .deck-tray{display:none}

/* ---- slide overview dialog (compact equivalent of the navigator) --------- */
.deck-overview{width:min(560px,calc(100% - 2rem));max-height:min(78vh,720px);padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(1,33,65,.3)}
.deck-overview::backdrop{background:rgba(0,33,65,.5)}
.deck-overview__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--line);background:#fff}
.deck-overview__head h2{margin:0;font-size:1.05rem;letter-spacing:0}
.deck-overview__close{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-weight:800}
.deck-overview__close:hover{border-color:var(--deck-cyan-deep);color:var(--deck-navy-mid);background:var(--deck-pale)}
.deck-overview__close:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:2px}
.deck-overview__list{list-style:none;margin:0;padding:.5rem}
.deck-overview__link{display:flex;gap:.85rem;width:100%;min-height:44px;padding:.6rem .7rem;border-radius:9px;color:var(--ink);text-decoration:none;align-items:center;font-size:.9rem;line-height:1.4}
.deck-overview__link:hover{background:var(--deck-pale)}
.deck-overview__link:focus-visible{outline:3px solid var(--deck-cyan-deep);outline-offset:-2px}
.deck-overview__link[aria-current="true"]{background:var(--deck-navy-mid);color:#fff;font-weight:800}
.deck-overview__link[aria-current="true"] .deck-num{color:var(--deck-ice)}

/* ---- motion -------------------------------------------------------------- */
@keyframes deck-in-next{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes deck-in-prev{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.lecture-deck[data-direction="next"] .lecture-slide.is-active{animation:deck-in-next .22s ease-out}
.lecture-deck[data-direction="prev"] .lecture-slide.is-active{animation:deck-in-prev .22s ease-out}
/* Motion belongs to presenting, not to scrolling: reading view reveals every
   slide at once, so the entry animation would fire on a slide the reader is
   not looking at. Placed after the direction rules so it wins the cascade. */
.lecture-deck[data-deck-view="reading"] .lecture-slide.is-active{animation:none}
@media(prefers-reduced-motion:reduce){.lecture-deck .lecture-slide.is-active{animation:none}.deck-progress__fill{transition:none}}

/* ---- responsive ---------------------------------------------------------- */
/* Desktop is the presentation target. The deck is allowed a wider canvas than
   the article grid, but never wider than the height of the viewport allows:
   the third term reads "whatever width makes the 16:9 slide exactly as tall as
   the space left under the page chrome", so a lecture opens as one composed
   frame instead of a slide that has to be scrolled to. */
@media(min-width:1024px){
  .lecture-deck{--deck-canvas:1520px;
    width:min(calc(100% - 3rem),var(--deck-canvas),max(var(--deck-floor),calc((100vh - var(--deck-fit)) * 16 / 9 + var(--deck-rail) + var(--deck-gap))))}
  /* Pointer-driven chrome can be tighter than the 44px touch minimum without
     becoming hard to hit, which buys the slide vertical room. */
  .deck-button{min-height:2.5rem}
  /* Reading view is scrolled, so it is not height-bound; give it the full
     canvas rather than the presentation's viewport-fitted width. */
  .lecture-deck[data-deck-view="reading"]{width:min(calc(100% - 3rem),var(--deck-canvas))}
}
/* Below this width the rail would cost the lecture canvas more than it gives,
   so the navigator collapses into the overview dialog it already mirrors. */
@media(max-width:1023px){
  .lecture-deck{grid-template-columns:minmax(0,1fr)}
  .deck-nav{display:none}
  .deck-main{grid-column:1}
  .deck-button--overview{display:inline-flex}
  /* Narrower canvas, same canonical ratio as a floor: the slide keeps its
     widescreen proportions but may grow rather than compress teaching text. */
  .lecture-slide{min-height:min-content}
}
/* Phones are a responsive representation of the canonical slide, not the
   canonical slide itself: content reflows vertically. Export geometry, which
   is defined by --deck-ratio above, is unaffected. */
@media(max-width:800px){
  .lecture-slide{aspect-ratio:auto;min-height:0}
  .slide-body{overflow:visible}
  .slide-head{min-height:62px;padding-left:3.5rem}
  .slide-head::before,.slide-head::after{width:1.5rem}
  .slide-head::before{left:.35rem}
  .slide-head::after{left:1.35rem}
  .slide-body{align-content:start}
  .deck-bar__nav{display:none}
  .deck-tray{display:flex}
  /* The tray already carries the slide count, so the bar keeps only the view
     switch, the overview button and the progress rule. */
  .deck-progress__label{display:none}
  .lecture-slide[data-slide-type="title"] .slide-body>*,.lecture-slide[data-slide-type="summary"] .slide-body>*,.lecture-slide[data-slide-type="section"] .slide-body>*{max-width:100%}
  .lecture-slide[data-slide-type="title"] .slide-body::after,.lecture-slide[data-slide-type="summary"] .slide-body::after,.lecture-slide[data-slide-type="section"] .slide-body::after{right:-6rem;width:9rem;opacity:.55}
  /* Stack the figure and its caption on narrow screens; side by side the plot
     column collapses to a few dozen pixels. */
  .lecture-slide[data-slide-type="figure"] .visibility-figure{grid-template-columns:1fr}
  .lecture-slide[data-slide-type="figure"] .visibility-figure svg{max-height:none;min-height:240px}
}
@media(max-width:520px){
  .lecture-deck{width:calc(100% - 1rem)}
  .deck-button{padding:.5rem .6rem;font-size:.8rem}
  .deck-mode{padding:.3rem .6rem;font-size:.76rem}
  /* Four controls do not fit a phone bar; the progress rule is the one that
     carries no action, and the tray below already reports the slide number. */
  .deck-progress{display:none}
  .deck-viewlink{font-size:.76rem}
  .lecture-slide{border-radius:12px}
  .slide-body{padding:1rem .7rem}
  /* Long display maths cannot fit a phone at lecture size; step it down and
     let the remaining wide expressions scroll inside their own box. */
  .lecture-slide .equation{font-size:.95rem}
  .lecture-slide .calculation{padding:.85rem}
  .slide-foot{padding-inline:.7rem}
  .slide-foot__course{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Reading and print fallback: the whole lecture prints as a continuous
   document, which also keeps a future Presentation/Reading toggle simple. */
/* Development-time overflow flag, switched on by lecture-deck.js when the URL
   carries ?deck-qa. Never active for students. */
.lecture-slide.deck-overflow{outline:3px dashed #b42318;outline-offset:4px}
.lecture-slide.deck-overflow::before{content:"content exceeds canonical slide";position:absolute;z-index:2;margin:.3rem 0 0 .4rem;padding:.1rem .4rem;border-radius:4px;background:#b42318;color:#fff;font-size:.7rem;font-weight:800}

/* One slide per page. Every slide already shares --deck-ratio, so a future
   export needs no per-slide adjustment: reveal them all and page-break. */
@media print{
  .deck-bar,.deck-tray,.deck-nav,.deck-overview,.site-header,.course-nav,.site-footer{display:none!important}
  .lecture-deck{display:block;width:100%}
  .lecture-slide,.lecture-slide[hidden]{display:flex!important;aspect-ratio:var(--deck-ratio);min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;break-inside:avoid;break-after:page}
  .lecture-slide:last-child{break-after:auto}
  .slide-body{overflow:hidden}
}
@page{size:landscape}