/* theme.css: the course website's colours, type, shape and motion, and its shared parts.
   Loaded first by every course page. Dark is the default; light is html[data-theme="paper"].
   Nothing outside this file names a colour (the video frame keeps its own locked block in player.css).
   The page files (styles.css, lab-discovery.css, case.css, tutorials/gallery.css) keep layout only:
   where a part looks different between themes, the difference is a role token or a rule in this file. */

/* 1. The palette: every colour the site may use. */
:root {
  --c-ink: #07030f;   --c-night: #12082a; --c-plum: #26174f; --c-lilac: #cdbfe3; --c-cream: #fff6e5;
  --c-paper: #f4e7cc; --c-dusk: #574a75;
  --c-lime: #c6ff3d;  --c-sky: #3df0ff;   --c-sky-deep: #005f86;
  --c-red: #ff5d5d;   --c-red-deep: #b42318;
}

/* 2. Roles, dark (the default). */
:root {
  color-scheme: dark;
  --bg: var(--c-night);
  --surface: var(--c-plum);
  --text: var(--c-cream);
  --text-dim: var(--c-lilac);
  --edge: var(--c-ink);              /* sticker edges, every hard shadow, text on a bright fill */
  --control-edge: var(--c-lilac);    /* the edge of anything typed in or tapped that is not a bright fill (3:1) */
  --rule: var(--c-plum);             /* header and footer rules, the screen bezel: ink would vanish on night */
  --divider: color-mix(in srgb, var(--text-dim) 42%, transparent);
  --accent: var(--c-lime);  --on-accent: var(--c-ink);
  --tile: var(--c-lime);
  --picked: var(--c-cream); --on-picked: var(--c-ink);
  --link-line: var(--c-cream);       /* the text's colour: lime stays for the one action and the highlight word */
  --focus: var(--c-sky);
  --danger: var(--c-red);   --on-danger: var(--c-ink);
  --screen: var(--c-ink);            /* the well behind app captures and posters */
  --scrim: color-mix(in srgb, var(--c-ink) 72%, transparent);
  --glow: color-mix(in srgb, var(--c-sky) 7%, transparent);
  --hl-fg: var(--c-lime); --hl-bg: transparent; --hl-edge: transparent; --hl-shadow: var(--c-ink);
  /* the shared app icon family (ui-icons.css) reads these: one colour, the text's */
  --ui-icon-accent: currentColor; --ui-icon-warm: currentColor; --ui-icon-pop: currentColor;
  /* shape */
  --ol: 3px; --ol-thin: 2px; --pop: 4px; --pop-sm: 3px; --pop-lg: 7px;
  --r: 14px; --r-lg: 24px; --pill: 999px;
  /* type */
  --display: 'Bricolage Grotesque', ui-rounded, 'Avenir Next', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* motion */
  --t-press: 120ms; --t-lift: 140ms; --t-open: 160ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* names the shared planner files read (client.css: --ink, --canvas, --panel). For them only:
     no course stylesheet may use these three. */
  --ink: var(--text); --canvas: var(--bg); --panel: var(--surface);
}

/* 3. Roles, light. */
html[data-theme="paper"] {
  color-scheme: light;
  --bg: var(--c-paper);
  --surface: var(--c-cream);
  --text: var(--c-ink);
  --text-dim: var(--c-dusk);
  --control-edge: var(--c-ink);
  --rule: var(--c-ink);
  --picked: var(--c-ink);   --on-picked: var(--c-cream);
  --link-line: var(--c-ink);
  --focus: var(--c-sky-deep);
  --danger: var(--c-red-deep); --on-danger: var(--c-cream);
  --scrim: color-mix(in srgb, var(--c-night) 50%, transparent);
  --glow: transparent;
  --hl-fg: var(--c-ink); --hl-bg: var(--c-lime); --hl-edge: var(--c-ink); --hl-shadow: transparent;
}

