/* ============================================================================
   app.css — the ONE shared design system for the whole platform.
   Every page links this FIRST, then adds only its own page-specific rules.

   BRAND (2026): black · white · red. The accent (crimson) is CHROME only —
   logo, primary actions, active tab, links. Status stays green/amber/red-orange
   so the brand red never gets confused with "something's wrong".
   Variable NAMES are kept stable (older pages reference --leaf/--gold/--bg/etc.)
   so nothing breaks; only their VALUES moved to the new brand.
   ============================================================================ */

:root{
  /* surfaces + text (near-black, red-neutral bias) */
  --ground:#100e0f; --panel:#181518; --panel2:#211d21; --input:#0f0d0e; --bg:#0f0d0e;
  --ink:#f4f0f1; --muted:#9c949a; --faint:#6b646a; --line:#2c272c; --line-2:#3a343a;
  /* brand — crimson accent (was --leaf; kept as an alias so old markup goes red) */
  --accent:#f23a54; --accent-deep:#a81c42; --accent-glow:rgba(242,58,84,.13);
  /* old theme's secondary brand accent (gold) now points at the brand red, so every
     page's accent usage (selected states, spinners, link hovers) harmonizes. Real
     caution/warning uses --amber, which is separate. */
  --leaf:var(--green); --gold:var(--accent);
  /* semantic — ONE hex per meaning (old per-page aliases point here) */
  --green:#33b27c; --amber:#e3a73c; --red:#ee5540; --orange:#e3a73c; --error:#ee5540;
  /* caution tint, same shape as --accent-glow: a warning panel that follows the
     theme instead of hardcoding one theme's amber into a page. */
  --amber-glow:rgba(227,167,60,.09); --amber-line:rgba(227,167,60,.35);
  /* persona-lane aliases kept */
  --push:var(--red); --pull:var(--green); --anx:var(--amber); --habit:#8a877b;
  /* type — geometric display (headings), system sans (UI), mono (data) */
  --serif:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --display:var(--serif);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","Segoe UI Mono",Consolas,monospace;
}
/* Light theme — only when a page explicitly opts in via the toggle (data-theme).
   No prefers-color-scheme flip, so not-yet-converted pages always stay dark/safe. */
:root[data-theme="light"]{
  --ground:#f5f8f4; --panel:#ffffff; --panel2:#f1f3f0; --input:#ffffff; --bg:#f6f7f4;
  --ink:#1a1618; --muted:#5c5660; --faint:#948e98; --line:#e7e2e6; --line-2:#d9d3d9;
  --accent:#d8213f; --accent-deep:#a81c42; --accent-glow:rgba(216,33,63,.09);
  --leaf:var(--green); --gold:var(--accent);
  --green:#1e9a64; --amber:#b3811e; --red:#d24327; --orange:#b3811e; --error:#d24327;
  --amber-glow:rgba(179,129,30,.08); --amber-line:rgba(179,129,30,.32);
  --push:var(--red); --pull:var(--green); --anx:var(--amber); --habit:#7a7580;
}
:root[data-theme="light"] body{background:var(--ground)}

/* Kill every transition for the two frames the theme swap takes (shell.js adds and
   removes this class). A property mid-transition whose value comes from a CSS
   variable does NOT repaint when only the variable changes — which left every
   `transition:border-color` element wearing the previous theme's border. Scoped to
   the swap so hover animations are untouched. */
:root.theme-swap,:root.theme-swap *,:root.theme-swap *::before,:root.theme-swap *::after{
  transition:none!important}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent-glow)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* --- header + nav (nav.js injects the brand lockup + fills [data-nav]) -------- */
header{padding:12px 24px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;
  background:rgba(16,14,15,.86);backdrop-filter:saturate(1.4) blur(8px);z-index:5}
header h1{font-family:var(--display);font-size:16px;margin:0;font-weight:800;letter-spacing:-.01em}
.brandlock{display:flex;align-items:center;gap:9px;text-decoration:none;padding-right:4px;margin-right:2px}
.brandlock img{width:27px;height:27px;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(242,58,84,.28))}
.brandlock svg{height:17px;width:auto;color:var(--ink)}
.tabs{display:flex;gap:5px;flex-wrap:wrap}
.tab{font-size:12.5px;padding:6px 12px;border-radius:9px;border:1px solid transparent;
  color:var(--muted);text-decoration:none;cursor:pointer;background:transparent;font-weight:500}
