/* app.css — the dashboard's one stylesheet (SPEC-v1-dashboard §2). No CDN, no framework, no
   build step. Served from /static/app.css under `style-src 'self'`, which is also why no page may
   carry a style="" attribute: the CSP allows no inline style at all, so one would be refused.

   Vocabulary the screens use (keep new names in this list):
     layout   .site-header .brand .site-nav .sync-slot(.is-fresh|.is-stale|.is-never|.is-unknown)
              .signout .main .page-title .skip .bare
     blocks   .card(.card--warn|.card--fail) .strip .stat .stat__value .stat__label .empty .notice
              .toolbar .grid-2
     values   .chip(--pass|--fail|--unknown|--local|--notsynced|--draft|--analyst|--provisional)
              .band(--a|--b|--c|--u) .count(--local|--excluded|--notsynced) .muted .mono .num
     tables   table.data  th[data-sort]  td.num  .verdict--fail
     commands pre.cmd + button[data-copy]
     board    .board .lane(.is-over) .lane__head .kcard(.is-dragging)
     reports  iframe.report
   The rule every one of these obeys: unknown, zero, local-only and not-synced look DIFFERENT.
   Unknown is hollow (a border, no fill); zero is an ordinary value; local-only and not-synced
   are grey text chips that can never be mistaken for a count. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #5d6778;
  --line: #d9dee6;
  --accent: #1f5fbf;
  --pass: #1d7a46;
  --pass-bg: #e3f4ea;
  --fail: #b3261e;
  --fail-bg: #fbe7e5;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --unknown: #6b5b95;
  --grey-bg: #eceff3;
  --radius: 6px;
  --gap: 1rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161d;
    --surface: #1a2029;
    --text: #e4e8ee;
    --muted: #9aa4b4;
    --line: #2e3643;
    --accent: #7eb0ff;
    --pass: #6fd49a;
    --pass-bg: #173524;
    --fail: #ff8a80;
    --fail-bg: #3d1a18;
    --warn: #f2c14e;
    --warn-bg: #3a2e10;
    --unknown: #b9a8e8;
    --grey-bg: #262d38;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.45;
}
a { color: var(--accent); }
code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.6rem; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: var(--surface); padding: 0.4rem 0.6rem; z-index: 10; }

/* ------------------------------------------------------------------ header and nav */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand span { font-weight: 400; color: var(--muted); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.site-nav a:hover { background: var(--grey-bg); }
.site-nav a[aria-current="page"] { background: var(--accent); color: var(--surface); }

.sync-slot { margin: 0 0 0 auto; font-size: 0.87rem; color: var(--muted); }
.sync-slot.is-fresh { color: var(--pass); }
.sync-slot.is-stale { color: var(--warn); background: var(--warn-bg); padding: 0.2rem 0.5rem; border-radius: var(--radius); }
.sync-slot.is-never, .sync-slot.is-unknown { color: var(--unknown); }
.signout { margin: 0; }

.main { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }
.page-title { margin-bottom: 1rem; }
.bare .main { max-width: 36rem; padding-top: 3rem; }

/* ------------------------------------------------------------------ blocks */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: var(--gap);
}
.card--warn { border-color: var(--warn); background: var(--warn-bg); }
.card--fail { border-color: var(--fail); }
.strip { display: flex; flex-wrap: wrap; gap: var(--gap); }
.stat { min-width: 8rem; }
.stat__value { display: block; font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat__label { display: block; font-size: 0.85rem; color: var(--muted); }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 1rem; color: var(--muted); }
.notice { font-size: 0.9rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 0.6rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--gap); }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ values */

.chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
  background: var(--grey-bg);
}
.chip--pass { color: var(--pass); background: var(--pass-bg); }
.chip--fail { color: var(--fail); background: var(--fail-bg); }
.chip--unknown { color: var(--unknown); background: transparent; border-color: currentColor; }
.chip--local, .chip--notsynced { color: var(--muted); background: transparent; border-style: dashed; border-color: var(--muted); }
.chip--draft { color: var(--warn); background: var(--warn-bg); }
.chip--analyst { color: var(--accent); background: transparent; border-color: currentColor; }
.chip--provisional { border-style: dashed; border-color: currentColor; }

.band { font-weight: 650; }
.band--a { color: var(--pass); }
.band--b { color: var(--accent); }
.band--c { color: var(--warn); }
.band--u { color: var(--unknown); }

.count { font-variant-numeric: tabular-nums; }
.count--local, .count--excluded, .count--notsynced { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.92rem; }
table.data th, table.data td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { font-weight: 600; color: var(--muted); white-space: nowrap; }
table.data th[data-sort] { cursor: pointer; user-select: none; }
table.data th[aria-sort="ascending"]::after { content: " \25B2"; }
table.data th[aria-sort="descending"]::after { content: " \25BC"; }
table.data tbody tr:hover { background: var(--grey-bg); }
.verdict--fail { color: var(--fail); background: var(--fail-bg); font-weight: 600; }

/* ------------------------------------------------------------------ commands to copy */

pre.cmd {
  margin: 0 0 0.4rem;
  padding: 0.6rem 0.75rem;
  background: var(--grey-bg);
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre;
}

/* ------------------------------------------------------------------ forms */

label { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; color: var(--muted); }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 100%;
}
textarea { width: 100%; min-height: 5rem; }
button, .btn {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--accent); }
.btn--primary, button.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.field { margin-bottom: 0.8rem; }
.field-error { color: var(--fail); font-size: 0.88rem; }

/* ------------------------------------------------------------------ work board */

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap); align-items: start; }
.lane { background: var(--grey-bg); border-radius: var(--radius); padding: 0.6rem; min-height: 8rem; }
.lane.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.lane__head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 0.5rem; }
.kcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  cursor: grab;
}
.kcard.is-dragging { opacity: 0.5; }

/* ------------------------------------------------------------------ reports */

iframe.report { width: 100%; height: 75vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.error-card h1 { font-size: 1.3rem; }

@media (max-width: 640px) {
  .site-header { padding: 0.5rem 0.75rem; }
  .sync-slot { margin-left: 0; width: 100%; }
  .main { padding: 0.75rem; }
}