/* H.U.D Manager — shared site design system (tool pages). Matches the home page.
   Usage: <link rel="stylesheet" href="/site.css"> + <script src="/site-shell.js" defer></script>
   Palette rule: cyan / amber / magenta only. No red, no green. */
:root{
  --bg:#07090d; --panel:#0d1119; --panel2:#111826; --line:#1c2638; --line2:#2a3850;
  --txt:#e8edf5; --mute:#8b97ab; --dim:#5d6a80;
  --cyan:#5ee0ff; --amber:#ffb347; --mag:#ff4fb0;
  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --qn-reserve:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body.site-page > main{flex:1 0 auto}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
::selection{background:rgba(94,224,255,.28)}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px;width:100%}

/* ---------- header / footer (injected by site-shell.js) ---------- */
.site-hdr{border-bottom:1px solid var(--line);background:rgba(7,9,13,.92);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)}
.site-hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;padding-right:calc(20px + var(--qn-reserve))}
.site-brand{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:.14em;text-decoration:none;color:var(--txt)}
.site-brand b{color:var(--amber);font-weight:800}
.site-nav{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.site-nav a,.site-nav summary{color:var(--mute);text-decoration:none;cursor:pointer;list-style:none}
.site-nav a:hover,.site-nav summary:hover,.site-nav a[aria-current]{color:var(--txt)}
.site-nav summary::-webkit-details-marker{display:none}
.site-menu{position:relative}
.site-menu[open] summary{color:var(--txt)}
.site-menu .drop{position:absolute;right:0;top:34px;width:min(720px,92vw);background:var(--panel);border:1px solid var(--line2);padding:18px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 22px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.site-menu .drop h4{margin:0 0 6px;font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.06em;color:var(--amber)}
.site-menu .drop a{display:block;padding:3px 0;font-family:var(--body);font-size:.88rem;letter-spacing:0;text-transform:none}
.site-ftr{border-top:1px solid var(--line);margin-top:56px;padding:22px 0 34px;font-family:var(--mono);font-size:.72rem;color:var(--mute);letter-spacing:.03em}
.site-ftr .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.site-ftr a{color:var(--mute);text-decoration:none}.site-ftr a:hover{color:var(--txt)}
@media (max-width:900px){.site-nav a:not(.btn){display:none}.site-menu .drop{grid-template-columns:repeat(2,1fr)}.site-hdr .wrap{padding-right:20px}
  /* quick-nav's fixed top-right cluster would sit on the header: leave a strip for it */
  body.site-page::before{content:"";display:block;height:42px;flex:none}
  .site-hdr{top:0}}

/* ---------- page scaffold ---------- */
.page{padding:34px 0 10px}
.page-head{margin-bottom:26px;max-width:80ch}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0}
.page-head h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,6vw,4.4rem);line-height:.95;text-transform:uppercase;letter-spacing:.005em;margin:10px 0 12px}
.page-head h1 em{font-style:normal;color:var(--amber)}
.lead{color:var(--mute);font-size:1.05rem;margin:0;max-width:62ch}
h2.sec{font-family:var(--disp);font-weight:800;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;margin:34px 0 12px;line-height:1}
h3.sub{font-family:var(--disp);font-weight:800;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.fine{font-family:var(--mono);font-size:.74rem;color:var(--mute);letter-spacing:.03em}

/* ---------- panels & grids ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.panel.edge-c{border-top:2px solid var(--cyan)} .panel.edge-a{border-top:2px solid var(--amber)} .panel.edge-m{border-top:2px solid var(--mag)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--panel);padding:14px 16px}
.stat .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-family:var(--disp);font-weight:800;font-size:2rem;line-height:1.05;margin-top:2px}
.stat .v.c{color:var(--cyan)}.stat .v.a{color:var(--amber)}.stat .v.m{color:var(--mag)}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
input[type=text],input[type=search],input[type=number],input:not([type]),select,textarea{font:inherit;font-size:.92rem;color:var(--txt);background:var(--panel2);border:1px solid var(--line2);border-radius:0;padding:9px 12px;min-height:40px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(94,224,255,.16)}
input::placeholder{color:var(--dim)}
select option{background:var(--panel);color:var(--txt)}
label.lbl{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:10px 16px;border:1px solid var(--amber);color:var(--amber);background:transparent;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--amber);color:#1a1205}
.btn.solid{background:var(--amber);color:#1a1205}.btn.solid:hover{background:#ffc57a}
.btn.ghost{border-color:var(--line2);color:var(--txt)}.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);background:transparent}
.btn.sm{padding:6px 10px;font-size:.7rem}
/* segmented tabs / filter chips */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin:0 0 20px}
.tab{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:none;border:0;border-bottom:2px solid transparent;padding:11px 16px;cursor:pointer;margin-bottom:-1px}
.tab:hover{color:var(--txt)}.tab.on,.tab[aria-selected=true]{color:var(--cyan);border-bottom-color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:transparent;border:1px solid var(--line2);padding:5px 10px;cursor:pointer}
.chip:hover{color:var(--txt);border-color:var(--mute)}.chip.on{color:#021a22;background:var(--cyan);border-color:var(--cyan)}
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);color:var(--mute)}
.tag.c{border-color:var(--cyan);color:var(--cyan)}.tag.a{border-color:var(--amber);color:var(--amber)}.tag.m{border-color:var(--mag);color:var(--mag)}

