/* ───────────────────────── Fonts ───────────────────────── */
/* Bundled fonts (OFL / GUST licences in assets/fonts), so slides render the same everywhere. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* What Inter has beyond those two subsets: Greek, arrows, mathematical signs, super- and
   subscripts, shapes, ticks ("H₀", "χ²", "μ", "→", "≈"). Without it they are drawn in whatever
   font the computer has, and a PDF couldn't hold them as text. Made by tools/fonts.py, which
   prints this range. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-symbols-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA, U+03FC-03FF, U+2010-2012, U+2015-2017, U+201B, U+201F, U+2021, U+2023-2025, U+2027, U+202F-2031, U+2034-2038, U+203B-2043, U+2045-2055, U+2057, U+2070-2071, U+2074-208E, U+2090-209C, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2116-2117, U+211E-2121, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+2150-217F, U+2183-2186, U+2189, U+2190, U+2192, U+2194-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2295-2298, U+2303-2305, U+2318, U+2325-2327, U+232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2460-2468, U+24B6-24CF, U+24EA, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A-266B, U+26A0, U+2713, U+2717, U+2756, U+2764, U+2780-2788, U+27F5-27FA, U+2913, U+2B06, U+2B12-2B13, U+2B1C, U+2B24;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Latin Modern Roman";
  src: url("fonts/lmroman10-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Latin Modern Roman";
  src: url("fonts/lmroman10-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Latin Modern Roman";
  src: url("fonts/lmroman10-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Latin Modern Roman";
  src: url("fonts/lmroman10-bolditalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Latin Modern Math";
  src: url("fonts/latinmodern-math.otf") format("opentype");
  font-display: block;
}

/* ───────────────────────── Editor UI ───────────────────────── */
:root {
  --ui-bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e5ea;
  --border-strong: #cfd4db;
  --text: #1f2328;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: #dbe6fd;
  --danger: #dc2626;
  --stage: #e7e9ee;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --slide-shadow: 0 4px 24px rgba(16, 24, 40, 0.14), 0 1px 3px rgba(16, 24, 40, 0.08);
  --hover: #eef0f3;
  --field-bg: #ffffff;
  --code-bg: #f1f3f5;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger-soft: #fdecec;
  --danger-line: #fecaca;
  --warn-bg: #fffbeb;
  --warn-line: #f59e0b;
  --stage-master: #e6e1f5;
  --floating: rgba(255, 255, 255, 0.96);
  --menu-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  --backdrop: rgba(15, 23, 42, 0.35);
  --toast-bg: #1f2328;
  --toast-fg: #ffffff;
  --tag-bg: #f3f4f6;
  --row-alt: #fafbfc;
  --syn-keyword: #cf222e;
  --syn-string: #0a3069;
  --syn-number: #0550ae;
  --syn-comment: #6e7781;
  --syn-def: #8250df;
  --syn-type: #953800;
  --syn-invalid: #cf222e;
  color-scheme: light;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ui-bg); overflow: hidden; }

/* The editor's dark look (status bar: Editor theme; loader.js sets data-ui-theme). Only the
   chrome changes: slides, thumbnails and print pages get the light palette back below. */
:root[data-ui-theme=dark] {
  --ui-bg: #15171c;
  --panel: #1d2027;
  --border: #2e333d;
  --border-strong: #434a57;
  --text: #e6e8eb;
  --muted: #a0a8b4;
  --accent: #7aa2ff;
  --accent-soft: #24345a;
  --danger: #f87171;
  --stage: #0f1114;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --slide-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
  --hover: #2a2e37;
  --field-bg: #15171c;
  --code-bg: #2a2e37;
  --primary: #2563eb;
  --primary-hover: #3b74f0;
  --danger-soft: #3b1f22;
  --danger-line: #7f1d1d;
  --warn-bg: #2e2612;
  --warn-line: #b7791f;
  --stage-master: #241e36;
  --floating: rgba(29, 32, 39, 0.96);
  --menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.6);
  --toast-bg: #e6e8eb;
  --toast-fg: #15171c;
  --tag-bg: #2a2e37;
  --row-alt: #191c22;
  --syn-keyword: #ff7b72;
  --syn-string: #a5d6ff;
  --syn-number: #79c0ff;
  --syn-comment: #8b949e;
  --syn-def: #d2a8ff;
  --syn-type: #ffa657;
  --syn-invalid: #f85149;
  color-scheme: dark;
}
/* Slides keep their deck's look in every editor theme (native controls in plugins too). */
:root[data-ui-theme=dark] :is(.sm-slide, .sm-thumb-frame, .sm-overview-frame, .sm-slide-grid-frame, .sm-print-page, .sm-notes-page, .sm-theme-preview) {
  --hover: #eef0f3;
  --field-bg: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #e2e5ea;
  --border-strong: #cfd4db;
  --accent: #2563eb;
  --accent-soft: #dbe6fd;
  color-scheme: light;
}

.sm-app {
  display: grid;
  height: 100vh;
  grid-template:
    "toolbar toolbar toolbar" auto
    "slides stage inspector" 1fr
    "status status status" 28px
    / var(--slides-w, 216px) minmax(0, 1fr) var(--inspector-w, 300px);
}
/* Find and replace: a column between the slide and the properties (to the right of the
   properties while the overview or the source view covers the slide). Everything in the grid
   is placed by area name, so the extra column moves nothing. */
