/* =============================================================================
   OCTOPUS — brand tokens
   Locked 2026-09-12.  Spec: docs/design/BRAND.md (read it before using these).

   The product is the RECORD of the hours you worked and did not bill.
   The palette is a marked-up document: registrar's blue-black ink on ledger
   stock, corrected in red. Two inks of meaning and nothing else:

     --held   blue-black   SETTLED.   On this Mac. Free. Silent. True today.
     --open   ledger red   UNSETTLED. Costs money, crosses the boundary,
                                      or is not built yet.

   Every coloured pixel on any Octopus surface means one of exactly those
   two things. If a colour would mean a third thing, it is the wrong colour.

   ---------------------------------------------------------------------------
   CONTRAST AUDIT — computed with the WCAG 2.1 relative-luminance formula,
   not eyeballed. Every text pair is >= 4.5:1. Every meaning-bearing border
   and outline is >= 3.0:1. Reproduce with brand/contrast-audit.py.

   LIGHT
     ink      #16181A  on paper   #F1F2EE  = 15.83:1
     ink      #16181A  on paper-2 #E7E9E3  = 14.55:1
     ink      #16181A  on sheet   #FBFBF8  = 17.17:1
     ink-2    #3B4045  on paper   #F1F2EE  =  9.31:1
     ink-2    #3B4045  on sheet   #FBFBF8  = 10.10:1
     ink-3    #62686D  on paper   #F1F2EE  =  5.02:1
     ink-3    #62686D  on sheet   #FBFBF8  =  5.44:1
     ink-3    #62686D  on paper-2 #E7E9E3  =  4.61:1
     held     #1D3C5E  on paper   #F1F2EE  = 10.04:1
     held     #1D3C5E  on sheet   #FBFBF8  = 10.89:1
     open     #A33121  on paper   #F1F2EE  =  6.19:1
     open     #A33121  on sheet   #FBFBF8  =  6.71:1
     open     #A33121  on paper-2 #E7E9E3  =  5.69:1
     #FFFFFF  on held  #1D3C5E             = 11.29:1
     #FFFFFF  on open  #A33121             =  6.96:1
     paper    #F1F2EE  on ink     #16181A  = 15.83:1   (primary button)
     open     #A33121  on open-tint #EAE1DC=  5.40:1   (chip text on its tint)
     held     #1D3C5E  on held-tint #DEE2E1=  8.64:1
     edge     #7D8388  vs paper             =  3.41:1  (UI min 3:1)
     edge     #7D8388  vs sheet             =  3.70:1
     edge     #7D8388  vs paper-2           =  3.14:1

   DARK
     ink      #ECEEEC  on paper   #111416  = 15.86:1
     ink-2    #C2C7C9  on paper   #111416  = 10.84:1
     ink-3    #929A9E  on paper   #111416  =  6.46:1
     ink-3    #929A9E  on sheet   #1A1E20  =  5.87:1
     ink-3    #929A9E  on paper-2 #171A1C  =  6.11:1
     held     #86B4DE  on paper   #111416  =  8.45:1
     held     #86B4DE  on sheet   #1A1E20  =  7.67:1
     open     #E8805F  on paper   #111416  =  6.77:1
     open     #E8805F  on sheet   #1A1E20  =  6.14:1
     open     #E8805F  on open-tint #2F2320=  5.56:1
     held     #86B4DE  on held-tint #212A32=  6.66:1
     paper    #111416  on ink     #ECEEEC  = 15.86:1   (primary button)
     edge     #676E73  vs paper             =  3.57:1
     edge     #676E73  vs sheet             =  3.24:1
     edge     #676E73  vs paper-2           =  3.38:1

   SLATE — the dark object. #14171A in light, #1A1E20 in dark (see below).
     on-slate   #ECEEEC on #14171A = 15.43:1   on #1A1E20 = 14.40:1
     on-slate-2 #BABFC2 on #14171A =  9.70:1   on #1A1E20 =  9.05:1
     on-slate-3 #8E9599 on #14171A =  5.92:1   on #1A1E20 =  5.53:1
     held-slate #86B4DE on #14171A =  8.22:1   on #1A1E20 =  7.67:1
     open-slate #E8805F on #14171A =  6.58:1   on #1A1E20 =  6.14:1
     slate-edge #676E73 vs slate #1A1E20 = 3.24:1  (dark only; transparent
                in light, where slate vs paper is already 16.00:1)

   THE ONE RULE THAT PREVENTS THE WHOLE CLASS OF BUG:
   a surface change alone NEVER carries meaning. Slate on dark paper measures
   1.03:1 — invisible. Every panel, plate and card therefore carries a 1px
   border in --edge (>= 3:1) or it is not a panel. Elevation is decoration;
   the border is the information.
   ============================================================================= */

