/* ============================================================================
   app.css — AI OS boards dashboard. MOBILE-FIRST: base rules target a narrow
   phone viewport; media queries progressively enhance for wider screens. No
   UA-sniffing. Fluid units, touch-sized targets (>=44px), readable monospace.
   ============================================================================ */
:root {
  --bg: #0f1216; --bg-2: #171b21; --bg-3: #1e242c; --line: #2a323c;
  --fg: #e6ebf1; --fg-dim: #9aa7b6; --fg-mut: #6b7887;
  --accent: #5aa9ff;
  --queued: #7c8798; --running: #e0a13a; --blocked: #e5484d;
  --approval: #b083f0; --unverified: #35b6c9; --verified: #3fb950; --deployed: #2ea043;
  --cancelled: #55606d; --default: #7c8798; --seat: #6e7bd8;
  /* verification-state palette (three honest states) — kept distinct from the amber
     'running' and grey 'queued' tones so the states never read alike:
       pending      = teal (info: has a bar, awaiting a verifier)
       unverifiable = warm taupe + dashed (inert: no bar, cannot be verified)
       verified     = green (done) */
  --vf-pending: #35b6c9; --vf-unverifiable: #b98a5e; --vf-verified: #3fb950;
  --radius: 10px; --tap: 44px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9; --bg-2: #ffffff; --bg-3: #eef1f5; --line: #d6dde5;
    --fg: #1a2029; --fg-dim: #4a5563; --fg-mut: #78848f;
    --cancelled: #9aa5b1;
    --vf-pending: #0e8fa3; --vf-unverifiable: #8a5f30; --vf-verified: #2ea043;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 15px; line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 50; }

/* ---- header ---- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
.brand { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.brand__mark { color: var(--accent); font-size: 1.2em; }
.brand__name { font-size: 1.05rem; }
.brand__phase { color: var(--fg-mut); font-size: .72rem; font-weight: 400; }

.board-switch { display: flex; gap: 6px; }
.board-pill {
  min-height: var(--tap); padding: 8px 16px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--fg-dim); border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.board-pill.is-active { background: var(--accent); color: #06101f; border-color: var(--accent); }

.tabs { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; min-height: var(--tap); min-width: 92px; padding: 10px 14px;
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--fg-dim); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.tab.is-active { color: var(--fg); border-bottom-color: var(--accent); }

/* ---- layout ---- */
.page { max-width: 1100px; margin: 0 auto; padding: 12px; }
.meta-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 2px 12px; color: var(--fg-dim); font-size: .82rem; }
.meta strong { color: var(--fg); }
.meta--hidden { color: var(--running); }
.meta--time { margin-left: auto; color: var(--fg-mut); }
.meta--error { color: var(--blocked); }

.sec { margin: 0 0 20px; }
.sec__title { font-size: .95rem; margin: 6px 0 10px; color: var(--fg); border-left: 3px solid var(--accent); padding-left: 8px; }
.muted { color: var(--fg-mut); font-size: .85rem; padding: 4px 2px; }

.state { padding: 24px 16px; text-align: center; color: var(--fg-dim); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-2); }
.state--error { color: var(--blocked); border-color: var(--blocked); }

/* ---- chips ---- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.chip--queued { background: color-mix(in srgb, var(--queued) 22%, transparent); color: var(--queued); }
.chip--running { background: color-mix(in srgb, var(--running) 22%, transparent); color: var(--running); }
.chip--blocked { background: color-mix(in srgb, var(--blocked) 22%, transparent); color: var(--blocked); }
.chip--approval { background: color-mix(in srgb, var(--approval) 22%, transparent); color: var(--approval); }
.chip--unverified { background: color-mix(in srgb, var(--unverified) 22%, transparent); color: var(--unverified); }
.chip--verified { background: color-mix(in srgb, var(--verified) 22%, transparent); color: var(--verified); }
.chip--deployed { background: color-mix(in srgb, var(--deployed) 26%, transparent); color: var(--deployed); }
.chip--cancelled { background: color-mix(in srgb, var(--cancelled) 22%, transparent); color: var(--cancelled); }
.chip--default { background: color-mix(in srgb, var(--default) 22%, transparent); color: var(--default); }
.chip--seat { background: color-mix(in srgb, var(--seat) 22%, transparent); color: var(--seat); }
.chip--released { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* ---- verification-state badges (the honest three-state marker) ---- */
.vbadge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.vbadge__mark { font-size: .82em; }
.vbadge--pending { background: color-mix(in srgb, var(--vf-pending) 20%, transparent); color: var(--vf-pending); border-color: color-mix(in srgb, var(--vf-pending) 45%, transparent); }
.vbadge--unverifiable { background: color-mix(in srgb, var(--vf-unverifiable) 18%, transparent); color: var(--vf-unverifiable); border: 1px dashed color-mix(in srgb, var(--vf-unverifiable) 60%, transparent); }
.vbadge--verified { background: color-mix(in srgb, var(--vf-verified) 20%, transparent); color: var(--vf-verified); border-color: color-mix(in srgb, var(--vf-verified) 45%, transparent); }

/* legend: swatch + count, wraps on a phone */
.vlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin: 0 0 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.vlegend__lead { color: var(--fg-dim); font-size: .8rem; font-weight: 600; }
.vlegend__item { display: inline-flex; align-items: center; gap: 6px; }
.vlegend__n { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--fg); }

