/* SuperOffice — the design system, applied to the site. Tokens live in
 * so-tokens.css (loaded first). BRAND.md is the written version. */
:root{
  /* ---- the older vocabularies, re-pointed (blue-whale.css + palette.css) ---- */
  --color-canvas: var(--so-paper-100);
  --color-canvas-raised: var(--so-paper-000);
  --color-canvas-lifted: var(--so-paper-000);
  --color-canvas-inset: var(--so-paper-050);
  --color-ink: var(--so-ink-900);
  --color-ink-muted: var(--so-ink-600);
  --color-ink-dim: var(--so-ink-500);
  --color-rule: var(--so-stone-200);
  --color-rule-strong: var(--so-stone-300);
  --color-accent: #c5a55a;
  --color-accent-soft: #d4ba7a;
  --color-accent-deep: var(--so-gold-800);
  --color-accent-tint: var(--so-gold-050);
  --accent-ink: #0b1d32;
  --accent-press: #a8893e;
  --color-ok: var(--so-success-600); --color-ok-dot: var(--so-success-600);
  --color-bad: var(--so-danger-600); --color-bad-dot: var(--so-danger-600);
  --paper: var(--color-canvas); --card: var(--color-canvas-raised); --raised: var(--color-canvas-inset);
  --ink: var(--color-ink); --ink-2: var(--color-ink-muted); --muted: var(--color-ink-dim);
  --line: var(--color-rule); --line-2: var(--color-rule-strong);
  --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: var(--color-accent-tint);
  --ok: var(--color-ok); --bad: var(--color-bad);
  --ring: 0 0 0 3px light-dark(rgba(11,29,50,.22), rgba(227,233,245,.35));
  --shadow: var(--so-shadow-card);
  --radius-sm: var(--so-r-md); --radius: var(--so-r-lg); --radius-lg: var(--so-r-xl);
}
[data-theme="light"]{color-scheme:light} [data-theme="dark"]{color-scheme:dark}
:root{--scrim:246,244,239}
[data-theme="dark"]{--scrim:14,18,25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--scrim:14,18,25}}

/* ---- one face ---- */
html,body,button,input,select,textarea{font-family:var(--so-font)}
body{background:var(--so-paper-100);color:var(--so-ink-900);-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.01em}
/* no monospace in the chrome: figures keep their columns with tabular numbers */
.mono,.num,time,.eyebrow,.state,td,input[type="date"].fin{font-family:var(--so-font)!important;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--so-gold-800)}
a{color:var(--so-navy-900)}
:focus-visible{outline:2px solid var(--so-navy-900);outline-offset:2px}

/* ---- buttons: ONE system (BRAND.md "FINAL DESIGN", 2026-09-19) ----
   Sizes: 40px (phone 44) · small 32px (phone 36). Radius 10. Label 14/600, small 13/600.
   Padding 0 18px · small 0 12px. Nothing on a page overrides these; context rules
   (a bar, a quiet row action) change colour only.
   Rest: second actions are filled navy (lifted #24406a in dark, with a 1px ink-500
   edge so the fill does not vanish into the dark ground — navy on #0e1219 is 1.1:1);
   the main action is brand gold with white text (Amit's explicit choice, 2.4:1).
   Hover: navy with a gold edge (lifted #2c4c7c in dark), white text, 2px lift, sheen.
   No !important: the old blanket `.btn:not(.btn-bad){…!important}` outranked
   .btn-primary, so every main action on the site rendered navy, not gold. */
