/* ==============================================================================================
   Homefix.wiki design system — "Grid & Rule" (Swiss / International-Typographic, light only).
   Ported from design-options/option-2.html per Paulo's choice (epic-002 task-007/008), with the
   blue accent removed: links and logo use neutral ink; signal red is the single sparing accent.

   Rules of this file:
   - ALL look-and-feel flows from the custom properties below; retheme by editing tokens only.
   - Semantic class names only (.site-header, .article-card, .callout-safety) — no utility soup.
   - Strong element defaults first; overrides are rare and each carries a comment explaining why.
   ============================================================================================== */

:root {
  /* Palette — cool neutrals + one signal red. No blue anywhere (Paulo, 2026-07-04). */
  --color-bg: #ffffff;
  --color-panel: #f4f4f2; /* light card / result fill */
  --color-ink: #111214; /* near-black text, rules, solid buttons */
  --color-ink-2: #55585c; /* secondary text — 7:1 on white */
  --color-line: #d7d8d6; /* hairline grid rules */
  --color-line-2: #b7b9b7; /* input borders */
  --color-signal: #e4322b; /* the single red accent — use sparingly */
  --color-signal-dark: #c02019;
  --color-signal-bg: #fdf3f2; /* safety-callout fill */

  /* Type — grotesque sans for prose, monospace for labels/data (the "index" voice) */
  --font-sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout */
  --page-max-width: 1180px;
  --radius: 0px; /* hard corners — Swiss */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --header-height: 64px;

  /* Light-only site (Paulo, requirements): declare the scheme so dark-mode browsers don't
     force-darken the page or give form controls a dark UA fill — Firefox/iOS was reported rendering
     the page half dark (washed-out text, black search field). There is no dark theme by design. */
  color-scheme: light;
}

/* ---- Base ------------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Focus: one visible style for every interactive element (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Typography — shared margin logic for all headings and paragraphs -------------------- */
/* Headings open a block (space above, tight below); paragraphs close one (space below only).
   First children never push content away from its container edge. */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--space-4) 0 var(--space-1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 var(--space-2);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

h1 {
  font-size: 2.6rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 1.5rem;
}

/* H3 switches to small-caps-style labels: the Swiss direction marks minor headings by case,
   not size, so long articles scan as an index. */
h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h4,
h5,
h6 {
  font-size: 1rem;
}

/* Links: neutral ink, underlined so they stay distinguishable without color; red on hover. */
a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-line-2);
}

a:hover {
  color: var(--color-signal);
  text-decoration-color: currentColor;
}

ul,
ol {
  margin: 0 0 var(--space-2);
  padding-left: 1.4em;
}

blockquote {
  margin: var(--space-3) 0;
  padding: 0 0 0 var(--space-2);
  border-left: 2px solid var(--color-ink);
  color: var(--color-ink-2);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-panel);
  padding: 1px 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-4) 0;
}

/* Markdown tables (flexmark TablesExtension): hairline grid rules, mono header row —
   matches the "index" voice used elsewhere (.pagination, h3 small-caps labels). */
table {
  width: 100%;
  margin: var(--space-3) 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

th,
td {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

th {
  border-bottom: 2px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
}

td:first-child,
th:first-child {
  padding-left: 0;
}

td:last-child,
th:last-child {
  padding-right: 0;
}

/* flexmark table-cell alignment classes from `:---:`/`---:` header markers */
th[align="center"],
td[align="center"] {
  text-align: center;
}

th[align="right"],
td[align="right"] {
  text-align: right;
}

/* Monospace micro-labels (section numbers, read times, form labels) */
.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-2);
}

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

.site-header {
  border-bottom: 2px solid var(--color-ink);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 20;
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--color-ink); /* the wordmark stays ink; only the mark carries the accent */
}

.brand-mark {
  width: 22px;
  height: 22px;
  background: var(--color-signal);
  display: inline-block;
  position: relative;
  top: 3px;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--color-bg);
}

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.primary-nav .nav-link,
.primary-nav summary {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  list-style: none; /* hide the default details marker; we draw our own caret */
}

