/* ============================================================================
   PRISM — the design system

   Apple's rules, not Apple's assets.

   Nothing here is copied from Apple. No SF Pro webfont is embedded (the licence
   does not permit it), no SF Symbol is shipped, no stylesheet is lifted. What is
   taken is the *system*: the grey that sits under white cards, the way a
   translucent surface saturates what is behind it before blurring it, the 8pt
   rhythm, the negative tracking that starts at large sizes and relaxes at small
   ones, and the rule that chrome is grayscale so colour means something when it
   finally appears.

   THE FONT IS THE REAL THING AND IT IS FREE. `-apple-system` resolves to the SF
   Pro already installed on macOS and iOS, with the optical sizing Apple ships —
   SF Pro Text below ~20px, SF Pro Display above, chosen by the OS. We are asking
   the system for its UI font, not redistributing a file. Prism is internal and
   read on Apple hardware, so this is the genuine typeface. Everything degrades
   to a sane stack elsewhere.

   WHY THE TOKEN NAMES LOOK OLD. They are the names the existing 37k lines of
   Prism views already speak — --brass, --field, --ink-3, --serif. Redefining
   them here rather than renaming them there is what lets every screen adopt this
   language without being touched. The vocabulary is inherited; every value in it
   is new.

   The layer order is load-bearing and matches the runtime: a view's <style> is
   wrapped in @layer view by app/runtime.js, so base < view < house means a view
   overrides the house defaults while the few `house` rules still win whatever
   their specificity.
   ========================================================================== */

@layer base, view, house;

