/* =====================================================================
   SquawkFix — brand foundation (shared with SquawkSMS; source sms-app/web/brand.css)
   Source: "SquawkSMS branding.png" (project/sms). Logo assets are cut from
   that sheet by brand/extract.py; do not redraw them by hand.

   Every page loads this file. Page-specific CSS may use the tokens but
   should not redefine them — three pages each carrying their own copy of
   the palette is how a brand quietly stops being one.
   ===================================================================== */

/* ------------------------------------------------------------- palette
   The four colors the sheet specifies, with the role it gives each. The
   roles matter: red is Alert / Action / Safety, so it belongs on the
   deadline, on risk, on anything that needs doing — never as decoration.  */
:root{
  --squawk-blue:#0033A0;   /* trust, reliability, professionalism */
  --squawk-red:#E10600;    /* alert, action, safety */
  --navy:#0F2747;          /* stability, authority, headings */
  --light-gray:#E5E7EB;    /* clean, modern, UI backgrounds */

  /* semantic tokens — components use these, never the raw brand names */
  --ground:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:var(--light-gray);
  --ink:var(--navy);
  --ink-2:#3D5372;
  --muted:#6B7C93;
  --line:#D8DEE7;

  --accent:var(--squawk-blue);
  --accent-ink:#FFFFFF;
  --accent-soft:#E6ECF7;

  --signal:var(--squawk-red);
  --signal-soft:#FDE8E6;

  /* Status colors sit outside the brand palette on purpose: green and amber
     carry meaning no brand color can borrow, and Squawk Red is already
     spoken for as the action color. */
  --ok:#1F8A54;   --ok-soft:#E3F3EA;
  --warn:#B8860B; --warn-soft:#FBF1D9;
  --crit:#C0392B; --crit-soft:#FAE6E3;

  --shadow:0 1px 2px rgba(15,39,71,.06),0 4px 14px rgba(15,39,71,.06);
  --shadow-lg:0 2px 4px rgba(15,39,71,.07),0 12px 34px rgba(15,39,71,.10);

  --font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Not a brand font. Reserved for strings where a human has to read back
     a character exactly — certificate numbers like 9VUA503O mix O and 0,
     and an operator transcribing one into an FAA form needs them to differ. */
  --font-code:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}

/* Dark: the sheet's reversed lockup is white-on-navy, so navy becomes the
   ground rather than a neutral black. Squawk Blue is too dark to read on it
   and has to lift — but Squawk Red does NOT. An earlier lift to #FF5A4D read
   as orange, which is a different brand. #E10600 clears 3:1 on this navy,
   which is the bar for the large display type it is used on (the countdown,
   headline full stops), and it is the only red in the system. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0B1B30;
  --surface:#12294A;
  --surface-2:#1B3559;
  --ink:#EAF0F8;
  --ink-2:#BCCBDF;
  --muted:#8497B0;
  --line:#26436B;

  --accent:#5B8FE0;
  --accent-ink:#06182F;
  --accent-soft:#17315A;

  --signal:var(--squawk-red);
  --signal-soft:#3B1613;

  --ok:#4BB584;   --ok-soft:#143023;
  --warn:#D9AE47; --warn-soft:#332913;
  --crit:#E4736A; --crit-soft:#3A1E1B;

  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.38);
}}
:root[data-theme="dark"]{
  --ground:#0B1B30;
  --surface:#12294A;
  --surface-2:#1B3559;
  --ink:#EAF0F8;
  --ink-2:#BCCBDF;
  --muted:#8497B0;
  --line:#26436B;

  --accent:#5B8FE0;
  --accent-ink:#06182F;
  --accent-soft:#17315A;

  --signal:var(--squawk-red);
  --signal-soft:#3B1613;

  --ok:#4BB584;   --ok-soft:#143023;
  --warn:#D9AE47; --warn-soft:#332913;
  --crit:#E4736A; --crit-soft:#3A1E1B;

  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.38);
}

/* ---------------------------------------------------------- typography
   Montserrat for anything that announces, Open Sans for anything that is
   read at length. The sheet sets headings in Montserrat with tight tracking
   and near-uppercase weight; body copy stays comfortable.               */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.015em;
  color:var(--ink);
}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.mono{font-family:var(--font-code);font-variant-numeric:tabular-nums}

/* The sheet's small-caps label style: letterspaced, uppercase, quiet. */
.eyebrow{
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* The red full stop. It is the one piece of punctuation the brand uses as
   a mark — "People. Safety. Progress." — so it gets a class rather than
   being retyped with an inline color everywhere. */
.dot{color:var(--signal)}

/* ------------------------------------------------------------ the mark
   Two lockups, for two sizes.

   .brand-mark — the S bubble plus the wordmark set live in Montserrat.
   Used anywhere under ~40px. The raster lockup carries its tagline in
   three lines that stop being words at that size; since Montserrat is the
   brand face, setting the wordmark in type is more faithful than shipping
   an illegible picture of it.

   .brand-lockup — the real horizontal lockup from the sheet, tagline and
   all. For the footer and anywhere it can be 44px or taller.            */
.brand-mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark img{display:block;height:40px;width:auto}
.brand-mark .wm{
  display:flex;flex-direction:column;line-height:.92;
  font-family:var(--font-display);font-weight:800;font-size:20px;
  letter-spacing:.005em;
}
.brand-mark .wm b{color:var(--ink);font-weight:800}
.brand-mark .wm i{color:var(--signal);font-style:normal;font-weight:800}

.brand-lockup{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand-lockup img{display:block;height:58px;width:auto;max-width:100%}
/* One file per ground: the primary lockup is navy ink, the reversed is
   white ink, and each is transparent so it sits on whatever is behind it. */
.brand-lockup .on-light{display:block}
.brand-lockup .on-dark{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-lockup .on-light{display:none}
 :root:not([data-theme="light"]) .brand-lockup .on-dark{display:block}}
:root[data-theme="dark"] .brand-lockup .on-light{display:none}
:root[data-theme="dark"] .brand-lockup .on-dark{display:block}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.005em;
  border:0;
  border-radius:8px;
  padding:11px 20px;
  cursor:pointer;
  text-decoration:none;
  background:var(--accent);
  color:var(--accent-ink);
}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:8px 15px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
/* Armed state for a destructive action -- Squawk Red is the alert
   colour and this is the one place in the app that earns it. */
/* Confirm / exclude on a recurrency requirement. A segmented pair, so it
   reads as one decision with two answers rather than two buttons. */
.ce{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.ce button{font-family:var(--font-display);font-weight:600;font-size:11px;border:0;
  padding:3px 11px;background:transparent;color:var(--muted);cursor:pointer}
.ce button.on{background:var(--ok,#1F9D55);color:#fff}
.ce button.off{background:var(--muted);color:#fff}
.ce button:disabled{opacity:.6;cursor:wait}
.req.excl{opacity:.55}
.req.excl .who{display:none}
select.rolesel{font:inherit;font-size:13px;padding:5px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
select.rolesel:disabled{opacity:.5}
.btn.danger{background:var(--squawk-red,#E10600);border-color:var(--squawk-red,#E10600);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}
/* Red is Action. Reserved for the one control on a page that commits. */
.btn.act{background:var(--signal);color:#fff}

/* ---------------------------------------------------------------- misc */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:22px;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}