.primary-nav summary::-webkit-details-marker {
  display: none;
}

.primary-nav .nav-link:hover,
.primary-nav summary:hover {
  color: var(--color-signal);
}

/* Caret drawn with a mask so it inherits text color (themable without touching HTML) */
.primary-nav summary::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40 88l88 88 88-88' fill='none' stroke='black' stroke-width='24' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40 88l88 88 88-88' fill='none' stroke='black' stroke-width='24' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown[open] summary {
  color: var(--color-signal);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 230px;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  box-shadow: 4px 4px 0 rgba(17, 18, 20, 0.08); /* hard offset shadow — Swiss, not blurry */
  z-index: 30;
}

.nav-menu li a {
  display: block;
  padding: 9px 18px;
  font-size: 14px;
  text-decoration: none;
}

.nav-menu li a:hover {
  background: var(--color-panel);
  color: var(--color-signal);
}

.nav-menu-all {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
}

.nav-menu-all a {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Header search */
.site-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line-2);
  min-width: 210px;
}

.site-search input {
  border: 0;
  outline: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: var(--color-ink);
}

.site-search-button {
  border: 0;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
}

/* Phosphor magnifying-glass, masked so it follows the ink token */
.site-search-button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--color-ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='112' cy='112' r='72' fill='none' stroke='black' stroke-width='18'/%3E%3Cline x1='168' y1='168' x2='224' y2='224' stroke='black' stroke-width='18' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='112' cy='112' r='72' fill='none' stroke='black' stroke-width='18'/%3E%3Cline x1='168' y1='168' x2='224' y2='224' stroke='black' stroke-width='18' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-search-button:hover::before {
  background: var(--color-signal);
}

/* Measurement-system toggle: a hard-cornered segmented control matching the search box's hairline
   border. The active system is inverted (ink fill) so the current choice reads at a glance. */
.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--color-line-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
}

.unit-option {
  padding: 9px 12px;
  color: var(--color-ink-2);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.unit-option + .unit-option {
  border-left: 1px solid var(--color-line-2);
}

.unit-option:hover {
  color: var(--color-ink);
}

.unit-option.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* Mobile menu toggle — pure CSS (checkbox state), no JS. The checkbox is visually hidden but
   NOT display:none, so it stays keyboard-focusable (its focus ring shows on the label). */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;
}

/* ---- Main ---------------------------------------------------------------------------------- */

.site-main {
  min-height: 60vh; /* short pages (404, stubs) must not pull the footer into mid-viewport */
  padding-top: var(--space-5); /* breathing room below the sticky header rule so content never hugs the 2px line */
}

/* Standard section framing: hairline rule between horizontal bands */
.section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
}

.section-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-3);
}

/* ---- Hero ---------------------------------------------------------------------------------- */

.hero {
  border-bottom: 1px solid var(--color-line);
  /* Smaller top padding than content pages: .site-main already adds space-5 above; space-2 here
     brings the hero's total top space back to its designed space-6 (64px). */
  padding: var(--space-2) 0 var(--space-5);
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.98;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--color-ink-2);
  margin: var(--space-3) 0 var(--space-3);
  max-width: 44ch;
}

/* Prominent search: heavy ink frame + the one red action button */
.searchbar {
  display: flex;
  border: 2px solid var(--color-ink);
  max-width: 620px;
}

.searchbar input {
  flex: 1;
  border: 0;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-bg); /* explicit white so a dark-mode UA never fills it black */
  min-width: 0;
}

.searchbar input:focus {
  outline: none; /* the surrounding 2px ink frame already marks the focused control */
}

.searchbar button {
  border: 0;
  background: var(--color-signal);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 28px;
  cursor: pointer;
  font-family: var(--font-mono);
}

.searchbar button:hover {
  background: var(--color-signal-dark);
}

/* ---- Buttons ------------------------------------------------------------------------------- */

.button {
  display: inline-block;
  border: 0;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  background: var(--color-signal);
  color: #fff;
}

/* Accent variant: reserved for THE primary action of a page (search, calculate) */
.button-accent {
  background: var(--color-signal);
}

