/*
  ZEEKR Training design system. Written 2026-10-25 for card 128.

  WHAT IT IS. The Showroom Sidebar demo's style sheet (design-demos/round-2/01d-showroom-sidebar.html, the design he agreed) made into the app's one CSS file. Everything from the @font-face rules to the reduced-motion block is the demo's own text, unchanged, except: the font URLs now start /fonts/, and the demo-only rules of its "Design system" page (.sys, swatches, type specimens, radii, motion demo, marks, .comp, .sidebar-demo, .pn-demo, .lib-demo) are removed because the app has no such page. The :root token block is byte-identical to the demo's.

  The section "APP ADDITIONS" at the end is new: forms, tables, flash messages, filter chips, empty states, the sign-in card, rendered Markdown, and (part 3) the collapsible sidebar, the content canvas and the motion. Those pieces are composed by hand on the demo's tokens; the demo had no forms or tables to copy. Every addition reads from the token block and adds no colour of its own.

  HIS STANDING RULES THAT APPLY HERE: no measure constraint on prose (no max-width, ch or em widths on text, no text-wrap balance or pretty); 44px targets; visible 3px focus; reduced motion honoured.
*/
@font-face { font-family: "Zeekr Headline"; src: url("/fonts/ZeekrHeadline-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Headline"; src: url("/fonts/ZeekrHeadline-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Headline"; src: url("/fonts/ZeekrHeadline-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Text"; src: url("/fonts/ZeekrText-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Text"; src: url("/fonts/ZeekrText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Text"; src: url("/fonts/ZeekrText-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Text"; src: url("/fonts/ZeekrText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeekr Text"; src: url("/fonts/ZeekrText-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* The one token block. Everything below, and everything the Design system view shows, reads from here. */
:root {
  --c-black: #000000;
  --c-charcoal: #232323;
  --c-white: #FFFFFF;
  --c-light-gray: #DDDDDD;
  --c-silver: #9DA2A5;
  --c-sunrise: #FF5841;
  --c-cream: #FFFBF3;
  --c-paper: #FFF4E2;
  --c-brick: #EA512A;
  --c-panel: rgba(35,35,35,.04);
  --c-panel-strong: rgba(35,35,35,.07);
  --c-muted: rgba(35,35,35,.72);
  --c-hairline: var(--c-light-gray);
  --c-sky-1: #58658F;
  --c-sky-2: #727C9F;
  --c-sky-3: #9299B6;
  --c-sky-4: #ADB3C9;
  --c-sky-5: #C7CAD9;
  --c-sky-6: #D4D6E2;
  --sky: linear-gradient(180deg, var(--c-sky-1), var(--c-sky-2), var(--c-sky-3), var(--c-sky-4), var(--c-sky-5), var(--c-sky-6));

  --font-head: "Zeekr Headline", Arial, sans-serif;
  --font-text: "Zeekr Text", Arial, sans-serif;
  --fs-display: clamp(40px, 4.4vw, 62px);
  --fs-h2: clamp(28px, 2.6vw, 36px);
  --fs-h3: 24px;
  --fs-h4: 19px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-note: 14px;
  --lh-body: 1.55;
  --lh-head: 1.12;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-card: 20px;
  --r-pill: 999px;
  --h-button: 48px;
  --h-bar: 56px;
  --page: min(1200px, calc(100% - 64px));

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-2: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.08);
  --shadow-3: 0 4px 10px rgba(0,0,0,.05), 0 24px 56px rgba(0,0,0,.12);

  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;
  --dur-settle: 1200ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --rise: 10px;
  --lift: -2px;

  --focus-dark: var(--c-black);
  --focus-light: var(--c-white);

  /* Added for the sidebar layout. Nothing above this line differs from 01-showroom.html. */
  --w-side: 280px;
  --c-side: rgba(255,255,255,.86);
  --c-side-tint: var(--c-panel);
  --c-scrim: rgba(0,0,0,.32);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 96px; }
@media (height <= 860px) { .side-stage { padding-block: 6px; } }
body {
  margin: 0; background: var(--c-white); color: var(--c-charcoal);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; line-height: var(--lh-head); color: var(--c-black); margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--focus-light); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--c-black); color: var(--c-white); padding: 12px 20px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; }
.skip:focus { top: 8px; outline: 3px solid var(--c-white); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-black); }

.wrap { width: var(--page); margin-inline: auto; }

/* Sidebar: the Mac app idea. A light translucent column that always shows where you are, the content pane fills the rest. */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-black); min-height: 44px; justify-self: start; border-radius: 6px; }
.brand svg { height: 20px; width: auto; display: block; }
.brand .app { font-size: var(--fs-small); color: var(--c-charcoal); padding-left: 12px; border-left: 1px solid var(--c-hairline); line-height: 20px; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 70; width: var(--w-side);
  display: flex; flex-direction: column;
  background: linear-gradient(var(--c-side-tint), var(--c-side-tint)), var(--c-side);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--c-hairline); view-transition-name: sidebar;
}
.side-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5); }
.sidebar .side-close { display: none; }
.side-nav { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-5); overscroll-behavior: contain; }
.side-group + .side-group { margin-top: var(--s-5); }
.side-h { font-family: var(--font-text); font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--c-muted); padding: 0 var(--s-3); margin: 0 0 var(--s-2); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-link {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  min-height: 44px; padding: 6px var(--s-3); border-radius: var(--r-sm); text-decoration: none; color: var(--c-charcoal); font-size: var(--fs-small); line-height: 1.3;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
a.side-link:hover { background: var(--c-panel-strong); color: var(--c-black); }
.side-link:focus-visible { outline-offset: -3px; }
.side-link .ico { width: 22px; height: 22px; display: grid; place-items: center; color: var(--c-charcoal); }
.side-link .ico svg { width: 18px; height: 18px; }
.side-link[aria-current="page"] { background: var(--c-white); color: var(--c-black); font-weight: 500; box-shadow: var(--shadow-1); }
.side-link[aria-current="true"] { color: var(--c-black); font-weight: 500; }
/* Stage rows: number, short title, status mark. The status word is read out, and the three marks differ in shape. */
.side-stage { grid-template-columns: 22px minmax(0, 1fr) 16px; }
.side-stage .n { width: 22px; height: 22px; border-radius: 50%; background: var(--c-panel-strong); display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--c-black); }
.side-stage .mark { width: 16px; height: 16px; }
.side-stage .mark svg { width: 10px; height: 10px; }
.side-stage .mark-progress { padding: 2px; border-width: 1.5px; }
.side-stage .mark-todo { border-width: 1.5px; }
div.side-stage { color: var(--c-muted); }
.side-stage.current { background: var(--c-white); color: var(--c-black); font-weight: 500; box-shadow: var(--shadow-1); }
.side-stage.current::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-sunrise); }
.side-stage[aria-current="page"] .n { background: var(--c-black); color: var(--c-white); }
.side-sep { height: 1px; background: var(--c-hairline); margin: var(--s-2) var(--s-3); }
.side-me { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-hairline); font-size: var(--fs-small); line-height: 1.3; }
.side-me strong { display: block; font-weight: 500; color: var(--c-black); }
.side-me span span { color: var(--c-muted); font-size: var(--fs-note); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-white); display: grid; place-items: center; font-size: 15px; font-weight: 500; }

