/* ============================================================================
   ByteCosts — Ledger Theme
   A numbers-first design language for cost & calculation tools.
   Warm paper · near-black ink · teal primary · burnt-orange signal.
   Type unified with the main site: self-hosted IBM Plex Sans + IBM Plex Mono.
   ============================================================================ */

/* Self-hosted IBM Plex (the same woff2 the React app serves from /fonts).
   Replaces the former Google Fonts @import so the research pages match the main
   site and add no third-party font request to the critical path. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-500.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-600.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-sans-700.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-400-italic.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-600.woff2") format("woff2");}

:root {
  /* ---- ink / warm-neutral ramp (paper → ink) ---- */
  --bc-ink-000:#ffffff; --bc-ink-025:#faf8f1; --bc-ink-050:#f1ede1;
  --bc-ink-075:#e8e2d5; --bc-ink-100:#dbd4c4; --bc-ink-200:#c4bca9;
  --bc-ink-300:#a89f8b; --bc-ink-400:#8b8473; --bc-ink-500:#6b6253;
  --bc-ink-600:#544d40; --bc-ink-700:#423b31; --bc-ink-800:#2a251e;
  --bc-ink-900:#16130e;

  /* ---- teal primary ramp ---- */
  --bc-teal-025:#eaf3f1; --bc-teal-050:#d5e8e4; --bc-teal-100:#c3e0da;
  --bc-teal-200:#8fc7bd; --bc-teal-300:#4fa597; --bc-teal-400:#14a596;
  --bc-teal-500:#0e7268; --bc-teal-600:#0a4f47; --bc-teal-700:#073b35;

  /* ---- semantic ---- */
  --bc-signal-025:#fbede6; --bc-signal-500:#c2410c; --bc-signal-700:#9a340a; /* down / alert / sale */
  --bc-up-025:#eef7f0;     --bc-up-500:#15803d;     --bc-up-700:#0f5e2c;     /* positive / live */
  --bc-warn-025:#fdf4e3;   --bc-warn-500:#b45309;   --bc-warn-700:#854110;

  /* ---- role aliases ---- */
  --paper:var(--bc-ink-025);
  --paper-2:var(--bc-ink-050);
  --card:#ffffff;
  --ink:var(--bc-ink-900);
  --ink-2:var(--bc-ink-700);
  --ink-soft:var(--bc-ink-500);
  --dim:var(--bc-ink-400);
  --rule:var(--bc-ink-900);        /* hard editorial rule */
  --rule-soft:var(--bc-ink-100);
  --rule-faint:var(--bc-ink-075);
  --accent:var(--bc-teal-500);
  --accent-deep:var(--bc-teal-600);
  --accent-bright:var(--bc-teal-400);
  --signal:var(--bc-signal-500);
  --up:var(--bc-up-500);
  --heading:var(--bc-ink-900);

  /* ---- type ---- */
  --disp:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- radius / borders ---- */
  --r-xs:5px; --r-sm:7px; --r-md:10px; --r-lg:14px;
  --bw-hair:1px; --bw:1.5px; --bw-heavy:2px;

  /* ---- elevation (warm-tinted) ---- */
  --sh-sm:0 1px 2px rgba(22,19,14,.06);
  --sh-md:0 6px 22px rgba(22,19,14,.09);
  --sh-lg:0 18px 48px rgba(22,19,14,.14);

  --transition:180ms cubic-bezier(.4,0,.2,1);
  --max:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body{
  margin:0; font-family:var(--read);
  color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.55;
}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{color:var(--heading); margin:0; line-height:1.05;}
h1{font-family:var(--disp); font-weight:800; font-size:clamp(2.6rem,5.5vw,4.4rem); letter-spacing:-.02em;}
h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.015em;}
h3{font-family:var(--read); font-weight:600; font-size:1.3rem; letter-spacing:-.01em;}
h4{font-family:var(--read); font-weight:600; font-size:1.08rem;}
h1 em,h2 em{font-style:italic; color:var(--accent);}
a{color:var(--accent-deep); text-decoration:none; transition:color var(--transition);}
a:hover{color:var(--accent);}
p{margin:0;}

.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.serif{font-family:var(--read);}
.display{font-family:var(--disp);}
.eyebrow{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);}
.muted{color:var(--ink-soft);}
.dimmed{color:var(--dim);}

