/* Concept-scheme views (issue 057). Reads the engineering token set declared in
   eng.css — the app's --wa-* sheet is not loaded here, and mixing the two would
   give this page two sources of truth for one colour.

   The three verdicts get one colour each and use it consistently across all
   three views, so a concept looks the same whichever way you are reading it:
   change = amber (a word is wrong), decide = blue (a person must answer),
   keep = green (nothing to do). */

:root{
  --v-change:#b45309; --v-change-bg:#fdf1e3; --v-change-line:#e0a445;
  --v-decide:#2563eb; --v-decide-bg:#e8effc; --v-decide-line:#b9cdf2;
  --v-keep:#1f7a4d;   --v-keep-bg:#e9f9ef;   --v-keep-line:#a9dcc0;
}

/* ── view + scheme pickers ─────────────────────────────────────────────── */
.viewpick{display:flex;gap:6px;margin:18px 0 10px;flex-wrap:wrap}
.viewpick button{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:7px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted)}
.viewpick button:hover{border-color:var(--accent-2);color:var(--accent-2)}
.viewpick button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.filters{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.filters button{font:inherit;font-size:.78rem;cursor:pointer;padding:4px 11px;
  border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted)}
.filters button:hover{border-color:var(--accent-2);color:var(--accent-2)}
.filters button.on{background:var(--paper);border-color:var(--accent-2);
  color:var(--accent-2);font-weight:700}

/* ── cards ─────────────────────────────────────────────────────────────── */
.scheme{margin-bottom:34px}
.scheme-h{font-size:1.1rem;margin-bottom:4px}
.scheme-n{color:var(--muted);font-size:.92rem;margin-bottom:16px;max-width:760px}
.concept{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.concept.v-change{border-left-color:var(--v-change-line)}
.concept.v-decide{border-left-color:var(--v-decide-line)}
.concept.v-keep{border-left-color:var(--v-keep-line)}
.concept header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.cid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;
  font-weight:700;color:var(--navy)}
.verdict{font-size:.62rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor}
.verdict.v-change{color:var(--v-change);background:var(--v-change-bg)}
.verdict.v-decide{color:var(--v-decide);background:var(--v-decide-bg)}
.verdict.v-keep{color:var(--v-keep);background:var(--v-keep-bg)}
.finding{font-size:.68rem;font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--muted);border-bottom:1px dotted var(--muted);cursor:help}
.def{font-size:.98rem;margin-bottom:8px}
.scope{font-size:.88rem;color:var(--muted);margin-bottom:12px}
.scope span{font-size:.62rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--accent-2);margin-right:6px}

.labels{background:var(--mist);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.labels.proposed{background:var(--v-change-bg);border:1px solid var(--v-change-line)}
.labels-h{font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.labels-h code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  letter-spacing:0;text-transform:none;font-weight:600}
.labgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 14px}
.lab{display:flex;align-items:baseline;gap:8px;font-size:.9rem}
.lab .lc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;color:var(--muted);
  white-space:nowrap}
.lab .lv{font-weight:600}
.lab.none .lv{color:var(--muted);font-weight:400}
.why{font-size:.9rem;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.rels{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rel{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;color:var(--muted);
  background:var(--mist);border-radius:999px;padding:2px 9px}

/* ── matrix ────────────────────────────────────────────────────────────── */
/* The table is the one thing on this page that genuinely needs to be wider than
   a phone, so it scrolls inside its own box rather than pushing the page. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper)}
table.matrix{border-collapse:collapse;width:100%;font-size:.88rem;min-width:720px}
table.matrix th,table.matrix td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);vertical-align:top}
table.matrix thead th{font-size:.7rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);background:var(--mist);position:sticky;top:0}
/* eng.css paints every th navy — right for its data tables, wrong here: this
   column is a row LABEL sitting beside cells that are tinted by verdict, and a
   navy block fights that tint instead of belonging to it. */
table.matrix tbody th{white-space:nowrap;background:var(--paper);color:var(--ink);
  font-weight:400;border-right:1px solid var(--line)}
table.matrix tbody th code{font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.86rem;color:var(--navy);margin-right:7px;font-weight:700}
table.matrix tr.v-change th{background:var(--v-change-bg)}
table.matrix tr.v-decide th{background:var(--v-decide-bg)}
table.matrix tr.v-change td{background:var(--v-change-bg)}
table.matrix tr.v-decide td{background:var(--v-decide-bg)}
table.matrix td .none{color:var(--muted)}
table.matrix td .prop{display:block;font-size:.82rem;color:var(--v-change);font-weight:700;
  margin-top:2px}

/* ── graph ─────────────────────────────────────────────────────────────── */
.graphwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:8px}
.graphwrap svg{display:block}
.graphwrap .col-h{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  fill:var(--muted);text-anchor:middle}
.graphwrap .e-h{stroke:var(--muted);stroke-width:1.4;opacity:.55;fill:none}
/* fill:none matters: a related edge between two nodes on the same row is a
   <path> arc, and an unfilled path would otherwise be painted as a solid
   blue lens under the row. */
.graphwrap .e-r{stroke:var(--accent-2);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5;fill:none}
.graphwrap .n rect{fill:var(--mist);stroke:var(--line);stroke-width:1}
.graphwrap .n.v-change rect{fill:var(--v-change-bg);stroke:var(--v-change-line)}
.graphwrap .n.v-decide rect{fill:var(--v-decide-bg);stroke:var(--v-decide-line)}
.graphwrap .n.v-keep rect{fill:var(--v-keep-bg);stroke:var(--v-keep-line)}
.graphwrap .n text{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  fill:var(--ink);text-anchor:middle}

.tnote{font-size:.86rem;color:var(--muted);margin-top:12px;max-width:820px}
.tnote .key-h,.tnote .key-r{display:inline-block;width:22px;height:0;vertical-align:middle;
  margin-right:3px}
.tnote .key-h{border-top:1.6px solid var(--muted)}
.tnote .key-r{border-top:1.6px dashed var(--accent-2)}

ul.plain{margin:0;padding-left:20px;max-width:820px}
ul.plain li{margin-bottom:9px;font-size:.95rem}

@media (max-width:620px){
  .concept{padding:15px 16px}
  .labgrid{grid-template-columns:1fr}
}