/* AZCK Command Centre v3 — shared HUD shell
 * Tokens + components extracted from forge-design's cc-phase4-dashboard.html.
 * Used by bus.html / layers.html / plans.html (and any future landing page).
 */

:root {
  --bg:#090b0d; --surface:#0f1316; --raised:#161b20; --overlay:#1d2429;
  --border:#252c33; --border-hi:#2e3740;
  --text:#dde4eb; --text-dim:#8a9aa8; --text-xs:#566470;
  --amber:#c8922a; --amber-dim:#9c7021;
  --amber-glow:rgba(200,146,42,0.15); --amber-soft:rgba(200,146,42,0.08);
  --green:#2ea043; --green-bg:rgba(46,160,67,0.12);
  --yellow:#d29922; --yellow-bg:rgba(210,153,34,0.12);
  --red:#e5534b; --red-bg:rgba(229,83,75,0.12);
  --blue:#4493d4; --blue-bg:rgba(68,147,212,0.12);
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px;
  --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px;
  --mono:'JetBrains Mono',monospace; --sans:'Mukta',sans-serif; --display:'Oswald',sans-serif;
}
[data-theme="light"] {
  --bg:#f0f2f4; --surface:#ffffff; --raised:#f6f8fa; --overlay:#eaecef;
  --border:#d0d7de; --border-hi:#bbc3cc;
  --text:#1c2128; --text-dim:#57606a; --text-xs:#8c959f;
  --amber:#a06c10; --amber-dim:#7a5010;
  --amber-glow:rgba(160,108,16,0.12); --amber-soft:rgba(160,108,16,0.06);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* HEADER */
.cc-header { background:var(--surface); border-bottom:1px solid var(--border); padding:0 var(--sp-24); height:52px; display:flex; align-items:center; gap:var(--sp-16); position:sticky; top:0; z-index:100; }
.cc-sigil { display:flex; align-items:center; gap:var(--sp-10); flex-shrink:0; text-decoration:none; }
.cc-sigil__mark { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:4px; background:radial-gradient(ellipse at center,rgba(200,146,42,0.55) 0%,rgba(160,110,20,0.25) 55%,transparent 100%); border:1px solid rgba(200,146,42,0.6); padding:2px; box-shadow:0 0 8px rgba(200,146,42,0.3),inset 0 0 6px rgba(200,146,42,0.15); }
.cc-sigil__mark img { width:100%; height:100%; object-fit:contain; display:block; }
.cc-sigil__wordmark { font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); line-height:1; }
.cc-sigil__wordmark span { display:block; font-size:9px; font-weight:500; letter-spacing:0.2em; color:var(--text-xs); margin-top:2px; }
.cc-header__sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.cc-header__title { flex:1; font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); }
.cc-header__title strong { color:var(--amber); font-weight:700; }
.cc-header__diag { display:flex; align-items:center; gap:var(--sp-8); flex:1; overflow:hidden; }
.cc-diag-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--green); box-shadow:0 0 5px var(--green); }
.cc-diag-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.cc-diag-pill.ok   { background:var(--green-bg);  color:var(--green); }
.cc-diag-pill.warn { background:var(--yellow-bg); color:var(--yellow); }
.cc-diag-pill.err  { background:var(--red-bg);    color:var(--red); }
.cc-diag-pill.info { background:var(--blue-bg);   color:var(--blue); }
.cc-diag-text { font-size:11px; color:var(--text-xs); white-space:nowrap; }
.cc-diag-text strong { color:var(--text-dim); font-weight:500; }
.cc-header__actions { display:flex; align-items:center; gap:var(--sp-8); flex-shrink:0; }
.cc-hbtn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; border:1px solid transparent; background:transparent; color:var(--text-dim); cursor:pointer; transition:all 0.12s; font-family:inherit; }
.cc-hbtn:hover { background:var(--raised); border-color:var(--border); color:var(--text); }
.cc-hbtn.theme-toggle { font-size:14px; }
.cc-user-pill { display:flex; align-items:center; gap:var(--sp-6); padding:3px 10px 3px 4px; border-radius:20px; border:1px solid var(--border); background:var(--raised); cursor:pointer; transition:all 0.12s; }
.cc-user-pill:hover { border-color:var(--amber); }
.cc-user-pill__avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dim) 100%); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:10px; font-weight:700; color:#000; letter-spacing:0.05em; }
.cc-user-pill__name { font-size:12px; font-weight:500; color:var(--text); }