@layer base {

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- GROUNDS
     Never white on white. Apple's canvas is a grey a couple of steps down from
     the cards that float on it — that single relationship does more for the
     look than any amount of shadow. #F5F5F7 is the signature. */
  /* Read this as "the colour that shows ON --ink", not "the colour white".
     The ported views use it that way — a filled journey stop is
     `background: var(--ink); color: var(--white)` — so in dark mode, where
     --ink is near-white, leaving this at #FFF put white text on a white chip.
     It flips with the theme for exactly that reason. */
  --white:      #FFFFFF;
  --field:      #F5F5F7;   /* the canvas */
  --surface:    #FFFFFF;   /* cards, tables, panels — what floats on it */
  --surface-2:  #FBFBFD;   /* a card's own quieter band */
  --sunken:     #EFEFF2;   /* wells, inset rows, empty states */
  --off:        #FBFBFD;
  --card:       var(--surface);
  --paper:      var(--surface);
  --paper-2:    var(--surface-2);
  --paper-3:    var(--sunken);

  /* ------------------------------------------------------------------- INK
     #1D1D1F, not #000. Apple never sets pure black on a light ground; the
     near-black reads as considered where black reads as a default. The
     secondary and tertiary greys are the ones that make dense UI legible
     without shouting. */
  --ink:        #1D1D1F;   /* primary text */
  --ink-2:      #424245;   /* secondary — still fully readable */
  --ink-3:      #6E6E73;   /* tertiary — labels, captions, metadata */
  --ink-4:      #86868B;   /* quaternary — the quietest thing still on screen */
  --porcelain:  var(--ink);

  /* ----------------------------------------------------------- SEPARATORS
     Hairlines carry the structure. Apple's #D2D2D7 for a real edge, and a
     softer one for rows inside a card where a full-strength rule would stripe
     the surface. Shadows are for elevation, never for division. */
  --line:        #D2D2D7;
  --line-soft:   #E8E8ED;
  --line-2:      #E8E8ED;
  --line-strong: #C7C7CC;

  /* ----------------------------------------------------------------- COLOUR
     The chrome is grayscale. Colour appears only where it carries meaning —
     an interactive control, a state, a workspace's own mark — which is the
     whole reason it registers when it does.

     --brass was this codebase's near-black emphasis colour, used 240 times.
     It stays an emphasis colour and becomes the new near-black; the blue is
     introduced separately for things you can actually click, so adopting the
     Apple language does not turn every heading blue. */
  --accent:     #0071E3;   /* filled controls */
  --accent-ink: #FFFFFF;
  --accent-2:   #0066CC;   /* links and text-on-light */
  --accent-wash:#E8F1FC;
  --brass:      var(--ink);
  --gold:       var(--ink-4);

  /* states — Apple's system colours, at light-ground contrast */
  --good:       #248A3D;
  --warn:       #B25000;
  --bad:        #D70015;
  --red:        var(--bad);
  --good-wash:  #E6F4EA;
  --warn-wash:  #FDF0E3;
  --bad-wash:   #FDE8E8;

  /* the warm accent a few Veloro screens lean on */
  --rust:       #B25000;
  --rust-soft:  #C86A28;
  --rust-wash:  #FBF0E7;
  --rust-line:  #E8D3C0;

  --violet:     var(--ink-3);
  --sky:        var(--ink-3);
  --ochre:      var(--ink-3);

  /* thread / status ramps, unchanged in meaning */
  --st:          var(--ink-3);
  --st-new:      var(--ink-4);
  --st-drafted:  var(--ink-3);
  --st-sent:     var(--ink);
  --st-replied:  var(--good);
  --st-won:      var(--good);
  --st-declined: var(--bad);
  --th-high:     var(--bad);
  --th-med:      var(--warn);
  --th-low:      var(--ink-3);
  --t-specialist:#1D1D1F;
  --t-house:     #6E6E73;
  --t-heritage:  #B0B0B6;

  /* a grayscale service ramp — chrome stays colourless */
  --svc-general:   #1D1D1F;
  --svc-fit:       #2E2E31;
  --svc-intel:     #424245;
  --svc-outreach:  #57575A;
  --svc-boutiques: #6E6E73;
  --svc-media:     #86868B;
  --svc-envoy:     #A1A1A6;

  /* --------------------------------------------------------------- MATERIAL
     Vibrancy is two things, and the one everybody forgets is the saturation.
     Blurring alone gives you frosted plastic; boosting saturation to 180%
     first is what makes the colour behind the panel bloom through it the way
     it does on an Apple surface. The hairline on top keeps the edge crisp
     against whatever scrolls underneath. */
  --glass:      rgba(255,255,255,.72);
  --glass-2:    rgba(255,255,255,.86);
  --glass-line: rgba(0,0,0,.08);
  --blur:       saturate(180%) blur(20px);
  --blur-lg:    saturate(180%) blur(30px);

  /* ----------------------------------------------------------------- FORM
     Apple's corners are continuous curves — a true squircle, which CSS cannot
     draw natively yet (`corner-shape` is coming but is not safe to depend on).
     At these radii a plain border-radius is visually indistinguishable, so the
     scale is tuned to where the eye reads "Apple" rather than to the maths. */
  --r-sm:  6px;    /* chips, tags, small controls */
  --r:     10px;   /* buttons, inputs, sidebar rows */
  --r-lg:  14px;   /* cards, panels */
  --r-xl:  20px;   /* sheets, modals */
  --r-pill: 980px;

  /* --------------------------------------------------------------- ELEVATION
     Barely there. Apple's shadows are a hairline ring plus a soft, tight drop;
     the ring is what reads as an edge, the drop is what reads as lift. A big
     diffuse shadow is the fastest way to stop looking like this. */
  --shadow-1: 0 0 0 .5px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 0 0 .5px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --shadow-3: 0 0 0 .5px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.10);

  /* ------------------------------------------------------------------ TYPE
     -apple-system first so the OS picks SF Pro Text / Display by optical size
     on its own. New York is Apple's serif and is present on Apple platforms;
     it degrades to the usual suspects. */
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --serif IS THE SANS, and that is not a mistake.
     The ported screens reach for var(--serif) 184 times, written against a
     system where it was aliased to the sans — so they were all sans, and the
     screens agreed with each other. Defining a real serif here silently
     changed the type on two thirds of the application and was most of why it
     stopped reading as one product. One voice: if a serif is ever wanted, it
     gets introduced deliberately and everywhere, not inherited by accident. */
  --serif: var(--sans);
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --body:  var(--sans);

  /* The scale. Apple tightens tracking as type grows and lets it open up as
     type shrinks — the opposite of leaving it at zero everywhere, and most of
     why their headings look set rather than typed. 12.5px stays the floor for
     anything a person reads, which was this codebase's own rule and a good
     one. */
  --fs-caption:  11.5px;
  --fs-small:    12.5px;
  --fs-meta:     13px;
  --fs-body:     14px;
  --fs-lg:       15px;
  --fs-title-3:  17px;
  --fs-title-2:  20px;
  --fs-title-1:  24px;
  --fs-display:  30px;

  --tr-display: -.022em;
  --tr-title:   -.014em;
  --tr-body:    -.006em;
  --tr-caption:  .002em;
  --tr-label:    .04em;   /* the one place letters open up: small caps labels */

  /* ---------------------------------------------------------------- RHYTHM
     8pt grid, with a 4pt half-step. Every gap and pad in the shell comes from
     here, which is what keeps a dense screen from looking improvised. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* --------------------------------------------------------------- MOTION
     Quick and eased-out. Apple's UI motion is short enough that it reads as
     responsiveness rather than animation. */
  --ease:      cubic-bezier(.25,.1,.25,1);
  --ease-out:  cubic-bezier(.2,0,.2,1);
  --spring:    cubic-bezier(.34,1.4,.64,1);
  --dur:       .22s;
  --dur-fast:  .14s;

  /* ---------------------------------------------------------------- LAYOUT */
  --sidebar-w: 260px;
  --topbar-h:  52px;
  --measure:   68ch;
}