.button-accent:hover {
  background: var(--color-signal-dark);
}

/* Quiet variant: secondary actions, outline only */
.button-quiet {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.button-quiet:hover {
  background: var(--color-panel);
  color: var(--color-signal);
}

/* ---- Forms --------------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-bg);
}

/* Numeric fields hold a short number (a length, a count) — full-width stretch reads oddly wide. */
.field-number input {
  width: 20%;
  min-width: 90px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; /* replaced by the border treatment below so the frame stays crisp */
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* Inline validation: red frame on the control + terse mono error line beneath it */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-signal);
  box-shadow: inset 0 0 0 1px var(--color-signal);
}

.field-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-signal-dark);
  margin: 0;
}

/* ---- Cards --------------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.article-card {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.article-card .card-thumb {
  aspect-ratio: 3 / 2;
  background: var(--color-panel);
  position: relative;
  overflow: hidden;
}

.article-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card .card-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-decoration: none;
}

.article-card .card-body {
  padding: 18px;
}

.article-card .card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.article-card h3 {
  /* Card titles are prose-sized links, not the uppercase document-H3 label style */
  margin: var(--space-1) 0 0;
  font-size: 1.2rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.015em;
}

.article-card h3 a {
  text-decoration: none;
}

/* Compact link tiles (calculator chips, category tiles): collapsed-hairline grid.
   Each tile carries its OWN full border and overlaps its neighbours by 1px (negative margin), so
   adjacent tiles share a single hairline. The grid container has no border of its own, so a group
   with fewer tiles than columns (e.g. two calculators in a four-column row) ends in clean
   whitespace — no hairline floats across the empty cells. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tile {
  background: var(--color-bg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  text-decoration: none;
  border: 1px solid var(--color-line);
  /* Overlap the previous tile's edge so shared borders collapse to one hairline; empty grid cells
     carry no border, so partial rows/groups don't leave a floating line. */
  margin: -1px 0 0 -1px;
}

.tile:hover {
  background: var(--color-panel);
  color: var(--color-ink);
}

.tile h3 {
  margin: auto 0 0;
  font-size: 17px;
  text-transform: none; /* tile titles are names, not document-section labels */
  letter-spacing: -0.01em;
}

.tile .tile-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-2);
}

/* ---- Home page (epic-017): slim hero, featured-guide banner, wiki-style section grid ---------
   The landing page reads like a reference index, not a marketing splash: a compact hero, one
   full-width featured guide, then a hairline-ruled grid of browse/calculator/recent/seasonal cells.
   Reuses the shared spacing tokens, hairline rules, and the single signal red (kicker only). */

/* Compact the hero so the banner + grid below carry the page: smaller headline, tighter bottom. */
.hero-slim {
  padding: var(--space-2) 0 var(--space-4);
}

.hero-slim h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.02;
}

.hero-slim .hero-sub {
  font-size: 1.1rem;
  margin: var(--space-2) 0 var(--space-3);
}

/* Featured banner: hero image beside the guide text; a hairline rule closes the band. */
.featured {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-5) 0;
}

.featured-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.featured-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-panel); /* fills as an even panel when the guide has no hero image */
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The one banner accent: the "Featured guide" kicker in the site's single signal red. */
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-signal);
  margin-bottom: var(--space-2);
}

.featured-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  text-transform: none; /* a prose title, not the uppercase document-heading style */
}

.featured-title a {
  text-decoration: none;
}

.featured-excerpt {
  margin: 0 0 var(--space-3);
  max-width: 52ch;
  font-size: 1.1rem;
  color: var(--color-ink-2);
}

/* Read link: ink-underlined action, red on hover — mono to match the site's label voice. */
.featured-link {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 2px;
}

.featured-link:hover {
  color: var(--color-signal);
  border-color: var(--color-signal);
}

/* Section grid: multi-column on wide screens, single column on narrow. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.home-cell {
  min-width: 0; /* let long titles wrap instead of stretching the column */
}

/* Hairline-ruled link lists shared by the browse, calculators, and recent cells. */
.home-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.home-links li {
  border-bottom: 1px solid var(--color-line);
}

