/* GLWA prototypes — shared base: tokens, status encoding, controls.
   Status is encoded FOUR redundant ways so colour is never the only signal:
     1. text code   GO / CAU / NO-GO
     2. glyph shape ● circle, ▲ triangle, ■ square, ○ ring
     3. fill pattern (diagonal hatch for caution, dense cross-hatch for no-go)
     4. hue
*/

:root {
  --bg: #0f1216;
  --bg-2: #161b22;
  --bg-3: #1c232c;
  --line: #2c3542;
  --line-soft: #232b35;
  --txt: #e6edf3;
  --txt-2: #a9b6c4;
  --txt-3: #6f7d8c;

  --go: #2f9e5e;
  --go-ink: #7fe0a5;
  --go-bg: #12301f;
  --cau: #c99206;
  --cau-ink: #ffd166;
  --cau-bg: #33270a;
  --no: #cf3b3b;
  --no-ink: #ff9b9b;
  --no-bg: #3a1414;
  --nd: #59636e;
  --nd-ink: #9aa5b0;
  --nd-bg: #1e242b;

  --accent: #3d82f6;
  --r: 6px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* ---------- prototype banner (mockup only, not part of the design) ---------- */
.proto-bar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #1b1206; border-bottom: 1px solid #4a3308;
  padding: 6px 12px; font-size: 12px; color: #f0c675;
}
.proto-bar b { color: #ffdb9b; }
.proto-bar a { color: #ffdb9b; }
.proto-bar .spacer { margin-left: auto; }
.proto-bar select, .proto-bar button {
  background: #241804; color: #f0c675; border: 1px solid #4a3308;
  border-radius: 4px; padding: 3px 7px; font: inherit;
}

/* ---------- status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px 2px 5px; border-radius: 4px;
  font: 700 11px/1 var(--mono); letter-spacing: .04em;
  border: 1px solid currentColor; white-space: nowrap;
}
.pill-glyph { font-size: 10px; }
.pill.s-go     { color: var(--go-ink);  background: var(--go-bg); }
.pill.s-caution{ color: var(--cau-ink); background: var(--cau-bg); }
.pill.s-nogo   { color: var(--no-ink);  background: var(--no-bg); }
.pill.s-nodata { color: var(--nd-ink);  background: var(--nd-bg); }

.pill.lg { font-size: 13px; padding: 4px 10px 4px 8px; }
.pill.sm { font-size: 10px; padding: 1px 5px 1px 4px; }

/* pattern fills — the redundant, non-colour channel for surfaces */
.fill-go      { background: var(--go-bg); }
.fill-caution {
  background-color: var(--cau-bg);
  background-image: repeating-linear-gradient(45deg,
    rgba(255,209,102,.14) 0 3px, transparent 3px 8px);
}
.fill-nogo {
  background-color: var(--no-bg);
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,155,155,.16) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,155,155,.16) 0 2px, transparent 2px 6px);
}
.fill-nodata {
  background-color: var(--nd-bg);
  background-image: repeating-linear-gradient(90deg,
    rgba(154,165,176,.12) 0 1px, transparent 1px 7px);
}

/* left-edge weight: another non-colour cue (thin=go, medium=caution, thick=no-go) */
.edge-go      { border-left: 2px solid var(--go); }
.edge-caution { border-left: 4px solid var(--cau); }
.edge-nogo    { border-left: 7px solid var(--no); }
.edge-nodata  { border-left: 2px dotted var(--nd); }

/* ---------- controls (always-visible operational row) ---------- */
.ctrl-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.ctrl { display: flex; align-items: center; gap: 6px; }
.ctrl > label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
select, input[type=text], input[type=number], textarea {
  background: var(--bg-3); color: var(--txt); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 7px; font: 13px var(--sans);
}
button {
  background: var(--bg-3); color: var(--txt); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 10px; font: 13px var(--sans); cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 5px 9px; font-size: 12px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed=true] { background: var(--accent); color: #fff; font-weight: 600; }
.status-txt { font: 11px var(--mono); color: var(--txt-3); }

/* ---------- advanced panel (progressive disclosure) ---------- */
details.adv { border-top: 1px solid var(--line); background: var(--bg-2); }
details.adv > summary {
  cursor: pointer; padding: 7px 14px; font-size: 12px; color: var(--txt-2);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: '\25B8'; color: var(--txt-3); }
details.adv[open] > summary::before { content: '\25BE'; }
details.adv > summary:hover { color: var(--txt); }
.adv-body { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); }
.adv-group { margin-top: 12px; }
.adv-group h4 {
  margin: 0 0 7px; font: 700 11px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
}

/* threshold cards (unchanged semantics, restyled) */
.limit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; }
.limit-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 9px; }
.limit-card h5 { margin: 0 0 5px; font: 700 12px var(--sans); }
.limit-card div { font: 11px/1.5 var(--mono); color: var(--txt-2); }
.limit-card .lg-go  { color: var(--go-ink); }
.limit-card .lg-cau { color: var(--cau-ink); }
.limit-card .lg-no  { color: var(--no-ink); }

.thr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.thr-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 10px; }
.thr-card h5 { margin: 0 0 7px; font: 700 12px var(--sans); }
.thr-field { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.thr-field label { font-size: 11px; color: var(--txt-2); }
.thr-field input { width: 74px; text-align: right; font: 12px var(--mono); }

/* ---------- legend ---------- */
.legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--line);
  background: var(--bg-2); font-size: 11px; color: var(--txt-2);
}
.legend-item { display: flex; align-items: center; gap: 6px; }

/* ---------- misc ---------- */
.mono { font-family: var(--mono); }
.muted { color: var(--txt-3); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); }
.divergence {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px var(--mono); color: #d9a6ff;
  border: 1px dashed #7a4fa8; border-radius: 3px; padding: 1px 4px;
}
.src-tag { font: 10px var(--mono); color: var(--txt-3); }