/* Crucible UI — shared design tokens + components.
   Linked by the platform-chrome pages BEFORE their inline <style>.
   Dark-only, amber/gold terminal. Spec: docs/superpowers/specs/2026-07-09-ui-design-system-design.md */
:root{
  /* Grounds — existing names preserved so pages inherit by deleting their local :root */
  --dark:#0d0a06; --dark2:#1a1408; --dark3:#110e05;
  --ground:#0d0a06; --panel:#141009; --panel-2:#1b1510;
  /* Ink — the contrast fix */
  --text:#f2ead9; --muted:#b39a6a; --faint:#8f7a54;
  /* Accent */
  --amber:#d97706; --gold:#fbbf24; --ember:#f59e0b;
  /* Structure — Strong amber */
  --line:rgba(217,119,6,.46); --line-strong:rgba(217,119,6,.70);
  /* Semantic — existing kept + role aliases */
  --red:#dc2626; --red2:#f87171; --green2:#4ade80;
  --good:#4ade80; --warn:#f59e0b; --crit:#f87171;
  /* Utility */
  --radius:5px;
  --mono:'Courier New',ui-monospace,monospace;
  --serif:Georgia,'Times New Roman',serif;
}

/* Ambient backdrop shared by every chrome page: a fixed CRT scanline overlay on
   top (pointer-events:none) and the ember particle canvas behind content
   (animated by shared.js for any page that includes <canvas id="particles">).
   Page content must establish position:relative;z-index:1 to sit above it. */
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.15) 2px, rgba(0,0,0,.15) 4px);pointer-events:none;z-index:999}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0}

.cru-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem}
.cru-section-label{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* Framed section card — the bordered panel with gold corner brackets used across
   the chrome pages. This is the shared VISUAL shell (bg/border/radius/shadow/
   brackets); pages keep only their own padding/margin, which legitimately varies. */
.card{position:relative;background:var(--dark2);border:1px solid var(--line);border-radius:6px;box-shadow:0 0 0 1px rgba(217,119,6,.08),0 4px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(217,119,6,.12)}
.card::before,.card::after{content:'';position:absolute;width:12px;height:12px;border-color:rgba(251,191,36,.6);border-style:solid}
.card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:6px 0 0 0}
.card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 6px 0}

/* Platform header — one source of truth for the sticky top chrome shared by
   dashboard, admin, range-reservation, profile, path-to-success. Markup:
   <header class="site-header"><div class="header-brand">…icon…<div class="header-wordmark">
   <span class="header-title">CRUCIBLE</span><span class="header-sub">Page label</span></div></div>
   <nav class="header-nav"><a class="nav-link[ active]" …></nav></header> */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:.65rem 1.75rem;background:rgba(13,10,6,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.header-brand{display:flex;align-items:center;gap:.8rem}
.header-icon{flex-shrink:0}
.header-wordmark{display:flex;flex-direction:column}
.header-title{font-family:var(--serif);font-size:1rem;letter-spacing:.28em;color:var(--gold);font-weight:700;text-transform:uppercase;line-height:1.15}
.header-sub{font-family:var(--serif);font-size:.48rem;letter-spacing:.22em;color:rgba(217,119,6,.65);text-transform:uppercase}
.header-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}
.nav-link{display:block;padding:.35rem .85rem;font-family:var(--serif);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--muted);border:1px solid transparent;border-radius:3px;transition:color .2s,border-color .2s,background .2s}
.nav-link:hover{color:var(--amber);border-color:rgba(217,119,6,.3);background:rgba(217,119,6,.06)}
.nav-link.active{color:var(--gold);border-color:rgba(217,119,6,.4);background:rgba(217,119,6,.1)}
/* header right cluster (clock + actions), shared by all chrome pages */
.header-right{display:flex;align-items:center;gap:1.5rem}
.header-clock{text-align:right}
.clock-time{font-family:var(--mono);font-size:.85rem;color:var(--gold);letter-spacing:.1em}
.clock-label{font-size:.42rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}

