/* ---------------------------------------------------------------------------
   listen.wellgousa.com — the shared shell.

   Two audiences load this one file, and they must not look alike:

   · Staff pages (/library, /upload, the login and error pages) render through
     app_html(), whose <html> carries class="wb" — the workbench. Light, warm
     paper, high-contrast tables. These are looked at all day.

   · Public pages (/a/, /m/) render through app_player_page() and link this file
     too, only for the root canvas underneath their fixed backdrop. Their colours
     come from the film's poster palette (player.css + a per-film <style>).

   So the palette is declared twice, by name: :root holds the dark values the
   public pages have always had, and .wb overrides the same names with the
   workbench. Nothing here needs a :has() or a second stylesheet, and if .wb ever
   went missing every staff page would simply fall back to the old dark shell.

   🔴 Never move a token out of this pair. `html { background: var(--bg) }` is the
   only rule in the codebase that paints the root, and the film pages depend on
   it resolving dark: it is what shows through .pl-scrim when a film has no
   poster.

   Same compatibility floor as player.css / upload.css — Chrome, Safari, iOS
   Safari, Android Chrome: no :has(), no subgrid, no container queries, no
   nesting, no color-mix().
   --------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0d0f13;
  --surface: #10141a;
  --inset: #0d1116;
  --field: #171b22;
  --raised: #171b22;
  --zebra: #10141a;
  --row-hover: #171b22;

  /* ink */
  --fg: #e8eaee;
  --muted: #8b929e;

  /* rules */
  --line: #262b33;
  --line-strong: #3a4150;

  /* accent */
  --accent: #6ea8fe;
  --accent-soft: #131a26;
  --on-accent: #0d0f13;

  /* status */
  --ok-fg: #7fd6a2;   --ok-bg: transparent;   --ok-line: #24503a;
  --bad-fg: #f2a09a;  --bad-bg: transparent;  --bad-line: #55292c;
  --wait-fg: #e2c37c; --wait-bg: transparent; --wait-line: #4d4225;

  --overlay: rgba(13, 15, 19, .88);
  --shadow: none;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
             "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- The workbench --------------------------------------------------------
   Light, warm, and deliberately not white: paper is #fbfaf7 and the desk it
   sits on is #eceae4, so a card reads as a card without needing a heavy border.
   Every value below was picked against WCAG AA rather than checked afterwards —
   ink 16.7:1 on paper, muted 6.5:1, accent 9.6:1, and --line-strong 3.5:1 so a
   control's edge clears 1.4.11 on its own. The dark shell's --line was 1.6:1
   against its background, which is why its tables had no visible rows at all.
   --------------------------------------------------------------------------- */

.wb {
  color-scheme: light;

  --bg: #eceae4;
  --surface: #fbfaf7;
  --inset: #f1efe9;
  --field: #fdfcfa;
  --raised: #e4e1d9;
  --zebra: #f2f0ea;
  --row-hover: #e9ecf7;

  --fg: #1b1a18;
  --muted: #5f5c55;

  --line: #dcd8ce;
  --line-strong: #8f8878;

  --accent: #2f3a8c;
  --accent-soft: #eceef8;
  --on-accent: #ffffff;

  --ok-fg: #1c5d3a;   --ok-bg: #e6f2ea;   --ok-line: #b7d8c5;
  --bad-fg: #8a2b26;  --bad-bg: #fbeceb;  --bad-line: #e8c4c0;
  --wait-fg: #7a5313; --wait-bg: #faf1dd; --wait-line: #e6d3a8;

  --overlay: rgba(251, 250, 247, .93);
  --shadow: 0 1px 2px rgba(43, 38, 28, .07), 0 2px 10px rgba(43, 38, 28, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

.shell {
  max-width: 42rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

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

h1 {
  margin: 0 0 .3rem;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  /* A long film title must break inside the word rather than widen the page. */
  overflow-wrap: anywhere;
}

h2 { font-weight: 600; letter-spacing: -.01em; }

.lead { margin: 0 0 1.5rem; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .9rem; }

.code {
  font-size: 3.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-bottom: 0;
}

a { color: var(--accent); }

code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .4em;
}

/* --- Buttons --------------------------------------------------------------
   .btn is the page's committing action (Sign in, Upload, Save, Replace) and is
   filled; .btn-quiet is everything reversible beside it and is outlined. The
   old .btn-quiet was transparent with muted text, which read as a caption
   rather than as something you could press.
   --------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .55rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-quiet {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font-weight: 400;
}

.btn:hover { filter: brightness(1.12); }
.btn-quiet:hover { filter: none; background: var(--raised); }

.btn:disabled,
.btn-quiet:disabled {
  background: var(--raised);
  border-color: var(--line);
  color: var(--muted);
  filter: none;
  cursor: default;
}

/* --- Focus ----------------------------------------------------------------
   The dark shell had :hover and nothing else, so a keyboard was invisible on
   every staff page. The ring sits 2px outside the control, which keeps it
   legible against a filled accent button as well as against paper — and it is
   never transitioned: a focus ring that fades in reads as lag.
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 1px; }

form { margin-top: 2rem; }
