/* The site's styles. docs/design.md says how it should look; docs/design-tasks.md who does what.

   Sections, in order:
     1. Fonts            self-hosted (assets/fonts/), no Google Fonts: the CSP and GDPR
     2. Tokens           every colour lives here and only here (tests/style.test.js checks); dark
                         mode is a second set of the same tokens and nothing else
     3. Base             text, headings, links, forms
     4. Components       buttons, chips, faces, cards, list rows, banner, fold-out, tabs, ...
     5. Layout           top bar, back header, tab bar (phones), footer, the page column
     6. Draft pages      the older page styles, moved onto the tokens; each page's design task
                         replaces its part
   Design tasks after D1 add their own section at the end, headed with the task and the pages.

   Phones are < 768 px: @media (max-width: 767.98px). */

/* 1. Fonts ------------------------------------------------------------------------------------ */

/* Instrument Sans (one variable file, weights 400-700) and Instrument Serif Italic for the
   404 number. Both SIL Open Font License (assets/fonts/OFL-*.txt). Latin only: Danish fits in it. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'); }

/* 2. Tokens ----------------------------------------------------------------------------------- */

:root {
  /* Colours (light). Quiet: mostly black and white; red only for the unread dot and Delete. */
  --bg: #ffffff;          /* the page */
  --surface: #f3f3f4;     /* grey cards: banner, "Good to know", host-only box; your own row */
  --text: #111111;        /* text, the primary button, the main card's border */
  --on-text: #ffffff;     /* text on --text (the primary button) */
  --muted: #6b6b70;       /* second lines, hints, meta */
  --line: #e6e6e8;        /* dividers between rows, input borders */
  --avatar: #e4e4e7;      /* the initials circle, the blank poster */
  --danger: #b42318;      /* Delete account, errors (darker than the mockup's, to read on grey too) */
  --dot: #e5322d;         /* unread */
  --shadow: 0 8px 24px rgb(0 0 0 / .12); /* menus that open over the page */
  --shadow-small: 0 1px 2px rgb(0 0 0 / .08);
  --backdrop: rgb(255 255 255 / .92);    /* behind the sticky save bar */
  --raised: #ffffff;      /* menus that open over the page (in dark a step lighter, as shadows don't show there) */
  --poster-edge: transparent; /* a thin edge round posters and pictures, so a dark poster doesn't melt into a dark page */
  color-scheme: light;

  /* Type */
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Spacing and shapes */
  --gutter: 16px;         /* page edge on phones */
  --pad: 24px;            /* inside cards */
  --section: 40px;        /* between sections */
  --radius: 16px;         /* cards */
  --radius-input: 10px;
  --pill: 999px;          /* buttons, chips */
  --column: 640px;        /* most pages */
  --wide: 1040px;         /* the homepage, the films grid, big tables */
  --tab-height: 60px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* Dark: the same tokens, darker. It follows the device's setting until someone picks Light or
   Dark in Settings (saved in this browser; lang.js sets <html data-theme> before the page draws).
   The two blocks must be the same: tests/style.test.js checks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141416;
    --surface: #222226;
    --text: #ededef;
    --on-text: #141416;
    --muted: #a3a3ab;
    --line: #313136;
    --avatar: #37373d;
    --danger: #ff7b6e;
    --dot: #f04438;
    --shadow: 0 8px 24px rgb(0 0 0 / .5);
    --shadow-small: 0 1px 2px rgb(0 0 0 / .4);
    --backdrop: rgb(20 20 22 / .92);
    --raised: #1c1c1f;
    --poster-edge: rgb(255 255 255 / .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141416;
  --surface: #222226;
  --text: #ededef;
  --on-text: #141416;
  --muted: #a3a3ab;
  --line: #313136;
  --avatar: #37373d;
  --danger: #ff7b6e;
  --dot: #f04438;
  --shadow: 0 8px 24px rgb(0 0 0 / .5);
  --shadow-small: 0 1px 2px rgb(0 0 0 / .4);
  --backdrop: rgb(20 20 22 / .92);
  --raised: #1c1c1f;
  --poster-edge: rgb(255 255 255 / .12);
  color-scheme: dark;
}

/* 3. Base ------------------------------------------------------------------------------------- */

* { box-sizing: border-box; }
/* Something marked hidden stays hidden, whatever display a class gives it (a label or field
   styled as a block used to show anyway; owner, 2026-10-08). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; display: flex; flex-direction: column; } /* the footer stays at the bottom of short pages */
/* Names and other typed text with no spaces (a 255-letter name) still wrap inside buttons, flex
   items and table cells, where break-word alone lets them push the page sideways. */
.host, .who, .choice button { overflow-wrap: anywhere; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 28px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 20px; font-weight: 600; margin: var(--section) 0 16px; }
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
p { margin: 0 0 12px; }
/* Links are plain unless they're text links: underlined when they sit in text, or with .text-link. */
a { color: inherit; text-decoration: none; }
main a:not([class]), a.inline, a.person { text-decoration: underline; text-underline-offset: 3px; }
.text-link, button.text-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.meta { color: var(--muted); font-size: 14px; }
.title { font-weight: 600; }
.hero { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; }
@media (min-width: 768px) { .hero { font-size: 56px; } }
.visually-hidden { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* Danish or English (see assets/i18n.js): text in the page HTML comes in both, and the other
   language is hidden. Danish unless lang.js set <html lang="en">. */
html:not([lang="en"]) [data-lang="en"], html[lang="en"] [data-lang="da"] { display: none !important; }

/* With and without JavaScript (lang.js sets html.js, and html.member for a saved member login).
   Without it, "Loading…" and blocks only scripts fill are left out, and <noscript> says why. The
   pages' plain header (.site-header.static: logo and three links, for no-JS visitors and search
   engines) keeps its place but stays blank until common.js renderHeader() draws the real one. */
html:not(.js) .js-only { display: none !important; }
html.member .visitor-only { display: none !important; }
html.js .site-header.static > * { visibility: hidden; }

/* Forms */
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-input);
  padding: 10px 12px; max-width: 100%; } /* max-width: long names in a list must not push the page wider than a phone */
input:focus, select:focus, textarea:focus { border-color: var(--text); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 1px var(--text); }
::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--text); width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
textarea { width: 100%; display: block; margin-top: 6px; line-height: 1.5; }
label { display: block; margin: 12px 0; }
fieldset { border: 0; padding: 0; margin: 12px 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
summary { cursor: pointer; }
table { border-collapse: collapse; }

/* 4. Components (docs/design.md "Components") ------------------------------------------------- */

/* Icons: icon('name') in ui.js, from assets/icons.svg. Sized by the text around them. */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.25em; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; }

/* The logo: a text placeholder for the drawn wordmark (logo() in ui.js). */
.logo { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: .14em; line-height: 1; }

/* Buttons. One shape, the pill. Primary: black (the default for every button). Secondary: white
   with a black border. Quiet: grey. Danger: red outline. Link: underlined text. Small: compact.
   Block: full width (on phones, for the page's main action). */
button, .button { font: inherit; font-weight: 600; font-size: 15px; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 22px; border: 1px solid var(--text); border-radius: var(--pill); background: var(--text); color: var(--on-text);
  cursor: pointer; text-decoration: none; text-align: center; }
.secondary, .reaction { background: var(--bg); color: var(--text); }
.quiet { background: var(--surface); border-color: var(--surface); color: var(--text); }
.danger, button.danger { background: var(--bg); color: var(--danger); border-color: var(--danger); }
button.small, .button.small { padding: 6px 14px; font-size: 14px; }
.block { display: flex; width: 100%; }
button.link { background: none; border: 0; padding: 0; border-radius: 0; color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
@media (hover: hover) {
  button:not(:disabled):hover, .button:hover { filter: brightness(.88); }
  .secondary:not(:disabled):hover, .quiet:not(:disabled):hover, .danger:not(:disabled):hover { filter: none; background: var(--surface); }
}
/* A bare icon button (×, ←, the bell): no border, a round grey hover. */
.icon-button, button.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: var(--pill);
  background: none; color: var(--text); text-decoration: none; position: relative; }
.icon-button .icon { width: 22px; height: 22px; }
@media (hover: hover) { .icon-button:hover, button.icon-button:not(:disabled):hover { background: var(--surface); filter: none; } }