.home-links li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 12px 0;
  text-decoration: none;
  color: var(--color-ink);
}

.home-links li a:hover .home-link-label {
  color: var(--color-signal);
}

.home-link-label {
  font-size: 1.02rem;
}

.home-link-meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-2);
}

/* Cell footer link ("All categories →" etc.): quiet mono, red on hover. */
.home-cell-all {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-ink);
}

.home-cell-all:hover {
  color: var(--color-signal);
}

/* Seasonal cell: a small season label above a bulleted checklist. */
.home-cell-kicker {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-2);
}

.home-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.home-tips li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-2);
  font-size: 0.98rem;
}

/* Square ink bullet — the Grid & Rule marker, kept neutral so red stays the banner's alone. */
.home-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  background: var(--color-ink);
}

@media (max-width: 760px) {
  .featured-inner {
    grid-template-columns: 1fr; /* stack image over text on narrow screens */
    gap: var(--space-3);
  }

  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Inline measurements (span.measure, emitted by the {measure:} markdown tag) ------------ */

/* Italic + a dotted underline signals the value is interactive (click to copy) without shouting.
   Uses the secondary-ink token so it reads as an aside within body copy. */
.measure {
  font-style: italic;
  color: var(--color-ink-2);
  border-bottom: 1px dotted var(--color-line-2);
  cursor: pointer;
  white-space: nowrap;
}

.measure:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink-2);
}

/* Keyboard focus: the span is role="button", so give it the same visible ring as other controls. */
.measure:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

/* Brief confirmation flash after a successful copy (toggled by measure.js). */
.measure-copied {
  color: var(--color-signal);
  border-bottom-color: var(--color-signal);
}

/* ---- Callouts (emitted by the markdown renderer: aside.callout.callout-*) ------------------ */

.callout {
  border: 1px solid var(--color-line-2);
  border-left-width: 4px;
  padding: var(--space-2) 18px var(--space-2) 52px;
  margin: var(--space-3) 0;
  position: relative;
  font-size: 14px;
}

.callout .callout-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0 0 4px;
}

/* Icon slot: masked SVG inherits the callout accent color, so retheming stays CSS-only */
.callout::before {
  content: "";
  position: absolute;
  left: 18px;
  top: var(--space-2);
  width: 22px;
  height: 22px;
  background: currentColor;
}

/* Regional note: neutral ink accent (blue was removed from the palette), Phosphor globe */
.callout-region {
  border-left-color: var(--color-ink);
}

