/* GigRally master theme — the neutral, greyscale family pages.
 *
 * The public front door, sign-in, the hub and the legal pages belong to GigRally as a
 * whole rather than to one product, so they wear no product colour. Each product keeps
 * its own inside its own screens: Bands amber (tokens.css), Crew blue (crew.css), and
 * whatever comes next in its own.
 *
 * Loaded from base.html when a page sets `{% set master_theme = true %}`. The COLOURS below
 * apply only under `class="theme-master"`, which base.html adds only when the pages are
 * multi-product (CREW_VISIBLE). During early access (Bands only, 7th Oct 2026) the sheet
 * still loads for its LAYOUT classes (master-head, hub-*, door*, product-word) and the
 * pages keep the band's amber. ⚠️ So every colour rule must stay scoped under .theme-master,
 * and every layout colour carrier needs a fallback that is right in amber.
 *
 * ⚠️ A custom property is resolved on the element that DECLARES it. tokens.css works out
 * `--accent-wash`, `--heat-some`, `--focus-ring` and friends on :root, from :root's amber,
 * and those finished values are what <body> inherits. Overriding `--accent` here does not
 * recompute them — every derived token has to be declared again below, where it resolves
 * against these greys. tests/test_master_hub.py parses tokens.css and fails if one is
 * added there and not here.
 *
 * ⚠️ Contrast, measured, because the flag icon is an ink flag on an accent tile and a
 * greyscale accent can sink into the ink: flag vs tile is 7.1:1 light / 5.7:1 dark;
 * --on-accent on accent is the same pair; --accent-ink and --muted text on paper are 7.0 /
 * 6.2:1 light and 9.8 / 7.3:1 dark.
 */

.theme-master {
  color-scheme: light;

  --ink: #171717;
  --paper: #f2f2f2;
  --card: #fafafa;
  --muted: #595959;
  --line: #d4d4d4;
  --on-ink: #c4c4c4;
  --day-disabled: #b0b0b0;

  --accent: #a3a3a3;
  --on-accent: #171717;
  --accent-ink: #525252;

  --hatch-busy: repeating-linear-gradient(135deg, #e0e0e0 0 3px, #fafafa 3px 8px);
  --hatch-booked: repeating-linear-gradient(135deg, #c9c9c9 0 3px, #e6e6e6 3px 7px);

  /* --- re-derived: identical expressions to tokens.css, resolved against the greys --- */
  --cal-block: color-mix(in srgb, var(--line) 22%, var(--paper));
  --heat-few: var(--card);
  --heat-some: color-mix(in srgb, var(--accent) 32%, var(--card));
  --heat-most: color-mix(in srgb, var(--accent) 70%, var(--card));
  --heat-everyone: var(--ink);
  --on-heat-few: var(--ink);
  --on-heat-some: var(--ink);
  --on-heat-most: var(--ink);
  --on-heat-everyone: var(--paper);
  --accent-wash: color-mix(in srgb, var(--accent) 35%, var(--card));
  --accent-veil: color-mix(in srgb, var(--accent) 35%, transparent);
  --focus-ring: 3px solid var(--ink);

  /* The product colours. Each product owns a stripe (a non-text graphic, so 3:1 is the
     bar) and a TEXT colour that clears AA on this page in each theme. Bands' amber on
     paper is 1.86:1 and Crew's blue 2.2:1, which is why the text colour is its own
     token and never the stripe. */
  --band-stripe: #e3a72f;
  --band-ink: #8a5e0f;
  --crew-stripe: #4cb8f0;
  --crew-ink: #0f5f8a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-master {
    color-scheme: dark;
    --ink: #ededed;
    --paper: #141414;
    --card: #1e1e1e;
    --muted: #a3a3a3;
    --line: #363636;
    --on-ink: #5a5a5a;
    --day-disabled: #525252;
    --accent: #5c5c5c;
    --on-accent: #ededed;
    --accent-ink: #bdbdbd;
    --cal-block: transparent;
    --on-heat-most: var(--paper);
    --hatch-busy: repeating-linear-gradient(135deg, #383838 0 3px, #1e1e1e 3px 8px);
    --hatch-booked: repeating-linear-gradient(135deg, #575757 0 3px, #2a2a2a 3px 7px);
    --band-ink: #e3a72f;
    --crew-ink: #4cb8f0;
  }
}

:root[data-theme="dark"] .theme-master {
  color-scheme: dark;
  --ink: #ededed;
  --paper: #141414;
  --card: #1e1e1e;
  --muted: #a3a3a3;
  --line: #363636;
  --on-ink: #5a5a5a;
  --day-disabled: #525252;
  --accent: #5c5c5c;
  --on-accent: #ededed;
  --accent-ink: #bdbdbd;
  --cal-block: transparent;
  --on-heat-most: var(--paper);
  --hatch-busy: repeating-linear-gradient(135deg, #383838 0 3px, #1e1e1e 3px 8px);
  --hatch-booked: repeating-linear-gradient(135deg, #575757 0 3px, #2a2a2a 3px 7px);
  --band-ink: #e3a72f;
  --crew-ink: #4cb8f0;
}

/* A grey primary button reads as disabled. The master primary is a solid ink fill. */
.theme-master .btn--primary {
  background: var(--ink);
  color: var(--paper);
}

/* ⚠️ tokens.css turns "Rally" stage gold in dark mode with (0,3,0) selectors. Here it is
   the muted grey in both themes — one more class than those, and loaded after them. */
body.theme-master .wordmark .wordmark__rally {
  color: var(--muted);
}

/* --- product colour carriers ------------------------------------------------------- */

/* Fallbacks for pages WITHOUT .theme-master (early access): --accent / --accent-ink are
   the band's own amber and equal --band-stripe / --band-ink in both themes, so the measured
   contrast holds. Crew's fallback is its light-theme pair (only the operator sees Crew then). */
.product--band {
  --product-stripe: var(--band-stripe, var(--accent));
  --product-ink: var(--band-ink, var(--accent-ink));
}
.product--crew {
  --product-stripe: var(--crew-stripe, #4cb8f0);
  --product-ink: var(--crew-ink, #0f5f8a);
}

.product-word {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-label-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--product-ink);
}

/* --- the neutral header (hub) ------------------------------------------------------- */

.master-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}
.master-head a { text-decoration: none; }

/* --- front door --------------------------------------------------------------------- */

.door-hero {
  padding-block: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  max-width: 40rem;
}
.door-hero h1 {
  font-size: clamp(var(--text-hero), 6vw, 56px);
  line-height: 1.05;
}
.door-hero p {
  font-size: var(--text-xl);
  line-height: 1.5;
  margin-top: 1rem;
}

.doors {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  padding-bottom: 2rem;
}

.door,
.hub-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
/* The product's own colour, as a stripe down the left edge — a hint of the room the
   door opens onto, and the only colour on these pages. */
.door::before,
.hub-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--product-stripe, var(--line));
}
.door h2 { font-size: var(--text-h2); }
.door p { color: var(--muted); font-size: var(--text-md); line-height: 1.5; }
.door__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: auto; padding-top: 0.5rem; }

/* --- hub ----------------------------------------------------------------------------- */

.hub-group { display: flex; flex-direction: column; gap: 0.75rem; }
.hub-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hub-tile { min-height: var(--tap-min); }
a.hub-tile:hover { border-color: var(--muted); }
.hub-tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
}
.hub-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hub-tile__sub { font-size: var(--text-base); color: var(--muted); }
.hub-tile__detail { font-family: var(--font-mono); font-size: var(--text-label-lg); color: var(--muted); }