/* Material 3 component layer. All colours and shapes come from theme data.
   Keep this shared: custom themes inherit components rather than forking page CSS.
   The controls come first: one small set, sized and shaped from the tokens below, that every
   page (the viewer's, Your settings, the admin console, the site editor, the game player) draws
   its buttons, chips, fields, menus and dialogs from. */

/* ---------- Tokens ---------- */
:root {
  /* Two sizes for every control: the usual one, and small for dense rows (tables, toolbars,
     the site editor). Touch screens get a roomier small size. */
  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --control-pad: 1.25rem;
  --control-pad-sm: 0.875rem;
  --control-gap: 0.5rem;
  --control-font: 0.875rem;
  --control-font-sm: 0.8125rem;
  --icon: 1.25rem;
  --icon-sm: 1.125rem;
  /* Buttons and chips take the theme's control corner; fields a gentler one of it, so a pill
     theme's text boxes stay boxes. */
  --field-radius: min(var(--control-radius), 0.75rem);
  /* Quiet fills are a wash of the text colour, so they read on the page, a panel, a dialog or
     over a picture, by day and by night. */
  --fill: color-mix(in srgb, currentColor 10%, transparent);
  --fill-hover: color-mix(in srgb, currentColor 15%, transparent);
  --fill-press: color-mix(in srgb, currentColor 20%, transparent);
  --hover: color-mix(in srgb, currentColor 8%, transparent);
  --field-bg: color-mix(in srgb, var(--text) 4%, transparent);
  /* A field's edge: the theme's line, a step firmer, so a box on a panel reads as one (2.5:1 or more
     in every built-in theme). */
  --field-line: color-mix(in srgb, var(--line), var(--text) 20%);
  /* A button's edge: none, except where the person asked for more contrast (and in High
     contrast), where every control shows its outline. */
  --control-line: transparent;
  /* Raised things: menus, dialogs, the save bar. */
  --shadow-menu: 0 16px 40px -8px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.12);
  --shadow-dialog: 0 24px 64px -12px rgb(0 0 0 / 0.55);
  /* Panels: the admin console's cards, Your settings' sections, dialogs. */
  --panel-pad: 1.5rem;
  /* The type scale. */
  --type-page: calc(clamp(1.75rem, 2.4vw, 2.125rem) * var(--type-scale, 1));
  --type-section: 1.25rem;
  --type-sub: 1.0625rem;
  --type-overline: 0.6875rem;
  --motion-fast: 0.15s;
}
@media (pointer: coarse) { :root { --control-h-sm: 2.5rem; } }
@media (max-width: 640px) { :root { --panel-pad: 1rem; } }
@media (prefers-contrast: more) { :root { --control-line: color-mix(in srgb, currentColor 55%, transparent); } }
:root[data-theme="high-contrast"] { --control-line: color-mix(in srgb, currentColor 60%, transparent); --fill: transparent; }

body { line-height: var(--line-height, 1.5); }
h1 { font-size: calc(clamp(1.75rem, 3vw, 2rem) * var(--type-scale, 1)); line-height: 1.25; }
h2 { font-size: calc(1.5rem * var(--type-scale, 1)); line-height: 1.35; }
h3 { line-height: 1.5; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-offset: 2px; }

/* ---------- Buttons ----------
   Filled (.primary) for the one main action; tonal (.ghost, and .pill-action on a title's page)
   for the rest; text (.text-button) for a quiet action in a line of words; .danger on either for
   what can't be undone; .icon-only for a button that is its icon. .small for dense rows. Their
   words follow the theme's button case; chips, tabs, menus and fields keep sentence case. */