/* delta colors */
.up{color:var(--up);} .down{color:var(--signal);}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.section{padding:72px 0;}
@media(max-width:640px){ .wrap{padding:0 18px;} .section{padding:48px 0;} }

/* ---------- buttons (hard-edged, mono labels) ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:500;
  font-size:.85rem; letter-spacing:.02em; padding:11px 18px; border-radius:var(--r-sm);
  border:var(--bw) solid var(--ink); cursor:pointer; transition:all var(--transition);
  text-decoration:none; line-height:1; background:var(--card); color:var(--ink);}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;}
.btn-ghost{background:var(--card); color:var(--ink);}
.btn-sm{padding:8px 13px; font-size:.78rem;}

/* text link with arrow */
.link-arrow{font-family:var(--mono); font-size:.82rem; color:var(--accent-deep); border-bottom:var(--bw-hair) solid var(--accent); padding-bottom:2px;}
.link-arrow:hover{color:var(--accent);}

/* ---------- chips ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.08em; padding:4px 9px; border-radius:var(--r-xs); text-transform:uppercase; border:var(--bw-hair) solid transparent;}
.chip-live{background:var(--bc-up-025); color:var(--up); border-color:#bfe3c8;}
.chip-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--up); animation:bc-pulse 1.6s infinite;}
.chip-accent{background:var(--bc-teal-025); color:var(--accent-deep); border-color:var(--bc-teal-100);}
.chip-soon{background:var(--paper-2); color:var(--ink-soft); border-color:var(--rule-soft);}
@keyframes bc-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- confidence grades ---------- */
.grade{display:inline-grid; place-items:center; min-width:26px; height:21px; padding:0 6px; border-radius:var(--r-xs);
  font-size:.7rem; font-weight:600; font-family:var(--mono); border:var(--bw-hair) solid;}
.grade.a-plus,.grade.a{background:var(--bc-up-025); color:var(--up); border-color:#bfe3c8;}
.grade.c{background:var(--bc-teal-025); color:var(--accent-deep); border-color:var(--bc-teal-100);}
.grade.d{background:var(--bc-signal-025); color:var(--signal); border-color:#f1cdbb;}

/* ---------- cards ---------- */
.card{background:var(--card); border:var(--bw) solid var(--rule-soft); border-radius:var(--r-md);
  padding:24px; transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);}
.card.hover:hover{border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--sh-md);}
.card .ico{width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--card); border:var(--bw-hair) solid var(--rule-soft); color:var(--accent); margin-bottom:16px;}

/* ---------- stat ---------- */
.stat .n{font-family:var(--mono); font-weight:500; color:var(--heading); font-size:2rem; line-height:1; letter-spacing:-.03em;}
.stat .n .u{color:var(--accent); font-size:.55em; font-weight:400;}
.stat .l{font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px;}

/* ---------- table ---------- */
.tbl{width:100%; border-collapse:collapse; font-family:var(--read); font-size:.95rem;}
.tbl thead th{text-align:left; font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:11px 16px; border-bottom:var(--bw) solid var(--ink); background:var(--paper-2);}
.tbl tbody td{padding:13px 16px; border-bottom:var(--bw-hair) solid var(--rule-soft); color:var(--ink);}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background var(--transition);}
.tbl tbody tr:hover{background:var(--paper-2);}
.tbl .num{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; font-size:.9rem;}
.tbl .flag{background:var(--bc-teal-025);}

/* ---------- cta band ---------- */
.cta-band{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:32px 40px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background-image:radial-gradient(circle at 92% 18%, rgba(20,165,150,.16), transparent 46%);}
.cta-band p{margin:0; font-family:var(--read); font-size:1.1rem; color:#e8e2d5; flex:1; min-width:240px;}

/* ---------- inputs / sliders ---------- */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:999px; background:var(--rule-soft); outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:3px solid var(--card); box-shadow:0 0 0 1.5px var(--accent); transition:transform var(--transition);}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--card);}
select,input[type=text],input[type=number]{font-family:var(--mono); font-size:.88rem; color:var(--ink);
  padding:11px 13px; border:var(--bw) solid var(--ink); border-radius:var(--r-sm); background:var(--card); width:100%;}
select:focus,input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent);}
::placeholder{color:var(--dim);}

/* ---------- grid backdrop ---------- */
.grid-bg{background-image:linear-gradient(var(--rule-faint) 1px,transparent 1px),linear-gradient(90deg,var(--rule-faint) 1px,transparent 1px);
  background-size:44px 44px; background-position:center;}