/* 4. Night islands: things that are screens stay dark in the light theme. */
html[data-theme="paper"] :is(.night, .course-tool-picture, .gallery-poster, .snapshot-proof, .snapshot-proof-body,
  .explanation-shot, .snapshot-thumb, .course-constellation, .capture-source-card, .course-practice-picture, .course-live-module) {
  color-scheme: dark;
  --bg: var(--c-night); --surface: var(--c-plum); --text: var(--c-cream); --text-dim: var(--c-lilac);
  --control-edge: var(--c-lilac); --rule: var(--c-plum); --picked: var(--c-cream); --on-picked: var(--c-ink);
  --link-line: var(--c-cream); --focus: var(--c-sky); --danger: var(--c-red); --on-danger: var(--c-ink);
  color: var(--text);
}

/* 5. Print: the light roles, backgrounds left to the browser. */
@media print {
  :root, html[data-theme="paper"] { color-scheme: light; --bg: var(--c-cream); --surface: var(--c-cream); --text: var(--c-ink);
    --text-dim: var(--c-dusk); --control-edge: var(--c-ink); --rule: var(--c-ink); --link-line: var(--c-ink); }
}

/* 6. badges:start ... badges:end: written by platform/scripts/build-site-badges.mjs (section 7 below uses them). */
/* badges:start */
.lab-badge[data-badge="product"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4c8 6 11 15 9 27H15C13 19 16 10 24 4Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 25l-7 9 8-1ZM33 25l7 9-8-1Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 13a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 35c0 5 2 7 4 10 2-3 4-5 4-10' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="geo"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 15l12-4 16 4 12-4v26l-12 4-16-4-12 4Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 11v26M32 15v26' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 33c-6-7-9-11-9-16a9 9 0 0 1 18 0c0 5-3 9-9 16Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 14a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39 5l3-3M43 10h3' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="society"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M3 45c0-7 4-11 11-11s11 4 11 11Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 45c0-7 4-11 11-11s11 4 11 11Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 21a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 21a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 3h22a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4h-8l-3 4-3-4h-8a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 10h16' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="desk"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 26h40v5H4Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 31v11M40 31v11' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10h22v13H18Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 20v6' fill='none' stroke='%2307030f' stroke-width='9.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 20v6' fill='none' stroke='%23fff6e5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 14h10M24 18h6' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="cidx"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 37a20 20 0 0 1 40 0Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 21v4M11 37h4M37 37h-4M13 27l3 2M35 27l-3 2' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 37 33 25' fill='none' stroke='%2307030f' stroke-width='9.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 37 33 25' fill='none' stroke='%23fff6e5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 33.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39 10l3-3M43 16h3' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="comdyn"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 12h15v22H4Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 12h15v22H29Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 20h15M29 27h15' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 23h8M25 19l4 4-4 4' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36 34v8H12v-5' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 40l4-4 4 4' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="popis"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 9h30v35H9Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 5h12v8H18Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 23l2 2 4-5M15 32l2 2 4-5M26 23h8M26 32h8' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42 6l3-3' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="linksim"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M5 41h38' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 15 15 41h18Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 30h10M17 36h14' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 7a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 4c-4 4-4 11 0 15M34 4c4 4 4 11 0 15' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="industrialpm"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 45c0-9 5.5-14 13-14s13 5 13 14Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 11a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 14l4.5 4.5L43 8' fill='none' stroke='%2307030f' stroke-width='9.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 14l4.5 4.5L43 8' fill='none' stroke='%23fff6e5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40 27l3 3' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-badge[data-badge="idea"] { --badge-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4a14 14 0 0 1 9 25c-2 2-3 4-3 6H18c0-2-1-4-3-6A14 14 0 0 1 24 4Z' fill='%23fff6e5' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 37h12v6H18Z' fill='%2326174f' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 21l4 4 4-4M24 25v10' fill='none' stroke='%2307030f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 18h4M41 18h4M7 5l3 3M41 5l-3 3' fill='none' stroke='%2307030f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* badges:end */

/* 7. Base elements. */
html { background: var(--bg); }
body {
  color: var(--text);
  background: var(--bg);
  font: 500 1rem/1.45 var(--display);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--c-lime); color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The skip link: a picked sticker, shown on focus. */
.skip-link {
  padding: 10px 18px;
  border: var(--ol) solid var(--edge);
  border-radius: var(--pill);
  color: var(--on-picked);
  background: var(--picked);
  font-weight: 800;
  text-decoration: none;
}

/* Kickers and eyebrows: small muted mono, never lime. */
.eyebrow, .kicker, .starter-kicker, .guided-surface, .course-tool-kicker, .workflow-meta, .gallery-meta, .lesson-kicker,
.case-kicker, .lab-info-body h3, .guided-head > p {
  color: var(--text-dim);
  font-family: var(--mono);
  font-weight: 700;
  font-size: max(12px, 0.76rem);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Numbers read in Bricolage 800 with even figures. */
.lesson-path-count, .gallery-path-count, .result-count, .lead-strip-count, .case-count, .lead-case-head > span {
  font-variant-numeric: tabular-nums;
}

/* 8. The tile: an app (or the Lab itself) as the frame's strip badge. */
.lab-badge {
  --badge-size: 32px;
  display: inline-block;
  flex: none;
  inline-size: var(--badge-size);
  block-size: var(--badge-size);
  border: var(--ol) solid var(--edge);
  border-radius: 26%;
  background: var(--badge-art, none) center / 72% no-repeat, var(--tile);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  transform: rotate(-6deg);
  vertical-align: middle;
}
.lab-badge:where([data-size="small"]) { --badge-size: 28px; border-width: var(--ol-thin); }

/* 9. The header: one row on the room, a fat rule under it. */
.site-header {
  background: var(--bg);
  border-bottom: var(--ol) solid var(--rule);
  backdrop-filter: none;
}
.wordmark { color: var(--text); text-decoration: none; }
.wordmark-mark.lab-badge { --badge-size: 38px; }
.wordmark strong { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.brand-starting { color: inherit; font-weight: 800; }
@media (max-width: 639px) {
  .wordmark-mark.lab-badge { --badge-size: 32px; }
  .wordmark strong { font-size: 15px; }
}
@media (max-width: 374px) {
  .wordmark-mark.lab-badge { --badge-size: 30px; border-width: var(--ol-thin); }
  .wordmark strong { font-size: 13.5px; }
}

/* The dark/light switch: one round button, the icon of the theme it goes to. */
.theme-switch {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.theme-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme="paper"]) :is(.theme-icon-moon, .theme-word-dark) { display: none; }
html[data-theme="paper"] :is(.theme-icon-sun, .theme-word-light) { display: none; }

/* 10. Buttons. One lime action per screen; the rest are secondary or text links. */
/* Secondary (and the small ones in the header). */
.quiet-action, .app-action, .copy-inline, .lead-outline, .lab-tool-prepare, .reset-button, .lesson-play,
.header-explore, .header-tools > summary, .snapshot-link, .source-action, .snapshot-proof-links a {
  border: var(--ol) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.header-explore, .header-tools > summary, .reset-button, .lesson-play, .lab-tool-prepare, .snapshot-link, .source-action,
.snapshot-proof-links a {
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
}
/* Primary: lime, ink words, one per screen. */
.primary-action, .lab-planner button[type="submit"] {
  border: var(--ol) solid var(--edge);
  border-radius: var(--pill);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.primary-action [data-ui-icon], .quiet-action [data-ui-icon], .app-action [data-ui-icon] { color: inherit; }
/* Lift on hover, press onto the shadow. */
@media (hover: hover) {
  :is(.primary-action, .lab-planner button[type="submit"], .quiet-action, .app-action, .copy-inline, .lead-outline, .lab-tool-prepare,
    .reset-button, .lesson-play, .header-explore, .header-tools > summary, .snapshot-link, .source-action, .snapshot-proof-links a,
    .theme-switch, .lead-chip, .story-tab):not(:disabled, [aria-disabled="true"]):hover {
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--pop) + 1px) calc(var(--pop) + 1px) 0 var(--edge);
  }
  /* The small controls rest on --pop-sm, so their lift is +1px of that, not of --pop. */
  :is(.header-explore, .header-tools > summary, .reset-button, .lesson-play, .lab-tool-prepare, .snapshot-link, .source-action,
    .snapshot-proof-links a, .theme-switch):not(:disabled, [aria-disabled="true"]):hover {
    box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge);
  }
}
:is(.primary-action, .lab-planner button[type="submit"], .quiet-action, .app-action, .copy-inline, .lead-outline, .lab-tool-prepare,
  .reset-button, .lesson-play, .header-explore, .header-tools > summary, .snapshot-link, .source-action, .snapshot-proof-links a,
  .theme-switch, .lead-chip, .story-tab):not(:disabled, [aria-disabled="true"]):active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--edge);
}
/* Disabled: dashed and dim, never faded. */
:is(.primary-action, .quiet-action, .app-action, .copy-inline, .lead-outline, .lab-tool-prepare, .reset-button, .lesson-play,
  .snapshot-link, .lab-planner button[type="submit"]):is(:disabled, [aria-disabled="true"]) {
  border: var(--ol) dashed var(--control-edge);
  color: var(--text-dim);
  background: var(--surface);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

/* Text links: the text's colour, a fat underline. */
.lead-text, .lead-types > summary, .lead-change, .lead-desk-door, .gallery-watch, .gallery-download, .lesson-next, .lesson-download, .text-button,
.lab-info-links a, .gallery-back, .lesson-back, .picture-full-link, .lead-case-title[data-empty] {
  border: 0;
  color: var(--text);
  background: transparent;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: underline 3px var(--link-line);
  text-underline-offset: 0.3em;
}
:is(.lead-text, .lead-types > summary, .lead-change, .lead-desk-door, .gallery-watch, .gallery-download, .lesson-next, .lesson-download, .text-button,
  .lab-info-links a, .picture-full-link):hover { text-decoration-thickness: 5px; }
.lead-desk-door { font-weight: 800; font-size: 1.1rem; }
/* Back: a text link with its arrow, underlined on hover. */
.back-action, .lead-back, .gallery-back, .lesson-back {
  border: 0;
  color: var(--text);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}
:is(.back-action, .lead-back, .gallery-back, .lesson-back):hover { text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; }

/* Round icon buttons: neutral, never sky or lime. The "i" is a 32px disc in a 44px target. */
.lab-info-open > span[aria-hidden], .lesson-info > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 800 1rem/1 var(--display);
  font-style: normal;
}
.lab-info-open:hover > span[aria-hidden], .lesson-info:hover > span { transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge); }
.lab-info-close, .lesson-dialog-close {
  display: inline-grid;
  place-items: center;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 700 1.5rem/1 var(--display);
}
.lead-clear { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; color: var(--text); background: var(--surface); }
.lead-clear:hover, .lead-clear:focus-visible { color: var(--text); background: var(--bg); }
:is(.lab-info-open, .lesson-info, .lab-info-close, .lesson-dialog-close, .theme-switch, .lead-clear):focus-visible { outline-offset: 3px; border-radius: 50%; }