/* Slim top bar, drawer and scrim: only under 960px */
.topbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 65; background: var(--c-scrim); animation: fade var(--dur-base) var(--ease-out) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--c-black); font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.icon-btn:hover { background: var(--c-panel-strong); }
.icon-btn svg { width: 18px; height: 18px; flex: none; }

/* Content pane */
.pane { margin-left: var(--w-side); min-width: 0; }

/* Views */
main { display: block; min-height: calc(100vh - 120px); }
.view { padding: var(--s-7) 0 var(--s-9); }
.view:not([hidden]) .enter { animation: rise var(--dur-base) var(--ease-out) both; }
.view:not([hidden]) .enter.d1 { animation-delay: 60ms; }
.view:not([hidden]) .enter.d2 { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease-out; }

.display { font-family: var(--font-head); font-weight: 300; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -.01em; color: var(--c-black); }
.h2 { font-size: var(--fs-h2); font-weight: 400; }
.h3 { font-size: var(--fs-h3); font-weight: 400; }
.h4 { font-size: var(--fs-h4); font-weight: 400; }
.muted { color: var(--c-muted); }
.label { font-size: var(--fs-small); font-weight: 500; color: var(--c-charcoal); }
.note { font-size: var(--fs-note); color: var(--c-muted); }
.sample { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-note); color: var(--c-muted); }
.sample::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--c-muted); }

/* Breadcrumb */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--c-muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li:not(:last-child)::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--c-silver); border-right: 1.5px solid var(--c-silver); transform: rotate(45deg); margin: 0 10px 0 4px; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--c-muted); border-radius: 6px; }
.crumbs a:hover { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--c-charcoal); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-button); padding: 0 26px; border-radius: var(--r-pill);
  font-family: var(--font-text); font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--c-black); color: var(--c-white); }
.btn-primary:hover { background: var(--c-charcoal); box-shadow: var(--shadow-2); }
.btn-secondary { background: transparent; color: var(--c-charcoal); border-color: var(--c-charcoal); }
.btn-secondary:hover { background: var(--c-panel); }
.btn-text { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; font-weight: 500; font-size: 16px; color: var(--c-black); text-decoration: none; cursor: pointer; border-radius: 6px; }
.btn-text:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.btn-text svg, .btn svg { width: 16px; height: 16px; flex: none; }
.btn[aria-pressed="true"] { background: var(--c-charcoal); color: var(--c-white); border-color: var(--c-charcoal); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Progress */
.progress { display: flex; align-items: center; gap: var(--s-4); }
.track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--c-light-gray); overflow: hidden; }
.track > i { display: block; height: 100%; width: var(--p, 0%); background: var(--c-sunrise); border-radius: inherit; transform-origin: left center; }
.view:not([hidden]) .track > i { animation: fill var(--dur-slow) var(--ease-out) 150ms both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress .count { font-size: var(--fs-small); color: var(--c-charcoal); white-space: nowrap; }

/* Source labels: in-house carries the emblem and a filled tint; supplier carries a parcel icon and an outline. */
.src { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-note); font-weight: 500; color: var(--c-charcoal); line-height: 1.3; }
.src svg { width: 14px; height: 14px; flex: none; }
.src-house { background: var(--c-panel-strong); }
.src-supplier { background: var(--c-white); border: 1.5px dashed var(--c-charcoal); }

/* Status marks: shape plus a word, never colour alone */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--c-charcoal); white-space: nowrap; }
.mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.mark svg { width: 13px; height: 13px; }
.mark-done { background: var(--c-charcoal); color: var(--c-white); }
.mark-progress { border: 2px solid var(--c-sunrise); background: conic-gradient(var(--c-sunrise) 0 50%, transparent 50% 100%); background-clip: content-box; padding: 3px; }
.mark-todo { border: 2px solid var(--c-silver); }

/* Cards */
.card { background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card.lift:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-3); }
.card .photo { overflow: hidden; }
.card .photo img { transition: transform var(--dur-slow) var(--ease-out); }
.card.lift:hover .photo img { transform: scale(1.03); }
.panel { background: var(--c-panel); border-radius: var(--r-card); padding: var(--s-5); }

/* HOME */
.greet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.continue { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
.continue .text { padding: var(--s-7); display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); }
.continue .eyebrow { font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; }
.continue h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 300; }
.continue .photo { position: relative; min-height: 280px; }
.continue .photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 70%; }
.view:not([hidden]) .continue .photo img { animation: settle var(--dur-settle) var(--ease-out) both; }
@keyframes settle { from { transform: scale(1.04); opacity: .6; } to { transform: none; opacity: 1; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--s-8) 0 var(--s-5); }
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.courses .course-card { display: flex; flex-direction: column; }
.courses .course-card .body { flex: 1; align-content: start; }
.courses .course-card .body > .btn-text { align-self: end; justify-self: start; }
.course-card .photo { aspect-ratio: 16 / 10; }
.course-card .photo img { height: 100%; object-fit: cover; }
.course-card .body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.course-card .who { font-size: var(--fs-small); color: var(--c-muted); }
.chapters { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--c-hairline); display: grid; gap: var(--s-3); }
.chapters li { display: grid; gap: 6px; font-size: var(--fs-small); }
.chapters .src { justify-self: start; }

