/* Clean dark: the trip, after dark (asked for by Daniel, 31 Oct).
   The same look as Clean (same pieces, same layout, same data-theme="clean"), re-coloured for the
   night. theme-boot.js adds data-scheme="dark" to <html> when someone picks Clean dark, or picks
   "Match my phone" on a phone that is in dark mode; every rule here waits for that, so Clean light
   is untouched. Anchored on the logo kit's dark colours: the blue #5C86FF on the night #0E1118.
   The blue band becomes a deep navy band, the boarding pass becomes dark ticket stock with light
   ink, and the holes punched through the pass and the e-ticket show whatever is behind them.
   Body text is at least 4.5:1 against what it sits on; big numerals and controls at least 3:1. */

/* ===================== the look's tokens ===================== */
:root[data-theme="clean"][data-scheme="dark"] {
  /* The night palette. --cl-band is the deep navy that stands in for the blue band; --cl-stock is the
     ticket stock of the boarding pass; --cl-lit is the brighter blue a picked answer lights up in. */
  --cl-night: #0E1118;
  --cl-surface: #161B26;
  --cl-band: #203680;
  --cl-stock: #141924;
  --cl-lit: #2457E6;
  --cl-lit-press: #1D4ACC;

  /* Clean's own tokens (look-clean.css), turned for the dark. */
  --cl-blue: #5C86FF;               /* 5.7:1 on the night, 5.3:1 on the ticket stock */
  --cl-blue-press: #4A74EE;
  --cl-ink: #E8ECF5;                /* 16:1 on the night */
  --cl-ink-2: #A1AABC;              /* 8.1:1 on the night, 7.5:1 on the ticket stock */
  --cl-rule: rgba(232, 236, 245, .13);
  --cl-rule-2: rgba(232, 236, 245, .32);
  --cl-on-blue-2: #B4C3F2;          /* 6.3:1 on the navy band */
  --cl-on-blue-rule: rgba(255, 255, 255, .24);
  --cl-page: #141A28;

  /* The app's tokens (app.css), so every plain screen follows. */
  --scheme: dark;
  --bg: var(--cl-night);
  --fg: var(--cl-ink);
  --muted: var(--cl-ink-2);
  --muted-2: var(--cl-ink-2);
  --line: var(--cl-rule);
  --line-2: var(--cl-rule-2);
  --accent: #5C86FF;
  --accent-ink: #0B1020;            /* dark ink on the blue: 5.7:1 (white would be 3.3:1) */
  --accent-text: #5C86FF;           /* also the colour the Upkeep wordmark is painted in (brand.css) */
  --accent-soft: rgba(92, 134, 255, .16);
  --accent-line: rgba(92, 134, 255, .45);
  --link: #5C86FF;
  --green: #3FB57A;
  --green-ink: #06140C;
  --danger: #FF8A7A;
  --info-bg: rgba(92, 134, 255, .16); --info-fg: #AFC2FF;
  --ok-bg: rgba(63, 181, 122, .18); --ok-fg: #8FE0B5;

  /* Cards are hairline sections on the page in Clean, so a card's colour is the page's colour,
     exactly as white is in Clean light. Sheets get their own lifted surface (below). */
  --card-bg: var(--cl-night);
  --card-gold-bg: var(--cl-page);
  --card-rule: var(--cl-rule);
  --card-fg: var(--cl-ink);
  --card-muted: var(--cl-ink-2);
  --card-muted-2: var(--cl-ink-2);
  --card-eyebrow: var(--cl-ink);
  --card-link: #5C86FF;
  --card-danger: #FF8A7A;
  --card-accent-text: #5C86FF;
  --avatar-ring: var(--cl-night);

  /* Square printed-form buttons: light ink outline on the night. The main button is the logo blue. */
  --btn-bg: var(--cl-night); --btn-fg: var(--cl-ink); --btn-border: 1.5px solid var(--cl-ink);
  --card-btn-bg: var(--cl-night); --card-btn-fg: var(--cl-ink); --card-btn-border: 1.5px solid var(--cl-ink);
  --primary-bg: #5C86FF; --primary-fg: #0B1020; --primary-border: #5C86FF;
  --input-bg: #121722; --input-border: var(--cl-rule-2); --input-fg: var(--cl-ink); --input-hint: #949DB1;
  --chip-bg: transparent; --chip-fg: var(--cl-ink-2);
  --chip-accent-bg: rgba(92, 134, 255, .14); --chip-accent-fg: #5C86FF; --chip-accent-border: rgba(92, 134, 255, .45);
  --pill-bg: #131823; --pill-fg: var(--cl-ink);
  --switch-off: #2A3142; --switch-line: #3A4256; --switch-knob: #E8ECF5; --switch-on: #5C86FF; --switch-on-knob: #FFFFFF;
  --code-bg: #121722; --code-border: #3A4256; --code-fg: var(--cl-ink);
  --icon-accent: #5C86FF;

  --nav-bg: var(--cl-night); --nav-border: 1px solid var(--cl-rule); --nav-fg: var(--cl-ink-2); --nav-on: #5C86FF;
  --scrim: rgba(3, 5, 10, .68);
  --sheet-bg: var(--cl-surface); --sheet-border: 1px solid var(--cl-rule);
  /* Clean light's toast is dark ink on a white page; at night it turns over: light paper on the dark. */
  --toast-bg: #E8ECF5; --toast-fg: #0B1020; --toast-border: #E8ECF5;
  --fab-bg: var(--cl-surface); --fab-fg: var(--cl-ink-2); --fab-border: var(--cl-rule-2); --fab-shadow: 0 6px 20px rgba(0, 0, 0, .5);

  /* Black mana is near-black; a faint ring keeps every pip visible on the night. */
  --dot-ring: rgba(232, 236, 245, .22);
  --mana-b: #6B6178;

  --splash-fg: var(--cl-ink); --splash-sub: var(--cl-ink-2);
  --splash-banner-shadow: 0 24px 60px rgba(0, 0, 0, .55);

  /* Badge stamps: brighter inks, the way Game Table's read on its dark felt. */
  --ink-1: #7FA0FF; --ink-2: #F08A7A; --ink-3: #6FCB95; --ink-4: #E8B04A; --ink-5: #B9A2F2;

  color-scheme: dark;
}