.cru-tabs{display:flex;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line-strong);margin-bottom:1.2rem}
.cru-tab{font-family:var(--serif);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:.5rem 1.15rem;border:1px solid var(--line);border-radius:3px;background:var(--panel-2);color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.cru-tab:hover{color:var(--gold);border-color:var(--line-strong)}
.cru-tab.active{color:var(--gold);border-color:var(--line-strong);background:rgba(217,119,6,.12)}

.cru-table{width:100%;border-collapse:collapse}
.cru-table thead tr{background:rgba(217,119,6,.07)}
.cru-table th{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;text-align:left;color:var(--gold);padding:.6rem .8rem;border-bottom:1px solid var(--line-strong);font-weight:normal;white-space:nowrap}
.cru-table td{font-family:var(--mono);font-size:.76rem;color:var(--text);padding:.55rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.cru-table tbody tr{transition:background .15s}
.cru-table tbody tr:hover{background:rgba(217,119,6,.05)}
.cru-table tbody tr:last-child td{border-bottom:none}

/* ── Buttons — one slide-fill engine ───────────────────────────────────────
   The accent sweeps in from the left on hover via an animated background-position
   (a 200%-wide two-stop gradient), NOT an ::before overlay. Because nothing is
   painted over the label, button text never needs a <span> wrapper to stay
   visible on hover. Legacy per-page classes (.btn/.vm-btn/.scenario-btn/
   .btn-logout) are grouped onto this engine so existing markup keeps working;
   variants just override the --btn-* custom properties. */
.cru-btn,.btn,.vm-btn,.scenario-btn,.btn-logout{
  --btn-accent:var(--amber); --btn-bg:var(--dark2); --btn-fg:var(--amber); --btn-ink:var(--dark);
  --btn-glow:rgba(217,119,6,.35);
  font-family:var(--serif);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.45rem 1.1rem;border-radius:3px;cursor:pointer;border:1px solid var(--line-strong);
  color:var(--btn-fg);
  background:linear-gradient(to right,var(--btn-accent) 50%,var(--btn-bg) 50%) right bottom/200% 100%;
  transition:background-position .25s ease,color .2s,box-shadow .2s}
.cru-btn:hover:not(:disabled),.btn:hover:not(:disabled),.scenario-btn:hover:not(:disabled),.btn-logout:hover:not(:disabled),.vm-btn:hover:not(:disabled){
  color:var(--btn-ink);background-position:left bottom;box-shadow:0 0 18px var(--btn-glow)}
.cru-btn:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}
/* colour variants — swap the accent that sweeps in */
.cru-btn.danger,.btn-danger{--btn-accent:var(--red);--btn-fg:var(--red2);--btn-ink:#fff;--btn-glow:rgba(220,38,38,.3);border-color:rgba(220,38,38,.4)}
.cru-btn.accent-green{--btn-accent:var(--green2);--btn-glow:rgba(74,222,128,.3)}
.cru-btn.accent-blue{--btn-accent:#60a5fa;--btn-glow:rgba(96,165,250,.3)}
.cru-btn.accent-red{--btn-accent:var(--red2);--btn-glow:rgba(248,113,113,.3)}
.cru-btn.ghost,.btn.ghost{--btn-fg:var(--muted);border-color:var(--line)}
/* primary — a solid, always-filled call to action (no sweep) */
.cru-btn.primary,.btn.primary{background:var(--amber);border-color:var(--amber);color:#1a0f02;font-weight:bold}
.cru-btn.primary:hover,.btn.primary:hover{color:#1a0f02;box-shadow:0 0 20px rgba(217,119,6,.45)}
/* sizes */
.cru-btn.sm,.btn-sm{padding:.3rem .7rem;font-size:.52rem;letter-spacing:.15em}
.cru-btn.xs{padding:.2rem .5rem;font-size:.55rem}
.cru-btn.icon,.btn.icon{padding:.42rem .7rem}
/* full-width form submit (sweep inherited) */
.btn-primary{width:100%;margin-top:.5rem;padding:.7rem 1rem;font-size:.62rem;border-color:var(--amber)}
/* compact VM control — tiny, flexes to fill its row */
.vm-btn{flex:1;min-width:54px;padding:.35rem .5rem;font-size:.5rem;letter-spacing:.15em}
.vm-btn:disabled{opacity:.3;cursor:default}
/* dashboard scenario button — sits on the darker panel */
.scenario-btn{--btn-bg:var(--dark3);padding:.38rem .9rem;font-size:.5rem;letter-spacing:.18em}

/* Status pill — a rounded chip with a leading status dot. .pill is admin's
   legacy alias for the same component (grouped so its markup keeps working);
   the domain state names (.active/.soon/.expired/.disabled) map onto the
   canonical run/pause/err colours. */
.cru-pill,.pill{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;padding:.24rem .6rem;border-radius:20px;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.cru-pill::before,.pill::before{content:'';width:6px;height:6px;border-radius:50%}
.cru-pill.run,.pill.active{color:var(--good);border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.08)}
.cru-pill.run::before,.pill.active::before{background:var(--good);box-shadow:0 0 6px var(--good)}
.cru-pill.pause,.pill.soon{color:var(--warn);border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.08)}
.cru-pill.pause::before,.pill.soon::before{background:var(--warn)}
.cru-pill.stop{color:var(--crit);border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.cru-pill.stop::before{background:var(--crit)}
.cru-pill.off{color:#9aa4b2;border:1px solid rgba(154,164,178,.35);background:rgba(154,164,178,.08)}
.cru-pill.off::before{background:#9aa4b2}
/* muted/disabled — amber-grey to match the chrome (distinct from the blue-grey .off) */
.cru-pill.muted,.pill.disabled{color:var(--muted);border:1px solid rgba(179,154,106,.35);background:rgba(179,154,106,.08)}
.cru-pill.muted::before,.pill.disabled::before{background:var(--muted)}
.cru-pill.err,.pill.expired{color:#fff;border:1px solid var(--crit);background:var(--crit)}
.cru-pill.err::before,.pill.expired::before{background:#fff}

.cru-field label{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.35rem}
.cru-field input,.cru-field select{background:var(--panel-2);border:1px solid var(--line-strong);border-radius:3px;color:var(--text);font-family:var(--mono);font-size:.78rem;padding:.5rem .7rem;color-scheme:dark;width:100%;outline:none}
.cru-field input:focus,.cru-field select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.08)}

.cru-empty{text-align:center;color:var(--faint);font-style:italic;font-family:var(--mono);font-size:.72rem;padding:1.6rem;letter-spacing:.1em}

/* Modal — shared dialog chrome (backdrop + framed panel with gold corner
   accents). admin and dashboard each shipped a drifted local copy; this is the
   canonical set. Field-input styling and page-specific extras (.modal-lg,
   .modal-divider, .modal-hint) stay local to the page that needs them. */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-backdrop.open{opacity:1;pointer-events:all}
.modal{width:min(460px,90vw);background:var(--dark2);border:1px solid var(--line-strong);border-radius:6px;padding:2rem 2.25rem 2.25rem;position:relative;box-shadow:0 0 0 1px rgba(217,119,6,.12),0 16px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(217,119,6,.2),0 0 40px rgba(217,119,6,.2);transform:translateY(18px) scale(.97);transition:transform .22s ease,box-shadow .22s ease}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
.modal::before,.modal::after{content:'';position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid}
.modal::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:6px 0 0 0}
.modal::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 6px 0}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.modal-title-label{font-size:.48rem;letter-spacing:.28em;color:rgba(217,119,6,.65);text-transform:uppercase;margin-bottom:.28rem}
.modal-title{font-size:1rem;letter-spacing:.12em;color:var(--text);font-weight:700}
.modal-close{background:none;border:1px solid var(--line);color:var(--muted);width:28px;height:28px;border-radius:3px;cursor:pointer;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:color .15s,border-color .15s,background .15s}
.modal-close:hover{color:var(--gold);border-color:rgba(217,119,6,.6);background:rgba(217,119,6,.08)}
.modal-field{margin-bottom:1rem}
.modal-actions{display:flex;gap:.65rem;margin-top:1.6rem}
.modal-actions .btn{flex:1;padding:.65rem 1rem;font-size:.62rem}