/* ============================================================================
   genproof router — admin design system (editorial light)
   Shared by index.html, user.html, pricing.html, login.html.
   Restyles the existing class vocabulary so pages need no JS changes; also
   defines the app shell (masthead / nav / tabs). Legacy CSS variables are
   aliased to editorial values so inline var(--…) references keep working.
   ============================================================================ */

@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/Fraunces-500-italic.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Fraunces-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Fraunces-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/IBMPlexSans-600.woff2') format('woff2')}

:root{
  --paper:#f6f2e9; --paper-2:#efe9db; --wash:#ece5d4; --card:#fbf9f3;
  --ink:#1c1a15; --ink-2:#403c33; --muted:#78715f;
  --rule:#ddd4c1; --rule-2:#cfc5ad; --rule-ink:#1c1a15;
  --accent:#d8452a; --accent-2:#b3371f;
  --green:#2f7d55; --amber:#9a7412; --red:#a52b22; --violet:#5b4a86; --blue:#2b5b9a;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --tint:#faf3df; /* amber tint for the "forced" ring */
  /* legacy aliases (inline var(--…) refs in the pages) */
  --bg:var(--paper); --panel:var(--card); --panel2:var(--wash);
  --border:var(--rule); --text:var(--ink); --yellow:var(--amber);
}
/* ---- dark theme (warm) — set by theme.js via data-theme on <html> ---- */
:root[data-theme="dark"]{
  --paper:#17150f; --paper-2:#201c15; --wash:#262117; --card:#201c15;
  --ink:#ece5d5; --ink-2:#c8c0ae; --muted:#968d79;
  --rule:#332d22; --rule-2:#463f30; --rule-ink:#ece5d5;
  --accent:#e8613f; --accent-2:#f2794f;
  --green:#54b487; --amber:#cf9d3f; --red:#e26a5d; --violet:#a891d4; --blue:#639ad4;
  --tint:#2b2416;
}
html{color-scheme:light dark}
*{box-sizing:border-box;margin:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);padding:0}
.wrap{max-width:1680px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.wrap{padding:0 20px}}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
a:hover{color:var(--accent);border-color:var(--accent)}
code{font-family:var(--mono);font-size:.86em;background:var(--wash);padding:1px 6px;border-radius:2px}
::selection{background:var(--accent);color:#fff}

/* ---------- masthead + nav ---------- */
.masthead{padding:24px 0 0}
.masthead .top{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-.01em;line-height:1;color:var(--ink);border:0}
.wordmark:hover{color:var(--ink)}
.wordmark .r{font-style:italic;font-weight:500}
.masthead .meta{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;line-height:1.5}
.masthead .meta a{color:var(--ink)}
.rule-ink{border:0;border-top:2px solid var(--rule-ink);margin:13px 0 0}
.rule-hair{border:0;border-top:1px solid var(--rule-ink);margin:3px 0 0}
nav.tabs{display:flex;gap:24px;padding:12px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap}
nav.tabs a{color:var(--muted);border:0;padding-bottom:10px;position:relative}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a.on{color:var(--ink)}
nav.tabs a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.strip{border-top:1px solid var(--rule)}

/* ---------- headings ---------- */
h1{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.01em;line-height:1.1}
h2{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.005em;
   padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--rule);text-transform:none}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumb{font-family:var(--mono);font-size:12px;margin:14px 0 4px}
.crumb a{color:var(--muted);border:0}.crumb a:hover{color:var(--accent)}
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
section{padding:26px 0}
.muted{color:var(--muted)}
.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--amber)}
.note{color:var(--muted);font-size:12.5px;margin-top:8px}