:root{
  color-scheme: light;

  /* ---- grounds -------------------------------------------------------- */
  --paper:      #F1F2EE;   /* ledger stock. the page. */
  --paper-2:    #E7E9E3;   /* alternating band */
  --sheet:      #FBFBF8;   /* a specimen laid on the page: plates, panels */

  /* ---- ink ------------------------------------------------------------ */
  --ink:        #16181A;   /* headlines, figures, the billed segment */
  --ink-2:      #3B4045;   /* body prose */
  --ink-3:      #62686D;   /* captions, micro-labels, secondary data */

  /* ---- rules and edges ------------------------------------------------ */
  --rule:        rgba(22,24,26,.14);   /* table rows, dividers. 1.34:1 — decorative */
  --rule-soft:   rgba(22,24,26,.07);   /* inside a plate. decorative only */
  --rule-strong: rgba(22,24,26,.28);   /* table head underline, crop ticks */
  --edge:        #7D8388;              /* 3.41:1 — EVERY panel border, every
                                          input border, every ghost button */

  /* ---- held: SETTLED. on this Mac, free, silent, true today ----------- */
  --held:        #1D3C5E;
  --held-on:     #FFFFFF;
  --held-tint:   rgba(29,60,94,.09);
  --held-rule:   #1D3C5E;              /* full strength. never an alpha when it
                                          has to be seen — .34 measured 1.88:1 */
  --held-hair:   rgba(29,60,94,.34);   /* decorative only */

  /* ---- open: UNSETTLED. costs, crosses, or not built yet -------------- */
  --open:        #A33121;
  --open-on:     #FFFFFF;
  --open-tint:   rgba(163,49,33,.09);
  --open-rule:   #A33121;              /* full strength. see --held-rule */
  --open-hair:   rgba(163,49,33,.34);  /* decorative only */

  /* ---- slate: the dark object (app chrome, closing band) --------------
     On a light page a slate object is 16.00:1 against paper and needs no
     border, so --slate-edge is transparent here. In dark mode the page IS
     slate — a slate panel on it measures 1.03:1 — so the dark block below
     resolves --slate to the elevated sheet value and gives it the normal
     --edge border. A surface change alone never carries meaning. */
  --slate:       #14171A;
  --slate-2:     #1E2226;
  --on-slate:    #ECEEEC;
  --on-slate-2:  #BABFC2;
  --on-slate-3:  #8E9599;
  --held-slate:  #86B4DE;
  --open-slate:  #E8805F;
  --slate-rule:  rgba(236,238,236,.16);
  --slate-edge:  transparent;

  /* the fill of a billed segment in the gap rule. Light: full ink. Dark:
     ink-2, because full ink in dark is a bank of white blocks that shouts;
     10.84:1 is still far above the floor. */

  /* ---- texture -------------------------------------------------------- */
  /* baked 160x160 tile. NO live SVG filter is permitted anywhere on any page. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  --grain-opacity: .022;
  --grain-blend: multiply;

  /* the columnar-pad ruling. See BRAND.md §6.4 — pitch MUST equal the
     line-height of the rows sitting on it, or it is noise. */
  --ruling-pitch: 32px;
  --ruling: repeating-linear-gradient(
              to bottom,
              transparent 0,
              transparent calc(var(--ruling-pitch) - 1px),
              rgba(29,60,94,.10) calc(var(--ruling-pitch) - 1px),
              rgba(29,60,94,.10) var(--ruling-pitch));

  /* ---- elevation. two levels. decoration only, never meaning ---------- */
  --e-1: 0 1px 2px rgba(22,24,26,.05), 0 10px 28px -16px rgba(22,24,26,.20);
  --e-2: 0 2px 4px rgba(22,24,26,.06), 0 28px 64px -32px rgba(22,24,26,.38);

  /* ---- radii ---------------------------------------------------------- */
  --r-0:    0;       /* the gap rule, data strips, ledger tables. a measure is
                        never rounded. */
  --r-1:    3px;     /* chips, tags, status pills, the fig number */
  --r-2:    6px;     /* plates, panels, figure grounds */
  --r-3:    12px;    /* an object with its own chrome: the Mac window, the
                        menu-bar dropdown, the day-record card */
  --r-pill: 999px;   /* buttons and inputs ONLY. the single soft shape on the
                        page; it means "you press this". */

  /* ---- space. 4pt scale. --------------------------------------------- */
  --s0:  2px;  --s1:  4px;  --s2:  8px;  --s3: 12px;
  --s4: 16px;  --s5: 24px;  --s6: 32px;  --s7: 48px;
  --s8: 64px;  --s9: 96px;  --s10:128px; --s11:160px;

  --pad:     clamp(20px, 4.6vw, 56px);   /* page gutter */
  --measure: 64ch;                        /* prose max-width. never exceed. */
  --measure-tight: 50ch;                  /* lede, captions under a figure */

  /* ---- motion --------------------------------------------------------- */
  --t-fast: 120ms;    /* colour, border, opacity on hover/focus */
  --t-mid:  200ms;    /* nav underline sweep, disclosure chevron, arrow nudge */
  --t-slow: 420ms;    /* the one scroll reveal. nothing else may use it. */
  --ease:     cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- type ----------------------------------------------------------- */
  /* Native stack, deliberately. No webfont, no CDN, no FOUT. New York is the
     Apple system serif; the fallbacks are named and the design survives
     Georgia. See BRAND.md §4. */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  /* size / weight / tracking / leading, per level. All six numbers are the
     spec; do not improvise a seventh level. */
  --fs-display-1: clamp(40px, 5.4vw, 74px);  --lh-display-1: 1.02; --tr-display-1: -.022em; --fw-display-1: 400;
  --fs-display-2: clamp(32px, 4.0vw, 52px);  --lh-display-2: 1.06; --tr-display-2: -.019em; --fw-display-2: 400;
  --fs-h2:        clamp(27px, 2.9vw, 38px);  --lh-h2:        1.12; --tr-h2:        -.016em; --fw-h2:        400;
  --fs-h3:        clamp(20px, 2.0vw, 26px);  --lh-h3:        1.24; --tr-h3:        -.012em; --fw-h3:        400;
  --fs-h4:        17px;                      --lh-h4:        1.36; --tr-h4:        -.008em; --fw-h4:        600;
  --fs-lede:      clamp(17.5px, 1.35vw, 20px);--lh-lede:     1.58; --tr-lede:      -.004em; --fw-lede:      400;
  --fs-body:      16.5px;                    --lh-body:      1.62; --tr-body:       0;      --fw-body:      400;
  --fs-small:     14.5px;                    --lh-small:     1.56; --tr-small:      0;      --fw-small:     400;
  --fs-caption:   13px;                      --lh-caption:   1.50; --tr-caption:    0;      --fw-caption:   400;
  --fs-label:     11.5px;                    --lh-label:     1.40; --tr-label:      .13em;  --fw-label:     500;
  --fs-data:      13px;                      --lh-data:      1.50; --tr-data:       .01em;  --fw-data:      450;
  --fs-data-lg:   clamp(15px, 1.6vw, 22px);  --lh-data-lg:   1.30; --tr-data-lg:   -.02em;  --fw-data-lg:   500;

  /* LIQUID GLASS (James chose it 2026-10-02, frosted, not clear; 2026-10-03: off-white and
     charcoal, no blue).
     The desk's glass views read these; the Mac app's own glass reads the same values from
     native/app/Sources/MenuBarCore/GlassTokens.swift, and apps/desktop/test/glass-tokens.test.ts
     holds the two to each other. Coral is ONLY the countdown ring and Stop; olive is settled.
     Values follow the house style, v1.1 (design/tokens.css, design/STYLE.md; v1.2 adds cream): max frost, Archivo /
     Inter / JetBrains Mono, rows 14 and panels 26. */
  --lg-coral:       #E8805F;
  --lg-coral-light: #F6A082;
  --lg-on-coral:    #20120D;
  --lg-olive:       #8FA07A;
  --lg-bone:        #F4F2EC;
  --lg-bone-2:      #B8B5AB;
  --lg-ink:         #1F1F1D;
  --lg-ink-2:       #5F5E58;
  --lg-char-1:      #262624;
  --lg-char-2:      #1D1D1B;
  --lg-char-3:      #161615;
  --lg-glow-1:      rgba(244,242,236,.07);
  --lg-glow-2:      rgba(232,226,214,.05);
  --lg-sun-1:       #FFF6E6;
  --lg-sun-2:       #F0DDBF;
  --lg-sun-3:       #D8B993;
  --lg-sun-4:       #B8956F;
  --lg-reed-1:      #A9B98F;
  --lg-reed-2:      #7E9068;
  --lg-reed-3:      #5E6B4E;
  --lg-clear-top:   rgba(244,243,239,.42);
  --lg-clear-bot:   rgba(244,243,239,.32);
  --lg-deep-top:    rgba(34,34,32,.8);
  --lg-deep-bot:    rgba(34,34,32,.74);
  --lg-frost-top:   rgba(251,250,247,.92);
  --lg-frost-bot:   rgba(239,231,214,.88);
  --lg-cream:       #EFE7D6;
  --lg-cream-line:  #E0D6C1;
  --lg-light-1:     rgba(255,255,255,.85);
  --lg-light-2:     rgba(255,255,255,.55);
  --lg-light-3:     rgba(255,255,255,.30);
  --lg-light-4:     rgba(255,255,255,.14);
  --lg-light-5:     rgba(255,255,255,.07);
  --lg-line:        rgba(31,31,29,.12);
  --lg-line-bone:   rgba(244,242,236,.12);
  --lg-shade:       rgba(0,0,0,.40);
  --lg-shade-2:     rgba(0,0,0,.24);
  --lg-coral-glow:  rgba(232,128,95,.45);
  --lg-coral-rim:   rgba(255,236,226,.85);
  --lg-coral-base:  rgba(150,60,35,.35);
  --lg-backdrop:    blur(64px) saturate(140%) contrast(.6) brightness(.9);
  /* FROST v1.5 (James approved light and dark, 2026-10-03; design/STYLE.md "Frost v1.5",
     design/tokens.css .oc-frost). The whole Desk window is one frosted panel over the grey storm
     wallpaper, tinted off-white in light and charcoal in dark; inside it rows and cards are flat
     fills, not glass on glass. fl = light, fd = dark; the desk picks one by the system setting. */
  --lg-fl-blur:     blur(110px) saturate(115%) brightness(1.06);
  --lg-fl-tint-top: rgba(248,247,243,.62);
  --lg-fl-tint-bot: rgba(239,231,214,.56);
  --lg-fl-bg:       #F4F3EF;
  --lg-fl-ink:      #1F1F1D;
  --lg-fl-ink-2:    #5F5E58;
  --lg-fl-line:     rgba(31,31,29,.10);
  --lg-fl-edge:     rgba(31,31,29,.22);
  --lg-fl-mark-edge: rgba(31,31,29,.35);
  --lg-fl-dot:      rgba(31,31,29,.16);
  --lg-fl-hover:    rgba(255,255,255,.45);
  --lg-fl-press:    rgba(31,31,29,.06);
  --lg-fl-panel:    rgba(255,255,255,.28);
  --lg-fl-card:     rgba(255,255,255,.42);
  --lg-fl-card-top: rgba(255,255,255,.6);
  --lg-fl-card-shade: rgba(31,31,29,.10);
  --lg-fl-face:     rgba(31,31,29,.07);
  --lg-fl-card-2:   rgba(255,255,255,.72);
  --lg-fl-main:     #1F1F1D;
  --lg-fl-main-ink: #F4F3EF;
  --lg-fl-rim-1:    rgba(255,255,255,.85);
  --lg-fl-rim-2:    rgba(255,255,255,.45);
  --lg-fl-rim-3:    rgba(31,31,29,.06);
  --lg-fl-shade-1:  rgba(31,31,29,.10);
  --lg-fl-shade-2:  rgba(31,31,29,.28);
  --lg-fl-storm-1:  #C7C4C2;
  --lg-fl-storm-2:  #B0ADAB;
  --lg-fl-storm-3:  #6C6968;
  --lg-fl-storm-4:  #514F4E;
  --lg-fd-blur:     blur(110px) saturate(110%) brightness(.82);
  --lg-fd-tint-top: rgba(38,38,36,.62);
  --lg-fd-tint-bot: rgba(29,29,27,.58);
  --lg-fd-bg:       #1D1D1B;
  --lg-fd-ink:      #F4F2EC;
  --lg-fd-ink-2:    #B8B5AB;
  --lg-fd-line:     rgba(244,242,236,.10);
  --lg-fd-edge:     rgba(244,242,236,.24);
  --lg-fd-mark-edge: rgba(244,242,236,.24);
  --lg-fd-dot:      rgba(244,242,236,.20);
  --lg-fd-hover:    rgba(255,255,255,.07);
  --lg-fd-press:    rgba(255,255,255,.12);
  --lg-fd-panel:    rgba(255,255,255,.04);
  --lg-fd-card:     rgba(255,255,255,.06);
  --lg-fd-card-top: rgba(255,255,255,.1);
  --lg-fd-card-shade: rgba(0,0,0,.25);
  --lg-fd-face:     rgba(244,242,236,.10);
  --lg-fd-card-2:   rgba(255,255,255,.12);
  --lg-fd-main:     #EFE7D6;
  --lg-fd-main-ink: #161615;
  --lg-fd-rim-1:    rgba(255,255,255,.22);
  --lg-fd-rim-2:    rgba(255,255,255,.08);
  --lg-fd-rim-3:    rgba(0,0,0,.25);
  --lg-fd-shade-1:  rgba(0,0,0,.30);
  --lg-fd-shade-2:  rgba(0,0,0,.50);
  --lg-fd-storm-1:  #767371;
  --lg-fd-storm-2:  #625F5D;
  --lg-fd-storm-3:  #2F2C2D;
  --lg-fd-storm-4:  #222020;
  /* Shape v1.6 (design/STYLE.md): the capsule's top catch-light and the chosen segment's lift, the
     same in both modes. */
  --lg-cap-top:     rgba(255,255,255,.35);
  --lg-seg-shade:   rgba(0,0,0,.12);
  /* The mode the desk is drawing in: light unless the system is dark (apps/desktop/public/app.css
     points these at the fd set under prefers-color-scheme: dark). */
  --lg-m-blur:      var(--lg-fl-blur);
  --lg-m-tint-top:  var(--lg-fl-tint-top);
  --lg-m-tint-bot:  var(--lg-fl-tint-bot);
  --lg-m-bg:        var(--lg-fl-bg);
  --lg-m-ink:       var(--lg-fl-ink);
  --lg-m-ink-2:     var(--lg-fl-ink-2);
  --lg-m-line:      var(--lg-fl-line);
  --lg-m-edge:      var(--lg-fl-edge);
  --lg-m-mark-edge: var(--lg-fl-mark-edge);
  --lg-m-dot:       var(--lg-fl-dot);
  --lg-m-hover:     var(--lg-fl-hover);
  --lg-m-press:     var(--lg-fl-press);
  --lg-m-panel:     var(--lg-fl-panel);
  --lg-m-card:      var(--lg-fl-card);
  --lg-m-card-2:    var(--lg-fl-card-2);
  --lg-m-card-top:  var(--lg-fl-card-top);
  --lg-m-card-shade: var(--lg-fl-card-shade);
  --lg-m-face:      var(--lg-fl-face);
  --lg-m-main:      var(--lg-fl-main);
  --lg-m-main-ink:  var(--lg-fl-main-ink);
  --lg-m-rim-1:     var(--lg-fl-rim-1);
  --lg-m-rim-2:     var(--lg-fl-rim-2);
  --lg-m-rim-3:     var(--lg-fl-rim-3);
  --lg-m-shade-1:   var(--lg-fl-shade-1);
  --lg-m-shade-2:   var(--lg-fl-shade-2);
  --lg-m-storm-1:   var(--lg-fl-storm-1);
  --lg-m-storm-2:   var(--lg-fl-storm-2);
  --lg-m-storm-3:   var(--lg-fl-storm-3);
  --lg-m-storm-4:   var(--lg-fl-storm-4);
  --lg-r:           26px;
  --lg-r-card:      20px;
  --lg-r-sheet:     26px;
  --lg-r-row:       14px;
  --lg-sans:         Inter, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --lg-display:      Archivo, "Helvetica Neue", Arial, sans-serif;
  --lg-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- dark ------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --paper:      #111416;
    --paper-2:    #171A1C;
    --sheet:      #1A1E20;

    --ink:        #ECEEEC;
    --ink-2:      #C2C7C9;
    --ink-3:      #929A9E;

    --rule:        rgba(236,238,236,.16);
    --rule-soft:   rgba(236,238,236,.08);
    --rule-strong: rgba(236,238,236,.30);
    --edge:        #676E73;

    --held:        #86B4DE;
    --held-on:     #0B1620;
    --held-tint:   rgba(134,180,222,.14);
    --held-rule:   #86B4DE;
    --held-hair:   rgba(134,180,222,.40);

    --open:        #E8805F;
    --open-on:     #1E0C06;
    --open-tint:   rgba(232,128,95,.14);
    --open-rule:   #E8805F;
    --open-hair:   rgba(232,128,95,.40);

    /* the page is already slate: promote the panel to the elevated sheet and
       give it the real edge. #4A5157 measured 2.29:1 here and failed. */
    --slate:       #1A1E20;
    --slate-2:     #22272A;
    --slate-edge:  #676E73;   /* 3.24:1 against --slate */
    --on-slate-2:  #BABFC2;   /*  9.05:1 */
    --on-slate-3:  #8E9599;   /*  5.53:1 */

    --ruling: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--ruling-pitch) - 1px),
                rgba(134,180,222,.12) calc(var(--ruling-pitch) - 1px),
                rgba(134,180,222,.12) var(--ruling-pitch));

    --grain-opacity: .045;
    --grain-blend: screen;

    --e-1: 0 1px 2px rgba(0,0,0,.50), 0 12px 30px -18px rgba(0,0,0,.72);
    --e-2: 0 2px 6px rgba(0,0,0,.50), 0 32px 72px -34px rgba(0,0,0,.92);
  }
}