/* COURSE */
.course-head { display: grid; gap: var(--s-5); padding-bottom: var(--s-7); }
.course-head .meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.course-head .about { font-size: 19px; color: var(--c-charcoal); }
.course-head .progress { padding-top: var(--s-2); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-7); align-items: start; }
.group { background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--shadow-1); border: 1px solid var(--c-hairline); overflow: hidden; }
.group ol { list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; grid-template-areas: "num text status chev"; align-items: center; column-gap: var(--s-4); row-gap: 4px; width: 100%; min-height: 72px; padding: 14px var(--s-5); text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; color: var(--c-charcoal); transition: background var(--dur-fast) var(--ease-out); }
.group li + li .row::after { content: ""; position: absolute; top: 0; left: calc(var(--s-5) + 36px + var(--s-4)); right: 0; height: 1px; background: var(--c-hairline); }
.row:hover { background: var(--c-panel); }
.row.static { cursor: default; }
.row.static:hover { background: none; }
.row:focus-visible { outline-offset: -3px; border-radius: 4px; }
.row .num { grid-area: num; width: 36px; height: 36px; border-radius: 50%; background: var(--c-panel-strong); display: grid; place-items: center; font-weight: 500; font-size: 15px; color: var(--c-black); }
.row .t { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.row .t strong { font-weight: 500; color: var(--c-black); font-size: 17px; line-height: 1.35; }
.row .t span { font-size: var(--fs-small); color: var(--c-muted); }
.row .status { grid-area: status; }
.row .chev { grid-area: chev; width: 9px; height: 9px; border-top: 2px solid var(--c-silver); border-right: 2px solid var(--c-silver); transform: rotate(45deg); justify-self: center; }
.row.current::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-sunrise); }
.list-note { margin-top: var(--s-3); min-height: 24px; }
.side { display: grid; gap: var(--s-5); }
.side h2 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.side p + p { margin-top: var(--s-2); }
.other { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.other li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.other img { width: 88px; height: 60px; object-fit: cover; border-radius: var(--r-sm); }
.other strong { display: block; font-weight: 500; color: var(--c-black); font-size: 16px; line-height: 1.35; }
.other span { font-size: var(--fs-note); color: var(--c-muted); }
.check-cta { display: grid; gap: var(--s-3); }

/* LESSON */
.lesson-head { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); }
.lesson-head .meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; font-size: var(--fs-small); color: var(--c-muted); }
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-8); align-items: start; }
.reading > section { scroll-margin-top: calc(var(--h-bar) + 24px); }
.reading > section + section { margin-top: var(--s-7); }
.poster { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); background: var(--c-charcoal); }
.poster img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.55)); pointer-events: none; }
.poster .play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--c-black); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform var(--dur-fast) var(--ease-out); }
.poster .play:hover { transform: scale(1.05); }
.poster .play svg { width: 26px; height: 26px; margin-left: 4px; }
.poster .play:focus-visible { outline-color: var(--c-white); outline-offset: 4px; }
.poster .tag { position: absolute; z-index: 2; left: var(--s-5); bottom: var(--s-4); color: var(--c-white); font-size: var(--fs-small); font-weight: 500; }
.caption { margin-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.reading h2 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--c-hairline); }
.steps li { counter-increment: step; position: relative; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--c-hairline); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 13px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--c-charcoal); display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--c-black); }
.checknote { background: var(--c-cream); border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px); position: relative; border: 1px solid rgba(35,35,35,.06); }
.checknote::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-sunrise); }
.checknote h2 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.made-up { margin-top: var(--s-4); }
.toc { position: sticky; top: calc(var(--h-bar) + 32px); }
.toc h2 { font-family: var(--font-text); font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); margin-bottom: var(--s-2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--c-hairline); }
.toc a { position: relative; display: flex; align-items: center; min-height: 44px; padding-left: 18px; text-decoration: none; color: var(--c-muted); font-size: 16px; transition: color var(--dur-fast) var(--ease-out); }
.toc a:hover { color: var(--c-black); }
.toc a[aria-current] { color: var(--c-black); font-weight: 500; }
.toc a[aria-current]::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; background: var(--c-black); }
.toc .actions { margin-top: var(--s-5); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-8); }
.pn a { display: grid; gap: 4px; padding: var(--s-5); text-decoration: none; border: 1px solid var(--c-hairline); }
.pn a.next { text-align: right; }
.pn small { font-size: var(--fs-small); color: var(--c-muted); }
.pn strong { font-weight: 500; color: var(--c-black); font-size: 17px; line-height: 1.35; }
.finish { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-6); border-radius: var(--r-card); background: var(--c-panel); }
.finish h2 { font-size: var(--fs-h3); margin: 0 0 4px; }

/* CHECK */
.check-wrap { display: grid; justify-items: center; gap: var(--s-6); }
.check-wrap > header { text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.quiz { width: min(760px, 100%); padding: var(--s-7); }
.quiz .top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); font-size: var(--fs-small); }
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: var(--s-6); }
.segs i { height: 4px; border-radius: var(--r-pill); background: var(--c-light-gray); }
.segs i.on { background: var(--c-sunrise); }
.segs i.now { background: var(--c-charcoal); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s-5); width: 100%; }
legend h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; }
.opts { display: grid; gap: var(--s-3); }
.opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; min-height: 60px; padding: 12px var(--s-5); border-radius: var(--r-md); border: 1.5px solid var(--c-hairline); background: var(--c-white); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.opt:hover { border-color: var(--c-silver); background: var(--c-panel); }
.opt:has(input:checked) { border-color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-black); }
.opt input { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-charcoal); display: grid; place-items: center; cursor: pointer; background: var(--c-white); }
.opt input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-black); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.opt input:checked::before { transform: scale(1); }
.opt input:disabled { cursor: default; }
.opt.locked { cursor: default; }
.opt.locked:hover { background: var(--c-white); border-color: var(--c-hairline); }
.opt.locked:has(input:checked):hover { border-color: var(--c-black); }
.opt .txt { font-size: 17px; color: var(--c-black); }
.opt .verdict { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.opt .verdict svg { width: 20px; height: 20px; }
.opt .verdict:empty { display: none; }
.ico-wrong { color: var(--c-brick); }
.feedback { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-md); background: var(--c-panel); display: grid; gap: 6px; }
.feedback .h { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 22px; color: var(--c-black); }
.feedback .h .mark { width: 26px; height: 26px; }
.mark-wrong { border: 2px solid var(--c-brick); color: var(--c-brick); }
.quiz .actions { margin-top: var(--s-6); }
.quiz-msg { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-charcoal); }
.quiz-msg:empty { margin: 0; }
.result { text-align: center; display: grid; justify-items: center; gap: var(--s-4); }
.score { font-family: var(--font-head); font-weight: 300; font-size: clamp(64px, 8vw, 96px); line-height: 1; color: var(--c-black); }
.result .status { font-size: 19px; }
.result .mark { width: 28px; height: 28px; }

