/* Shared base for the tool pages (dashboard, prices, datacentres).
   Loaded BEFORE each page's own stylesheet. Theme, reset, typography,
   layout primitives, form inputs, source tables and mobile hardening live
   here so the tool pages can't drift apart. Page CSS only adds page-specific
   components (.svc, .track, .heat, …). index.html keeps its own look. */
:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d2129; --line:#2a2f3a;
  --ink:#e8eaed; --muted:#9aa3b2; --faint:#6b7280;
  --accent:#5bd1a6; --accent-ink:#0f1115; --warn:#e0b341; --link:#7db7ff; --hot:#ff6b57;
  --radius:10px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;   /* native form controls (month picker icon, popups, spinners) render dark */
}
*{box-sizing:border-box}
/* The hidden attribute must beat class-level display rules (.more-body{display:flex},
   .ro-grid{display:grid}) — without this those panels show even when hidden. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;font-size:15px}
a{color:var(--link)}
.wrap{max-width:980px;margin:0 auto;padding:24px 18px 80px}
header.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
h1{font-size:1.5rem;margin:0;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:26px 0 8px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:600}
h3{font-size:1rem;margin:0 0 4px}
.sub{color:var(--muted);font-size:.9rem;margin:2px 0 0}
.back{font-size:.85rem;color:var(--muted);text-decoration:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
.seg button{background:transparent;border:0;color:var(--muted);padding:7px 12px;font-size:.85rem;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.badge{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.badge.metered{color:var(--accent);border-color:var(--accent)}
.badge.licensed{color:var(--warn);border-color:var(--warn)}
label.f{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px}
input[type=number],input[type=month]{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:8px 10px;font-family:var(--mono);font-size:.92rem}
input[type=number]:focus,input[type=month]:focus{outline:2px solid var(--accent);outline-offset:0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat .big{font-size:1.5rem;font-family:var(--mono);letter-spacing:-.02em}
.stat .lab{font-size:.76rem;color:var(--muted);margin-top:2px}
table.src{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:8px}
table.src th,table.src td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.src th{color:var(--muted);font-weight:600}
/* value cells wrap at separators (nowrap crushed the label column mid-word) */
table.src td.val,table.src td.v{font-family:var(--mono);color:var(--accent)}
.foot{margin-top:24px;color:var(--faint);font-size:.78rem}
/* region / currency selector (shared, rendered by js/region.js) */
.region-bar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px}
.region-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.region-info strong{display:block;font-size:.95rem}
.region-info .sub{display:block}
.region-seg button{min-width:64px}
.region-seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.region-disclose{margin-top:10px;font-size:.84rem;color:var(--muted)}
.region-disclose summary{cursor:pointer;color:var(--link);width:max-content}
.region-ledger{margin:10px 0 0;padding-left:18px}
.region-ledger li{margin:6px 0}
.region-ledger b{color:var(--ink)}
/* mobile hardening */
input[type=number],input[type=month]{font-size:16px} /* ≥16px stops iOS zoom-on-focus */
table.src td,table.src th{overflow-wrap:anywhere}
/* labels break at word boundaries only, never mid-word */
table.src td:first-child,table.src th:first-child{overflow-wrap:normal;min-width:120px}
canvas,table,img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:680px){
  .seg button{min-height:42px}
  table.src{font-size:.78rem}
}