/* Fonts are self-hosted (latin subset, variable weight) so visitors' browsers never contact Google Fonts.
   Space Grotesk and JetBrains Mono are licensed under the SIL Open Font License. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); }

:root {
  --bg: #050706;
  --surface: #0b100d;
  --surface-2: #111914;
  --border: #1c2a21;
  --text: #e9f3ed;
  --muted: #8ca397;
  --faint: #56685e;
  --green: #22e07a;
  --green-2: #16b862;
  --green-glow: rgba(34, 224, 122, 0.16);
  --grid: #18241d;
  --radius: 14px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(900px 500px at 80% -10%, rgba(34,224,122,.09), transparent 60%);
  color: var(--text);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.g { color: var(--green); }
.muted { color: var(--muted); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(5,7,6,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { text-decoration: none; color: var(--muted); font-size: 14px; }
.topbar nav a:hover { color: var(--green); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--green); color: #031a0c; font-family: var(--mono); font-size: 16px; }
.logo.small { font-size: 16px; }
.logo.small .logo-mark { width: 22px; height: 22px; font-size: 13px; }

/* hero */
.hero { padding: 36px 0 28px; max-width: 760px; }
.hero h1 { margin-top: 0; }
h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 18px; }
.lede { color: var(--muted); font-size: 18px; margin: 0; }

/* cards & layout */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.inputs { display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
select, input[type=number] {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font: 15px var(--sans);
}
input[type=number] { font-family: var(--mono); }
select:focus, input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
input[type=range] { accent-color: var(--green); width: 100%; }
.num-slider { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: center; }

.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 4px; }
.seg button { background: none; border: 0; color: var(--muted); padding: 9px; border-radius: 8px; font: 600 14px var(--sans); cursor: pointer; }
.seg button.on { background: var(--green); color: #031a0c; }

fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 6px; margin: 0; }
legend { padding: 0 6px; font-size: 13px; color: var(--text); }
.hint { color: var(--faint); font-size: 12px; margin-left: 4px; }
.fmt-row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.fmt-row:last-child { border-bottom: 0; }
.fmt-row .check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.fmt-row input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; }
.fmt-row input[type=number] { padding: 7px 9px; font-size: 14px; }
.fmt-row.off .check span { color: var(--faint); }
.fmt-row .na { font-size: 11px; color: var(--faint); font-family: var(--mono); }

