/* ============================================================================
   JAGTER design system — one shared theme every producer surface imports.
   Decision (Nic, 2026-07-19): the sketched leopard-and-lettering MARK carries all
   the personality; the workbench itself is clean and straight-laced. Warm bushveld
   palette, sand neutrals, bone text, petrol-blue highlight, severity as sacred signal.
   Ruled 2026-07-20 (accent + type review): accent = petrol blue B; tri-face type
   system (Instrument Sans display, IBM Plex Sans UI, IBM Plex Mono at 500 for IOC).
   Dark-first (analysts live in dark UIs); a light override is stubbed for public/print.
   ============================================================================ */

:root{
  /* ground + neutrals — warm bushveld, chosen not defaulted */
  --soil:#1a1210;      /* app ground        */
  --panel:#241a15;     /* raised surface    */
  --panel-2:#160f0d;   /* inset / stage     */
  --line:#4a3529;      /* borders, rules    */
  --sand:#cda36c;      /* warm neutral: secondary text, labels, ghost borders */
  --sand-lt:#dcc19a;   /* lighter sand      */
  --bone:#efe1d2;      /* primary text      */
  --dim:#a08b7c;       /* muted text        */

  /* the one brand highlight — petrol blue (hue 197, clear of the severity band) */
  --accent:#2e93b3;    /* petrol blue       */
  --accent-ink:#041a26;/* text on accent    */

  /* severity — the reserved, sacred signal set. never used decoratively. */
  --sev-crit:#f0564a; --sev-high:#f0913f; --sev-med:#ecc94b; --sev-low:#63c065;
  --sev-ink:#12100c;

  /* type — tri-face system (ruled 2026-07-20): Instrument Sans carries display
     (headings, labels, masthead), IBM Plex Sans carries body/UI, IBM Plex Mono at
     weight 500 carries IOC/code. The tokens name the families now; the @font-face
     block lands at app build. Production SELF-HOSTS the woff2 files, never a CDN.
     Until the fonts ship, the fallback chains render. Both Instrument and Plex cap
     at weight 700, so the theme asks for 700 as its heaviest (what ships is what
     was reviewed). */
  --display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* scale + shape (straight-laced: subtle radius, no wobble) */
  --r:6px; --r-sm:4px;
  --sp:16px;
}

/* light override — warm paper, polished 2026-07-20 (Nic: the feed panel rendered
   too light). Ink tokens deepened and lines firmed so small text clears AA on the
   pale panels; ground and raised panel unchanged so the accent's ruled light
   numbers hold. Character stays warm, dark mode untouched. */
:root[data-theme="light"]{
  --soil:#f3ece3; --panel:#fbf6ef; --panel-2:#eadfcf; --line:#bda78a;
  --sand:#6f4f1d; --sand-lt:#7f5c2b; --bone:#241a12; --dim:#57462f;
  --accent:#1d6b88; --accent-ink:#ffffff; /* nudged from #1f7392 (Nic 2026-07-20): 4.54 on panel-2,
     passes AA at every accent use beside the deepened light tokens; dark petrol #2e93b3 unchanged */
}

/* ---- base ---- */
.jg-body{background:var(--soil);color:var(--bone);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased;}
.jg-mono{font-family:var(--mono);font-weight:500;letter-spacing:-.01em;}
.jg-label{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);}
.jg-h{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0;}
.jg-muted{color:var(--dim);}

/* ---- masthead: the mark carries the brand ----
   The mark pairs with the ground (Nic, 2026-07-20: the sand mark washed out on
   light). Dark contexts use brand/jagter-mark.png (sand #CDA36C on transparent);
   light contexts use brand/jagter-mark-light.png (deep sand #6f4f1d, recolored
   from the pencil master via recolor-mark.js, commit aaf9495). Mechanism: a
   surface includes BOTH imgs with the --on-dark / --on-light classes and the
   theme's data-theme attribute decides which renders. Pure CSS, keeps img
   semantics and alt text; no JS, no content:url() compat risk. Surfaces must not
   set display on these imgs (sizing via height/width only) or they break the swap. */
.jg-mark{display:block;height:auto;} /* legacy single-img class; prefer the pair below */
.jg-mark--on-light{display:none;}
:root[data-theme="light"] .jg-mark--on-dark{display:none;}
:root[data-theme="light"] .jg-mark--on-light{display:inline-block;}
.jg-tag{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);}

/* ---- panels: clean, straight ---- */
.jg-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);}
.jg-stage{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);}
.jg-rule{height:1px;background:var(--line);border:0;}

/* ---- controls ---- */
.jg-btn{border:0;border-radius:var(--r-sm);padding:9px 16px;font:700 12.5px/1 var(--ui);
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.jg-btn--primary{background:var(--accent);color:var(--accent-ink);}
.jg-btn--ghost{background:transparent;border:1.5px solid var(--sand);color:var(--sand);}
/* touch density: the phone-size variant. Base jg-btn stays desktop-dense (~31px);
   any control a thumb hits gets --touch for the 44px floor. */
.jg-btn--touch{min-height:44px;padding:12px 18px;font-size:13px;}
.jg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.jg-input{background:var(--panel-2);border:1px solid var(--line);color:var(--bone);border-radius:var(--r-sm);
  padding:9px 11px;font:13px/1.2 var(--ui);}
.jg-input:focus{outline:none;border-color:var(--accent);}

/* ---- tabs ---- */
.jg-tabs{display:flex;gap:6px;}
.jg-tab{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 0;font-size:12.5px;color:var(--dim);cursor:pointer;text-align:center;}
.jg-tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent);font-weight:600;}

/* ---- status pills ---- */
.jg-pill{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;
  border:1px solid transparent;}
.jg-pill--brand{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.jg-pill--neutral{background:color-mix(in srgb,var(--sand) 15%,transparent);color:var(--sand);
  border-color:color-mix(in srgb,var(--sand) 40%,transparent);}

/* ---- severity: reserved signal set (solid, saturated, unmistakable) ---- */
.jg-sev{font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--r-sm);letter-spacing:.05em;
  text-transform:uppercase;color:var(--sev-ink);}
.jg-sev--crit{background:var(--sev-crit);} .jg-sev--high{background:var(--sev-high);}
.jg-sev--med{background:var(--sev-med);}   .jg-sev--low{background:var(--sev-low);}
.jg-sev-stripe{width:4px;align-self:stretch;background:var(--sev-high);border-radius:2px;}

/* ---- data row (actor / indicator) ---- */
.jg-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel-2);}
.jg-row .slug{font-family:var(--mono);font-weight:500;font-size:10.5px;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;padding:1px 7px;color:var(--sand);}
.jg-num{font-variant-numeric:tabular-nums;color:var(--dim);}

/* ---- code / IOC block ---- */
.jg-code{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--bone);background:var(--soil);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;overflow-x:auto;white-space:pre-line;}