:is(.primary, .ghost, .pill-action) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap);
  min-height: var(--control-h); padding: 0 var(--control-pad); margin: 0;
  border: 1px solid var(--control-line); border-radius: var(--control-radius);
  font: 500 var(--control-font)/1.25 var(--font-body); text-transform: var(--button-case); letter-spacing: var(--button-tracking);
  white-space: nowrap; text-decoration: none; text-align: center; cursor: pointer; user-select: none;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform 0.12s ease;
}
/* An icon before the words: a little less room on its side. */
:is(.primary, .ghost, .pill-action):where(:has(> svg:first-child):not(.icon-only)) { padding-inline: calc(var(--control-pad) - 0.25rem) var(--control-pad); }
:is(.primary, .ghost, .pill-action, .text-button) > svg { flex: none; width: var(--icon); height: var(--icon); fill: currentColor; }
.primary { background-color: var(--accent); color: var(--on-accent); }
.primary:hover { background-color: color-mix(in srgb, var(--accent) 88%, var(--on-accent)); }
.primary:active:not(:disabled) { background-color: color-mix(in srgb, var(--accent) 80%, var(--on-accent)); }
:is(.ghost, .pill-action) { background-color: var(--fill); color: inherit; }
:is(.ghost, .pill-action):hover { background-color: var(--fill-hover); }
:is(.ghost, .pill-action):active:not(:disabled) { background-color: var(--fill-press); }
/* On, for a button that stays pressed (My list, Watched, Preview): the theme's selection colour.
   The filled check inside is cut out in that colour too. */
:is(.ghost, .pill-action)[aria-pressed="true"], .kind-choice[aria-pressed="true"] { background-color: var(--tonal); color: var(--on-tonal); border-color: var(--tonal); --knock: var(--tonal); }
:is(.ghost, .pill-action)[aria-pressed="true"]:hover { background-color: color-mix(in srgb, var(--tonal) 88%, var(--on-tonal)); }
svg .knock { stroke: var(--knock, var(--on-accent)); }
:is(.primary, .ghost, .pill-action):disabled, :is(.primary, .ghost, .pill-action)[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.pill-action:disabled { cursor: progress; }
:is(.primary, .ghost, .pill-action):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Small. */
:is(.primary, .ghost, .pill-action).small { min-height: var(--control-h-sm); padding: 0 var(--control-pad-sm); font-size: var(--control-font-sm); gap: 0.375rem; }
:is(.primary, .ghost, .pill-action).small:where(:has(> svg:first-child):not(.icon-only)) { padding-inline: calc(var(--control-pad-sm) - 0.2rem) var(--control-pad-sm); }
:is(.primary, .ghost, .pill-action).small > svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Danger: the danger colour, as words on a tonal button or as the fill of a filled one. */
/* A lighter wash under danger words, so they keep AA contrast when pointed at. */
:is(.ghost, .pill-action).danger { color: var(--danger); --fill: color-mix(in srgb, currentColor 8%, transparent); --fill-hover: color-mix(in srgb, currentColor 12%, transparent); --fill-press: color-mix(in srgb, currentColor 16%, transparent); }
.primary.danger { background-color: var(--danger); color: var(--bg); }
.primary.danger:hover { background-color: color-mix(in srgb, var(--danger) 88%, var(--bg)); }
.danger { color: var(--danger); }
/* A button that is its icon: square, round in a theme with round controls. */
:is(.primary, .ghost, .pill-action).icon-only { width: var(--control-h); padding: 0; flex: none; }
:is(.primary, .ghost, .pill-action).icon-only.small { width: var(--control-h-sm); }
:is(.primary, .ghost, .pill-action).icon-only > span { display: none; }
/* Text: a quiet action among words (More under a plot, Edit on a review). It lines up with the
   text around it; its hover is a soft wash. */
.text-button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--control-h-sm); margin: 0 -0.5rem; padding: 0 0.5rem;
  border: 0; border-radius: var(--control-radius); background: transparent; color: var(--accent); font: 500 var(--control-font)/1.25 var(--font-body);
  text-transform: var(--button-case); letter-spacing: var(--button-tracking); cursor: pointer; transition: background-color var(--motion-fast) ease; }
.text-button:hover { background-color: var(--hover); }
.text-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
/* Links that are buttons, inside a sentence: the accent, underlined, like a link. */
:is(button.link, .linkish, .text-link) { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--accent);
  font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; cursor: pointer; }
:is(button.link, .linkish, .text-link):hover { text-decoration-thickness: 2px; }
/* Buttons that are icons in the page's chrome (the header, arrows over pictures, closing a
   message): no fill until pointed at. */