.callout-region::before {
  color: var(--color-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='black' stroke-width='16'/%3E%3Cellipse cx='128' cy='128' rx='40' ry='96' fill='none' stroke='black' stroke-width='16'/%3E%3Cline x1='37' y1='96' x2='219' y2='96' stroke='black' stroke-width='16'/%3E%3Cline x1='37' y1='160' x2='219' y2='160' stroke='black' stroke-width='16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='black' stroke-width='16'/%3E%3Cellipse cx='128' cy='128' rx='40' ry='96' fill='none' stroke='black' stroke-width='16'/%3E%3Cline x1='37' y1='96' x2='219' y2='96' stroke='black' stroke-width='16'/%3E%3Cline x1='37' y1='160' x2='219' y2='160' stroke='black' stroke-width='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.callout-region .callout-title {
  color: var(--color-ink);
}

/* Safety: the red accent earns its keep here — warning triangle + tinted fill */
.callout-safety {
  border-left-color: var(--color-signal);
  background: var(--color-signal-bg);
}

.callout-safety::before {
  color: var(--color-signal-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 32 L232 208 H24 Z' fill='none' stroke='black' stroke-width='16' stroke-linejoin='round'/%3E%3Cline x1='128' y1='108' x2='128' y2='152' stroke='black' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='128' cy='184' r='10' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 32 L232 208 H24 Z' fill='none' stroke='black' stroke-width='16' stroke-linejoin='round'/%3E%3Cline x1='128' y1='108' x2='128' y2='152' stroke='black' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='128' cy='184' r='10' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.callout-safety .callout-title {
  color: var(--color-signal-dark);
}

/* Above-the-fold safety disclaimer on YMYL articles (task-050, F-033). Reuses the safety-callout
   look (fill, triangle, red rule) for one visual language, but sits directly under the byline with
   its own vertical rhythm rather than the in-body callout's larger margins. */
.safety-disclaimer {
  margin: var(--space-3) 0;
}

.safety-disclaimer p:last-child {
  margin-bottom: 0;
}

/* ---- Partner block (Directory Engine "From our partners", task-054) ------------------------
   Deliberately set apart from editorial content: a panel fill and a full box border (editorial
   callouts use only a left rule), so readers can tell disclosed partner content from our own
   writing at a glance — disclosure, not disguise (F-022). */

.partner-block {
  border: 1px solid var(--color-line-2);
  background: var(--color-panel);
  padding: var(--space-2) 18px;
  margin: var(--space-4) 0;
}

.partner-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-2);
}

.partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hairline separators between items; none above the first. */
.partner-item + .partner-item {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.partner-link {
  font-weight: 600;
}

.partner-summary {
  font-size: 14px;
  color: var(--color-ink-2);
  margin: 4px 0 4px;
}

/* Attribution of the partner source — mono "index" voice, quiet. */
.partner-source {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}

/* ---- Affiliate recommendation block (F-009, tasks 023 + 042) ------------------------------
   Curated Amazon product cards shared by calculator results and article pages (one affiliateCards()
   DSL, so both surfaces look identical). A bordered panel with an explicit "affiliate" tag = FTC
   disclosure, not disguise. Never rendered when there are no matching/assigned products. */

.affiliate-block {
  border: 1px solid var(--color-line-2);
  background: var(--color-panel);
  padding: var(--space-2) 18px;
  margin: var(--space-4) 0;
}

/* Heading on the left, disclosure tag on the right, sharing one baseline. */
.affiliate-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.affiliate-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-ink-2);
  margin: 0;
}

/* FTC disclosure tag — quiet mono "index" voice, always present when the block renders. */
.affiliate-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-2);
}

.affiliate-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.affiliate-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

/* Hairline separators between cards; none above the first. */
.affiliate-item + .affiliate-item {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

/* PA-API product thumbnail; square-ish, held from shrinking, quiet frame. Absent (no element) when
   the product has no image, so the card falls back to the text-only layout cleanly (task-061). */
.affiliate-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}

/* min-width:0 lets long titles/notes wrap instead of forcing the row wider than the panel. */
.affiliate-item-body {
  flex: 1;
  min-width: 0;
}

/* Title and our verified badge share one line; the badge wraps under a long title on narrow rows. */
.affiliate-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.affiliate-title {
  font-weight: 600;
  margin: 0;
}

/* Our own editorial badge — a quiet outlined pill in the block's mono "index" voice, deliberately
   NOT styled like Amazon's badge art. Only rendered once human-verified (task-060/061). */
.affiliate-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  color: var(--color-ink-2);
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
}

.affiliate-note {
  font-size: 14px;
  color: var(--color-ink-2);
  margin: 4px 0 0;
}

/* "View →" reuses the site button, sized down and held from shrinking in the flex row. */
.affiliate-view {
  flex: none;
  padding: 9px 18px;
  font-size: 12px;
}

/* ---- Tables -------------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
}

th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-2);
  border-bottom: 2px solid var(--color-ink);
}

/* ---- Breadcrumbs ----------------------------------------------------------------------------- */

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
  padding: var(--space-2) 0;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-line-2);
}

.breadcrumbs a {
  color: var(--color-ink-2);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-signal);
}

/* ---- Article page ---------------------------------------------------------------------------- */
/* A single measured reading column inside the full-width .wrap, so long-form text stays legible. */

.article {
  max-width: 720px;
  padding-bottom: var(--space-5);
}

.article-title {
  margin-top: 0;
}

.article-meta {
  margin: var(--space-2) 0 var(--space-1);
}

.article-byline {
  color: var(--color-ink-2);
  font-size: 15px;
  margin: 0 0 var(--space-3);
}

.article-byline a {
  color: var(--color-ink);
}

