/*
  A2K design system: tokens
  Every colour, size, space, radius, shadow and timing used on an A2K surface comes from here.
  If a value you need is missing, add it here with a reason in DESIGN.md. Never type a raw value in a page.

  Layers
    1. Primitives   the raw ramps (paper, ink, green, sage, copper, signal). Pages never use these directly.
    2. Roles        what a value is for (--bg, --text, --accent ...). Pages use only these.
    3. Brand layer  a client brand file (brands/<client>.css) overrides roles, never primitives.

  Themes
    :root                     A2K light (paper). The default for everything.
    [data-theme="dark"]       Dark operate surfaces (rare; the portal at night, a TV board).
    .surface-brand            The deep green A2K page: documents, the portal sign-in, the one dark band on a landing page.
*/

:root {
  /* ---------- 1. Primitives ---------- */

  /* Paper: neutrals tinted very slightly toward A2K green. Low saturation, so a surface never reads as "green". */
  --paper-0: #fcfdfb;
  --paper-50: #f6f8f4;
  --paper-100: #ebefe8;
  --paper-150: #e2e7de;
  --paper-200: #d5dcd0;
  --paper-300: #bcc5b6;
  --paper-400: #98a392;

  /* Ink: the text ramp, same tint. */
  --ink-600: #5a665d;
  --ink-700: #435047;
  --ink-800: #2b362f;
  --ink-900: #14201a;

  /* Green: the A2K brand colour. 800 is the brand. */
  --green-100: #dce6dd;
  --green-200: #c3d3c6;
  --green-700: #2a4a39;
  --green-800: #1e382a; /* the A2K green, same as the live site, portal and documents */
  --green-900: #16291f; /* hover on green fills (the live site's deep-hover) */
  --green-950: #10201a; /* press */

  /* Sage: the "AI" in the logo. A mark colour, never body text (3.2:1 on paper). */
  --sage-500: #6f8c78;
  --sage-300: #a9bcae;

  /* Copper: money only. Totals, prices, amounts due. */
  --copper-100: #f1e4d8;
  --copper-600: #9b5a2a;
  --copper-300: #d49a6a;

  /* Signals: the portal's own values, toned to sit inside the paper palette. */
  --signal-positive: #2f6b45;
  --signal-positive-soft: #dcebdf;
  --signal-negative: #9b2c2c;
  --signal-negative-soft: #f2dada;
  --signal-warning: #8a5a12;
  --signal-warning-soft: #f3e6cc;

  /* ---------- 2. Roles (light, A2K) ---------- */

  --bg: var(--paper-100);
  --surface: var(--paper-50);
  --surface-raised: var(--paper-0);
  --surface-sunken: var(--paper-150);
  --surface-hover: rgb(20 32 26 / 0.04);
  --surface-active: rgb(20 32 26 / 0.07);

  /* Ledger rules: green-tinted hairlines, a touch firmer than grey UI (matches the site's #C6D2C0 rule on paper). */
  --line: rgb(30 56 42 / 0.13);
  --line-strong: rgb(30 56 42 / 0.24);

  --text: var(--ink-900);
  --text-2: var(--ink-700);
  --text-3: var(--ink-600);
  --text-disabled: var(--paper-400);

  --brand: var(--green-800);
  --brand-mark: var(--sage-500);

  --accent: var(--green-800);
  --accent-hover: var(--green-900);
  --accent-press: var(--green-950);
  --accent-soft: var(--green-100);
  --on-accent: var(--paper-50);

  --money: var(--copper-600);
  --money-soft: var(--copper-100);

  --positive: var(--signal-positive);
  --positive-soft: var(--signal-positive-soft);
  --negative: var(--signal-negative);
  --negative-soft: var(--signal-negative-soft);
  --warning: var(--signal-warning);
  --warning-soft: var(--signal-warning-soft);

  --focus-ring: rgb(30 56 42 / 0.32);
  --selection: var(--green-100);

  /* Charts: one lead series, the rest neutral. */
  --chart-lead: var(--green-800);
  --chart-2: var(--sage-500);
  --chart-3: var(--copper-600);
  --chart-muted: var(--paper-300);
  --chart-muted-2: var(--paper-400);
  --chart-grid: rgb(22 33 26 / 0.08);
  --chart-label: var(--ink-600);

  /* ---------- Type ---------- */

  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* size / line height pairs. 12px is the floor for any text. */
  --text-xs: 12px;   --leading-xs: 16px;    /* meta, counts, mono labels */
  --text-sm: 13px;   --leading-sm: 20px;    /* secondary text, captions, dense tables */
  --text-md: 14px;   --leading-md: 20px;    /* app body, nav, buttons, table rows */
  --text-base: 16px; --leading-base: 26px;  /* reading body on pages and documents */
  --text-lg: 18px;   --leading-lg: 28px;    /* lead paragraph, hero subhead */
  --text-xl: 20px;   --leading-xl: 28px;    /* card and section titles in apps */
  --text-2xl: 24px;  --leading-2xl: 32px;   /* app page title */
  --text-3xl: 32px;  --leading-3xl: 36px;   /* key figures, page title on sites */
  --text-4xl: 40px;  --leading-4xl: 44px;   /* section headline on sites */
  --text-5xl: 56px;  --leading-5xl: 60px;   /* hero headline, desktop */
  --text-6xl: 72px;  --leading-6xl: 74px;   /* rare: one hero per site */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600; /* rare emphasis only; never above 600 */

  --tracking-display: -0.02em; /* 40px and up */
  --tracking-hero: -0.03em;    /* 56px and up */
  --tracking-normal: 0;
  --tracking-meta: 0.01em;     /* small mono meta */

  /* ---------- Space (4px grid) ---------- */

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;  /* nudges inside small controls only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Sizes ---------- */

  --control-sm: 32px;  /* nav buttons, compact toolbars */
  --control-md: 36px;  /* default buttons and inputs in apps */
  --control-lg: 44px;  /* hero buttons, every tap target on a phone */
  --row-compact: 36px;
  --row: 44px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-stroke: 1.5;

  /* ---------- Layout ---------- */

  --sidebar-w: 256px;
  --header-h: 56px;
  --content-max: 1440px;
  --page-max: 1200px;   /* marketing pages */
  --prose-max: 68ch;
  --page-pad: 32px;     /* 16px under 640px wide, set in a2k.css */

  /* ---------- Radius ---------- */

  --radius-xs: 4px;   /* keycaps, tags, checkbox */
  --radius-sm: 6px;   /* small buttons, chips */
  --radius-md: 8px;   /* buttons, inputs, rows */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* panels, dialogs */
  --radius-2xl: 20px; /* large windows, hero product view */
  --radius-pill: 999px; /* status pills and switches only */

  /* ---------- Depth (light) ---------- */

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(22 33 26 / 0.06);
  --shadow-2: 0 1px 2px rgb(22 33 26 / 0.05), 0 8px 24px rgb(22 33 26 / 0.07);
  --shadow-3: 0 2px 4px rgb(22 33 26 / 0.06), 0 24px 48px rgb(22 33 26 / 0.14);

  /* ---------- Motion ---------- */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;   /* hover, press, toggles */
  --dur-mid: 200ms;    /* menus, popovers, tooltips */
  --dur-slow: 360ms;   /* entrances, sheets */
  --rise: 8px;         /* enter distance */
  --press-scale: 0.98;

  /* ---------- Layers ---------- */

  --z-sticky: 10;
  --z-nav: 20;
  --z-popover: 40;
  --z-dialog: 50;
  --z-toast: 60;

  color-scheme: light;
}

