/* Site shell: header, footer, article typography.
   Shares the token names calculator.css defines, so the widget and the page
   around it stay in step in both themes. Tokens are declared here too, because
   most pages load this stylesheet on its own. */

:root {
  --bt-bg: #ffffff;
  --bt-surface: #f6f7f9;
  --bt-surface-2: #eceef2;
  --bt-line: #dde0e6;
  --bt-ink: #14171f;
  --bt-muted: #626878;
  --bt-accent: #2f6df6;
  --bt-accent-ink: #ffffff;
  --bt-radius: 12px;
  --shell: 820px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bt-bg: #0f1218;
    --bt-surface: #171b23;
    --bt-surface-2: #1f242e;
    --bt-line: #2b313d;
    --bt-ink: #e8ebf1;
    --bt-muted: #98a0b3;
    --bt-accent: #5b8cff;
    --bt-accent-ink: #0b0e14;
  }
}

:root[data-theme="dark"] {
  --bt-bg: #0f1218;
  --bt-surface: #171b23;
  --bt-surface-2: #1f242e;
  --bt-line: #2b313d;
  --bt-ink: #e8ebf1;
  --bt-muted: #98a0b3;
  --bt-accent: #5b8cff;
  --bt-accent-ink: #0b0e14;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bt-bg);
  color: var(--bt-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 18px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: var(--bt-accent);
  color: var(--bt-accent-ink);
  padding: 10px 16px;
  border-radius: 8px;
}

a { color: var(--bt-accent); }
a:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; border-radius: 3px; }

.btn {
  display: inline-block;
  background: var(--bt-accent);
  color: var(--bt-accent-ink);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
}
.btn:hover { text-decoration: underline; }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--bt-line);
  background: var(--bt-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  color: var(--bt-ink);
  text-decoration: none;
}

.brand img { border-radius: 7px; height: 32px; width: 32px; object-fit: contain; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px; }

.site-nav a {
  color: var(--bt-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 8px;
}

.site-nav a:hover { background: var(--bt-surface-2); color: var(--bt-ink); }
.site-nav a[aria-current="page"] { color: var(--bt-ink); background: var(--bt-surface-2); }

/* ---------- article ---------- */

.page { padding: 30px 0 60px; }

h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.2;
  margin: 0 0 12px;
  text-wrap: balance;
}

.byline {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--bt-muted);
}

.prose { max-width: 100%; }

.prose h2 {
  font-size: clamp(22px, 3.4vw, 27px);
  line-height: 1.28;
  margin: 2.1em 0 .5em;
  text-wrap: balance;
  scroll-margin-top: 76px;
}

.prose h3 {
  font-size: clamp(18px, 2.6vw, 21px);
  margin: 1.7em 0 .45em;
  scroll-margin-top: 76px;
}

.prose h4 { font-size: 17px; margin: 1.5em 0 .4em; }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--bt-muted); }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 1.5em 0;
}

.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 14px; color: var(--bt-muted); margin-top: .5em; }

.prose blockquote {
  margin: 1.5em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--bt-accent);
  color: var(--bt-muted);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--bt-surface-2);
  padding: .15em .4em;
  border-radius: 5px;
}

.prose hr { border: 0; border-top: 1px solid var(--bt-line); margin: 2.4em 0; }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 1.6em 0;
  border: 1px solid var(--bt-line);
  border-radius: 10px;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  min-width: 460px;
}

.prose th, .prose td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--bt-line);
  vertical-align: top;
}

.prose thead th {
  background: var(--bt-surface-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bt-muted);
  white-space: nowrap;
}

.prose tbody tr:last-child td { border-bottom: 0; }

/* ---------- table of contents ---------- */

.toc {
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  padding: 16px 20px;
  margin: 0 0 34px;
}

.toc h2 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bt-muted);
}

.toc ul { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: .3em; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- lead image ---------- */

/* The ratio is reserved up front so the heading never jumps as it loads. */
.hero {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--bt-radius);
  display: block;
  margin: 0 0 30px;
  background: var(--bt-surface-2);
}

/* ---------- listing ---------- */

.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.card-list a {
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 14px;
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  text-decoration: none;
  color: inherit;
}

.card-list img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  background: var(--bt-surface-2);
}

@media (min-width: 620px) {
  .card-list a { grid-template-columns: 168px 1fr; }
}

.card-list a:hover { border-color: var(--bt-accent); }
.card-list h2 { margin: 0 0 5px; font-size: 18px; color: var(--bt-accent); }
.card-list p { margin: 0; font-size: 15px; color: var(--bt-muted); }

/* ---------- calculator spacing on content pages ---------- */

.bt { margin: 0 0 42px; }
.bt-meta { margin: 0 0 14px; font-size: 14px; color: var(--bt-muted); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--bt-line);
  background: var(--bt-surface);
  padding: 30px 0 44px;
  margin-top: 40px;
}

.footer-brand { margin: 0 0 10px; font-weight: 700; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }

.site-footer nav a {
  color: var(--bt-muted);
  text-decoration: none;
  font-size: 15px;
  padding: 5px 10px 5px 0;
}

.site-footer nav a:hover { color: var(--bt-ink); text-decoration: underline; }

.footer-legal a { font-size: 13.5px; }

.footer-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bt-muted);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.lede {
  font-size: 18px;
  color: var(--bt-muted);
  margin: 0 0 26px;
  max-width: 62ch;
}