/* Chip: a small outlined pill for facts, and the Event tag. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--text); border-radius: var(--pill); padding: 3px 10px;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; }
/* A flag (flag() in ui.js) before a language: 3:2, with a hairline so white stripes show. */
.flag { width: 18px; height: 12px; flex-shrink: 0; border-radius: 2px; outline: 1px solid var(--line); outline-offset: -1px; }
.chip .flag + .flag { margin-left: -2px; }

/* Faces: the picture, or initials on grey (face() in common.js). */
.face { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%; background: var(--avatar); color: var(--text); font-weight: 600; line-height: 1; letter-spacing: 0;
  text-transform: none; overflow: hidden; }
.face[data-initials]::before { content: attr(data-initials); }
.face.tiny { width: 24px; height: 24px; font-size: 9px; }
.face.small { width: 32px; height: 32px; font-size: 12px; margin-right: 8px; }
.face.big { width: 40px; height: 40px; font-size: 14px; margin-right: 10px; }
.face.profile { width: 72px; height: 72px; font-size: 26px; }
/* Overlapping faces, then "Alice and Bo are coming". */
.avatar-stack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-stack .faces { display: inline-flex; }
.avatar-stack .face { box-shadow: 0 0 0 2px var(--bg); margin: 0; }
.avatar-stack .face + .face { margin-left: -6px; }

/* Cards. .card-main: white with a black border, for the main thing on a page ("This week").
   .card: grey, no border, for secondary blocks (forms, "Good to know", the host-only box). */
.card-main { background: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); padding: var(--pad); margin-top: 16px; }
.card { background: var(--surface); border-radius: var(--radius); padding: var(--pad); margin-top: 24px; }
.card > h2:first-child, .card-main > h2:first-child { margin-top: 0; }
@media (max-width: 767.98px) { .card-main, .card { padding: 20px; } }

/* Section header: the heading, and an optional underlined link on the right. */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: var(--section) 0 12px; }
.section-head h2 { margin: 0; }
.section-head a { font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* List rows (listRow() in ui.js): date | who or what | ›, with lines between. */
.list-rows { border-top: 1px solid var(--line); }
.list-row { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; }
.list-row .row-date { width: 8em; flex-shrink: 0; white-space: nowrap; display: flex; flex-direction: column; font-size: 14px; }
.list-row .row-date .meta { font-size: 12px; }
.list-row .row-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.list-row .row-arrow { color: var(--muted); width: 18px; height: 18px; }
.list-row.muted .row-main, .list-row.muted .row-date { color: var(--muted); }
.list-row.mine { background: var(--surface); font-weight: 600; border-radius: 4px; }
@media (hover: hover) { a.list-row:hover { background: var(--surface); } }

/* Banner: a grey card with an icon, a bold title, a muted line, an action and an ×. */
.banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; background: var(--surface);
  border-radius: var(--radius); padding: 20px var(--pad); margin-top: 16px; }
.banner-icon { margin-top: 3px; }
.banner-title { font-size: 17px; display: block; }
.banner-body .meta { margin: 4px 0 14px; }
.banner .close { margin: -6px -10px 0 0; }

/* Fold-out: a row with a ⌄ that opens (<details class="foldout">). */
details.foldout { margin: 12px 0; }
details.foldout > summary { display: flex; align-items: center; gap: 8px; list-style: none; font-weight: 500; }
details.foldout > summary::-webkit-details-marker { display: none; }
details.foldout .fold-arrow { width: 16px; height: 16px; transition: transform .15s; }
details.foldout[open] .fold-arrow { transform: rotate(180deg); }
details.foldout .foldout-body { padding: 8px 0 0; }

/* Segmented control: two halves on grey, the chosen one white. */
.segmented { display: inline-flex; background: var(--surface); border-radius: var(--pill); padding: 3px; gap: 2px; }
.segmented button { background: none; border: 0; color: var(--muted); padding: 6px 16px; font-size: 14px; }
.segmented button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: var(--shadow-small); }

/* Tabs: text tabs, the chosen one underlined. */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 0; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }

/* Settings row: label (and a hint) on the left, the checkbox or radio on the right. */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.settings-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Stars: a Letterboxd rating (starRating() in ui.js). */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; color: var(--text); }
.stars .icon { width: 16px; height: 16px; }
.stars.big { font-size: 26px; }
.stars.big .icon { width: 26px; height: 26px; }
.stars .empty { color: var(--line); fill: var(--line); }
.half-star { display: inline-grid; }
.half-star > .icon { grid-area: 1 / 1; }

/* Poster tile: 2:3 poster, "No. 359", title, year. Three per row on phones, six on desktop. */
.poster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 768px) { .poster-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; } }
.poster-tile { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; font-size: 14px; min-width: 0; }
.poster-tile > img, .poster-tile > .poster { width: 100%; margin-bottom: 6px; }
.poster-tile .meta { font-size: 12px; }

/* Comments: avatar, name bold, text, then the two reactions (outlined pills, black when yours). */
.comment { padding: 14px 0; border-bottom: 1px solid var(--line); }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.reaction { padding: 3px 10px; font-size: 13px; font-weight: 500; border-color: var(--line); }
.reaction.mine { background: var(--text); color: var(--on-text); border-color: var(--text); }
/* The comment box: an input with a quiet Post button next to it. */
.comment-form, .row.comment-form { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-top: 12px; }
.comment-form input, .row.comment-form .grow { flex: 1; min-width: 0; }
.comment-form button { background: var(--surface); border-color: var(--surface); color: var(--text); }

/* Notification item: an icon in a circle, the text, a red dot while unread. */
.icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); flex-shrink: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); display: inline-block; flex-shrink: 0; }

/* Messages */
.msg { font-size: 14px; color: var(--muted); }
.msg.error { color: var(--danger); }

/* 5. Layout (docs/design.md "Layout and navigation"; renderHeader() in common.js) -------------- */

main { width: 100%; flex: 1 0 auto; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 64px; }
main.wide { max-width: calc(var(--wide) + 2 * var(--gutter)); }
main > :first-child { margin-top: 0; }
.bar-inner { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 16px; min-height: 64px; }

/* Top bar: logo, the menu (desktop), and on the right the language, the bell and your menu. */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.top-nav { display: flex; gap: 28px; margin-left: 24px; }
.static-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 20px; } /* the plain header's links, phones too */
.top-nav a, .static-nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); padding: 6px 0; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--text); }
.top-side { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.language-switch, button.language-switch { background: none; border: 0; padding: 6px 2px; border-radius: 0; color: var(--text); font-size: 15px;
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { button.language-switch:not(:disabled):hover { filter: none; color: var(--muted); } }
.bell .dot, .tab-icon .dot { position: absolute; top: 6px; right: 7px; box-shadow: 0 0 0 2px var(--bg); }

/* Menus that open under a button: the visitors' ☰ (phones) and your face's ⌄. */
.menu { position: relative; }
.menu-toggle, button.menu-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; color: var(--text); border-radius: var(--pill); }
.menu-toggle .face { margin: 0; }
.menu-toggle .icon { width: 18px; height: 18px; }
.visitor-menu .menu-toggle .icon { width: 24px; height: 24px; }
@media (hover: hover) { button.menu-toggle:not(:disabled):hover { filter: none; background: var(--surface); } }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px; background: var(--raised);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.menu-panel a, .menu-item, button.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; justify-content: flex-start; }
.menu-panel a:hover, button.menu-item:not(:disabled):hover { background: var(--surface); filter: none; }

