/* Copyright 2026 StatChat. All rights reserved.
   Unauthorized copying, modification or distribution of this software
   or its documentation is prohibited. */
/* StatChat — shared stylesheet
   =====================================================================
   Created 22 Aug 2026. Before this, all 18 live pages carried their own
   <style> block and nothing was shared: 118 distinct hex colours and six
   different breakpoints for one product. `node tests/style_audit.js`
   prints those numbers and will show them falling as pages move over.

   HOW TO USE THIS FILE
   --------------------
   1. Add this to a page's <head>, AFTER the favicon links and BEFORE the
      page's own <style> block:

          <link rel="stylesheet" href="statchat.css">

      Order matters: the page's own <style> comes second so it still wins
      any argument. That is deliberate — a page can be converted without
      having to be perfect, and nothing breaks on the way.

   2. Then delete rules from that page's <style> that this file already
      provides, and replace hardcoded colours with the variables below.
      One page at a time; the audit shows the progress.

   WHY VARIABLES RATHER THAN CLASSES FIRST
   ---------------------------------------
   Changing #1a7a4c to var(--sc-green) is a find-and-replace that cannot
   alter the rendering — the value is identical. Rewriting markup into
   shared classes can. Do the safe half first, measure, then the rest.

   The values are not new. Every one was taken from what the app already
   uses, chosen because it appears on four or more separate pages. */

:root {
  /* Brand ------------------------------------------------------------ */
  --sc-navy:        #1a1a2e;   /* headers, primary buttons, dark chrome */
  --sc-green:       #1a7a4c;   /* the action colour: save, confirm, go  */
  --sc-green-dark:  #0f6e56;
  --sc-green-tint:  #e8f5e9;
  --sc-red:         #a32d2d;   /* destructive, and the ON AIR state     */
  --sc-red-deep:    #8b0000;
  --sc-red-tint:    #fdecea;   /* NOTE: the four report pages use #fde8e8
                                  for the same thing -- a near-twin
                                  nobody chose. Converting them means
                                  accepting that small shift; left alone
                                  until someone says so. */
  --sc-amber:       #e0b400;   /* warnings, and "needs attention"       */
  --sc-amber-tint:  #fff3cd;
  --sc-amber-soft:  #fff8e6;
  --sc-amber-text:  #a37a00;
  --sc-blue:        #1565c0;   /* informational only                    */

  /* Surfaces --------------------------------------------------------- */
  --sc-page:        #f4f3ef;   /* the page behind every card            */
  --sc-card:        #ffffff;
  --sc-rule:        #e6e6e6;   /* hairlines and table borders           */
  --sc-rule-strong: #c8c8c8;

  /* Text ------------------------------------------------------------- */
  --sc-ink:         #1a1a1a;   /* body                                  */
  --sc-ink-soft:    #3a3a3a;   /* secondary                             */
  --sc-ink-muted:   #9aa3b2;   /* labels, hints, placeholders           */

  /* Spacing and shape ------------------------------------------------ */
  --sc-gap-xs: 4px;
  --sc-gap-sm: 8px;
  --sc-gap:    12px;
  --sc-gap-lg: 18px;
  --sc-radius-sm: 6px;
  --sc-radius:    10px;
  --sc-radius-lg: 14px;
}

/* BREAKPOINTS — three, and only three. Folded 23 Aug 2026.
   ---------------------------------------------------------------------
   The app carried FIVE: 640, 700, 899, 1100 and 1219. Two of them
   contradicted -- one rule said "small is under 700", another said "large
   is over 640", so anything between 640 and 767 matched both and got a
   mixture of phone and laptop rules. Nothing you would spot as a bug;
   just things quietly wrong at certain widths.

       phone     up to 767px      @media (max-width: 767px)
       tablet    768 - 1219px     @media (max-width: 1219px) catches
                                  tablet AND phone; pair with min-width
                                  768 when a rule is tablet-only
       desktop   1220px and up    no query -- the default

   WHY THESE NUMBERS

   767/768 is the iPad's portrait width. Below it is a phone, and game
   ENTRY is not supported there at all (Andy's call, 23 Aug) -- a phone
   opening game.html is told so rather than left to struggle. The viewing
   pages -- view, recap, the reports -- stay phone-first, because that is
   where parents and students read them.

   1219/1220 is where game.html's three-column rail layout already
   switches, and that number is load-bearing.

   WHAT MOVED, AND WHAT IT COST

     min-width 640  -> 768    roomier padding now starts at tablet, so
                              640-767 (large phone, landscape) gets the
                              compact layout. Consistent with entry being
                              unsupported there.
     max-width 700  -> 767    the phone rules, widened 67px.
     max-width 899  -> 767    game.html's stacked pick-rows. Was labelled
                              "on a phone" but fired up to 899, which is a
                              small tablet. Only 768-899 changes, and that
                              is tablet PORTRAIT, where a rotate prompt is
                              shown anyway.
     max-width 1100 -> 1219   view.html's banner wrap. Content-driven, not
                              device-driven -- widened to the tablet edge
                              so it wraps on tablet too, which is the safe
                              direction: it wraps earlier, never later.

   Media queries cannot use var(), so these are written out. Do not add a
   fourth. */