.icon-button { display: inline-grid; place-items: center; flex: none; width: var(--control-h); height: var(--control-h); padding: 0; border: 0;
  border-radius: var(--control-radius); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--motion-fast) ease; }
.icon-button:hover { background-color: var(--hover); }
.icon-button svg { width: var(--icon); height: var(--icon); }

/* ---------- Chips: choices in a row (seasons, days, a game's options, active filters) ---------- */
:is(.chip-tab, .chip, .gp-choice, .day) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: var(--control-h-sm); padding: 0 0.875rem; margin: 0;
  border: 1px solid var(--line); border-radius: var(--control-radius); background-color: transparent; color: inherit;
  font: 500 var(--control-font-sm)/1.25 var(--font-body); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
:is(.chip-tab, .chip, .gp-choice, .day):hover { background-color: var(--hover); }
:is(.chip-tab, .gp-choice)[aria-pressed="true"], .day:has(input:checked), .chip {
  background-color: var(--tonal); color: var(--on-tonal); border-color: var(--tonal); }
:is(.chip-tab, .gp-choice)[aria-pressed="true"]:hover, .chip:hover { background-color: color-mix(in srgb, var(--tonal) 88%, var(--on-tonal)); }
:is(.chip-tab, .chip, .gp-choice):focus-visible, .day:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
/* An active filter: its name and a cross that takes it off. */
.chip::after { content: ""; width: 0.6rem; height: 0.6rem; margin-right: -0.15rem; opacity: 0.8;
  background: linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(-45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)); }

/* ---------- Segmented choices: one control, several answers (Day or night, Guide or On now) ---------- */
:is(.segmented, .mode-pick, .se-tabs, .settings-context, .settings-mobile-context) {
  box-sizing: border-box; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--control-line);
  border-radius: var(--control-radius); background-color: color-mix(in srgb, currentColor 7%, transparent); }
:is(.segmented, .mode-pick, .se-tabs, .settings-context, .settings-mobile-context) > :is(button, label, a, [role="tab"]) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 0.35rem;
  min-height: calc(var(--control-h) - 8px); padding: 0 1rem; margin: 0; border: 0; border-radius: max(0px, calc(var(--control-radius) - 3px));
  background: transparent; color: color-mix(in srgb, currentColor 78%, transparent); font: 500 var(--control-font)/1.2 var(--font-body);
  text-transform: none; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
:is(.segmented, .mode-pick, .se-tabs, .settings-context, .settings-mobile-context) > :is(button, label, a, [role="tab"]):hover { color: inherit; background-color: var(--hover); }
:is(.segmented > button[aria-pressed="true"], .mode-pick > label:has(input:checked), .se-tabs > [aria-selected="true"], .settings-context > a.active, .settings-mobile-context > a.active) {
  background-color: var(--tonal); color: var(--on-tonal); }
:is(.segmented > button[aria-pressed="true"], .mode-pick > label:has(input:checked), .se-tabs > [aria-selected="true"], .settings-context > a.active, .settings-mobile-context > a.active):hover { background-color: var(--tonal); }
:is(.segmented, .se-tabs, .settings-context, .settings-mobile-context) > :focus-visible, .mode-pick > label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.segmented > button:disabled, .mode-pick > label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.segmented > button:active:not(:disabled) { transform: none; }
.mode-pick input { position: absolute; opacity: 0; pointer-events: none; }
/* Small, for the site editor's panels. */
:is(.segmented.se-seg, .segmented.ins-seg, .se-tabs) > :is(button, [role="tab"]) { min-height: calc(var(--control-h-sm) - 8px); padding: 0 0.7rem; font-size: var(--control-font-sm); }