/* ---------- Dark operate theme ---------- */
[data-theme="dark"] {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-raised: #1c1c1f;
  --surface-sunken: #060607;
  --surface-hover: rgb(236 240 234 / 0.04);
  --surface-active: rgb(236 240 234 / 0.08);

  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);

  --text: #f2f2f3;
  --text-2: #a8a8ad;
  --text-3: #8a8a90;
  --text-disabled: #5b665e;

  --brand: #ecf0ea;
  --brand-mark: var(--sage-300);

  --accent: #ecf0ea;          /* off-white primary button, dark text */
  --accent-hover: #ffffff;
  --accent-press: #d5dcd0;
  --accent-soft: rgb(236 240 234 / 0.08);
  --on-accent: var(--green-900);

  --money: var(--copper-300);
  --money-soft: rgb(212 154 106 / 0.14);

  --positive: #6fbf8b;
  --positive-soft: rgb(111 191 139 / 0.14);
  --negative: #e0806f;
  --negative-soft: rgb(224 128 111 / 0.14);
  --warning: #d9ad5b;
  --warning-soft: rgb(217 173 91 / 0.14);

  --focus-ring: rgb(236 240 234 / 0.36);
  --selection: rgb(169 188 174 / 0.3);

  --chart-lead: #ecf0ea;
  --chart-2: var(--sage-300);
  --chart-3: var(--copper-300);
  --chart-muted: #34443a;
  --chart-muted-2: #4a5b50;
  --chart-grid: rgb(236 240 234 / 0.07);
  --chart-label: #8c988f;

  --shadow-1: none;
  --shadow-2: 0 0 0 1px rgb(236 240 234 / 0.06), 0 12px 32px rgb(0 0 0 / 0.4);
  --shadow-3: 0 0 0 1px rgb(236 240 234 / 0.08), 0 24px 64px rgb(0 0 0 / 0.5);

  color-scheme: dark;
}