/* NAV (lane tabs — appears on every page) */
.cc-nav { background:var(--surface); border-bottom:1px solid var(--border); padding:0 var(--sp-24); display:flex; align-items:flex-end; gap:0; overflow-x:auto; scrollbar-width:none; position:sticky; top:52px; z-index:99; }
.cc-nav::-webkit-scrollbar { display:none; }
.cc-nav__tab { font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); padding:var(--sp-10) var(--sp-16); border-bottom:2px solid transparent; cursor:pointer; transition:all 0.12s; white-space:nowrap; user-select:none; display:flex; align-items:center; gap:var(--sp-6); background:none; border-left:none; border-right:none; border-top:none; text-decoration:none; }
.cc-nav__tab:hover { color:var(--text); }
.cc-nav__tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.cc-nav__tab .badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:14px; padding:0 4px; border-radius:7px; font-size:9px; font-weight:700; font-family:var(--mono); background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-glow); }
.cc-nav__tab.active .badge { background:var(--amber); color:#000; border-color:var(--amber); }

/* BACK LINK */
.cc-back { display:inline-flex; align-items:center; gap:var(--sp-6); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; padding:var(--sp-6) var(--sp-10); border:1px solid var(--border); border-radius:4px; background:var(--surface); transition:all 0.12s; }
.cc-back:hover { color:var(--amber); border-color:var(--amber); }

/* PAGE BODY */
.cc-page { padding:var(--sp-20) var(--sp-24); max-width:1280px; margin:0 auto; }
.cc-page__head { display:flex; align-items:center; gap:var(--sp-12); margin-bottom:var(--sp-20); }
.cc-page__title { font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); flex:1; }
.cc-page__title span { color:var(--text-xs); font-weight:500; font-size:11px; letter-spacing:0.16em; margin-left:var(--sp-8); }

/* FILTERS */
.cc-filters { display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-16); flex-wrap:wrap; }
.cc-filter { font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); padding:var(--sp-6) var(--sp-10); border:1px solid var(--border); border-radius:3px; background:var(--surface); cursor:pointer; transition:all 0.12s; }
.cc-filter:hover { color:var(--text); border-color:var(--border-hi); }
.cc-filter.active { color:#000; background:var(--amber); border-color:var(--amber); }
.cc-filter .badge { font-family:var(--mono); font-size:9px; padding:1px 4px; margin-left:4px; background:rgba(0,0,0,0.15); border-radius:2px; }
.cc-filter:not(.active) .badge { background:var(--raised); color:var(--text-xs); }

/* LIST */
.cc-list { display:flex; flex-direction:column; gap:var(--sp-8); }

/* CARD (shared with alessio.html) */
.cc-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:var(--sp-12); transition:border-color 0.12s; position:relative; overflow:hidden; }
.cc-card:hover { border-color:var(--border-hi); }
.cc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background 0.12s; }
.cc-card.amber::before  { background:var(--amber); }
.cc-card.green::before  { background:var(--green); }
.cc-card.red::before    { background:var(--red); }
.cc-card.yellow::before { background:var(--yellow); }
.cc-card.blue::before   { background:var(--blue); }
.cc-card__label { font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-xs); margin-bottom:var(--sp-6); }
.cc-card__title { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--text); line-height:1.35; margin-bottom:var(--sp-4); word-wrap:break-word; }
.cc-card__sub { font-size:12px; color:var(--text-dim); line-height:1.4; word-wrap:break-word; }
.cc-card__meta { display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); flex-wrap:wrap; }
.cc-card__time { font-family:var(--mono); font-size:10px; color:var(--text-xs); }
.cc-card__tag { display:inline-flex; align-items:center; padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.04em; }
.cc-card__tag.amber  { background:var(--amber-soft);  color:var(--amber); }
.cc-card__tag.green  { background:var(--green-bg);    color:var(--green); }
.cc-card__tag.red    { background:var(--red-bg);      color:var(--red); }
.cc-card__tag.yellow { background:var(--yellow-bg);   color:var(--yellow); }
.cc-card__tag.blue   { background:var(--blue-bg);     color:var(--blue); }
.cc-card__tag.muted  { background:var(--raised);      color:var(--text-xs); border:1px solid var(--border); }
.cc-card__id { font-family:var(--mono); font-size:10px; color:var(--text-xs); }

/* STUB */
.cc-stub { background:var(--surface); border:1px dashed var(--border); border-radius:4px; padding:var(--sp-16); color:var(--text-xs); font-size:12px; text-align:center; }
.cc-stub strong { color:var(--text-dim); display:block; margin-bottom:4px; font-weight:600; }

/* ERROR PILL (top-right floating) */
.cc-err { position:fixed; top:60px; right:16px; background:var(--red-bg); color:var(--red); border:1px solid var(--red); border-radius:4px; padding:8px 12px; font-family:var(--mono); font-size:11px; z-index:200; max-width:320px; }

/* RESPONSIVE */
@media (max-width:800px) {
  .cc-header { padding:0 var(--sp-16); }
  .cc-nav { padding:0 var(--sp-16); }
  .cc-page { padding:var(--sp-16); }
  .cc-header__diag { display:none; }
  .cc-header__title { display:none; }
}
@media (max-width:480px) {
  .cc-header { padding:0 var(--sp-12); height:48px; }
  .cc-nav { top:48px; padding:0 var(--sp-8); }
  .cc-nav__tab { padding:var(--sp-8) var(--sp-10); font-size:10px; }
  .cc-sigil__wordmark { display:none; }
  .cc-header__sep { display:none; }
  .cc-page { padding:var(--sp-10); }
  .cc-page__head { flex-wrap:wrap; gap:var(--sp-8); }
  .cc-page__title { font-size:14px; }
  .cc-header__actions .cc-hbtn:not(:last-child) { display:none; }
  .cc-user-pill__name { display:none; }
}

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hi); }