/* New in Sidebar: the Today page and its library list, like a Music library */
.today-eyebrow { font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); margin-bottom: var(--s-2); }
.lib { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
.lib > li { border-bottom: 1px solid var(--c-hairline); }
.lib-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 240px 190px; grid-template-areas: "thumb text prog act"; align-items: center; column-gap: var(--s-5); row-gap: var(--s-2); padding: var(--s-4) 0; }
.lib-row .thumb { grid-area: thumb; width: 112px; height: 72px; border-radius: var(--r-sm); object-fit: cover; }
.lib-row .t { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.lib-row h3 { font-size: var(--fs-h4); }
.lib-row .who { font-size: var(--fs-small); color: var(--c-muted); }
.lib-row .progress { grid-area: prog; gap: var(--s-3); }
.lib-row .act { grid-area: act; justify-self: end; }
.lib-row .chapters { grid-column: 2 / -1; margin: 0; }

/* New in Sidebar: the course header as an album page, artwork beside the title */
.album { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-7); align-items: start; padding: var(--s-2) 0 var(--s-7); }
.album .art { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 1 / 1; }
.album .art img { height: 100%; object-fit: cover; object-position: 35% 60%; }
.album .course-head { padding-bottom: 0; }

/* New in Sidebar: the detail list, a Mac list view with column headings */
.dlist-head, .drow { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 220px) 140px 16px; grid-template-areas: "num text where status chev"; align-items: center; column-gap: var(--s-4); }
.dlist-head { padding: 0 var(--s-5) var(--s-2); font-size: var(--fs-note); font-weight: 500; color: var(--c-muted); }
.dlist-head span:nth-child(1) { grid-column: 1 / 3; }
.drow { position: relative; width: 100%; min-height: 64px; padding: 10px var(--s-5); text-decoration: none; color: var(--c-charcoal); transition: background var(--dur-fast) var(--ease-out); }
a.drow:hover { background: var(--c-panel); }
.drow:focus-visible { outline-offset: -3px; border-radius: 4px; }
.group li + li .drow::after { content: ""; position: absolute; top: 0; left: calc(var(--s-5) + 36px + var(--s-4)); right: 0; height: 1px; background: var(--c-hairline); }
.drow .num { grid-area: num; width: 36px; height: 36px; border-radius: 50%; background: var(--c-panel-strong); display: grid; place-items: center; font-weight: 500; font-size: 15px; color: var(--c-black); }
.drow strong { grid-area: text; font-weight: 500; color: var(--c-black); font-size: 17px; line-height: 1.35; }
.drow .where { grid-area: where; font-size: var(--fs-small); color: var(--c-muted); }
.drow .status { grid-area: status; }
.drow .chev { grid-area: chev; width: 9px; height: 9px; border-top: 2px solid var(--c-silver); border-right: 2px solid var(--c-silver); transform: rotate(45deg); justify-self: center; }
.drow.current::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-sunrise); }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
.about-grid h2 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.about-grid .panel p + p { margin-top: var(--s-2); }
.others { margin-top: var(--s-8); }
.others h2 { font-size: var(--fs-h4); margin-bottom: var(--s-4); }
.others .other { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

/* New in Sidebar: lesson section pills and the sticky bottom bar in the content pane */
.view[data-view="lesson"] { padding-bottom: 0; }
.instage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-7); }
.instage h2 { font-family: var(--font-text); font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); margin-right: var(--s-2); }
.instage ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.instage a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--c-hairline); text-decoration: none; color: var(--c-charcoal); font-size: var(--fs-small); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.instage a:hover { background: var(--c-panel); }
.instage a[aria-current] { border-color: var(--c-black); color: var(--c-black); font-weight: 500; }
.reading > section { scroll-margin-top: var(--s-5); }
.pn-note { margin: var(--s-3) 0 var(--s-8); }
/* The reading pane runs the full width of the content pane, so the poster is a little wider than 16:9 to keep the Quote steps near the fold. */
.reading .poster { aspect-ratio: 2 / 1; }
.pn-bar { position: sticky; bottom: 0; z-index: 40; margin-top: var(--s-6); background: var(--c-side); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--c-hairline); }
.pn-bar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3) 0; }
.pn-bar a.step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico small" "ico title"; column-gap: var(--s-3); align-items: center; min-height: 48px; padding: 4px var(--s-3); border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.pn-bar a.step:hover { background: var(--c-panel); }
.pn-bar a.step.next { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "small ico" "title ico"; text-align: right; }
.pn-bar .step svg { grid-area: ico; width: 16px; height: 16px; color: var(--c-black); }
.pn-bar .step small { grid-area: small; font-size: var(--fs-note); color: var(--c-muted); }
.pn-bar .step strong { grid-area: title; font-weight: 500; color: var(--c-black); font-size: var(--fs-small); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Check view sits left in the pane, like the rest of the app */
.check-wrap { justify-items: stretch; }
.check-wrap > header { text-align: left; justify-items: start; }

/* Footer */
footer.site { border-top: 1px solid var(--c-hairline); padding: var(--s-6) 0 var(--s-7); font-size: var(--fs-small); color: var(--c-muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; }
footer.site .left { display: flex; align-items: center; gap: 12px; color: var(--c-charcoal); }
footer.site .left svg { height: 16px; width: auto; color: var(--c-charcoal); }
footer.site a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-charcoal); text-underline-offset: 3px; }

/* Responsive */
@media (width <= 1024px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .lesson-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .toc { position: static; order: -1; }
  .toc ol { display: flex; flex-wrap: wrap; border-left: 0; gap: var(--s-2); }
  .toc a { padding: 0 16px; border: 1px solid var(--c-hairline); border-radius: var(--r-pill); }
  .toc a[aria-current] { border-color: var(--c-black); }
  .toc a[aria-current]::before { display: none; }
  .toc .actions { display: none; }
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 760px) {
  :root { --page: calc(100% - 40px); }
  .view { padding: var(--s-5) 0 var(--s-8); }
  .continue { grid-template-columns: 1fr; }
  .continue .photo { order: -1; min-height: 220px; }
  .continue .text { padding: var(--s-5); }
  .courses { grid-template-columns: minmax(0, 1fr); }
  .brand .app, .me .who { display: none; }
  .mainnav a { padding: 0 12px; }
  .row { grid-template-columns: 36px minmax(0, 1fr) 16px; grid-template-areas: "num text chev" "num status chev"; padding: 14px var(--s-4); }
  .group li + li .row::after { left: calc(var(--s-4) + 36px + var(--s-4)); }
  .pn { grid-template-columns: 1fr; }
  .pn a.next { text-align: left; }
  .quiz { padding: var(--s-5); }
  .opt { grid-template-columns: 24px minmax(0, 1fr); padding: 12px var(--s-4); }
  .opt .verdict { grid-column: 2; }
  .spec > div { grid-template-columns: 1fr; gap: var(--s-2); }
  .marks, .comp { grid-template-columns: 1fr; }
  .finish { padding: var(--s-5); }
}