/* The explicit toggle must win in both directions. Every token above that a
   dark block redefines is redefined here too — a colour whose only definition
   lives inside a media query is a bug. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#111416; --paper-2:#171A1C; --sheet:#1A1E20;
  --ink:#ECEEEC; --ink-2:#C2C7C9; --ink-3:#929A9E;
  --rule:rgba(236,238,236,.16); --rule-soft:rgba(236,238,236,.08);
  --rule-strong:rgba(236,238,236,.30); --edge:#676E73;
  --held:#86B4DE; --held-on:#0B1620; --held-tint:rgba(134,180,222,.14);
  --held-rule:#86B4DE; --held-hair:rgba(134,180,222,.40);
  --open:#E8805F; --open-on:#1E0C06; --open-tint:rgba(232,128,95,.14);
  --open-rule:#E8805F; --open-hair:rgba(232,128,95,.40);
  --slate:#1A1E20; --slate-2:#22272A; --slate-edge:#676E73;
  --on-slate-2:#BABFC2; --on-slate-3:#8E9599;
  --ruling: repeating-linear-gradient(to bottom, transparent 0,
              transparent calc(var(--ruling-pitch) - 1px),
              rgba(134,180,222,.12) calc(var(--ruling-pitch) - 1px),
              rgba(134,180,222,.12) var(--ruling-pitch));
  --grain-opacity:.045; --grain-blend:screen;
  --e-1: 0 1px 2px rgba(0,0,0,.50), 0 12px 30px -18px rgba(0,0,0,.72);
  --e-2: 0 2px 6px rgba(0,0,0,.50), 0 32px 72px -34px rgba(0,0,0,.92);
}

/* =============================================================================
   PRIMITIVES
   A lane may add components. A lane may not invent a token, a colour, a type
   level, a radius or a duration that is not above.
   ============================================================================= */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img,svg{ max-width:100% }
