/* LeanGate playground. No build step: plain CSS with theme tokens on :root. */

:root {
  --bg: #f5f6f1;
  --surface: #ffffff;
  --surface-2: #eef0e9;
  --ink: #14170f;
  --ink-2: #434a3c;
  --muted: #646b5c;
  --line: #dadfd2;
  --line-strong: #c3c9b9;
  --accent: #3b7600;
  --accent-ink: #ffffff;
  --accent-soft: #e6f2d8;
  --block: #b8300a;
  --block-bg: #fcebe4;
  --pass: #2b6f16;
  --pass-bg: #e6f3dc;
  --warn: #855400;
  --warn-bg: #fff1d1;
  --info: #2a55c2;
  --info-bg: #e7edfc;
  --add-bg: #e3f4d6;
  --add-ink: #1f5a07;
  --del-bg: #fbe4dc;
  --del-ink: #8f2507;
  --code-bg: #f8f9f5;
  --focus: #2a55c2;
  --shadow: 0 1px 2px rgba(20, 23, 15, .05), 0 4px 16px rgba(20, 23, 15, .05);
  --radius: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d100b;
    --surface: #151912;
    --surface-2: #1c2118;
    --ink: #eef1e7;
    --ink-2: #c4cab9;
    --muted: #9aa28e;
    --line: #2a3125;
    --line-strong: #3a4334;
    --accent: #8fd14f;
    --accent-ink: #0d100b;
    --accent-soft: #1d2a12;
    --block: #ff8466;
    --block-bg: #2d1610;
    --pass: #93d65a;
    --pass-bg: #172410;
    --warn: #f3bd55;
    --warn-bg: #2a2110;
    --info: #94b3ff;
    --info-bg: #161e33;
    --add-bg: #17290d;
    --add-ink: #a8e27a;
    --del-bg: #33150e;
    --del-ink: #ff9f86;
    --code-bg: #10130e;
    --focus: #94b3ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d100b;
  --surface: #151912;
  --surface-2: #1c2118;
  --ink: #eef1e7;
  --ink-2: #c4cab9;
  --muted: #9aa28e;
  --line: #2a3125;
  --line-strong: #3a4334;
  --accent: #8fd14f;
  --accent-ink: #0d100b;
  --accent-soft: #1d2a12;
  --block: #ff8466;
  --block-bg: #2d1610;
  --pass: #93d65a;
  --pass-bg: #172410;
  --warn: #f3bd55;
  --warn-bg: #2a2110;
  --info: #94b3ff;
  --info-bg: #161e33;
  --add-bg: #17290d;
  --add-ink: #a8e27a;
  --del-bg: #33150e;
  --del-ink: #ff9f86;
  --code-bg: #10130e;
  --focus: #94b3ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--info); text-underline-offset: 2px; }
code, pre, kbd, textarea.code-input { font-family: var(--mono); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.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;
}
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

/* -- header ------------------------------------------------------------------------- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mark { width: 28px; height: 28px; fill: var(--accent); stroke: var(--ink); }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.top-links { display: flex; align-items: center; gap: 4px; }
.top-links a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.top-links a:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 480px) { .top-links a { display: none; } }

.icon-btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 9px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

.status { border-top: 1px solid var(--line); background: var(--surface-2); }
.status-row { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.status-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1;
  padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.chip strong { color: var(--ink); font-weight: 600; }
.chip .state { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.chip-live .dot { background: var(--pass); box-shadow: 0 0 0 3px var(--pass-bg); }
.chip-live .state { color: var(--pass); }
.chip-fallback .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.chip-fallback .state { color: var(--warn); }
.chip-down .dot { background: var(--block); }
.chip-info { background: transparent; border-style: dashed; }
.chip-wait .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* -- hero ---------------------------------------------------------------------------- */
.hero { padding: 36px 0 22px; max-width: 860px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(28px, 4.6vw, 44px); letter-spacing: -.025em; font-weight: 750; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { color: var(--ink-2); font-size: 16px; margin: 14px 0 0; max-width: 760px; }

.banner {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: var(--warn-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.banner strong { color: var(--warn); }

/* -- tabs ---------------------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] {
  font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); background: none; border: 0;
  padding: 10px 14px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab-n {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
@media (max-width: 480px) { .tab-long { display: none; } .tabs [role="tab"] { padding: 10px 10px 12px; } }
[aria-selected="true"] .tab-n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* -- layout + cards ------------------------------------------------------------------ */
.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
@media (min-width: 1000px) { .grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
@media (min-width: 720px) { .card { padding: 22px; } }
@media (min-width: 1000px) { .results { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h2 { font-size: 17px; }
.hint { color: var(--muted); font-size: 13.5px; margin: 8px 0 16px; }
.hint strong { color: var(--ink-2); }
.opt { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* -- buttons + inputs ------------------------------------------------------------------ */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; border-radius: 9px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { border-color: var(--line); color: var(--accent); background: var(--accent-soft); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }
.btn-small { font-size: 13px; padding: 5px 10px; min-height: 32px; font-weight: 500; }
.btn-danger-ghost { color: var(--block); border-color: var(--line); }
.btn kbd { font-size: 11px; font-weight: 500; opacity: .8; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
@media (hover: none) { .btn kbd { display: none; } }

input[type="text"], textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--code-bg);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 11px;
}
input[type="text"]:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
textarea.code-input { font-size: 13px; line-height: 1.55; resize: vertical; tab-size: 4; white-space: pre; overflow: auto; }
.field-label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 6px; }
.field-label:first-of-type { margin-top: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.check small { display: block; color: var(--muted); font-size: 12.5px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.form-foot .btn-primary { margin-left: auto; }

/* -- file list + editor ---------------------------------------------------------------- */
.files-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.files-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.files-actions { display: flex; gap: 6px; }
.file-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.file-list .empty-files { color: var(--muted); font-size: 13px; }
.file-btn {
  font: inherit; font-size: 12.5px; font-family: var(--mono); display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.file-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.file-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.file-tag { font-family: var(--font); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; }
.file-tag.change { background: var(--info-bg); color: var(--info); }
.file-tag.baseline { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.editor { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.editor-head { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.editor-head label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.editor-head input { font-family: var(--mono); font-size: 13px; padding: 5px 8px; background: var(--surface); }
.editor textarea { border: 0; border-radius: 0; background: transparent; min-height: 320px; }

details.tests { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
details.tests summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
details.tests[open] summary { margin-bottom: 8px; }

/* -- results --------------------------------------------------------------------------- */
.empty { text-align: center; color: var(--muted); padding: 40px 12px; font-size: 14px; }
.empty-title { font-size: 16px; font-weight: 650; color: var(--ink); margin: 0 0 4px; }
.empty p { margin: 0 auto; max-width: 420px; }
.loading { display: flex; align-items: center; gap: 12px; padding: 30px 8px; color: var(--ink-2); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .chip-wait .dot { animation: none; } }
.error { background: var(--block-bg); color: var(--ink); border-radius: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--block) 35%, transparent); }
.error strong { color: var(--block); }

.verdict { display: flex; align-items: center; gap: 16px; border-radius: 12px; padding: 16px 18px; flex-wrap: wrap; }
.verdict.block { background: var(--block-bg); }
.verdict.pass { background: var(--pass-bg); }
.verdict-word { font-size: 28px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.block .verdict-word { color: var(--block); }
.pass .verdict-word { color: var(--pass); }
.verdict-text { flex: 1; min-width: 200px; font-size: 14px; color: var(--ink-2); }
.verdict-text strong { color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stat-v { font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12px; color: var(--muted); }

.group { margin-top: 22px; }
.group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.group-head h3 { font-size: 15px; }
.group-head .count { font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.group-head .desc { color: var(--muted); font-size: 13px; }

.finding { border: 1px solid var(--line); border-left: 4px solid var(--sev, var(--line-strong)); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); }
.finding.sev-high { --sev: var(--block); }
.finding.sev-med { --sev: var(--warn); }
.finding.sev-low { --sev: var(--line-strong); }
.f-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.loc { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.sym { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 5px; padding: 2px 6px; }
.pill.sev-high { background: var(--block-bg); color: var(--block); }
.pill.sev-med { background: var(--warn-bg); color: var(--warn); }
.pill.sev-low { background: var(--surface-2); color: var(--muted); }
.kept { padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.finding.kept-card { --sev: var(--info); background: var(--surface-2); }
.pill.pill-kept { background: var(--info-bg); color: var(--info); }
.kind-tag { font-size: 12px; color: var(--muted); }
.f-msg { margin: 6px 0 0; font-size: 14px; }
.f-msg code, .f-sug code { font-size: .92em; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.f-sug { margin: 6px 0 0; font-size: 14px; color: var(--pass); display: flex; gap: 6px; }
.f-sug::before { content: "→"; font-weight: 700; }
.snippet { margin-top: 8px; }
.snippet summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
pre.code { margin: 6px 0 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; overflow: auto; }

.trail { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.trail-label { color: var(--muted); margin-right: 4px; }
.hop { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.hop.nemotron { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.hop.fallback { border-style: dashed; color: var(--muted); font-weight: 500; }
.arrow { color: var(--muted); }
.trail .meta { color: var(--muted); margin-left: 6px; }
.act { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; }
.act-auto { background: var(--pass-bg); color: var(--pass); }
.act-review { background: var(--warn-bg); color: var(--warn); }
.act-escalate { background: var(--block-bg); color: var(--block); }

.cites { margin-top: 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.verdict-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; }
.v-supported { background: var(--pass-bg); color: var(--pass); }
.v-contradicted { background: var(--block-bg); color: var(--block); }
.v-unclear { background: var(--surface-2); color: var(--muted); }
.cite { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.cite:hover { border-color: var(--info); }
.cite-host { color: var(--muted); font-size: 12px; }
.f-actions { margin-top: 10px; }

.summary-raw { margin-top: 20px; }
.summary-raw summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* reuse */
.reco { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.reco-word { font-size: 26px; font-weight: 800; line-height: 1; }
.reco.reuse { background: var(--pass-bg); } .reco.reuse .reco-word { color: var(--pass); }
.reco.adapt { background: var(--warn-bg); } .reco.adapt .reco-word { color: var(--warn); }
.reco.write_new { background: var(--info-bg); } .reco.write_new .reco-word { color: var(--info); }
.cand { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.cand-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.meter { height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.sig { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; word-break: break-all; }
.conventions { margin: 14px 0 0; padding-left: 18px; font-size: 14px; }

/* minimize */
.min-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; }
.min-head.ok { background: var(--pass-bg); }
.min-head.no { background: var(--block-bg); }
.min-lines { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.min-lines .arrow { font-weight: 400; margin: 0 6px; }
.badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.badge.ok { background: var(--pass); color: var(--surface); }
.badge.no { background: var(--block); color: var(--surface); }
.badge.neutral { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 20px 0 8px; }
.sandbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.notes { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }

.diff { border: 1px solid var(--line); border-radius: 10px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; background: var(--code-bg); }
.diff table { border-collapse: collapse; width: 100%; }
.diff td { padding: 0 10px; white-space: pre; vertical-align: top; }
.diff td.ln { width: 1%; text-align: right; color: var(--muted); user-select: none; padding: 0 6px; font-size: 11.5px; }
.diff td.sign { width: 1%; padding: 0 4px; user-select: none; }
.diff tr.add { background: var(--add-bg); color: var(--add-ink); }
.diff tr.del { background: var(--del-bg); color: var(--del-ink); }
.diff tr.skip td { background: var(--surface-2); color: var(--muted); font-family: var(--font); font-size: 12px; padding: 3px 10px; }
.diff tr.skip button { font: inherit; color: var(--info); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; }
.diff-empty { padding: 14px; color: var(--muted); font-size: 13px; }

/* -- footer ---------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot-row { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 20px; }

/* -- shared by the live dashboard (live.html) ------------------------------------------------ */
a.loc { text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
a.loc:hover { color: var(--info); border-bottom-color: var(--info); }
.rule-tag { font-family: var(--mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.scope { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.category { margin-top: 26px; }
.category-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 2px solid var(--cat, var(--line-strong)); }
.category-head h2 { font-size: 18px; }
.category-head .count { font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.category-head .desc { color: var(--muted); font-size: 13px; }
.cat-security { --cat: var(--block); }
.cat-error_handling { --cat: var(--warn); }
.cat-bloat { --cat: var(--accent); }
.category .group { margin-top: 14px; }

.brand-sub { color: var(--accent); font-weight: 600; }
.repo-label { margin-left: auto; }
.repo-select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 240px; }
.repo-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.live-main { padding-top: 18px; }
.live-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
@media (min-width: 900px) { .live-grid { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .runs-card { position: sticky; top: 12px; } }
.follow { font-size: 13px; align-items: center; }
.runs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; }
.runs-empty { color: var(--muted); font-size: 13px; }
.run-btn { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left;
  font: inherit; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.run-btn:hover { background: var(--surface-2); }
.run-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.run-gate { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; min-width: 44px; text-align: center; }
.g-pass { background: var(--pass-bg); color: var(--pass); }
.g-block { background: var(--block-bg); color: var(--block); }
.g-reuse { background: var(--info-bg); color: var(--info); }
.run-main { display: flex; flex-direction: column; min-width: 0; }
.run-what { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-detail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pill.pill-nemotron { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.f-origin { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.finding.suggested { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.f-related { margin: 6px 0 0; font-size: 13px; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.intent { display: flex; gap: 6px; align-items: baseline; margin: 0 0 10px; font-size: 14px; }

/* -- mission control: one row per agent (live dashboard) --------------------------------------- */
.agents-card { margin-bottom: 16px; }
.agents-scope { display: inline-flex; gap: 4px; }
.agents-scope button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer; }
.agents-scope button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.agents-wrap { overflow-x: auto; }
.agents { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.agents th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.agents td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.agents td.num, .agents th.num { text-align: right; }
.agents .agent-name { font-weight: 600; }
.agents .sub { color: var(--muted); font-size: 12px; margin-left: 4px; }
.agents .zero { color: var(--muted); }
.agents-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* -- Live: time and cost per run ------------------------------------------------------------------ */
:root {
  --ph-setup: #8b917f; --ph-clients: #8b917f; --ph-index: #a7ad97; --ph-changes: #b39a4a; --ph-static: #3b7600; --ph-missing: #2a55c2;
  --ph-dependencies: #9a5b00; --ph-memory: #7b5bb0; --ph-confirm: #0b7d7d; --ph-gate: #b8300a; --ph-search: #3b7600;
  --ph-decide: #0b7d7d; --ph-other: #8b917f; --cost-line: #b8300a; --ph-reimplementation: #6d4fb0; --ph-learning: #c06a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ph-setup: #6f7764; --ph-clients: #6f7764; --ph-index: #8a9179; --ph-changes: #c9ae5a; --ph-static: #8fd14f; --ph-missing: #7e9cf2;
    --ph-dependencies: #e0a24a; --ph-memory: #b49be0; --ph-confirm: #4fc7c7; --ph-gate: #ff8466; --ph-search: #8fd14f;
    --ph-decide: #4fc7c7; --ph-other: #6f7764; --cost-line: #ff8466; --ph-reimplementation: #b49be0; --ph-learning: #e0a24a;
  }
}
:root[data-theme="dark"] {
  --ph-setup: #6f7764; --ph-clients: #6f7764; --ph-index: #8a9179; --ph-changes: #c9ae5a; --ph-static: #8fd14f; --ph-missing: #7e9cf2;
  --ph-dependencies: #e0a24a; --ph-memory: #b49be0; --ph-confirm: #4fc7c7; --ph-gate: #ff8466; --ph-search: #8fd14f;
  --ph-decide: #4fc7c7; --ph-other: #6f7764; --cost-line: #ff8466; --ph-reimplementation: #b49be0; --ph-learning: #e0a24a;
}

.history-card { margin-bottom: 16px; }
.history-chart { width: 100%; height: auto; display: block; overflow: visible; }
.history-chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.history-chart .grid { stroke: var(--line); stroke-width: 1; }
.history-chart .run-bar { cursor: pointer; }
.history-chart .run-bar:hover rect.seg, .history-chart .run-bar:focus rect.seg { opacity: .8; }
.history-chart .run-bar:focus { outline: none; }
.history-chart .run-bar:focus .hit, .history-chart .run-bar.selected .hit { stroke: var(--ink); stroke-width: 1.5; }
.history-chart .hit { fill: transparent; }
.history-chart .cost-line { fill: none; stroke: var(--cost-line); stroke-width: 2; }
.history-chart .cost-dot { fill: var(--surface); stroke: var(--cost-line); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.swatch.line { height: 3px; border-radius: 2px; background: var(--cost-line); }
.history-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.run-cost { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; background: var(--code-bg); }
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; }
.rc-stats div { min-width: 0; }
.rc-stats dt { font-size: 12px; color: var(--muted); }
.rc-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-stats dd .sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.phase-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.phase-bar span { display: block; height: 100%; min-width: 2px; }
.rc-providers { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rc-providers th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line-strong); }
.rc-providers td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.rc-providers .num { text-align: right; }
.rc-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* -- Live: what LeanGate has learned about the repo ------------------------------------------------ */
.learned-card { margin-bottom: 16px; }
.learned-line { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.learned-list { margin: 0 0 10px; padding-left: 20px; font-size: 13px; color: var(--muted); }
.learned-list li { margin: 2px 0; }
#learned .rc-providers { margin: 10px 0 4px; }
#learned .sub { color: var(--muted); font-size: 12px; }
.learn-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.ls-reliable { background: var(--pass-bg); color: var(--pass); }
.ls-noisy { background: var(--warn-bg); color: var(--warn); }
.ls-learning, .ls-mixed { background: var(--code-bg); color: var(--muted); border: 1px solid var(--line); }