/* ==========================================================================
   Open Squash — Portal Brand Layer  v4  (July 2026)
   --------------------------------------------------------------------------
   Makes admin / coaches / lessons / juniors look like the same product as the
   new opensquash.org, without rewriting four large hand-built HTML files.

   HOW TO USE — two levels, one file.

     LEVEL 1 (safe, drop-in anywhere). Add one line to <head>, after the
     portal's own <style> block:
         <link rel="stylesheet" href="os-portal.css">
       → corrects the palette, typography, form controls and focus states.
         Touches nothing that could carry meaning. Zero-risk on any portal.

     LEVEL 2 (opinionated). Also add the opt-in class to <body>:
         <body class="os-brand">
       → restyles cards, buttons, chips, tables and the header to match the
         marketing site. Turn this on one portal at a time and eyeball it.

   WHY THE SPLIT
     v1 of this file restyled `.chip` globally — which silently flattened the
     juniors hub's Green/Blue/Red team chips, where the colour IS the content.
     Generic-looking class names are not always generic. So anything that could
     be semantic now sits behind `.os-brand`, and the always-on layer is limited
     to things that cannot carry meaning.

   ALIASES
     Each portal grew its own names for the same brand colours (--blue,
     --boast, --electric, --green) with hexes hardcoded. Section 2 points those
     at the canonical tokens, so every existing rule inherits corrected values
     for free — and a future brand change is edited here once, not in four files.

   Colours: Brand Guidelines V1 (Nov 2021) — same source as the website.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600;800&family=Georama:wght@400;500;600;700&display=swap');

/* ---------- 1 · Canonical tokens ------------------------------------------ */
:root{
  --os-electric-green:#8fdaaf;
  --os-boast-blue:#002d78;
  --os-pro-yellow:#fcda01;
  --os-rally-red:#ed1856;
  --os-beginner-blue:#00aaff;
  --os-floor-fawn:#fce6d2;
  --os-get-green:#16403e;
  --os-drive-darkness:#2f2626;

  --os-green-100:#e8f7ef;
  --os-green-200:#c8ecd8;
  --os-green-700:#2c7a52;
  --os-fawn-100:#fef7ef;
  --os-blue-900:#001b48;
  --os-blue-600:#1f4fa0;
  --os-ink-700:#4a3f3f;
  --os-ink-400:#8c8080;
  --os-line:#e7ddd4;

  --os-font-head:'Kanit',system-ui,sans-serif;
  --os-font-body:'Georama',system-ui,sans-serif;

  --os-r-sm:10px; --os-r:14px; --os-r-lg:20px; --os-r-pill:999px;
  --os-shadow-sm:0 1px 2px rgba(0,45,120,.06),0 2px 8px rgba(0,45,120,.05);
  --os-shadow-md:0 2px 4px rgba(0,45,120,.07),0 8px 24px rgba(0,45,120,.08);
  --os-focus:0 0 0 3px rgba(0,170,255,.45);

  /* ---------- 2 · Legacy aliases — UNAMBIGUOUS NAMES ONLY -----------------
     Verified to mean the same thing in every portal, so they can be aliased
     globally. See section 2b for the one name that cannot. */
  --blue:var(--os-boast-blue);
  --blue2:var(--os-blue-600);
  --boast:var(--os-boast-blue);
  --electric:var(--os-electric-green);
  --green-deep:var(--os-get-green);
  --fawn:var(--os-floor-fawn);
  --yellow:var(--os-pro-yellow);
  --red:var(--os-rally-red);
  --sky:var(--os-beginner-blue);
  --ink:var(--os-drive-darkness);
  --dark:var(--os-drive-darkness);
  --muted:var(--os-ink-400);
  --line:var(--os-line);
}

/* ---------- 2b · The collision: `--green` --------------------------------
   `--green` means two different colours depending on the portal:

       lessons-portal   --green:#8fdaaf   (Electric Green — a light accent)
       juniors-hub      --green:#16403e   (Get Green — a dark team colour)

   Aliasing it globally turned the juniors hub's dark "Green" team chips pale,
   dropping white-on-green text below readable contrast — and on that page the
   colour IS the data. So it is resolved per portal instead, by adding ONE of
   these classes to <html> or <body>:

       <body class="os-green-electric">   → lessons, coaches, admin
       <body class="os-green-deep">       → juniors hub

   Anything without one of these keeps whatever the portal already declared,
   which is the safe default.                                              */
.os-green-electric{--green:var(--os-electric-green)}
.os-green-deep{--green:var(--os-get-green)}

/* ==========================================================================
   LEVEL 1 — always on. Nothing here can destroy meaning.
   ========================================================================== */

body{
  font-family:var(--os-font-body);
  color:var(--os-ink-700);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Headings: the site's Kanit caps. Colour left to the portal so headings
   sitting on navy or green panels don't turn navy-on-navy. */
h1,h2,h3,h4{
  font-family:var(--os-font-head);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.1;
}

/* Form controls — element selectors only. Never .field, which is a wrapper
   in the lessons portal, not an input. */
input:not([type=checkbox]):not([type=radio]),
select,
textarea{
  font-family:var(--os-font-body);
  font-size:15px;
  background:#fff;
  border:1px solid var(--os-line);
  border-radius:var(--os-r-sm);
  padding:11px 13px;
  color:var(--os-drive-darkness);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--os-beginner-blue);
  box-shadow:var(--os-focus);
}
::placeholder{color:var(--os-ink-400)}
:focus-visible{outline:none;box-shadow:var(--os-focus);border-radius:var(--os-r-sm)}