/* row left-accent per verification state so each state is distinct even mid-scroll */
.row--vf-pending { border-left-color: var(--vf-pending); }
.row--vf-unverifiable { border-left-color: var(--vf-unverifiable); border-left-style: dashed; }
.row--vf-verified { border-left-color: var(--vf-verified); }

/* ---- project cards / tree ---- */
.project { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 10px; overflow: hidden; }
.project__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; min-height: var(--tap); cursor: pointer; list-style: none; }
.project__summary::-webkit-details-marker { display: none; }
.project__summary::before { content: "▸"; color: var(--fg-mut); margin-right: 2px; }
.project[open] .project__summary::before { content: "▾"; }
.project__name { font-weight: 600; font-family: var(--mono); font-size: .86rem; word-break: break-word; flex: 1 1 auto; }
.project__meta { color: var(--fg-dim); font-size: .78rem; }
.progress { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 220px; height: 18px; background: var(--bg-3); border-radius: 999px; overflow: hidden; flex: 1 1 120px; }
.progress__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--verified); }
.progress__pct { position: relative; margin: 0 auto; font-size: .68rem; font-weight: 700; color: var(--fg); mix-blend-mode: difference; }
.project__tree { padding: 4px 10px 12px; overflow-x: auto; }

.node { border-left: 3px solid var(--default); padding: 8px 10px; margin: 6px 0; background: var(--bg-3); border-radius: 0 8px 8px 0; }
.node--queued { border-left-color: var(--queued); }
.node--running { border-left-color: var(--running); }
.node--blocked { border-left-color: var(--blocked); }
.node--approval { border-left-color: var(--approval); }
.node--unverified { border-left-color: var(--unverified); }
.node--verified { border-left-color: var(--verified); }
.node--deployed { border-left-color: var(--deployed); }
.node--cancelled { border-left-color: var(--cancelled); opacity: .72; }
.node__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.node__id { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.node__title { margin: 4px 0 0; font-size: .88rem; word-break: break-word; }
.node--cancelled .node__title { text-decoration: line-through; color: var(--fg-mut); }
.node__edges { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.node__children { margin: 6px 0 0 12px; border-left: 1px dashed var(--line); padding-left: 8px; }

.edge { font-family: var(--mono); font-size: .68rem; padding: 1px 6px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); color: var(--fg-dim); }
.edge--after { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.edge--onfail { color: var(--blocked); border-color: color-mix(in srgb, var(--blocked) 40%, var(--line)); }
.edge--cycles { color: var(--running); }

/* ---- rows (queue / verification) ---- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; background: var(--bg-2); margin-bottom: 6px; }
.row--queued { border-left-color: var(--queued); }
.row--running { border-left-color: var(--running); }
.row--blocked { border-left-color: var(--blocked); }
.row--approval { border-left-color: var(--approval); }
.row--unverified { border-left-color: var(--unverified); }
.row--verified { border-left-color: var(--verified); }
.row--deployed { border-left-color: var(--deployed); }
.row--cancelled { border-left-color: var(--cancelled); opacity: .72; }
.row__id { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.row__title { flex: 1 1 200px; font-size: .86rem; word-break: break-word; }
.row__edges { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }

/* ---- dependency list + graph ---- */
.dep-legend { color: var(--fg-dim); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.graph-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin: 10px 0; padding: 8px; }
.graph { display: block; max-width: none; }
.glink { stroke: var(--accent); stroke-width: 1.4; fill: none; opacity: .7; }
.glink--onfail { stroke: var(--blocked); stroke-dasharray: 4 3; }
.marker--after { fill: var(--accent); }
.marker--onfail { fill: var(--blocked); }
.gnode { fill: var(--bg-3); stroke: var(--default); stroke-width: 1.4; }
.gnode--queued { stroke: var(--queued); } .gnode--running { stroke: var(--running); }
.gnode--blocked { stroke: var(--blocked); } .gnode--approval { stroke: var(--approval); }
.gnode--unverified { stroke: var(--unverified); } .gnode--verified { stroke: var(--verified); }
.gnode--deployed { stroke: var(--deployed); } .gnode--cancelled { stroke: var(--cancelled); }
.gnode__t { fill: var(--fg); font-family: var(--mono); font-size: 12px; }

.deps { list-style: none; margin: 8px 0 0; padding: 0; }
.dep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.dep code { font-family: var(--mono); color: var(--accent); }
.dep__arrow { color: var(--fg-mut); }
.dep--onfail .dep__arrow { color: var(--blocked); }
.dep__kind { color: var(--fg-mut); font-size: .72rem; }
.dep__title { color: var(--fg-dim); flex: 1 1 100%; }

.site-footer { max-width: 1100px; margin: 12px auto; padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); color: var(--fg-mut); font-size: .76rem; border-top: 1px solid var(--line); }

/* ---- wider screens ---- */
@media (min-width: 680px) {
  body { font-size: 16px; }
  .brand__name { font-size: 1.15rem; }
  .dep__title { flex: 1 1 auto; }
  .row__edges { width: auto; }
}
@media (min-width: 980px) {
  .page { padding: 20px; }
  .project__name { font-size: .92rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .progress__bar { transition: width .4s ease; }
}