/* Classroom Portal slides (slides-<lesson>.html): present mode, the speaker-notes window and print.
   On top of lib/cfz/assets/cfz.css and portal.css. Colours are cfz.css tokens only (--yc is the year's colour).
   Text scales with the screen: 32px body at 1280×720, times the reader's text size (cfzlib.size). */
:root.sl-root{ --sl-k:1; --sl-bar:56px; font-size:calc(var(--sl-k) * max(20px, min(2.5vw, 4.444vh))); }
:root.sl-root[data-size="s"]{ --sl-k:.875; }
:root.sl-root[data-size="l"]{ --sl-k:1.125; }
:root.sl-root[data-size="xl"]{ --sl-k:1.25; }

body.sl-page{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
.sl-page .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- a slide (without JavaScript: all slides one under the other, like a handout) ---------- */
.sl{ display:block; position:relative; margin:16px auto; max-width:min(40em, calc(100vw - 32px)); padding:.8em 1em; border:2px solid var(--line); border-radius:18px; background:var(--paper);
  line-height:calc(var(--lh) * .9); overflow-wrap:anywhere; }
.sl:focus, .sl:focus-visible, .sl-in:focus, .sl-in:focus-visible{ outline:none; }
.sl-in{ display:flex; min-width:0; }
.sl-fit{ display:flex; flex-direction:column; gap:.5em; width:min(100%, 36em); margin:0 auto; min-width:0; align-self:flex-start; }
.sl-wide .sl-fit, .sl-toy .sl-fit, .sl-formula .sl-fit, .sl-explain .sl-fit:has(.scrollx, pre){ width:min(100%, 38em); }

.sl-kick{ font-size:.6em; font-weight:600; color:var(--muted); letter-spacing:.02em; max-width:none; }
.sl-kick .pt-code{ font-size:1em; padding:0 .35em; border-radius:6px; color:var(--ink); }
.sl-h{ font-size:1.4em; line-height:1.2; padding-bottom:.18em; border-bottom:.1em solid var(--yc); }
.sl-h .muted{ font-weight:400; font-size:.7em; }
.sl-body{ display:flex; flex-direction:column; gap:.55em; min-width:0; }
.sl-body p, .sl p{ max-width:none; }
.sl-body ul, .sl-body ol{ margin:0 0 0 1.2em; padding:0; display:flex; flex-direction:column; gap:.3em; }
.sl-body li::marker{ color:var(--yc); font-weight:700; }
.sl-body h3, .sl-sub{ font-size:1em; font-weight:700; color:var(--ink); }
.sl-lead{ color:var(--muted); font-size:.8em; }
.sl-body code{ font-size:.9em; }
.sl .co{ max-width:none; padding:.4em .7em; gap:.25em; border-radius:16px; }
.sl .co .colbl{ font-size:.55em; }
.sl .co .colbl i{ min-width:1.6em; height:1.6em; font-size:.9em; }
.sl .scrollx{ max-width:100%; }
.sl .tt{ font-size:.78em; min-width:0; }
.sl .tt th, .sl .tt td{ padding:.25em .5em; }
.sl .tt th{ overflow-wrap:normal; }
.sl-tcols{ display:flex; flex-wrap:wrap; gap:.5em 1em; align-items:flex-start; }
.sl .codebox, .sl .pt-eg{ font-size:.7em; line-height:1.45; max-width:100%; overflow-x:auto; }
.sl .pt-kwref{ border-bottom-width:.12em; }
.sl .eqn{ max-width:none; }
/* a formula slide: the slide title names it; on a wide screen, the letters, words and equation on the left, your numbers on the right */
.sl-formula .eqn > header{ display:none; }
@media (min-width:900px){
  .sl-formula .sl-fit{ width:min(100%, 44em); }
  .sl-formula .eqn{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"a d" "b d" "c d"; align-content:start; align-items:start; column-gap:1.4em; }
  .sl-formula .eqn > section:nth-of-type(1){ grid-area:a; } .sl-formula .eqn > section:nth-of-type(2){ grid-area:b; }
  .sl-formula .eqn > section:nth-of-type(3){ grid-area:c; } .sl-formula .eqn > section:nth-of-type(4){ grid-area:d; }
}
.sl .toy{ margin:0; }

/* title */
.sl-title .sl-fit{ margin:auto; gap:.45em; }
.sl-title h1{ font-size:2em; line-height:1.15; color:var(--ink); }
.sl-unit{ font-size:.95em; font-weight:600; color:var(--yc); }
.sl-unit .muted{ font-weight:400; }
.sl-chips{ display:flex; flex-wrap:wrap; gap:.35em .6em; align-items:center; font-size:.7em; }
.sl-kind{ font-weight:700; padding:.1em .6em; border-radius:99px; border:.12em solid var(--yc); }
.sl-syl{ display:inline-flex; flex-wrap:wrap; gap:.2em .5em; align-items:baseline; }
.sl-syl .pt-code{ font-size:.9em; }

/* goals */
.sl .pt-obj, .sl .pt-sc{ margin-left:1.3em; gap:.35em; }
.sl-goals .sl-sub{ margin-top:.2em; }

/* key words */
.sl-kw{ display:grid; gap:.4em; margin:0; }
.sl-kw > div{ display:grid; grid-template-columns:minmax(0, 8.5em) minmax(0, 1fr); gap:.2em 1em; align-items:baseline; padding:.3em .7em; border-radius:16px; background:var(--card); border:2px solid var(--line); border-left:.25em solid var(--yc); }
.sl-kw dt{ font-weight:700; }
.sl-kw dd{ margin:0; font-size:.9em; }
@media (max-width:700px){ .sl-kw > div{ grid-template-columns:1fr; } }

/* questions: retrieval, quiz, exit ticket */
.sl-dense .sl-body{ font-size:.86em; }
.sl-qs{ display:flex; flex-direction:column; gap:.55em; }
.sl-q{ display:flex; flex-direction:column; align-items:flex-start; gap:.2em; }
.sl-from{ font-size:.6em; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.sl-qq{ font-weight:600; }
.sl-big{ font-size:1.15em; line-height:1.3; }
.sl-inl{ display:flex; flex-wrap:wrap; gap:.15em 1.1em; font-size:.85em; }
.sl-inl b{ color:var(--yc); }
.sl-opts{ list-style:none; margin:0 !important; display:flex; flex-direction:column; gap:.35em; }
.sl-opts li{ display:flex; gap:.6em; align-items:baseline; padding:.25em .6em; border-radius:16px; border:2px solid var(--line); background:var(--card); }
.sl-let{ display:inline-grid; place-items:center; flex:none; width:1.6em; height:1.6em; border-radius:50%; background:color-mix(in srgb,var(--yc) 16%,var(--card)); color:var(--ink); border:2px solid var(--yc); font-size:.8em; }
.sl .sl-show{ align-self:flex-start; font-size:max(16px, .6em); min-height:max(44px, 1.6em); }
.sl-ans{ display:none; }
.is-shown > .sl-ans{ display:block; }
.sl-ans, .sl-why{ color:var(--ink); }
.sl-ans > span[aria-hidden], .sl-ans p > span[aria-hidden]{ color:var(--ok); font-weight:700; }
div.sl-ans{ padding:.35em .7em; border-radius:16px; border:2px solid var(--ok); background:var(--ok-bg); }
div.sl-ans .sl-why{ font-size:.85em; margin-top:.2em; }
.is-shown .sl-opts li[data-ok="1"]{ border-color:var(--ok); background:var(--ok-bg); font-weight:700; }
.is-shown .sl-opts li[data-ok="1"]::after{ content:"✓"; margin-left:auto; color:var(--ok); font-weight:700; }
.is-shown .sl-inl span[data-ok="1"]{ font-weight:700; text-decoration:underline; text-decoration-color:var(--ok); text-decoration-thickness:.12em; text-underline-offset:.2em; }

/* homework and challenge, worked example */
.sl-box{ padding:.45em .8em; border-radius:16px; background:var(--card); border:2px solid var(--line); border-left:.25em solid var(--yc); display:flex; flex-direction:column; gap:.2em; }
.sl-boss{ border-left-color:var(--accent); }
.sl-eg{ gap:.4em; }
.sl-egq{ font-size:1em; }

/* ---------- present mode (slides.js adds .sl-on to <html>) ---------- */
.sl-bar, .sl-prog{ display:none; }
.sl-on, .sl-on body.sl-page{ height:100%; overflow:hidden; }
.sl-on .sl-deck{ position:fixed; inset:0 0 var(--sl-bar) 0; }
.sl-on .sl{ position:absolute; inset:0; display:none; margin:0; max-width:none; border:0; border-radius:0; padding:.7em max(16px, 4vw) .5em; }
.sl-on .sl.is-on{ display:flex; }
.sl-on .sl-in{ flex:1; max-height:100%; overflow-x:hidden; overflow-y:auto; touch-action:pan-y; }
.sl-on .sl-notes{ display:none; }
.sl-on.sl-shownotes .sl.is-on{ padding-bottom:36vh; }
.sl-on.sl-shownotes .sl.is-on .sl-notes{ display:block; position:absolute; left:0; right:0; bottom:0; height:34vh; overflow:auto; }

.sl-on .sl-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; height:var(--sl-bar); align-items:center; gap:8px; padding:0 max(12px, 2vw);
  background:var(--paper); border-top:2px solid var(--line); font-size:calc(16px * var(--sl-k)); z-index:5; }
.sl-bar .btn{ font-size:1em; min-height:40px; padding:4px 12px; }
.sl-bar .sl-sp{ flex:1; }
.sl-count{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; min-width:5.5em; }
.sl-on .sl-prog{ display:block; position:fixed; left:0; right:0; bottom:var(--sl-bar); height:5px; background:var(--line); z-index:5; }
.sl-prog i{ display:block; height:100%; width:0; background:var(--yc); transition:width .2s; }
@media (prefers-reduced-motion: reduce){ .sl-prog i{ transition:none; } }
@media (max-width:640px){ .sl-lbl{ display:none; } .sl-on .sl-bar{ gap:6px; } .sl-count{ min-width:4.5em; } }
:fullscreen .sl-bar{ opacity:.35; } :fullscreen .sl-bar:hover, :fullscreen .sl-bar:focus-within{ opacity:1; }

/* speaker notes (teacher decks) */
.sl-notes{ display:block; margin-top:.6em; padding:.6em .9em; border-radius:16px; background:var(--card); border:2px solid var(--line); border-top:.2em solid var(--yc); font-size:.7em; line-height:var(--lh); }
.sl-notes p{ margin:0 0 .4em; }
.sl-notes ul{ margin:0 0 .4em 1.2em; padding:0; }
.sl-ntitle{ font-weight:700; color:var(--muted); font-size:.85em; }
.sl-seg{ padding:.25em .6em; border-radius:12px; background:color-mix(in srgb,var(--yc) 10%,var(--card)); }

/* jump to a slide */
.sl-jump{ width:min(34rem, 92vw); max-height:84vh; padding:0; border:2px solid var(--line); border-radius:18px; background:var(--paper); color:var(--ink); font-size:calc(18px * var(--sl-k)); line-height:1.4; }
.sl-jump::backdrop{ background:color-mix(in srgb,var(--ink) 45%,transparent); }
.sl-jump form{ display:flex; flex-direction:column; gap:12px; padding:16px 18px; }
.sl-jump h2{ font-size:1.2em; }
.sl-jump .row{ align-items:center; }
.sl-jump input{ width:6em; min-height:44px; padding:4px 10px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:inherit; }
.sl-jump ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:50vh; overflow:auto; }
.sl-jump ol .btn{ width:100%; justify-content:flex-start; text-align:left; font-size:1em; font-weight:500; min-height:40px; }
.sl-jump ol .btn[aria-current="true"]{ border-color:var(--yc); font-weight:700; }
.sl-jump .btn{ font-size:1em; }
.sl-toast{ position:fixed; left:50%; top:16px; transform:translateX(-50%); padding:8px 16px; border-radius:12px; background:var(--card); border:2px solid var(--yc); font-size:calc(18px * var(--sl-k)); z-index:9; }