/* ---------- The deep green A2K page ---------- */
.surface-brand {
  --bg: var(--green-800);
  --surface: rgb(246 248 244 / 0.06);
  --surface-raised: rgb(246 248 244 / 0.1);
  --surface-sunken: var(--green-900);
  --surface-hover: rgb(246 248 244 / 0.06);
  --surface-active: rgb(246 248 244 / 0.1);

  --line: rgb(246 248 244 / 0.14);
  --line-strong: rgb(246 248 244 / 0.24);

  --text: var(--paper-50);
  --text-2: rgb(246 248 244 / 0.78);
  --text-3: rgb(246 248 244 / 0.66);

  --brand: var(--paper-50);
  --brand-mark: var(--sage-300);

  --accent: var(--paper-50);
  --accent-hover: #ffffff;
  --accent-press: var(--paper-150);
  --accent-soft: rgb(246 248 244 / 0.1);
  --on-accent: var(--green-800);

  /* Signals and money re-toned for the green page (the light ones fail contrast here). */
  --money: #f2c9a7;            /* the document kit's money colour */
  --money-soft: rgb(242 201 167 / 0.14);
  --positive: #8fd0a4;
  --positive-soft: rgb(143 208 164 / 0.14);
  --negative: #f2b8a8;         /* the proposal lock screen's error colour */
  --negative-soft: rgb(242 184 168 / 0.14);
  --warning: #e9c77d;
  --warning-soft: rgb(233 199 125 / 0.14);
  --chart-lead: var(--paper-50);
  --chart-2: var(--sage-300);
  --chart-3: #f2c9a7;
  --chart-muted: rgb(246 248 244 / 0.22);
  --chart-muted-2: rgb(246 248 244 / 0.36);
  --chart-grid: rgb(246 248 244 / 0.1);
  --chart-label: rgb(246 248 244 / 0.66);
  --shadow-1: none;
  --shadow-2: 0 0 0 1px rgb(246 248 244 / 0.08), 0 12px 32px rgb(0 0 0 / 0.28);
  --shadow-3: 0 0 0 1px rgb(246 248 244 / 0.1), 0 24px 64px rgb(0 0 0 / 0.36);
  --focus-ring: rgb(246 248 244 / 0.4);

  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

/*
  Client brand layer: the nurseries' films and links (Alpesh Patel's group: Moat Barn, Oakland Hall,
  Oakland Lodge, Woodland Barn, Woodland House). Load order: tokens.css, then this file, then app.css.
  Role tokens only. Written 13 Nov 2026. The same file is kept as brands/nursery-films.css in the design system.

  Direction
    Product:   one icon on a phone that opens every nursery's films and website, so the owner and his
               managers can pick one and send it to a parent on WhatsApp in two taps.
    Character: warm, plain, quick.
    World:     the nurseries' own signs: white script on a flat coloured plate with a thin white frame,
               and the engraved duckling from Moat Barn's site.
    Moments:   the film itself, and the row of sign plates on the first screen.
    Signature: every nursery wears its own plate in its own colour; the duckling is drawn once.

  Evidence: plate colours measured from each nursery's own logo file or home page on 12 and 13 Nov 2026
  (Moat Barn olive #565b43, Oakland sage #909888, Woodland slate #46556a). Action colours from their sites
  (Moat Barn blue #2b5672, Oakland Hall berry #820053, Woodland navy #2b3c6b); Oakland Lodge has no berry
  on its site, so it uses the sage deepened to pass AA. The navy ink is the group's own, from Alpesh's
  dashboard, the same navy as brands/puddleducks.css. Fonts: Mulish is the text face on four of the five
  sites; Marcellus stands in for their heading serif ("The Seasons", a paid face).
  It is the group's own screen: no A2K name, logo or credit anywhere on it.
*/
:root {
  --bg: #f1f1ea;
  --surface: #f8f8f3;
  --surface-raised: #fdfdfa;
  --surface-sunken: #e6e7de;
  --surface-hover: rgb(22 35 58 / 0.04);
  --surface-active: rgb(22 35 58 / 0.08);
  --line: rgb(28 47 79 / 0.13);
  --line-strong: rgb(28 47 79 / 0.26);
  --text: #16233a;
  --text-2: #3b485d;
  --text-3: #55627a;
  --text-disabled: #97a1b0;

  --brand: #1c2f4f;
  --accent: #1c2f4f;
  --accent-hover: #14233b;
  --accent-press: #0e1a2e;
  --accent-soft: #dde3ec;
  --on-accent: #f8f8f3;
  --focus-ring: rgb(28 47 79 / 0.34);
  --selection: #dde3ec;

  --font-sans: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Marcellus", "Iowan Old Style", Georgia, serif;

  /* The sign plate: its ground, the thin frame set just inside its edge, the ink on it */
  --plate: var(--accent);
  --plate-frame: rgb(255 255 255 / 0.6);
  --plate-ink: #ffffff;
  /* The scrim behind a play mark on a film still */
  --scrim: rgb(14 22 38 / 0.28);
  --backdrop: rgb(14 22 38 / 0.42);
}

/* Each nursery's own plate colour, and its own action colour on its own pages */
.n-moat-barn      { --plate: #565b43; --nursery-accent: #2b5672; --nursery-accent-hover: #21455c; }
.n-oakland-hall   { --plate: #909888; --nursery-accent: #820053; --nursery-accent-hover: #690043; }
.n-oakland-lodge  { --plate: #909888; --nursery-accent: #55604f; --nursery-accent-hover: #454e40; }
.n-woodland-barn  { --plate: #46556a; --nursery-accent: #2b3c6b; --nursery-accent-hover: #213057; }
.n-woodland-house { --plate: #46556a; --nursery-accent: #2b3c6b; --nursery-accent-hover: #213057; }

/* The nurseries' films and links. Tokens only: values live in tokens.css and brand.css. */
@font-face { font-family: "Mulish"; src: url("/fonts/mulish.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("/fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
[hidden] { display: none !important; }
img { max-width: 100%; }
::selection { background: var(--selection); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: 824px; margin-inline: auto; padding-inline: var(--space-4); }
.wrap--wide { max-width: 1184px; }

/* ---------- Icons: one set, one stroke ---------- */
.icon { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-lg); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--text-base); line-height: var(--leading-md); font-weight: var(--weight-medium);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }
.btn--secondary { background: var(--surface-raised); color: var(--text); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface); border-color: var(--text-3); }
.btn--ghost { background: none; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn--icon { width: var(--control-lg); padding: 0; color: var(--text-2); background: none; }
.btn--icon:hover { background: var(--surface-hover); color: var(--text); }

/* ---------- The sign plate ---------- */
.plate {
  position: relative; display: grid; place-items: center; flex: none;
  width: 136px; aspect-ratio: 312 / 147;
  background: var(--plate); border-radius: var(--radius-md); overflow: hidden;
}
.plate::after { content: ""; position: absolute; inset: var(--space-1); border: 1px solid var(--plate-frame); border-radius: var(--radius-xs); pointer-events: none; }
.plate img { display: block; width: 76%; height: 68%; object-fit: contain; }
.plate--full::after { display: none; }
.plate--full img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- First screen: the list of nurseries ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-8) var(--space-6); }
.top__title { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-regular); }
.top__line { margin: var(--space-1) 0 0; color: var(--text-2); }
.mark { flex: none; width: 40px; aspect-ratio: 210 / 322; background: var(--accent); -webkit-mask: url("/icons/duckling.png") center / contain no-repeat; mask: url("/icons/duckling.png") center / contain no-repeat; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-3); align-items: center;
  grid-template-areas: "plate text" "films films" "actions actions";
  padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.card--none { grid-template-areas: "plate text" "actions actions"; }
.card > .plate { grid-area: plate; }
.card__text { grid-area: text; min-width: 0; }
.card__name { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-regular); }
.card__place { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-2); }
.card__films { grid-area: films; min-width: 0; }
.card__none { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-3); }
.card__actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.films { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.film {
  display: flex; align-items: center; gap: var(--space-4); min-height: 56px;
  margin-inline: calc(var(--space-2) * -1); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md); color: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.film:hover { background: var(--surface-hover); }
.film:active { background: var(--surface-active); }
.film__thumb { position: relative; flex: none; width: 136px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); }
.film__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__thumb::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.film__text { display: grid; min-width: 0; }
.film__title { font-weight: var(--weight-medium); line-height: var(--leading-md); }
.film__meta { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-3); }

