/* page chrome: two icon buttons fixed in the top corners (DESIGN.md,
   "Page chrome"). Top left: the lessons button
   (.nav-toggle, shell.js) hides the sidebar on wide screens and opens the
   drawer on narrow ones. Top right: the present button (presentation.js)
   switches Read / Present. Hover shows a label with its key: [ and P. */
.site-header { padding-left: 56px; }
.nav-toggle,
.presentation-toggle,
.notes-toggle {
  position: fixed; z-index: 102; top: 10px; display: inline-grid; place-items: center;
  width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: color-mix(in oklch, var(--gray-100) 80%, transparent);
  color: var(--gray-1100); cursor: pointer; touch-action: manipulation;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.nav-toggle { left: 10px; }
.presentation-toggle { right: 12px; }
.notes-toggle { top: auto; bottom: 10px; left: 10px; display: none; }
.nav-toggle::after, .presentation-toggle::after, .notes-toggle::after { content: ''; position: absolute; inset: -4px; }
.nav-toggle:active, .presentation-toggle:active, .notes-toggle:active { transform: scale(0.96); }
.nav-toggle:focus-visible, .presentation-toggle:focus-visible, .notes-toggle:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover, .presentation-toggle:hover, .notes-toggle:hover { background: var(--gray-300); color: var(--gray-1200); }
}
.nav-toggle svg, .presentation-toggle svg, .notes-toggle svg { display: block; }
/* the panel icon's divider: in from the edge when the sidebar is open, nearer it when closed */
.chrome-panel-line { transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1); }
[data-side-collapsed] .chrome-panel-line { transform: translateX(-2.5px); }
/* bottom left, notes (shell.js): hides the margin notes, so a note opens
   when its highlighted words are clicked, as on a phone. Only where margin
   notes show: 1280px and up, reading view (presenting, notes already open on click) */