/* 11. Chips: answers, tabs. Picked = the cream (dark) or ink (light) sticker, a tick, pressed. */
.lead-chip, .story-tab {
  border: var(--ol) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  font: 700 1rem/1.2 var(--display);
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.lead-chip[aria-pressed="true"], .story-tab[aria-selected="true"], .lead-choice[aria-pressed="true"] {
  border-color: var(--edge);
  color: var(--on-picked);
  background: var(--picked);
  font-weight: 800;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--edge);
}
.lead-chip[aria-pressed="true"]::before, .lead-choice[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  width: 0.32em;
  height: 0.6em;
  border: solid currentColor;
  border-width: 0 0.15em 0.15em 0;
  transform: translateY(-65%) rotate(45deg);
}
.lead-choice {
  border: var(--ol) solid var(--control-edge);
  border-radius: var(--r);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
}

/* 12. Tags: labels, not buttons. */
.tag, .lesson-opened {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text-dim);
  font: 700 0.78rem/1.2 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* States by shape (the word is always there): filled, solid, dashed, dotted. */
[data-state-tag] { display: inline-flex; align-items: center; gap: 0.35em; padding: 2px 10px; border-radius: var(--pill);
  font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
[data-state-tag="verified"] { border: var(--ol-thin) solid var(--edge); color: var(--on-picked); background: var(--picked); }
[data-state-tag="conditional"], [data-state-tag="developer"] { border: var(--ol-thin) solid var(--text); color: var(--text); }
[data-state-tag="integration"] { border: var(--ol-thin) dashed var(--text); color: var(--text); }
[data-state-tag="aspiration"] { border: var(--ol-thin) dotted var(--text-dim); color: var(--text-dim); }
/* Oruk's number labels, the same three shapes: Measured filled, Guess dashed, Example dotted (the word is always there). */
[data-basis="measured"] { border: var(--ol-thin) solid var(--edge); color: var(--on-picked); background: var(--picked); }
[data-basis="assumed"] { border: var(--ol-thin) dashed var(--text); color: var(--text); }
[data-basis="example"] { border: var(--ol-thin) dotted var(--text-dim); color: var(--text-dim); }
/* Oruk's check chip: "Checked" is filled (the server saw the run), "Dot says" is dashed. */
[data-check="checked"] { border: var(--ol-thin) solid var(--edge); color: var(--on-picked); background: var(--picked); }
[data-check="dot-says"] { border: var(--ol-thin) dashed var(--text); color: var(--text); }

/* 13. Cards: a sticker on the room. */
.course-tool-card, .vertical-card, .workflow-card, .gallery-card, .guided-card, .empty-result, .launch-plan, .lesson-receipt,
.workflow-detail {
  border: var(--ol) solid var(--edge);
  border-radius: var(--r-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
}
.workflow-detail { box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge); }
@media (hover: hover) {
  :is(.course-tool-card, .workflow-card, .gallery-card):hover {
    transform: translate(-2px, -3px) rotate(-0.4deg);
    box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  }
}
.course-tool-card, .workflow-card, .gallery-card { transition: transform var(--t-lift) var(--ease), box-shadow var(--t-lift) var(--ease); }
/* A picked lesson card: lifted, with a corner sticker that carries a tick. */
.workflow-card[aria-pressed="true"] {
  overflow: visible;
  transform: translate(-2px, -3px);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
}
.workflow-card[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: -15px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: var(--ol-thin) solid var(--edge);
  border-radius: 50%;
  background: var(--picked);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  transform: rotate(6deg);
}
.workflow-card[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  right: 21px;
  width: 6px;
  height: 11px;
  border: solid var(--on-picked);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
/* Pictures of apps and evidence: night islands in a thin edge. */
.course-tool-picture { overflow: hidden; border: var(--ol) solid var(--edge); border-radius: var(--r); background: var(--screen); }
/* Oruk's Dot orb: lime while Dot works (theme.css section 24 stops its pulse), a lime ring when it is about to start,
   still and dim when paused or waiting, sky while it waits for the person, red on a real problem, the picked sticker
   when the journey is done. Shape carries it too (ring, dashed, filled), never colour alone. */
.oruk-orb { border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; color: var(--text); background: transparent; }
.oruk-orb[data-orb="pulse"] { border-color: var(--edge); background: var(--accent); }
.oruk-orb[data-orb="pulse"]::after { border: var(--ol-thin) solid var(--accent); }
.oruk-orb[data-orb="ring-lime"] { border-color: var(--edge); box-shadow: inset 0 0 0 5px var(--accent); }
.oruk-orb:is([data-orb="still"], [data-orb="grey"]) { border-color: var(--text-dim); background: var(--text-dim); }
.oruk-orb[data-orb="dashed"] { border-style: dashed; border-color: var(--text-dim); }
.oruk-orb[data-orb="sky"] { border-color: var(--focus); box-shadow: inset 0 0 0 5px var(--focus); }
.oruk-orb[data-orb="problem"] { border-color: var(--danger); color: var(--on-danger); background: var(--danger); }
.oruk-orb[data-orb="check"] { border-color: var(--edge); color: var(--on-picked); background: var(--picked); }
/* Inside Oruk's cards the app tiles are cream (as in the Lessons drawer): lime stays for the one action. */
:is(.oruk-finding, .oruk-rail-card, .oruk-turn) .lab-badge { --tile: var(--c-cream); }

/* Number stickers: neutral discs (a number is not a state). */
.lesson-path-n, .workflow-question-n, .gallery-q-n {
  display: inline-grid;
  flex: none;
  width: 2em;
  height: 2em;
  place-items: center;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 800 0.95rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transform: rotate(-6deg);
}

/* 14. Fields: typed in, picked from. */
.starter-field textarea, .starter-field input, .portfolio-controls input, .portfolio-controls select, .lead-case-choose,
.lab-planner input:not([type="checkbox"]):not([type="file"]), .lab-planner textarea, .lab-planner select, .guided-note textarea, .outlook-context-form select {
  border: var(--ol) solid var(--control-edge);
  border-radius: var(--r);
  color: var(--text);
  background-color: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  font-family: var(--display);
  font-weight: 600;
}
:is(.starter-field textarea, .starter-field input, .portfolio-controls input, .guided-note textarea, .lab-planner input, .lab-planner textarea)::placeholder {
  color: var(--text-dim);
  opacity: 1;
}
/* Invalid: the red edge and the message under the field. One red outline only; the focus ring is the other. */
:is(.starter-field textarea, .starter-field input, .portfolio-controls input, .lab-planner input, .lab-planner textarea)[aria-invalid="true"] {
  border-color: var(--danger);
}
/* The browser's own clear "x" (blue or white, in neither theme's colours) is not drawn; Escape still clears. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.portfolio-controls select, .lead-case-choose, .lab-planner select, .outlook-context-form select {
  appearance: none;
  padding-right: 44px;
  background:
    linear-gradient(45deg, transparent 50%, var(--text) 50%) right 22px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--text) 50%, transparent 50%) right 15px center / 7px 7px no-repeat,
    var(--surface);
}

/* 15. Sheets and dialogs. */
.lab-info, .lab-planner, .lesson-dialog {
  border: var(--ol) solid var(--edge);
  border-radius: var(--r-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  font-family: var(--display);
}
:is(.lab-info, .lab-planner, .lesson-dialog)::backdrop { background: var(--scrim); backdrop-filter: none; }
.lab-info-head, .lab-planner > header, .lesson-dialog-head { border-bottom: var(--ol-thin) solid var(--divider); background: var(--surface); }
.lab-info-head h2 { font-size: 1.25rem; font-weight: 800; }
dialog[open]:is(.lab-info, .lab-planner, .lesson-dialog) {
  transition: opacity var(--t-open) var(--ease), scale var(--t-open) var(--ease);
  @starting-style { opacity: 0; scale: 0.97; }
}

/* 16. Drawers: a sticker bar that opens. */
.depth-drawer {
  border: 0;
  color: var(--text);
  background: transparent;
}
.depth-drawer > summary {
  border: var(--ol) solid var(--edge);
  border-radius: var(--r-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
}
.depth-drawer[open] > summary { box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge); }
/* The open/close mark: a plus drawn in CSS (it turns into a cross when the drawer is open). */
.depth-drawer > summary::after {
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  background:
    linear-gradient(var(--text), var(--text)) center / 14px 3px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 3px 14px no-repeat,
    var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  transition: transform var(--t-open) var(--ease);
}
.depth-drawer[open] > summary::after { transform: rotate(45deg); }
.depth-drawer > summary strong { color: var(--text); font-size: 1.2rem; font-weight: 800; }
.depth-drawer > summary span, .depth-drawer > summary small { color: var(--text-dim); }

/* 17. The Tools menu: a sheet-like panel, rows split by dividers. */
.suite-nav {
  border: var(--ol) solid var(--edge);
  border-radius: var(--r-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
}
.suite-nav a { color: var(--text); }
.suite-nav a + a { border-top: var(--ol-thin) solid var(--divider); }
.suite-nav a small { color: var(--text-dim); }
.suite-nav a:hover { color: var(--text); background: var(--bg); }

/* 18. The guide meter: a dot in the header's row. */
/* Off or not yet answered: only the dot, no pill edge or shadow (it has no job yet). Live or busy: the pill with its words. */
.guide-meter:not([data-state="live"]):not([data-state="busy"]) { border-color: transparent; background: transparent; box-shadow: none; }
/* (a round header button like the switch; with its words shown it grows into a pill) */
.guide-meter {
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text-dim);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.guide-meter-light { width: 10px; height: 10px; border: var(--ol-thin) solid var(--text-dim); border-radius: 50%; background: transparent; box-shadow: none; }
.guide-meter[data-state="live"] .guide-meter-light { border-color: var(--picked); background: var(--picked); box-shadow: none; }
.guide-meter[data-state="busy"] .guide-meter-light { border-color: var(--picked); background: linear-gradient(90deg, var(--picked) 50%, transparent 50%); }
.guide-meter-panel {
  border: var(--ol) solid var(--edge);
  border-radius: var(--r);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
}

/* 19. Alerts: errors only are red. */
.starter-error:not([hidden]), .visual-pack-alert:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: var(--ol) solid var(--danger);
  border-radius: var(--r);
  color: var(--text);
  background: var(--surface);
  font-weight: 600;
  text-align: left;
}
.starter-error:not([hidden])::before, .visual-pack-alert:not([hidden])::before {
  content: "!";
  display: grid;
  flex: none;
  width: 26px;
  height: 26px;
  place-items: center;
  border: var(--ol-thin) solid var(--edge);
  border-radius: 50%;
  color: var(--on-danger);
  background: var(--danger);
  font: 800 1rem/1 var(--display);
}
:is(.starter-error, .visual-pack-alert) b { color: var(--danger); font-weight: 800; }

/* 20. The highlight word: lime with an ink shadow on night, a lime sticker on paper. One per screen. */
.lead-starting { color: var(--hl-fg); text-shadow: 0.05em 0.05em 0 var(--hl-shadow); }
html[data-theme="paper"] .lead-starting {
  display: inline-block;
  padding: 0 0.14em;
  border: var(--ol-thin) solid var(--hl-edge);
  border-radius: 0.22em;
  background: var(--hl-bg);
  box-shadow: 0.06em 0.06em 0 var(--c-ink);
  /* the tilt lifts a corner into the next glyph: a little room on each side keeps "?" clear of the sticker */
  margin-inline: 0.04em 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
  transform: rotate(-2deg);
}
/* On a phone the question breaks before the sticker ("What are you / Starting?"): drop it a little and tilt it less, so
   its raised corner never touches the "y" on the line above (round 3 visual check). */
@media (max-width: 479px) {
  html[data-theme="paper"] .lead-starting { margin-top: 0.22em; transform: rotate(-1deg); }
}

/* 21. The entrance's name: one small tilted sticker; its letters are plain letters. */
.lead-entrance > span {
  display: inline-block;
  padding: 0.3em 0.85em;
  border: var(--ol) solid var(--edge);
  border-radius: var(--r);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  transform: rotate(-3deg);
}
/* On the screens after the entrance the same sticker stays inside its 24px line. */
#start[data-lead-flow] .lead-entrance > span { padding: 0 0.7em; border-width: var(--ol-thin); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); }

/* 22. Case marks, by shape: tried (filled), opened (half), ready (ring), needs (dotted), not needed (dash). */
.lead-mark { box-sizing: border-box; }
/* (the filled mark keeps its full size on night: its edge is the fill, an ink edge would vanish there) */
.lead-mark[data-mark="tried"] { border: var(--ol-thin) solid var(--picked); background: var(--picked); }
.lead-mark[data-mark="opened"] { border: var(--ol-thin) solid var(--picked); background: linear-gradient(90deg, var(--picked) 50%, transparent 50%); }
.lead-mark[data-mark="ready"] { border: var(--ol-thin) solid var(--text); background: transparent; }
.lead-mark[data-mark="needs"] { border: var(--ol-thin) dotted var(--text-dim); background: transparent; }
.lead-mark[data-mark="none"] { border: 0; background: var(--text-dim); }

/* 23. Footer. */
.site-footer { border-top: var(--ol) solid var(--rule); background: var(--bg); }
.site-footer > a {
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
}

/* 24. Reduced motion: shadows still change, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  :is(.primary-action, .lab-planner button[type="submit"], .quiet-action, .app-action, .copy-inline, .lead-outline, .lab-tool-prepare,
    .reset-button, .lesson-play, .header-explore, .header-tools > summary, .snapshot-link, .source-action, .snapshot-proof-links a,
    .theme-switch, .lead-chip, .story-tab, .course-tool-card, .workflow-card, .gallery-card, .lead-choice,
    .lab-info-open > span[aria-hidden], .lesson-info > span) { transition: none; transform: none !important; }
  dialog[open]:is(.lab-info, .lab-planner, .lesson-dialog) { transition: none; scale: none; }
  .oruk-orb[data-orb="pulse"]::after { animation: none; opacity: 0; }
  .depth-drawer > summary::after, .depth-drawer[open] > summary::after { transition: none; transform: none; }
  .depth-drawer[open] > summary::after { background: linear-gradient(var(--text), var(--text)) center / 14px 3px no-repeat, var(--surface); }
}

/* 25. Tool cards: the app's tile beside its two-word name. */
.course-tool-copy h3 { display: flex; align-items: center; gap: 12px; }
.course-tool-copy h3 > .lab-badge { --badge-size: 40px; }
@media (max-width: 42rem) { .course-tool-copy h3 > .lab-badge { --badge-size: 32px; border-width: var(--ol-thin); } }

/* 26. Lesson cards: the app's tile and the kicker on one row, the title and the lesson's question under them. */
.workflow-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.workflow-card > .lab-badge { --badge-size: 32px; grid-row: 1; grid-column: 1; align-self: center; border-width: var(--ol-thin); }
.workflow-card > .workflow-meta { grid-column: 2; }
.workflow-card > :is(.workflow-card-title, .workflow-card-line) { grid-column: 1 / -1; }
.workflow-detail > .lab-badge { --badge-size: 32px; display: block; margin: 0 0 10px 2px; border-width: var(--ol-thin); }
/* 41 lime tiles made a wall in the Lessons drawer, and lime stopped meaning "the one thing to do": there the
   tile is cream with its ink drawing (decided in round 1; the header's tile and the 8 tool cards stay lime). */
.workflow-grid .lab-badge, .workflow-detail > .lab-badge { --tile: var(--c-cream); }

/* 27. The shared app icons (ui-icons.css, styled from here only: this file is never loaded by an app): one colour,
   round strokes like the frame's drawings, and none of the faint frame corners. Play is the triangle alone, a
   chevron the chevron alone. */
[data-ui-icon] .ui-icon-frame { display: none; }
[data-ui-icon] .ui-icon-ink { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-ui-icon="play"] .ui-icon-ink, [data-ui-icon="chevron-down"] .ui-icon-accent { display: none; }

/* 28. A text link that ends in an arrow ("Take me to my Desk →", "See whole case ↗"): one underline under the
   words and the arrow. These links are flex boxes, which would break a text underline in two at the arrow. */
:is(.lead-text, .lead-desk-door):not(.lead-back, .back-action):has(> span[aria-hidden="true"]:not([data-ui-icon])) {
  text-decoration: none;
  background: linear-gradient(var(--link-line), var(--link-line)) left calc(50% + 0.62em) / 100% 3px no-repeat;
  background-origin: content-box;
}
:is(.lead-text, .lead-desk-door):not(.lead-back, .back-action):has(> span[aria-hidden="true"]:not([data-ui-icon])):hover { background-size: 100% 5px; }

/* 29. Story tabs can run to two lines: a rounded box, not a pill. */
.story-tab { border-radius: var(--r); }

/* 30. Your case beside the question (1280px and wider): the screen's featured card. */
@media (min-width: 80rem) {
  html:not(.capture-requested) .lead-case-side > .lead-case-body {
    border: var(--ol) solid var(--edge);
    border-radius: var(--r-lg);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  }
}

/* Inside a sheet's scroll box, Tab leaves room under the focused control so its ring is never cut (spec 4.16). */
:is(.lab-info, .lab-planner, .lesson-dialog, #info-sheet, #verticals-info) :focus-visible { scroll-margin-block: 14px; }