/* ---------- the speaker-notes window (slides-….html#notes) ---------- */
.sl-notesmode .sl-deck, .sl-notesmode .sl-bar, .sl-notesmode .sl-prog{ display:none !important; }
.sl-notesmode, .sl-notesmode body{ overflow:auto; height:auto; }
.sln{ display:flex; flex-direction:column; gap:14px; padding:16px max(16px, 3vw) 40px; font-size:calc(20px * var(--sl-k)); line-height:var(--lh); max-width:62em; margin:0 auto; }
.sln header{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; position:sticky; top:0; background:var(--paper); padding:8px 0; border-bottom:2px solid var(--line); }
.sln header .btn{ font-size:1em; min-height:44px; }
.sln-at{ font-family:var(--f-mono); font-weight:700; }
.sln-time{ font-family:var(--f-mono); color:var(--muted); margin-left:auto; }
.sln h1{ font-size:1.5em; }
.sln .sl-notes{ display:block; font-size:1em; margin:0; }
.sln-next{ color:var(--muted); }
.sln-warn{ padding:8px 12px; border-radius:12px; border:2px solid var(--warn); background:var(--warn-bg); }

/* ---------- print: one slide per landscape page ("Save as PDF" makes the handout) ---------- */
@page{ size:landscape; margin:12mm; }
@media print{
  :root.sl-root{ font-size:17pt; }
  .sl-on, .sl-on body.sl-page{ height:auto; overflow:visible; }
  .sl-bar, .sl-prog, .sl-jump, .sl-toast, .sl-show, .sln{ display:none !important; }
  .sl-deck, .sl-on .sl-deck{ position:static; }
  .sl, .sl-on .sl{ display:block !important; position:relative; inset:auto; margin:0; max-width:none; min-height:0; padding:0; border:0; break-after:page; page-break-after:always; break-inside:avoid-page; }
  .sl:last-child{ break-after:auto; page-break-after:auto; }
  .sl-in, .sl-on .sl-in{ display:block; max-height:none; overflow:visible; }
  .sl-fit{ zoom:1 !important; width:100%; }
  .sl .scrollx, .sl .codebox{ overflow:visible; }
  .sl-notes{ display:none !important; }
  body[data-role="teacher"] .sl-notes{ display:block !important; break-inside:avoid; font-size:10.5pt; margin-top:6mm; }
  body[data-role="teacher"] .sl-ans{ display:block !important; }
}