h1,h2,h3,h4{ margin:0; font-weight:400 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--open-tint); color:var(--ink) }

/* Focus is ink, not a system blue. 3px offset so it clears a hairline. */
:focus-visible{ outline:2px solid var(--open); outline-offset:3px; border-radius:2px }
.on-slate :focus-visible{ outline-color:var(--on-slate) }

.sc-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---- layout ----------------------------------------------------------- */
.sc-wrap{ max-width:1240px; margin:0 auto; padding-inline:var(--pad) }
.sc-band{ padding-block:clamp(48px,6.4vw,104px) }
.sc-band-tight{ padding-block:clamp(34px,4vw,60px) }
.sc-band-alt{ background:var(--paper-2) }
.sc-hr{ height:1px; background:var(--rule); border:0; margin:0 }

/* ---- type ------------------------------------------------------------- */
.sc-display-1{ font-family:var(--serif); font-size:var(--fs-display-1); line-height:var(--lh-display-1); letter-spacing:var(--tr-display-1); font-weight:var(--fw-display-1) }
.sc-display-2{ font-family:var(--serif); font-size:var(--fs-display-2); line-height:var(--lh-display-2); letter-spacing:var(--tr-display-2); font-weight:var(--fw-display-2) }
.sc-h2{ font-family:var(--serif); font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); font-weight:var(--fw-h2) }
.sc-h3{ font-family:var(--serif); font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--tr-h3); font-weight:var(--fw-h3) }
.sc-h4{ font-family:var(--sans);  font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--tr-h4); font-weight:var(--fw-h4) }
.sc-display-1 em,.sc-display-2 em,.sc-h2 em,.sc-h3 em{ font-style:italic; letter-spacing:-.008em }