/* Coaches use these on a phone between sessions. */
@media(max-width:640px){
  button,.btn,.cta,.opt-btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* Payslips and admin reports get printed. */
@media print{
  body{background:#fff}
  header,.brandbar,button,.btn{box-shadow:none}
  .card,.panel{box-shadow:none;border:1px solid #ccc}
}

/* ==========================================================================
   LEVEL 2 — opt in with <body class="os-brand">
   ========================================================================== */

.os-brand{background:var(--os-fawn-100)}
.os-brand h1,.os-brand h2,.os-brand h3{text-transform:uppercase;color:var(--os-boast-blue)}
.os-brand h1{font-size:clamp(26px,4vw,40px)}
.os-brand h2{font-size:clamp(20px,2.6vw,27px)}
.os-brand .eyebrow{
  font-family:var(--os-font-body);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--os-rally-red);
}

.os-brand header,.os-brand .brandbar{
  background:var(--os-boast-blue);color:#fff;
  border-radius:0 0 var(--os-r-lg) var(--os-r-lg);
  box-shadow:var(--os-shadow-sm);
}
.os-brand header h1,.os-brand header h2,.os-brand .brandbar h1{color:#fff}

.os-brand .card,.os-brand .panel{
  background:#fff;border:1px solid var(--os-line);
  border-radius:var(--os-r);box-shadow:var(--os-shadow-sm);
}

/* Composite cards are <button> elements too — .stat on the admin/coach home
   screens is a full-width white card holding an icon, a headline and a subtitle.
   Restyling those as navy pills hid their text (navy on navy) and lost the
   card shape. Buttons that are really cards are excluded by class and by the
   data-go navigation attribute they carry. */
.os-brand .btn,.os-brand .cta,
.os-brand button:not(.plain):not(.stat):not([data-go]):not([data-tab]):not(.card):not(.tile):not(nav *):not(.nav *){
  font-family:var(--os-font-body);font-weight:700;font-size:14.5px;
  border-radius:var(--os-r-pill);padding:11px 24px;
  border:2px solid transparent;background:var(--os-boast-blue);color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.os-brand .btn:hover,.os-brand .cta:hover,
.os-brand button:not(.plain):not(.stat):not([data-go]):not([data-tab]):not(.card):not(.tile):not(nav *):not(.nav *):hover{
  transform:translateY(-1px);box-shadow:var(--os-shadow-md);
}

/* Safety net: text nested inside a restyled button inherits the button's
   colour. Without this, a child span carrying its own dark colour goes
   invisible the moment the button background turns navy. */
.os-brand .btn *,.os-brand .cta *,
.os-brand button:not(.plain):not(.stat):not([data-go]):not([data-tab]):not(.card):not(.tile):not(nav *):not(.nav *) *{color:inherit}

/* Navigation is not a button, whatever element it's built from. The coach
   portal's bottom bar is a 5-column grid of bare <button data-tab>s; pill
   padding blew it past the viewport and pushed Desk and More off-screen on a
   phone — precisely the device coaches use it on. They're excluded by the
   :not([data-tab]) above rather than re-styled here: `all:revert` was the
   first attempt and it was worse, because revert discards the portal's OWN
   rules too, not just this layer's. */
.os-brand .ghost{background:transparent;color:var(--os-boast-blue);border-color:var(--os-boast-blue)}
.os-brand .ghost:hover{background:var(--os-boast-blue);color:#fff}
.os-brand [disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.os-brand table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--os-line);border-radius:var(--os-r);overflow:hidden;
}
.os-brand th{
  background:var(--os-boast-blue);color:#fff;text-align:left;
  font-family:var(--os-font-head);font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.05em;padding:11px 13px;
}
.os-brand td{padding:11px 13px;border-top:1px solid var(--os-line);font-size:14px}
.os-brand tbody tr:nth-child(even) td{background:var(--os-fawn-100)}
.os-brand tbody tr:hover td{background:var(--os-green-100)}

/* ==========================================================================
   Opt-in utilities — always available, never automatic.
   Use these for NEW portal UI so it matches the site from the start.
   ========================================================================== */

.os-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--os-font-body);font-weight:700;font-size:14.5px;
  border-radius:var(--os-r-pill);padding:11px 24px;
  border:2px solid transparent;background:var(--os-boast-blue);color:#fff;
  cursor:pointer;text-decoration:none;
}
.os-btn--accent{background:var(--os-electric-green);color:var(--os-boast-blue)}
.os-btn--ghost{background:transparent;color:var(--os-boast-blue);border-color:var(--os-boast-blue)}
.os-btn--danger{background:var(--os-rally-red);color:#fff}

.os-chip{
  display:inline-flex;align-items:center;border-radius:var(--os-r-pill);
  padding:4px 13px;font-size:12px;font-weight:700;
  background:var(--os-green-100);color:var(--os-green-700);
  border:1px solid var(--os-green-200);
}
.os-chip--navy{background:var(--os-boast-blue);color:#fff;border-color:var(--os-boast-blue)}
.os-chip--warn{background:var(--os-pro-yellow);color:var(--os-boast-blue);border-color:var(--os-pro-yellow)}
.os-chip--alert{background:#fdeaf0;color:#8f1136;border-color:#f5c6d2}

.os-card{
  background:#fff;border:1px solid var(--os-line);
  border-radius:var(--os-r);box-shadow:var(--os-shadow-sm);padding:20px;
}
.os-card--accent{background:var(--os-green-100);border-color:var(--os-green-200)}
.os-card--invert{background:var(--os-boast-blue);border-color:var(--os-boast-blue);color:rgba(255,255,255,.86)}
.os-card--invert h1,.os-card--invert h2,.os-card--invert h3{color:#fff}

.os-eyebrow{
  font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-rally-red);
}
.os-muted{color:var(--os-ink-400);font-size:13px}
