/* ACE Control-Plane HUD — canonical stylesheet (ace_hud.css)
   Token SSOT + component classes. Design: ACE_HUD_THEME_v0.1.0.md (ticket ACE_HUD_THEME_T1).
   Published: https://ace-hud.syz.internal/ace_hud.css  ·  consumed by hud_base.html (T2). */

    /* ============================================================
       TOKEN CONTRACT  (== design doc §4 == future ace_hud.css :root)
       ============================================================ */
    :root {
      /* brand / chrome — from SYZYGYSYS syz_pack_dark.css */
      --hud-bg:        #14101c;   /* --paper      page background      */
      --hud-surface:   #1d1730;   /* --lav-faint  cards / code         */
      --hud-surface-2: #2a2140;   /* --lav-bg     table header / chips */
      --hud-accent:    #b79cf0;   /* --syz        links / active / title*/
      --hud-accent-hi: #d6c2ff;   /* --syz-dark   H1 / strongest        */
      --hud-accent-lo: #8a6dc0;   /* --syz-light                        */
      --hud-ink:       #ece8f5;   /* --ink        body text             */
      --hud-muted:     #a79fb8;   /* --muted      secondary text        */
      --hud-line:      #2e2640;   /* --line       hairlines             */
      --hud-border:    #5b4a86;   /* --lav        stronger borders      */

      /* semantic status — FUNCTIONAL, do not brand-recolor */
      --hud-ok:    #10b981;  --hud-warn: #f59e0b;  --hud-err:  #ef4444;
      --hud-info:  #3b82f6;  --hud-agent:#a855f7;

      /* type */
      --hud-mono: 'SF Mono', 'JetBrains Mono', Monaco, 'Cascadia Code', ui-monospace, monospace;
      --hud-sans: 'Inter', system-ui, -apple-system, sans-serif;

      /* geometry */
      --hud-maxw: 1600px; --hud-radius: 8px; --hud-radius-sm: 6px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--hud-mono);
      color: var(--hud-ink);
      background:
        radial-gradient(circle at 0 0, rgba(183,156,240,.10), transparent 36%),
        radial-gradient(circle at 100% 0, rgba(168,85,247,.07), transparent 30%),
        var(--hud-bg);
      min-height: 100vh;
      line-height: 1.4;
      padding: 1rem;
    }
    .container { width: 100%; max-width: var(--hud-maxw); margin: 0 auto; }

    /* ---- WIP banner ---- */
    .wip {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      font-family: var(--hud-sans); font-size:.7rem; letter-spacing:.06em;
      text-transform:uppercase; color:var(--hud-muted);
      border:1px dashed var(--hud-border); border-radius:999px;
      padding:.35rem .9rem; margin-bottom:1rem;
    }
    .wip b { color: var(--hud-accent); }

    /* ---- masthead (registry vocabulary, violet chrome) ---- */
    .hud-masthead {
      background: var(--hud-surface); border:1px solid var(--hud-line);
      padding:.75rem 1rem; border-radius: var(--hud-radius);
      display:flex; justify-content:space-between; align-items:center;
      flex-wrap:wrap; gap:.75rem; margin-bottom:.75rem;
    }
    .hud-brandlockup { display:flex; align-items:center; gap:.85rem; min-width:0; }
    .hud-brandmark {
      width:3.25rem; height:3.25rem; flex:0 0 auto; object-fit:contain;
      filter:drop-shadow(0 0 12px rgba(183,156,240,.18));
    }
    .hud-masthead h1 {
      font-family: var(--hud-sans); font-size:1.3rem; font-weight:700;
      letter-spacing:.04em; color: var(--hud-accent-hi);
    }
    .hud-sub { font-size:.72rem; color: var(--hud-muted); margin-top:.2rem; }
    .hud-right { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
    .hud-search {
      padding:.35rem .8rem; border-radius:999px; font-family:var(--hud-mono);
      border:1px solid var(--hud-border); background:rgba(20,16,28,.7);
      color:var(--hud-ink); min-width:180px; font-size:.72rem;
    }
    .live { display:flex; align-items:center; gap:.45rem; font-size:.72rem;
      text-transform:uppercase; letter-spacing:.05em; color:var(--hud-ok); font-weight:600; }
    .dot { width:10px; height:10px; border-radius:50%; background:var(--hud-ok);
      animation: pulse 1.4s ease-in-out infinite; }
    @keyframes pulse {
      0%,100% { opacity:.5; box-shadow:0 0 0 0 rgba(16,185,129,.0); }
      50% { opacity:1; box-shadow:0 0 10px 2px rgba(16,185,129,.5); }
    }
    .badge { background:rgba(16,185,129,.18); color:var(--hud-ok);
      padding:.12rem .45rem; border-radius:3px; font-size:.58rem; font-weight:700; letter-spacing:.05em;}

    /* ---- nav pills ---- */
    .hud-nav { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
    .hud-nav a {
      font-family:var(--hud-sans); font-size:.75rem; text-decoration:none;
      padding:.4rem .9rem; border-radius:999px; color:var(--hud-accent);
      border:1px solid var(--hud-line); background:var(--hud-surface);
      transition:background .15s,color .15s,border-color .15s;
    }
    .hud-nav a:hover { border-color:var(--hud-border); }
    .hud-nav a.active { background:var(--hud-accent); color:#1a1326; border-color:var(--hud-accent); font-weight:700; }

    /* ---- controls row: tab + view-mode + status filter pills ---- */
    .controls { display:flex; align-items:center; justify-content:space-between;
      gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
    .switch { display:inline-flex; background:var(--hud-surface); border:1px solid var(--hud-line);
      border-radius:999px; padding:.2rem; }
    .switch button {
      border:none; background:transparent; color:var(--hud-muted); cursor:pointer;
      font-family:var(--hud-sans); font-weight:600; font-size:.72rem;
      padding:.35rem .9rem; border-radius:999px; transition:background .15s,color .15s;
    }
    .switch button.active { background:var(--hud-accent); color:#1a1326; }
    .switch .count { background:rgba(255,255,255,.12); border-radius:999px; padding:.02rem .4rem; font-size:.62rem; margin-left:.3rem;}

    .filters { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
    .vlabel { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hud-muted); }
    .pill { border:none; cursor:pointer; border-radius:999px; padding:.32rem .7rem;
      font-family:var(--hud-mono); font-size:.7rem; background:var(--hud-surface-2); color:var(--hud-ink); }
    .pill .n { opacity:.8; }
    .pill.ok    { background:rgba(16,185,129,.18); color:var(--hud-ok); }
    .pill.warn  { background:rgba(245,158,11,.18); color:var(--hud-warn); }
    .pill.err   { background:rgba(239,68,68,.18);  color:var(--hud-err); }
    .pill.info  { background:rgba(59,130,246,.18); color:var(--hud-info); }
    .pill.agent { background:rgba(168,85,247,.18); color:var(--hud-agent); }

    /* ---- card ---- */
    .card { background:var(--hud-surface); border:1px solid var(--hud-line);
      border-radius:var(--hud-radius-sm); padding:.85rem; margin-bottom:.75rem; }
    .card > h2 { font-family:var(--hud-sans); font-size:.8rem; text-transform:uppercase;
      letter-spacing:.06em; color:var(--hud-accent); margin-bottom:.6rem; font-weight:700; }

    /* ---- table ---- */
    table.hud { width:100%; border-collapse:collapse; }
    table.hud th { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--hud-line);
      color:var(--hud-muted); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
    table.hud td { padding:.4rem .5rem; border-bottom:1px solid rgba(46,38,64,.5); font-size:.74rem; }
    table.hud tr:hover td { background:rgba(183,156,240,.06); }
    .heart { font-size:.85rem; }
    .heart.ok::before    { content:'♥'; color:var(--hud-ok); }
    .heart.warn::before  { content:'♥'; color:var(--hud-warn); }
    .heart.err::before   { content:'♥'; color:var(--hud-err); }
    .heart.agent::before { content:'♥'; color:var(--hud-agent); animation:pulse 1.4s infinite; }
    .chip { padding:.1rem .4rem; border-radius:3px; font-size:.58rem; text-transform:uppercase; font-weight:700; letter-spacing:.03em; }
    .chip.ok    { background:rgba(16,185,129,.18); color:var(--hud-ok); }
    .chip.warn  { background:rgba(245,158,11,.18); color:var(--hud-warn); }
    .chip.err   { background:rgba(239,68,68,.18);  color:var(--hud-err); }
    .chip.info  { background:rgba(59,130,246,.18); color:var(--hud-info); }
    .chip.agent { background:rgba(168,85,247,.18); color:var(--hud-agent); }
    a.tgt { color:var(--hud-accent); text-decoration:none; border-bottom:1px dotted var(--hud-border); }

    /* ---- callout / box ---- */
    .callout { background:var(--hud-surface-2); border-left:3px solid var(--hud-accent);
      border-radius:var(--hud-radius-sm); padding:.7rem .9rem; margin-bottom:.6rem; font-size:.78rem; color:var(--hud-ink); }
    .callout .label { font-family:var(--hud-sans); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em;
      color:var(--hud-accent); display:block; margin-bottom:.25rem; font-weight:700; }

    /* ---- swatches ---- */
    .swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
    .sw { border:1px solid var(--hud-line); border-radius:var(--hud-radius-sm); overflow:hidden; font-size:.62rem; }
    .sw .chipc { height:42px; }
    .sw .meta { padding:.3rem .45rem; background:var(--hud-surface-2); }
    .sw .meta b { color:var(--hud-ink); display:block; font-family:var(--hud-sans); }
    .sw .meta span { color:var(--hud-muted); }

    /* ---- toast (static demo) ---- */
    .toast { position:fixed; bottom:1rem; right:1rem; background:var(--hud-surface-2);
      border:1px solid var(--hud-line); border-left:4px solid var(--hud-ok);
      border-radius:var(--hud-radius); padding:.8rem 1rem; max-width:320px;
      box-shadow:0 4px 22px rgba(0,0,0,.5); font-size:.74rem; }
    .toast .t { font-family:var(--hud-sans); font-weight:700; margin-bottom:.2rem; }
    .toast .m { color:var(--hud-muted); }

    /* ---- footer ---- */
    .hud-footer { font-family:var(--hud-sans); font-size:.66rem; color:var(--hud-muted);
      border-top:1px solid var(--hud-line); margin-top:1rem; padding-top:.7rem; }
    .hud-footer a { color:var(--hud-accent); }

    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
    @media (max-width:900px){ .grid2 { grid-template-columns:1fr; } }

    /* ---- service index: category sections + link-tile grid ---- */
    .category-section { margin-bottom:1.1rem; }
    .category-section h2 {
      font-family:var(--hud-sans); font-size:.8rem; text-transform:uppercase;
      letter-spacing:.06em; color:var(--hud-accent); font-weight:700;
      margin:0 0 .55rem; padding-bottom:.3rem; border-bottom:1px solid var(--hud-line);
    }
    .service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
    @media (max-width:900px){ .service-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:500px){ .service-grid { grid-template-columns:1fr; } }
    .service-link {
      display:block; text-decoration:none; font-size:.82rem;
      padding:.5rem .75rem; border-radius:var(--hud-radius-sm);
      background:var(--hud-surface); border:1px solid var(--hud-line);
      color:var(--hud-ink); transition:background .18s,border-color .18s,color .18s;
    }
    .service-link:hover {
      background:rgba(183,156,240,.12); border-color:var(--hud-border); color:var(--hud-accent-hi);
    }