.sc-lede{ font-size:var(--fs-lede); line-height:var(--lh-lede); letter-spacing:var(--tr-lede); color:var(--ink-2); max-width:var(--measure-tight) }
.sc-body{ color:var(--ink-2); max-width:var(--measure) }
.sc-small{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-3) }
.sc-caption{ font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink-3); max-width:var(--measure-tight) }

.sc-label{
  font-family:var(--mono); font-variant-ligatures:none;
  font-size:var(--fs-label); font-weight:var(--fw-label);
  letter-spacing:var(--tr-label); line-height:var(--lh-label);
  text-transform:uppercase; color:var(--ink-3);
}
.sc-label--held{ color:var(--held) }
.sc-label--open{ color:var(--open) }

.sc-data{ font-family:var(--mono); font-variant-ligatures:none; font-size:var(--fs-data); line-height:var(--lh-data); letter-spacing:var(--tr-data); font-weight:var(--fw-data) }
.sc-data-lg{ font-family:var(--mono); font-variant-ligatures:none; font-size:var(--fs-data-lg); line-height:var(--lh-data-lg); letter-spacing:var(--tr-data-lg); font-weight:var(--fw-data-lg); color:var(--ink) }

/* Every figure, hour, price, timestamp and ledger cell is tabular. An hours
   column that jitters is a column nobody trusts. */