/* ---------- Fields ---------- */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="hidden"]), select, textarea) {
  box-sizing: border-box; min-width: 0; min-height: var(--field-h, var(--control-h)); margin: 0; padding: 0 0.875rem;
  border: 1px solid var(--field-line); border-radius: var(--field-radius); background-color: var(--field-bg); color: inherit;
  font: 400 var(--field-font, 1rem)/1.4 var(--font-body); transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
:where(textarea) { padding: 0.625rem 0.875rem; line-height: 1.5; }
:where(input, select, textarea):hover:not(:disabled, :focus) { border-color: color-mix(in srgb, var(--field-line), var(--text) 30%); }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; border-color: transparent; }
:where(input, textarea)::placeholder { color: var(--muted); opacity: 0.85; }
:where(input, select, textarea):disabled { opacity: 0.45; cursor: not-allowed; }
:where(input[readonly]) { color: var(--muted); }
/* A select's own arrow, drawn in the theme's quiet text colour. */
:where(select:not([multiple]):not([size])) { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; }
:where(select) option { background-color: var(--surface); color: var(--text); }
/* Search boxes: a filled pill (in a theme with round controls), the same in the header, the
   admin console's menu, a toolbar or the site editor. */
:where(input[type="search"]) { border-color: transparent; border-radius: var(--control-radius); padding-inline: 1rem; background-color: color-mix(in srgb, var(--text) 8%, transparent); }
:where(input[type="search"]):hover:not(:disabled, :focus) { border-color: transparent; background-color: color-mix(in srgb, var(--text) 11%, transparent); }
:where(input[type="search"])::-webkit-search-cancel-button { cursor: pointer; }
/* Rows of controls (a library's filters, a toolbar, the site editor): fields as tall as the buttons beside them, with the buttons' corners. */
:is(.filter-bar, .toolbar, .se-toolbar, .version-pick, .season-select, .player-menu-actions) select { border-radius: var(--control-radius); }
:is(.filter-bar, .se-toolbar, .se-panel-body, td, .game-screen-field, .task-card .actions, .cb-fields, .bn-dates, .inline-form:has(> .small)) { --field-h: var(--control-h-sm); --field-font: 0.875rem; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0; flex: none; cursor: pointer; }
input[type="range"] { cursor: pointer; }

.field { display: grid; gap: 0.4rem; }
.field > span { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.field :is(small, .help) { font-size: 0.8125rem; color: var(--muted); }
label.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; line-height: 1.5; cursor: pointer; }
label.check input { margin-top: 0.19rem; }
/* On and off. */
.setting-switch { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-weight: 500; }
.setting-switch input { appearance: none; -webkit-appearance: none; flex: 0 0 3.25rem; width: 3.25rem; height: 2rem; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--muted); border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--text) 8%, transparent); position: relative; cursor: pointer; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.setting-switch input::before { content: ""; position: absolute; width: 1rem; height: 1rem; left: 0.375rem; top: 0.375rem; border-radius: var(--control-radius); background: var(--muted);
  transition: transform var(--motion-fast) ease, width var(--motion-fast) ease, height var(--motion-fast) ease, left var(--motion-fast) ease, top var(--motion-fast) ease; }
.setting-switch input:checked { background: var(--accent); border-color: var(--accent); }
.setting-switch input:checked::before { width: 1.5rem; height: 1.5rem; left: 0.125rem; top: 0.125rem; transform: translateX(1.25rem); background: var(--on-accent); }
.setting-switch input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-color: var(--muted); }
.setting-switch input:checked:focus-visible { border-color: var(--accent); }
.setting-switch input:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Menus ----------
   The account menu, the compact library menu and More menus share one look: a raised card,
   rows in the text font (not button capitals), a quiet hover and the current page marked. */
details.more { position: relative; display: inline-block; }
details.more > summary { list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:not(.icon-only):not(.pill-action)::after { content: ""; width: 0.4em; height: 0.4em; margin: 0 0.1rem 0 0.15rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg); transition: transform var(--motion-fast) ease; }
details.more[open] > summary::after { transform: translateY(0.1em) rotate(225deg); }
.more-menu { position: absolute; z-index: 30; top: calc(100% + 0.375rem); left: 0; min-width: 13rem; max-width: calc(100vw - 1rem); }
.account-links, .more-menu { display: grid; }
.account-links, .top.compact-nav .nav, .more-menu { gap: 2px; padding: 0.375rem; background: var(--raised); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); }
.account-links a, .account-links button, .top.compact-nav .nav a, .more-menu > .ghost, .more-menu > a.ghost {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; width: 100%; min-height: 2.5rem; margin: 0; padding: 0.45rem 0.8rem;
  border: 0; border-radius: max(calc(var(--radius-lg) - 0.375rem), 4px); background: transparent; color: var(--text);
  font: 400 0.9rem/1.3 var(--font-body); text-transform: none; letter-spacing: 0; text-align: left; text-decoration: none; white-space: nowrap; }