/* ---------------------------------------------------------------- DARK
   Apple's dark is layered, not inverted. iOS system greys: the canvas is the
   darkest thing, cards sit *above* it in lighter greys, and the blue brightens
   so it still reads on a dark ground. Inverting the light palette instead
   produces the muddy grey-on-grey that gives away a bolted-on dark mode.

   Both states are covered: the media query for viewers on "system" (which
   stamps nothing on the root), guarded so an explicit light choice still wins,
   and the attribute for an explicit dark choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --white:      #1C1C1E;
    --field:      #1C1C1E;
    --surface:    #2C2C2E;
    --surface-2:  #3A3A3C;
    --sunken:     #161618;
    --off:        #242426;
    --card:       var(--surface);
    --paper:      var(--surface);
    --paper-2:    var(--surface-2);
    --paper-3:    var(--sunken);

    --ink:        #F5F5F7;
    --ink-2:      #D1D1D6;
    --ink-3:      #98989D;
    --ink-4:      #8E8E93;

    --line:        #38383A;
    --line-soft:   #2E2E30;
    --line-2:      #2E2E30;
    --line-strong: #48484A;

    --accent:      #0A84FF;
    --accent-ink:  #FFFFFF;
    --accent-2:    #409CFF;
    --accent-wash: #16283D;

    --good:       #30D158;
    --warn:       #FF9F0A;
    --bad:        #FF453A;
    --good-wash:  #12301C;
    --warn-wash:  #33260A;
    --bad-wash:   #3A1512;

    --rust:       #FF9F0A;
    --rust-soft:  #FFB340;
    --rust-wash:  #33260A;
    --rust-line:  #4A3714;

    --t-specialist:#F5F5F7;
    --t-house:     #98989D;
    --t-heritage:  #5A5A5E;

    --svc-general:   #F5F5F7;
    --svc-fit:       #DCDCE0;
    --svc-intel:     #BFBFC4;
    --svc-outreach:  #A3A3A8;
    --svc-boutiques: #98989D;
    --svc-media:     #7C7C80;
    --svc-envoy:     #636367;

    --glass:      rgba(30,30,32,.72);
    --glass-2:    rgba(30,30,32,.86);
    --glass-line: rgba(255,255,255,.10);

    --shadow-1: 0 0 0 .5px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 0 0 .5px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
    --shadow-3: 0 0 0 .5px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --white:      #1C1C1E;
  --field:      #1C1C1E;
  --surface:    #2C2C2E;
  --surface-2:  #3A3A3C;
  --sunken:     #161618;
  --off:        #242426;
  --card:       var(--surface);
  --paper:      var(--surface);
  --paper-2:    var(--surface-2);
  --paper-3:    var(--sunken);

  --ink:        #F5F5F7;
  --ink-2:      #D1D1D6;
  --ink-3:      #98989D;
  --ink-4:      #8E8E93;

  --line:        #38383A;
  --line-soft:   #2E2E30;
  --line-2:      #2E2E30;
  --line-strong: #48484A;

  --accent:      #0A84FF;
  --accent-ink:  #FFFFFF;
  --accent-2:    #409CFF;
  --accent-wash: #16283D;

  --good:       #30D158;
  --warn:       #FF9F0A;
  --bad:        #FF453A;
  --good-wash:  #12301C;
  --warn-wash:  #33260A;
  --bad-wash:   #3A1512;

  --rust:       #FF9F0A;
  --rust-soft:  #FFB340;
  --rust-wash:  #33260A;
  --rust-line:  #4A3714;

  --t-specialist:#F5F5F7;
  --t-house:     #98989D;
  --t-heritage:  #5A5A5E;

  --svc-general:   #F5F5F7;
  --svc-fit:       #DCDCE0;
  --svc-intel:     #BFBFC4;
  --svc-outreach:  #A3A3A8;
  --svc-boutiques: #98989D;
  --svc-media:     #7C7C80;
  --svc-envoy:     #636367;

  --glass:      rgba(30,30,32,.72);
  --glass-2:    rgba(30,30,32,.86);
  --glass-line: rgba(255,255,255,.10);

  --shadow-1: 0 0 0 .5px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 0 0 .5px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  --shadow-3: 0 0 0 .5px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------------- BASE */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.47;
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.16;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-title-1); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-title-2); letter-spacing: var(--tr-title); }
h3 { font-size: var(--fs-title-3); letter-spacing: var(--tr-title); }
h4 { font-size: var(--fs-lg);      letter-spacing: var(--tr-body); }