/* The play mark: a round disc on a film still */
.play { position: absolute; z-index: 1; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-raised); color: var(--text); display: grid; place-items: center; }
.play svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linejoin: round; margin-left: 1px; }
.play--lg { position: static; margin: 0; width: 72px; height: 72px; box-shadow: var(--shadow-2); }
.play--lg svg { width: 28px; height: 28px; margin-left: 3px; }

.foot { min-height: var(--space-12); }

/* ---------- A film's own page ---------- */
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.fp-head .plate { width: 168px; }
.link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--control-lg); }
.link:hover { color: var(--text); text-decoration-color: currentColor; }

.film-page { --accent: var(--nursery-accent); --accent-hover: var(--nursery-accent-hover); --accent-press: var(--nursery-accent-hover); }
.fp { display: grid; gap: var(--space-6); }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--text); box-shadow: var(--shadow-2); }
.player video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--text); }
.player.is-failed { background: var(--surface-raised); box-shadow: none; border: 1px solid var(--line); }
.player.is-failed video { visibility: hidden; }
.player__start { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.player__start:hover .play { background: var(--surface); }
.player__error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); text-align: center; }
.player__error p { margin: 0; max-width: 36ch; }
.fp__title { text-wrap: balance; margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-regular); }
.fp__lead { margin: var(--space-2) 0 0; color: var(--text-2); }
.fp__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-3); }
.fp__actions { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.fp__more { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.fp__more h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); color: var(--text-2); }