:root{
  /* second actions are paper with a stone edge at rest (less navy, 23 Sep); navy is
     the hover. Dark navy is the lifted #3f5a82, never navy on the dark ground. */
  --so-btn-sec: light-dark(#f6f4ef, #1d3557);
  --so-btn-sec-edge: light-dark(#d2c8b4, #3f5a82);
  --so-btn-sec-tx: light-dark(#0b1d32, #ffffff);
  --so-btn-hover: light-dark(#0b1d32, #24406a);
  --so-btn-edge-hover: #c5a55a;
  --so-danger: #b6453a;
}
.btn,.so-btn{position:relative;overflow:hidden;isolation:isolate;min-height:40px;padding:0 18px;border-radius:var(--so-r-md);
  border:1px solid var(--so-btn-sec-edge);background:var(--so-btn-sec);color:var(--so-btn-sec-tx);
  font:600 14px/1 var(--so-font);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;text-decoration:none;text-shadow:none;
  transition:transform .14s var(--so-ease),box-shadow .14s var(--so-ease),background-color .14s,color .14s,border-color .14s}
.btn::before,.so-btn::before{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s var(--so-ease)}
.btn:hover::before,.so-btn:hover::before{left:125%}
.btn-primary,.btn.btn-primary,.so-btn.primary,.so-btn.filled{background:var(--so-gold);border-color:var(--so-gold);color:#fff}
.btn:hover,.so-btn:hover,.btn.btn-primary:hover,.so-btn.primary:hover,.so-btn.filled:hover{
  background:var(--so-btn-hover);border-color:var(--so-btn-edge-hover);color:#fff;
  box-shadow:0 0 0 1px var(--so-btn-edge-hover),var(--so-shadow-navy);transform:translateY(-2px)}
.btn:active,.so-btn:active{transform:translateY(0)}
.so-btn.ghost,.btn.btn-ghost{background:transparent;border-color:transparent;color:var(--so-navy-900)}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
/* destructive stays an outline, so a column of Delete buttons does not shout */
.btn.btn-bad{border-color:var(--so-danger-600);color:var(--so-danger-600);background:transparent}
.btn.btn-bad:hover{background:var(--so-danger);border-color:var(--so-danger);color:#fff;box-shadow:none}
.btn[disabled],.so-btn[disabled],.btn[disabled]:hover,.so-btn[disabled]:hover{background:var(--so-stone-300);border-color:var(--so-stone-300);color:var(--so-ink-500);opacity:1;transform:none;box-shadow:none;cursor:default}
.btn[disabled]::before,.so-btn[disabled]::before{display:none}
@media (max-width:700px){.btn,.so-btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){.btn,.so-btn,.btn::before,.so-btn::before{transition:none}.btn:hover,.so-btn:hover{transform:none}}

/* ---- fields ---- */
.fin,.signin input:not([type=checkbox]),.so-in{border:1px solid var(--so-stone-300);border-radius:var(--so-r-md);background:var(--so-paper-000);
  color:var(--so-ink-900);font:500 14px/1.5 var(--so-font);padding:10px 12px;min-height:44px}
.fin:focus,.so-in:focus,.signin input:focus{outline:2px solid var(--so-navy-900);outline-offset:0;border-color:var(--so-sel-edge);box-shadow:none}
.flabel{font-weight:600;font-size:14px;color:var(--so-ink-900)}
input[type=checkbox],input[type=radio]{accent-color:var(--so-navy)}

/* ---- surfaces ---- */
.card,.tablewrap{background:var(--so-paper-000);border:1px solid var(--so-stone-200);border-radius:var(--so-r-lg);box-shadow:var(--so-shadow-card)}
th{font:700 11px var(--so-font);letter-spacing:.12em;text-transform:uppercase;color:var(--so-gold-800)}
tbody tr:hover{background:var(--so-paper-050)}
/* selection is navy, never gold */
.check:has(input:checked){background:var(--so-navy-050);border-color:var(--so-sel-edge)}
.so-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--so-r-pill);
  border:1px solid var(--so-stone-300);background:var(--so-paper-000);color:var(--so-navy-900);font:600 14px var(--so-font);cursor:pointer}
.so-chip[aria-pressed="true"],.so-chip.on{background:var(--so-navy);border-color:var(--so-sel-edge);color:#fff}

/* phone: row actions stay compact, and a wide table scrolls inside its card
   instead of pushing its last column off the screen */
.tablewrap{overflow-x:auto}
@media (max-width:700px){
  .btn-sm{min-height:36px;padding:0 10px}
  th,td{padding-left:10px!important;padding-right:10px!important}
}

/* links that stand alone (footer columns, a table's title cell, the wordmark) get a
   24px target — WCAG 2.5.8's floor. Links inside running sentences are exempt. */
footer a,.foot a,td > a,header > a.brand,.brand{display:inline-block;padding-block:3px;min-height:24px}

/* the tick and done states use the brand green, fixed; selection is the one navy */
.check:has(input:checked){background:var(--so-navy-050);border-color:var(--so-sel-edge)}

.check:has(input:checked){background:var(--so-navy-050);border-color:#c5a55a}
input[type=checkbox],input[type=radio]{accent-color:#c5a55a}

/* ==== Hover glow (2026-09-23): the site's pressable surfaces answer like its buttons ====
   A gold edge with a soft halo and the button's drop shadow. A table row takes a gold
   bar at its leading edge instead of a halo, so a list does not flicker as the mouse
   crosses it. */
:root{--gl-halo:light-dark(rgba(197,165,90,.38),rgba(212,186,122,.34));--gl-drop:light-dark(rgba(11,29,50,.22),rgba(0,0,0,.5))}
.btn:not([disabled]):not(.btn-bad):hover,.so-btn:not([disabled]):hover{
  box-shadow:0 0 0 1px var(--so-btn-edge-hover),0 0 14px var(--gl-halo),0 8px 20px var(--gl-drop)}
.check,.alt,tbody tr{transition:box-shadow 140ms ease,border-color 140ms ease,transform 140ms ease}
.check:hover{border-color:#c5a55a;box-shadow:0 0 0 1px #c5a55a,0 0 14px var(--gl-halo)}
.alt:hover{box-shadow:0 0 0 1px #c5a55a,0 0 14px var(--gl-halo)}
tbody tr:hover{box-shadow:inset 3px 0 0 #c5a55a}