/* Responsive, Sidebar variation */
@media (width <= 1240px) {
  .lib-row { grid-template-columns: 96px minmax(0, 1fr) 200px; grid-template-areas: "thumb text prog" "thumb text act"; }
  .lib-row .thumb { width: 96px; height: 64px; }
  .album { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (width <= 960px) {
  .pane { margin-left: 0; }
  .topbar {
    display: flex; align-items: center; gap: var(--s-2); position: sticky; top: 0; z-index: 50; height: var(--h-bar); padding: 0 var(--s-3);
    background: var(--c-side); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--c-hairline);
  }
  .topbar .brand svg { height: 18px; }
  .sidebar { width: min(var(--w-side), calc(100% - 56px)); background: linear-gradient(var(--c-side-tint), var(--c-side-tint)), var(--c-white); transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .sidebar.open { transform: none; visibility: visible; box-shadow: var(--shadow-3); transition: transform var(--dur-base) var(--ease-out), visibility 0s; }
  .sidebar .side-close { display: inline-flex; }
  .reading > section { scroll-margin-top: calc(var(--h-bar) + 24px); }
}
@media (width <= 760px) {
  .lib-row { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb text" "thumb prog" "thumb act"; column-gap: var(--s-4); }
  .lib-row .thumb { width: 72px; height: 48px; align-self: start; margin-top: 4px; }
  .lib-row .act { justify-self: start; }
  .lib-row .chapters { grid-column: 1 / -1; }
  .album { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .album .art { aspect-ratio: 2 / 1; }
  .dlist-head { display: none; }
  .drow { grid-template-columns: 36px minmax(0, 1fr) 16px; grid-template-areas: "num text chev" "num where chev" "num status chev"; row-gap: 2px; padding: 12px var(--s-4); }
  .group li + li .drow::after { left: calc(var(--s-4) + 36px + var(--s-4)); }
  .others .other { grid-template-columns: minmax(0, 1fr); }
  .pn-bar .wrap { gap: var(--s-2); }
  .pn-bar a.step { grid-template-columns: 16px; grid-template-areas: "ico"; min-width: 44px; justify-items: center; padding: 4px; }
  .pn-bar a.step.next { grid-template-columns: 16px; grid-template-areas: "ico"; }
  .pn-bar .step small, .pn-bar .step strong { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pn-bar .btn { padding: 0 18px; }
  .brand .app { display: block; }
  .pn-bar a.step.next { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================================================================
   APP ADDITIONS, 2026-10-25. Composed by hand on the demo's tokens (see the header). Nothing above this line is new.
   ================================================================ */

/* Sidebar foot: the person, linking to Profile. Same grid as the demo's .side-me, made a link. */
a.side-me { text-decoration: none; color: var(--c-charcoal); transition: background var(--dur-fast) var(--ease-out); }
a.side-me:hover { background: var(--c-panel-strong); }
a.side-me:focus-visible { outline-offset: -3px; }
a.side-me[aria-current="page"] { background: var(--c-white); }
.side-me .who-line { display: block; color: var(--c-muted); font-size: var(--fs-note); }
.side-count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--c-charcoal); color: var(--c-white); font-size: 12px; font-weight: 500; display: inline-grid; place-items: center; }
.side-link .label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-empty { padding: 0 var(--s-3); }
.footer-links { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }

/* Page head: one h1 per page, optional eyebrow, lede and actions. */
.page-head { display: grid; gap: var(--s-4); padding-bottom: var(--s-7); }
.page-head .eyebrow { font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); }
.page-head .lede { font-size: 19px; color: var(--c-charcoal); }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
/* The page head's meta line: several short items side by side. Until 2026-10-25 it had no rule, so the admin person page read "amaddrell@...com.auLast seen today" with no space. */
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.section-title { font-size: var(--fs-h4); margin: 0 0 var(--s-4); }
.stack { display: grid; gap: var(--s-6); }
.stack-sm { display: grid; gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }

/* Flash messages, after a post, redirect, get. Shape and word, never colour alone. */
.flash { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-panel); margin-bottom: var(--s-6); color: var(--c-charcoal); }
.flash .mark { margin-top: 1px; }
.flash strong { font-weight: 500; color: var(--c-black); }
.flash-error { background: var(--c-white); border: 1.5px solid var(--c-brick); }
.flash-error .mark { border: 2px solid var(--c-brick); color: var(--c-brick); }
.flash-info .mark { border: 2px solid var(--c-charcoal); color: var(--c-charcoal); font-size: 13px; font-weight: 700; font-family: var(--font-text); }

/* Forms. Native controls with visible labels; a 3:1 boundary uses the muted ink, the only token that reaches it on white. */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field > label, .field > .label, .field legend { font-size: var(--fs-small); font-weight: 500; color: var(--c-charcoal); }
.field .hint { font-size: var(--fs-note); color: var(--c-muted); }
.field .error { font-size: var(--fs-small); color: var(--c-brick); font-weight: 500; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="number"], .field input[type="search"], .field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: var(--h-button); padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid var(--c-muted); background: var(--c-white);
  font: inherit; font-size: 16px; color: var(--c-black); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 160px; resize: vertical; line-height: var(--lh-body); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-charcoal); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; border-color: var(--c-black); }
.field [aria-invalid="true"] { border-color: var(--c-brick); }
.check { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: 16px; color: var(--c-charcoal); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--c-black); flex: none; cursor: pointer; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-top: var(--s-2); }
.inline-form { display: inline; margin: 0; }
button.btn-text { font-family: var(--font-text); }