p { margin: 0; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Apple's focus ring: the accent at low alpha, offset, and always visible to a
   keyboard. Never `outline: none` — a control you can reach and cannot see is
   worse than an ugly ring. */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Digits that sit in columns line up. Cheap, and the single most noticeable
   thing about a well-set table of numbers. */
table, .num, [data-num] { font-variant-numeric: tabular-nums; }

code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }

/* NATIVE CONTROLS DO NOT INHERIT A THEME. A <select> styled dark still opened a
   white menu with white text — 1:1 contrast, and unreadable. `color-scheme` is
   what tells the browser to render its own widgetry to match, and the explicit
   pair covers the option list itself. */
select, option, input, textarea, button { color-scheme: light dark; }

/* FORM ELEMENTS DO NOT INHERIT COLOUR, AND THAT WAS THE DARK-MODE BUG.
   A <button> whose CSS says `font: inherit` still keeps the user agent's own
   `color: buttontext` — pure black. On a white card nobody notices; on a dark
   card it is black text on near-black, which is exactly what the ported
   dashboard plates were doing. Colour is inherited here for every control, so
   any ported markup follows the theme without being edited. */
button, input, select, textarea { color: inherit; }
select { background: var(--surface); color: var(--ink); }
option { background: var(--surface); color: var(--ink); }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Scrollbars, macOS-style: absent until you scroll, and never a light track on
   a dark panel. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

} /* @layer base */