/* csen.css - the CSEN design system. ONE canonical copy (web/csen.css);
   portal/webui/landing consume it via committed symlinks + deploy --copy-links.
   Philosophy: color-first hierarchy (the palette below does ALL the work -
   swap this token block and the whole estate rebrands; no color literals may
   appear outside it), restraint over decoration (no gradients, no animations;
   1px borders, subtle background shifts, whitespace), text-driven hierarchy
   (size/weight/color), semantic spacing (one scale, sections inherit rhythm).
   Layer order at every consumer: csen.css -> app style.css -> page <style>.
   Keep selectors here low-specificity, never !important - later layers must
   win by document order alone. Reference: web/styleguide.html. */

:root {
  color-scheme: dark;

  /* palette - near-black establishes depth, bone reads, burnt gold flags
     every action, ash is visual rest, blood is danger. */
  --bg:       #141417;   /* page */
  --bg-deep:  #0c0c0e;   /* recessed wells (log panels, previews) */
  --box:      #1c1c20;   /* raised surface: nav, cards */
  --box-2:    #222227;   /* second lift: inputs, hover rows, badges */
  --line:     #2a2a30;   /* the 1px structural border */
  --bone:     #f2efe9;   /* primary text */
  --ash:      #8a857c;   /* muted text, labels */
  --gold:     #e08b1f;   /* the action color: links, buttons, accents */
  --gold-ink: #1a1206;   /* text on gold fills */
  --blood:    #c8452e;   /* danger fills/borders */
  --ok:       #7fd18b;   /* success text */
  --bad:      #e07a7a;   /* error text (blood is too dark as text on dark) */
  --warn:     #e0b34d;   /* caution text/borders */

  /* fixed-alpha tints (washes for hovers/zebra, dim lines for sub-rules) */
  --gold-dim:   #e08b1f40;
  --gold-wash:  #e08b1f14;
  --blood-wash: #c8452e22;
  --ash-line:   #8a857c33;
  --bone-wash:  #f2efe906;

  /* type - system stack, no webfonts. Hierarchy = size + weight + color. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.2rem;

  /* spacing scale - sections breathe with --s7, cards pad --s5, forms gap
     --s3. New content dropped on the scale inherits the rhythm. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 40px; --s7: 64px;

  /* shape + measure */
  --r: 8px;
  --r-sm: 4px;
  --w-page: 960px;   /* default content column */
  --w-wide: 1200px;  /* table-dense admin pages */
  --w-text: 65ch;    /* prose */
}

/* base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--bone);
       font: 16px/1.6 var(--font-sans); }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); margin-top: var(--s6); }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 1px; }

/* nav - quiet bar, gold brand, bone links that turn gold on hover -------- */
nav { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
      padding: var(--s3) var(--s4);
      background: var(--box); border-bottom: 1px solid var(--line); }
nav strong { color: var(--gold); text-transform: uppercase;
             letter-spacing: .08em; }
nav a { color: var(--bone); font-size: var(--text-sm); }
nav a:hover { color: var(--gold); text-decoration: none; }
.spacer { flex: 1; }

main { padding: var(--s5) var(--s4) var(--s7);
       max-width: var(--w-page); margin: 0 auto; }

/* tables - eyebrow headers, 1px rules, hover = one surface shift --------- */
table { border-collapse: collapse; width: 100%; margin: var(--s2) 0 var(--s5); }
th, td { text-align: left; padding: .35rem .6rem;
         border-bottom: 1px solid var(--line); }
th { color: var(--ash); font-size: var(--text-xs); font-weight: 600;
     text-transform: uppercase; letter-spacing: .08em; }
tr:hover td { background: var(--box-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* forms + buttons - gold marks the actionable ----------------------------- */
input, select, textarea, button {
  background: var(--box-2); color: inherit; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .35rem .55rem; }
textarea { font-family: inherit; }
button { cursor: pointer; }
button:hover { border-color: var(--gold); }
form.inline { display: inline; margin: 0; }
.btn-primary { background: var(--gold); border-color: var(--gold);
               color: var(--gold-ink); font-weight: 700;
               padding: .5rem 1.1rem; text-decoration: none; }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.danger { border-color: var(--blood); color: var(--bad); }
.danger:hover { background: var(--blood-wash); border-color: var(--blood); }

/* text roles -------------------------------------------------------------- */
.muted { color: var(--ash); font-size: .9em; }
.ok   { color: var(--ok); }
.bad  { color: var(--bad); font-weight: 600; }
.eyebrow { color: var(--ash); font-size: var(--text-xs); font-weight: 600;
           text-transform: uppercase; letter-spacing: .08em; }

/* badges + notices - flat surface, colored 1px border, bone text ---------- */
.badge { background: var(--box-2); border: 1px solid var(--line);
         border-radius: var(--r-sm); padding: .05rem .45rem;
         font-size: .85em; margin-right: .2rem; }
.flash, .flash-ok, .warn { background: var(--box); border-radius: var(--r-sm);
         padding: .5rem 1rem; margin: var(--s2) 0; }
.flash    { border: 1px solid var(--blood); }
.flash-ok { border: 1px solid var(--ok); }
.warn     { border: 1px solid var(--warn); }

/* card - THE surface primitive. Flat box, 1px line, one radius. ----------- */
.card { background: var(--box); border: 1px solid var(--line);
        border-radius: var(--r); padding: var(--s4) var(--s5);
        color: var(--bone); max-width: 560px; margin: var(--s6) auto; }
.card h1 { color: var(--gold); margin-top: 0; }
.card.roomy { max-width: 760px; padding: var(--s5) var(--s6);
              margin: var(--s5) auto; }
.card.roomy th, .card.roomy td { padding: .45rem .7rem; }
.card.roomy input[type=email] { min-width: 320px; }
.card.wide, .card.wide.roomy { max-width: 900px; }

/* layout utilities --------------------------------------------------------- */
.grid { display: grid; gap: .25rem .8rem;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.scroll-x { overflow-x: auto; }

/* section - the modular rhythm unit for landing-style pages. Sections stack
   with zero extra math; anchor nav is just in-page #id links in nav. ------- */
.section { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section > .eyebrow { display: block; margin-bottom: var(--s2); }

/* utilities - small composable helpers so new pages assemble from existing
   classes instead of bespoke rules (2026-09-06, shop catalog work). Token
   palette only, low specificity, no !important. ------------------------------ */
.flex { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--s2); }
.between { justify-content: space-between; }
.right { margin-left: auto; }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.nowrap { white-space: nowrap; }
.sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.card.full { max-width: none; }
input.compact, select.compact { padding: .15rem .4rem; font-size: var(--text-sm); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills a, .pills label { background: var(--box-2); border: 1px solid var(--line); border-radius: var(--r-sm);
                         padding: .2rem .7rem; font-size: var(--text-sm); color: var(--bone); cursor: pointer; }
.pills a:hover, .pills label:hover { border-color: var(--gold); text-decoration: none; }
.pills a.active, .pills label:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); color: var(--gold); }
.pills input { position: absolute; opacity: 0; width: 0; height: 0; }