.sc-data,.sc-data-lg,.sc-label,.sc-caption,.sc-small,
.sc-tag,.sc-chip,.sc-fig-n,.sc-fig-meta,.sc-ledger,.sc-status{
  font-variant-numeric:tabular-nums lining-nums;
}

/* ---- buttons: the only capsule on the page ---------------------------- */
.sc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:15.5px; font-weight:550; letter-spacing:-.006em;
  padding:13px 24px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.sc-btn:active{ transform:translateY(1px) }
.sc-btn--primary{ background:var(--ink); color:var(--paper) }
.sc-btn--primary:hover{ background:var(--ink-2) }
.sc-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--edge) }
.sc-btn--ghost:hover{ border-color:var(--ink); background:var(--rule-soft) }
.sc-btn--on-slate{ background:var(--on-slate); color:var(--slate) }
.sc-btn .sc-arrow{ transition:transform var(--t-mid) var(--ease) }
.sc-btn:hover .sc-arrow{ transform:translateX(3px) }

/* ---- chips and tags --------------------------------------------------- */
.sc-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-1);
  border:1px solid var(--edge); color:var(--ink-3);
  line-height:1.45; white-space:normal; text-align:left;
}
.sc-tag--held{ border-color:var(--held-rule); color:var(--held); background:var(--held-tint) }
.sc-tag--open{ border-color:var(--open-rule); color:var(--open); background:var(--open-tint) }