/* Tables inside the demo's .group card. */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.data-table th, .data-table td { text-align: left; vertical-align: middle; padding: 14px var(--s-4) 14px 0; border-bottom: 1px solid var(--c-hairline); }
.data-table th:first-child, .data-table td:first-child { padding-left: var(--s-5); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table th { font-size: var(--fs-note); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.data-table td strong { font-weight: 500; color: var(--c-black); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Filter chips: the lesson's section pills, as links. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--c-hairline); text-decoration: none; color: var(--c-charcoal); font-size: var(--fs-small); transition: background var(--dur-fast) var(--ease-out); }
.chips a:hover { background: var(--c-panel); }
.chips a[aria-current] { border-color: var(--c-black); color: var(--c-black); font-weight: 500; }

/* Empty state. (The placeholder panel, .not-built, was removed 2026-10-25 with src/views/placeholder.js: every page is built.) */
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); border-radius: var(--r-card); background: var(--c-panel); }
.empty h2 { font-size: var(--fs-h4); }

/* Rendered Markdown. Ordered lists take the demo's numbered steps. No measure on the text. */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--s-7); margin-bottom: var(--s-2); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-6); }
.prose ul { padding-left: 1.2em; }
.prose ul li + li { margin-top: var(--s-2); }
.prose ol { list-style: none; margin-left: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--c-hairline); }
.prose ol > li { counter-increment: step; position: relative; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--c-hairline); }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 13px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--c-charcoal); display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--c-black); }
.prose a { text-underline-offset: 3px; }
.prose code { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: var(--c-panel-strong); padding: 1px 6px; border-radius: 6px; }
.prose blockquote { margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-cream); border: 1px solid rgba(35,35,35,.06); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--c-hairline); vertical-align: top; }
.prose th { font-weight: 500; color: var(--c-muted); }
/* A PDF document in a stage (markdown.js renderDocument): a row with Open and Download, then its page previews. Spans, displayed as blocks, because markdown-it wraps an image in a <p>. */
.prose .doc { display: block; border: 1px solid var(--c-hairline); border-radius: var(--r-md); overflow: hidden; }
.prose .doc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: 12px 16px; background: var(--c-panel-strong); }
.prose .doc-title { font-weight: 500; }
.prose .doc-actions { display: flex; gap: var(--s-4); }
.prose .doc-page { display: block; border-top: 1px solid var(--c-hairline); }
.prose .doc-page img { display: block; width: 100%; height: auto; }
.prose .doc-note { display: block; padding: 10px 16px; border-top: 1px solid var(--c-hairline); font-size: var(--fs-small); color: var(--c-muted); }

/* Signed-out pages: no sidebar, one card in the middle. */
.solo-page { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); background: var(--c-panel); }
.solo-card { width: min(520px, 100%); }
.solo-card .photo { aspect-ratio: 16 / 9; }
.solo-card .photo img { height: 100%; object-fit: cover; }
.solo-card .body { padding: var(--s-6); display: grid; gap: var(--s-4); justify-items: start; }
.solo-card .brand svg { height: 18px; }
.solo-card h1 { font-family: var(--font-head); font-weight: 300; font-size: clamp(34px, 3.4vw, 44px); line-height: 1.06; color: var(--c-black); }
.btn-ms { background: var(--c-white); color: var(--c-black); border-color: var(--c-charcoal); }
.btn-ms:hover { background: var(--c-panel); }
.btn-ms svg { width: 18px; height: 18px; }
.person-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: 100%; }
.person-list button { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: center; min-height: 60px; padding: 10px var(--s-4); text-align: left; border-radius: var(--r-md); border: 1.5px solid var(--c-hairline); background: var(--c-white); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.person-list button:hover { border-color: var(--c-silver); background: var(--c-panel); }
.person-list strong { display: block; font-weight: 500; color: var(--c-black); }
.person-list span span { display: block; font-size: var(--fs-note); color: var(--c-muted); }

/* Footer sign-out button reads as the footer's links. */
footer.site .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-charcoal); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (width <= 760px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .page-head { padding-bottom: var(--s-6); }
  .data-table th:first-child, .data-table td:first-child { padding-left: var(--s-4); }
  .solo-card .body { padding: var(--s-5); }
}

/* ================================================================
   APP ADDITIONS, part 2: the builders' shared-file requests, 2026-10-25 (fix builder).
   WHY. Until 2026-10-25, 17 view files carried about 130 inline style attributes, because only the foundation could edit this sheet and the builders' requests for classes were never made (review finding 9). Each attribute is now a named class below, read against screenshots taken before and after the move at 1440 and 390.
   SPACING UTILITIES CARRY !important ON PURPOSE, as Bootstrap's do: they replace inline style attributes, which beat every ordinary rule in this sheet, and several sit on elements a more specific rule already spaces (.quiz .actions, .about-grid h2, .section-title, .panel). Without it the move would have changed the spacing it was meant to keep. Component classes carry no !important.
   Nothing here adds a colour or a size the token block does not already hold.
   ================================================================ */

/* Spacing utilities (the token scale only). */
.m-0 { margin: 0 !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-7 { margin-top: var(--s-7) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.mb-7 { margin-bottom: var(--s-7) !important; }
.ml-2 { margin-left: var(--s-2) !important; }
.ml-3 { margin-left: var(--s-3) !important; }
.pt-3 { padding-top: var(--s-3) !important; }
.p-4 { padding: var(--s-4) !important; }
.spacer-8 { height: var(--s-8); }

/* Small layout and text helpers. */
.d-grid { display: grid; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.content-start { align-content: start; }
.align-end { align-items: end; }
.full-width { width: 100%; }
.min-200 { min-width: 200px; }
.card-pad { padding: var(--s-6); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; }
.spread { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); align-items: center; }
.actions-center { justify-content: center; }
.actions.nowrap-row { flex-wrap: nowrap; }
.actions.meta-actions { gap: var(--s-2) var(--s-5); }
.status.status-tight { gap: var(--s-2); }
.ink { font-weight: 500; color: var(--c-black); }
.text-black { color: var(--c-black); }
.medium { font-weight: 500; }
.pre-line { white-space: pre-line; }
.pre-wrap { white-space: pre-wrap; }
.break-anywhere { overflow-wrap: anywhere; }
.note-line { display: block; }
.stat-line { font-size: 19px; color: var(--c-black); }
.error-text { color: var(--c-brick); font-weight: 500; font-size: var(--fs-small); }
.offscreen { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/*
  Targets of 44px (BUILD-SPEC.md) for small text links, without changing the line they sit on. Vertical padding on an INLINE box widens its box and its click area but never the line box, so a link's box reaches 44px (an inline box's content area is at least 1em) and nothing moves. Table text links take it automatically.
  NOT inline-flex with a negative margin: tried first on 2026-10-25, it shortened every table row whose link wraps (a link three lines tall at 390px gave back 20px) and moved the Admin Courses table at 390. Measured by the before and after screenshots.
*/
.tap, .data-table td a:not(.btn):not(.btn-text) { padding-block: calc((44px - 1em) / 2); }

/* Scrolling table wrappers can take focus, so a keyboard user can scroll them (WCAG 2.1.1); the focus ring sits inside the card's rounded edge. */
.table-scroll:focus-visible { outline-offset: -3px; }

/* Learner pages. */
.other .other-solo { grid-template-columns: minmax(0, 1fr); }
.ask-panel { scroll-margin-top: var(--s-5); }
.check-title { font-size: clamp(34px, 3.4vw, 48px); }
.segs { grid-template-columns: repeat(var(--n, 4), 1fr); }
.mark.mark-20 { width: 20px; height: 20px; }
.def-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0; }
.def-list dd { margin: 0; }
/* A real video (the demo only had a poster, whose dark gradient would sit over a player). */
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); background: var(--c-charcoal); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Editor. */
.move-btn { padding: 0; }
.move-btn:disabled { opacity: .4; cursor: default; }
.edit-list-head { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: none; }
.edit-list-head span:nth-child(2) { grid-column: 3; }
.row.row-clash { box-shadow: inset 4px 0 0 var(--c-sunrise); }
.preview-card { padding: var(--s-6); display: grid; gap: var(--s-5); }
.legend-float { float: left; width: 100%; margin-bottom: 0; }
.compare-table { table-layout: fixed; }
.compare-table th { width: 50%; white-space: normal; }
.diff-only { background: var(--c-cream); box-shadow: inset 3px 0 0 var(--c-sunrise); }
.diff-gap { opacity: .55; }
.diff-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-sign { display: inline-block; width: 1.2em; }

/* Checkbox groups (components.js checkboxGroup): a grid of tall rows for the admin lists, a plain list for the deal pack ticks. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 var(--s-5); }
.check-list { display: grid; gap: 0; }
.check.check-tall { align-items: flex-start; padding-block: 10px; }
.hint-tuck { margin-top: calc(-1 * var(--s-4)); }

/* Admin. */
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin: 0 0 var(--s-5); }
.filter-form .field { min-width: 220px; }
.inbox-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-5); }
.inbox-list { list-style: none; margin: -1px 0 0; padding: 0; }
.inbox-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-5); border-top: 1px solid var(--c-hairline); }
.inbox-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--c-panel-strong); display: grid; place-items: center; font-weight: 500; font-size: 15px; color: var(--c-black); }
.inbox-main { display: grid; gap: var(--s-3); min-width: 0; }
.inbox-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); align-items: baseline; }
.inbox-titles { display: grid; gap: 2px; min-width: 0; }
.inbox-title { font-size: 17px; font-weight: 500; color: var(--c-black); line-height: 1.35; }