.article-hero {
  margin: var(--space-2) 0 var(--space-1);
}

.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color-line);
}

.article-hero-credit {
  margin: 8px 0 var(--space-3);
  color: var(--color-ink-2);
}

.article-hero-credit a {
  color: var(--color-ink-2);
}

/* Long-form body: larger type and looser leading than the site default for sustained reading. */
/* ---- Static prose pages: About + legal (task-049) -----------------------------------------
   A single readable column matching the article measure, with the site's default heading/paragraph
   rhythm. No page-specific type overrides — these pages ride the global H1-H6/P defaults so they
   stay in lockstep with the design system. */
.legal-page {
  max-width: 720px;
  padding-bottom: var(--space-5);
  font-size: 17px;
  line-height: 1.7;
}

.legal-page > :first-child {
  margin-top: 0;
}

/* "Last updated …" footer line, set apart from the body by a top rule. */
.legal-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line-2);
  color: var(--color-ink-2);
}

.article-body {
  font-size: 17px;
  line-height: 1.7;
}

.article-body > :first-child {
  margin-top: 0;
}

/* Generated illustrations (emitted by the markdown renderer: figure.illustration > img).
   Margin is set on both axes to override the browser's default figure margin (1em 40px)
   and match the vertical rhythm of the other block elements (blockquote, callout).
   70% width, centered (Paulo, task-083): the source PNGs are 1536px wide, so at 70% of the
   article column they still render at 2x+ density on Retina screens without dominating the
   text flow. */
.article-body figure.illustration {
  width: 70%;
  margin: var(--space-3) auto;
}

/* On narrow screens 70% of an already-narrow column makes labels unreadable; use the full column. */
@media (max-width: 760px) {
  .article-body figure.illustration {
    width: 100%;
  }
}

/* Fill the column with a hairline frame, same treatment as the article hero image.
   max-width / height:auto / display:block come from the base img rule. */
.article-body figure.illustration img {
  width: 100%;
  border: 1px solid var(--color-line);
}

.related-guides {
  border-top: 2px solid var(--color-ink);
  margin-top: var(--space-5);
  padding-top: var(--space-2);
}

.related-guides ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-guides li {
  border-bottom: 1px solid var(--color-line);
}

.related-guides li a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  font-weight: 500;
}

.related-guides li a:hover {
  color: var(--color-signal);
}

/* ---- Pagination ------------------------------------------------------------------------------ */

.pagination {
  display: flex;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  width: fit-content;
  margin: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.pagination a,
.pagination span {
  display: block;
  padding: 9px 14px;
  background: var(--color-bg);
  text-decoration: none;
}

.pagination a:hover {
  background: var(--color-panel);
  color: var(--color-signal);
}

.pagination .current {
  background: var(--color-ink);
  color: #fff;
}

/* ---- Category page: intro, subtopics, listing, related tools ------------------------------- */

/* Page head: the H1 + one-line description that opens a category listing. */
.page-head {
  padding: var(--space-3) 0 var(--space-4);
}

.lede {
  font-size: 1.25rem;
  color: var(--color-ink-2);
  max-width: 62ch;
  margin: var(--space-2) 0 0;
}

/* Subtopic chips: inline pill links to child categories. Not the calculator tile grid — these
   are a wrapping row of small outlined pills the reader scans, per mocks/category.md. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}

.chip-row .label-mono {
  margin-right: var(--space-1);
}

.chip {
  border: 1px solid var(--color-line-2);
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--color-ink);
  color: var(--color-signal);
}

/* Article listing: horizontal rows sharing one hairline frame (Swiss "index" listing). */
.article-list {
  border: 1px solid var(--color-line);
}

.list-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  padding: var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.list-card:last-child {
  border-bottom: 0;
}

.list-card:hover {
  background: var(--color-panel);
}

.list-thumb {
  aspect-ratio: 3 / 2;
  background: var(--color-panel);
  overflow: hidden;
}

.list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-card h3 {
  /* Row titles are prose links, not the uppercase document-H3 label style. */
  margin: 0 0 var(--space-1);
  font-size: 1.2rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.015em;
}

.list-summary {
  color: var(--color-ink-2);
  margin: 0 0 var(--space-1);
}

/* Related tools: a bordered block of calculator links closing the category page. */
.related-tools {
  border: 1px solid var(--color-ink);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.related-tools .section-title {
  margin-top: 0;
}

.tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tool-links a {
  text-decoration: none;
}

/* ---- Footer ---------------------------------------------------------------------------------- */

.site-footer {
  border-top: 2px solid var(--color-ink);
  padding: var(--space-4) 0 var(--space-5);
  margin-top: var(--space-6);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-signal);
}

.footer-fine {
  flex-basis: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-2);
}