/* A sheet sits on its own lifted surface, so whatever inside it uses the card colour (rings round
   faces, the sticky footer, chips) takes the sheet's colour instead of the page's. */
:root[data-theme="clean"][data-scheme="dark"] .sheet { --card-bg: var(--cl-surface); --avatar-ring: var(--cl-surface); }

/* ===================== person colours ===================== */
/* Clean light darkens these for white; the originals were made for a dark table, so they come back. */
:root[data-theme="clean"][data-scheme="dark"] .ac-amber { --ac: #E0A93A; --ac-ink: #1A1407; }
:root[data-theme="clean"][data-scheme="dark"] .ac-green { --ac: #3E9D6A; --ac-ink: #06140C; }
:root[data-theme="clean"][data-scheme="dark"] .ac-blue  { --ac: #4A8FD9; --ac-ink: #0B1220; }
:root[data-theme="clean"][data-scheme="dark"] .ac-red   { --ac: #C93F30; --ac-ink: #FFFFFF; }
:root[data-theme="clean"][data-scheme="dark"] .ac-white { --ac: #F3EBC7; --ac-ink: #1A1407; }
:root[data-theme="clean"][data-scheme="dark"] .ac-black { --ac: #5B4D66; --ac-ink: #F3EBC7; }

/* ===================== small fixed colours in the shared screens (app.css) ===================== */
:root[data-theme="clean"][data-scheme="dark"] .splash {
  --splash-bg: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--ac) 26%, #0E1118), #0E1118 72%);
  --splash-burst: color-mix(in srgb, var(--ac) 12%, transparent);
}
:root[data-theme="clean"][data-scheme="dark"] .toast-item.err { color: #A51F14; border-color: #A51F14; }
:root[data-theme="clean"][data-scheme="dark"] .quick .chev { color: var(--cl-ink-2); }
:root[data-theme="clean"][data-scheme="dark"] .pc-portrait,
:root[data-theme="clean"][data-scheme="dark"] .pp-person-art { background: color-mix(in srgb, var(--ac, var(--accent)) 22%, #141924); }
/* Clean light multiplies stamps into the white like ink into paper; multiplied into the night they vanish. */
:root[data-theme="clean"][data-scheme="dark"] .stamp svg { mix-blend-mode: normal; }
:root[data-theme="clean"][data-scheme="dark"] .icon-btn:active { background: rgba(232, 236, 245, .08); }
:root[data-theme="clean"][data-scheme="dark"] .lc-hub { box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
/* The chat: in Clean light the bubbles are barely there on white. On the night they need a surface. */
:root[data-theme="clean"][data-scheme="dark"] .chat-bubble { background: var(--cl-surface); border: 1px solid var(--cl-rule); }
:root[data-theme="clean"][data-scheme="dark"] .chat-msg.mine .chat-bubble { background: color-mix(in srgb, #5C86FF 18%, var(--cl-night)); border-color: rgba(92, 134, 255, .35); }
:root[data-theme="clean"][data-scheme="dark"] .chat-input { background: #121722; border: 1px solid var(--cl-rule-2); }

/* ===================== the blue band, now a deep navy band ===================== */
:root[data-theme="clean"][data-scheme="dark"] .cl-band { background: var(--cl-band); }
:root[data-theme="clean"][data-scheme="dark"] .screen:has(> .week) > .topbar,
:root[data-theme="clean"][data-scheme="dark"] .screen:has(> .look-clean.look-plan) > .topbar,
:root[data-theme="clean"][data-scheme="dark"] .screen:has(> .look-clean.look-card) > .topbar { background: var(--cl-band); }
:root[data-theme="clean"][data-scheme="dark"] .week:not(:has(> .look-clean)) > .week-card { background: var(--cl-band); }
:root[data-theme="clean"][data-scheme="dark"] .week:not(:has(> .look-clean)) > .week-card .btn.primary { color: var(--cl-band); }
/* The band's live dot: a flat dot, no glow. */
:root[data-theme="clean"][data-scheme="dark"] .cl-live i { box-shadow: none; }

/* ===================== the boarding pass: dark ticket stock ===================== */
:root[data-theme="clean"][data-scheme="dark"] .cl-pass { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)); }
:root[data-theme="clean"][data-scheme="dark"] .cl-pass-top { background: var(--cl-stock); --cl-route-bg: var(--cl-stock); }
:root[data-theme="clean"][data-scheme="dark"] .cl-pass-stub { background: var(--cl-stock); }
/* A hairline round the stock, so its edge, notches and holes read against the navy. */
:root[data-theme="clean"][data-scheme="dark"] .cl-pass-top { box-shadow: inset 1px 1px 0 rgba(232, 236, 245, .10), inset -1px 0 0 rgba(232, 236, 245, .10); }
:root[data-theme="clean"][data-scheme="dark"] .cl-pass-stub { box-shadow: inset 1px -1px 0 rgba(232, 236, 245, .10), inset -1px 0 0 rgba(232, 236, 245, .10); }

/* The travel party under the band. */
:root[data-theme="clean"][data-scheme="dark"] .cl-party .face.waiting .avatar { background: var(--cl-night); outline-color: rgba(232, 236, 245, .45); }
:root[data-theme="clean"][data-scheme="dark"] .cl-party .face-tick { background: var(--cl-ink); color: var(--cl-night); box-shadow: 0 0 0 2px var(--cl-night); }

/* ===================== the round: online check-in ===================== */
/* A picked answer lights up in the brand blue, white on it (5.9:1), its second line 4.6:1. */
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on { background: var(--cl-lit); border-color: var(--cl-lit); color: #FFFFFF; }
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on .cl-sub,
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on .cl-seat,
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on .cl-bname { color: #DCE4FC; }
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on .cl-tick { color: var(--cl-lit); }
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice:active { background: rgba(232, 236, 245, .05); }
:root[data-theme="clean"][data-scheme="dark"] .qcard > .choice.on:active { background: var(--cl-lit-press); }
:root[data-theme="clean"][data-scheme="dark"] .pill.on { background: var(--cl-lit); border-color: var(--cl-lit); color: #FFFFFF; }
/* The action bar fades into the page above it, the night instead of white. */
:root[data-theme="clean"][data-scheme="dark"] .card-actions { background: linear-gradient(to top, var(--cl-night) 70%, rgba(14, 17, 24, 0)); }

/* ===================== the plan: the e-ticket ===================== */
:root[data-theme="clean"][data-scheme="dark"] .cl-ticket { --cl-route-bg: var(--cl-band); }
:root[data-theme="clean"][data-scheme="dark"] .cl-dot { color: var(--cl-band); }
/* The tear line: its holes and the notch at each edge show the page behind the ticket. */
:root[data-theme="clean"][data-scheme="dark"] .cl-ticket-stub::before {
  background:
    radial-gradient(circle at 0 50%, var(--cl-night) 12px, transparent 12.5px) 0 50% / 26px 26px no-repeat,
    radial-gradient(circle at 100% 50%, var(--cl-night) 12px, transparent 12.5px) 100% 50% / 26px 26px no-repeat,
    radial-gradient(circle, var(--cl-night) 4px, transparent 4.5px) 20px 50% / 14px 12px repeat-x;
}

/* ===================== the Look picker's "Match my phone" tile ===================== */
/* Not a dark rule: the picker shows in every look. Match my phone now means Clean light or Clean dark,
   so its little picture is half of each (app.css draws it half Game Table, half Clean). */
.look-tile .look-prev.split { background: linear-gradient(115deg, #FFFFFF 49.5%, #0E1118 50.5%); box-shadow: inset 0 0 0 1px rgba(127, 135, 150, .28); }
.look-tile .look-prev.split .lp-card { background: linear-gradient(115deg, #F2F5FD 49.5%, #203680 50.5%); }
.look-tile .look-prev.split .lp-btn { background: linear-gradient(115deg, #2457E6 49.5%, #5C86FF 50.5%); }
.look-tile .look-prev.split .lp-line { background: linear-gradient(115deg, #0B1020 49.5%, #E8ECF5 50.5%); }