.sm-app.find-open {
  grid-template:
    "toolbar toolbar toolbar toolbar" auto
    "slides stage find inspector" 1fr
    "status status status status" 28px
    / var(--slides-w, 216px) minmax(0, 1fr) var(--find-w, 300px) var(--inspector-w, 300px);
}
.sm-app.find-open:is(:has(> .sm-source), :has(> .sm-overview)) {
  grid-template:
    "toolbar toolbar toolbar toolbar" auto
    "slides stage inspector find" 1fr
    "status status status status" 28px
    / var(--slides-w, 216px) minmax(0, 1fr) var(--inspector-w, 300px) var(--find-w, 300px);
}
.sm-resizer {
  /* Above the fold tabs: grabbing or double-clicking the edge halfway down resizes. */
  grid-row: 2; width: 8px; z-index: 7; cursor: col-resize; touch-action: none; position: relative;
}
.sm-resizer[data-resizer=slides] { grid-column: slides; justify-self: end; margin-right: -4px; }
.sm-resizer[data-resizer=inspector] { grid-column: inspector; justify-self: start; margin-left: -4px; }
.sm-resizer::after { content: ""; position: absolute; inset: 0 3px; border-radius: 1px; transition: background 0.15s; }
.sm-resizer:hover::after, .sm-resizer.dragging::after, .sm-resizer:focus-visible::after { background: var(--accent); }
.sm-resizer:focus-visible { outline: none; }
/* Folding a side panel away: a tab on its edge, sticking out over the stage; folded, a rail. */
.sm-collapse-tab {
  grid-row: 2; z-index: 6; align-self: center; width: 20px; height: 64px; padding: 0;
  justify-content: center; color: var(--text); background: var(--panel);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.sm-collapse-tab:hover:not(:disabled) { color: var(--accent); background: var(--panel); border-color: var(--accent); }
.sm-collapse-tab .sm-icon { width: 16px; height: 16px; }
.sm-collapse-tab[data-collapse=slides] { grid-column: stage; justify-self: start; border-radius: 0 8px 8px 0; border-left: 0; }
.sm-collapse-tab[data-collapse=inspector] { grid-column: inspector; justify-self: start; margin-left: -20px; border-radius: 8px 0 0 8px; border-right: 0; }
.sm-app.inspector-folded .sm-collapse-tab[data-collapse=inspector] { grid-column: stage; justify-self: end; margin-left: 0; }
/* The source view covers the stage: the slide list's tab moves inside the list's edge, over it. */
.sm-app:has(> .sm-source) .sm-collapse-tab[data-collapse=slides] { grid-column: slides; justify-self: end; z-index: 21; border-radius: 8px 0 0 8px; border-left: 1px solid var(--border); border-right: 0; }
.sm-app.slides-folded :is(.sm-left, .sm-resizer[data-resizer=slides]),
.sm-app.inspector-folded :is(.sm-inspector, .sm-resizer[data-resizer=inspector]) { display: none; }
.sm-rail {
  grid-row: 2; min-height: 0; border-radius: 0; padding: 12px 0; flex-direction: column; justify-content: flex-start;
  gap: 10px; background: var(--panel); color: var(--muted); font-size: 12px;
}
.sm-rail[data-rail=slides] { grid-column: slides; border-right: 1px solid var(--border); }
.sm-rail[data-rail=inspector] { grid-column: inspector; border-left: 1px solid var(--border); }
.sm-rail:hover:not(:disabled) { color: var(--accent); background: var(--hover); }
.sm-rail-label, .sm-rail-detail { writing-mode: vertical-rl; white-space: nowrap; }
.sm-rail[data-rail=slides] :is(.sm-rail-label, .sm-rail-detail) { transform: rotate(180deg); }
.sm-rail-label { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; color: var(--text); }
.sm-rail-detail { font-variant-numeric: tabular-nums; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--hover); }
button:disabled { opacity: 0.4; cursor: default; }
button.active { background: var(--accent-soft); color: var(--accent); }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sm-primary { background: var(--primary); color: #fff; padding: 6px 14px; }
.sm-primary:hover:not(:disabled) { background: var(--primary-hover); }
.sm-icon { flex: none; display: block; }
.sm-muted { color: var(--muted); }

/* Toolbar */
/* Two rows (2026-10-10: one row was full at 1920 px, the file's name cut to "ta…"). The first
   is the presentation: its menu, its name and file, and presenting it. The second is editing:
   undo and history, what to insert, and the other views (overview, source, themes, masters). */
.sm-toolbar {
  grid-area: toolbar;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.sm-toolbar > * { min-height: 40px; }
.sm-toolbar > :is(.sm-brand, .sm-menu) { display: flex; align-items: center; }
.sm-toolbar > .sm-toolbar-break { flex: 0 0 calc(100% + 24px); min-height: 0; height: 0; border-top: 1px solid var(--border); margin: 0 -12px; }
/* (A block, so that a long title ends in an ellipsis and its file's name stays in view.) */
.sm-toolbar > .sm-doc-title { flex: 1 1 0; min-height: 0; line-height: 40px; }
.sm-toolbar > .sm-tools-history { padding-left: 0; border-left: 0; }
.sm-toolbar > .sm-tools-views { margin-left: auto; }
.sm-brand { font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }
a.sm-brand { text-decoration: none; }
a.sm-brand:hover { text-decoration: underline; }
.sm-doc-title { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-doc-file { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.sm-tool-group { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid var(--border); }
.sm-tool-group > button, .sm-tool-group > .sm-menu > button { padding-inline: 6px; }

/* Slide list */
/* The left panel: the slides (or masters) above, the elements of the slide below. */
.sm-left {
  grid-area: slides;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.sm-slides {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  padding: 12px 8px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Elements on this slide (reading order): a header that folds it, then a list of rows. */
.sm-elements { flex: none; display: flex; flex-direction: column; max-height: 46%; border-top: 1px solid var(--border-strong); }
.sm-elements-head {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer;
}
.sm-elements-head:hover { background: var(--hover, color-mix(in srgb, var(--text) 6%, transparent)); }
.sm-elements-head .sm-icon { width: 14px; height: 14px; color: var(--muted); }
.sm-elements-title { flex: 1; }
.sm-elements-chevron { color: var(--muted); }
/* Its explanation's "?" sits in the header, before the chevron. */
.sm-elements { position: relative; }
.sm-elements-hint[data-q] { position: absolute; top: 9px; right: 30px; margin: 0; }
.sm-elements .sm-empty-note { margin: 0; padding: 4px 10px 10px; }
.sm-elements-list { position: relative; list-style: none; margin: 0; padding: 0 4px 8px; overflow-y: auto; min-height: 0; }
.sm-elements-row {
  display: grid; grid-template-columns: 12px 16px minmax(0, 1fr) 22px 22px; grid-template-rows: auto auto;
  align-items: center; column-gap: 3px; padding: 3px 4px; border-radius: 6px; font-size: 12px;
}
.sm-elements-row + .sm-elements-row { margin-top: 1px; }
/* A lasting group's members (audit Q18): indented under its line, a rule on their left. */
.sm-elements-row.in-group { margin-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 0 6px 6px 0; }
.sm-elements-group-head {
  grid-column: 1 / -1; grid-row: 1; justify-self: start; padding: 1px 4px; margin: 0 0 2px -2px;
  font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer;
}
.sm-elements-row.in-group:has(.sm-elements-group-head) { grid-template-rows: auto auto auto; }
.sm-elements-row.in-group:has(.sm-elements-group-head) :is(.sm-elements-grip, .sm-elements-n) { grid-row: 2 / span 2; }
.sm-elements-row.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sm-elements-row.dragged { opacity: 0.5; }
.sm-elements-row.hidden-here .sm-elements-name { color: var(--muted); font-style: italic; }
.sm-elements-grip { grid-row: 1 / span 2; color: var(--muted); cursor: grab; user-select: none; touch-action: none; font-size: 12px; text-align: center; }
.sm-elements-n { grid-row: 1 / span 2; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; }
.sm-elements-name {
  display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 4px; border: 0; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 4px;
}
.sm-elements-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-elements-name .sm-icon { flex: none; width: 13px; height: 13px; color: var(--muted); }
.sm-elements-row.selected .sm-elements-name { font-weight: 600; }
/* The name has the row's whole width (it was cut at ten letters); the lock and the eye sit
   on the second line, after the steps. */
.sm-elements-name { grid-column: 3 / -1; }
.sm-elements-lock { grid-row: 2; grid-column: 4; }
.sm-elements-eye { grid-row: 2; grid-column: 5; }
.sm-elements-row.in-group:has(.sm-elements-group-head) :is(.sm-elements-lock, .sm-elements-eye) { grid-row: 3; }
.sm-elements-steps-label { color: var(--muted); font-size: 11px; }
.sm-elements-lock, .sm-elements-eye { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; }
.sm-elements-lock .sm-icon, .sm-elements-eye .sm-icon { width: 13px; height: 13px; }
.sm-elements-lock:not(.on) .sm-icon { opacity: 0.65; }
.sm-elements-lock.on, .sm-elements-eye.on { color: var(--accent); }
.sm-elements-lock:hover, .sm-elements-eye:hover, .sm-elements-name:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sm-elements-steps { grid-column: 3 / 4; display: flex; align-items: center; gap: 4px; padding-left: 6px; min-width: 0; }
.sm-elements-steps input { width: 46px; flex: 0 1 46px; min-width: 30px; font: 11px/1.2 "JetBrains Mono", ui-monospace, monospace; font-variant-ligatures: none; padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg, var(--panel)); color: var(--text); }
.sm-elements-steps input::placeholder { color: var(--muted); font-family: "Inter", system-ui, sans-serif; }
.sm-elements-steps input.invalid { border-color: var(--alert, #dc2626); }
.sm-elements-resolved { flex: none; max-width: 60%; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-elements-drop { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; }
.sm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 4px 0 24px;
}
/* Master mode: each master's name and what uses it, over its thumbnail. */
.sm-masters-help { margin: 0; padding: 0 4px 0 24px; }
.sm-master-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px 0 24px;
  font-size: 12px;
}
.sm-master-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-master-used { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sm-thumb-item {
  position: relative;
  /* (Dragged with the pointer: no text selection on the way.) */
  user-select: none;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  cursor: pointer;
  border-radius: var(--radius);
  outline: none;
}
.sm-thumb-num { width: 16px; text-align: right; font-size: 12px; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
/* The number, and under it a grip that says the slide can be dragged. */
.sm-thumb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sm-thumb-grip { color: var(--muted); opacity: 0.55; cursor: grab; display: inline-flex; }
.sm-thumb-grip .sm-icon { width: 16px; height: 16px; stroke-width: 3; }
.sm-thumb-item:hover .sm-thumb-grip { opacity: 1; }
.sm-thumb-frame { cursor: grab; }
.sm-thumb-frame:active { cursor: grabbing; }
.sm-slides-head { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px 22px; }
.sm-slides-hint[data-q] { margin: 5px 0 0; }
.sm-slides-head .sm-hide-panel { margin-left: auto; }
.sm-hide-panel { flex: none; white-space: nowrap; }
.sm-thumb-frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--border-strong);
  background: #fff;
  flex: none;
}
.sm-thumb-item:hover .sm-thumb-frame { box-shadow: 0 0 0 1px var(--muted); }
.sm-thumb-item.selected .sm-thumb-frame { box-shadow: 0 0 0 2px var(--accent); }
.sm-thumb-item.selected .sm-thumb-num { color: var(--accent); font-weight: 600; }
.sm-thumb-item.is-hidden .sm-thumb-frame { opacity: 0.35; }
/* The appendix (audit P4): a label before its first slide, in the list and the presenting grid. */
.sm-appendix-label { color: #b45309; }
:root[data-ui-theme=dark] .sm-appendix-label { color: #fbbf24; }
/* Several selected (audit E8): each tinted and ringed; the current one also numbered in bold. */
.sm-thumb-item.in-selection { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.sm-thumb-item.in-selection .sm-thumb-frame { box-shadow: 0 0 0 2px var(--accent); }
.sm-thumb-item.in-selection .sm-thumb-num { color: var(--accent); }
.sm-thumb-item:focus-visible .sm-thumb-frame { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Where dragged slides would go: a line between thumbnails. */
.sm-thumb-item.drop-before::before, .sm-thumb-item.drop-after::after {
  content: ""; position: absolute; left: 18px; right: 4px; height: 3px; border-radius: 2px; background: var(--accent); pointer-events: none;
}
.sm-thumb-item.drop-before::before { top: -6px; }
.sm-thumb-item.drop-after::after { bottom: -6px; }
.sm-thumb-actions {
  position: absolute;
  right: 4px;
  top: 4px;
  display: none;
  /* Two columns of three (the user, 2026-10-10): hide, up, down | duplicate, new below, delete.
     One column of six was taller than the thumbnail and covered what is under the last slide. */
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 1px;
  background: var(--floating);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 2px;
  z-index: 2;
}
.sm-thumb-actions button { padding: 3px; }
.sm-thumb-actions button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.sm-thumb-item:hover .sm-thumb-actions,
.sm-thumb-item:focus-visible .sm-thumb-actions,
.sm-thumb-item:has(:focus-visible) .sm-thumb-actions { display: grid; }
.sm-add-slide {
  margin-left: 22px;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  padding: 10px;
}
.sm-add-slide:hover { color: var(--accent); border-color: var(--accent); }
.sm-empty-note { color: var(--muted); padding: 0 24px; }

/* Stage & canvas */
.sm-stage {
  grid-area: stage;
  position: relative;
  overflow: auto;
  display: grid;
  /* Safe: zoomed in past the stage, the slide starts at its scrollable edge (not cut off). */
  place-items: safe center;
  background: var(--stage);
  min-width: 0;
  min-height: 0;
}
.sm-stage.zoomed { padding: 24px; }
/* Rulers (audit E6): over the stage's top and left edges, which the stage then leaves free. */
.sm-stage.with-rulers { padding: 20px 0 0 20px; }
.sm-stage.with-rulers.zoomed { padding: 44px 24px 24px 44px; }
.sm-rulers { grid-area: stage; position: relative; z-index: 5; pointer-events: none; min-width: 0; min-height: 0; overflow: hidden; }
.sm-ruler-corner {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; box-sizing: border-box; display: grid; place-items: center;
  font: 600 9px/1 system-ui, sans-serif; color: var(--muted); background: var(--hover);
  border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); pointer-events: auto;
}
.sm-ruler { position: absolute; display: block; background: var(--hover); pointer-events: auto; touch-action: none; }
.sm-ruler.h { left: 20px; top: 0; height: 20px; border-bottom: 1px solid var(--border-strong); box-sizing: border-box; cursor: row-resize; }
.sm-ruler.v { left: 0; top: 20px; width: 20px; border-right: 1px solid var(--border-strong); box-sizing: border-box; cursor: col-resize; }
.sm-ruler line { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.sm-ruler line.major { stroke: var(--text); }
.sm-ruler text { font: 9px/1 system-ui, sans-serif; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sm-ruler-slide { fill: var(--panel); }
.sm-ruler-sel { fill: var(--accent-soft); }
/* Guides: a thin line, a wider band to grab. */
.sm-guides { position: absolute; inset: 0; pointer-events: none; }
.sm-guide-line { position: absolute; pointer-events: auto; touch-action: none; }
.sm-guide-line.h { left: 0; right: 0; height: 7px; margin-top: -3px; cursor: row-resize; }
.sm-guide-line.v { top: 0; bottom: 0; width: 7px; margin-left: -3px; cursor: col-resize; }
.sm-guide-line::after { content: ""; position: absolute; background: #0891b2; }
.sm-guide-line.h::after { left: 0; right: 0; top: 3px; height: 1px; }
.sm-guide-line.v::after { top: 0; bottom: 0; left: 3px; width: 1px; }
.sm-guide-line:hover::after { background: #06b6d4; box-shadow: 0 0 0 1px #06b6d4; }
.sm-guide-line.removing::after { background: var(--danger); box-shadow: none; }
.sm-guide-readout {
  position: absolute; pointer-events: none; white-space: nowrap; padding: 1px 6px; border-radius: 4px;
  font: 600 11px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; background: #0e7490;
}
.sm-guide-readout.h { transform: translateY(calc(-100% - 4px)); }
.sm-guide-readout:not(.h) { transform: translateX(6px); }
.sm-stage.master-mode { background: var(--stage-master); }
/* Space held: the view can be dragged (also with the middle button). */
.sm-stage.pan-ready, .sm-stage.pan-ready * { cursor: grab !important; }
.sm-stage.panning, .sm-stage.panning * { cursor: grabbing !important; }
/* The status bar's Zoom: − value + · Fit · 100% · Selection (as the Snap and theme switches). */
.sm-zoom-value { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.sm-zoom [data-action=zoom-in], .sm-zoom [data-action=zoom-out] { min-width: 22px; font-weight: 600; }
.sm-canvas { position: relative; box-shadow: var(--slide-shadow); flex: none; }
.sm-scaler { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.sm-empty { text-align: center; color: var(--muted); }
.sm-canvas { outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
/* The canvas takes the focus on a press (for its keys), but isn't a Tab stop: no ring around the
   slide when a modifier is pressed during a drag. */
.sm-canvas:focus-visible { outline: none; }
.sm-canvas .sm-slide .sm-el { cursor: default; }
/* The editor shows what lies beyond the slide's edge (it was cut off: an element moved out
   couldn't be seen or edited); an element entirely outside is tinted, to be found. */
.sm-canvas .sm-slide { overflow: visible; }
.sm-canvas .sm-el.sm-off-slide { outline: 2px dashed #db2777; outline-offset: 2px; }
.sm-canvas .sm-el.sm-off-slide::after { content: ""; position: absolute; inset: 0; background: rgba(219, 39, 119, 0.16); pointer-events: none; }
.sm-overlay { position: absolute; inset: 0; pointer-events: none; }
/* A master's placeholder (audit E9), in Master mode: dashed, labelled. */
.sm-canvas .sm-placeholder-el { outline: 2px dashed color-mix(in srgb, #8b5cf6 70%, transparent); outline-offset: 2px; }
.sm-canvas .sm-placeholder-el::after {
  content: "Placeholder"; position: absolute; left: 0; top: 0; transform: translateY(-100%); padding: 2px 8px;
  font: 600 22px/1.4 system-ui, sans-serif; color: #fff; background: #7c3aed; border-radius: 6px 6px 0 0; pointer-events: none;
}
/* A text box's Markdown, open over it (double-click): above the selection, in the box's font. */
.sm-text-in-place { position: absolute; z-index: 4; box-sizing: border-box; }
.sm-text-in-place textarea {
  display: block; width: 100%; min-height: var(--min-h, 72px); box-sizing: border-box; resize: none; overflow: hidden;
  margin: 0; padding: 8px 10px; font: inherit; line-height: 1.4; color: var(--text); background: var(--field-bg);
  border: 2px solid var(--accent); border-radius: 6px; box-shadow: var(--menu-shadow); outline: none;
  user-select: text; -webkit-user-select: text; cursor: text; tab-size: 4;
}
.sm-text-in-place-hint {
  position: absolute; top: 100%; left: 0; margin: 4px 0 0; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  font: 12px/1.5 system-ui, sans-serif; color: var(--toast-fg); background: var(--toast-bg); opacity: 0.9; pointer-events: none;
}
.sm-text-in-place-hint code { font-size: 11px; }
.sm-sel { position: absolute; outline: 1.5px solid var(--accent); transform-origin: center; }
.sm-sel.locked { outline-style: dashed; }
.sm-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  pointer-events: auto;
}
.sm-h-nw { left: 0; top: 0; cursor: nwse-resize; }
.sm-h-n { left: 50%; top: 0; cursor: ns-resize; }
.sm-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.sm-h-e { left: 100%; top: 50%; cursor: ew-resize; }
.sm-h-se { left: 100%; top: 100%; cursor: nwse-resize; }
.sm-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.sm-h-sw { left: 0; top: 100%; cursor: nesw-resize; }
.sm-h-w { left: 0; top: 50%; cursor: ew-resize; }
.sm-rotate { left: 50%; top: -28px; border-radius: 50%; cursor: grab; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.sm-rot-stem { position: absolute; left: 50%; top: -22px; height: 22px; border-left: 1.5px solid var(--accent); }
.sm-marquee { position: absolute; border: 1px solid var(--accent); background: rgba(37, 99, 235, 0.08); }

/* Inspector */
.sm-inspector {
  grid-area: inspector;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 12px;
}

/* Status bar */
.sm-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-top: 1px solid var(--border);
}
/* Its buttons look like buttons (they read as plain text otherwise), and a switch that is on
   shows it plainly. */
.sm-kept { color: var(--muted); white-space: nowrap; font-size: 12px; }
.sm-kept.sm-warn-text { color: var(--danger); font-weight: 600; }
.sm-status button { padding: 1px 7px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--ui-bg); color: var(--text); }
.sm-status button:hover:not(:disabled) { border-color: var(--border-strong); }
.sm-status button.sm-position:disabled { opacity: 1; border-color: transparent; background: none; color: var(--muted); }
.sm-status button.active, .sm-status button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* While dragging: the gesture and its modifiers (those held highlighted). */
.sm-gesture-hint { display: inline-flex; align-items: center; gap: 14px; }
.sm-gesture-what { color: var(--text); font-weight: 600; }
.sm-gesture-key kbd { font: inherit; font-size: 11px; padding: 0 5px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--ui-bg); }
.sm-gesture-key.on { color: var(--accent); font-weight: 600; }
.sm-gesture-key.on kbd { border-color: var(--accent); background: var(--accent-soft); }
.sm-gesture-measure { color: var(--text); font-variant-numeric: tabular-nums; padding-left: 12px; border-left: 1px solid var(--border-strong); }
.sm-spacer { flex: 1; }
.sm-steps { display: inline-flex; align-items: center; gap: 2px; }

/* Messages at the bottom: errors and warnings (until closed) above the latest confirmation. */
.sm-toasts {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: min(60ch, calc(100vw - 32px)); pointer-events: none;
}
.sm-toast {
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  pointer-events: auto;
}
.sm-alert { display: flex; align-items: flex-start; gap: 10px; cursor: default; border-left: 4px solid #f59e0b; padding-right: 6px; }
.sm-alert.error { border-left-color: #ef4444; }
.sm-alert-text { flex: 1; padding-top: 1px; }
.sm-alert-close { color: inherit; padding: 0 6px; font-size: 18px; line-height: 1.2; }
.sm-alert-close:hover:not(:disabled) { background: color-mix(in srgb, var(--toast-fg) 15%, transparent); }

/* ───────────────────────── Slide content (all views) ─────────────────────────
   Sizes are in logical px; the whole slide is scaled by its container. */
.sm-slide {
  position: relative;
  overflow: hidden;
  color: #1f2328;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Each layer is its own stacking context, so the master is always under the slide's elements
   (their z-indexes only order them within their layer). Layers don't catch the pointer. */
.sm-layer { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
.sm-layer .sm-el { pointer-events: auto; }
.sm-el { position: absolute; box-sizing: border-box; overflow: visible; }
.sm-el.sm-ellipse { border-radius: 50% !important; }
.sm-el.sm-hidden { visibility: hidden; }
.sm-margin-overlay { position: absolute; pointer-events: none; outline: 1.5px dashed rgba(220, 38, 38, 0.45); }
/* Step badges (audit R11): an element's reading order and steps at its top left; those with
   steps stand out. Editor only. */
.sm-step-badges { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sm-step-badge { position: absolute; transform: translate(-4px, -50%); padding: 2px 8px; border-radius: 10px; font: 600 13px/1.4 system-ui, sans-serif; white-space: nowrap; color: #fff; background: rgba(55, 65, 81, 0.85); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.sm-step-badge.stepped { background: #7c3aed; }
.sm-margin-overlay.master { outline-color: rgba(220, 38, 38, 0.2); }
.sm-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(37, 99, 235, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.18) 1px, transparent 1px);
}
/* Shown only while placing (grid snapping on, the grid not shown): fainter. */
.sm-grid-overlay.transient { opacity: 0.55; }
/* Handles: a larger target than they look (16 px); elements outline faintly on hover. */
.sm-handle::before { content: ""; position: absolute; inset: -5px; }
/* Small elements: no larger targets; the edge-middle handles stay (a text line is resized in
   width: the user, 2026-11-02), just outside the edge so they don't crowd the corners. */
.sm-sel.narrow .sm-handle::before, .sm-sel.short .sm-handle::before { inset: 0; }
.sm-sel.short .sm-h-e { left: calc(100% + 10px); }
.sm-sel.short .sm-h-w { left: -10px; }
.sm-sel.narrow .sm-h-n { top: -10px; }
.sm-sel.narrow .sm-h-s { top: calc(100% + 10px); }
.sm-sel.short :is(.sm-h-e, .sm-h-w), .sm-sel.narrow :is(.sm-h-n, .sm-h-s) { width: 5px; height: 13px; margin: -6.5px 0 0 -2.5px; }
.sm-sel.narrow :is(.sm-h-n, .sm-h-s) { width: 13px; height: 5px; margin: -2.5px 0 0 -6.5px; }
.sm-stage:not(.master-mode) [data-layer=slide] .sm-el:hover,
.sm-stage.master-mode [data-layer=master] .sm-el:hover { outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 0; }
/* Reduced motion: no transitions (slides, highlights, bars change at once). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.sm-text li.sm-item-hidden { visibility: hidden; }
.sm-el.sm-dimmed { opacity: 0.25 !important; }
/* Hidden on the canvas only (the elements list's eye): what is under it can be reached. */
.sm-el.sm-editor-hidden { visibility: hidden; pointer-events: none; }
.sm-el.sm-alert { color: #dc2626; }

.sm-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}
.sm-text > * { margin: 0 0 0.45em 0; }
.sm-text > :last-child { margin-bottom: 0; }
.sm-text h1 { font-size: 1.9em; line-height: 1.1; font-weight: 700; }
.sm-text h2 { font-size: 1.5em; line-height: 1.15; font-weight: 650; }
.sm-text h3 { font-size: 1.2em; font-weight: 600; }
.sm-text ul, .sm-text ol { padding-left: 1.2em; }
.sm-text li { margin: 0.15em 0; }
/* Code shows exactly what was typed: no ligatures (JetBrains Mono and Inter would draw -> as →). */
.sm-text code, .sm-code, .sm-cell-code, .sm-cell-outputs, .sm-help-pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.sm-text code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9em; background: rgba(127, 127, 127, 0.14); padding: 0.05em 0.25em; border-radius: 0.2em; }
.sm-text a { color: inherit; }
.sm-text table { border-collapse: collapse; }
.sm-text th, .sm-text td { border: 1px solid rgba(127, 127, 127, 0.4); padding: 0.2em 0.5em; }
.sm-text math[display="block"] { margin: 0.4em 0; }

math { font-family: "Latin Modern Math", math; }
.sm-math { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sm-math math { font-size: inherit; }
.sm-math-error { color: #dc2626; font-family: ui-monospace, monospace; font-size: 0.8em; border-bottom: 2px wavy #dc2626; }

.sm-media { width: 100%; height: 100%; display: block; border-radius: inherit; }
/* A YouTube or Vimeo video (audit P5): its player while presenting, a picture of it elsewhere. */
.sm-embed { border: 0; background: #000; }
/* A 360° panorama (audit R2): the view drawn on a canvas; a placeholder over it until there is
   a picture; the map of the whole picture in a corner, the view's outline on it. */
.sm-pano { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #111827; }
.sm-pano-canvas { display: block; width: 100%; height: 100%; }
.sm-pano-live .sm-pano-canvas { cursor: grab; touch-action: none; }
.sm-pano-live .sm-pano-canvas:active { cursor: grabbing; }
.sm-pano > .sm-placeholder { position: absolute; inset: 0; }
.sm-pano-map { position: absolute; right: 2%; bottom: 3%; width: 24%; aspect-ratio: 2 / 1; border: 2px solid rgba(255, 255, 255, .9); border-radius: 4px; overflow: hidden; background: #374151; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); pointer-events: none; }
.sm-pano-map img, .sm-pano-aim img, .sm-pano-map canvas, .sm-pano-aim video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* A 360° video's own element: kept in the page (the console and K reach it), not seen. */
.sm-pano-video { position: absolute; left: 0; top: 0; width: 2px; height: 1px; opacity: 0; pointer-events: none; }
.sm-pano .sm-pano-play { position: absolute; left: 2%; bottom: 3%; min-width: 2.4em; padding: .2em .5em; font: 600 28px/1.2 system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; cursor: pointer; }
.sm-pano .sm-pano-play:hover { background: rgba(0, 0, 0, .8); }
.sm-pano .sm-pano-play:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.sm-pano-map svg, .sm-pano-aim svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.sm-pano-map polygon, .sm-pano-aim polygon { fill: rgba(255, 255, 255, .22); stroke: #facc15; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)); }
.sm-pano-aim { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; background: var(--code-bg); cursor: move; touch-action: none; display: grid; place-items: center; }
.sm-pano-aim:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-pano-views { gap: 8px; }
.sm-pano-views > button { width: auto; flex: none; }
.sm-embed-poster { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #111827; }
.sm-embed-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 32px; border-radius: 18px;
  font: 600 40px/1.2 system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, 0.72); white-space: nowrap; pointer-events: none;
}
.sm-code { margin: 0; width: 100%; height: 100%; overflow: hidden; line-height: 1.45; white-space: pre; counter-reset: ln; }
.sm-code code { font: inherit; }
.sm-code.numbered .line::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  width: 2ch;
  margin-right: 1.2em;
  text-align: right;
  opacity: 0.45;
}
/* Code versions per step: the lines a step adds, and those it removes (struck, unnumbered). */
.sm-code .line.added { background: color-mix(in srgb, #22c55e 30%, transparent); box-shadow: inset 4px 0 0 #16a34a; }
.sm-code .line.removed { text-decoration: line-through; text-decoration-color: #dc2626; opacity: 0.55; background: color-mix(in srgb, #ef4444 12%, transparent); }
.sm-code.numbered .line.removed::before { counter-increment: none; content: "−"; }
.sm-code .line.added, .sm-code .line.removed { display: inline-block; min-width: 100%; }
.sm-code.stepped .line { opacity: 0.35; transition: opacity 0.2s; }
.sm-code.stepped .line.hl, .sm-code.stepped .line.added { opacity: 1; }
.sm-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #f3f4f6 0 24px, #e5e7eb 24px 48px);
  color: #6b7280;
  font-size: 36px;
  border-radius: inherit;
}
.sm-thumb .sm-placeholder span { font-size: 64px; }
/* A medium loading, or that couldn't load (the user, 2026-11-02): over its box. */
.sm-media-status { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.sm-media-status.loading { opacity: 0; animation: sm-status-in 0.2s 0.4s forwards; background: rgba(15, 23, 42, 0.05); border-radius: inherit; }
/* (Firefox draws an image's description while it loads: not over the spinner.) */
.sm-media.sm-loading { color: transparent; }
@keyframes sm-status-in { to { opacity: 1; } }
.sm-spinner { width: 72px; height: 72px; border-radius: 50%; border: 8px solid rgba(255, 255, 255, 0.85);
  border-top-color: #0072b2; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); animation: sm-spin 0.9s linear infinite; }
@keyframes sm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sm-spinner { animation-duration: 3s; } }
.sm-media-status.failed { background: repeating-linear-gradient(135deg, #f3f4f6 0 24px, #e5e7eb 24px 48px);
  color: #b42318; grid-auto-flow: row; align-content: center; gap: 12px; font-size: 30px; text-align: center; border-radius: inherit; }
.sm-media-status.failed svg { width: 96px; height: 96px; justify-self: center; }
/* A picture linked by name (a Beamer import's), not embedded: its name says which. */
.sm-placeholder-linked > span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; overflow-wrap: anywhere; }
.sm-placeholder-name { font: 32px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #1f2937; }
.sm-placeholder-note { font-size: 24px; color: #374151; }
.sm-thumb .sm-placeholder-linked .sm-placeholder-name { font-size: 48px; }
.sm-thumb .sm-placeholder-linked .sm-placeholder-note { display: none; }

/* ───────────────────────── Inspector ───────────────────────── */
.sm-inspector { padding: 0; }
.sm-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.sm-kind { font-weight: 600; }
.sm-id { color: var(--muted); font-size: 12px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.sm-section { padding: 10px 14px 14px; border-bottom: 1px solid var(--border); }
.sm-section h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* A heading inside a long section (the presentation's settings): its parts, apart. */
.sm-section h4.sm-subhead { margin: 16px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); }
.sm-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-width: 0; }
.sm-label { font-size: 12px; color: var(--muted); }
.sm-field input[type=text], .sm-field input[type=number], .sm-field textarea, .sm-field select {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 7px;
  width: 100%;
  min-width: 0;
}
.sm-field textarea { resize: vertical; line-height: 1.4; }
.sm-field .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.sm-field input:focus, .sm-field textarea:focus, .sm-field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sm-field.has-error input, .sm-field.has-error textarea { border-color: var(--danger); }
.sm-error { color: var(--danger); font-size: 12px; }
.sm-num { position: relative; }
/* The field and its unit (sums are typed in it: text, not a number input with spinners). */
.sm-num-box { position: relative; display: block; }
.sm-num .sm-num-box input[type=text] { box-sizing: border-box; padding-right: 30px; font-variant-numeric: tabular-nums; }
.sm-num .sm-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.sm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.sm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-row .sm-field { margin-bottom: 0; }
.sm-row.sm-checks { row-gap: 8px; column-gap: 18px; margin-bottom: 6px; }
.sm-sel.sm-group { outline-style: dashed; pointer-events: none; }
/* Inside a group (audit Q18): its whole frame, dotted, with where you are. */
.sm-sel.sm-entered-group { outline: 1.5px dotted var(--accent); outline-offset: 6px; pointer-events: none; }
.sm-entered-label {
  position: absolute; left: -6px; bottom: calc(100% + 8px); white-space: nowrap; font: 600 11.5px/1.6 system-ui, sans-serif;
  padding: 0 6px; border-radius: 4px; color: #fff; background: #1d4ed8;
}
.sm-sel.sm-group .sm-handle { pointer-events: auto; }
.sm-help.sm-inline { margin: 0; }
.sm-buttons { gap: 2px; margin-top: 4px; }
.sm-buttons button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.sm-check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.sm-segmented { display: inline-flex; width: fit-content; max-width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.sm-segmented button { border-radius: 0; padding: 4px 9px; font-size: 12px; border-right: 1px solid var(--border); }
.sm-segmented button:last-child { border-right: none; }
.sm-colour { display: grid; grid-template-columns: 1fr; }
.sm-colour { grid-template-columns: 22px 1fr auto; align-items: center; column-gap: 6px; }
.sm-colour .sm-label { grid-column: 1 / -1; }
/* One-click colours (audit 2026-10-22, F4): the theme's, those in use, recent ones. */
.sm-swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sm-swatches:empty { display: none; }
.sm-swatch-btn { width: 18px; height: 18px; padding: 0; border-radius: 4px; border: 1px solid var(--border-strong); cursor: pointer; flex: none; }
.sm-swatch-btn:hover { transform: scale(1.12); }
.sm-swatch-btn.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.sm-swatch { position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--border-strong); background-color: #fff; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
/* The colour itself, over a checkerboard (transparency shows), inside the swatch's ring. */
.sm-swatch-fill { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border-strong); }
/* A custom colour: the swatch is the picker (the native input, invisible, over it). */
.sm-swatch.pick { cursor: pointer; }
.sm-swatch input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.sm-alpha { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.sm-field .sm-alpha input[type=number] { width: 58px; }
.sm-help { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
/* Explanations are a "?" to hover (js/helptext.js; the user, 2026-10-10): their text is not
   on the page. The "?" is a button on what they explain (a label, a heading), or the
   explanation itself where there is nothing to hang it on (data-q). What reports a state
   (.sm-state, a warning, a status, an inline note) is shown as it is. */
:is(p, span, div, ul):is(.sm-help, .sm-hint):not(:is(.sm-state, .sm-warn-text, .sm-inline, [role=alert], [role=status])) { display: none; }
.sm-q, :is(p, span, div, ul):is(.sm-help, .sm-hint)[data-q] {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 15px; height: 15px; min-width: 0; padding: 0; margin: 0 0 0 5px; border-radius: 50%;
  border: 1px solid currentColor; background: none; color: var(--muted); opacity: 0.8;
  font: 600 10px/1 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
  cursor: help; vertical-align: 1px; white-space: nowrap; overflow: hidden;
}
:is(p, span, div, ul):is(.sm-help, .sm-hint)[data-q] { font-size: 0; margin: 0 0 8px; }
:is(span):is(.sm-help, .sm-hint)[data-q] { margin: 0; }
.sm-q::before, :is(p, span, div, ul):is(.sm-help, .sm-hint)[data-q]::before { content: "?"; font-size: 10px; }
.sm-beamer-section .sm-row .sm-help[data-q] { flex: none; }
:is(p, span, div, ul):is(.sm-help, .sm-hint)[data-q] > * { display: none; }
.sm-q:is(:hover, :focus-visible, [aria-expanded=true]),
:is(p, span, div, ul):is(.sm-help, .sm-hint)[data-q]:is(:hover, :focus-visible, [aria-expanded=true]) { color: var(--accent); opacity: 1; background: none; }
.sm-section > h3 { display: flex; align-items: center; }
.sm-section > h3 > .sm-section-toggle { flex: 1; width: auto; }
.sm-tip {
  position: fixed; z-index: 10001; box-sizing: border-box; padding: 8px 11px; border-radius: 8px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); font-size: 12.5px; line-height: 1.5; pointer-events: none;
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.sm-tip.pinned { pointer-events: auto; border-color: var(--accent); }
.sm-tip p { margin: 0; }
.sm-tip p + p { margin-top: 6px; }
.sm-tip code { font-size: 11.5px; background: var(--code-bg); padding: 0 3px; border-radius: 3px; }
.sm-help code { font-size: 11px; background: var(--code-bg); padding: 0 3px; border-radius: 3px; }

/* ───────────────────────── Files, banners, dialogs ───────────────────────── */
.sm-app.busy, .sm-app.busy * { cursor: progress !important; }
.sm-menu { position: relative; }
.sm-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.sm-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 41;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--menu-shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.sm-menu-list button { justify-content: space-between; padding: 6px 10px; width: 100%; text-align: left; }
.sm-menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.sm-menu-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 2px; }
.sm-menu-note { font-size: 12px; color: var(--muted); padding: 4px 10px 6px; max-width: 260px; line-height: 1.4; }
.sm-menu-row { display: flex; align-items: center; width: 100%; }
.sm-menu-row button[role=menuitem] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-menu-list .sm-menu-row .sm-menu-delete { width: auto; flex: none; padding: 6px 10px; color: var(--muted); }
.sm-menu-list .sm-menu-row .sm-menu-delete:hover { color: var(--danger); }
/* History list (beside Undo/Redo): undo steps, a grey bar for now, redo steps. */
.sm-tool-group .sm-history-btn { padding: 4px 6px; gap: 4px; }
.sm-history-list { width: 400px; max-width: calc(100vw - 24px); }
.sm-history-list .sm-history-item { gap: 12px; }
.sm-history-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-history-item.redo .sm-history-label { color: var(--muted); }
.sm-history-now { height: 3px; margin: 6px 4px 4px; border-radius: 2px; background: var(--border-strong); flex: none; }
.sm-history-more, .sm-history-none { font-size: 12px; color: var(--muted); padding: 4px 10px; }
.sm-history-none { font-style: italic; }
.sm-history-list .sm-menu-note { max-width: none; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.sm-row.sm-nowrap { flex-wrap: nowrap; }
.sm-row.sm-nowrap input[type=text] { flex: 1; min-width: 0; }
.sm-shortcut { color: var(--muted); font-size: 12px; }
.sm-menu-why { font-style: italic; margin-left: 16px; color: var(--muted); }
/* Greyed out but legible: the reason must be readable (a whole-item opacity made it faint). */
.sm-menu-list button:disabled:has(.sm-menu-why) { opacity: 1; color: var(--muted); }
.sm-dirty { color: var(--accent); font-weight: 700; }
.sm-secondary { border: 1px solid var(--border-strong); background: var(--field-bg); padding: 6px 10px; width: 100%; justify-content: center; }
.sm-banner {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px;
}
.sm-program-banner { max-width: min(760px, calc(100vw - 32px)); line-height: 1.45; }
/* In the editor: under the toolbar's two rows, not over its tools. */
.sm-banner.sm-under-toolbar { top: 92px; }
.sm-modal-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--backdrop); display: grid; place-items: center; }
.sm-modal:focus { outline: none; }
.sm-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25); padding: 20px 22px; max-width: 460px; }
.sm-modal p { margin: 0 0 16px; }
.sm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sm-modal-actions .danger { color: var(--danger); border: 1px solid var(--danger-line); }
/* Buttons that are words only read as plain text in a dialog or a panel: these get an outline. */
.sm-modal-actions button:not(.sm-primary):not(.danger),
:is([data-action=check-go], [data-action=offline-go], [data-action=offline-embed], [data-action=saliency-export], [data-action=saliency-estimate], [data-action=insert-all], [data-action=insert-none], [data-action=close-source], [data-action=revert-source], [data-action=find-replace-one], [data-action=find-replace-all], [data-action=find-show-replace],
     .sm-start :is([data-action=recover], [data-action=discard], [data-action=keep], [data-action=forget-recent])) {
  border-color: var(--border-strong); background: var(--panel);
}

/* Live demos */
.sm-demo { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.sm-demo iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; pointer-events: none; }
.sm-demo.interactive iframe { pointer-events: auto; }
.sm-canvas .sm-demo.interactive { outline: 4px solid #f59e0b; outline-offset: -4px; }
.sm-demo-error {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  font: 24px/1.3 ui-monospace, monospace; color: #fff; background: rgba(220, 38, 38, 0.9);
  padding: 4px 10px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-untrusted { position: relative; width: 100%; height: 100%; }
.sm-untrusted > .sm-placeholder, .sm-untrusted > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-untrusted button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 32px; padding: 12px 24px; }

/* Presentation */
.sm-present { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; outline: none; cursor: default; }
.sm-present.idle { cursor: none; }
.sm-present-frame { position: absolute; }
.sm-present .sm-slide { overflow: hidden; }
.sm-blank { position: absolute; inset: 0; background: #000; }
.sm-blank.white { background: #fff; }
.sm-present-btn { color: var(--accent); font-weight: 600; }

/* Smart guides */
.sm-guide { position: absolute; background: #e11d48; pointer-events: none; }
.sm-guide.v { top: 0; bottom: 0; width: 1px; }
.sm-guide.h { left: 0; right: 0; height: 1px; }
/* Distances while moving (equal spacing, to the aligned box): a segment with end bars and its length. */
.sm-gap { position: absolute; pointer-events: none; border: 0 solid #db2777; }
.sm-gap.h { height: 0; border-top-width: 1px; }
.sm-gap.v { width: 0; border-left-width: 1px; }
.sm-gap.h::before, .sm-gap.h::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: #db2777; }
.sm-gap.h::before { left: 0; } .sm-gap.h::after { right: 0; }
.sm-gap.v::before, .sm-gap.v::after { content: ""; position: absolute; left: -5px; width: 9px; height: 1px; background: #db2777; }
.sm-gap.v::before { top: 0; } .sm-gap.v::after { bottom: 0; }
.sm-gap-label, .sm-measure {
  position: absolute; pointer-events: none; white-space: nowrap; padding: 1px 6px; border-radius: 4px;
  font: 600 11px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff;
}
.sm-gap-label { background: #db2777; transform: translate(-50%, -50%); }
.sm-gap-label.h { transform: translate(-50%, calc(-100% - 3px)); }
.sm-gap-label.v { transform: translate(5px, -50%); }
.sm-measure { background: #1f2328; transform: translateX(-50%); }
.sm-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* Presentation manager */
.sm-app.hidden-view { display: none; }
.sm-manager { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; height: 100vh; overflow-y: auto; }
.sm-manager-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sm-manager-head h1 { font-size: 18px; margin: 0; }
.sm-manager-bar { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.sm-search { font: inherit; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; min-width: 240px; }
.sm-manager-empty, .sm-manager-msg { color: var(--muted); padding: 12px 0; }
.sm-link-button { text-decoration: none; display: inline-block; border-radius: 6px; }
.sm-deck-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.sm-deck-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sm-deck-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sm-deck-title { font-weight: 600; padding: 2px 4px; }
.sm-deck-title:hover:not(:disabled) { color: var(--accent); background: none; text-decoration: underline; }
.sm-deck-actions { text-align: right; white-space: nowrap; }
.sm-deck-actions button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.sm-deck-actions button + button { margin-left: 6px; }
.sm-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.sm-tag.role { background: var(--tag-bg); color: var(--muted); }
.sm-deck-detail td { background: var(--row-alt); }
.sm-revision, .sm-access-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.sm-revision .sm-muted { flex: 1; }
.sm-access-row select { font: inherit; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 6px; }

/* Start page (local mode) */
.sm-start-heading { font-size: 14px; margin: 24px 0 8px; }
.sm-start-dir { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sm-start-link { color: var(--accent); }
.sm-start-install { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; padding: 10px 14px; background: var(--accent-soft); border-radius: var(--radius); }
.sm-start-install p { margin: 0; flex: 1; }
p.sm-start-install { display: block; }
.sm-start-install button { border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }

/* PDF export */
.sm-modal-title { font-size: 16px; margin: 0 0 12px; }
.sm-choices { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sm-choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.sm-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sm-choice input { margin-top: 3px; }
.sm-choice span { display: grid; gap: 2px; }
.sm-choice small { color: var(--muted); }
.sm-hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
.sm-progress { font-variant-numeric: tabular-nums; min-height: 1.4em; }
/* Pages being exported: rendered at full size, off-screen. */
.sm-print-root { position: fixed; left: -100000px; top: 0; pointer-events: none; }
.sm-print-page { position: relative; overflow: hidden; background: #fff; }
.sm-print-page .sm-slide { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* Handouts on A4 (audit P8): 2, 3, 4 or 6 slides a sheet, lines for notes beside or under. */
.sm-sheet { box-sizing: border-box; padding: 90px 90px 70px; display: flex; flex-direction: column; font-family: "Inter", system-ui, sans-serif; color: #111827; }
.sm-sheet-grid { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-content: start; gap: 44px 40px; }
.sm-sheet-cell { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sm-sheet-cell.beside { flex-direction: row; gap: 32px; align-items: flex-start; }
.sm-sheet[data-per="2"] .sm-sheet-cell { align-items: center; }
.sm-sheet-slide-box { position: relative; flex: none; }
.sm-sheet-slide { position: relative; overflow: hidden; box-shadow: 0 0 0 1.5px #9ca3af; }
.sm-sheet-n { position: absolute; right: calc(100% + 12px); top: 0; font: 600 20px/1 "Inter", system-ui, sans-serif; color: #6b7280; }
.sm-sheet-lines { flex: 1 1 auto; align-self: stretch; min-width: 0; background: repeating-linear-gradient(to bottom, transparent 0 41px, #9ca3af 41px 42px); }
.sm-sheet[data-per="2"] .sm-sheet-lines { width: 100%; }
.sm-sheet-foot { display: flex; justify-content: space-between; gap: 24px; padding-top: 12px; border-top: 1px solid #d1d5db; font-size: 18px; color: #6b7280; }
.sm-notes-page { position: relative; background: #fff; color: #111827; font-family: "Inter", system-ui, sans-serif; }
.sm-notes-slide { position: absolute; left: 48px; top: 48px; overflow: hidden; box-shadow: 0 0 0 2px #d1d5db; }
.sm-notes-meta { position: absolute; left: 48px; font-size: 30px; color: #4b5563; }
.sm-notes-body { position: absolute; top: 40px; right: 56px; bottom: 48px; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; border-left: 3px solid #e5e7eb; padding-left: 40px; }
.sm-notes-body.cut::after {
  content: "…"; position: absolute; left: 40px; right: 0; bottom: 0; padding-top: 1.2em;
  background: linear-gradient(transparent, #fff 60%); font-weight: 600;
}
.sm-notes-none { color: #9ca3af; font-style: italic; }

@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  body.sm-printing > :not(.sm-print-root) { display: none !important; }
  body.sm-printing .sm-print-root { position: static; }
  body.sm-printing .sm-print-page { width: var(--print-w) !important; height: var(--print-h) !important; break-after: page; }
  body.sm-printing .sm-print-page > .sm-slide, body.sm-printing .sm-print-page > .sm-notes-page { transform: scale(var(--print-k)); transform-origin: 0 0; }
  .sm-print-page:last-child { break-after: auto; }
}

/* Sharing */
.sm-share-panel { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; padding: 8px 0; }
.sm-share-panel h3, .sm-share-links h3 { font-size: 13px; margin: 0 0 6px; }
.sm-share-dialog { width: min(760px, 90vw); }
.sm-modal:has(.sm-share-dialog) { max-width: none; }
.sm-share-link { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
/* Its actions look like buttons (they read as plain words otherwise). */
.sm-share-link button:not(.sm-link-deck) { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: 3px 10px; }
.sm-share-link button.danger:not(.armed) { color: var(--danger, #b91c1c); }
.sm-share-links h4 { margin: 14px 0 0; font-size: 13px; }
.sm-share-link.expired .sm-share-url { text-decoration: line-through; color: var(--muted); }
.sm-share-url { font: 12px/1.4 ui-monospace, "JetBrains Mono", monospace; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--ui-bg); min-width: 0; }
.sm-share-tags { grid-column: 2 / -1; }
.sm-share-tags .sm-tag:first-child { margin-left: 0; }
.sm-share-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.sm-share-new input[type=text], .sm-share-new input[type=password], .sm-share-new select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; min-width: 0;
}
.sm-share-new input[type=password] { flex: 1 1 17em; }
.sm-share-mode { display: inline-flex; align-items: center; gap: 6px; }
.sm-share-address { display: flex; align-items: center; flex: 1 1 100%; gap: 0; }
.sm-share-origin { color: var(--muted); font: 12px "JetBrains Mono", ui-monospace, monospace; padding-right: 2px; white-space: nowrap; }
.sm-share-new .sm-share-address input[type=text] { flex: 1 1 auto; font-family: "JetBrains Mono", ui-monospace, monospace; }
.sm-share-taken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px;
  border: 1px solid #f59e0b; border-radius: 6px; background: color-mix(in srgb, #f59e0b 10%, transparent); }
.sm-share-taken .sm-warn-text { flex: 1 1 20em; }
.sm-check { display: inline-flex; align-items: center; gap: 4px; }
/* The manager's list of all your links: the presentation first. */
.sm-my-links { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.sm-my-links h2 { font-size: 15px; margin: 0 0 4px; }
.sm-my-links .sm-share-link { grid-template-columns: minmax(8em, 16em) auto minmax(14em, 1fr) auto auto auto; }
.sm-my-links .sm-share-tags { grid-column: 3 / -1; }
.sm-link-deck { justify-self: start; text-align: left; font-weight: 600; background: none; border: none; padding: 2px 0; color: var(--accent); cursor: pointer; overflow-wrap: anywhere; }
.sm-link-deck:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .sm-my-links .sm-share-link { grid-template-columns: auto 1fr auto auto auto; }
  .sm-my-links .sm-link-deck { grid-column: 1 / -1; }
  .sm-my-links .sm-share-tags { grid-column: 2 / -1; }
}

/* Share-link viewer */
.sm-viewer-shell { position: fixed; inset: 0; background: #0b0d12; color: #e5e7eb; }
.sm-viewer { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0d12; }
.sm-viewer-stage { position: relative; flex: 1; overflow: hidden; cursor: default; touch-action: pan-y pinch-zoom; }
.sm-viewer-stage .sm-slide { overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
.sm-viewer-bar {
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px;
  background: #151821; border-top: 1px solid #252a36; color: #e5e7eb;
}
.sm-viewer-bar button { color: #e5e7eb; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
.sm-viewer-bar button:hover:not(:disabled) { background: #252a36; }
.sm-viewer-bar button.active { background: #1e3a8a; color: #fff; }
.sm-viewer-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-viewer-counter { font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; }
.sm-live-badge { color: #f87171; font-weight: 700; letter-spacing: 0.02em; }
.sm-viewer .sm-menu-list.up { top: auto; bottom: calc(100% + 6px); right: 0; left: auto; color: var(--text); }
.sm-viewer .sm-menu-list.up button { color: var(--text); }
.sm-viewer-note {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);
  background: #151821; border: 1px solid #252a36; padding: 6px 12px; border-radius: 8px; font-variant-numeric: tabular-nums;
}
.sm-viewer.full .sm-viewer-bar { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.2s; }
.sm-viewer.full .sm-viewer-bar:hover, .sm-viewer.full .sm-viewer-bar:focus-within { opacity: 1; }
.sm-viewer-waiting { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #0f172a; color: #e2e8f0; text-align: center; padding: 24px; font-size: 17px; }
.sm-viewer-waiting p { margin: 0; max-width: 32em; }
.sm-viewer-waiting-title { font-size: 24px; font-weight: 650; color: #fff; }
.sm-viewer-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 16px; color: #cbd5e1; padding: 24px; text-align: center; }
.sm-viewer-password {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(360px, 90vw);
  background: var(--panel); color: var(--text); border-radius: 12px; padding: 22px; display: grid; gap: 12px;
}
.sm-viewer-password h1 { font-size: 17px; margin: 0; }
.sm-viewer-password label { display: grid; gap: 4px; font-weight: 500; }
.sm-viewer-password input { font: inherit; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 6px; }
.sm-viewer-password .sm-error { margin: 0; }
.sm-live-toggle { gap: 6px; }
.sm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.sm-live-toggle.active { background: #fee2e2; color: #b91c1c; }
:root[data-ui-theme=dark] .sm-live-toggle.active { background: color-mix(in srgb, #dc2626 28%, transparent); color: #fecaca; }
.sm-live-toggle.active .sm-live-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }

/* Presenter view */
.sm-stage-box { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sm-stage-box .sm-slide { overflow: hidden; }
.sm-console {
  position: fixed; inset: 0; z-index: 200; background: #0f1115; color: #e5e7eb;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px; padding: 12px; box-sizing: border-box;
}
.sm-console button { color: #e5e7eb; background: #1b1f29; border: 1px solid #2a3040; border-radius: 6px; padding: 5px 10px; }
.sm-console button:hover:not(:disabled) { background: #252b3a; }
.sm-console button.active { background: #1e3a8a; }
.sm-console button.danger { color: #fca5a5; border-color: #7f1d1d; }
.sm-console-head, .sm-console-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.sm-console-title { font-weight: 600; }
.sm-audience-status { color: #fbbf24; font-size: 13px; }
.sm-audience-status.ok { color: #86efac; }
/* The current slide at the deck's shape (no bars); on a short screen it gives way to the notes. */
.sm-console-current { background: #000; border-radius: 8px; min-height: 0; justify-self: center; }
.sm-console-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
/* The current slide's videos, played in the room from here (audit P5). */
.sm-console-videos { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sm-console-video {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 10px; border: 1px solid #2e333d; border-radius: 8px; background: #1b1f27; color: #e5e7eb; font-size: 13px;
}
.sm-console-video .sm-video-play { width: 38px; height: 30px; padding: 0; font-size: 15px; display: grid; place-items: center; }
.sm-console-video input[type=range] { flex: 1 1 120px; min-width: 120px; accent-color: #60a5fa; }
/* A frame back, on, and the frame shown (audit R4). */
.sm-console-video .sm-video-frames { display: inline-flex; align-items: center; gap: 4px; }
.sm-console-video .sm-video-frame { width: 30px; height: 28px; padding: 0; display: grid; place-items: center; }
.sm-console-video .sm-video-frame-at { min-width: 9.5em; font-variant-numeric: tabular-nums; color: #cbd5e1; }
.sm-console-video .sm-video-time { font-variant-numeric: tabular-nums; color: #cbd5e1; }
.sm-console-video select { background: #111318; color: #e5e7eb; border: 1px solid #3a404c; border-radius: 6px; padding: 3px 6px; }
.sm-console-notes-area { grid-column: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-height: 0; }
.sm-console-label { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; }
.sm-console-label button { padding: 1px 7px; font-size: 12px; text-transform: none; }
.sm-console-next { background: #000; border-radius: 6px; overflow: hidden; }
.sm-console-end { height: 100%; display: grid; place-items: center; color: #9ca3af; }
.sm-console-notes { overflow: auto; background: #161a22; border-radius: 6px; padding: 10px 12px; line-height: 1.45; }
.sm-notes-text { white-space: pre-wrap; }
.sm-console-timer { font: 600 28px/1 ui-monospace, "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; min-width: 5ch; }
.sm-console-timer.paused { color: #fbbf24; }
.sm-console-clock { font: 20px/1 ui-monospace, "JetBrains Mono", monospace; color: #9ca3af; margin-left: 12px; }
.sm-audience { position: fixed; inset: 0; background: #000; outline: none; }
.sm-audience.idle { cursor: none; }
.sm-audience .sm-stage-box { position: absolute; inset: 0; }
.sm-audience-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 80%;
  background: rgba(17, 24, 39, 0.9); color: #e5e7eb; padding: 10px 16px; border-radius: 8px; font-size: 15px; text-align: center;
}
.sm-audience-hint.ended { bottom: auto; top: 24px; background: rgba(120, 53, 15, 0.92); }

/* Plots (native plugin) */
.sm-plot-host { position: relative; width: 100%; height: 100%; }
.sm-plot-canvas { position: absolute; inset: 0; }
.sm-plot { position: relative; width: 100%; height: 100%; }
.sm-plot-svg { position: absolute; inset: 0; display: block; overflow: visible; }
.sm-plot-label { position: absolute; white-space: nowrap; pointer-events: none; }
.sm-plot-label.axis.x { transform: translateX(-0.2em); }
.sm-plot-legend {
  position: absolute; display: grid; gap: 0.25em; padding: 0.35em 0.6em; border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.82); box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.25);
}
.sm-plot-entry { display: flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.sm-plot-swatch { display: inline-block; width: 1.8em; height: 0; }
.sm-chart-legend {
  position: absolute; top: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  align-content: center; column-gap: 1.4em; line-height: 1.4; overflow: hidden;
}
.sm-chart-swatch { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 0.15em; }
.sm-chart-swatch.line { width: 1.8em; height: 0.22em; border-radius: 0.11em; }
.sm-chart-title { font-weight: 600; }
/* A numbered formula (audit R10): the number(s) at the right, a row's each for an align. */
.sm-eq { display: flex; align-items: center; width: 100%; }
.sm-eq-body { flex: 1; min-width: 0; }
.sm-eq-nos { display: flex; flex-direction: column; justify-content: space-around; align-self: stretch; margin-left: 1em; white-space: nowrap; }
.sm-math .sm-eq-body { text-align: inherit; }
/* The works cited (audit R6): a References element, or \bibliography in a text. Numbered: the
   label in its own column; author-year: a hanging indent. */
.sm-references { width: 100%; height: 100%; overflow: hidden; line-height: 1.35; }
.sm-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45em; }
.sm-refs.numbered li { display: grid; grid-template-columns: 2.6em 1fr; column-gap: 0.4em; }
.sm-refs.author-year li { padding-left: 1.5em; text-indent: -1.5em; }
.sm-ref-label { text-align: right; opacity: 0.8; }
.sm-refs-empty { margin: 0; opacity: 0.7; font-style: italic; }
.sm-bib-read { margin: 4px 0; padding-left: 1.1em; }
/* A metrics table (audit R5): the best of each column in bold, which way is better in its header. */
.sm-metrics { display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: 0.6em; overflow: hidden; }
.sm-metrics table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sm-metrics th, .sm-metrics td { padding: 0.35em 0.9em; text-align: right; white-space: nowrap; }
.sm-metrics thead th { border-bottom: 0.12em solid currentColor; font-weight: 600; }
.sm-metrics tbody th { text-align: left; font-weight: 500; }
.sm-metrics tbody tr:nth-child(even) { background: rgba(127, 127, 127, 0.1); }
.sm-metrics tbody tr:last-child th, .sm-metrics tbody tr:last-child td { border-bottom: 0.06em solid currentColor; }
.sm-metrics-best { font-weight: 700; }
.sm-metrics-dir { opacity: 0.75; font-weight: 400; }
.sm-metrics-note { margin: 0; font-size: 0.75em; opacity: 0.75; }
.sm-plot-swatch.area { height: 0.8em; opacity: 0.35; border-radius: 0.1em; }
.sm-plot-errors { background: #fef2f2; color: #991b1b; font: 22px/1.4 ui-monospace, "JetBrains Mono", monospace; padding: 16px; box-sizing: border-box; overflow: hidden; }
.sm-plot-errors ul { margin: 8px 0 0; padding-left: 1.2em; }
.sm-plot-controls {
  position: absolute; left: 1.5%; bottom: 2%; display: grid; gap: 6px; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); font: 28px/1.2 "Inter", system-ui, sans-serif;
  color: #1f2328; pointer-events: none; transition: opacity 0.15s;
}
.sm-plot-controls[data-at=bottom-right] { left: auto; right: 1.5%; }
.sm-plot-controls[data-at=top-left] { bottom: auto; top: 2%; }
.sm-plot-controls[data-at=top-right] { bottom: auto; top: 2%; left: auto; right: 1.5%; }
.sm-plot-controls.interactive { pointer-events: auto; }
.sm-plot-controls.hover { opacity: 0; }
.sm-plot-host:hover .sm-plot-controls.hover, .sm-plot-controls.hover:focus-within { opacity: 1; }
.sm-plot-controls.interactive.hover { opacity: 1; } /* in use in the editor */
.sm-plot-control { display: grid; grid-template-columns: minmax(1.6em, auto) 11em 3.2em auto; align-items: center; gap: 12px; }
.sm-plot-control input[type=range] { height: 1.2em; }
.sm-plot-control input[type=range] { width: 100%; accent-color: #2563eb; }
.sm-plot-control-value { font-variant-numeric: tabular-nums; text-align: right; }
.sm-plot-play { font-size: 20px; padding: 2px 10px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; }
.sm-help-details summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.sm-help-pre { font: 11px/1.45 ui-monospace, "JetBrains Mono", monospace; background: var(--code-bg); padding: 8px; border-radius: 6px; white-space: pre-wrap; margin: 6px 0 0; }
.sm-plot-label.centred { transform: translate(-50%, -50%); }
.sm-plot-host.interactive .sm-plot-drag { cursor: grab; }
.sm-plot-host.interactive .sm-plot-drag:active { cursor: grabbing; }

/* Helper plugins */
.sm-qr { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sm-qr-code { flex: 1; min-height: 0; aspect-ratio: 1; max-width: 100%; }
.sm-qr-caption { font: 20px/1.3 "Inter", system-ui, sans-serif; color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-clock { width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; font-family: "Inter", system-ui, sans-serif; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-timer { width: 100%; height: 100%; display: grid; place-items: center; font: 600 96px/1 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sm-timer-bar, .sm-progress-bar { width: 100%; height: 100%; border-radius: 999px; overflow: hidden; }
.sm-timer-bar { position: relative; container-type: size; }
.sm-timer-caption { position: absolute; inset: 0 8%; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 clamp(12px, 36cqh, 40px)/1 "Inter", system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-timer-fill, .sm-progress-fill { height: 100%; border-radius: inherit; transition: width 0.2s linear; }
.sm-progress-dots { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sm-progress-dot { width: 14px; height: 14px; border-radius: 50%; opacity: 0.8; }
.sm-progress-dot.current { transform: scale(1.4); opacity: 1; }
.sm-progress-fraction { width: 100%; height: 100%; display: grid; place-items: center; font: 28px/1 "Inter", system-ui, sans-serif; }
.sm-contents { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 14px; font: 36px/1.2 "Inter", system-ui, sans-serif; }
.sm-contents.bar { flex-direction: row; align-items: center; gap: 32px; font-size: 22px; }
.sm-contents-item.current { font-weight: 700; }
.sm-contents-empty { color: #9ca3af; font-size: 22px; }
/* Navigation band (Beamer miniframes): sections side by side (top/bottom) or stacked (left/right). */
.sm-navband { width: 100%; height: 100%; box-sizing: border-box; display: flex; gap: 44px; padding: 8px 36px; align-items: center; font-size: 24px; line-height: 1.2; overflow: hidden; }
.sm-navband.vertical { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px; padding: 28px 24px; }
.sm-navband-section { display: flex; flex-direction: column; gap: 7px; min-width: 0; opacity: 0.78; }
.sm-navband-section[data-state=past] { opacity: 0.6; }
.sm-navband-section[data-state=current] { opacity: 1; }
.sm-navband-section[data-state=current] .sm-navband-name { font-weight: 700; }
.sm-navband-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-navband.vertical .sm-navband-name { white-space: normal; }
.sm-navband-marks { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 14px; }
.sm-navband-dot { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid currentColor; }
.sm-navband-dot.on { background: currentColor; }
.sm-navband-count { font-size: 0.8em; }
.sm-navband-empty { opacity: 0.6; }
.sm-diagram { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.sm-diagram-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sm-diagram-wait { color: #9ca3af; font: 24px/1.2 "Inter", system-ui, sans-serif; }
/* The last drawing, dimmed, while the next one is made (audit 2026-10-22, B2). */
.sm-diagram-stale { opacity: 0.45; }
.sm-diagram-wait-over { position: absolute; right: 8px; bottom: 6px; font-size: 18px; color: #6b7280; }

/* Code cells (Jupyter) */
.sm-cell { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #0f172a; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2); }
.sm-cell-head { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.7em; color: #94a3b8; font: 0.75em/1.2 "JetBrains Mono", ui-monospace, monospace; }
.sm-cell-count { color: #93c5fd; }
.sm-cell-run { font: 600 0.8em/1 "Inter", system-ui, sans-serif; color: #e2e8f0; background: #1e3a8a; border: 0; border-radius: 0.4em; padding: 0.35em 0.8em; cursor: pointer; }
.sm-cell-run[data-action=stop-cell] { background: #7f1d1d; }
.sm-cell-status { width: 0.55em; height: 0.55em; border-radius: 50%; background: #64748b; display: inline-block; }
.sm-cell-status[data-status=idle] { background: #22c55e; }
.sm-cell-status[data-status=busy], .sm-cell-status[data-status=starting] { background: #f59e0b; }
.sm-cell-status[data-status=error] { background: #ef4444; }
.sm-cell-code { flex: 0 1 auto; max-height: 55%; overflow: auto; padding: 0 0.7em 0.5em; }
.sm-cell-code .sm-code { margin: 0; color: #e5e7eb; white-space: pre; font: inherit; }
.sm-cell-editor { width: 100%; min-height: 6em; box-sizing: border-box; font: inherit; color: #e5e7eb; background: #111827; border: 1px solid #334155; border-radius: 0.3em; padding: 0.3em; resize: none; outline: none; }
.sm-cell-outputs { flex: 1 1 auto; min-height: 0; overflow: auto; background: #f8fafc; color: #0f172a; padding: 0.4em 0.7em; font: 0.9em/1.35 "JetBrains Mono", ui-monospace, monospace; }
.sm-cell-outputs pre { margin: 0 0 0.3em; white-space: pre-wrap; font: inherit; }
.sm-cell-stream.stderr { color: #b45309; background: #fffbeb; }
.sm-cell-error { color: #991b1b; background: #fef2f2; padding: 0.2em 0.4em; border-radius: 0.2em; }
.sm-cell-img { max-width: 100%; max-height: 100%; display: block; }
.sm-cell-html { width: 100%; height: 12em; border: 0; background: #fff; }
.sm-kernel-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; }
.sm-jupyter-dialog { width: min(560px, 86vw); display: grid; gap: 8px; }
.sm-jupyter-dialog input { font: inherit; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; width: 100%; box-sizing: border-box; }
.sm-modal:has(.sm-jupyter-dialog) { max-width: none; }
.sm-cell .sm-cell-run:hover:not(:disabled) { background: #1d4ed8; }
.sm-cell .sm-cell-run[data-action=stop-cell]:hover:not(:disabled) { background: #991b1b; }
.sm-theme-colours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.sm-theme-colour { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sm-theme-colour input[type=color] { width: 30px; height: 24px; padding: 0 2px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--field-bg); }
.sm-demo-libs { display: grid; gap: 4px; }
.sm-lib-row { display: flex; gap: 6px; align-items: center; }
.sm-lib-row input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 6px; }
.sm-lib-name { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Algorithm animations */
.sm-algo { width: 100%; height: 100%; display: flex; flex-direction: column; font: 26px/1.3 "Inter", system-ui, sans-serif; }
.sm-algo-canvas { flex: 1; min-height: 0; }
.sm-algo-note { padding: 6px 4px; color: inherit; min-height: 1.3em; }
.sm-algo-controls { display: flex; align-items: center; gap: 8px; padding: 4px; }
.sm-algo-controls button { font-size: 22px; min-width: 2.2em; padding: 2px 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.sm-sim-n { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.sm-sim-n select { font-size: 22px; padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.sm-algo-count { font-variant-numeric: tabular-nums; color: #6b7280; margin-left: 8px; }

/* Keyboard shortcuts dialog */
.sm-modal:has(.sm-shortcuts) { width: min(1080px, calc(100vw - 48px)); max-width: none; }
.sm-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 4px 36px; max-height: calc(100vh - 200px); overflow: auto; margin-bottom: 12px; }
.sm-shortcuts h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 10px 0 6px; }
/* One key column width for every section, so descriptions line up and keep their room. */
.sm-shortcuts dl { display: grid; grid-template-columns: 210px 1fr; gap: 5px 14px; margin: 0; font-size: 13px; align-items: baseline; }
.sm-shortcuts dt { margin: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.sm-shortcuts dd { margin: 0; color: var(--text); }
.sm-shortcuts kbd { font: 500 11.5px/1.5 inherit; font-family: inherit; padding: 0 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--ui-bg); white-space: nowrap; }

/* Shown after a crash (see main.rs). */
#sm-crashed {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 10000; max-width: min(640px, 90vw);
  padding: 12px 18px; border-radius: 10px; background: #991b1b; color: #fff; font: 14px/1.4 "Inter", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* A video whose autoplay the browser refused. */
.sm-video-blocked {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 26px; line-height: 1;
  width: 60px; height: 60px; padding: 0 0 0 5px; display: grid; place-items: center; border-radius: 999px; border: 0; background: rgba(17, 24, 39, 0.8); color: #fff; cursor: pointer;
}

.sm-tag-editor { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.sm-tag-editor input { flex: 1; max-width: 420px; }

/* Overview: all slides in a grid. */
.sm-overview { grid-row: 2; grid-column: slides-start / inspector-end; z-index: 20; display: flex; flex-direction: column; min-height: 0; background: var(--stage); }
.sm-overview-bar { display: flex; align-items: center; gap: 12px; padding: 8px 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
.sm-overview-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; justify-content: center; align-content: start; padding: 24px; outline: none; }
.sm-overview-section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 8px; }
.sm-overview-card { cursor: pointer; border-radius: 6px; padding: 4px; border: 2px solid transparent; }
.sm-overview-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.sm-overview-card.is-hidden .sm-overview-frame { opacity: 0.45; }
.sm-overview-card.drop-target:hover { border-color: var(--border-strong); border-style: dashed; }
.sm-overview-frame { position: relative; overflow: hidden; background: #fff; box-shadow: var(--slide-shadow); border-radius: 3px; }
.sm-overview-frame .sm-scaler { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.sm-overview-caption { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 2px 0; font-size: 13px; }
.sm-overview-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-overview-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sm-menu-check { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 12px; color: var(--muted); }

/* Themes gallery */
.sm-modal:has(.sm-themes) { width: min(1000px, calc(100vw - 48px)); max-width: none; }
.sm-themes { max-height: calc(100vh - 290px); overflow: auto; margin-bottom: 12px; }
.sm-themes h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 8px 0; }
.sm-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sm-theme-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.sm-theme-card:hover { background: var(--ui-bg); }
.sm-theme-card.current { border-color: var(--accent); }
.sm-theme-card.mine { padding: 0; }
.sm-theme-apply { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 0; background: none; text-align: left; cursor: pointer; width: 100%; }
.sm-theme-delete { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: 50%; background: var(--floating); }
.sm-theme-delete.armed { width: auto; padding: 0 9px; border-radius: 12px; }
button.danger.armed { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }
.sm-theme-name { font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.sm-theme-desc { font-size: 12px; color: var(--muted); line-height: 1.3; }
.sm-theme-save { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sm-theme-save input { flex: 1; min-width: 200px; }
.sm-theme-save button { border: 1px solid var(--border-strong); background: var(--panel); }
.sm-theme-save button:hover { background: var(--ui-bg); }
.sm-theme-msg { font-size: 13px; }
.sm-choice-inline { display: flex; gap: 8px; align-items: center; font-size: 13px; }
/* The preview: a 16:9 miniature in the theme's colours. */
.sm-theme-preview { position: relative; aspect-ratio: 16 / 9; background: var(--bg); color: var(--fg); border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.25); font-size: 9px; padding: 8% 7% 0; box-sizing: border-box; }
.sm-tp-title { font-size: 15px; font-weight: 700; margin-bottom: 6%; }
.sm-tp-title.band { position: absolute; left: 0; right: 0; top: 0; padding: 4% 7%; background: var(--accent); color: var(--bg); font-size: 13px; }
.sm-tp-title.band + .sm-tp-list { margin-top: 18%; }
.sm-tp-list { margin: 0; padding-left: 1.2em; line-height: 1.6; font-size: 10px; }
.sm-tp-accent { color: var(--accent); font-weight: 600; }
.sm-tp-chip { position: absolute; right: 7%; top: 34%; width: 22%; height: 26%; border-radius: 3px; background: var(--surface); box-shadow: inset 0 -3px 0 var(--accent); }
.sm-tp-footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 2% 5%; font-size: 6px; color: var(--muted); }
.sm-tp-footer.none span { display: none; }
.sm-tp-footer.minimal span:first-child { visibility: hidden; }
.sm-tp-footer.hairline { margin: 0 5%; padding: 1.5% 0 3%; border-top: 1px solid var(--accent); }
.sm-tp-footer.footline { border-bottom: 4px solid var(--accent); }
.sm-tp-footer.band { background: var(--surface); }

/* Video poster: a preview beside its actions, then the frame to take. */
.sm-video-poster-field { margin-top: 10px; }
.sm-poster-row { display: flex; gap: 10px; align-items: flex-start; }
/* A video's captions: what it has, then its two buttons side by side. */
.sm-video-captions-field .sm-row { gap: 6px 8px; margin-bottom: 6px; }
/* A video's actions at steps (audit R4): a card each, step / Play·Pause / ✕, then its times. */
.sm-cue { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px 2px; margin-bottom: 8px; }
.sm-cue-head { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; align-items: end; }
.sm-cue-head .sm-field { margin-bottom: 8px; }
.sm-cue-head .sm-cue-remove { margin-bottom: 8px; width: auto; }
.sm-video-captions-field .sm-row .sm-help { flex-basis: 100%; }
.sm-video-captions-field .sm-row button { width: auto; flex: none; }
.sm-poster-preview { width: 112px; aspect-ratio: 16 / 9; object-fit: contain; flex: none; border: 1px solid var(--border); border-radius: 4px; background: var(--code-bg); }
.sm-poster-none { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--muted); padding: 4px; box-sizing: border-box; }
.sm-poster-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sm-poster-frame { align-items: flex-end; gap: 8px; margin-top: 8px; flex-wrap: nowrap; }
.sm-poster-frame .sm-num { flex: 0 0 110px; }
.sm-poster-frame button { flex: 1; }

/* Code fields: a CodeMirror editor after the (hidden) textarea. At least `rows` lines; grows
   with the code up to about 24 lines, then scrolls. */
.sm-code-editor { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); overflow: hidden; }
.sm-code-editor .cm-editor { font: 12px/1.45 "JetBrains Mono", ui-monospace, monospace; }
.sm-code-editor .cm-scroller { font-family: inherit; line-height: inherit; min-height: calc(var(--sm-code-rows, 4) * 1.45em + 8px); max-height: calc(24 * 1.45em + 8px); overflow: auto; }
.sm-code-editor .cm-editor.cm-focused { outline: none; }
.sm-code-editor:focus-within { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sm-field.has-error .sm-code-editor { border-color: var(--danger); }
.sm-code-editor .cm-gutters { background: var(--ui-bg); border-right: 1px solid var(--border); color: var(--muted); }
.sm-code-editor .cm-activeLine, .sm-code-editor .cm-activeLineGutter { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sm-code-editor:not(:focus-within) .cm-activeLine, .sm-code-editor:not(:focus-within) .cm-activeLineGutter { background: transparent; }
.sm-code-editor .cm-placeholder { color: var(--muted); }
.sm-code-editor .cm-content { padding: 4px 0; }

/* Editor theme switch (status bar). */
.sm-ui-theme { display: inline-flex; align-items: center; gap: 2px; }
.sm-ui-theme > span { margin-right: 4px; }
/* Code field syntax colours (CodeMirror's classHighlighter), light or dark with the editor. */
.sm-code-editor .tok-keyword, .sm-code-editor .tok-operatorKeyword, .sm-code-editor .tok-modifier { color: var(--syn-keyword); }
.sm-code-editor :is(.tok-string, .tok-string2, .tok-url) { color: var(--syn-string); }
.sm-code-editor :is(.tok-number, .tok-atom, .tok-bool, .tok-literal, .tok-propertyName) { color: var(--syn-number); }
.sm-code-editor :is(.tok-comment, .tok-meta) { color: var(--syn-comment); font-style: italic; }
.sm-code-editor :is(.tok-definition, .tok-macroName, .tok-labelName) { color: var(--syn-def); }
.sm-code-editor :is(.tok-typeName, .tok-className, .tok-namespace) { color: var(--syn-type); }
.sm-code-editor .tok-invalid { color: var(--syn-invalid); }
.sm-code-editor .tok-heading, .sm-code-editor .tok-strong { font-weight: 600; }
.sm-code-editor .tok-emphasis { font-style: italic; }
.sm-code-editor .cm-cursor { border-left-color: var(--text); }
.sm-code-editor .cm-selectionBackground, .sm-code-editor .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; }
.sm-code-editor .cm-matchingBracket { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.sm-code-editor .cm-selectionMatch { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sm-code-editor .cm-content { caret-color: var(--text); }

/* A heading the title band shows as the slide's title: in the editor, an outline to select it by. */
.sm-el.sm-in-band > * { visibility: hidden; }
.sm-el.sm-in-band { outline: 3px dashed rgba(37, 99, 235, 0.55); outline-offset: -3px; }

/* Slide transition "Fade" (presenting, audience window, share links; not between steps). */
.sm-present-frame.sm-fade { animation: sm-fade-in 0.3s ease-out; }
@keyframes sm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sm-present-frame.sm-fade { animation: none; } }

/* Source view: the presentation as text, over the stage and the inspector. */
.sm-source { grid-row: 2; grid-column: stage-start / inspector-end; z-index: 20; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: auto auto auto minmax(0, 1fr); background: var(--panel); }
.sm-source-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.sm-source-state { font-size: 12px; color: var(--muted); }
.sm-source-error { grid-column: 1; margin: 8px 16px 0; padding: 8px 10px; border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--text); border-radius: 6px; font-size: 13px; }
.sm-source-status { grid-column: 1; margin: 8px 16px 0; font-size: 13px; color: var(--muted); }
.sm-linklike { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; font-weight: 600; cursor: pointer; }
.sm-source-editor { grid-column: 1; grid-row: 4; min-height: 0; display: flex; flex-direction: column; padding: 8px 16px 16px; }
.sm-source-editor .sm-field { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.sm-source-editor .sm-code-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sm-source-editor .cm-editor { flex: 1; min-height: 0; }
.sm-source-editor .cm-scroller { max-height: none; min-height: 0; }
.sm-source-editor textarea { flex: 1; }
.sm-source-help { grid-column: 2; grid-row: 2 / -1; overflow: auto; padding: 12px 16px; border-left: 1px solid var(--border); }
.sm-source-help h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.sm-source-help ul { padding-left: 18px; }
.sm-source-help li { margin-bottom: 6px; }
/* Code is shown as typed: no `->` → arrow ligatures (after the `font:` shorthands above, which
   reset them). */
.sm-code-editor .cm-content, .sm-help-pre, .sm-help code, .sm-source-help code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* Narrow windows: the view buttons keep their icon, tooltip and accessible name, and drop the
   visible label, so the second row fits. */
@media (max-width: 1100px) {
  .sm-toolbar :is([data-action=overview], [data-action=source], [data-action=themes], [data-action=master]:not(.active)) > span { display: none; }
}
.sm-source-preview { margin-bottom: 4px; box-shadow: 0 0 0 1px var(--border-strong); }
@media (max-width: 1500px) { .sm-source { grid-template-columns: minmax(0, 1fr) 380px; } }

/* Syntax typed and shown in the chrome stays as typed: Inter draws "->" as an arrow otherwise.
   Set on the root, because fields take `font: inherit` (which resets ligatures to the parent's);
   slides keep their own typography. */
html { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.sm-slide { font-variant-ligatures: normal; font-feature-settings: normal; }
/* Text buttons in the panels (the toolbar's buttons have no border). */
.sm-button { border: 1px solid var(--border-strong); background: var(--field-bg); padding: 5px 10px; border-radius: 6px; }
.sm-help-details.sm-spaced { margin-bottom: 10px; }

/* Menus show each item on one line (there is room at the editor's width). */
.sm-menu-list { min-width: 260px; }
.sm-menu-list button, .sm-menu-check { white-space: nowrap; }
.sm-menu-choice { display: flex; flex-direction: column; padding: 4px 6px 2px; }
.sm-menu-choice-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 2px 4px 4px; }
.sm-hint-list { margin: 0 0 12px; padding-left: 18px; }
.sm-hint-list li { margin: 2px 0; }
.sm-console-what { font-size: 12px; color: var(--muted); }
/* The unsaved-changes dot doesn't move the toolbar: its room is kept. */
.sm-doc-title:not(:has(.sm-dirty))::after { content: " •"; visibility: hidden; }
.sm-menu-choice .sm-menu-check { color: var(--text); font-size: 13px; padding: 4px 6px; }
.sm-cell-empty { color: #94a3b8; font-style: italic; }
/* The QR code's caption keeps clear of the element's edge. */
.sm-qr { padding-bottom: 6px; box-sizing: border-box; }

/* Align, distribute and order: labelled buttons in a grid, each group captioned. */
.sm-buttons-caption { display: block; margin: 8px 0 3px; }
.sm-button-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sm-button-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-labelled { border: 1px solid var(--border-strong); background: var(--field-bg); font-size: 12px; padding: 4px 6px; gap: 4px; min-width: 0; }
.sm-button-grid .sm-labelled { justify-content: flex-start; }
.sm-labelled > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-buttons .sm-labelled.danger { color: var(--danger); }

/* Collapsible sections: the heading is the toggle; the chevron turns when collapsed. */
.sm-section-toggle { all: unset; display: flex; align-items: center; gap: 4px; width: 100%; cursor: pointer; border-radius: 4px; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
.sm-section-toggle:hover { color: var(--text); }
.sm-section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-section-toggle .sm-icon { width: 14px; height: 14px; transition: transform 0.12s; }
.sm-section.collapsed .sm-section-toggle .sm-icon { transform: rotate(-90deg); }
.sm-section.collapsed { padding-bottom: 2px; }
.sm-section.collapsed > .sm-section-body { display: none; }
.sm-panel-head { align-items: center; flex-wrap: wrap; row-gap: 6px; }
.sm-panel-head .sm-kind { min-width: 0; }
.sm-collapse-all { margin-left: auto; display: flex; gap: 4px; }
.sm-collapse-all .sm-labelled { padding: 2px 7px; font-weight: 400; }

/* ── Algorithm and sampling animations: controls in the deck theme's colours ──
   (the variables are set inline by slidemaker_core::algo::chrome_style) */
.sm-algo-controls button, .sm-sim-n select { color: var(--sm-algo-fg, inherit); background: var(--sm-algo-bg, #fff); border-color: var(--sm-algo-line, #cbd5e1); }
.sm-algo-count { color: var(--sm-algo-muted, #6b7280); }
/* Hover in the theme too (the editor's own hover colour is light: white text vanished on it). */
.sm-algo-controls button:hover:not(:disabled), .sm-sim-n button:hover:not(:disabled) { background: color-mix(in srgb, var(--sm-algo-fg, #1f2328) 14%, var(--sm-algo-bg, #fff)); }

/* "+" beside a thumbnail's master name: a new slide below this one (on hover, keyboard focus, or
   the current slide). */
.sm-thumb-under { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 20px; flex-wrap: wrap; }
/* A solution slide (kept from students until its day). */
.sm-thumb-solution { margin-left: 0; font-size: 10.5px; padding: 0 6px; background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; white-space: nowrap; }
:root[data-ui-theme=dark] .sm-thumb-solution { color: #fbbf24; }
.sm-console-next { flex: none; width: 100%; }
/* The slide after that, smaller, in the room under Next (audit 2026-10-22, C6/F7). */
/* The side column takes the current slide's row without making it taller (contain: size); the
   slide after that gets the height left, keeping its shape. */
.sm-console-side:has(.sm-console-after) { contain: size; overflow: hidden; }
.sm-console-next.sm-console-after { flex: 1 1 0; min-height: 0; width: auto; max-width: 62%; align-self: flex-start; opacity: 0.9; }

/* The insert buttons carry labels, kept compact, on one line; on a narrow window (below
   1640 px: with them, and "Back to the slides" in master mode, the row would wrap) they show their icon only (tooltip and accessible name stay). */
.sm-toolbar [data-insert], .sm-toolbar [data-action=insert-more], .sm-toolbar [data-action=fields] { padding: 4px 5px; gap: 4px; white-space: nowrap; }
@media (max-width: 1640px) {
  .sm-toolbar [data-insert] > span, .sm-toolbar .sm-history-btn > span { display: none; }
}
.sm-button-grid + .sm-row.sm-checks { margin-top: 8px; }

/* A file that didn't open: the line of its text at fault, as written. */
.sm-modal:has(.sm-open-failure-line) { max-width: min(720px, calc(100vw - 48px)); }
.sm-open-failure-line {
  margin: -6px 0 14px; padding: 8px 10px; overflow-x: auto; white-space: pre;
  font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace; background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px;
}
.sm-open-failure-line .sm-line-no { color: var(--muted); margin-right: 12px; user-select: none; }

/* Masters, clearer (2026-10-03). The master list: the name, then the slides using it. */
.sm-master-label { flex-direction: column; align-items: stretch; gap: 1px; }
.sm-master-used { white-space: normal; }
/* Under each slide thumbnail: its master (a button: edit it). */
.sm-thumb-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sm-thumb-master { font-size: 11px; color: var(--muted); padding: 1px 5px 1px 3px; gap: 3px; border-radius: 4px; max-width: calc(100% - 64px); min-width: 0; }
.sm-thumb-master .sm-icon { width: 12px; height: 12px; }
.sm-thumb-master span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-thumb-master:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.sm-thumb-master.none { padding-left: 5px; font-style: italic; }
/* New slide: the default master, or another. */
.sm-new-slide { display: flex; flex-direction: column; gap: 6px; }
.sm-add-slide-master { color: var(--muted); font-size: 12px; }
.sm-new-slide-masters { margin-left: 22px; }
.sm-new-slide-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sm-new-slide-choices .sm-button { font-size: 12px; padding: 3px 8px; }
/* Master mode: which master, the slides under it, the way back. */
.sm-master-banner {
  position: absolute; z-index: 5; top: 10px; left: 16px; right: 16px; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px;
}
.sm-master-banner > .sm-icon { color: var(--accent); flex: none; }
.sm-master-banner .sm-button { flex: none; white-space: nowrap; }
.sm-edit-master { margin: 2px 0 6px; gap: 6px; }
.sm-edit-master .sm-icon { width: 16px; height: 16px; }
/* Overview: each card's master; Master highlights one master's slides. */
.sm-overview-master { margin-left: auto; flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-overview-card.dimmed { opacity: 0.25; }
.sm-overview-card.dimmed:hover { opacity: 0.6; }
.sm-overview-bar .sm-segmented button { font-size: 12px; }

/* The banner stays on one line (its room is reserved above the slide); the full text is its
   tooltip. */
.sm-master-banner > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Segmented choices that may be many (masters): they wrap rather than being cut. */
.sm-segmented.sm-wrap { flex-wrap: wrap; }

/* Your details (PDF document information): the dialog, and the line in the Export PDF dialog. */
.sm-modal:has(.sm-details-dialog) { width: min(600px, calc(100vw - 48px)); max-width: none; }
.sm-details-dialog { display: flex; flex-direction: column; gap: 10px; }
.sm-details-dialog .sm-field input { width: 100%; }
.sm-details-line { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; font-size: 13px; }
.sm-details-line > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* A warning in a panel (e.g. an unknown code language), readable in both editor themes. */
.sm-warn-text { color: var(--text); background: var(--warn-bg); border-left: 3px solid var(--warn-line); padding: 4px 8px; border-radius: 4px; }

/* While presenting: "Press Esc again to end", and a slide number being typed. On the slide,
   in the presenter's colours, legible on any slide. */
.sm-escape-hint, .sm-goto-hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30;
  background: rgba(15, 17, 20, 0.88); color: #fff; font-size: 18px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.sm-console .sm-escape-hint, .sm-console .sm-goto-hint { position: fixed; bottom: 70px; }
.sm-live-hint {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 30; max-width: min(760px, 90%);
  background: #3b2a06; color: #fde68a; border: 1px solid #a16207; font-size: 17px; font-weight: 600; line-height: 1.35;
  padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.sm-console-head:has(.sm-console-warning) { flex-wrap: wrap; }
.sm-console-warning { flex-basis: 100%; margin: 0; padding: 6px 12px; background: #3b1f22; color: #fecaca; border: 1px solid #7f1d1d; border-radius: 6px; font-size: 13px; }
.sm-console-live { font-size: 13px; color: #86efac; margin-left: 12px; }
/* Pacing: the time left (green, amber when behind, red when late or over), the pace, this slide. */
.sm-console-remaining { font: 600 20px/1 "JetBrains Mono", ui-monospace, monospace; color: #86efac; font-variant-numeric: tabular-nums; }
.sm-console-remaining.warn { color: #fbbf24; }
.sm-console-remaining.late { color: #f87171; }
.sm-console-pace { color: #cbd5e1; font-size: 13px; }
.sm-console-on-slide { font: 500 15px/1 "JetBrains Mono", ui-monospace, monospace; color: #e5e7eb; font-variant-numeric: tabular-nums; }
.sm-console-head [data-action=rehearse].active { color: #fca5a5; border-color: #f87171; }
.sm-console-live.stale { color: #fbbf24; }
/* The overview card's "Present from here": shown on hover, on the selected card, and when focused. */
.sm-overview-present { display: none; margin-left: auto; font-size: 12px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); }
.sm-overview-card:hover .sm-overview-present, .sm-overview-card.selected .sm-overview-present, .sm-overview-present:focus-visible { display: inline-flex; }
.sm-overview-present .sm-icon { width: 13px; height: 13px; }
/* The selection's commands under the inspector's header; the slide's right-click menu. */
/* Three even columns: Duplicate, Copy, Cut / Lock, Group, Ungroup / Delete, Copy style, Paste style. */
/* As many columns as fit whole labels ("Paste style" was cut at three in a 300 px panel: audit
   2026-10-22, C1). */
.sm-selection-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.sm-selection-actions button { font-size: 12px; padding: 3px 7px; justify-content: flex-start; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-selection-actions button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.sm-context-menu { position: fixed; top: auto; left: auto; z-index: 61; min-width: 250px; }
.sm-context-backdrop { z-index: 60; }
/* An element of the master seen on a slide: a different outline under the pointer (a double-click
   edits the master, which changes every slide using it). */
.sm-stage:not(.master-mode) [data-layer=master] .sm-el:hover { outline: 2px dotted #8b5cf6; outline-offset: 1px; cursor: alias; }
/* Text overflowing its box (editor's canvas only): a red edge along the bottom. */
.sm-canvas .sm-text.sm-overflow { box-shadow: inset 0 -4px 0 #dc2626; }
.sm-multi-note { margin: 0; padding: 10px 12px 2px; }

/* Ctrl+G: go to a slide by number or words. */
/* Find and replace (audit 2026-10-22, F1). */
.sm-find-panel {
  grid-area: find; min-height: 0; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border);
}
.sm-find-panel .sm-panel-head { align-items: center; }
.sm-find-panel .sm-kind { flex: 1; }
.sm-find-toggle[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
.sm-find-close { padding: 0 8px; font-size: 18px; line-height: 1.4; }
.sm-find-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sm-find-body .sm-field { margin: 0; }
.sm-find-body .sm-field input { width: 100%; }
.sm-find-body .sm-warn-text { margin: 0; }
.sm-find-nav { display: flex; align-items: center; gap: 4px; }
.sm-find-count { flex: 1; color: var(--muted); }
.sm-find-nav button { padding: 2px 6px; }
.sm-find-replace-actions { display: flex; gap: 6px; }
.sm-find-replace-actions button { flex: 1; justify-content: center; }
.sm-find-scope, .sm-find-options { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sm-find-list { list-style: none; margin: 0; padding: 4px; flex: 1; min-height: 0; overflow-y: auto; }
.sm-find-list:empty { display: none; }
.sm-find-row button {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: 100%;
  padding: 4px 8px; text-align: left; font-weight: normal; border: 1px solid transparent; border-radius: 6px; background: none;
}
.sm-find-row button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.sm-find-row.current button { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sm-find-where { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-find-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sm-find-context mark { background: color-mix(in srgb, #facc15 55%, transparent); color: inherit; border-radius: 2px; }
.sm-find-more { margin: 0; padding: 6px 14px; color: var(--muted); font-size: 12px; }
.sm-modal:has(.sm-goto-dialog) { max-width: none; }
.sm-goto-dialog { width: min(560px, calc(100vw - 96px)); }
.sm-goto-dialog .sm-field input { width: 100%; }
.sm-goto-list { list-style: none; margin: 8px 0 0; padding: 4px; max-height: min(420px, 55vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.sm-goto-list li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.sm-goto-list li.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sm-goto-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-goto-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-goto-section { color: var(--muted); font-size: 12px; }
.sm-goto-hidden { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.sm-goto-list li.hidden-slide .sm-goto-label { color: var(--muted); }

/* The slides grid while presenting (G): over the presentation, or over the console (the speaker's
   alone). Dark like the console, whatever the editor's theme. */
.sm-slide-grid {
  position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: #0c0e12;
  color: #e5e7eb; outline: none; font: 14px/1.4 "Inter", system-ui, sans-serif; cursor: default;
}
.sm-slide-grid-card:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.sm-slide-grid-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid #2a2f3a; }
.sm-slide-grid-head strong { font-size: 16px; }
.sm-slide-grid-head span { color: #9ca3af; flex: 1; }
.sm-slide-grid-head button { background: #1f2430; color: #e5e7eb; border: 1px solid #3a4150; border-radius: 6px; padding: 4px 12px; }
.sm-slide-grid-cards { display: grid; justify-content: center; align-content: start; padding: 20px 24px 40px; overflow-y: auto; min-height: 0; }
.sm-slide-grid-section { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9ca3af; }
.sm-slide-grid-card { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.sm-slide-grid-card.active { border-color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
.sm-slide-grid-card.current .sm-slide-grid-n { background: #60a5fa; color: #0b1220; }
.sm-slide-grid-frame { position: relative; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.sm-slide-grid-frame .sm-scaler { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.sm-slide-grid-caption { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sm-slide-grid-n { flex: none; min-width: 1.8em; text-align: center; border-radius: 4px; padding: 0 4px; font-variant-numeric: tabular-nums; color: #9ca3af; }
.sm-slide-grid-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pointing while presenting (L laser, S spotlight, Z magnifier, D pen): over the slide, in slide px. */
/* The slide's own box clips the magnified slide inside it. */
.sm-pointer-clip { position: relative; overflow: hidden; }
.sm-pointer-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.sm-pointer-shade { position: absolute; inset: 0; }
.sm-pointer-ink { position: absolute; inset: 0; overflow: visible; }
.sm-pointer-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ff3b3b 0 45%, rgba(255, 40, 40, 0.55) 60%, rgba(255, 40, 40, 0) 72%); box-shadow: 0 0 18px 6px rgba(255, 30, 30, 0.45); }
.sm-pointer-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: 14px; }
.sm-pointer-tools button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 12px; }
.sm-pointer-tools button.active { color: #fca5a5; border-color: #f87171; }
.sm-pointer-tools kbd { font: 500 10px/1.4 inherit; padding: 0 4px; border: 1px solid #4b5563; border-radius: 4px; color: #9ca3af; }

/* An export choice that doesn't apply (notes pages in a students' version). */
.sm-choice.off { opacity: 0.45; }

/* A terminal session: a dark (or light) window, the prompt in the accent colour, the latest lines
   at the bottom when they don't all fit. */
.sm-term { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #0f172a; color: #e2e8f0; font-family: "JetBrains Mono", ui-monospace, monospace; line-height: 1.4; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); }
.sm-term.light { background: #f8fafc; color: #1f2937; border: 1px solid #d1d5db; }
.sm-term-bar { flex: none; display: flex; align-items: center; gap: 0.8em; padding: 0.35em 0.8em; background: #1e293b; color: #94a3b8; font-size: 0.8em; }
.sm-term.light .sm-term-bar { background: #e5e7eb; color: #4b5563; }
.sm-term-dots { display: inline-flex; gap: 0.4em; }
.sm-term-dots i { display: block; width: 0.75em; height: 0.75em; border-radius: 50%; background: #ef4444; }
.sm-term-dots i:nth-child(2) { background: #f59e0b; }
.sm-term-dots i:nth-child(3) { background: #22c55e; }
/* From the top while it fits; past the bottom, the latest lines stay in view (as in a terminal):
   the auto margin takes the room left over, and when there is none the lines end at the bottom. */
.sm-term-screen { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.5em 0.9em; }
.sm-term-lines { margin-bottom: auto; }
.sm-term-line { white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.sm-term-cmd { font-weight: 600; }
.sm-term-out { opacity: 0.85; }
.sm-term-cursor { animation: sm-blink 1s steps(1) infinite; }
@keyframes sm-blink { 50% { opacity: 0; } }

/* Check slides: the room, then what was found, slide by slide. */
.sm-modal:has(.sm-check-dialog) { max-width: none; }
.sm-check-dialog { width: min(820px, calc(100vw - 96px)); }
.sm-check-room { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.sm-check-summary { font-weight: 600; margin: 4px 0 8px; }
.sm-check-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: min(420px, 50vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.sm-check-list:empty { display: none; }
.sm-check-item { display: grid; grid-template-columns: 9em 8.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sm-check-item:last-child { border-bottom: 0; }
.sm-check-where { display: flex; flex-direction: column; font-weight: 600; }
.sm-check-where small { font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-check-kind { font-size: 12px; padding: 1px 8px; border-radius: 999px; text-align: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.sm-check-item[data-kind=contrast] .sm-check-kind, .sm-check-item[data-kind=small] .sm-check-kind { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
.sm-check-item[data-kind=overimage] .sm-check-kind { background: var(--tag-bg, color-mix(in srgb, var(--text) 8%, transparent)); color: var(--muted); }
:root[data-ui-theme=dark] .sm-check-item[data-kind=contrast] .sm-check-kind, :root[data-ui-theme=dark] .sm-check-item[data-kind=small] .sm-check-kind { color: #fca5a5; }
@media (max-width: 900px) { .sm-check-room { grid-template-columns: 1fr; } }

/* Saliency (an estimate): the heatmap and numbered fixations over the slide, and its panel. */
.sm-saliency-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sm-saliency-heat { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; mix-blend-mode: multiply; }
.sm-saliency-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-saliency-fix { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #111827; color: #fff; border: 2px solid #fff; font: 700 12px/18px "Inter", system-ui, sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.sm-saliency-panel { position: absolute; top: 12px; right: 12px; z-index: 15; width: 300px; max-width: calc(100% - 24px); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); font-size: 13px; }
.sm-saliency-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sm-saliency-panel .sm-help { margin: 0 0 8px; }
.sm-saliency-panel input[type=range] { width: 100%; }
.sm-saliency-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sm-file-button { position: relative; display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); cursor: pointer; }
.sm-file-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sm-file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The gaze overlay: transparent, over a picture; its time slider at the bottom. */
.sm-gaze { position: relative; width: 100%; height: 100%; }
.sm-gaze-heat, .sm-gaze-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-gaze-heat { mix-blend-mode: multiply; }
.sm-gaze-marks svg { display: block; overflow: visible; }
/* Over a 360° panorama: drawn through its view, which a drag turns while presenting (the
   drag goes through to it). */
.sm-gaze-sphere .sm-gaze-marks svg { overflow: hidden; }
:is(.sm-present, .sm-audience, .sm-viewer) .sm-layer .sm-el:has(.sm-gaze-sphere) { pointer-events: none; }
.sm-gaze-time { position: absolute; left: 2%; right: 2%; bottom: 2%; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font: 24px/1 "Inter", system-ui, sans-serif; pointer-events: auto; }
.sm-gaze-time input[type=range] { flex: 1; }
.sm-gaze-time button { font-size: 22px; min-width: 2em; }
.sm-gaze-clock { min-width: 4em; text-align: right; font-variant-numeric: tabular-nums; color: #374151; }

/* A share link's QR code, large (audit P12): white whatever the editor's theme (scanners need it). */
.sm-qr-panel {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; background: #fff; color: #111827; color-scheme: light;
}
.sm-qr-big svg { display: block; width: min(68vh, 80vw); height: auto; }
.sm-qr-url { margin: 0; max-width: 90vw; text-align: center; word-break: break-all; font: 600 clamp(16px, 2.6vw, 30px)/1.3 system-ui, sans-serif; }
.sm-console-followers { font-variant-numeric: tabular-nums; }
/* The export dialog's sheet options and slide range (audit P8). */
.sm-sheet-options, .sm-export-range { gap: 8px 20px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 12px; }
.sm-export-range .sm-field { margin-bottom: 0; }
/* The export dialog: wide enough for its three-way choice on one line. */
.sm-modal:has(.sm-export-range) { width: min(620px, calc(100vw - 48px)); max-width: none; }
/* Ready to present offline? (audit P9) */
.sm-modal:has(.sm-offline-dialog) { max-width: none; }
.sm-offline-dialog { width: min(900px, calc(100vw - 96px)); }
.sm-offline-dialog .sm-check-item { grid-template-columns: 6em 9em minmax(0, 1fr) auto; }
.sm-offline-url { display: block; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sm-offline-actions { display: flex; gap: 6px; align-items: center; }
.sm-offline-dialog .sm-check-detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Recording the talk (audit P10). */
.sm-rec-badge { color: #ef4444; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-present .sm-rec-badge { position: absolute; top: 10px; right: 14px; z-index: 6; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); font: 600 13px/1.4 system-ui, sans-serif; }
.sm-recording-audio { width: 100%; margin: 4px 0 6px; }
/* The phone as a remote (audit P11): the QR code stays black on white (scanners need it). */
.sm-modal:has(.sm-phone-dialog) { max-width: none; }
.sm-phone-dialog { width: min(640px, calc(100vw - 64px)); }
.sm-phone-pair { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.sm-phone-qr { background: #fff; padding: 12px; border-radius: 8px; line-height: 0; }
.sm-phone-qr svg { display: block; width: 220px; height: 220px; }
.sm-modal .sm-phone-way p { margin: 0 0 8px; }
.sm-phone-way { flex: 1 1 240px; min-width: 0; }
.sm-phone-page { word-break: break-all; }
.sm-phone-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.sm-phone-code-row button { border: 1px solid var(--border); }
.sm-phone-code { font: 700 34px/1.1 ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.sm-modal .sm-phone-status { font-weight: 600; margin-bottom: 8px; }
/* A dialog opened from the presenter console (Phone), and the notices (Record), show over it. */
.sm-app:has(> .sm-console) .sm-modal-backdrop { z-index: 210; }
.sm-app:has(> .sm-console) .sm-toasts { z-index: 220; }
/* A live demo as a playground (audit T5): the code beside the result (above it when the box is
   taller than wide), each part in its pane; dark, as code cells. */
.sm-playground { width: 100%; height: 100%; container-type: size; }
.sm-playground-in { display: flex; width: 100%; height: 100%; gap: 0.5em; }
@container (aspect-ratio < 1) { .sm-playground-in { flex-direction: column; } }
.sm-playground-code { flex: 1.25 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #0f172a; color: #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* The result as a browser shows a page: white, whatever is behind the box. */
.sm-playground-result { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2); }
.sm-playground-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.7em; color: #94a3b8; font: 0.75em/1.2 "Inter", system-ui, sans-serif; white-space: nowrap; }
.sm-playground-bar > * { flex: none; }
.sm-playground-bar > .sm-spacer { flex: 1 1 0; min-width: 0; }
.sm-playground-title { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sm-playground-bar > .sm-playground-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #94a3b8; }
.sm-playground-reset { background: #334155; }
.sm-playground-reset:disabled { opacity: 0.5; cursor: default; }
.sm-playground-pane { flex: 1 1 0; min-height: 2.6em; display: flex; flex-direction: column; border-top: 1px solid #1e293b; }
.sm-playground-label { padding: 0.25em 0.7em 0; color: #93c5fd; font: 600 0.7em/1.2 "Inter", system-ui, sans-serif; }
.sm-playground-text { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.15em 0.7em 0.4em; }
.sm-playground-text.live { cursor: text; }
.sm-playground-text .sm-code { margin: 0; color: #e5e7eb; white-space: pre; font: inherit; line-height: 1.4; }
.sm-playground-editor { width: 100%; height: 100%; min-height: 3em; box-sizing: border-box; font: inherit; line-height: 1.4; color: #e5e7eb; background: #111827; border: 1px solid #334155; border-radius: 0.3em; padding: 0.2em 0.3em; resize: none; outline: none; tab-size: 2; white-space: pre; }
.sm-playground-editor:focus-visible { border-color: #60a5fa; }
/* Lines and arrows (audit T6): only the stroke takes the pointer, so what lies under the box
   stays reachable. In the editor, a selected line shows its path and a handle on each end. */
.sm-layer .sm-el[data-kind=line] { pointer-events: none; }
.sm-line { position: absolute; left: 0; top: 0; overflow: visible; display: block; pointer-events: none; }
.sm-layer .sm-line .sm-line-hit { stroke: transparent; pointer-events: stroke; }
.sm-line-sel { position: absolute; left: 0; top: 0; pointer-events: none; }
.sm-line-sel-path { position: absolute; height: 0; border-top: 1px dashed var(--accent); transform-origin: 0 0; }
/* (Handles centre themselves on their point by their margin.) */
.sm-line-sel .sm-line-end, .sm-sel .sm-tail-handle { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; pointer-events: auto; cursor: crosshair; }
/* Hovered, a line shows a soft band along it (its box would mean nothing). */
.sm-stage .sm-layer .sm-el[data-kind=line]:hover { outline: none; }
.sm-stage:not(.master-mode) [data-layer=slide] .sm-el[data-kind=line]:hover .sm-line-hit,
.sm-stage.master-mode [data-layer=master] .sm-el[data-kind=line]:hover .sm-line-hit { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
/* A callout (audit T6): its box and tail, one outline behind the content; the tail takes the
   pointer as the box does. In the editor, a handle on the tail's tip. */
.sm-callout { position: absolute; overflow: visible; z-index: -1; pointer-events: none; }
.sm-layer .sm-callout path { pointer-events: visiblePainted; }
/* A cropped picture (audit T6): the window over the kept part clips the whole picture. */
.sm-crop { position: absolute; overflow: hidden; }
.sm-crop-img { position: absolute; max-width: none; max-height: none; display: block; user-select: none; }
/* Device frames (audit T6): the content on the device's screen, the rest drawn around it. */
.sm-device { position: absolute; inset: 0; overflow: hidden; }
.sm-device-screen { position: absolute; overflow: hidden; }
.sm-device[data-device=phone], .sm-device[data-device=tablet] { background: #111827; box-shadow: inset 0 0 0 2px #374151; }
.sm-device[data-device=phone] .sm-device-screen, .sm-device[data-device=tablet] .sm-device-screen { border-radius: 10px; background: #000; }
.sm-device-camera { position: absolute; border-radius: 50%; background: #1f2937; box-shadow: inset 0 0 0 2px #4b5563; }
.sm-device[data-device=browser] { background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; }
.sm-device-bar { position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; gap: 0.7em; padding: 0 0.8em; box-sizing: border-box; background: #f1f3f5; border-bottom: 1px solid #d1d5db; color: #374151; font-family: system-ui, sans-serif; line-height: 1; }
.sm-device-dots { display: flex; gap: 0.35em; flex: none; }
.sm-device-dots i { display: block; width: 0.62em; height: 0.62em; border-radius: 50%; background: #ef4444; }
.sm-device-dots i:nth-child(2) { background: #f59e0b; }
.sm-device-dots i:nth-child(3) { background: #22c55e; }
.sm-device-url { flex: 1; min-width: 0; padding: 0.35em 0.9em; border-radius: 1em; background: #fff; border: 1px solid #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82em; }
.sm-device-lid { position: absolute; top: 0; background: #1f2937; box-shadow: inset 0 0 0 2px #374151; }
.sm-device-base { position: absolute; left: 0; right: 0; background: linear-gradient(#e5e7eb, #9ca3af); }
.sm-device-notch { position: absolute; background: #9ca3af; border-radius: 0 0 6px 6px; }
.sm-device[data-device=laptop] .sm-device-screen { background: #000; }
/* Polls (audit T7): the question, its options, then the results (bars, a histogram, a cloud). */
.sm-poll { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 0.5em; overflow: hidden; box-sizing: border-box; }
.sm-poll-question { margin: 0; font-weight: 700; font-size: 1.25em; line-height: 1.2; }
.sm-poll-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; }
.sm-poll-options li { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.6em; border: 2px solid color-mix(in srgb, var(--poll-accent) 45%, transparent); border-radius: 0.4em; }
.sm-poll-letter { display: inline-grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--poll-accent); color: #fff; font-weight: 700; font-size: 0.85em; }
.sm-poll-hint, .sm-poll-none, .sm-poll-total { margin: 0; opacity: 0.7; font-size: 0.8em; }
.sm-poll-bars { display: flex; flex-direction: column; gap: 0.45em; }
.sm-poll-bar { display: grid; grid-template-columns: auto fit-content(40%) 1fr auto; align-items: center; gap: 0.6em; }
.sm-poll-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-poll-track { height: 1.1em; border-radius: 0.3em; background: color-mix(in srgb, var(--poll-accent) 12%, transparent); overflow: hidden; }
.sm-poll-fill { display: block; height: 100%; background: var(--poll-accent); transition: width 0.4s; }
.sm-poll-count { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; white-space: nowrap; }
.sm-poll-hist { flex: 1; min-height: 3em; display: flex; align-items: flex-end; gap: 0.25em; border-bottom: 2px solid currentColor; }
.sm-poll-col { flex: 1; min-height: 2px; background: var(--poll-accent); border-radius: 0.2em 0.2em 0 0; transition: height 0.4s; }
.sm-poll-axis { display: flex; justify-content: space-between; font-size: 0.8em; font-variant-numeric: tabular-nums; }
.sm-poll-cloud { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0.2em 0.7em; }
.sm-poll-word { color: var(--poll-accent); font-weight: 700; line-height: 1.1; }
.sm-poll-word:nth-child(3n+2) { opacity: 0.8; }
/* A click test (audit T7): an outline in the editor; the taps' heatmap and dots at step 2; on the
   share link, while answering, this phone's tap. */
.sm-clicks { position: relative; width: 100%; height: 100%; }
.sm-clicks.edit { outline: 3px dashed color-mix(in srgb, #8b5cf6 70%, transparent); outline-offset: -3px; }
.sm-clicks.answering { cursor: crosshair; }
.sm-clicks-question { position: absolute; left: 0; top: 0; margin: 0; padding: 0.3em 0.7em; font: 600 28px/1.3 "Inter", system-ui, sans-serif; color: #fff; background: rgba(17, 24, 39, 0.78); border-radius: 0 0 10px 0; }
.sm-clicks-heat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.75; }
.sm-clicks-dot, .sm-clicks-mine { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; }
.sm-clicks-dot { background: #fff; box-shadow: 0 0 0 3px #111827; }
/* (Large on the slide: a phone shows the whole slide small.) */
.sm-clicks-mine { width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 10px solid #f59e0b; box-shadow: 0 0 0 4px #111827; box-sizing: border-box; }
.sm-clicks-count { position: absolute; right: 0; bottom: 0; padding: 0.2em 0.6em; font: 600 26px/1.3 "Inter", system-ui, sans-serif; color: #fff; background: rgba(17, 24, 39, 0.78); border-radius: 10px 0 0 0; }
.sm-clicks-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.3em 0.7em; font: 600 30px/1.3 "Inter", system-ui, sans-serif; color: #5b21b6; background: rgba(255, 255, 255, 0.85); border-radius: 10px; white-space: nowrap; }
/* Insert slides from another presentation (audit T10). */
.sm-modal:has(.sm-insert-from) { max-width: none; }
.sm-insert-from { width: min(640px, calc(100vw - 64px)); }
.sm-insert-from-or { margin-top: 16px; }
.sm-insert-from-decks { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.sm-insert-from-decks button { width: 100%; text-align: left; border: 1px solid var(--border); }
.sm-insert-from-slides { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.sm-insert-from-slides li { padding: 2px 8px; }
.sm-insert-from-slides li + li { border-top: 1px solid var(--border); }
.sm-insert-from-section { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sm-insert-from-n { min-width: 2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-modal p.sm-insert-from-name { margin-bottom: 8px; font-weight: 600; }
/* Imported from Beamer (audit T10): the pictures to embed, what was approximated. */
.sm-modal:has(.sm-beamer-report) { max-width: none; }
.sm-beamer-report { width: min(640px, calc(100vw - 64px)); }
.sm-beamer-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.sm-beamer-pictures, .sm-beamer-notes { margin: 4px 0 8px; padding-left: 20px; max-height: 28vh; overflow-y: auto; }
.sm-beamer-pictures li, .sm-beamer-notes li { margin: 2px 0; }
.sm-beamer-pictures code { background: var(--code-bg); padding: 0 4px; border-radius: 4px; }
.sm-beamer-section .sm-row { align-items: flex-start; gap: 12px; }
.sm-beamer-section .sm-row .sm-help { flex: 1; margin: 0; }
.sm-beamer-section .sm-row button { flex: none; }
.sm-beamer-section .sm-ok { margin: 0; font-weight: 600; }
/* A PDF picture's page (audit F21): the number, then how many there are, on its line. */
.sm-pdf-page { align-items: flex-end; flex-wrap: nowrap; margin-bottom: 8px; }
.sm-pdf-page .sm-field { flex: 0 0 8em; margin-bottom: 0; }
.sm-pdf-page .sm-inline { padding-bottom: 7px; }

/* Tools → Messages */
.sm-modal:has(.sm-messages-dialog) { max-width: none; }
.sm-messages-dialog { width: min(720px, calc(100vw - 96px)); }
.sm-messages { list-style: none; margin: 0 0 14px; padding: 0; max-height: min(480px, 60vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.sm-message { display: grid; grid-template-columns: 5.5em 5em minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sm-message:last-child { border-bottom: 0; }
.sm-message-at { color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-message-level { font-weight: 600; }
.sm-message { border-left: 3px solid transparent; }
.sm-message.error { border-left-color: var(--danger); }
.sm-message.warning { border-left-color: var(--warn-line); }
.sm-start-forget { padding: 0 8px; font-size: 16px; line-height: 1.5; }

/* Answering on the slide itself, on a share link (the user, 2026-11-02): the options are the
   buttons; a number or a word opens a field of normal size above the page. */
.sm-poll-options li:has(> .sm-poll-choice) { padding: 0; border: 0; }
.sm-poll-choice { display: flex; align-items: center; gap: 0.6em; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: 0.35em 0.6em; background: color-mix(in srgb, var(--poll-accent) 6%, transparent); border: 2px solid color-mix(in srgb, var(--poll-accent) 45%, transparent); border-radius: 0.4em; }
.sm-poll-choice:hover { background: color-mix(in srgb, var(--poll-accent) 14%, transparent); }
.sm-poll-choice[aria-pressed="true"] { background: var(--poll-accent); border-color: var(--poll-accent); color: #fff; }
.sm-poll-choice[aria-pressed="true"] .sm-poll-letter { background: #fff; color: var(--poll-accent); }
.sm-poll-open { align-self: flex-start; font: inherit; color: inherit; cursor: pointer; padding: 0.5em 0.9em; min-width: 50%; text-align: left;
  background: color-mix(in srgb, var(--poll-accent) 8%, transparent); border: 2px dashed var(--poll-accent); border-radius: 0.4em; }
.sm-poll-problem { margin: 0; color: #b91c1c; font-size: 0.8em; }
.sm-poll:has(.sm-poll-so-far) { position: relative; }
.sm-poll-so-far { position: absolute; right: 0; bottom: 0; margin: 0; padding: 0.15em 0.6em; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--poll-accent); border-radius: 0.5em 0 0 0; }
.sm-poll-dialog { border: 0; border-radius: 12px; padding: 16px; width: min(92vw, 420px); background: #1b1f27; color: #e5e7eb; }
.sm-poll-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.sm-poll-dialog form { display: flex; flex-direction: column; gap: 10px; }
.sm-poll-dialog label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.sm-poll-dialog input { font-size: 16px; padding: 10px; color: #f3f4f6; background: #262c37; border: 1px solid #3b4352; border-radius: 8px; }
.sm-clicks-prompt { position: absolute; left: 50%; top: 0.6em; transform: translateX(-50%); padding: 0.3em 0.8em; font: 600 26px/1.3 "Inter", system-ui, sans-serif;
  color: #fff; background: rgba(17, 24, 39, 0.78); border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* Any colour: the system's picker, from the colour's square or the rainbow at the end of the
   swatches (the user, 2026-11-02). */
.sm-swatch-any { position: relative; overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444); }
.sm-swatch-any input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Alignment as icons (the user, 2026-11-02): text alignment as a segmented row; the align
   buttons in one row, a gap between the horizontal and the vertical ones. */
.sm-segmented.sm-icons { display: inline-flex; width: auto; }
.sm-segmented.sm-icons button { padding: 3px 7px; display: grid; place-items: center; }
.sm-icon-row { display: flex; gap: 4px; flex-wrap: wrap; }
.sm-icon-btn { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 1px solid var(--border-strong); background: var(--field-bg); border-radius: 6px; }
.sm-icon-btn:hover { border-color: var(--accent); }
.sm-icon-row .sm-icon-btn:nth-child(4) { margin-left: 10px; }

/* Keep proportions or not: a chain beside the bottom-right corner of the selected element. */
.sm-ratio-toggle { position: absolute; left: calc(100% + 10px); top: calc(100% + 10px); width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  pointer-events: auto; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel-bg, #fff); color: var(--muted); }
.sm-ratio-toggle.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.sm-ratio-toggle .sm-icon { width: 16px; height: 16px; }