/* Registrations, deal pack issues. */
.grid-2.opts { gap: var(--s-3); }
.email-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--c-charcoal); }

/* ================================================================
   APP ADDITIONS, part 3: the collapsible sidebar, depth and motion, 2026-10-25 (polish builder).
   WHY. His words on first seeing the running app: "looks great, love the sidebar but can we make collapsable. also for the page content most of it feels little flat can we give more depth and animation please keep it premium dont over do it." Earlier that day he turned down five designs as "a little too much", so all of this is restrained: one faint canvas, the token shadows, short ease-out moves; nothing loops, bounces or follows the pointer, nothing runs longer than 600ms, and all of it is off under reduced motion.
   The :root token block at the top is unchanged; the new tokens are in the :root rule just below.
   ================================================================ */

:root {
  --w-rail: 72px;
  /* The content canvas: Charcoal at 3 per cent on white, #F8F8F8. Muted text (--c-muted) on it measures about 6.0:1, Charcoal about 14.9:1. */
  --c-canvas: color-mix(in srgb, var(--c-charcoal) 3%, var(--c-white));
  /* At rest: --shadow-1 with a hairline ring, so a white surface still has an edge on the canvas. On hover: --shadow-2 with a lighter ring. */
  --shadow-float: 0 0 0 1px rgba(35,35,35,.05), var(--shadow-1);
  --shadow-lift: 0 0 0 1px rgba(35,35,35,.04), var(--shadow-2);
  --shadow-up: 0 -1px 2px rgba(0,0,0,.03), 0 -8px 24px rgba(0,0,0,.06);
  --dur-arrive: 250ms;
  --dur-fill: 600ms;
}

/* ---------- The collapsible sidebar: 280px or a 72px icon rail, wider than 960px only ---------- */
.brand-mark { display: none; }
.brand-mark svg { width: 22px; height: 22px; }
.side-tip {
  position: fixed; z-index: 90; left: 0; top: 0; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--c-charcoal); color: var(--c-white); font-size: var(--fs-note); font-weight: 500; line-height: 1.3; white-space: nowrap;
  box-shadow: var(--shadow-2); animation: fade var(--dur-fast) var(--ease-out);
}
@media (width > 960px) {
  /* The sidebar is a window onto a 280px column: the column never changes width, the window does, so no text reflows while it moves. */
  .sidebar { overflow: hidden; }
  .side-top, .side-nav, .side-me { width: var(--w-side); }
  /* The move is animated ONLY while the toggle is working (app.js sets data-side-moving for 400ms). MEASURED 2026-10-25: with the transitions always on, a full-page screenshot (which resizes the viewport) caught the pane and the sidebar mid-transition and drew the content 115px under the sidebar; a window resize would do the same. */
  :root[data-side-moving] .sidebar { transition: width var(--dur-base) var(--ease-out); }
  :root[data-side-moving] .pane { transition: margin-left var(--dur-base) var(--ease-out); }
  .side-toggle { width: 44px; padding: 0; justify-content: center; flex: none; color: var(--c-charcoal); }

  :root[data-sidebar="rail"] .sidebar { width: var(--w-rail); }
  :root[data-sidebar="rail"] .pane { margin-left: var(--w-rail); }
  :root[data-sidebar="rail"] .side-top, :root[data-sidebar="rail"] .side-nav, :root[data-sidebar="rail"] .side-me { width: var(--w-rail); }
  :root[data-sidebar="rail"] .side-top { flex-direction: column; justify-content: flex-start; gap: var(--s-1); padding: var(--s-4) 0 var(--s-3); }
  :root[data-sidebar="rail"] .sidebar .brand { justify-content: center; min-width: 44px; }
  :root[data-sidebar="rail"] .sidebar .brand > svg, :root[data-sidebar="rail"] .sidebar .brand .app { display: none; }
  :root[data-sidebar="rail"] .sidebar .brand-mark { display: block; }
  :root[data-sidebar="rail"] .side-nav { scrollbar-width: none; }
  /* Words hide visually but stay the accessible names (the .sr-only technique), so a screen reader hears the same sidebar collapsed or not. */
  :root[data-sidebar="rail"] .side-h, :root[data-sidebar="rail"] .side-link .label-text, :root[data-sidebar="rail"] .side-stage .stage-title, :root[data-sidebar="rail"] .side-me-text, :root[data-sidebar="rail"] .side-empty {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  :root[data-sidebar="rail"] .side-group + .side-group { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-hairline); }
  :root[data-sidebar="rail"] .side-link { grid-template-columns: 22px; justify-content: center; padding: 6px 0; }
  :root[data-sidebar="rail"] .side-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--c-white); }
  :root[data-sidebar="rail"] .side-stage { grid-template-columns: 22px 12px; column-gap: 4px; }
  :root[data-sidebar="rail"] .side-stage .mark { width: 12px; height: 12px; }
  :root[data-sidebar="rail"] .side-stage .mark svg { width: 8px; height: 8px; }
  :root[data-sidebar="rail"] .side-stage .mark-progress { padding: 1.5px; }
  :root[data-sidebar="rail"] .side-me { grid-template-columns: 34px; justify-content: center; padding: var(--s-4) 0; }
}
@media (width <= 960px) {
  .sidebar .side-toggle { display: none; }
  .side-tip { display: none; }
}

