/* The app's look (chosen 2026-09-28): a dark page whose colours slowly cycle through seven
   palettes, with see-through cards and outlines that pick up the current palette. Loads AFTER
   organic.css and app.css and retunes them: organic.css stays vendored and unedited.
   - Four "live" colours (--live-*) are animated on :root; everything colourful reads them.
   - Coral is fixed in every palette and means "needs attention" (overdue, alerts, errors).
   - Motion turned off on the device = navy and aqua, standing still. Print = white paper.
   To switch the look off, remove the <link> to this file from index.html and time-off.html. */

/* Heading font (chosen 2026-09-28). @import must stay the first rule in this file. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

/* Registered so the browser can blend between palettes. A browser without @property still
   works: it steps from one palette to the next instead of blending. */
@property --live-bg1 { syntax: '<color>'; inherits: true; initial-value: #0a0f1e; }
@property --live-bg2 { syntax: '<color>'; inherits: true; initial-value: #123a4a; }
@property --live-e1 { syntax: '<color>'; inherits: true; initial-value: #3fd6c0; }
@property --live-e2 { syntax: '<color>'; inherits: true; initial-value: #3f8fe0; }

:root {
  /* resting palette (navy and aqua): used when motion is off, and before the cycle starts */
  --live-bg1: #0a0f1e;
  --live-bg2: #123a4a;
  --live-e1: #3fd6c0;
  --live-e2: #3f8fe0;
  animation: theme-cycle 120s linear infinite;

  /* built from the live colours */
  --theme-page: linear-gradient(170deg, var(--live-bg1) 0%,
    color-mix(in srgb, var(--live-bg1) 55%, var(--live-bg2)) 50%, var(--live-bg2) 100%);
  --theme-edge: linear-gradient(135deg, var(--live-e1), var(--live-e2));
  --theme-fill: linear-gradient(135deg, var(--live-e1), var(--live-e2));
  --theme-glow: color-mix(in srgb, var(--live-e1) 28%, transparent);
  --theme-glow-strong: color-mix(in srgb, var(--live-e1) 50%, transparent);
  --theme-edge-soft: color-mix(in srgb, var(--live-e1) 40%, transparent);
  --theme-tint: color-mix(in srgb, var(--live-e2) 28%, transparent);
  --theme-edge-line: color-mix(in srgb, var(--live-e1) 45%, transparent);
  --theme-edge-strong: color-mix(in srgb, var(--live-e1) 75%, transparent);
  --theme-line-faint: rgba(255, 255, 255, 0.11);

  /* fixed colours */
  /* dark enough that the outline gradient beneath only tints it: white text stays crisp on every palette */
  --theme-glass: linear-gradient(180deg, rgba(12, 8, 22, 0.72), rgba(12, 8, 22, 0.82));
  --theme-glass-solid: linear-gradient(180deg, rgba(14, 10, 26, 0.92), rgba(10, 7, 20, 0.95));
  --theme-input: rgba(8, 6, 16, 0.45);
  --theme-header: rgba(8, 6, 16, 0.6);
  --theme-backdrop: rgba(5, 3, 12, 0.72);
  --theme-shine: rgba(255, 255, 255, 0.1);
  --theme-drop: rgba(0, 0, 0, 0.4);
  --theme-press: rgba(0, 0, 0, 0.45);
  --theme-on-fill: #140a14;
  --theme-chip: rgba(255, 255, 255, 0.12);
  --theme-chip-text: #f4f2fb;
  --theme-coral: #ff8a6e;
  --theme-coral-chip: rgba(255, 138, 110, 0.2);
  --theme-coral-text: #ffc9b8;
  --theme-ink: #201e1d;
  --theme-paper: #ffffff;
  --theme-rule: #999999;

  /* Organic tokens, retuned for a dark ground. Ramps are flipped (100 = darkest, 900 =
     lightest) so every existing pairing stays readable. accent = coral (attention),
     accent-2 = soft lavender-white, neutral = cool grey. */
  --color-bg: #0e0b18;
  --color-surface: rgba(12, 8, 22, 0.5);
  --color-text: #f4f2fb;
  --color-accent: var(--live-e1);
  --color-accent-2: #cdc9de;
  --color-divider: color-mix(in srgb, #f4f2fb 18%, transparent);

  --color-neutral-100: #1a1822;
  --color-neutral-200: #26232f;
  --color-neutral-300: #3a3645;
  --color-neutral-400: #57526a;
  --color-neutral-500: #7a748c;
  --color-neutral-600: #9d98ae;
  --color-neutral-700: #c0bccd;
  --color-neutral-800: #dedbe7;
  --color-neutral-900: #f2f0f7;

  --color-accent-100: #3a1612;
  --color-accent-200: #5a2219;
  --color-accent-300: #8a3524;
  --color-accent-400: #c04e35;
  --color-accent-500: #ff7a5c;
  --color-accent-600: #ff8f74;
  --color-accent-700: #ffab94;
  --color-accent-800: #ffc9b8;
  --color-accent-900: #ffe6dd;

  --color-accent-2-100: #1e1a2a;
  --color-accent-2-200: #2e2940;
  --color-accent-2-300: #4a4460;
  --color-accent-2-400: #6a6484;
  --color-accent-2-500: #8c86a6;
  --color-accent-2-600: #aea9c4;
  --color-accent-2-700: #cdc9de;
  --color-accent-2-800: #e4e1ef;
  --color-accent-2-900: #f4f2fa;

  --shadow-sm: 0 6px 14px var(--theme-drop), 0 0 16px var(--theme-glow);
  --shadow-md: 0 10px 22px var(--theme-drop), 0 0 22px var(--theme-glow);
  --shadow-lg: 0 18px 44px var(--theme-drop), 0 0 30px var(--theme-glow);

  /* headings: an elegant serif, bold so its fine strokes hold up on a phone */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 700;

  color-scheme: dark;
}

/* Cormorant's small lowercase reads ~20% smaller than the old font at the same size. Matching
   every font's lowercase height to 0.5 scales it up once, here, instead of per screen; Figtree is
   already ~0.5 so body text barely moves. Browsers without font-size-adjust show it a bit smaller. */
body { font-size-adjust: 0.5; }
/* Cormorant's default numbers sit at uneven heights (a "4" dips below the line); counts and dates
   must line up, so use its full-height numbers everywhere */
body { font-variant-numeric: lining-nums; }

/* app.css sets the heading font on these without a weight; keep them bold like every heading */
.task-title, .briefing-line, .stat-num, .team-name, .admin-name, .count-ring {
  font-weight: var(--font-heading-weight);
}

/* buttons use the plain body font: fine serif strokes get fussy at button size */
.btn { font-family: var(--font-body); font-weight: 600; }
/* rows of small buttons (task actions, New task cadence, staff page) were 12px; Figtree reads
   smaller than the old chunky font did, so give them a point more for phones */
.task-actions .btn, .btn-row .btn { font-size: 13px; }

/* Three palettes (John 2026-11-06: the pink, gold, rose-gold and brass sets made the tool hard to read; "the deep
   rich green and blue are fine", and sapphire). About 30 s each plus a slow 10 s blend; 120 s for the whole cycle.
   theme-clock.js pauses it while the page is hidden, so coming back never shows a sudden new colour. */
@keyframes theme-cycle {
  0%, 25%      { --live-bg1: #0a0e24; --live-bg2: #33275e; --live-e1: #8fd3ff; --live-e2: #b79cff; } /* sapphire and amethyst */
  33.3%, 58.3% { --live-bg1: #06121a; --live-bg2: #12524f; --live-e1: #4be3a4; --live-e2: #22b8c8; } /* midnight teal and emerald */
  66.7%, 91.7% { --live-bg1: #0a0f1e; --live-bg2: #123a4a; --live-e1: #3fd6c0; --live-e2: #3f8fe0; } /* navy and aqua */
  100%         { --live-bg1: #0a0e24; --live-bg2: #33275e; --live-e1: #8fd3ff; --live-e2: #b79cff; }
}

/* ---- the page (a fixed layer, so it does not jump on phones) ---- */
body { background: var(--color-bg); min-height: 100vh; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--theme-page);
}

/* ---- header bar ---- */
.app-header {
  background: var(--theme-header);
  border-bottom: 1.5px solid var(--theme-edge-soft);
  box-shadow: 0 8px 24px var(--theme-drop);
}
.nav-brand {
  background: var(--theme-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- cards: dark glass with ONE soft outline (2026-11-06, John: "the bright colors make this tool very hard to
   read"). The two glowing offset outlines that floated behind every card are gone, and hover only adds a little glow:
   it never moves the card (2026-10-28, Inna: the box was shaking). ---- */
.card {
  position: relative; top: 0; left: 0;
  border: 1.5px solid var(--theme-edge-line);
  background: var(--theme-glass);
  box-shadow: inset 0 1px 0 var(--theme-shine), 0 8px 20px var(--theme-drop);
  transition: box-shadow 0.14s ease, border-color 0.14s ease;
}
.card.elev-md { box-shadow: inset 0 1px 0 var(--theme-shine), 0 10px 24px var(--theme-drop); }
.card:hover { border-color: var(--theme-edge-strong); box-shadow: inset 0 1px 0 var(--theme-shine), 0 8px 20px var(--theme-drop), 0 0 14px var(--theme-glow); }
/* a card inside a card is a quiet box: faint line, no glow, so the page does not turn into boxes in boxes */
.card .card, .card .card:hover {
  border: 1px solid var(--theme-line-faint); background: rgba(255, 255, 255, 0.04); box-shadow: none;
}
.card.preview-card { position: sticky; top: 16px; left: auto; }
.card.add-card { border: 2px dashed var(--live-e1); background: var(--theme-input); }
.card.ride-banner {
  background: linear-gradient(var(--theme-tint), var(--theme-tint)) padding-box, var(--theme-glass) padding-box,
    var(--theme-edge) border-box;
}
.card-kicker { color: var(--live-e1); }

/* ---- shapes (chosen 2026-09-28: "crisp and tailored"). One family, so inner and outer curves
   agree: a card's corner is about its padding, and everything inside it is rounder-cornered less.
   Circles stay circles on purpose: task checkboxes, countdown rings. ---- */
.card, .dialog { border-radius: 14px; }
.card { padding: 16px; }
.month-cell { border-radius: 10px; }
.btn, .input, textarea.input, .seg, .toast { border-radius: 10px; }
.tag { border-radius: 6px; }

/* room between cards */
.task-list { gap: 20px; }
.team-grid, .admin-grid { gap: 24px; }
.pulse-grid { gap: 28px; }
.briefing { margin-bottom: var(--space-6); }

/* ---- buttons: live gradient face, darker bottom edge, press down when tapped ---- */
.btn { position: relative; top: 0; transition: top 0.08s ease, box-shadow 0.08s ease; }
.btn-primary {
  background: var(--theme-fill); color: var(--theme-on-fill); border-color: transparent;
  box-shadow: 0 3px 0 var(--theme-press), 0 0 16px var(--theme-glow-strong), inset 0 1px 0 var(--theme-shine);
}
.btn-primary:hover { background: var(--theme-fill); box-shadow: 0 4px 0 var(--theme-press), 0 0 22px var(--theme-glow-strong), inset 0 1px 0 var(--theme-shine); }
.btn-primary:active { background: var(--theme-fill); top: 2px; box-shadow: 0 1px 0 var(--theme-press), 0 0 8px var(--theme-glow); }
.btn-secondary {
  border: 2px solid transparent;
  background: var(--theme-glass) padding-box, var(--theme-edge) border-box;
  box-shadow: 0 3px 0 var(--theme-press), 0 0 12px var(--theme-glow);
}
.btn-secondary:hover { background: var(--theme-glass) padding-box, var(--theme-edge) border-box; box-shadow: 0 3px 0 var(--theme-press), 0 0 18px var(--theme-glow-strong); }
.btn-secondary:active {
  background: var(--theme-glass) padding-box, var(--theme-edge) border-box;
  top: 2px; box-shadow: 0 1px 0 var(--theme-press), 0 0 6px var(--theme-glow);
}
.btn-ghost { color: var(--live-e1); }
.btn:disabled { top: 0; }

/* ---- forms ---- */
.input { background: var(--theme-input); border-color: var(--theme-edge-soft); }
.input:hover { border-color: var(--live-e1); }
.input:focus-visible { border-color: var(--live-e1); box-shadow: 0 0 0 3px var(--theme-glow); }
/* an open dropdown list: the box above is see-through, so the browser drew the list light grey under white text (John,
   2026-10-19: "very hard to read"). The list gets a solid dark background of its own. */
select option, select optgroup { background: #140e22; color: var(--theme-chip-text); }
.field > label { color: var(--color-neutral-800); }
.seg-opt:has(input:checked) { background: var(--theme-fill); color: var(--theme-on-fill); }
.radio input:checked + .dot { box-shadow: inset 0 0 0 4px var(--color-bg); }

/* ---- tags: plain chips are see-through; coral = needs attention; palette-tinted = done ---- */
.tag-neutral { background: var(--theme-chip); color: var(--theme-chip-text); }
.tag-accent { background: var(--theme-coral-chip); color: var(--theme-coral-text); box-shadow: inset 0 0 0 1px var(--theme-coral); }
.tag-accent-2 { background: var(--theme-tint); color: var(--theme-chip-text); }
.tag-outline { border-color: var(--live-e1); color: var(--theme-chip-text); }
/* GM / Owner hats: "leader", not "warning" - tinted with the palette, thin palette ring */
.tag-lead {
  background: color-mix(in srgb, var(--live-e1) 22%, transparent); color: var(--theme-chip-text);
  box-shadow: inset 0 0 0 1px var(--live-e1);
}
/* a chosen chip (filter, weekday, Admin hat toggle) must read as chosen at a glance, so it takes the full fill */
.chip.tag-accent, .chip.tag-accent-2, .chip.tag-lead { background: var(--theme-fill); color: var(--theme-on-fill); box-shadow: 0 0 12px var(--theme-glow-strong); }
/* event types on the calendar are categories, not warnings, so they follow the palette */
.cal-event.tag-accent, .legend .tag-accent { background: color-mix(in srgb, var(--live-e1) 30%, transparent); color: var(--theme-chip-text); box-shadow: none; }

/* ---- task card details ---- */
.check { border: 2px solid transparent; background: var(--theme-glass) padding-box, var(--theme-edge) border-box; color: var(--theme-on-fill); }
.check.done { background: var(--theme-fill); border-color: transparent; box-shadow: 0 0 10px var(--theme-glow-strong); }
.task-event { color: var(--live-e1); }
.last-note, .note-item { border-left-color: var(--theme-edge-soft); }

/* ---- calendar ---- */
.month-cell {
  border: 1.5px solid transparent;
  background: var(--theme-glass) padding-box,
    linear-gradient(135deg, var(--theme-edge-soft), color-mix(in srgb, var(--live-e2) 40%, transparent)) border-box;
}
.month-cell.is-today { outline: 2px solid var(--theme-coral); box-shadow: 0 0 16px var(--theme-coral-chip); }
.count-ring { background: var(--theme-glass); box-shadow: 0 0 14px var(--theme-glow); }
.ring-accent { border-color: var(--live-e1); }
.ring-accent-2 { border-color: var(--live-e2); }
.ring-neutral { border-color: var(--color-neutral-500); }

/* ---- dialogs and toast (dialogs nearly opaque: they sit over busy content) ---- */
.dialog-backdrop { background: var(--theme-backdrop); }
.dialog { border: 2px solid transparent; background: var(--theme-glass-solid) padding-box, var(--theme-edge) border-box; }
.toast { background: var(--theme-fill); color: var(--theme-on-fill); box-shadow: 0 0 24px var(--theme-glow-strong), var(--shadow-lg); }

/* ---- the printable competition sheet stays black ink on white paper, even on screen ---- */
.print-sheet { --color-text: var(--theme-ink); background: var(--theme-paper); color: var(--theme-ink); }
.print-sheet .card-kicker { color: var(--theme-ink); }

/* ---- small helper text: a colour of its own instead of opacity, so it stays readable on every background phase
   (2026-10-10 audit: at 55-65% see-through it fell under 4.5:1 on the orchid and wine phases). Follows --color-text,
   so print keeps dark ink. ---- */
.helper, .chips-label, .month-dow, .empty-inline, .archived, .task-by, .stat-label, .note-date, .cell-day {
  opacity: 1; color: color-mix(in srgb, var(--color-text) 86%, transparent);
}
.helper.warn { color: var(--color-accent-700); }
.stat-later { font-size: 12px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.chips-label, .month-dow, .task-by, .stat-label, .note-date { font-size: 12px; }

/* ---- motion turned off: navy and aqua, standing still; no lifting or pressing ---- */
@media (prefers-reduced-motion: reduce) {
  :root { animation: none; }
  .card, .btn { transition: none; }
  .card:hover, .btn:hover, .btn:active { top: 0; left: 0; }
}

/* ---- printing: plain paper, dark ink, no colour, glow or layers ---- */
@media print {
  :root { animation: none; --color-text: var(--theme-ink); --color-bg: var(--theme-paper); --color-surface: var(--theme-paper); color-scheme: light; }
  body { background: var(--theme-paper); color: var(--theme-ink); }
  body::before { display: none; }
  .card, .dialog, .month-cell { background: var(--theme-paper); border: 1px solid var(--theme-rule); box-shadow: none; }
  .tag { background: none; color: var(--theme-ink); border: 1px solid var(--theme-rule); box-shadow: none; }
  .nav-brand { background: none; color: var(--theme-ink); }
}