/* ---- the specimen plate (system component, inherited) ----------------- */
.sc-plate{
  position:relative; background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r-2); box-shadow:var(--e-1);
}
/* The ticks sit 10px OUTSIDE the plate, so a cropped plate needs >=10px of
   clearance inside the page gutter. --pad never goes below 20px, which is why
   that floor is a clamp minimum and not a preference. */
.sc-plate--cropped::before{
  content:""; position:absolute; inset:-10px; pointer-events:none;
  background:
    linear-gradient(var(--rule-strong),var(--rule-strong)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 0 0/13px 1px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 100% 0/13px 1px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 0 100%/13px 1px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 100% 100%/1px 13px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) 100% 100%/13px 1px no-repeat;
}
.sc-fig-slug{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:var(--s4) }
.sc-fig-n{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--open); font-weight:600; white-space:nowrap }
.sc-fig-title{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-3); min-width:0 }
.sc-fig-lead{ flex:1 1 auto; height:1px; background:var(--rule); min-width:12px }
.sc-fig-meta{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.06em; color:var(--ink-3); white-space:nowrap }
@media (max-width:520px){ .sc-fig-title{ display:none } }

/* ---- the ledger table ------------------------------------------------- */
.sc-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.sc-ledger{ width:100%; border-collapse:collapse; min-width:640px; text-align:left }
.sc-ledger caption{ text-align:left }
.sc-ledger thead th{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  padding:0 var(--s5) 12px 0; border-bottom:1px solid var(--ink);
}
.sc-ledger td,.sc-ledger tbody th{
  padding:15px var(--s5) 15px 0; border-bottom:1px solid var(--rule-soft);
  font-size:var(--fs-small); color:var(--ink-2); vertical-align:top;
  line-height:1.5; text-align:left;
}
.sc-ledger tbody th{ color:var(--ink); font-weight:550; white-space:nowrap; width:21% }
.sc-ledger tbody tr:last-child td,.sc-ledger tbody tr:last-child th{ border-bottom:1px solid var(--rule) }
.sc-ledger tr.sc-grp th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; width:auto; white-space:normal; padding:26px 0 10px;
  border-bottom:0; color:var(--held);
}
.sc-ledger tr.sc-grp--open th{ color:var(--open); padding-top:34px }
.sc-ledger tr.sc-grp span{ display:flex; align-items:center; gap:14px }
.sc-ledger tr.sc-grp span::after{ content:""; flex:1; height:1px; background:var(--held-hair) }
.sc-ledger tr.sc-grp--open span::after{ background:var(--open-hair) }

