/* ==========================================================================
   Open Squash — Portal Brand Layer  v5  (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);
}

/* v5 — SCOPE CHANGE. Up to v4 this layer restyled every <button> on the page
   and carved out exceptions with a long :not() chain. Three separate regressions
   came out of that chain being incomplete: the admin .stat cards went navy-on-navy,
   the coach bottom nav overflowed the viewport, and every .tiny text link
   ("Check in", "Clear this day", "Close") became a solid navy pill — as did the
   .seg segmented controls and the .cnav calendar arrows.

   The chain is gone. This layer now brands only buttons that opt in by carrying
   .btn or .cta — classes the portals already use for real calls to action.
   Everything else keeps the portal's own styling, which is what it was designed
   with. .os-raw on a .btn opts an individual one back out. */
/* Shape and type for every branded button. NOT colour — see below. */
.os-brand .btn:not(.os-raw),.os-brand .cta:not(.os-raw){
  font-family:var(--os-font-body);font-weight:700;font-size:14.5px;
  border-radius:var(--os-r-pill);padding:11px 24px;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:transform .12s ease,box-shadow .12s ease;
}

/* The navy fill is only for a PLAIN primary. Every portal ships variant classes
   whose colour is the meaning — .alt is the secondary outline, .warn is amber,
   .danger is red, .mint is mint. v4 painted all of them navy, which put two
   identical navy buttons side by side in every confirm modal: "Cancel" and
   "Yes, cancel" became the same object. Size modifiers (.sm, .full) still fill. */
.os-brand .btn:not(.os-raw):not(.alt):not(.warn):not(.mint):not(.danger):not(.ghost):not(.secondary),
.os-brand .cta:not(.os-raw){
  background:var(--os-boast-blue);color:#fff;border:2px solid transparent;
}
.os-brand .btn:not(.os-raw):hover,.os-brand .cta:not(.os-raw):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:not(.os-raw):not(.alt):not(.warn):not(.mint):not(.danger):not(.ghost):not(.secondary) *,
.os-brand .cta:not(.os-raw) *{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}
