/* Astronamer — shared design tokens & components (all public pages + staff console)
   Single source of truth: pages keep only page-specific rules in their own <style>. */

:root{
  --bg:#070510; --ink:#F2EFEA; --dim:#8B84B8; --sel:#6EE7D8; --gold:#D9A441;
  --line:rgba(139,132,184,.22); --red:#c96a6a; --green:#3dba6f;
  --panel:#0d0a1c; --radius:14px; --radius-s:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--sel)}
.serif{font-family:'Fraunces',serif}
h1{font-family:'Fraunces',serif;font-weight:600;font-size:24px}
h1 em{font-style:normal;color:var(--gold)}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:18px;margin-bottom:12px}
.muted{color:var(--dim)} .small{font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wrap{max-width:980px;margin:0 auto;padding:22px}

/* ---------- site header / footer (injected by ui.js) ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:18px min(5vw,48px)}
.site-header .brand{font-family:'Fraunces',serif;font-weight:600;font-size:21px;
  color:var(--ink);text-decoration:none}
.site-header .brand em{font-style:normal;color:var(--gold)}
.site-header nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.site-header nav a{color:var(--dim);text-decoration:none;font-size:14px;
  padding:4px 2px;border-bottom:2px solid transparent}
.site-header nav a:hover{color:var(--ink)}
.site-header nav a.active{color:var(--ink);border-bottom-color:var(--gold)}
.site-header nav a.cta{background:var(--gold);color:#1a1206;border-radius:999px;
  padding:9px 20px;font-weight:600;font-size:13.5px;border-bottom:0}
.site-header nav a.cta:hover{filter:brightness(1.08);color:#1a1206}
.site-footer{border-top:1px solid var(--line);margin-top:60px;
  padding:30px min(5vw,48px);color:var(--dim);font-size:12px;line-height:1.7;
  text-align:center}
.site-footer a{color:var(--dim)}

/* ---------- buttons ---------- */
button, .btn{font:inherit;cursor:pointer}
.btn-gold{background:var(--gold);color:#1a1206;border:0;border-radius:var(--radius-s);
  padding:10px 20px;font-weight:600;font-size:14px}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius-s);padding:9px 18px;font-size:13.5px}
.btn-ghost:hover{border-color:var(--sel);color:var(--sel)}
.btn-red{background:none;border:1px solid var(--red);color:var(--red);
  border-radius:var(--radius-s);padding:9px 18px;font-size:13.5px}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:8px}

/* ---------- cards / pills / inputs ---------- */
section.card{border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(20,14,40,.35),rgba(7,5,16,.08))}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:10.5px;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.pill.ok{border-color:var(--green);color:var(--green)}
.pill.warn{border-color:var(--gold);color:var(--gold)}
.pill.bad{border-color:var(--red);color:var(--red)}
input,textarea,select{background:rgba(7,5,16,.7);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:9px 12px;font:inherit;font-size:14px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sel)}
label.switch{display:flex;gap:8px;align-items:center;font-size:13px;
  color:var(--dim);margin:4px 0;cursor:pointer}
label.switch input{width:auto;margin:0}

/* ---------- pill tabs ---------- */
nav.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
nav.tabs button{background:none;border:1px solid var(--line);color:var(--dim);
  border-radius:999px;padding:7px 15px;font:inherit;font-size:13px;cursor:pointer}
nav.tabs button.on{border-color:var(--gold);color:var(--gold)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--dim);text-align:left;font-weight:500;padding:6px 8px;
  border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
td{padding:7px 8px;border-bottom:1px dashed rgba(139,132,184,.14);vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- toast ---------- */
.msg{position:fixed;bottom:18px;right:18px;background:#141028;
  border:1px solid var(--gold);color:var(--gold);border-radius:var(--radius-s);
  padding:10px 16px;font-size:13px;display:none;z-index:200;max-width:340px}

/* ---------- modal (shared branded dialog) ---------- */
dialog.astro{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;padding:0;max-width:460px;width:min(92vw,460px);
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
dialog.astro::backdrop{background:rgba(3,2,8,.65);backdrop-filter:blur(2px)}
dialog.astro .m-head{padding:22px 24px 0}
dialog.astro .m-head h3{font-family:'Fraunces',serif;font-weight:500;font-size:19px}
dialog.astro .m-head .m-sub{color:var(--dim);font-size:12.5px;margin-top:4px;line-height:1.55}
dialog.astro .m-body{padding:16px 24px 4px}
dialog.astro .m-body .field{margin-bottom:12px}
dialog.astro .m-body .field label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
dialog.astro .m-body .field input,
dialog.astro .m-body .field textarea,
dialog.astro .m-body .field select{width:100%}
dialog.astro .m-body .hint{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.5}
dialog.astro .m-body .hint.live{color:var(--sel)}
dialog.astro .m-err{color:var(--red);font-size:12.5px;padding:0 24px;min-height:16px}
dialog.astro .m-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 24px 22px}
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.switchrow:last-of-type{border-bottom:0}
.switchrow .sr-d{color:var(--dim);font-size:11.5px;margin-top:2px;line-height:1.4}
.toggle{width:38px;height:21px;border-radius:999px;background:rgba(139,132,184,.3);
  position:relative;flex:none;border:0;cursor:pointer;transition:background .15s}
.toggle.on{background:var(--gold)}
.toggle::after{content:'';position:absolute;top:2.5px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--ink);transition:left .15s}
.toggle.on::after{left:19px;background:#1a1206}
.code-reveal{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(110,231,216,.08);border:1px dashed var(--sel);color:var(--sel);
  border-radius:8px;padding:8px 12px;font-size:13.5px;letter-spacing:.05em;
  user-select:all;word-break:break-all}