.tab:hover{color:var(--ink);background:var(--panel2)}
.tab.active{background:var(--panel2);color:var(--ink);border-color:var(--line);font-weight:600;position:relative}
.tab.active::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--accent)}
.tab.soon{opacity:.4;pointer-events:none}
.tag{color:var(--muted);font-size:12px;font-family:var(--mono)}
.spacer{flex:1}

/* --- form controls ----------------------------------------------------------- */
select,button,input,textarea{font-size:14px;font-family:var(--sans)}
select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font-weight:600}
select:hover{border-color:var(--line-2)}
input,textarea{background:var(--input);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 11px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
button{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:600}
button:hover{border-color:var(--line-2)}
button.primary{background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;
  border:none;box-shadow:0 8px 20px -12px var(--accent)}
button.primary:hover{filter:brightness(1.06)}
button.danger{color:var(--red);border-color:rgba(238,85,64,.4);background:transparent}
button.mini,.mini{font-size:12px;padding:5px 10px}
button.mini.go,.mini.go{background:var(--accent-glow);color:var(--accent);
  border-color:rgba(242,58,84,.4)}
button:disabled{opacity:.5;cursor:default}

/* --- layout ------------------------------------------------------------------ */
.wrap{max-width:900px;margin:0 auto;padding:24px}
#status{color:var(--muted);font-size:13px;margin:0 2px 12px;min-height:18px}
.err,.error-line{color:var(--error)}

/* --- shared components ------------------------------------------------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px}
.empty{color:var(--faint);font-style:italic}
.empty-card{color:var(--faint);font-style:italic;border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;background:var(--panel)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:3px 9px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);color:#d7d3d5;text-decoration:none}

/* ONE badge, with status modifiers. Old per-page names (.pill/.qa/.k) alias in.
   Status is semantic (green/amber/red-orange) — never the brand crimson. */
.badge,.pill,.qa{font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  font-weight:700;padding:4px 8px;border-radius:16px;white-space:nowrap;
  text-transform:uppercase;display:inline-block}
.badge.confirmed,.pill.confirmed{background:rgba(51,178,124,.16);color:#7fdcac}
.badge.pulled,.pill.pulled{background:rgba(227,167,60,.14);color:#e9c882}
.badge.missing,.pill.missing{background:rgba(238,85,64,.15);color:#f0a394}
.badge.mismatch,.pill.mismatch{background:rgba(227,167,60,.16);color:#eac88c}
.badge.ok,.badge.passed,.pill.ok{background:rgba(51,178,124,.16);color:#7fdcac}
.badge.warn,.badge.no{background:rgba(227,167,60,.14);color:#e9c882}
.badge.bad,.badge.fail{background:rgba(238,85,64,.15);color:#f0a394}

.banner{background:rgba(227,167,60,.12);border:1px solid rgba(227,167,60,.42);
  border-radius:10px;padding:12px 15px;margin-bottom:16px;color:#eac88c;font-size:14px}
.banner b{color:#f2dcae}

/* --- modals (one implementation) --------------------------------------------- */
.overlay{position:fixed;inset:0;background:rgba(8,5,7,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:20}
.overlay[hidden]{display:none}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  padding:22px;width:min(470px,92vw);display:flex;flex-direction:column;gap:11px;
  max-height:90vh;overflow:auto;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.modal h3{font-family:var(--display);margin:0 0 2px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.modal label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.modal input,.modal select{background:var(--input);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:9px 11px;font-size:14px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;align-items:center}
.actions .spacer{flex:1}
.sechead{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border-top:1px solid var(--line);padding-top:11px;margin-top:2px}
.hint{font-size:12px;color:var(--faint);line-height:1.45}

/* Visually hidden, still read by screen readers. Use for labels/headings that
   the sighted layout makes obvious but assistive tech still needs. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}