@media (min-width: 1280px) { .notes-toggle { display: inline-grid; } }
/* presenting: the same button turns the notes off altogether (no marks, no taps), for a clean screen on stage */
.is-presenting .notes-toggle { display: inline-grid; }
@media (min-width: 1024px) { .sidebar { padding-bottom: 64px; } }
.notes-toggle .is-hidden { opacity: 0; transform: scale(0.8); }
[data-notes-hidden] .notes-toggle .is-shown { opacity: 0; transform: scale(0.8); }
[data-notes-hidden] .notes-toggle .is-hidden { opacity: 1; transform: none; }
.is-presenting .notes-toggle .is-shown { opacity: 1; transform: none; }
.is-presenting .notes-toggle .is-hidden { opacity: 0; transform: scale(0.8); }
[data-notes-off] .is-presenting .notes-toggle .is-shown { opacity: 0; transform: scale(0.8); }
[data-notes-off] .is-presenting .notes-toggle .is-hidden { opacity: 1; transform: none; }
[data-notes-off] .is-presenting .ann.ann-tap::before,
[data-notes-off] .is-presenting .ann-pm,
[data-notes-off] .is-presenting .rough-annotation { display: none; }
[data-notes-off] .is-presenting .ann { --ann-mark: transparent; cursor: auto; }
/* the present icon crossfades to the read icon */
.chrome-swap { position: relative; width: 18px; height: 18px; }
.chrome-swap svg { position: absolute; inset: 0; transition: opacity 150ms ease-out, transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.chrome-swap .is-read { opacity: 0; transform: scale(0.8); }
.is-presenting .chrome-swap .is-present { opacity: 0; transform: scale(0.8); }
.is-presenting .chrome-swap .is-read { opacity: 1; transform: none; }
/* tooltip: after a pause; straight away once one has shown (.chrome-warm) */
.chrome-tip {
  position: absolute; top: calc(100% + 8px); left: 0; white-space: nowrap; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; border-radius: 8px;
  background: var(--gray-1200); color: var(--gray-100); font: 500 12px var(--font);
  opacity: 0; transform: translateY(-2px); transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.notes-toggle .chrome-tip { top: auto; bottom: calc(100% + 8px); transform: translateY(2px); }
.presentation-toggle .chrome-tip { top: 50%; left: auto; right: calc(100% + 8px); transform: translate(2px, -50%); }
.chrome-tip kbd { font: 500 11px var(--mono, ui-monospace, monospace); padding: 1px 5px; border-radius: 4px; background: rgb(255 255 255 / 0.14); }
@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover .chrome-tip, .notes-toggle:hover .chrome-tip { opacity: 1; transform: none; transition-delay: 400ms; }
  .presentation-toggle:hover .chrome-tip { opacity: 1; transform: translate(0, -50%); transition-delay: 400ms; }
  .chrome-warm .nav-toggle:hover .chrome-tip, .chrome-warm .presentation-toggle:hover .chrome-tip, .chrome-warm .notes-toggle:hover .chrome-tip { transition-delay: 0ms; }
}
.nav-toggle:focus-visible .chrome-tip, .notes-toggle:focus-visible .chrome-tip { opacity: 1; transform: none; }
.presentation-toggle:focus-visible .chrome-tip { opacity: 1; transform: translate(0, -50%); }
/* sidebar hidden on wide screens (the motion is a FLIP in shell.js) */
@media (min-width: 1024px) {
  [data-side-collapsed] .layout { grid-template-columns: 0 1fr; }
  [data-side-collapsed] .sidebar { visibility: hidden; width: 260px; }
}
@media (min-width: 1536px) { [data-side-collapsed] .layout { grid-template-columns: 0 1fr 260px; } }
/* top edge (shell.js, .edge-blur): text going up under the top of the page
   blurs and fades away. Layers of more blur over less height, then a fade to
   the page colour. Reading view: once the page has scrolled (the brand sits
   there at the top), and below the sticky header on narrow screens.
   Presenting: over the top of the text column (a copy, presentation.js). */
.edge-blur { position: fixed; z-index: 25; top: 0; left: 0; right: 0; height: 60px; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; }
[data-scrolled] .edge-blur { opacity: 1; }
.edge-blur i { position: absolute; inset: 0; }
.edge-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.edge-blur i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(#000 25%, transparent 70%); mask-image: linear-gradient(#000 25%, transparent 70%); }
.edge-blur i:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 10%, transparent 45%); mask-image: linear-gradient(#000 10%, transparent 45%); }
.edge-blur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--gray-100) 15%, color-mix(in oklch, var(--gray-100) 60%, transparent) 50%, transparent); }
@media (max-width: 1023px) { .edge-blur { z-index: 19; top: 56px; height: 36px; } }
/* wide screens: the sidebar is never blurred, only the page beside it (Ben, 27 September 2026) */
@media (min-width: 1024px) { html:not([data-side-collapsed]) body > .edge-blur { left: 260px; } }
.is-presenting .edge-blur { display: none; }
.is-presenting .presentation-layout .edge-blur { display: block; position: absolute; z-index: 2; top: 0; left: 0; right: auto; width: 40%; height: 64px; opacity: 1; }
.is-presenting .presentation-layout.is-expanded .edge-blur { display: none; }
@media (max-width: 700px) { .is-presenting .presentation-layout .edge-blur { width: 100%; height: 40px; } }
/* switching Read / Present: the new view fades up; the old one just goes */
@keyframes chrome-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chrome-enter { animation: chrome-in 220ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .presentation-toggle, .notes-toggle, .chrome-panel-line, .chrome-tip, .chrome-swap svg { transition: none !important; }
  .chrome-enter { animation: none; }
}
.presentation-layout button:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 3px; }
body.is-presenting { overflow: hidden; }
.is-presenting .site-header { z-index: 101; border: 0; background: transparent; pointer-events: none; }
.is-presenting .site-header .brand { font-size: 12px; color: var(--gray-1000); pointer-events: auto; }
/* presenting starts with the sidebar hidden (shell.js); the lessons button or [
   brings it back as a fixed column on wide screens, the drawer below 1024px */