/* ---------- layout blocks ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:24px}}
.panel{background:transparent;border:0;padding:0}
.panel+.panel{margin-top:26px}

/* ---------- stat cards → editorial figures ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card{background:transparent;border:0;border-left:1px solid var(--rule);border-radius:0;padding:16px 22px}
.card:first-child{border-left:0;padding-left:0}
.card .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .value{font-family:var(--serif);font-weight:600;font-size:33px;line-height:1.1;letter-spacing:-.02em;margin-top:6px}
.card .hint{color:var(--muted);font-size:12px;margin-top:3px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
   color:var(--muted);font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--rule-ink);white-space:nowrap}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:baseline}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--paper-2)}
td.num,th.num{text-align:right;font-family:var(--mono)}

/* ---------- provider tags (pills) ---------- */
.pill{display:inline-block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
      padding:2px 7px;border:1px solid var(--rule-ink);border-radius:0;background:transparent;color:var(--ink)}
.pill.bedrock{color:var(--blue);border-color:var(--blue)}
.pill.openai{color:var(--green);border-color:var(--green)}
.pill.azure_openai{color:var(--violet);border-color:var(--violet)}
.pill.anthropic,.pill.api_key{color:var(--accent-2);border-color:var(--accent-2)}
.pill.anthropic_oauth,.pill.subscription,.pill.openai_oauth{color:var(--amber);border-color:var(--amber)}
.pill.kimi_code,.pill.moonshot,.pill.glm{color:var(--violet);border-color:var(--violet);border-style:dashed}