/* ---------- The send sheet ---------- */
.sheet {
  width: min(440px, calc(100vw - var(--space-8))); max-height: calc(100dvh - var(--space-8));
  padding: 0; border: 0; border-radius: var(--radius-xl);
  background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-3); overflow: auto;
}
.sheet:focus { outline: none; }
.sheet::backdrop { background: var(--backdrop); }
.sheet[open] { animation: sheet-in var(--dur-mid) var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(var(--rise)); } }
.sheet--plain[open] { position: fixed; z-index: var(--z-dialog); inset: 0; margin: auto; height: fit-content; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); }
.sheet__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-regular); }
.sheet__body { padding: 0 var(--space-5) var(--space-3); }
.sheet__body p { margin: 0 0 var(--space-3); color: var(--text-2); }
.picks { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); min-width: 0; }
.picks legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-2); }
.pick {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 64px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pick:hover { border-color: var(--line-strong); }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pick.is-picked { border-color: var(--accent); background: var(--surface); }
.pick__thumb { flex: none; width: 80px; aspect-ratio: 16 / 9; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-2); }
.pick__text { display: grid; min-width: 0; flex: 1; }
.pick__title { font-weight: var(--weight-medium); line-height: var(--leading-md); }
.pick__sub { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--on-accent); }
.pick__mark .icon { width: 12px; height: 12px; stroke-width: 2.5; opacity: 0; }
.pick.is-picked .pick__mark { background: var(--accent); border-color: var(--accent); }
.pick.is-picked .pick__mark .icon { opacity: 1; }
.sheet__actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sheet__row > :only-child { grid-column: 1 / -1; }
.sheet__link { width: 100%; min-height: var(--control-lg); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-md); }
.sheet__note { min-height: var(--leading-sm); margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-2); text-align: center; }