.account-links a:hover, .account-links button:hover, .top.compact-nav .nav a:hover, .more-menu > .ghost:hover, .more-menu > a.ghost:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.more-menu > :is(.ghost, a.ghost):active:not(:disabled) { transform: none; background: color-mix(in srgb, var(--text) 12%, transparent); }
/* A small button put in a menu (Change server, Sign out, a danger item) is a row like the rest. */
:is(.account-links, .more-menu) > .small { min-height: 2.5rem; padding: 0.45rem 0.8rem; font-size: 0.9rem; }
.top.compact-nav .nav a[aria-current="page"] { background: var(--tonal); color: var(--on-tonal); font-weight: 500; }
.more-menu > .danger, .more-menu > .danger:hover { color: var(--danger); }
.account-links { width: min(16rem, calc(100vw - 2rem)); top: calc(100% + .5rem); }
/* Sign out sits apart, below a rule. */
.account-links #signout { position: relative; margin-top: .45rem; color: var(--muted); }
.account-links #signout::before { content: ""; position: absolute; left: .4rem; right: .4rem; top: calc(-.25rem - 1px); border-top: 1px solid var(--line); }
.account-links #signout:hover { color: var(--text); }
.account-links :is(a, button):focus-visible, .top.compact-nav .nav a:focus-visible, .more-menu > :focus-visible { outline-offset: -2px; }
.menu-label { margin: 0.45rem 0.8rem 0.15rem; color: var(--muted); font-size: var(--type-overline); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.more-menu > .menu-label:not(:first-child) { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
@media (pointer: coarse) {
  .account-links a, .account-links button, .top.compact-nav .nav a, .more-menu > .ghost, .more-menu > a.ghost, :is(.account-links, .more-menu) > .small { min-height: 2.75rem; }
}

/* ---------- Dialogs ---------- */
dialog.modal { box-sizing: border-box; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: var(--panel-pad);
  border: 0; border-radius: var(--radius-lg); background: var(--container); color: var(--on-container);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent), var(--shadow-dialog); }
dialog.modal::backdrop { background: rgb(0 0 0 / 0.6); }
dialog.modal h2 { margin: 0 0 0.35rem; font-size: calc(var(--type-section) * var(--type-scale, 1)); line-height: 1.3; }
/* In a dialog laid out as a stack, its parts are a step apart and no more. */
dialog.modal .stack > :is(h2, p) { margin: 0; }
dialog.modal .help { color: var(--muted); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.dialog-head h2 { margin: 0; }
/* The buttons that end a dialog: a little apart from what's above them. */
dialog.modal form > .actions:last-child, dialog.modal > .actions:last-child { margin-top: 0.5rem; }

/* ---------- Messages ---------- */
/* A line to note (.callout) and a problem to fix (.alert): a quiet panel, with a stripe of the
   kind's colour down its edge. The stripe is part of the panel's background, so it keeps a
   straight edge inside rounded corners. */
.callout, .alert { --edge: var(--muted); border-radius: var(--radius);
  background: linear-gradient(var(--edge), var(--edge)) left / 3px 100% no-repeat, color-mix(in srgb, var(--text) 5%, transparent); }
.callout { margin: 0 0 1.25rem; padding: 0.9rem 1.1rem 0.9rem 1.25rem; border: 0; }
.callout.warn, .alert.warning { --edge: var(--warn); }
.alert.error { --edge: var(--danger); }
.alert.info { --edge: var(--accent); }
.toast { padding: 0.75rem 1.1rem; border: 0; border-radius: var(--radius); background: var(--text); color: var(--bg); box-shadow: var(--shadow-menu);
  font-size: 0.9375rem; line-height: 1.4; }
.toast-error { background: var(--danger); color: var(--bg); border: 0; padding-right: 0.5rem; }

/* ---------- Header ---------- */
.top { min-height: 5rem; padding-block: .75rem; gap: 1.25rem; }
.top .wordmark { font-weight: 500; font-size: 1.9rem; line-height: 1.2; letter-spacing: -.02em; }
.top .nav { gap: .25rem; }
.top .nav a { padding: .75rem 1rem; border: 0; border-radius: var(--control-radius); line-height: 1.5; font-size: .875rem; color: var(--text); }
.top .nav a:hover { background: var(--raised); }
.top .nav a[aria-current="page"], .top.compact-nav .nav a[aria-current="page"] { background: var(--tonal); color: var(--on-tonal); }
.search { height: var(--control-h); border: 0; border-radius: var(--control-radius); background: var(--container); color: var(--on-container); padding-inline: 1.25rem; }
.top .nav-toggle { display: none; width: var(--control-h); height: var(--control-h); padding: .6rem; border: 0; background: transparent; }
.top.compact-nav .nav-toggle { display: inline-flex; }
.top .nav-toggle:hover { background: var(--hover); }
.admin-shortcut { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h); min-height: var(--control-h); padding: .5rem .75rem; border-radius: var(--control-radius); color: var(--muted); text-decoration: none; font-size: .875rem; }
.admin-shortcut:hover, .admin-shortcut[aria-current="page"] { background: var(--tonal); color: var(--on-tonal); }
#me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu summary { box-sizing: border-box; display: flex; align-items: center; min-height: var(--control-h); padding: .5rem 1rem; line-height: 1.2; background: var(--tonal); color: var(--on-tonal); border-radius: var(--control-radius); }
.banner { color: var(--text); background: var(--bg); }
.home-page > .banner { margin: 0 0 1.5rem; border-radius: 0; width: 100%; }
.banner-slide::after { background: linear-gradient(to right, var(--bg), color-mix(in srgb, var(--bg) 88%, transparent) 20%, color-mix(in srgb, var(--bg) 42%, transparent) 58%, transparent 90%), linear-gradient(to top, var(--bg), transparent 55%); }
.banner-text { max-width: 38rem; padding-inline: var(--gutter); gap: .65rem; }
.banner-title { font-size: calc(clamp(2.25rem, 4.2vw, 3.25rem) * var(--type-scale, 1)); line-height: 1.18; color: var(--text); }
.banner-label { color: var(--accent); font-weight: 500; font-size: .8rem; }
.banner-meta, .banner-overview { color: var(--muted); line-height: 1.6; }
.banner-dot { border-color: var(--muted); }
.banner-dot[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.banner-dot:focus-visible { outline-color: var(--ring); }
.home-section { padding-bottom: var(--section-space, 1.75rem); }
.section > h2 { font-size: calc(var(--heading-size, 1.5rem) * var(--type-scale, 1)); text-align: var(--heading-align, start); margin-bottom: 1.15rem; }
.art, .np-poster { border-radius: var(--media-radius); }
.card h3 { font-size: 1rem; line-height: 1.5; font-weight: 500; margin: .7rem 0 .2rem; }
.card p { line-height: 1.5; }
.rail-btn { border-radius: var(--control-radius); background: var(--raised); color: var(--text); box-shadow: 0 3px 12px #0003; }
.toolbar input[type="search"] { min-height: var(--control-h); }

/* ---------- Settings, the admin console's panels ---------- */
.settings { max-width: none; padding: 0; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0; }
.settings-nav { position: static; background: var(--surface); border-radius: 0; padding: 0; max-height: none; }
.settings-main { width: 100%; max-width: 78rem; padding: 2rem clamp(1.25rem, 3vw, 3rem); }
.settings-heading { margin-bottom: 1.75rem; }
.settings-heading h1 { margin: 0; }
.settings-heading p { color: var(--muted); margin: .5rem 0 0; }
.settings-list { display: grid; gap: 1rem; }
.settings-panel { background: var(--container); color: var(--on-container); padding: var(--panel-pad); border-radius: var(--radius-lg); }
.settings-panel > h2 { font-size: var(--type-section); margin: 0 0 .5rem; }
.settings-panel:not(:has(.setting:not([hidden]))) { display: none; }
.settings-panel .setting { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 1.25rem 0; }
.settings-panel .setting:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-panel .setting .help { max-width: 46rem; margin-top: .5rem; line-height: 1.6; }
.settings-body > .setting { background: var(--container); color: var(--on-container); border: 0; border-radius: var(--radius-lg); padding: var(--panel-pad); margin-bottom: 1rem; }
.settings-body > .setting h2 { font-size: var(--type-section); }
.settings-bar { background: transparent; padding: 0 0 1rem; margin: 0; gap: 1rem; }
.gpu-option { padding: 1rem; background: color-mix(in srgb, var(--text) 5%, transparent); border-color: transparent; }
.gpu-option:has(input:checked) { background: var(--tonal); color: var(--on-tonal); border-color: var(--tonal); box-shadow: none; }
.gpu-option:has(input:checked) .muted { color: inherit; }
.gpu-option strong { font-weight: 500; }
.gpu-option > span { gap: .4rem; }
.lib-row, .np-card { background: var(--container); color: var(--on-container); border-radius: var(--radius-lg); }
.lib-row { padding: var(--panel-pad); gap: 1.5rem; }
.np-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.np-card { border: 0; }
.np-top, .np-who, .np-ways { padding: 1rem; }
.np-avatar { background: var(--tonal); color: var(--on-tonal); }
.np-how.direct { color: var(--accent); }
.modal .dialog-head { gap: 1rem; }
.editor-section { border-radius: var(--radius); }
.table-wrap { border-radius: var(--radius); background: var(--container); color: var(--on-container); }
th, td { padding: 1rem; }
.settings-mobile-context { display: none; }
@media (max-width: 800px) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { display: none; }
  .settings-main { padding: 1.5rem var(--gutter); }
  .settings-select { display: block; width: 100%; margin-bottom: 1.25rem; }
  .settings-mobile-context { display: flex; margin-bottom: 1rem; }
  .settings-mobile-context a { flex: 1; }
  .top { min-height: 4.5rem; gap: .5rem; }
  .admin-shortcut { min-width: 2.5rem; padding-inline: .4rem; font-size: .75rem; }
  .account-menu summary { max-width: 4.5rem; padding-inline: .75rem; }
  .banner-slide::after { background: linear-gradient(to top, var(--bg), color-mix(in srgb, var(--bg) 60%, transparent) 55%, color-mix(in srgb, var(--bg) 20%, transparent)); }
  .lib-row { flex-wrap: wrap; }
}
/* On small phones the search box needs the room; Admin console stays in the account menu. */
@media (max-width: 480px) { .admin-shortcut { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .setting-switch input, .setting-switch input::before, details.more > summary::after,
  :is(.primary, .ghost, .pill-action, .text-button, .icon-button, .chip-tab, .chip, .gp-choice, .day),
  :is(.segmented, .mode-pick, .se-tabs, .settings-context, .settings-mobile-context) > * { transition: none; }
}
@media (forced-colors: active) {
  .setting-switch input { appearance: auto; } .setting-switch input::before { display: none; }
  :is(.primary, .ghost, .pill-action, .chip-tab, .chip) { border-color: ButtonText; }
}

/* ---------- Pages and design tokens (web/js/design.js) ----------
   A page and each row can carry their own design; every rule here falls back to the look
   above when nothing is set. */
#page.home-page, #page.site-page { background: var(--bg); color: var(--text); }
.home-page > .section, .site-page > .section { max-width: calc(var(--content-width, 400rem) + 2 * var(--gutter)); margin-inline: auto; }
.site-page > .banner { margin: 0 0 1.5rem; border-radius: 0; width: 100%; }
/* A row with its own background becomes a card inset by the page margins. */
.home-section.has-own-bg { background: var(--bg); color: var(--text); padding: var(--section-padding, 1.5rem); border-radius: var(--radius-lg);
  margin: 0 var(--gutter) var(--section-space, 1.75rem); }
.home-section.has-own-bg + .home-section.has-own-bg { margin-top: 0; }
.home-section:not(.has-own-bg) { padding-block-start: calc(.75rem + var(--section-padding, 0rem)); }
/* A page's banner: its height, where its text sits, and how much shade is behind the text. */
.banner { --banner-floor: 20rem; height: var(--banner-height, auto); min-height: min(var(--banner-floor), var(--banner-height, var(--banner-floor))); max-height: var(--banner-height, min(42rem, 68vh)); }
@media (max-width: 640px) { .banner { --banner-floor: 26rem; } }
.banner-slide { align-items: var(--banner-align, end); }
.banner-slide::after { opacity: var(--banner-overlay, 1); }
/* A page's own title, under its banner. */
.page-head { padding-top: 1.5rem; padding-bottom: .25rem; }
.page-title { margin: 0; font-size: calc(clamp(2rem, 3.6vw, 2.75rem) * var(--type-scale, 1)); line-height: 1.15; }

/* ---------- Themes: the pickers (Your settings, Appearance; the visual editor's Site design) ----------
   Here rather than in editor.css, which loads only with the admin pages. */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.theme-item { position: relative; display: flex; flex-direction: column; }
.theme-card { display: flex; flex-direction: column; width: 100%; flex-grow: 1; padding: 0; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--container); color: var(--on-container); cursor: pointer; overflow: hidden; font: inherit; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.theme-card:hover { border-color: var(--muted); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-card:active:not(:disabled) { transform: none; }
.theme-meta { display: grid; gap: .35rem; padding: .9rem 3.5rem 1rem 1rem; }
.theme-meta strong { font-size: 1rem; font-weight: 600; }
.theme-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.theme-badges span { padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; }
.theme-badges span[data-badge="use"] { background: var(--tonal); color: var(--on-tonal); border-color: var(--tonal); }
.theme-actions { position: absolute; right: .6rem; bottom: .6rem; }
.theme-actions .more-menu { left: auto; right: 0; top: auto; bottom: calc(100% + 4px); }
.theme-actions > details > summary svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
/* A theme in miniature: its header, a title in its font, lines of text, its button and three
   posters, day on the left and night on the right where it has both. Each half's colours come
   from the theme itself (appearance.js sets them as --sw-* variables). */
.theme-swatch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 8.5rem; overflow: hidden; }
.sw-mode { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: .9rem auto auto auto 1fr; align-content: start; gap: .3rem .5rem; padding: 0 .75rem .7rem;
  background: var(--sw-bg); color: var(--sw-text); min-width: 0; }
.sw-bar { grid-column: 1 / -1; margin: 0 -.75rem .25rem; height: .9rem; background: var(--sw-surface); border-bottom: 1px solid var(--sw-line); }
.sw-title { grid-column: 1; font: var(--sw-style) var(--sw-weight) 1.6rem/1 var(--sw-font); color: var(--sw-text); }
.sw-text { grid-column: 1; height: .32rem; width: 85%; border-radius: 2px; background: var(--sw-muted); opacity: .75; }
.sw-text.short { width: 55%; }
.sw-button { grid-column: 1; justify-self: start; align-self: start; margin-top: .15rem; padding: .12rem .55rem; border-radius: var(--sw-control-radius); background: var(--sw-accent); color: var(--sw-on-accent);
  font: 600 .62rem/1.3 system-ui, sans-serif; letter-spacing: .02em; }
.sw-posters { grid-column: 2; grid-row: 2 / 6; display: flex; gap: .25rem; align-self: start; margin-top: .1rem; }
.sw-posters i { display: block; width: .95rem; height: 1.45rem; border-radius: min(var(--sw-media-radius), 4px); background: var(--sw-container); border: 1px solid var(--sw-line); }
.sw-posters i:first-child { background: var(--sw-accent); border-color: transparent; opacity: .85; }
.sw-label { position: absolute; right: .45rem; bottom: .35rem; font: 600 .58rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sw-muted); }
.theme-swatch[data-modes="2"] .sw-posters i:nth-child(3) { display: none; }