/* =============================================================================
   THE GAP RULE is gone. It drew hours billed against hours worked — solid for
   billed, hollow for attended-and-not-billed — and it was the signature device
   of a product that measured a lawyer's day. This one reads a desk and acts on
   it, and there is no gap to draw.

   Thirteen rules and the --gap-billed token went with it. They were dead for a
   while first: apps/site/scripts/check-css-reach.mjs listed them among 26 rules
   nothing rendered, which is the only reason anybody knew they were still here.
   ============================================================================= */

/* =============================================================================
   STRUCK TEXT — what the product will not do, shown as a line through it.
   The five .sc-redact* rules that used to sit here went with the home page's
   old redaction figure, which was rebuilt on .sc-boundary / .sc-zone; nothing
   rendered them afterwards.
   ============================================================================= */
.sc-never-line s{ text-decoration-color:var(--open); text-decoration-thickness:1px; color:var(--ink-3) }
/* adjacent struck items must not read as one continuous strike */
.sc-never-line s + s{ margin-left:.5em }

/* =============================================================================
   STATUS — the mode surface. One closed enum. NEVER animated, never a
   pulsing dot, never a waveform. See BRAND.md §8.
   ============================================================================= */
.sc-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.sc-status-mark{ width:9px; height:9px; flex:0 0 auto; border-radius:var(--r-0) }
.sc-status--off       .sc-status-mark{ background:transparent; box-shadow:inset 0 0 0 1px var(--edge) }
.sc-status--attending .sc-status-mark{ background:var(--held) }
.sc-status--connected .sc-status-mark{ background:var(--open) }

/* ---- slate surfaces --------------------------------------------------- */
.sc-on-slate{
  background:var(--slate); color:var(--on-slate);
  border:1px solid var(--slate-edge); border-radius:var(--r-3);
}
.sc-on-slate .sc-label,.sc-on-slate .sc-caption,.sc-on-slate .sc-small{ color:var(--on-slate-3) }
.sc-on-slate .sc-body,.sc-on-slate .sc-lede{ color:var(--on-slate-2) }
.sc-on-slate .sc-label--held{ color:var(--held-slate) }
.sc-on-slate .sc-label--open{ color:var(--open-slate) }

/* ---- texture ---------------------------------------------------------- */
.sc-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
}

/* =============================================================================
   MOTION — the whole budget.
   One reveal, one underline sweep, one arrow nudge, one button press.
   Anything else is a defect. Nothing above the fold may depend on JS.
   ============================================================================= */
.js .sc-reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out) }
.js .sc-reveal.is-in{ opacity:1; transform:none }
.js .sc-hero .sc-reveal{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important }
  .js .sc-reveal{ opacity:1; transform:none }
}