/* ---------- data tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:var(--panel2)}
.tbl .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl .hi{color:var(--amber)}.tbl .c{color:var(--cyan)}.tbl .m{color:var(--mag)}

/* ---------- meters (damage / stat bars) ---------- */
.meter{height:10px;background:var(--panel2);border:1px solid var(--line)}
.meter>i{display:block;height:100%;background:var(--cyan)}
.meter.a>i{background:var(--amber)}.meter.m>i{background:var(--mag)}
.hatch-a{background:repeating-linear-gradient(135deg,#ffb347 0 6px,#e39a33 6px 12px)}
.hatch-m{background:repeating-linear-gradient(135deg,#ff4fb0 0 6px,#e03d99 6px 12px)}
.note{border-left:3px solid var(--cyan);background:var(--panel);padding:12px 16px;color:var(--mute);font-size:.92rem}
.note.warn{border-left-color:var(--amber)}
.empty{padding:34px;text-align:center;color:var(--mute);border:1px dashed var(--line2)}

/* ---------- overlay embed mode (?embed=1): no site chrome, fill the window ---------- */
html.embedded .site-hdr,html.embedded .site-ftr{display:none!important}
html.embedded body{background:transparent}
html.embedded .page{padding-top:12px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- first-run acknowledgment modal (app-firstrun.js) in the new look ---------- */
body.site-page #firstrun-modal{background:rgba(4,6,10,.88);font-family:var(--body)}
body.site-page #firstrun-modal .fr-card{background:var(--panel);border:1px solid var(--line2);border-top:2px solid var(--amber);border-radius:0;box-shadow:0 24px 60px rgba(0,0,0,.7);padding:28px 32px}
body.site-page #firstrun-modal h2{font-family:var(--disp);font-weight:900;font-size:2rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);text-shadow:none;margin:0 0 4px}
body.site-page #firstrun-modal .fr-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
body.site-page #firstrun-modal h3{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;color:var(--amber)}
body.site-page #firstrun-modal p{color:var(--mute);font-size:.95rem}
body.site-page #firstrun-modal .fr-callout{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:0;color:var(--txt)}
body.site-page #firstrun-modal label.fr-check{color:var(--mute)}
body.site-page #firstrun-modal button{border-radius:0;font-family:var(--mono);letter-spacing:.1em}
body.site-page #firstrun-modal button.fr-go{background:var(--amber);border:1px solid var(--amber);color:#1a1205}
body.site-page #firstrun-modal button.fr-go:hover:not(:disabled){background:#ffc57a;box-shadow:none}
body.site-page #firstrun-modal button.fr-link{background:transparent;border:1px solid var(--line2);color:var(--txt)}
body.site-page #firstrun-modal button.fr-link:hover{border-color:var(--cyan);color:var(--cyan)}
body.site-page #firstrun-modal a{color:var(--cyan)}