/* stet.css: the one stylesheet both sites load.
   Tokens first, then the handful of components every page shares (nav, card,
   buttons, fields, pills, the process map). A page adds its own rules after
   this file and never redefines a token. Change a token here and every page
   on stetworks.com and app.stetworks.com changes with it.

   The look: blueprint blue, hi-vis tape, chalk, steel; Barlow Condensed for
   headings as signage, Barlow for everything else. Light mode is cool paper. */

:root {
  --blueprint: #0f2342;      /* page background in dark, text in light */
  --blueprint-2: #16305a;    /* raised surface in dark */
  --paper: #eef1f5;          /* cool paper: page background in light */
  --chalk: #ffffff;
  --hivis: #ffb400;          /* the tape: the one loud thing */
  --hivis-ink: #1a1400;
  --steel: #8a96a8;
  --steel-2: #c5cdd8;
  --go: #2fb36b;
  --stop: #ff8f8f;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;

  /* semantic, the names the app pages already use: --ink is the text colour */
  --bg: var(--blueprint); --card: var(--blueprint-2); --ink: var(--chalk); --fg: var(--chalk); --muted: #a9b4c4; --line: rgba(255,255,255,.14);
  --accent: var(--hivis); --accent-ink: var(--hivis-ink); --mark: var(--hivis);
  --warn: #ffd166; --danger: var(--stop); --ok: #5ed08e; --field: rgba(255,255,255,.07);
  --font: var(--body);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--paper); --card: var(--chalk); --ink: var(--blueprint); --fg: var(--blueprint); --muted: #5a6a82; --line: #d2d9e3;
    --accent: var(--blueprint); --accent-ink: var(--chalk); --mark: #b57f00;
    --warn: #8a5a00; --danger: #9b2c2c; --ok: #1f7a46; --field: #eef1f5;
  }
}
:root[data-theme="light"] {
  --bg: var(--paper); --card: var(--chalk); --ink: var(--blueprint); --fg: var(--blueprint); --muted: #5a6a82; --line: #d2d9e3;
  --accent: var(--blueprint); --accent-ink: var(--chalk); --mark: #b57f00;
  --warn: #8a5a00; --danger: #9b2c2c; --ok: #1f7a46; --field: #eef1f5;
}

/* base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
h1 { font-size: 30px; font-weight: 800; } h2 { font-size: 24px; margin-bottom: 8px; } h3 { font-size: 19px; margin: 14px 0 4px; } h4 { font-size: 16px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.meta { font-size: 13px; color: var(--muted); }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; }

/* brand mark: the tape stroke */
.brand { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: inherit; }
.brand i { display: inline-block; width: 13px; height: 24px; background: var(--hivis); transform: skewX(-12deg); }

/* surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.card.ok { border-color: var(--ok); } .card.err { border-color: var(--danger); color: var(--danger); }
.pre { white-space: pre-wrap; font-size: 14px; background: var(--field); border-radius: 8px; padding: 10px 12px; }

/* controls */
label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }
input, textarea, select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { min-height: 120px; resize: vertical; }
button, .btn { font: inherit; font-weight: 600; border: 0; border-radius: 6px; padding: 10px 16px; cursor: pointer; background: var(--accent); color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
button.quiet, .btn.quiet { background: transparent; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
button.quiet:hover, .btn.quiet:hover { color: var(--fg); border-color: var(--fg); }
button.danger { background: transparent; color: var(--danger); padding: 6px 10px; border: 1px solid var(--danger); font-size: 14px; }
button:disabled { opacity: .55; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* tabs */
nav.tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; }
nav.tabs button { background: var(--card); color: var(--fg); border: 1px solid var(--line); white-space: nowrap; padding: 8px 12px; font-weight: 500; }
nav.tabs button[aria-selected=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* lists, pills */
ul.items { list-style: none; margin: 0; padding: 0; }
ul.items > li { padding: 12px 0; border-top: 1px solid var(--line); }
ul.items > li:first-child { border-top: 0; padding-top: 0; }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.pill.state, .pill.won { color: var(--mark); border-color: var(--mark); }
.pill.lost { color: var(--danger); border-color: var(--danger); }

/* the process map: a trade drawing, not a flowchart tool.
   Nodes are drawn by the process-map module; these are the marks. */
.pmap { overflow-x: auto; padding: 4px 0 8px; }
svg.pmap { display: block; max-width: none; font: 13px var(--body); }
svg.pmap .grid line { stroke: var(--line); stroke-width: .5; }
svg.pmap .edge { fill: none; stroke: var(--steel); stroke-width: 1.5; }
svg.pmap .edge.back { stroke: var(--hivis); stroke-dasharray: 5 4; }
svg.pmap .edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
svg.pmap .edge-hit:hover { stroke: color-mix(in srgb, var(--danger) 25%, transparent); }
svg.pmap .node { cursor: pointer; }
svg.pmap .node .box { fill: var(--card); stroke: var(--steel); stroke-width: 1.5; }
svg.pmap .node.assistant .box { stroke-dasharray: 7 4; }          /* the assistant's steps: dashed, like a proposed line */
svg.pmap .node.outside .box, svg.pmap .node.customer .box { stroke-dasharray: 2 3; fill: transparent; }  /* outside hands: drawn in faint */
svg.pmap .node .nm { fill: var(--fg); font: 700 15px var(--display); letter-spacing: .02em; text-transform: uppercase; }
svg.pmap .node .mt, svg.pmap .node .bd { fill: var(--muted); font-size: 11px; }
svg.pmap .node .tag { fill: var(--steel); font: 700 10px var(--display); letter-spacing: .06em; text-transform: uppercase; }
svg.pmap .node .rules { fill: var(--hivis); font: 700 11px var(--display); }
svg.pmap .node.done .box { fill: color-mix(in srgb, var(--go) 18%, var(--card)); stroke: var(--go); }
svg.pmap .node.done .bd { fill: var(--go); }
svg.pmap .node.waiting .box, svg.pmap .node.current .box { stroke: var(--hivis); stroke-width: 3; }
svg.pmap .node.current .box { fill: color-mix(in srgb, var(--hivis) 16%, var(--card)); }
svg.pmap .node.waiting .bd, svg.pmap .node.current .bd { fill: var(--hivis); }
svg.pmap .node.sent_back .box { stroke: var(--hivis); stroke-dasharray: 3 3; }
svg.pmap .node.skipped .box { fill: transparent; stroke-dasharray: 3 3; opacity: .6; }
svg.pmap .node.selected .box { stroke: var(--fg); stroke-width: 2.5; }
svg.pmap .node.connecting .box { stroke: var(--hivis); stroke-width: 2.5; stroke-dasharray: 4 3; }
svg.pmap .node.sub .box { stroke-dasharray: 6 3; }
svg.pmap .node:hover .box, svg.pmap .node:focus .box { stroke: var(--fg); outline: none; }
svg.pmap .gate { fill: var(--card); stroke: var(--hivis); stroke-width: 2; }
svg.pmap .tab rect { fill: var(--card); stroke: var(--hivis); stroke-width: 1; }
svg.pmap .tab text { fill: var(--hivis); font: 700 10px var(--display); letter-spacing: .04em; }
svg.pmap .block rect { fill: none; stroke: var(--line); stroke-width: 1; }
svg.pmap .block text { fill: var(--muted); font: 700 9px var(--display); letter-spacing: .08em; text-transform: uppercase; }
svg.pmap .title { fill: var(--muted); font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; }
@media print { svg.pmap .node .box { fill: #fff !important; stroke: #000 !important; } svg.pmap text { fill: #000 !important; } svg.pmap .edge { stroke: #000 !important; } }