/* THE BROADCAST OVERLAYS DO NOT LINK THIS FILE -- deliberate
   ---------------------------------------------------------------------
   broadcast.html, broadcast_leaders.html and broadcast_stats.html are
   vMix browser inputs composited over the programme feed. They are not
   browser pages in the ordinary sense: they carry no favicon, and they
   warn in their own source that html and body must never take a
   background or the feed shows through.

   Three reasons to leave them out:

     * A failed request for this file during a live game is a far worse
       outcome than a few unshared colours. Everything else can be
       reloaded; a broadcast cannot.
     * Their palette is not the app's. They are painted for legibility
       over moving video -- heavier weights, harder contrast, the
       knockout sponsor bar -- and folding them into tokens tuned for a
       page on a laptop would be the wrong kind of uniformity.
     * They have no <link rel="icon"> to anchor the stylesheet link to,
       which is the surface signal that they are a different sort of
       page.

   If they are ever brought in, it should be through a separate
   broadcast.css, not this one.

   That leaves 14 of 18 pages as the practical ceiling here, with
   game.html the last one remaining.

/* NEAR-DUPLICATES -- three groups COLLAPSED 23 Aug, one left alone
   ---------------------------------------------------------------------
   Contrast ratios were measured before deciding. 1.00 is identical;
   below 1.05 no eye can separate them.

   COLLAPSED (all indistinguishable, and each a stray against a clear
   majority -- nobody chose them, they accumulated):

     #f4f4f2, #f7f7f5  -> --sc-page        1.008, 1.035   (broadcast_setup)
     #fde8e8           -> --sc-red-tint    1.027          (4 report pages)
     #fff8e1           -> --sc-amber-soft  1.003          (2 pages)

   Verified as a change of exactly eight declarations across 85, with
   nothing else moving.

   LEFT ALONE -- the hairlines. Four values at 1.05 to 1.10, which is
   barely visible but IS visible, and #dde1e6 is faintly blue where the
   others are neutral grey. That one may well be deliberate. Collapsing
   them changes table and card borders across the app and deserves a look
   rather than a contrast number:

     --sc-rule #e6e6e6   vs  #e0e0e0   #dde1e6   #f0f0f0

   AND #b00020, which is NOT a duplicate: the ON AIR red, deliberately
   hotter than --sc-red, which means destructive. Live and dangerous are
   different ideas and must not share a value. */

/* Shared primitives ---------------------------------------------------
   Deliberately few. These are the shapes every page already draws by
   hand; anything used on one page only stays on that page. */

.sc-card {
  background: var(--sc-card);
  border-radius: var(--sc-radius);
  padding: var(--sc-gap-lg);
  margin-bottom: var(--sc-gap);
}

.sc-muted { color: var(--sc-ink-muted); }
.sc-hint  { color: var(--sc-ink-muted); font-size: 13px; }

.sc-btn {
  padding: 8px 14px;
  border-radius: var(--sc-radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sc-btn-primary   { background: var(--sc-green); color: #fff; }
.sc-btn-secondary { background: #fff; color: var(--sc-ink-soft);
                    border-color: var(--sc-rule-strong); }
.sc-btn-danger    { background: var(--sc-red); color: #fff; }

/* Messages. The same three states appear on every page that saves
   anything, drawn slightly differently on each. */
.sc-msg { padding: 10px 14px; border-radius: var(--sc-radius-sm);
          font-size: 14px; margin: var(--sc-gap-sm) 0; }
.sc-msg-error   { background: var(--sc-red-tint);   color: var(--sc-red); }
.sc-msg-warn    { background: var(--sc-amber-tint); color: var(--sc-amber-text); }
.sc-msg-success { background: var(--sc-green-tint); color: var(--sc-green); }

/* Tables. Reports, rosters and stat packages each define their own; the
   differences between them are accidental rather than intended. */
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-table th, .sc-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--sc-rule); text-align: left;
}
.sc-table th { color: var(--sc-ink-muted); font-weight: 600; }

/* Phone -------------------------------------------------------------- */
@media (max-width: 767px) {
  .sc-card { padding: var(--sc-gap); border-radius: var(--sc-radius-sm); }
  .sc-btn  { padding: 10px 14px; }   /* a bigger target, not a smaller one */
  .sc-table { font-size: 13px; }
  .sc-table th, .sc-table td { padding: 5px 6px; }
}