/* ---------- Depth: a faint canvas, white surfaces floating on it ---------- */
.pane { background: var(--c-canvas); min-height: 100vh; }
.pane .card { box-shadow: var(--shadow-float); }
.pane .panel, .pane .empty, .pane .finish, .pane .flash { background: var(--c-white); box-shadow: var(--shadow-float); }
/* A panel or empty state INSIDE a white card keeps the demo's tint: a white box floating inside a white box reads as clutter. */
.pane :is(.card, .group) :is(.panel, .empty) { background: var(--c-panel); box-shadow: none; }
.group { border-color: transparent; box-shadow: var(--shadow-float); }
/* The Today and Courses library: each course row is its own floating white row. The photograph sits in a frame (.thumb) so it can scale inside its rounded edge. */
.lib { border-top: 0; display: grid; gap: var(--s-3); }
.lib > li { border-bottom: 0; }
.lib-row { background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: var(--s-4) var(--s-5); }
.lib-row .thumb { display: block; overflow: hidden; }
.lib-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (width <= 760px) { .lib-row { padding: var(--s-4); } }

/* Interactive surfaces lift 2px on hover and settle on press; their photographs scale to 1.03 inside the frame over 400ms. Pointer devices only, so a tap never leaves a card raised. */
.pane .card.continue, .lib-row { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lib-row .thumb img, .continue .photo img { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) {
  .pane .card.continue:hover, .lib-row:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
  .pane .card.continue:active, .lib-row:active { transform: none; box-shadow: var(--shadow-float); transition-duration: var(--dur-fast); }
  .pane .card.continue:hover .photo img, .lib-row:hover .thumb img { transform: scale(1.03); }
}

/* Buttons give a little on press. */
.btn { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.icon-btn { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
button.btn-text { transition: transform var(--dur-fast) var(--ease-out); }
.btn:active, .icon-btn:active, button.btn-text:active { transform: scale(.98); }

/* ---------- Arrival ---------- */
/*
  The page's sections (the direct children of .wrap) fade and rise 10px, 50ms apart, at most six steps, all done by 500ms (250ms delay plus 250ms). This replaces the demo's per-element .enter classes, which the builders applied unevenly. The fill is BACKWARDS only: at rest the element is its plain visible self, so content is never left hidden if an animation does not run, and a hover transform on a section (the Continue card) is never pinned by a finished animation.
*/
.view:not([hidden]) .enter { animation: none; }
.view:not([hidden]) > .wrap > * { animation: rise var(--dur-arrive) var(--ease-out) backwards; }
.view:not([hidden]) > .wrap > :nth-child(1) { animation-delay: 0ms; }
.view:not([hidden]) > .wrap > :nth-child(2) { animation-delay: 50ms; }
.view:not([hidden]) > .wrap > :nth-child(3) { animation-delay: 100ms; }
.view:not([hidden]) > .wrap > :nth-child(4) { animation-delay: 150ms; }
.view:not([hidden]) > .wrap > :nth-child(5) { animation-delay: 200ms; }
.view:not([hidden]) > .wrap > :nth-child(n+6) { animation-delay: 250ms; }
/* Reached by a view transition (public/js/boot.js): the content already rose with the cross-fade, so it does not rise again. */
:root[data-nav="vt"] .view > .wrap > * { animation: none; }
/* The demo's photograph settle ran 1200ms with a forwards fill; held to 600ms and a backwards fill, so it is inside the brief's ceiling and the hover scale above still works. */
.view:not([hidden]) .continue .photo img { animation-duration: var(--dur-fill); animation-fill-mode: backwards; }
/* Progress bars fill from 0 to their value once, 600ms ease-out. */
.view:not([hidden]) .track > i { animation-duration: var(--dur-fill); animation-delay: 100ms; }

/* ---------- Small touches ---------- */
/* Mark as read: the tick pops in and draws itself once, on the page the read lands on (src/views/learn/stage.js adds .just-read). */
.just-read .mark-done { animation: tick-pop var(--dur-base) var(--ease-out) 200ms backwards; }
.just-read .mark-done svg { animation: tick-draw var(--dur-base) var(--ease-out) 300ms backwards; }
@keyframes tick-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes tick-draw { from { clip-path: inset(0 100% 0 0); } }
/* Quiz feedback slides in under the answer. */
.quiz .feedback { animation: rise var(--dur-base) var(--ease-out) 150ms backwards; }
/* The lesson bar takes a shadow only while content scrolls under it (public/js/app.js toggles .stuck). */
.pn-bar { transition: box-shadow var(--dur-base) var(--ease-out); }
.pn-bar.stuck { box-shadow: var(--shadow-up); }
.pn-sentinel { height: 1px; margin-top: -1px; }

/* ---------- Page to page ---------- */
/* Cross-document view transitions: the sidebar keeps its own name (view-transition-name: sidebar, above) so it stands still while the content cross-fades with an 8px rise. Browsers without them simply load the page. */
@view-transition { navigation: auto; }
main { view-transition-name: page; }
::view-transition-group(page) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); }
::view-transition-old(page) { animation: vt-out var(--dur-fast) var(--ease-out) both; }
::view-transition-new(page) { animation: vt-in var(--dur-base) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Reduced motion: no transforms, instant states ---------- */
/* The demo's block above already stops every animation and transition; this also stops the view transition and the hover and press transforms, which would otherwise still jump. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .pane .card.continue:hover, .lib-row:hover, .pane .card.continue:active, .lib-row:active,
  .pane .card.continue:hover .photo img, .lib-row:hover .thumb img, .card.lift:hover, .card.lift:hover .photo img,
  .btn:active, .icon-btn:active, button.btn-text:active, .poster .play:hover { transform: none; }
}