/* ---- Search & error pages -------------------------------------------------------------------- */

/* Prefilled search box atop the results page: a touch more breathing room than the hero variant. */
.search-page-box {
  margin-bottom: var(--space-4);
}

.result-count {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-2);
}

/* Sections stack down the results page; the section-title label already carries the heading rhythm. */
.search-page-box + .section-title,
.result-count + .section-title,
.tile-grid + .section-title,
.search-empty + .section-title {
  margin-top: var(--space-4);
}

/* Result list: hairline-separated rows, editorial rather than boxed cards (mocks/search-results.md). */
.search-results {
  border-top: 1px solid var(--color-line);
}

.search-result {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.search-result-title {
  margin: 0;
  /* Result titles are prose links, not the uppercase document-H3 label style. */
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.015em;
}

.search-result-title a {
  text-decoration: none;
}

.search-result-title a:hover {
  color: var(--color-signal);
}

.search-snippet {
  margin: var(--space-1) 0 var(--space-1);
  color: var(--color-ink-2);
  max-width: 70ch;
}

/* ts_headline matches: emphasise without shouting — ink weight, no colour change. */
.search-snippet strong {
  color: var(--color-ink);
  font-weight: 700;
}

.search-meta {
  margin: 0;
  color: var(--color-ink-2);
}

/* Shared empty state for no-results, 404, and 500. */
.search-empty {
  padding: var(--space-4) 0 var(--space-3);
  max-width: 60ch;
}

.search-empty h1 {
  margin: 0 0 var(--space-2);
}

.search-empty p {
  color: var(--color-ink-2);
  font-size: 1.1rem;
}

/* ---- Responsive ------------------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* Header collapses to hamburger; the checkbox (.nav-toggle) drives the panel — no JS. */
  .nav-toggle-label {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 10px;
    cursor: pointer;
  }

  .hamburger {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-ink);
    position: relative;
  }

  .hamburger::before,
  .hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--color-ink);
  }

  .hamburger::before {
    top: -7px;
  }

  .hamburger::after {
    top: 7px;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-ink);
    padding: var(--space-2) var(--space-3) var(--space-3);
    gap: var(--space-2);
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  /* Keyboard access to the hidden checkbox: show focus on its label instead */
  .nav-toggle:focus-visible ~ .nav-toggle-label {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
  }

  .primary-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav .nav-link,
  .primary-nav summary {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 14px;
  }

  /* Dropdown panels flow inline inside the mobile menu instead of floating */
  .nav-menu {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-1) var(--space-2);
  }

  .site-search {
    width: 100%;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Article rows narrow their thumbnail so the title keeps room on tablets. */
  .list-card {
    grid-template-columns: 120px 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 560px) {
  .card-grid,
  .tile-grid {
    grid-template-columns: 1fr;
  }

  .searchbar button {
    padding: 0 18px;
  }

  /* Drop the thumbnail on phones; the title + summary carry the row. */
  .list-card {
    grid-template-columns: 1fr;
  }

  .list-thumb {
    display: none;
  }
}

/* ==============================================================================================
   Calculators (epic-005). One shared page pattern: a narrow reading column with an inputs card, a
   result card (HTMX swap target), below-fold SEO prose, and a related-guides slot. Reuses the
   shared .field / .button / .callout / .tile primitives above; only calculator-specific structure
   is defined here.
   ============================================================================================== */

/* Narrow, centered reading column — calculators are single-task pages, not full-width layouts. */
.calc-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
}