.is-presenting .toc { display: none; }
@media (min-width: 1024px) {
  /* below the 56px header, where it sits in the reading view */
  .is-presenting .sidebar { position: fixed; top: 56px; left: 0; z-index: 100; width: 260px; max-height: calc(100dvh - 56px); }
  html:not([data-side-collapsed]) .presentation-layout { left: 260px; }
}
@media (max-width: 1023px) {
  .is-presenting .scrim { z-index: 103; }
  .is-presenting .sidebar { z-index: 104; }
}
/* the lessons button sits in the header, which lets clicks through here */
.is-presenting .nav-toggle { pointer-events: auto; }
/* "Mark as complete" and previous / next, at the end of the text column */
.presentation-end .lesson-completion { margin-top: 0; }
/* the text stops scrolling when the end buttons reach the bottom */
.presentation-story:has(> .presentation-end) { padding-bottom: 48px; }
.presentation-section:has(+ .presentation-end) { margin-bottom: 96px; }
.presentation-end .pager { margin-top: 32px; padding-bottom: 0; }
.presentation-layout {
  position: fixed; inset: 56px 0 0; z-index: 100; display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  background: var(--gray-100); color: var(--gray-1200); text-align: left;
}
.presentation-story { overflow: auto; padding: 12vh clamp(32px, 4vw, 72px) 45vh; min-width: 0; scroll-behavior: auto; scrollbar-width: none; }
/* the prose column still scrolls, with no scrollbar (Ben, 27 September 2026) */
.presentation-story::-webkit-scrollbar { display: none; }
.presentation-section { position: relative; padding: 0; margin: 0 0 18vh; opacity: .32; transition: opacity 180ms ease-out; cursor: pointer; }
.presentation-section.is-current,
.presentation-section:focus-within { opacity: 1; }
.presentation-section-control {
  position: absolute; left: -32px; top: -8px; width: 28px; height: 44px; padding: 0;
  border: 0; background: transparent; font-size: 0; cursor: pointer;
}
.presentation-section .h2-link { display: block; margin-top: 0; }
.presentation-section h1,
.presentation-section h2 { color: var(--gray-1200); font-weight: 500; line-height: 1.35; margin: 0 0 24px; }
.presentation-section h1 { font-size: 24px; }
.presentation-section h2 { font-size: 20px; }
.presentation-section > p { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.7; color: inherit; }
.presentation-layout .prompt,
.presentation-layout .reply,
.presentation-layout .file,
.presentation-layout .demo,
.presentation-layout .ann-no-mark { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
.presentation-layout .ann::before,
.presentation-layout .ann::after { display: none; }
.presentation-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0 8px 8px 0; border-radius: 18px; background: var(--gray-200); }
.presentation-toolbar { position: absolute; z-index: 3; top: 12px; right: 12px; display: flex; }
.presentation-toolbar button {
  position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 8px; color: var(--gray-1000); background: transparent;
  font: 16px var(--font, sans-serif); cursor: pointer;
}
.presentation-toolbar button::after { content: ''; position: absolute; inset: -6px; }
.presentation-toolbar button:hover { color: var(--gray-1200); background: var(--gray-300); }
.presentation-toolbar button:active { transform: scale(.94); }
.presentation-position { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.presentation-slot { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 48px 24px 24px; scrollbar-width: thin; }
/* a canvas: narrower, so the note for a tapped card has room on either side */
.presentation-slot .flow .flow-anchor { --ann-label-max-width: 180px; width: var(--tw); margin: 0; }
.presentation-slot .flow .flow-anchor::after { font-size: 1.05rem; line-height: 1.1; }
/* a canvas is the whole panel: the dotted table is the panel's background,
   the cards spread over it, the notes sit either side (fillCanvas in presentation.js) */
.presentation-stage.has-canvas {
  background: radial-gradient(circle, rgb(var(--shadow) / 0.1) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-200);
}
.presentation-stage.has-canvas .presentation-slot { padding: 40px 0 16px; overflow: hidden; }
.presentation-stage.has-canvas .presentation-example { justify-content: flex-start; }
.presentation-stage.has-canvas .demo { margin: 0; }
.presentation-stage.has-canvas .flow-table { margin-inline: 24px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.presentation-stage.has-canvas .flow .flow-anchor::before,
.presentation-stage.has-canvas .flow .flow-anchor::after { display: none !important; }
.presentation-canvas-note {
  position: absolute; z-index: 7; width: max-content; max-width: 260px; margin: 0; padding: 4px 8px;
  transform: translateX(-50%) rotate(-1.5deg); border-radius: 8px; background: var(--gray-200);
  font: 400 16px/1.2 'Shantell Sans', cursive; color: #b8751a; text-align: center; pointer-events: none;
}
.presentation-canvas-note[hidden] { display: none; }
.presentation-canvas-note::before {
  content: ''; position: absolute; left: calc(50% + var(--arrow, 0px)); width: 1.5px; height: 12px; background: currentColor; opacity: .7;
}
.presentation-canvas-note[data-side="below"]::before { bottom: 100%; }
.presentation-canvas-note[data-side="above"]::before { top: 100%; }
.presentation-stage.has-canvas .flow-foot { margin: 4px 16px 0; }
/* the note is on the canvas; the canvas's own note line (shown on narrow screens) would repeat it */
.presentation-stage.has-canvas .flow .flow-note { display: none !important; }
@media (min-width: 1280px) {
  .presentation-slot .flow .ann[data-note]:not([data-note=""])::before,
  .presentation-slot .flow .ann[data-note]:not([data-note=""])::after { display: block; }
}
.presentation-example { margin-inline: auto; min-height: 100%; display: flex; flex-direction: column; justify-content: safe center; gap: 24px; }
.presentation-example[hidden] { display: none; }
.presentation-example > * { flex-shrink: 0; }
.presentation-example > .demo { margin-top: 0; margin-bottom: 0; }
.presentation-example .brw-view { height: min(650px, calc(100dvh - 240px)); min-height: 300px; }
.presentation-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8%; }
.presentation-empty h2 { font-size: clamp(32px, 3.6vw, 56px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; color: var(--gray-1200); margin: 0; }
.presentation-section.is-bare { margin-bottom: 0; }
/* Notes, in the panel: a card with one row per note, like the skills folder (presentation.js) */
.presentation-notes { width: 100%; max-width: 640px; margin-inline: auto; }
.presentation-notes ul, .presentation-notes ol { margin: 0; padding: 0; list-style: none; }
.presentation-notes li { margin: 0; padding: 12px 16px; font-size: 15px; line-height: 1.5; color: var(--gray-1200); text-wrap: pretty; }
.presentation-notes li + li { border-top: 1px solid var(--gray-300); }
@media (min-width: 1024px) { .presentation-notes li { padding-inline: 32px; } }
.presentation-layout.is-expanded { grid-template-columns: minmax(0, 1fr); }
.presentation-layout.is-expanded .presentation-story { display: none; }
.presentation-layout.is-expanded .presentation-stage { margin-left: 8px; }
.presentation-layout.is-expanded .presentation-example { max-width: 1200px; margin-inline: auto; }
@media (max-width: 1024px) {
  .presentation-story { padding-inline: 36px; }
  .presentation-slot { padding: 16px; }
}
@media (max-width: 700px) {
  .presentation-layout { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
  .presentation-story { padding: 40px 36px 25vh; }
  .presentation-story:has(> .presentation-end) { padding-bottom: 32px; }
  .presentation-section { margin-bottom: 64px; }
  .presentation-section > p { font-size: 15px; }
  .presentation-stage { margin: 0 6px 6px; }
  .presentation-layout.is-expanded { grid-template-rows: 1fr; }
  .presentation-toolbar { top: 6px; right: 6px; }
  .presentation-toolbar button { width: 44px; height: 44px; }
  .presentation-slot { padding: 52px 12px 12px; }
  .presentation-stage.has-canvas .flow-table { margin-inline: 0; }
  .presentation-example .brw-view { height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .presentation-section { transition: none; } }

/* notes open on click, as on a phone: in presentation view (the text column
   has no margin for them) and in reading view when the reader has hidden the
   notes (notes button, bottom left; [data-notes-hidden] on <html>). shell.js
   treats both as narrow. These are the narrow-screen rules from
   neat-annotations.css, scoped to the two cases. */
[data-notes-hidden] .ann::before, [data-notes-hidden] .ann::after,
[data-notes-hidden] .tip::before, [data-notes-hidden] .tip::after { display: none; }
[data-notes-hidden] .flow .flow-note { display: block; min-height: 6em; }
[data-notes-hidden] .rough-annotation { pointer-events: none; opacity: 0.9; }
.is-presenting .ann.ann-tap, [data-notes-hidden] .ann.ann-tap,
[data-notes-hidden] .tip.ann-tap { cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
[data-notes-hidden] .tip.ann-tap { --ann-color: var(--gray-1100, #62625f); }
.is-presenting .ann.ann-tap::after { display: none; }
.is-presenting .ann.ann-tap::before, [data-notes-hidden] .ann.ann-tap::before, [data-notes-hidden] .tip.ann-tap::before {
  display: block; content: ""; position: absolute; inset: -10px -4px; z-index: 1;
  -webkit-mask: none; mask: none; background: none; border: 0; opacity: 1;
  transform: none; visibility: visible; width: auto; height: auto;
}
.is-presenting .ann.ann-tap[aria-expanded="true"], [data-notes-hidden] .ann.ann-tap[aria-expanded="true"] { --ann-mark: color-mix(in oklch, var(--ann-color) 22%, transparent); }
.is-presenting .presentation-layout .ann.ann-no-mark[data-note]:not([data-note=""]):not(.flow-anchor):not([class*="E-anchor"]),
[data-notes-hidden] .ann.ann-no-mark[data-note]:not([data-note=""]):not(.flow-anchor):not([class*="E-anchor"]) { display: block; position: relative; }
.is-presenting .presentation-layout .ann-pm, [data-notes-hidden] .ann-pm {
  display: block; position: absolute; top: -11px; right: -4px; z-index: 5;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: var(--gray-100, #fcfcfc); box-shadow: 0 0 0 1.5px var(--ann-color); color: var(--ann-color);
  font: 500 14px/1 var(--ann-font); cursor: pointer; touch-action: manipulation;
  transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.is-presenting .ann-pm::before, [data-notes-hidden] .ann-pm::before { content: ""; position: absolute; inset: -10px; }
.is-presenting .ann-pm:active, [data-notes-hidden] .ann-pm:active { transform: scale(0.96); }
.is-presenting .ann-pm[aria-expanded="true"], [data-notes-hidden] .ann-pm[aria-expanded="true"] { background: var(--ann-color); color: var(--gray-100, #fcfcfc); }
.is-presenting .ann-pv, [data-notes-hidden] .ann-pv {
  position: absolute; z-index: 150; max-width: min(320px, calc(100vw - 32px)); padding: 10px 14px 11px; border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 0 0 1px rgb(var(--shadow, 0 0 0) / 0.08), 0 1px 3px rgb(var(--shadow, 0 0 0) / 0.06), 0 8px 24px -8px rgb(var(--shadow, 0 0 0) / 0.18);
  font: 400 16px/1.3 'Shantell Sans', cursive; color: var(--ann-color); overflow-wrap: anywhere;
  opacity: 0; transform: scale(0.95); transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.is-presenting .ann-pv[data-open], [data-notes-hidden] .ann-pv[data-open] { opacity: 1; transform: none; }
.is-presenting .ann-pv::before, [data-notes-hidden] .ann-pv::before {
  content: ""; position: absolute; width: 10px; height: 10px; left: var(--ann-pv-arrow); margin-left: -5px;
  background: var(--surface, #fff); transform: rotate(45deg);
}
.is-presenting .ann-pv[data-side="below"]::before, [data-notes-hidden] .ann-pv[data-side="below"]::before { top: -5px; box-shadow: -1px -1px 0 0 rgb(var(--shadow, 0 0 0) / 0.08); }
.is-presenting .ann-pv[data-side="above"]::before, [data-notes-hidden] .ann-pv[data-side="above"]::before { bottom: -5px; box-shadow: 1px 1px 0 0 rgb(var(--shadow, 0 0 0) / 0.08); }
@media (prefers-reduced-motion: reduce) { .is-presenting .ann-pm, .is-presenting .ann-pv, [data-notes-hidden] .ann-pm, [data-notes-hidden] .ann-pv { transition: none; } }