/* results */
.results { position: sticky; top: 76px; border-color: #1f3a2a; box-shadow: 0 0 0 1px var(--green-glow), 0 20px 60px -30px rgba(34,224,122,.25); }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
.hero-num { font-family: var(--mono); font-weight: 600; font-size: clamp(40px, 6vw, 60px); line-height: 1.1; margin: 6px 0 18px; color: var(--green); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.stats b { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.results h3 { font-size: 14px; font-weight: 600; margin: 22px 0 10px; }

/* bars */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 96px; gap: 12px; align-items: center; font-size: 14px; padding: 3px 0; border-radius: 6px; }
.bar-row:hover { background: var(--surface-2); }
.bar-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { height: 10px; background: var(--grid); border-radius: 0 4px 4px 0; }
.bar-row .fill { height: 100%; background: var(--green); border-radius: 0 4px 4px 0; min-width: 2px; transition: width .35s ease; }
.bar-row .val { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.bar-row.dim .fill { background: var(--faint); }
.bar-row.dim .name, .bar-row.dim .val { color: var(--faint); }
.rank .bar-row { grid-template-columns: 28px 190px 1fr 110px; }
.rank .pos { font-family: var(--mono); color: var(--faint); font-size: 13px; }
.rank .bar-row.current .name { color: var(--green); font-weight: 600; }
.tag { display: inline-block; font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }

.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn { background: var(--green); color: #031a0c; border: 0; border-radius: 10px; padding: 10px 16px; font: 600 14px var(--sans); cursor: pointer; }
.btn:hover { background: #3cf090; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--green); color: var(--green); }
.fine { font-size: 12px; color: var(--faint); margin: 16px 0 0; }

/* blocks */
.block { padding-top: 64px; }
.block-head { margin-bottom: 16px; }
.block-head h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 4px; }
.block-head p { color: var(--muted); margin: 0; }

/* projection */
.proj-controls { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
label.inline { display: flex; align-items: center; gap: 12px; min-width: 300px; }
label.inline input { width: 180px; }
output { font-family: var(--mono); color: var(--text); min-width: 44px; }
.proj-total { text-align: right; }
.proj-total b { font-family: var(--mono); font-size: 22px; color: var(--green); }
.chart-wrap { position: relative; }
#proj { width: 100%; height: 260px; display: block; }
#proj text { fill: var(--muted); font: 11px var(--mono); }
.tip { position: absolute; pointer-events: none; background: #0f1813; border: 1px solid #284634; border-radius: 8px; padding: 7px 10px; font-size: 12px; white-space: nowrap; transform: translate(-50%, -110%); }
.tip b { font-family: var(--mono); display: block; font-size: 14px; }
.table-view { margin-top: 10px; }
.table-view summary { cursor: pointer; color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
td { font-family: var(--mono); }

/* goal */
.goal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.prefix { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding-left: 12px; }
.prefix span { color: var(--muted); font-family: var(--mono); }
.prefix input { border: 0; background: transparent; font-size: 20px; }
.goal-out { display: grid; gap: 2px; }

/* how / faq */
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; color: var(--muted); counter-increment: s; }
.steps li::before { content: '0' counter(s); display: block; font-family: var(--mono); color: var(--green); margin-bottom: 8px; }
.steps b { color: var(--text); }
.faq { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary::marker { color: var(--green); }
.faq p { color: var(--muted); margin: 8px 0 0; }

.foot { margin-top: 96px; border-top: 1px solid var(--border); padding: 48px 0 32px; background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 12px 0 0; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.foot-col a { color: var(--muted); text-decoration: none; font-size: 14px; width: fit-content; }
.foot-col a:hover { color: var(--green); }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.foot-bottom p { color: var(--faint); font-size: 12px; margin: 0; }
.foot .logo { text-decoration: none; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--green); color: #031a0c; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; }

@media (max-width: 860px) {
  .calc, .goal { grid-template-columns: 1fr; }
  .results { position: static; }
  .steps { grid-template-columns: 1fr; }
  .topbar nav { gap: 14px; }
}
@media (max-width: 560px) {
  .row2 { grid-template-columns: 1fr; }
  .num-slider { grid-template-columns: 1fr 110px; }
  .bar-row { grid-template-columns: 100px 1fr 80px; font-size: 13px; }
  .rank .bar-row { grid-template-columns: 22px 120px 1fr 84px; }
  label.inline { min-width: 0; flex-wrap: wrap; }
  .hero { padding-top: 40px; }
}

/* fixes */
[hidden] { display: none !important; }
.mode-app, .mode-web { display: grid; gap: 16px; }
.bar-row .track, .bar-row .fill { display: block; }
.calc, .goal, .row2, .stats, .steps { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.calc, .goal, .row2 { --cols: 2; }
.stats, .steps { --cols: 3; }
@media (max-width: 860px) { .calc, .goal, .steps { --cols: 1; } }
@media (max-width: 560px) { .row2 { --cols: 1; } .stats { gap: 6px; } .stats > div { padding: 8px; } .stats b { font-size: 14px; } }
select { min-width: 0; text-overflow: ellipsis; }

/* ranking divider, projection note, goal list, sources */
.bar-divider { grid-column: 1 / -1; margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--faint); }
.proj-note { margin: 0 0 14px; font-size: 14px; }
.proj-note b { color: var(--text); }
.warn { color: #e0b422; }
.goal-out .goal-list { margin-top: 10px; }
.goal-list .bar-row { grid-template-columns: 170px 1fr 70px; }
.cite { font-family: var(--mono); font-size: 12px; color: var(--green); text-decoration: none; margin-left: 2px; }
.cite:hover { text-decoration: underline; }
.sources { margin-top: 22px; }
.sources h3 { font-size: 16px; margin: 0 0 8px; }
.sources ol { margin: 0; padding-left: 22px; color: var(--muted); font-size: 14px; display: grid; gap: 6px; }
.sources li:target { color: var(--text); }
.sources a { color: var(--text); }
.sources a:hover { color: var(--green); }
.sources .muted { font-size: 13px; }

/* custom select chevron, inset from the edge */
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238ca397' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}

/* tags sit under the network name so long labels never truncate */
.bar-row .name .tag { display: block; width: fit-content; max-width: 100%; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; }
.goal-list .bar-row { grid-template-columns: 150px 1fr 64px; }

/* sliders: no box outline on mouse focus, rounded ring for keyboard focus */
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; }

/* "based on your inputs above" strip in projection and goal cards */
.ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); }
.ctx-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ctx a { margin-left: auto; color: var(--green); text-decoration: none; font-weight: 600; }
.ctx a:hover { text-decoration: underline; }
.goal-ctx { grid-column: 1 / -1; margin: 0; }
.goal-in { display: grid; gap: 16px; align-self: start; }
.goal-list .bar-row { grid-template-columns: 190px 1fr 64px; }
@media (max-width: 560px) { .goal-list .bar-row { grid-template-columns: 130px 1fr 56px; } }

/* mobile menu */
.menu-btn { display: none; width: 40px; height: 40px; margin-right: -8px; background: none; border: 0; border-radius: 8px; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; content: ''; }
.menu-btn span { top: 19px; }
.menu-btn span::before { left: 0; top: -6px; }
.menu-btn span::after { left: 0; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-btn:focus { outline: none; }
.menu-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.menu-btn:hover { background: var(--surface-2); }
@media (max-width: 720px) {
  .topbar-inner { position: relative; }
  .menu-btn { display: block; }
  .topbar nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px 16px 12px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 18px 30px rgba(0,0,0,.55); }
  .topbar nav.open { display: flex; }
  .topbar nav a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--grid); }
  .topbar nav a:last-child { border-bottom: 0; }
}
.web-note { margin: 0; }
.foot-bottom a { color: var(--muted); text-decoration: none; }
.foot-bottom a:hover { color: var(--green); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.link-btn:hover { color: var(--green); }

/* Ad slots (filled by ads.js). Hidden until AdSense marks the unit filled, so nothing shows before
   approval or when no ad is available. Kept away from buttons and inputs to avoid accidental clicks. */
/* Collapsed to zero height (not display:none) so AdSense can still measure the slot's width. */
.ad { height: 0; overflow: hidden; margin: 0; }
.ad:has(ins[data-ad-status="filled"]) { height: auto; overflow: visible; margin-top: 40px; }
.ad:has(ins[data-ad-status="filled"])::before { content: 'Advertisement'; display: block; margin-bottom: 6px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }
.prose .ad:has(ins[data-ad-status="filled"]) { margin: 28px 0; }
/* Grid parents still add a gap for an empty slot; pull it back until the slot is filled. */
.article-side .ad { margin-top: -16px; }
.article-side .ad:has(ins[data-ad-status="filled"]) { margin-top: 0; }
.post-grid .ad-wide { grid-column: 1 / -1; margin-top: -14px; }
.post-grid .ad-wide:has(ins[data-ad-status="filled"]) { margin-top: 0; }

/* network calculator links under the hero, and the per-network guide section */
.calc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0 0; font-size: 14px; }
.calc-links span { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.calc-links a { color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.calc-links a:hover, .calc-links a[aria-current="page"] { color: var(--green); border-color: var(--green-2); }
.network-guide { padding: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.network-guide h3 { font-size: 17px; margin: 0 0 8px; }
.network-guide p { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
.network-guide a { color: var(--green); }
.network-guide strong { color: var(--text); }
@media (max-width: 860px) { .network-guide { grid-template-columns: 1fr; gap: 18px; } }

/* $ goal field: draw the focus ring on the whole box, not the inner input */
.prefix:focus-within { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
.prefix input:focus { outline: none; }