/* =====================================================================
   Command Centre — the one set of tokens
   ---------------------------------------------------------------------
   Every screen reads this file: the cockpit (index.html), the schedule
   console, My schedule and Recon Desk. Each page keeps its older token
   names (--fs-*, --sp*, --r*, --canvas, --text …) but points them here,
   so a size, a radius or a colour is decided once.

   Every page re-points with a fallback (`var(--ui-…, <value>)`), so a
   blocked or stale copy of this file costs the polish and never the
   screen. Both service workers precache it beside the shell, and /ui/*
   is revalidated on every load (see _headers).

   House rules this file encodes:
     Space   4 8 12 16 24 32 48 64, nothing in between
     Radius  10 controls · 16 cards · 24 sheets and large panels · pills round
     Type    six sizes, tabular numerals wherever digits appear
     Colour  one canvas, two surfaces, one hairline, three text levels,
             one accent. Green, amber and red are state, never decoration.
     Depth   hairline + soft shadow. A glow is for the one featured thing.
     Motion  200ms state · 320ms entering · spring without bounce for
             sheets and drags. Hover changes the surface tone only.
   ===================================================================== */

:root{
  /* --- space ------------------------------------------------------- */
  --ui-space-1:4px;  --ui-space-2:8px;  --ui-space-3:12px; --ui-space-4:16px;
  --ui-space-5:24px; --ui-space-6:32px; --ui-space-7:48px; --ui-space-8:64px;

  /* --- radius ------------------------------------------------------ */
  --ui-radius-control:10px;
  --ui-radius-card:16px;
  --ui-radius-sheet:24px;
  --ui-radius-pill:999px;

  /* --- type: six sizes --------------------------------------------- */
  --ui-large-title:34px; --ui-large-title-lh:40px; --ui-large-title-w:700; --ui-large-title-tr:-.022em;
  --ui-title:22px;       --ui-title-lh:28px;       --ui-title-w:600;       --ui-title-tr:-.016em;
  --ui-headline:17px;    --ui-headline-lh:22px;    --ui-headline-w:600;    --ui-headline-tr:-.01em;
  --ui-body:15px;        --ui-body-lh:22px;        --ui-body-w:400;        --ui-body-tr:-.003em;
  --ui-caption:13px;     --ui-caption-lh:18px;     --ui-caption-w:400;     --ui-caption-tr:0em;
  --ui-label:11px;       --ui-label-lh:14px;       --ui-label-w:600;       --ui-label-tr:.08em;
  /* One hero figure per card. */
  --ui-hero:44px;        --ui-hero-lh:48px;        --ui-hero-w:700;        --ui-hero-tr:-.02em;
  /* Inputs never go below 16px, so a phone never zooms on focus. */
  --ui-input:16px;

  /* --- colour (dark is the default theme) -------------------------- */
  --ui-canvas:#08090C;
  --ui-surface-1:#0F1116;
  --ui-surface-2:#14171D;
  --ui-hairline:rgba(255,255,255,.11);
  --ui-text-1:#F2F4F7;
  --ui-text-2:#A8B0BA;
  --ui-text-3:#7D8693;         /* 4.9:1 on a card, AA */
  --ui-accent:#0078E0;
  --ui-accent-ink:#72C1FF;     /* accent as text on a dark surface */
  --ui-accent-soft:rgba(0,120,224,.18);
  --ui-good:#2BD576; --ui-good-soft:rgba(43,213,118,.16);
  --ui-warn:#F0A030; --ui-warn-soft:rgba(240,160,48,.15);
  --ui-bad:#FF6A5A;  --ui-bad-soft:rgba(255,106,90,.15);
  --ui-quiet-soft:rgba(255,255,255,.07);

  /* --- depth ------------------------------------------------------- */
  --ui-shadow-card:0 1px 2px rgba(0,0,0,.24),0 8px 24px -12px rgba(0,0,0,.32);
  --ui-shadow-sheet:0 24px 64px -16px rgba(0,0,0,.5);
  /* The one exception: the single primary action or featured card on a screen. */
  --ui-glow-featured:0 0 0 1px rgba(0,120,224,.34),0 12px 32px -12px rgba(0,120,224,.45);

  /* --- motion ------------------------------------------------------ */
  --ui-dur-state:200ms;
  --ui-dur-enter:320ms;
  --ui-ease-state:cubic-bezier(.2,0,0,1);
  --ui-ease-enter:cubic-bezier(.16,1,.3,1);
  /* A spring that settles without overshoot, for sheets and drags. */
  --ui-spring:cubic-bezier(.32,.72,0,1);

  /* --- focus ------------------------------------------------------- */
  --ui-focus:0 0 0 2px var(--ui-canvas),0 0 0 4px #2B96EC;
  --ui-touch:44px;
}

@media (max-width:860px){
  :root{ --ui-hero:34px; --ui-hero-lh:40px; }
}

/* Light is designed, not inverted: off-white canvas, white cards, the
   same single accent. Each page resolves the theme onto <html data-theme>
   — the in-app switch when one was chosen, the system preference when not —
   so this file follows that one attribute and nothing else. A page with no
   light theme of its own never sets it, and its tags stay in step with it. */