/* ---------- buttons + inputs ---------- */
button,.btn{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--rule-ink);border-radius:0;padding:5px 11px;cursor:pointer}
button:hover,.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
button.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
button:disabled{opacity:.4;cursor:not-allowed}
button:disabled:hover{background:transparent;color:var(--ink)}
select,input{font-family:var(--mono);font-size:12.5px;background:var(--card);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:0;padding:5px 9px}
select:focus,input:focus{outline:none;border-color:var(--accent)}
input::placeholder{color:var(--rule-2)}
label.field{display:inline-flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.emailedit{background:transparent;color:var(--muted);border:1px solid transparent;border-radius:0;padding:3px 6px;font-family:var(--mono);font-size:12.5px;width:210px}
.emailedit:hover{border-color:var(--rule)}
.emailedit:focus{background:var(--card);color:var(--ink);border-color:var(--accent);outline:none}
.add-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.add-form input{min-width:150px}
.access-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- charts / bars / health ---------- */
svg text{fill:var(--muted);font-family:var(--mono);font-size:10px}
.bar{height:7px;border-radius:0;background:var(--wash);overflow:hidden;display:inline-block;width:90px;vertical-align:middle;border:1px solid var(--rule)}
.bar>span{display:block;height:100%}
.grid-health{display:flex;flex-direction:column}
.hcell{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--rule);background:transparent!important;font-family:var(--mono);font-size:12.5px}
.hcell:last-child{border-bottom:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dot.healthy,.dot.up{background:var(--green)}
.dot.degraded,.dot.deg{background:var(--amber)}
.dot.down{background:var(--red)}

/* ---------- inline chain (dashboard) ---------- */
.chain-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0 2px}
.chain-entry{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--rule);border-radius:0;padding:5px 9px}
.chain-entry.click{cursor:pointer}
.chain-entry.click:hover{border-color:var(--accent)}
.chain-entry.active{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.chain-entry.picked{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chain-entry.next{border-color:var(--rule-2);border-style:dashed}
.chain-entry.forced{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);background:var(--tint)}
.chain-entry .x{color:var(--muted);cursor:pointer;padding:0 2px}
.chain-entry .x:hover{color:var(--red)}
.chain-entry .mv{color:var(--muted);cursor:pointer;padding:0 2px;font-size:11px}
.chain-entry .mv:hover{color:var(--accent)}
.arrow{color:var(--rule-2);font-family:var(--mono)}
.lock{font-size:11px}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 1.6s infinite;display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- override toggle ---------- */
.override-row{display:flex;align-items:center;gap:8px;padding:8px 0 2px;font-size:13px;flex-wrap:wrap}
.toggle{position:relative;width:34px;height:18px;border-radius:9px;background:var(--wash);border:1px solid var(--rule-2);padding:0;cursor:pointer;transition:background .15s}
.toggle .knob{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:left .15s,background .15s}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on .knob{left:17px;background:#fff}

/* ---------- credentials ---------- */
.creds-box{background:var(--card);border:1px solid var(--rule);border-radius:0;padding:14px 16px;margin:6px 0 10px}
.creds-box table{font-size:13px}
.status-active{color:var(--green)}.status-disabled{color:var(--muted)}
.status-exhausted,.status-invalid{color:var(--red)}.status-downgraded{color:var(--amber)}

/* ---------- chain editor (user page) → editorial rings ---------- */
.chain-edit-row{border:0;border-top:1px solid var(--rule);border-radius:0;padding:16px 0;margin:0;background:transparent;position:relative}
.chain-edit-row:first-child{border-top:1px solid var(--rule-ink)}
.chain-edit-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fo-checks{margin-top:9px;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fo-check{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--ink);border:1px solid var(--rule-2);padding:1px 7px}
.fo-check input{width:auto;vertical-align:middle;accent-color:var(--accent)}
.fo-default{font-style:italic;border:0;padding:0;color:var(--muted)}

/* ---------- sub-tabs (user page sections) ---------- */
.subtabs{display:flex;gap:22px;margin:6px 0 4px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.subtabs a{color:var(--muted);border:0;padding:0 0 9px;position:relative;cursor:pointer}
.subtabs a:hover{color:var(--ink)}
.subtabs a.on{color:var(--ink)}
.subtabs a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-left:3px solid var(--accent);border-radius:0;padding:11px 16px;display:none;font-family:var(--mono);font-size:13px;z-index:50}

.tabpanel[hidden]{display:none}

/* theme-aware chart bars (SVG fill via class, so dark mode inverts) */
.cbar{fill:var(--ink)}
.cbar:hover{fill:var(--accent)}
.cbar.err{fill:var(--red)}

/* ---------- user cards (Users page: inline edit that wraps, never scrolls) ---------- */
.user-card{border-top:1px solid var(--rule);padding:18px 0}
.user-card:first-of-type{border-top:1px solid var(--rule-ink)}
.uc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.uc-name{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em}
.uc-name a{border:0;color:var(--ink)}
.uc-name a:hover{color:var(--accent)}
.uc-stat{font-family:var(--mono);font-size:12px;color:var(--muted)}
.uc-stat b{color:var(--ink);font-weight:500}
.uc-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 4px}
.uc-chain{margin-top:6px}

/* editorial explainer line */
.noteline{font-size:13px;color:var(--muted);margin-top:14px;border-left:2px solid var(--accent);padding:2px 0 2px 12px}
.spacer{flex:1}

/* ---------- compact number inputs (Pricing) ---------- */
.price{width:74px;min-width:0;text-align:right}
.add-form input.price{min-width:0;width:74px}

/* wide tables never push the page wide — their container scrolls instead */
.panel,.creds-box{overflow-x:auto}

/* ---------- mobile / small screens ---------- */
@media(max-width:760px){
  .wrap{padding:0 16px}
  .masthead{padding:18px 0 0}
  .wordmark{font-size:23px}
  .masthead .meta{font-size:10.5px}
  nav.tabs{gap:14px;font-size:11px;padding-top:10px}
  .cards{grid-template-columns:1fr 1fr}
  .card{padding:13px 14px}
  .card .value{font-size:26px}
  .card:nth-child(odd){border-left:0;padding-left:0}
  section{padding:20px 0;overflow-x:auto}
  h2{font-size:16px}
  .subtabs{gap:16px;font-size:11px}
  .uc-controls{gap:12px}
  .toast{left:12px;right:12px;bottom:12px}
}
@media(max-width:600px){
  /* stack the masthead so the meta (theme/sign-out) never gets cut off */
  .masthead .top{flex-direction:column;align-items:flex-start;gap:6px}
  .masthead .meta{margin-left:0;text-align:left}
  .wordmark{font-size:22px}
  .subtabs{overflow-x:auto;white-space:nowrap}
  .subtabs #dialect-switch{white-space:normal}
}
@media(max-width:430px){
  .cards{grid-template-columns:1fr}
  .card{border-left:0;padding-left:0}
}