.calc-head {
  padding: var(--space-3) 0 var(--space-4);
}

.calc-sub {
  font-size: 1.2rem;
  color: var(--color-ink-2);
  margin: var(--space-2) 0 0;
  max-width: 48ch;
}

/* Generic bordered panel used by the inputs and result cards. */
.card {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--space-3);
}

.card-label {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}

/* Inputs card: two-column field grid on wide screens, single column on mobile. */
.calc-inputs {
  display: block;
}

.calc-form .field,
.calc-form .field-radios,
.calc-form .field-check {
  margin-bottom: var(--space-3);
}

.field-help {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-2);
  margin: 0;
}

/* Radio group: reset the fieldset chrome and lay options out in a wrapping row. */
.field-radios {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-radios legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--color-line-2);
  font-size: 15px;
  cursor: pointer;
}

/* Selected radio reads as a solid ink chip — clear state without color reliance. */
.radio:has(input:checked) {
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.radio input {
  accent-color: var(--color-ink);
}

/* Checkbox field: control and label on one line. */
.field-check .check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.field-check input {
  accent-color: var(--color-ink);
  width: 18px;
  height: 18px;
}

.calc-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.calc-indicator {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}

/* Result card: the HTMX swap target. Panel fill sets it apart from the inputs card above it. */
.calc-result {
  background: var(--color-panel);
  margin-top: var(--space-3);
}

.result-headline {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.result-summary {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-ink-2);
  margin: var(--space-1) 0 0;
}

.result-explain {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.result-explain ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.2em;
}

.result-explain li {
  margin-bottom: 4px;
  font-size: 15px;
}

/* Below-fold SEO prose sits in the normal reading measure. */
.calc-seo {
  margin-top: var(--space-5);
}

.calc-related {
  margin-top: var(--space-5);
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-list li {
  border-bottom: 1px solid var(--color-line);
}

.related-list li a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
}

.related-list li a:hover {
  color: var(--color-signal);
}

/* Index page: grouped tile grids. tile-title-wrap keeps title + subtitle together at the tile foot. */
.calc-index .calc-group {
  margin-bottom: var(--space-5);
}

.tile .tile-title-wrap {
  margin-top: auto;
}

.tile .tile-title-wrap h3 {
  margin: 0;
}

.tile-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-ink-2);
}

@media (max-width: 560px) {
  .result-headline {
    font-size: 1.6rem;
  }
}

/* Empty category state + /guides index groups (no broken internal links: every category renders). */
.empty-state {
  color: var(--color-ink-2);
  font-size: 17px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-2);
}

.guides-group {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.guides-group h2 {
  margin: 0 0 var(--space-1);
  font-size: 20px;
}

.guides-group h2 a {
  text-decoration: none;
}

.guides-group h2 a:hover {
  text-decoration: underline;
}

/* Static SVG explainer diagrams in a calculator's below-fold SEO prose (calculators/ProjectorDiagrams.kt). */
.calc-diagram {
  margin: var(--space-4) 0;
}

.diagram-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
}

.diagram-caption {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--color-ink-2);
}

.diagram-zone {
  fill: var(--color-panel);
  stroke: var(--color-line-2);
}

.diagram-zone-ust {
  fill: var(--color-signal-bg);
}

.diagram-zone-label {
  font-size: 11px;
  fill: var(--color-ink-2);
  font-family: var(--font-mono);
}

.diagram-projector,
.diagram-screen {
  fill: var(--color-ink);
}

.diagram-throw-line {
  stroke: var(--color-signal);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.diagram-width-tick {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.diagram-label {
  font-size: 12px;
  fill: var(--color-ink);
}

.diagram-label-vertical {
  writing-mode: vertical-rl;
}

.diagram-bar {
  fill: var(--color-signal);
}

.diagram-bar-value {
  font-size: 12px;
  font-family: var(--font-mono);
  fill: var(--color-ink);
}

.diagram-bar-label {
  font-size: 12px;
  fill: var(--color-ink-2);
}

.diagram-axis {
  stroke: var(--color-ink);
  stroke-width: 1;
}