/* ---------- A plain message page (offline, not found) ---------- */
.plain { min-height: 80dvh; display: grid; place-content: center; justify-items: start; gap: var(--space-3); }
.plain h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-regular); }
.plain p { margin: 0; color: var(--text-2); max-width: 40ch; }

/* ---------- Phone: the sheet rises from the bottom edge ---------- */
@media (max-width: 639px) {
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sheet--plain[open] { inset: auto 0 0; }
}

@media (max-width: 359px) {
  .card { column-gap: var(--space-3); }
  .card > .plate, .film__thumb { width: 104px; }
  .film { gap: var(--space-3); }
}

/* ---------- Wider than a phone ---------- */
@media (min-width: 640px) {
  .wrap { padding-inline: var(--space-8); }
  .top { padding-block: var(--space-12) var(--space-8); }
  .top__title { font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-display); }
  .top__line { font-size: var(--text-lg); line-height: var(--leading-lg); }
  .mark { width: 56px; }
  .card {
    grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-2);
    grid-template-areas: "plate text actions" "plate films films";
    padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
  }
  .card--none { grid-template-areas: "plate text actions"; }
  .card > .plate { width: 176px; }
  .card > .plate, .card__text, .card__actions { align-self: start; }
  .film { gap: var(--space-3); }
  .film__thumb { width: 112px; }
  .card__actions { grid-template-columns: auto auto; }
  .fp-head { padding-block: var(--space-8); }
  .fp-head .plate { width: 208px; }
  .fp__actions { grid-template-columns: auto auto; justify-content: start; }
}
@media (min-width: 960px) {
  .fp { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); column-gap: var(--space-10); align-items: center; }
  .fp__title { font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-display); }
  .fp__actions { grid-template-columns: 1fr; justify-content: stretch; }
  /* One film on a wide screen: the film and its words sit in the middle of the screen, not stranded at the top */
  .film-page .wrap { min-height: 100dvh; display: flex; flex-direction: column; }
  .film-page .fp { flex: 1; align-content: center; padding-bottom: var(--space-16); }
  .film-page .foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open] { animation: none; }
  .btn, .film, .pick { transition: none; }
  .btn:active { transform: none; }
}