html[data-theme="light"]{
  --ui-canvas:#F7F8FA;
  --ui-surface-1:#FFFFFF;
  --ui-surface-2:#F0F2F5;
  --ui-hairline:rgba(10,11,13,.12);
  --ui-text-1:#0A0B0D;
  --ui-text-2:#525B66;
  --ui-text-3:#646D79;         /* 4.7:1 on the canvas, AA */
  --ui-accent:#0078E0;
  --ui-accent-ink:#005FB2;
  --ui-accent-soft:#EAF4FD;
  --ui-good:#0B7A43; --ui-good-soft:#E6F5ED;
  --ui-warn:#A35C00; --ui-warn-soft:#FAF0E3;
  --ui-bad:#C93520;  --ui-bad-soft:#FCEAE8;
  --ui-quiet-soft:#EEF0F3;
  --ui-shadow-card:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.12);
  --ui-shadow-sheet:0 24px 64px -16px rgba(16,24,40,.24);
  --ui-glow-featured:0 0 0 1px rgba(0,120,224,.28),0 12px 32px -14px rgba(0,120,224,.30);
}
@media (prefers-reduced-motion:reduce){
  :root{ --ui-dur-enter:1ms; --ui-spring:linear; }
}

/* ===== Type classes ===================================================
   For new markup. Older components keep their own rules, which now read
   the ramp through the re-pointed --fs-* tokens. */
.ui-large-title{font-size:var(--ui-large-title);line-height:var(--ui-large-title-lh);font-weight:var(--ui-large-title-w);letter-spacing:var(--ui-large-title-tr)}
.ui-title{font-size:var(--ui-title);line-height:var(--ui-title-lh);font-weight:var(--ui-title-w);letter-spacing:var(--ui-title-tr)}
.ui-headline{font-size:var(--ui-headline);line-height:var(--ui-headline-lh);font-weight:var(--ui-headline-w);letter-spacing:var(--ui-headline-tr)}
.ui-body{font-size:var(--ui-body);line-height:var(--ui-body-lh);font-weight:var(--ui-body-w);letter-spacing:var(--ui-body-tr)}
.ui-caption{font-size:var(--ui-caption);line-height:var(--ui-caption-lh);font-weight:var(--ui-caption-w);color:var(--ui-text-2)}
.ui-label{font-size:var(--ui-label);line-height:var(--ui-label-lh);font-weight:var(--ui-label-w);letter-spacing:var(--ui-label-tr);text-transform:uppercase;color:var(--ui-text-2)}
.ui-hero{font-size:var(--ui-hero);line-height:var(--ui-hero-lh);font-weight:var(--ui-hero-w);letter-spacing:var(--ui-hero-tr);font-variant-numeric:tabular-nums}
.ui-num{font-variant-numeric:tabular-nums}

/* ===== Tags: one system ===============================================
   Five tags and no others. 11px semibold caps in a pill, with a dot.
     .ui-tag.live     Live       green
     .ui-tag.new      New        blue
     .ui-tag.soon     Soon       grey
     .ui-tag.needs    Needs you  amber
     .ui-tag.overdue  Overdue    red
   A card carries at most one. Counts are badges (.ui-badge), not tags. */
.ui-tag{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:22px;padding:0 9px 0 8px;border-radius:var(--ui-radius-pill);
  font-family:inherit;font-size:var(--ui-label);line-height:var(--ui-label-lh);font-weight:var(--ui-label-w);
  letter-spacing:var(--ui-label-tr);text-transform:uppercase;white-space:nowrap;
  background:var(--ui-quiet-soft);color:var(--ui-text-2);
  transition:background-color var(--ui-dur-state) var(--ui-ease-state),color var(--ui-dur-state) var(--ui-ease-state)}
.ui-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ui-tag.live{background:var(--ui-good-soft);color:var(--ui-good)}
.ui-tag.new{background:var(--ui-accent-soft);color:var(--ui-accent-ink)}
.ui-tag.soon{background:var(--ui-quiet-soft);color:var(--ui-text-2)}
.ui-tag.needs{background:var(--ui-warn-soft);color:var(--ui-warn)}
.ui-tag.overdue{background:var(--ui-bad-soft);color:var(--ui-bad)}

/* A count: a number in a circle. */
.ui-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--ui-radius-pill);background:var(--ui-accent);color:#fff;
  font-size:var(--ui-label);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}

/* A quiet fact about the screen, said as a caption with an info icon —
   "Stays on this device" — never as a tag. */
.ui-note{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--ui-caption);line-height:var(--ui-caption-lh);color:var(--ui-text-2)}
.ui-note svg{width:14px;height:14px;flex:0 0 auto;color:var(--ui-text-3)}

/* An info button that opens one sentence. A <details>, so it works with
   no script, closes on a second press and is reachable by keyboard. */
.ui-info{position:relative;display:inline-block;vertical-align:middle}
.ui-info>summary{list-style:none;display:inline-grid;place-items:center;width:var(--ui-touch);height:var(--ui-touch);
  margin:-10px;border-radius:50%;cursor:pointer;color:var(--ui-text-3);
  transition:color var(--ui-dur-state) var(--ui-ease-state)}
.ui-info>summary::-webkit-details-marker{display:none}
.ui-info>summary:hover,.ui-info[open]>summary{color:var(--ui-text-1)}
.ui-info>summary:focus-visible{outline:none;box-shadow:var(--ui-focus)}
.ui-info>summary svg{width:16px;height:16px}
.ui-info>p{position:absolute;z-index:40;top:calc(100% + 8px);left:-8px;width:max-content;max-width:280px;margin:0;
  padding:12px 16px;border-radius:var(--ui-radius-control);background:var(--ui-surface-1);color:var(--ui-text-1);
  border:1px solid var(--ui-hairline);box-shadow:var(--ui-shadow-sheet);
  font-size:var(--ui-caption);line-height:var(--ui-caption-lh);font-weight:400;letter-spacing:0;text-transform:none}

/* Inputs: 16px floor, so iOS never zooms the page on focus. Kept at low
   specificity so a larger, deliberate size (a passcode, a figure field)
   still wins. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea){
  font-size:var(--ui-input);
}

/* Tabular numerals wherever digits stand in columns or tick over. */
:where(table,.num,[data-count],[data-to],time){font-variant-numeric:tabular-nums}