/* Back header (sub-pages, phones): ← and the page's name, with a line under it. */
.backbar { display: none; }
.backbar .bar-inner { gap: 8px; }
.backbar .back { margin-left: -8px; }
.back-title { font-size: 18px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tab bar (phones, logged in): fixed at the bottom, clear of the iPhone's home bar. */
.tab-bar { display: none; }

/* Footer: About, Contact, Privacy, the language and the logo. (The TMDB credit is on the About page.) */
.site-footer { border-top: 1px solid var(--line); margin-top: 24px; }
.footer-inner { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.footer-links a { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .wordmark { font-size: 16px; }
@media (max-width: 767.98px) { .topbar .wordmark { font-size: 16px; letter-spacing: .08em; } }

@media (max-width: 767.98px) {
  .top-nav, .bell { display: none; }
  body.has-tabs .account-menu { display: none; }
  body.sub-page .topbar { display: none; }
  .backbar { display: block; }
  .top-side { gap: 8px; }
  .bar-inner { min-height: 56px; }
  main { padding-top: 20px; }

  .tab-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tab-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tab-height);
    color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; min-width: 0; }
  .tab-bar a[aria-current="page"] { color: var(--text); font-weight: 700; }
  .tab-bar a[aria-current="page"] .icon { stroke-width: 2.25; }
  .tab-bar a[aria-current="page"] .face { box-shadow: 0 0 0 1.5px var(--text); }
  .tab-icon { position: relative; display: inline-flex; }
  .tab-icon .icon { width: 24px; height: 24px; }
  .tab-icon .dot { top: 0; right: -2px; }
  .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.has-tabs { padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .visitor-menu { display: none; }
}

/* 6. Draft pages: the older styles, on the new tokens. Each page's design task replaces its part. */


/* Posters */
img { aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: var(--avatar); flex-shrink: 0; }
img:not(.face) { outline: 1px solid var(--poster-edge); outline-offset: -1px; } /* posters: an edge in dark (the token) */



/* dd/mm/yyyy date box with a calendar button. The browser's own date box sits invisibly under
   the button, so its picker opens in the right place. */
.date-field { display: inline-flex; gap: 6px; align-items: center; position: relative; }
.date-field .date-text { width: 8.5em; }
.date-field .date-button { padding: 8px; }
.date-field .date-picker { position: absolute; right: 0; bottom: 0; width: 2.5em; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.time-text { width: 5em; }
.number-text { width: 12em; }
input.wide { width: min(100%, 520px); }
input.narrow { width: 6em; }
.your-standing p { margin: 4px 0; }

/* Rows of controls */
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.row .grow { flex: 1; min-width: 200px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
details { margin-top: 24px; }
details > summary { font-weight: 500; }

/* A round's heading (schedule.html, round.html) */
.round-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: var(--section) 0 12px; }
.round-head h2 { margin: 0; }
details.admin { margin-top: 48px; }

/* Teasers (the homepage's cards are in "D2: Homepage" below) */
.teaser { white-space: pre-line; }
.next-box { background: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); padding: var(--pad); margin-top: 16px; }
.next-box.skipped { border-color: var(--line); }
@media (max-width: 767.98px) { .next-box { padding: 20px; } }
.when { color: var(--muted); font-weight: 600; font-size: 14px; }
.rsvp p { margin: 6px 0; }
.rsvp .coming { color: var(--text); }

.actions-bar { margin-top: 24px; }

.savebar { background: var(--backdrop); padding: 12px 0; border-top: 1px solid var(--line); margin-top: 24px; }
.savebar.sticky { position: sticky; bottom: 0; z-index: 10; } /* above the weeks, or Save can't be tapped */
body.has-tabs .savebar.sticky { bottom: calc(var(--tab-height) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-tabs .savebar.sticky { bottom: 0; } }
.savebar ul { margin: 6px 0 4px; padding-left: 22px; }
/* "came to 4 of 9": black when enough to host, red when not (the round creator) */
.turnout { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.turnout.enough { border-color: var(--text); color: var(--text); }
.turnout.short { border-color: var(--danger); color: var(--danger); }

/* Profile pictures: the picture editor (settings) */
.picture-editor .face.big { width: 72px; height: 72px; font-size: 26px; }
.picture-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 16px; }
.picture-editor .face { margin: 0; }
.picture-editor label.button { position: relative; margin: 0; }
.picture-editor label.button:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }

/* Names that link to profiles */
a.person { text-decoration-color: var(--line); }
.bio { max-width: var(--column); }
.chips .chip { border-color: var(--line); } /* the screening facts (overview.js screeningChips) */

/* Announcements (announcements.html) */
.announcement { border-bottom: 1px solid var(--line); padding: 8px 0 14px; }
.announcement h3 { margin-bottom: 6px; }

/* The TMDB film search: favourite films (Edit profile) and the host's secret film */
.film-picker { margin-top: 12px; max-width: 420px; }
.film-search { width: 100%; }
.film-results { display: flex; flex-direction: column; }
.film-results .result { display: flex; gap: 10px; align-items: center; justify-content: flex-start; text-align: left; background: none; color: var(--text);
  font-weight: 400; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px; }
.film-results .result:hover, .film-results .result:focus { background: var(--surface); filter: none; }
.film-results .result img, .film-results .no-poster { width: 34px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; background: var(--avatar); flex-shrink: 0; }
.film-results .result:disabled { opacity: .5; cursor: default; }
.film-results .result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.film-history { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.film-history:empty { display: none; }
p.film-history { margin: 8px 0 0; }
.film-history .shown-before { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 600; }
.film-history .shown-before .icon { width: 14px; height: 14px; flex: none; }


/* 7. D2: Homepage (docs/design-d2.md; index.html, pages/index.js, overview.js) ------------------ */

/* One column below 1024 px, in the order of the phone mockups. From 1024 px two columns that
   stack their blocks on their own, and Latest films under both. Blocks are hidden until filled. */
.home { display: flex; flex-direction: column; gap: var(--section); max-width: var(--column); margin: 0 auto; }
.home-main, .home-side { display: contents; }
.home-block { min-width: 0; }
.home-block > :first-child { margin-top: 0; }
@media (max-width: 1023.98px) {
  #signup-banners, #hero { order: 1; }
  #this-week, #public-next { order: 2; }
  #coming-up, #public-coming { order: 3; }
  #recent-posts, #how-it-works { order: 4; }
  #upcoming-events, #good-to-know { order: 5; }
  #member-feed { order: 6; }
  #recommendation { order: 7; }
  #latest-films { order: 8; }
}
@media (min-width: 1024px) {
  .home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--section) 48px; align-items: start; max-width: none; }
  .home-main, .home-side { display: flex; flex-direction: column; gap: var(--section); min-width: 0; }
  .home-full { grid-column: 1 / -1; }
}

/* Visitors: the big heading and one line under it. */
.hero-text { color: var(--muted); font-size: 18px; line-height: 1.45; margin: 0; max-width: 34em; }
@media (min-width: 768px) { .hero-text { font-size: 20px; } }

/* Lines with an icon in front: when and where. */
.icon-line { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.icon-line .icon { width: 18px; height: 18px; margin-top: 2px; }
.icon-line > span { min-width: 0; overflow-wrap: anywhere; }
.icon-line.when { color: var(--text); font-weight: 500; font-size: 15px; }
.icon-line.meta { font-size: 14px; }
.text-link.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.text-link.with-icon .icon { width: 16px; height: 16px; }

/* This week's card (and the visitors' Next screening). */
.next-box .teaser { overflow-wrap: anywhere; margin: 16px 0 12px; }
.next-box .no-teaser { margin: 16px 0 12px; }
.host-row { display: flex; align-items: center; margin: 12px 0; }
.host-row .host { min-width: 0; }
.next-box .cancelled { margin: 12px 0 8px; font-size: 18px; }
.next-box .nothing { margin: 0 0 8px; font-size: 18px; }
.next-box hr { margin: 20px 0 0; }
.latest-comment .details-link { display: inline-block; margin-top: 12px; }
.latest-comment .comment-form { margin-top: 14px; }
.welcome-note { margin-top: 16px; padding: 16px 20px; }
@media (max-width: 767.98px) { .welcome-note { padding: 14px 16px; } }

/* Who's coming: the button (or "✓ You're coming") and the faces on one row. */
.rsvp-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 0; }
.rsvp-stack .row { margin: 0; gap: 12px; }
.rsvp-stack .avatar-stack { min-width: 0; flex-wrap: nowrap; }
.rsvp-stack .avatar-stack .meta { overflow-wrap: anywhere; min-width: 0; }
span.button.coming { cursor: default; }
@media (hover: hover) { span.button.coming:hover { filter: none; background: var(--bg); } }

/* Host sign-up as a banner; closed, a small grey pill with "Show". */
.banner.signup .your-standing p, .banner.signup .volunteers { margin: 0 0 4px; }
.banner.signup .volunteers { overflow-wrap: anywhere; }
.signup-actions { margin: 14px 0 0; }
.signup-actions input { flex: 1 1 180px; min-width: 0; }
.banner .plan-link { display: inline-block; margin-top: 10px; font-size: 14px; }
.signup.signup-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 6px 16px; border-radius: var(--pill);
  background: var(--surface); color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.signup-pill button.link { color: var(--text); font-size: 14px; }
.signup-pill + .banner, .banner + .signup-pill { margin-top: 12px; }

/* Coming up: two lines in the middle of a row (a name and "Stand-in…", "No screening" and why). */
.row-lines { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.row-lines .meta { font-weight: 400; }
.list-row .row-main .face { margin: 0; }

/* Upcoming events: one card each. */
.event-card { padding: 20px; }
.event-card h3 { margin: 10px 0 8px; font-size: 18px; overflow-wrap: anywhere; }
.event-card h3 a { text-decoration: none; }
@media (hover: hover) { .event-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.event-card .rsvp-stack { margin-top: 12px; }

/* New posts: the title, and who, when and how many comments under it. */
.post-rows { border-top: 1px solid var(--line); }
.post-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.post-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.post-row .meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.post-row .meta .who { min-width: 0; overflow-wrap: anywhere; }

/* From the members: one line each. */
.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; color: var(--text); }
.feed-item .face { margin: 0; }
.feed-item .what { min-width: 0; overflow-wrap: anywhere; font-size: 15px; padding-top: 5px; }
.feed-item .stars .icon { width: 14px; height: 14px; }
@media (hover: hover) { a.feed-item:hover .what > strong:last-of-type { text-decoration: underline; text-underline-offset: 3px; } }

/* A member recommends: a small poster, the title, and who. */
.recommendation { display: flex; gap: 14px; align-items: center; }
.recommendation img, .recommendation .poster.blank { width: 64px; display: block; }
.recommendation .rec-title { display: block; overflow-wrap: anywhere; }
.recommend-help { font-size: 14px; }
.recommend-help p { margin: 0; }

/* How it works: numbered steps (on About too, D8). */
#how-it-works .steps, .about-page .steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
#how-it-works li, .about-page .steps li { display: flex; gap: 14px; align-items: flex-start; }
#how-it-works li > div, .about-page .steps li > div { display: flex; flex-direction: column; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--text);
  border-radius: 50%; font-weight: 600; font-size: 14px; }

/* Good to know: open questions on grey. */
#good-to-know .card { margin: 12px 0 0; padding: 20px; }
#good-to-know .card h3 { margin: 0 0 6px; }
#good-to-know .card p { margin: 0; color: var(--muted); }

/* Latest films: six across; three on phones. */
#latest > .msg { grid-column: 1 / -1; }
@media (max-width: 767.98px) { #latest .poster-tile:nth-child(n+4) { display: none; } }

/* 8. D4: Schedule (docs/design-d4.md; schedule.html, pages/schedule.js) ------------------------- */

/* Subscribe in your calendar: a text link with an icon; opened, the buttons and the link. */
.schedule-tools { margin: 0 0 8px; }
button.link.with-icon { display: inline-flex; align-items: center; gap: 8px; }
button.link.with-icon .icon { width: 18px; height: 18px; }
.subscribe .row { margin: 0; }
.subscribe .calendar-url { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.subscribe .meta { margin: 8px 0 0; }

/* This week's card and the event cards (the homepage's, overview.js), above the rounds. */
.schedule-cards { margin: 24px 0 var(--section); }
.schedule-cards > :first-child { margin-top: 0; }

/* A face and two lines in a row: the lines take the rest of the width, so a long second line
   ("Nr. 6 · Teaser posted · …") wraps under the name instead of pushing it under the face. */
.list-row .row-main > .face + .row-lines { flex: 1 1 0; }

/* A round: "This round" (or its name), a muted line, "Edit round", then the rows. */
.schedule-list .round-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.schedule-list .round-head p { margin: 0; }
.schedule-list .round-head .edit-round { font-size: 14px; }
.schedule-list section.round details.foldout { margin: 16px 0 0; }

/* Next round: the sign-up banner(s), or a grey card while sign-up is closed. */
#next-round { margin-top: var(--section); }
#next-round > :first-child { margin-top: 0; }
#next-round .banner + .banner { margin-top: 12px; }
.next-round-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.next-round-card p { margin: 0; }
.schedule-list .actions-bar { margin-top: 24px; }

/* The archive: past rounds and events, folded away. */
details.foldout.archive { margin-top: 48px; }
.archive .past-round h3, .archive .past-events h3 { margin: 24px 0 4px; }
.archive .past-round > .meta { margin: 0 0 12px; }
.archive .past-events h3 { margin-bottom: 12px; }

/* 9. D3: Screening and Your teaser (docs/design-d3.md; screening.html, teaser.html, and the shared
   comments, reactions and comment box in discussion.js) ----------------------------------------- */

/* A sub-page's own title: the back header names the page on phones, so there it's only for screen
   readers; on a computer (no back header) it's an ordinary h1. */
.page-title { margin: 0 0 8px; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .page-title { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* "Back to the screening": the top bar has no ← on a computer. Phones have the back header. */
.text-link.desktop-back { display: none; }
@media (min-width: 768px) { .text-link.desktop-back { display: inline-flex; margin: 0 0 16px; font-size: 14px; } }

/* The top block: when and where, the teaser, the host, the facts, the answer, who's coming. Not in
   a card (design.md "Screening"). */
.screening { padding-top: 8px; }
.screening .when-where .icon-line.where > span { flex: 1; }
.screening .map-link { font-size: 14px; white-space: nowrap; }
.screening .screening-no { margin: 4px 0 0; overflow-wrap: anywhere; }
.screening .teaser { overflow-wrap: anywhere; margin: 16px 0 12px; }
.screening .no-teaser { margin: 16px 0 12px; }
.screening .warnings { margin-top: 12px; }
.screening .not-yet { margin: 24px 0 0; }
/* "Cancelled: Holiday" and the next screening. On a computer the h1 says it already. */
.screening .cancelled { font-size: 20px; margin: 16px 0 8px; overflow-wrap: anywhere; }
@media (min-width: 768px) { .screening.skipped .cancelled { display: none; } .screening.skipped .next-screening { margin-top: 16px; } }

/* The answer: a full-width button; "✓ You're coming", and "Can't make it after all?" centred under it. */
.rsvp-block { margin: 24px 0 0; }
.rsvp-block .row { flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
.rsvp-block button.link { align-self: center; }

/* "3 coming" (and Who came): a face and a name per row, no lines. */
.coming-list h2 { margin: 32px 0 12px; }
.person-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.person-row { display: flex; align-items: center; min-width: 0; }
.person-name { min-width: 0; overflow-wrap: anywhere; }
.person-name a.person { text-decoration: none; }
@media (hover: hover) { .person-name a.person:hover { text-decoration: underline; } }
.coming-list .meta { margin: 12px 0 0; overflow-wrap: anywhere; }

/* Add to calendar, Copy teaser. */
.screening-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; }
.screening-links .copy-text { flex-basis: 100%; margin: 0; }

/* The film of a past screening: the poster, the title, the year, the club's stars. */
.the-film .film-row { display: flex; gap: 16px; align-items: center; color: var(--text); text-decoration: none; margin: 0 0 12px; }
.the-film .film-row > img, .the-film .film-row > .poster.blank { width: 64px; }
.film-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.film-row-title { overflow-wrap: anywhere; }
.film-row-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (hover: hover) { a.film-row:hover .film-row-title { text-decoration: underline; text-underline-offset: 3px; } }

/* Who came: rows; for the host and the president a tick box each, with lines between. */
.attendance .hint { margin: 0 0 4px; }
.attendance .came .settings-text { display: flex; align-items: center; min-width: 0; }
.attendance select { margin-top: 16px; width: 100%; }
@media (min-width: 768px) { .attendance select { width: auto; max-width: 100%; } }

/* Comments: the face | the name bold and the date, the text, the heart and the thumbs-up. */
.comments h2 { margin-bottom: 4px; }
.comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.comment > .face { margin: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.comment-author { min-width: 0; overflow-wrap: anywhere; }
.comment-author a.person { text-decoration: none; }
@media (hover: hover) { .comment-author a.person:hover { text-decoration: underline; } }
.comment-head .meta { font-size: 13px; }
.comment-head button.delete { color: var(--muted); font-size: 13px; font-weight: 400; }
.comment-text { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.reaction { gap: 4px; }
.reaction .icon { width: 15px; height: 15px; }
.reaction .count:empty { display: none; }

/* Content warnings, folded (the homepage's card and the screening page). */
details.warnings summary { font-size: 14px; }
.warnings-text { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* The host's grey box: who sees it, the way to the teaser, and the host's secret film. */
.host-box { margin-top: var(--section); }
.host-box .teaser-button { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.host-box .teaser-button p { margin: 0; }
.host-box .button .icon { width: 16px; height: 16px; }
.host-box .secret-film { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.secret-film h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.secret-film h3 .icon { width: 18px; height: 18px; }
.secret-film p { margin: 8px 0 0; }
.picked-film { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; min-width: 0; }
.picked-film img, .picked-film .no-poster { width: 46px; aspect-ratio: 2 / 3; border-radius: 6px; background: var(--avatar); flex-shrink: 0; }
.picked-film strong { overflow-wrap: anywhere; }
@media (hover: hover) { .picked-film:hover strong { text-decoration: underline; text-underline-offset: 3px; } }

/* Take over and Edit this screening: fold-outs with a grey form. */
#page > details.foldout { margin: 24px 0 0; }
#page > details.foldout + details.foldout { margin-top: 16px; }
details.foldout > .foldout-body > .card { margin-top: 8px; }

/* Form fields: the label above (field() in ui.js), the input full width, a hint under it. */
.field { margin: 0 0 16px; min-width: 0; }
.field > label { margin: 0; }
.field-label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; display: block; margin: 0; }
.field .date-field input.date-text { width: 8.5em; display: inline-block; }
.field .date-field { display: inline-flex; }
.field-hint { margin: 6px 0 0; font-size: 13px; }
.edit-form .settings-row { border-top: 1px solid var(--line); margin: 0 0 16px; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.form-end .save-status:empty { display: none; }

/* "Last changed by…", small and muted at the very bottom. */
.changed-line { font-size: 13px; margin: 24px 0 0; overflow-wrap: anywhere; }

/* Your teaser (teaser.html) */
.teaser-for { font-size: 20px; font-weight: 600; margin: 0 0 4px; overflow-wrap: anywhere; }
.teaser-intro { margin: 0 0 24px; }
.teaser-form .field-label { font-weight: 600; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 16px; }
.field-pair > .field { margin: 0; }
.runtime-fields { margin: 0 0 16px; }
.runtime-fields .field-pair { margin: 0; }
.runtime-hint { margin: 6px 0 0; font-size: 13px; }
.quick-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.teaser-form .secret-film { padding: 20px; margin: 24px 0; }
.secret-film .film-picker { max-width: none; margin-top: 12px; }
.secret-film .picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.fill-from-film { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.secret-film details.other-film { margin: 12px 0 0; }
.monday { margin: 0 0 8px; }
.monday .settings-row { border-top: 1px solid var(--line); }
.form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.form-actions button { width: 100%; }
@media (max-width: 359.98px) { .form-actions button { font-size: 14px; padding-left: 10px; padding-right: 10px; } }
.form-status { margin: 8px 0 0; }
.teaser-preview { margin-top: var(--section); }
.teaser-preview h3 { margin: 0 0 4px; }

/* 10. D6: Profile, settings, login, sign-up (docs/design-d6.md; profile.html, settings.html, ----- */
/*     login.html, signup.html and their scripts in pages/)                                        */

/* A page's title with icon buttons on the right (pageHead() in ui.js; D11 can use it too).
   .on-desktop: only from 768 px, where there's no back header to say it. */
.page-head { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.page-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.page-actions { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* The Me page's Light/Dark button: an outlined pill with its word, so it reads as a switch. */
.icon-button.look-toggle { gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.icon-button.look-toggle .icon { width: 18px; height: 18px; }
@media (max-width: 767.98px) { .page-head.on-desktop { display: none; } }

/* A form of fields (D3's field() in ui.js and .field styles), shared: .form-fields keeps it at most
   440 px wide (buttons and status line under the fields: D3's .form-end). .main-action:
   the page's main button, full width on phones. D7's event form can use the same classes. */
.form-fields { max-width: 440px; }
.form-fields input:disabled { color: var(--muted); background: var(--surface); }
@media (max-width: 767.98px) { .main-action, button.main-action { display: flex; width: 100%; } }

/* The profile: the face, the name and "Member since"; the bio; Edit profile; the counts. */
.profile-head { display: flex; gap: 20px; align-items: center; }
.profile-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
h2.profile-name { margin: 0; font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.profile-who .chips { margin: 0; }
.profile-head .chip, .profile-counts .chip { border-color: var(--text); }
.bio { font-size: 16px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; margin: 16px 0 0; }
.edit-profile { margin: 20px 0 0; }
.profile-counts { margin: 16px 0 0; }

/* Headings with someone's name in them ("Films Anna has hosted") wrap even without spaces. */
.hosted-films .section-head h2, .favourites .section-head h2, .reviews .section-head h2 { min-width: 0; overflow-wrap: anywhere; }
.poster-picture-box { margin-top: 16px; }
.poster-picture-box .foldout-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.poster-picture-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.poster-picture-form input { width: 6em; }
.poster-picture-box .msg:empty { display: none; }
/* A checkerboard behind the picture shows what's see-through. */
.poster-picture-frame { max-width: 100%; padding: 8px; border-radius: 6px;
  background: repeating-conic-gradient(var(--surface) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.poster-picture { display: block; max-width: 100%; max-height: 60vh; height: auto; }
/* "All (n)" next to a section's heading: shows the rest in place. */
.section-head .show-all-button { font-size: 14px; white-space: nowrap; }
/* Films they hosted: one row (3 on phones, 6 from 768 px) until "All". */
@media (max-width: 767.98px) { .hosted-films:not(.show-all) .poster-tile:nth-child(n+4) { display: none; } }
@media (min-width: 768px) {
  .hosted-films:not(.show-all) .poster-tile:nth-child(n+7) { display: none; }
  .hosted-films:not(.more-than-6) .show-all-button { display: none; }
}
/* Favourite films: always 4 across, the size of the 6-across tiles on a computer. */
.poster-grid.favourite-films { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
@media (min-width: 768px) { .poster-grid.favourite-films { gap: 24px 16px; max-width: calc((100% - 5 * 16px) / 6 * 4 + 3 * 16px); } }
.favourite-tile { position: relative; min-width: 0; }
.favourite-tile .poster-tile { height: 100%; }
.favourite-tile .remove { position: absolute; top: 6px; right: 6px; padding: 5px; background: var(--bg); box-shadow: var(--shadow-small); }
.favourite-tile .remove .icon { width: 16px; height: 16px; }
.favourites .section-head + .meta { margin: -4px 0 12px; }
.favourites .film-picker { margin-top: 16px; }

/* Reviews: a small poster, then the title, the stars and the date, and the text. 3 until "All". */
.review.with-film { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.review-poster img, .review-poster .poster.blank { display: block; width: 56px; margin: 0; }
.review-poster .poster.blank > * { display: none; }
.review.with-film .review-film { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .review.with-film a.review-film:hover strong { text-decoration: underline; text-underline-offset: 3px; } }
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.review-meta .stars .icon { width: 14px; height: 14px; }
.review.with-film .review-text { overflow-wrap: anywhere; }
.review-list > .review:first-child { padding-top: 4px; }
.reviews:not(.show-all) .review-list > .review:nth-child(n+4) { display: none; }

/* Edit profile: the picture (Choose picture is secondary: Save is the main thing), the form, the favourites. */
.profile-edit .picture-editor { margin: 0 0 24px; }
.profile-edit .picture-editor label.button { background: var(--bg); color: var(--text); }
@media (hover: hover) { .profile-edit .picture-editor label.button:hover { filter: none; background: var(--surface); } }
.see-profile { margin: 16px 0 0; }

/* Settings: the profile row at the top, to Edit profile. */
a.settings-profile { display: flex; align-items: center; gap: 14px; padding: 12px 8px; margin: 0 -8px; border-radius: 12px; color: var(--text); text-decoration: none; }
.settings-profile .face { margin: 0; }
.settings-profile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.settings-profile-text strong { overflow-wrap: anywhere; }
.settings-profile .row-arrow { color: var(--muted); width: 18px; height: 18px; }
@media (hover: hover) { a.settings-profile:hover { background: var(--surface); } }

/* Settings: lists of settings rows, with small grey sub-headings. */
.language-settings > .meta, .notification-settings > .meta, .calendar-settings > .meta { margin: -4px 0 4px; }
.settings-subhead { font-size: 13px; font-weight: 500; color: var(--muted); margin: 20px 0 0; }
.push-row { cursor: default; }
.test-message { margin: 16px 0 0; }
.notification-settings > .msg, .calendar-settings > .msg { display: block; margin-top: 8px; }

/* You and the club: a grey box under the profile row (standingBox() in attendance.js). */
section.standing { background: var(--surface); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
section.standing:empty { display: none; }
section.standing h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
section.standing p { font-size: 14px; margin: 2px 0; }

/* Calendar feed: the button, then the link, Copy / Open, the two choices and "Make a new link". */
.calendar-settings .calendar-url { display: block; width: 100%; font-size: 13px; margin: 4px 0 0; }
.calendar-actions { margin: 10px 0; }
.new-link { margin: 12px 0 0; }

/* President tools: one grey link row (D9), the name bold, who sees it muted, the › on the right. */
.card.president-tools { padding: 0; overflow: hidden; margin-top: var(--section); }
a.president-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  color: var(--text); text-decoration: none; }
.president-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (hover: hover) { a.president-row:hover strong { text-decoration: underline; text-underline-offset: 3px; } }
.president-row .row-arrow { color: var(--muted); width: 18px; height: 18px; }

/* Account: Change password folded away as a text link; Log out and Delete account; the delete step. */
details.foldout.change-password { margin: 0 0 16px; }
details.change-password > summary { display: inline-flex; }
details.change-password > summary > span { text-decoration: underline; text-underline-offset: 3px; }
.change-password .foldout-body { padding-top: 16px; }
.account-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.danger-zone.card { margin-top: 16px; max-width: 440px; }
.danger-zone > p:first-child { margin: 0 0 16px; }
.danger-zone > .msg { display: block; margin-top: 8px; }
.ask-code { margin: -6px 0 18px; font-size: 14px; }
input.code-input { letter-spacing: .2em; }

/* Log in and Sign up: one column at most 440 px wide, left-aligned; the main buttons full width. */
.auth { max-width: 440px; }
.auth h1 { font-size: 32px; margin: 0 0 24px; }
.auth h2 { font-size: 20px; margin: 40px 0 8px; }
.auth > .msg.error { display: block; margin: 0 0 16px; }
.auth .form-fields > button.block { margin-top: 8px; }
.auth .form-note { margin: 10px 0 0; }
.auth .enter-code { margin-top: 24px; }
.auth .sent { overflow-wrap: anywhere; }
.auth .form-fields > .msg, .auth > .msg { display: block; margin-top: 10px; }
.auth input.code-input { font-size: 20px; letter-spacing: .2em; }
.auth .lead { color: var(--muted); }
.auth-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.auth details.foldout { margin: 0 0 16px; }
.auth details.foldout .foldout-body { padding-top: 16px; }
.forgot-line { margin: -6px 0 12px; font-size: 14px; }
/* "or" between the code and the password: two lines and the word. */
.auth .to-password-line { margin: 16px 0 0; }
.auth .to-code + .form-note { margin-top: 10px; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; color: var(--muted); font-size: 14px; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* 11. D7: Event page (docs/design-d7.md; event.html, pages/event.js) ---------------------------- */

/* One column, no outer card: the head, the facts, the answer, the comments, the host's box. */
.event-page { padding-top: 8px; }
.event-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; }
.event-chips .past { font-size: 14px; }
.event-title { font-size: 28px; font-weight: 700; margin: 0 0 12px; overflow-wrap: anywhere; }
@media (min-width: 768px) { .event-title { font-size: 32px; } }
.event-head .icon-line.where > span { flex: 1; }
.event-head .map-link { font-size: 14px; white-space: nowrap; margin-left: auto; }
.event-head .host-row .host { overflow-wrap: anywhere; }
.event-description { font-size: 16px; margin: 16px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Price, places left, answer by: muted label left, bold value right, a line above and under each row. */
.event-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 24px 0 0; border-top: 1px solid var(--line); }
.event-facts dt, .event-facts dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.event-facts dt { color: var(--muted); font-size: 15px; padding-right: 16px; }
.event-facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* The answer (D3's block look): full width on phones; on a computer its own width, with
   "Can't make it after all?" next to it. */
.event-answer .rsvp-block { margin-top: 24px; }
@media (min-width: 768px) {
  .event-answer .rsvp-block .row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .event-answer .rsvp-block .block { display: inline-flex; width: auto; }
}
.exempt-note { margin: 8px 0 0; font-size: 14px; }
.event-answer .coming-list .said-coming, .event-answer .coming-list .nobody { margin: 24px 0 12px; }
.event-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; }
.event-page .comments { margin-top: var(--section); }

/* The host's and organizers' grey box: who sees it, then Edit the event (folded away). */
.host-tools { margin-top: var(--section); }
.host-tools > p.meta { margin: 0 0 4px; }
.host-tools details.foldout { margin: 8px 0 0; }

/* The event form (new and edit): D6's .form-fields with D3's field() (one field per row, the label
   above) and .form-end; "Create event" is a .main-action. Date and time side by side from 480 px.
   No card of its own: on ?new it's the page, in the box it's grey. */
.event-form .when-fields { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .event-form .when-fields { grid-template-columns: auto auto; justify-content: start; gap: 0 24px; } }
.event-form .field input.time-text { width: 6em; }
.event-form .field input.places { width: 7em; }
.event-form .extras-head { font-size: 14px; border-top: 1px solid var(--line); padding-top: 16px; margin: 8px 0 16px; }
.event-form .form-end .delete-event { margin-left: auto; }
.event-form .form-end .save-status { flex-basis: 100%; }

/* 12. D9: President tools (docs/design-d9.md; president.html, round.html, the announcements page,
   and their scripts: pages/president.js, members.js, announce.js, roundActions.js) ------------- */

/* A list row with a button on the right instead of the › (listRow({ action }) in ui.js): Change,
   Assign. The button never shrinks; long names wrap beside it. */
.list-row .row-action { flex: none; display: flex; align-items: center; }

/* A main button with a muted line centred under it ("Everyone gets a notification…"): the
   button's own width on a computer, full width on phones. */
.action-note { display: grid; justify-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 24px; text-align: center; }
.action-note > p { margin: 0; }
.action-note > .msg:empty { display: none; }
@media (max-width: 767.98px) { .action-note { width: auto; justify-items: stretch; } }

/* The round pages (round.html): the title and "created by", the sign-up note, the host-list post. */
.desktop-back + .round-head, #page > .round-head:first-child { margin: 0 0 8px; }
.round-head .page-title { margin: 0; }
.signup-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding: 20px; }
.signup-note p { margin: 0; }
p.host-list-post { margin: 16px 0 0; }
.nothing-saved { margin: 24px 0 12px; }

/* The weeks: list rows with Change / Assign; a changed week on grey with a chip under the name;
   the open week's choices in a grey card right under its row. */
.list-row.week.changed, .list-row.week.open { background: var(--surface); }
.list-row .changed-chip { font-size: 12px; padding: 1px 8px; align-self: flex-start; margin-top: 2px; }
.week-panel.card { margin: 8px 0 12px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); }
.choice .title { display: block; }
.choice > .meta { margin: 2px 0 0; overflow-wrap: anywhere; }
.choice .row { margin: 8px 0 0; }
.choice select, .choice input { max-width: 100%; min-width: 0; }
.week-panel .choice + .choice { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
details.foldout.already-shown { margin: 24px 0 0; }
/* Add a week, Move several weeks, the name: each a short block with a line above. */
.choice.standalone { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.choice.standalone h3 { margin: 0 0 4px; }
@media (max-width: 767.98px) { .choice.standalone .row > select, .choice.standalone .row > input { flex: 1 1 100%; } }
.savebar ul { font-size: 14px; }

/* The round creator and planning (?new, ?plan=): the fields, the hosts in order, the others. */
.round-fields { margin-top: 16px; }
.open-signup { margin: 0; }
.open-signup .msg:empty { display: none; }
.plan-hint { margin: -4px 0 12px; }
ol.list-rows.editor { list-style: none; padding: 0; margin: 0; }
.plan-row { display: flex; align-items: center; gap: 8px 16px; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.plan-row .row-date { width: 8em; flex: none; font-size: 14px; white-space: nowrap; }
.plan-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.person-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.plan-actions { flex: none; display: flex; gap: 6px; }
.plan-actions button.arrow { padding: 6px 11px; }
.plan-row.skipped .plan-who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-row.skipped .plan-who input { flex: 1 1 8em; min-width: 0; }
/* Phones: the date and the name on the first line, the buttons under the name. */
@media (max-width: 767.98px) {
  .plan-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px 12px; }
  .plan-row .plan-actions { grid-column: 2; }
}
.add-cancelled { margin: 16px 0 0; }
.pool-group .section-head { margin-bottom: 8px; }
.pool-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.pool-list li { display: flex; align-items: center; gap: 8px 16px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.pool-list li > button { flex: none; }
.create-end { margin-top: var(--section); }

/* President tools (president.html): the title (computers), the tabs, then the chosen tab. The
   tabs scroll sideways inside themselves when the four don't fit (Danish on a phone). */
.page-title + nav.tabs { margin-top: 16px; }
#page > nav.tabs::-webkit-scrollbar { display: none; }
main nav.tabs a { text-decoration: none; } /* links without a class are underlined in main */
@media (max-width: 767.98px) { main.president-page { padding-top: 8px; } }
#tab > :first-child, #tab > .section-head:first-child { margin-top: 24px; }
#tab .actions-bar { margin-top: 32px; }
#tab > .actions-bar:first-child { margin-top: 24px; }
#tab .section-head h2 { min-width: 0; overflow-wrap: anywhere; }

/* Rota: the grey sign-up card (Closed: the name and Open sign-up; Open: who signed up and Plan the
   round), then each running round's weeks with Change / Assign. */
.card.signup-admin { padding: 20px; }
.signup-admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.signup-admin-head strong { font-size: 17px; line-height: 1.3; }
.signup-admin-head .chip { flex: none; background: var(--bg); }
.signup-admin > .meta { margin: 6px 0 16px; }
.open-signup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.open-signup-row .field { flex: 1 1 14em; margin: 0; }
.signup-admin > .msg { margin: 8px 0 0; }
.signup-admin > .msg:empty { display: none; }
.open-round { display: grid; justify-items: start; gap: 6px; margin-top: 12px; }
.open-round + .open-round { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.open-round .volunteers { margin: 0 0 6px; overflow-wrap: anywhere; }
.rota-round .host-list-post { margin-top: 16px; }

/* Announcements: the form (no card: it's the tab), and the announcements with lines between. */
form.announce .announce-hint { margin: 0 0 8px; }
.announcements { border-top: 1px solid var(--line); }
.announcements .announcement { padding: 16px 0; border-bottom: 1px solid var(--line); }
.announcement h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.announcement-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 8px; }
.announcement-link { margin: 0 0 8px; overflow-wrap: anywhere; }
.announcement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.announcement-meta .face { margin: 0 2px 0 0; }
.announcement-meta button.link { font-size: 13px; }
.write-announcement { margin: 0 0 16px; }

/* Members: the approve box, then people as rows (no table): the face, the name and a muted line;
   under it (beside it when there's room) the tick boxes, Member since and Block. */
.card.approve-box { padding: 20px; }
.approve-box h2 { font-size: 17px; margin: 0 0 12px; }
.section-hint { margin: -4px 0 12px; }
ul.people-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.people-list li.person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.approve-box ul.people-list { border-top: 0; }
.approve-box .people-list li.person { border-bottom: 0; padding: 0; }
.person-head { display: flex; align-items: center; flex: 1 1 14em; min-width: 0; }
.person-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.person-text a.person { text-decoration: none; }
@media (hover: hover) { .person-text a.person:hover { text-decoration: underline; } }
.person-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: 1 1 auto; min-width: 0; padding-left: 40px; }
.person-controls select { min-width: 0; }
.person-controls .block-button { margin-left: auto; }
.person-controls .undeletable { flex-basis: 100%; }
label.flag { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; cursor: pointer; }
.member-since { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
label.member-since-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.saved-note { font-size: 13px; }
.saved-note:empty { display: none; }
button.link.delete { font-size: 14px; }
button.link.delete.sure { color: var(--danger); }
.ghost-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ghost-form input { flex: 1 1 14em; min-width: 0; }

/* 13. D5: Films (docs/design-d5.md; screenings.html, film.html, their scripts in pages/, reviews.js) */

/* The blank poster (poster() in common.js), for films not on TMDB: grey, 2:3, the film icon in
   the middle. Everywhere a poster is shown (tiles, the film page, the screening page, profiles). */
.poster.blank { aspect-ratio: 2 / 3; border-radius: 8px; background: var(--avatar); flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; overflow: hidden; color: var(--muted); }
.poster.blank .icon { width: 32px; height: 32px; max-width: 45%; stroke-width: 1.5; }

/* The Films list: the title, the search box with a magnifier inside, the count, then per year a
   heading with its count and D1's poster grid (3 across on phones, 6 from 768 px). */
.films-page > h1 { margin-bottom: 20px; }
.search-field { position: relative; max-width: var(--column); }
.search-field .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; padding: 12px 14px 12px 44px; }
.films-page #count { margin: 10px 0 0; }
.films-page #count:empty { display: none; }
.films-page #list > .msg { display: block; margin-top: 24px; }
.year-head { margin: var(--section) 0 16px; }
.film-year:first-child .year-head { margin-top: 24px; }
.year-head .meta { white-space: nowrap; }
.films-page .tile-title { overflow-wrap: anywhere; }
.letterboxd-line { margin: var(--section) 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.letterboxd-line .text-link { align-self: flex-start; gap: 6px; }
.letterboxd-line .icon { width: 16px; height: 16px; }

/* The film page, one 640 px column. The head: the poster on the left (120 px on phones, 180 px from
   768 px); the number, the title, the year line, the day it was shown and the host on the right. */
.film-head { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 0; }
.film-head > img, .film-head > .poster.blank { width: 120px; border-radius: 8px; }
.film-facts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.film-no { margin: 0; font-size: 13px; font-weight: 600; }
.film-head .film-title { margin: 0 0 2px; font-size: 28px; font-weight: 700; overflow-wrap: anywhere; }
.film-year, .film-shown { margin: 0; font-size: 15px; }
.film-head .host-row { margin: 6px 0 0; font-size: 15px; }
.film-head .host-row .host { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .film-head { gap: 24px; }
  .film-head > img, .film-head > .poster.blank { width: 180px; }
  .film-head .film-title { font-size: 32px; }
}
p.overview { margin: 20px 0 0; overflow-wrap: anywhere; }

/* The teaser was. */
.film-teaser { margin-top: var(--section); }
.film-teaser h3 { margin: 0; }
.film-teaser .teaser { margin: 8px 0 0; overflow-wrap: anywhere; }

/* Ratings: the club's number big with its stars, the count under both; then your own. */
.club-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.club-number { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.club-count { flex-basis: 100%; margin: 4px 0 0; }
.your-rating h3 { margin: 24px 0 8px; }
.your-rating p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.your-rating .text-link.with-icon .icon { width: 16px; height: 16px; }

/* Reviews (reviewItem() in reviews.js; the profile's own layout is .review.with-film in D6's
   section). On the film page: the face | the name bold and the stars, the text, the date. */
.review { border-bottom: 1px solid var(--line); padding: 16px 0; }
.review-text { white-space: pre-line; overflow-wrap: anywhere; margin: 4px 0 0; }
.review.on-film { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.review.on-film > .face { margin: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.review-author { min-width: 0; overflow-wrap: anywhere; }
.review-author a.person { text-decoration: none; }
@media (hover: hover) { .review-author a.person:hover { text-decoration: underline; } }
.review-head .stars .icon { width: 14px; height: 14px; }
.review-date { margin: 6px 0 0; font-size: 13px; }
/* Spoilers: a grey box and a quiet "Show review" under it, until it's clicked. */
.spoiler-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; }
.spoiler { display: flex; align-items: center; gap: 8px; align-self: stretch; background: var(--surface); border-radius: 10px; padding: 10px 14px;
  color: var(--muted); font-size: 15px; }
.spoiler .icon { width: 18px; height: 18px; }
.film-reviews > .meta { margin: 0; }
.write-review { margin-top: 20px; }
.write-review .icon { width: 18px; height: 18px; }

/* Comments from the teaser week: a bordered fold-out with the comments inside. */
details.teaser-week { margin-top: var(--section); border: 1px solid var(--line); border-radius: 12px; }
details.teaser-week > summary { padding: 14px 16px; }
details.teaser-week > summary > span { min-width: 0; overflow-wrap: anywhere; }
details.teaser-week .fold-arrow { margin-left: auto; }
details.teaser-week .foldout-body { padding: 0 16px 16px; }
details.teaser-week .comments > .comment:first-child { padding-top: 4px; }

/* 14. D11: Notifications (docs/design-d11.md; notifications.html, pages/notifications.js) ------- */
/* The page head is D6's .page-head (shown on phones too: a tab page has no back header). On a
   narrow phone "Mark all as read" goes under the title, on the right. */
.page-head:has(#page-actions) { flex-wrap: wrap; }
#page-actions button.link { font-size: 15px; white-space: nowrap; }

/* Unread announcements, pinned: a bordered card each, the whole card one link. */
.pinned { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.pinned .notification.important { display: flex; flex-direction: column; align-items: flex-start; margin: 0; color: var(--text);
  text-decoration: none; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.notification.important .important-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.notification.important .important-label .icon { width: 18px; height: 18px; }
.notification.important .important-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 8px; }
.notification.important .body { color: var(--muted); margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.notification.important .text-link { margin-top: 12px; }
button.notification.important { font: inherit; background: var(--bg); border-color: var(--text); border-radius: var(--radius); filter: none; }

/* The list: kind icon in a circle | actor, what happened, text, time | red dot while unread. */
.inbox { border-top: 1px solid var(--line); }
.inbox .notification { display: grid; grid-template-columns: 40px minmax(0, 1fr) 8px; gap: 12px; align-items: start; width: 100%;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--text);
  font: inherit; font-weight: 400; text-align: left; text-decoration: none; justify-content: stretch; }
.inbox .notification .icon-circle .icon { width: 20px; height: 20px; }
.inbox .notification .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.inbox .notification .actor { font-weight: 700; }
.inbox .notification .title { font-weight: 400; }
.inbox .notification.unread .title { font-weight: 600; }
.inbox .notification .body { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.inbox .notification .time { font-size: 13px; }
.inbox .notification .dot { margin-top: 6px; }
@media (hover: hover) {
  .inbox a.notification:hover, .inbox button.notification:not(:disabled):hover { background: var(--surface); filter: none; }
}
.inbox-empty { margin: 0; }

p.inbox-more { margin: 24px 0 0; text-align: center; }
.inbox-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--section); }

/* 15. D8: About, Privacy, 404 (docs/design-d8.md; about.html, privacy.html, 404.html, pages/info.js) */
/* The title: visible on phones too, under the back header (the mockups show it there). Not D3's
   .page-title, which hides on phones: these are documents, and the title starts the text. */
h1.text-title { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 12px; }
.text-page .lead { color: var(--muted); font-size: 18px; line-height: 1.45; max-width: 34em; }
.text-page h2[id] { scroll-margin-top: 16px; } /* #contact (the footer's link), #kontakt */

/* About: few, distinct blocks, D1's section rhythm (h2 20/600, 40 px above, 12 px below). */
.about-page h2 { margin: var(--section) 0 12px; }
.about-page .icon-line.where { font-size: 16px; margin: 0; }
.about-page .map-line { margin: 4px 0 0 26px; } /* under the text after the pin, as on the visitors' card */

/* Questions: D1's fold-outs between lines. */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details.foldout { margin: 0; border-bottom: 1px solid var(--line); }
.faq-list details.foldout > summary { font-size: 16px; font-weight: 600; justify-content: space-between; padding: 16px 0; cursor: pointer; }
.faq-list details.foldout > summary > span { min-width: 0; }
.faq-list .foldout-body { padding: 0 0 16px; }
.faq-list .foldout-body p { margin: 0; }

/* The TMDB credit at the bottom of About: a footnote, not part of Contact. */
.tmdb-credit { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 48px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* Privacy: one long text, so tighter than About. Body in --text (it has to be read). */
.privacy-page h2 { font-size: 18px; font-weight: 600; margin: 28px 0 6px; }
.privacy-page ul { padding-left: 20px; margin: 0 0 12px; }
.privacy-page li + li { margin-top: 6px; }
/* What isn't known yet ("[the mail service's name, once it's chosen]"). */
.draft { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; }

/* 404: the number in the teaser's italic serif, the only serif on the page. */
.not-found .big-number { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 80px; line-height: 1; letter-spacing: -.01em; margin: 48px 0 8px; }
@media (min-width: 768px) { .not-found .big-number { font-size: 104px; } }
.not-found h1.text-title { max-width: 14em; }
.not-found .lost { color: var(--muted); font-size: 16px; }
.not-found .button { margin-top: 8px; }

/* 16. D12: Posts (docs/design-d12.md; posts.html, post.html, pages/posts.js, pages/post.js, posts.js) */

/* The Posts list: New post and the way to the announcements (under it on phones), a muted line,
   then D2's post rows with two lines of the text. */
.posts-tools { margin: 16px 0 8px; gap: 12px 16px; }
.posts-tools .button .icon { width: 16px; height: 16px; }
.posts-tools .announcements-link { margin-left: auto; font-size: 14px; }
@media (max-width: 767.98px) {
  .posts-tools { margin-top: 0; }
  .posts-tools .announcements-link { margin-left: 0; flex-basis: 100%; }
}
.posts-intro { margin: 0 0 24px; }
.post-row.with-text { padding: 16px 0; }
@media (hover: hover) { .post-row.with-text .post-title:hover { text-decoration: underline; text-underline-offset: 3px; } }
.post-row.with-text .post-title { font-size: 16px; }
.post-excerpt { margin: 4px 0 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.post-row.with-text .meta { margin-top: 8px; }

/* A post: no outer card. The New round chip (round posts), the title, the byline, the text, the
   link, the round's host list, the comments, and the writer's and organizers' grey box (D7's
   .host-tools). */
.post-page { padding-top: 8px; }
.post-chips { margin: 0 0 12px; }
.post-page .post-title { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
@media (min-width: 768px) { .post-page .post-title { font-size: 32px; } }
.post-head .byline { margin: 0; }
.post-head .byline .who { min-width: 0; overflow-wrap: anywhere; }
.post-head .byline a.person { text-decoration: none; }
@media (hover: hover) { .post-head .byline a.person:hover { text-decoration: underline; } }
.post-head .byline .meta { font-size: 15px; }
.post-body { font-size: 16px; margin: 16px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.post-link { margin: 24px 0 0; min-width: 0; }
.post-link > span { min-width: 0; overflow: hidden; }
.post-link a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.post-page .host-list .section-head { margin-top: 24px; }
.post-page .edit-round { margin: 16px 0 0; font-size: 14px; }
.post-page .comments { margin-top: var(--section); }

/* The form (new and edit): D6's .form-fields with D3's field() and .form-end. "Post" is the page's
   .main-action; Delete sits on the right. No card of its own: on ?new it's the page, in the box it's grey. */
.post-new h1 { margin: 0 0 24px; overflow-wrap: anywhere; }
.post-form .tell-everyone { margin: 0 0 16px; }
.post-form .form-end .delete-post { margin-left: auto; }
.post-form .form-end .save-status { flex-basis: 100%; }