/* ─────────────────────────────────────────────────────────
   TinyUseful — shared stylesheet
   Used by: index.html (homepage) and /<tool-slug>/index.html
   ───────────────────────────────────────────────────────── */

/* ─── SELF-HOSTED FONTS (no Google CDN) ─── */
/* Phase 45 cleanup: removed unused Inter 300 weight (no @font-face, no font-weight:300 callers).
   Active weights: Montserrat 400/500/600/700, JetBrains Mono 400/500/600/700, Inter 400/500/600/700,
   Archivo Variable wdth 62-125 wght 100-900 (Patch D, 2026-05-13, used by body.ui-hifi). */

/* Montserrat — geometric sans, used as brand display font (h1, h2, FAQ summary,
   masthead wordmark, .out .big). SIL OFL licensed.
   Files in /fonts/montserrat-v31-latin/ (downloaded from gwfh.mranftl.com) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin/montserrat-v31-latin-700.woff2') format('woff2');
}

/* JetBrains Mono — labels, breadcrumbs, mono UI. SIL OFL licensed.
   Files in /fonts/jetbrains-mono-v24-latin/ (downloaded from gwfh.mranftl.com) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-700.woff2') format('woff2');
}

/* Inter — UI sans-serif for body, tool names, FAQ, forms. SIL OFL licensed.
   Files in /fonts/inter-v20-latin/ (downloaded from gwfh.mranftl.com) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v20-latin/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-v20-latin/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-v20-latin/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-v20-latin/inter-v20-latin-700.woff2') format('woff2');
}

/* Archivo Variable — display font for hi-fi design system (Tip pilot).
   Omnibus-Type, SIL OFL. Two axes: wght 100-900 + wdth 62-125.
   Used by body.ui-hifi for H1, result number, step titles, wordmark, buttons.
   Patch I: format('woff2') is sufficient for modern browsers — woff2-variations causes
   some browsers to skip the declaration entirely. Width axis works via font-stretch range. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-v1-latin/Archivo-VariableFont.woff2') format('woff2');
}

/* ─── COLOR + FONT SYSTEM ─── */
/* Light mode (default) */
:root {
  --paper:    #FCFAF6;
  --ink:      #111111;
  --ink-2:    #555;
  --ink-3:    #6F6F6F;
  --muted:    #5F5F5F;
  --rule:     #111;
  --rule-soft:#D8D4C8;
  --red:      #C8102E;     /* swiss red */

  /* Typography roles (Phase 30: Montserrat brand display, Inter UI, JetBrains mono technical) */
  --font-brand: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark mode — automatic via system preference (Inverted Newspaper / Night Edition) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #121212;
    --ink:      #FCFAF6;
    --ink-2:    #B8B4A8;
    --ink-3:    #99958C;
    --muted:    #99958C;
    --rule:     #FCFAF6;
    --rule-soft:#2A2A2A;
    --red:      #E31B23;   /* slightly brighter for dark backgrounds */
  }
}

/* Manual theme override (set by JS toggle, persisted in localStorage) */
:root[data-theme="dark"] {
  --paper:    #121212;
  --ink:      #FCFAF6;
  --ink-2:    #B8B4A8;
  --ink-3:    #99958C;
  --muted:    #99958C;
  --rule:     #FCFAF6;
  --rule-soft:#2A2A2A;
  --red:      #E31B23;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── SKIP LINK (a11y, keyboard navigation) ─── */
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus {
  left: 12px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s, color 0.2s;
}

.mono { font-family: var(--font-mono); }

/* ─── PAGE FRAME ─── */
.page { max-width: 920px; margin: 0 auto; padding: 28px 28px 64px; }

/* ─── BANNER (newspaper masthead) ─── */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rule);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-brand);
  font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
}
.knife {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--red);
  position: relative;
  transform: translateY(2px);
}
.knife::before, .knife::after {
  content: ""; position: absolute; background: #FAF8F2;  /* white plus, fixed (red square is always red) */
}
.knife::before { left: 10px; top: 4px; width: 2px; height: 14px; }
.knife::after  { left: 4px; top: 10px; width: 14px; height: 2px; }
.issue {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ─── MANIFESTO HERO ─── */
.manifesto {
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.manifesto h1 {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.manifesto h1 .red { color: var(--red); }
.manifesto .subtitle {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.manifesto .subtitle .dot { color: var(--red); margin: 0 6px; }
.manifesto .lede {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 60ch;
}
.manifesto .promises {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.manifesto .promises span::before {
  content: "✓"; color: var(--red); margin-right: 6px;
  font-family: var(--font-brand); font-weight: 700;
}

/* ─── BREADCRUMBS (tool pages) ─── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.breadcrumb a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
.breadcrumb a:hover { color: var(--red); border-color: var(--red); }
.breadcrumb .sep { color: var(--ink-3); margin: 0 8px; }

/* ─── CATALOG (homepage cards) ─── */
.catalog-section {
  padding: 36px 0 8px;
  border-bottom: 1px solid var(--rule);
}
.catalog-section:last-of-type { border-bottom: 2px solid var(--rule); }
.catalog-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 24px;
}
.catalog-head .num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--red);
}
.catalog-head h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.catalog-head .desc {
  font-style: italic;
  color: var(--ink-2);
  font-size: 15px;
  margin-left: auto;
  max-width: 32ch;
  text-align: right;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  margin-bottom: 24px;
}
.catalog-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background 0.15s, color 0.15s;
}
.catalog-card .card-symbol {
  flex: 0 0 44px;
  width: 44px;
  height: 110px;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--ink-2);
  transition: border-color 0.15s, color 0.15s;
}
.catalog-card:hover .card-symbol {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
.catalog-card .card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.catalog-card:nth-child(-n+1),
.catalog-card.first-row { border-top: 0; }
.catalog-card:first-child { border-left: 0; }
.catalog-card h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.catalog-card .card-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin: 0 0 8px 0;
}
.catalog-card .card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
/* legacy .ic kept for backwards compat — hidden in new layout */
.catalog-card .card-num .ic { display: none; }

/* ─── SECTIONS (tool pages) ─── */
section.tools {
  padding: 28px 0 8px;
  /* No border-bottom — adjacent sections (explainer, ad-block) provide their own rules where needed. */
}
.section-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 24px;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--red);
}
.section-head h1,
.section-head h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}
.section-head .desc {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  margin-left: auto;
  max-width: 28ch;
  text-align: right;
}

/* ─── TOOL ROWS (tool pages — single tool, full width) ─── */
.tool {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.tool:first-of-type { border-top: 0; padding-top: 4px; }

.tool-meta h2,
.tool-meta h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tool-meta .tool-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--red);
  display: block;
  margin-bottom: 6px;
}
.tool-meta .desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.tool-form .row {
  display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.tool-form label {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.tool-form input,
.tool-form select,
.tool-form textarea {
  border: 0; border-bottom: 1.5px solid var(--ink);
  background: transparent;
  padding: 7px 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  font-variant-numeric: tabular-nums;
}
.tool-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 8px) 14px, calc(100% - 4px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 18px;
}
/* Fix dark mode dropdown — OS native <option> ignoruje var(--ink/--paper) inheritance,
   bez explicitního override je v dark mode bila na bile (Win/macOS Chrome/Edge/FF). */
.tool-form select option {
  background: var(--paper);
  color: var(--ink);
}
.tool-form textarea {
  border: 1px solid var(--rule-soft);
  padding: 10px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  min-height: 70px;
  resize: vertical;
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--red);
  border-color: var(--red);
}

/* ─── FOCUS RING (WCAG 2.1 keyboard navigation) ─── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.tool-form button {
  display: block;
  width: 100%;
  background: var(--ink); color: var(--paper);
  border: 0;
  padding: 16px 24px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.tool-form button:hover { background: var(--red); }
.tool-form button:active { background: var(--red); transform: translateY(1px); }

/* ─── OUTPUT (newspaper headline style) ─── */
.out {
  margin-top: 18px;
  padding: 18px 0 18px;
  border-top: 3px solid var(--ink);
}
.out .label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.out .big {
  display: block;
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.out .breakdown {
  display: block;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin-top: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.out .breakdown strong { font-weight: 600; }
.out.text-out {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* ─── COPY RESULT BUTTON (Phase 52) ─── */
.out .copy-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--muted);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.4;
}
.out .copy-btn:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}
.out .copy-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

/* ─── NEXT-TASK NAVIGATION (appears after Calculate) ─── */
.next-task {
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
  font-family: var(--font-ui);
}
.next-task .hint {
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin: 0 0 12px 0;
}
.next-task .next-tools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.next-task .next-link {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.next-task .next-link::before {
  content: attr(data-symbol);
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--paper);
  transition: background 0.15s, color 0.15s;
}
.next-task .next-link:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.next-task .next-link:hover::before {
  background: var(--red);
  color: var(--paper);
}
/* Dark mode: paper-color symbol by se ztratil — invert */
@media (prefers-color-scheme: dark) {
  .next-task .next-link::before { color: var(--ink); }
}
[data-theme="dark"] .next-task .next-link::before { color: var(--ink); }
[data-theme="light"] .next-task .next-link::before { color: var(--paper); }

/* ─── EXPLAINER (tool page SEO copy) ─── */
.explainer {
  padding: 32px 0 12px;
  border-bottom: 1px solid var(--rule);
  max-width: 64ch;
}
.explainer h2,
.explainer h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  margin-top: 24px;
  font-weight: 500;
}
.explainer h2:first-child,
.explainer h3:first-child { margin-top: 0; }
.explainer p {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.explainer ul,
.explainer ol {
  margin: 0 0 14px 22px;
  font-size: 16px;
  line-height: 1.55;
}
.explainer ul li,
.explainer ol li { margin-bottom: 6px; }
.explainer .examples {
  list-style: none;
  margin-left: 0;
  font-variant-numeric: tabular-nums;
}
.explainer .examples li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--rule-soft);
  margin-bottom: 0;
}
.explainer .examples li:last-child { border-bottom: 0; }
.explainer .formula {
  margin-bottom: 8px;
}
.explainer .formula code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  padding: 0;
}

/* ─── FAQ ─── */
.faq {
  padding: 32px 0 12px;
  border-bottom: 1px solid var(--rule);
  max-width: 64ch;
}
.faq h2,
.faq h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
  font-weight: 500;
}
.faq details {
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px 0;
}
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--red);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { margin-bottom: 10px; }
.faq .answer {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.faq .answer p { margin-bottom: 10px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ─── METHODOLOGY (trust block) ─── */
.methodology {
  padding: 32px 0 12px;
  border-bottom: 1px solid var(--rule);
  max-width: 64ch;
}
.methodology h2,
.methodology h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
  font-weight: 500;
}
.methodology details {
  border-top: 1px solid var(--rule-soft);
  padding: 12px 0 0;
}
.methodology summary {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
  color: var(--ink);
}
.methodology summary::-webkit-details-marker { display: none; }
.methodology summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--red);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.methodology details[open] summary::after { content: "−"; }
.methodology details[open] summary { margin-bottom: 12px; }
.methodology .answer {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.methodology .answer h3,
.methodology .answer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 14px 0 6px;
  font-weight: 500;
}
.methodology .answer h3:first-child,
.methodology .answer h4:first-child { margin-top: 0; }
.methodology .answer ul {
  margin: 0 0 10px 22px;
}
.methodology .answer ul li { margin-bottom: 4px; }
.methodology .byline {
  margin-top: 14px;
  color: var(--ink);
  font-size: 14px;
  opacity: 0.75;
}

/* ─── RELATED TOOLS ─── */
.related {
  padding: 32px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.related h2,
.related h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
  font-weight: 500;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.related-grid a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.related-grid a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ─── DISCLOSURE BLOCK (manifest tail) ─── */
.disclosure {
  margin-top: 32px;
  padding: 28px 0 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  border-bottom: 1px solid var(--rule);
}
.disclosure h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.disclosure p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* ─── COLOPHON ─── */
.colophon {
  margin-top: 24px;
  padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.colophon a { color: inherit; border-bottom: 1px dotted var(--ink-3); text-decoration: none; padding-bottom: 1px; }
.colophon a:hover { color: var(--red); border-color: var(--red); }

/* ─── THEME TOGGLE (sun/moon, light/dark) ─── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  line-height: 1.4;
}
.theme-toggle:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.theme-toggle .icon-light,
.theme-toggle .icon-dark {
  display: inline-block;
  margin-right: 4px;
}
:root[data-theme="dark"] .theme-toggle .icon-light,
:root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-light { display: inline-block; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-dark  { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-dark  { display: inline-block; }
}

/* ─── ADVERTISEMENT (declared, not hidden) ─── */
.ad-block {
  margin: 36px 0;
  padding: 28px 0;
  text-align: center;
  /* No top/bottom borders — adjacent sections already provide rules. */
}
.ad-block::before {
  content: "Advertisement";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.ad-block .placeholder {
  display: inline-block;
  padding: 32px 60px;
  border: 1px dashed var(--rule-soft);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ─── RESPONSIVE ─── */
/* Phase 54+55 (2026-05-04): mobile compression + homepage 2-col density on bigger phones.
   Strategy: shared mobile rules in 720px query, then 400-720 adds 2-col grid,
   <400px keeps single column with compact card style. */
@media (max-width: 720px) {
  /* Page chrome */
  .page { padding: 16px 18px 40px; }
  .masthead {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .masthead .issue { font-size: 9px; letter-spacing: 0.12em; text-align: right; }
  .wordmark { font-size: 18px; gap: 8px; }
  .knife { width: 18px; height: 18px; }
  .knife::before { left: 8px; top: 3px; width: 2px; height: 12px; }
  .knife::after  { left: 3px; top: 8px; width: 12px; height: 2px; }

  /* Manifesto: tighter padding (Phase 54), promises bar kept */
  .manifesto { padding: 16px 0 14px; }

  /* Section/catalog heads */
  .section-head, .catalog-head { flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .section-head .desc, .catalog-head .desc { margin-left: 0; text-align: left; max-width: 100%; }

  /* Tool page form (Phase 54) */
  .tool { grid-template-columns: 1fr; gap: 12px; }
  .tool-form .row { flex-direction: column; gap: 10px; }

  /* Catalog grid: default 1 column, 400+ overrides below */
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card { border-left: 0; }
  .catalog-card:first-child { border-top: 0; }

  /* Colophon */
  .colophon { flex-direction: column; gap: 8px; }
  .colophon span { width: 100%; }

  /* Phase 54b: ad placeholder mobile compact + replace dev label with user-friendly.
     Strategy: hide original "728 x 90 leaderboard placement" via font-size:0 + color:transparent
     (belt+suspenders), inject "Advertisement" via ::after pseudo-element. */
  .ad-block { margin: 24px 0; padding: 16px 0; }
  .ad-block .placeholder {
    padding: 18px 32px;
    min-height: 60px;
    font-size: 0;
    color: transparent;
    line-height: 0;
    position: relative;
  }
  .ad-block .placeholder::after {
    content: "Advertisement";
    display: inline-block;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    font-family: var(--font-mono);
    text-transform: uppercase;
  }
}

/* Phase 55: 2-column grid on bigger phones (iPhone 13+ / Pro Max / Galaxy S, etc.)
   Cards switch to vertical stack: small square symbol on top, then num + title + desc. */
@media (min-width: 400px) and (max-width: 720px) {
  .catalog-grid {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px 14px;
    border-left: 1px solid var(--rule-soft);
  }
  /* First two cards in each section have no top border (they're the new "first row") */
  .catalog-card:nth-child(1),
  .catalog-card:nth-child(2) { border-top: 0; }
  /* Odd cards lose left border (they're the new "first column") */
  .catalog-card:nth-child(odd) { border-left: 0; }
  /* Symbol becomes small square on top */
  .catalog-card .card-symbol {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  /* Body width adjusts for narrower column */
  .catalog-card .card-body { width: 100%; }
  .catalog-card h3 { font-size: 15px; margin-bottom: 4px; }
  .catalog-card .card-num { font-size: 9px; margin-bottom: 4px; }
  .catalog-card .card-desc { font-size: 12px; line-height: 1.4; }
}

/* Phase 55 fallback: <400px (iPhone SE, older Androids) — single column but compact */
@media (max-width: 399px) {
  .catalog-card {
    padding: 12px 14px 14px;
    gap: 14px;
  }
  .catalog-card .card-symbol {
    flex: 0 0 40px;
    width: 40px;
    height: 72px;
    font-size: 24px;
  }
  .catalog-card h3 { font-size: 17px; }
  .catalog-card .card-desc { font-size: 13px; }
}

/* Phase 54b: keyboard-aware compact mode.
   Triggered when focus is inside .tool-form (body gets .is-input-mode class via helpers.js).
   Goal: result stays visible above the on-screen keyboard.
   Strategy: hide non-essential context, tighten spacing, keep H1 visible.
   Mobile-only — desktop keyboards don't cover the viewport. */
@media (max-width: 720px) {
  body.is-input-mode .breadcrumb {
    padding: 6px 0;
    margin-bottom: 0;
  }
  body.is-input-mode .section-head {
    margin-bottom: 8px;
    padding-bottom: 4px;
    gap: 4px;
  }
  body.is-input-mode .section-head .desc {
    display: none;          /* desc duplicates context user already has */
  }
  body.is-input-mode .tool-meta {
    display: none;          /* tool-meta is a duplicate label of H1 area on mobile */
  }
  body.is-input-mode .tool {
    padding: 8px 0;
    gap: 8px;
  }
  body.is-input-mode .tool-form .row {
    margin-bottom: 4px;
  }
  body.is-input-mode .tool-form button {
    /* hide Calculate button in input mode — live calc handles updates,
       button reappears when user blurs the input */
    display: none;
  }
  body.is-input-mode .out {
    margin-top: 10px;
    padding: 12px 0 14px;
    scroll-margin-top: 24px; /* tight room above big number when scrolled to top */
  }
  body.is-input-mode .explainer,
  body.is-input-mode .faq,
  body.is-input-mode .related,
  body.is-input-mode .next-task,
  body.is-input-mode .ad-block {
    /* keep these visible if user scrolls down — just don't let them push result far */
  }
}

/* print: makes the philosophical point — it works on paper too */
@media print {
  body { background: white; }
  .ad-block, .colophon { display: none; }
  .tool-form button { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   HIFI-PORT G — TinyUseful production transplant from HiFiToolC
   2026-05-13 Patch G. SCOPED via body.ui-hifi.
   Source of truth:
     1. hifi-theme.css (Omnibus, canonical CSS tokens & components)
     2. hifi-mobile.jsx HiFiToolC (structural reference)
     3. Screenshot "C · Balanced" (visual reference for state)
   Drops phone shell, status bar, dynamic island, kb (production page = browser canvas).
   Other 10 tool pages: NOT affected (no body.ui-hifi class).
   ───────────────────────────────────────────────────────────── */

body.ui-hifi {
  --bg:       #ededea;
  --paper:    #f6f4ef;
  --paper-2:  #e6e3dc;
  --paper-3:  #d4d0c6;
  --paper-4:  #bfbab0;
  --ink:      #131210;
  --ink-2:    #3a3833;
  --ink-3:    #6e6a61;
  --ink-4:    #a09b91;
  --rule:     rgba(19,18,16,0.10);
  --rule-2:   rgba(19,18,16,0.18);
  --accent:   #e8541d;
  --accent-2: #fde4d6;

  font-family: 'Archivo', 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg) !important;
  line-height: 1.45;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ui-hifi *,
body.ui-hifi *::before,
body.ui-hifi *::after { box-sizing: border-box; }

body.ui-hifi .num,
body.ui-hifi .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Page shell (replaces phone shell) */
body.ui-hifi main.hf {
  display: block;
  background: var(--paper) !important;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 0 32px !important;
  border: 0 !important;
  min-height: 100vh;
  overflow: visible !important;
  position: relative;
  box-shadow: 0 0 0 1px rgba(19,18,16,0.04);
}
/* Patch H: keep mobile artboard feel on desktop — single canvas width, no widening at breakpoints */

body.ui-hifi a.skip-link {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
body.ui-hifi a.skip-link:focus {
  position: fixed; left: 12px; top: 12px; width: auto; height: auto;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: 6px; z-index: 100;
}

/* ───── header (hifi-theme.css L73-115) ───── */
body.ui-hifi .hf-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 2px;
  flex: 0 0 auto;
}
body.ui-hifi .hf-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 100%;
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
}
body.ui-hifi .hf-wordmark .stack { display: inline-flex; gap: 4px; }
body.ui-hifi .hf-wordmark .stack span { display: inline-block; }
body.ui-hifi .hf-menu-btn {
  width: 28px; height: 28px;
  display: grid; gap: 4px;
  align-content: center;
  cursor: default;
}
body.ui-hifi .hf-menu-btn span {
  display: block; height: 2px; background: var(--ink); border-radius: 1px;
}
body.ui-hifi .hf-menu-btn span:nth-child(1) { width: 22px; }
body.ui-hifi .hf-menu-btn span:nth-child(2) { width: 14px; margin-left: auto; }

/* ───── crumb (hifi-theme.css L117-125 + canvas balanced marker) ───── */
body.ui-hifi .hf-crumb {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 0 24px;
  margin-top: 2px;
}
body.ui-hifi .hf-crumb .crumb-marker {
  color: var(--accent);
  margin-left: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
body.ui-hifi .hf-crumb .crumb-marker .crumb-star {
  color: var(--accent);
  font-size: 11px;
  margin-right: 4px;
}

/* ───── DISPLAY title (hifi-theme.css L128-150) ───── */
body.ui-hifi .hf-display {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 24px 2px;
  margin: 0;
  /* HOTFIX-2 (A): safety net for long titles on narrow viewports */
  overflow-wrap: break-word;
  word-break: break-word;
}
/* HOTFIX-2 (A): mobile typography scale-down for long h1 titles */
@media (max-width: 480px) {
  body.ui-hifi .hf-display { font-size: 30px; }
}
@media (max-width: 360px) {
  body.ui-hifi .hf-display { font-size: 26px; }
}
body.ui-hifi .hf-display.sm { font-size: 32px; padding: 8px 24px 2px; }
body.ui-hifi .hf-display.md { font-size: 48px; }

body.ui-hifi .hf-sub {
  padding: 2px 24px 0;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.ui-hifi .hf-sub .dash { margin: 0 6px; color: var(--ink-4); }

/* ───── inputs (hifi-theme.css L153-204) ───── */
body.ui-hifi .hf-fields {
  padding: 10px 24px 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
body.ui-hifi .hf-field {}
body.ui-hifi .hf-field .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
body.ui-hifi .hf-field .lbl .req {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

body.ui-hifi .hf-input {
  display: flex; align-items: baseline; gap: 6px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
}
body.ui-hifi .hf-input.focus,
body.ui-hifi .hf-input:focus-within {
  border-bottom-color: var(--accent);
}
body.ui-hifi .hf-input.error { border-bottom-color: var(--accent); }
body.ui-hifi .hf-input .pre,
body.ui-hifi .hf-input .suf {
  font-size: 18px; color: var(--ink-3); font-weight: 600;
  flex: 0 0 auto;
}
body.ui-hifi .hf-input input {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
  padding: 0; margin: 0;
  min-width: 0; width: 100%;
  -webkit-appearance: none; appearance: none;
}

/* Native <select> inside .hf-input wrapper (Sales Tax mode dropdown).
   Scoped so other hf inputs are unaffected. Keeps native control accessible. */
body.ui-hifi .hf-input select {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
  padding: 0 24px 0 0; margin: 0;
  min-width: 0; width: 100%;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
body.ui-hifi .hf-input select:focus {
  outline: none;
}

/* Patch CC: Native <input type="date"> inside .hf-input wrapper.
   Scoped so other hf inputs are unaffected. Keeps native picker accessible. */
body.ui-hifi .hf-input input[type="date"] {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
  padding: 0; margin: 0;
  min-width: 0; width: 100%;
  /* Keep native calendar icon visible; don't strip appearance entirely. */
}
body.ui-hifi .hf-input input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0);
}
body.ui-hifi .hf-input input[type="date"]:focus {
  outline: none;
}

/* Patch EE: Native <input type="time"> inside .hf-input wrapper.
   Scoped so other hf inputs are unaffected. Keeps native picker accessible. */
body.ui-hifi .hf-input input[type="time"] {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
  padding: 0; margin: 0;
  min-width: 0; width: 100%;
}
body.ui-hifi .hf-input input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0);
}
body.ui-hifi .hf-input input[type="time"]:focus {
  outline: none;
}

body.ui-hifi .hf-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
body.ui-hifi .hf-error::before {
  content: '!';
  width: 18px; height: 18px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex: 0 0 auto;
}

/* ───── quickrow + pill (hifi-theme.css L206-221) ───── */
body.ui-hifi .hf-quickrow {
  display: flex; gap: 8px; margin-top: 12px;
}
body.ui-hifi .hf-pill {
  flex: 1;
  display: inline-flex; justify-content: center; align-items: center;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  background: transparent;
  color: var(--ink);
  font-family: 'Archivo', inherit;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-variant-numeric: tabular-nums;
}
body.ui-hifi .hf-pill:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
body.ui-hifi .hf-pill.active {
  background: var(--ink);
  color: var(--paper);
}


/* ───── BIG RESULT (hifi-theme.css L224-289) ───── */
body.ui-hifi .hf-result {
  margin: 18px 0 0;
  padding: 22px 24px 22px;
  background: var(--paper-2);
  position: relative;
  flex: 0 0 auto;
  border: 1.5px solid transparent;
  border-radius: 0;
  transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
body.ui-hifi .hf-result .r-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: center;
}
body.ui-hifi .hf-result .r-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  text-transform: uppercase;
  font-size: 80px;
  line-height: 0.88;
  letter-spacing: -0.025em;
  margin-top: 8px;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
body.ui-hifi .hf-result .r-num .cur {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink-2);
  margin-right: 2px;
  align-self: flex-start;
  margin-top: 8px;
  font-stretch: 100%;
}
body.ui-hifi .hf-result .r-num .per {
  font-size: 18px;
  font-weight: 600;
  font-stretch: 100%;
  text-transform: none;
  color: var(--ink-3);
  margin-left: 10px;
  letter-spacing: 0;
}

/* copied state (hifi-mobile.jsx HiFiResultCopied L398-419) */
body.ui-hifi .hf-result.copied {
  background: var(--paper);
  border-color: var(--accent);
  border-radius: 14px;
}
body.ui-hifi .hf-result.copied .r-lbl .r-lbl-text { color: var(--accent); }
body.ui-hifi .hf-result.copied .r-lbl::before {
  content: '\2713';
  display: inline-block;
  margin-right: 6px;
  color: var(--accent);
  font-weight: 800;
}
body.ui-hifi .hf-result.copied .r-num .cur { color: var(--accent); }

body.ui-hifi .hf-result .r-break {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
body.ui-hifi .hf-result .r-break .v {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

body.ui-hifi .hf-result .r-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

body.ui-hifi .hf-result .why-line {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
body.ui-hifi .hf-result .why-line b { color: var(--ink); font-weight: 700; }

/* ───── buttons (hifi-theme.css L291-307) ───── */
body.ui-hifi .hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
body.ui-hifi .hf-btn:hover { background: var(--accent); }
body.ui-hifi .hf-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
body.ui-hifi .hf-btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
body.ui-hifi .hf-btn.ghost:hover { background: var(--ink); color: var(--paper); }
body.ui-hifi .hf-btn.accent { background: var(--accent); color: #fff; }
body.ui-hifi .hf-btn.accent:hover { background: var(--ink); }
body.ui-hifi .hf-btn.full { width: 100%; }

/* ───── chips (hifi-theme.css L367-374) ───── */
body.ui-hifi .hf-chips-wrap { padding: 16px 0 6px; }
body.ui-hifi .hf-cap {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; font-size: 11px;
  color: var(--ink-3);
  padding: 0 24px 10px;
}
body.ui-hifi .hf-chips {
  padding: 0 24px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
body.ui-hifi .hf-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: transparent;
  color: var(--ink);
  font-family: 'Archivo', inherit;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
body.ui-hifi .hf-chip:hover { background: rgba(19,18,16,0.06); }
body.ui-hifi .hf-chip:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
body.ui-hifi .hf-chip.hf-chip-static {
  cursor: default;
  color: var(--ink-3);
  border-color: var(--rule-2);
}

/* HOTFIX-2 (C): next-task chips — filled black, white text, no underline.
   Scoped to .hf-chips-wrap[aria-label="You might also need"] so the
   "Quick examples" chips remain outlined (unchanged). */
body.ui-hifi .hf-chips-wrap[aria-label="You might also need"] .hf-chip {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  text-decoration: none;
}
body.ui-hifi .hf-chips-wrap[aria-label="You might also need"] .hf-chip:hover {
  background: var(--ink-2);
  color: var(--paper);
}

/* ───── methodology (hifi-theme.css L342-364) ───── */
body.ui-hifi .hf-method-wrap { padding: 14px 0 6px; }
body.ui-hifi .hf-method-block {
  margin: 0 24px;
  padding: 18px 18px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
}
body.ui-hifi .hf-method-block .formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}
body.ui-hifi .hf-method-block p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  font-family: 'Inter', system-ui, sans-serif;
}
/* Production add: collapsible depth (A2/3b) */
body.ui-hifi .hf-method-block .method-details {
  margin-top: 12px;
  border-top: 1px dashed var(--rule-2);
  padding-top: 10px;
}
body.ui-hifi .hf-method-block .method-details summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  padding: 12px 0;
}
body.ui-hifi .hf-method-block .method-details h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 12px 0 4px;
}
body.ui-hifi .hf-method-block .method-details ul { padding-left: 18px; margin: 4px 0; }
body.ui-hifi .hf-method-block .method-details li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; color: var(--ink-2);
  line-height: 1.45;
}

/* ───── ad slot (production-only) ───── */
body.ui-hifi .hf-ad { margin: 14px 24px 0; padding: 0; background: transparent; }
body.ui-hifi .hf-ad .ad-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
body.ui-hifi .hf-ad .ad-slot {
  min-height: 96px;
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.ui-hifi .hf-ad .ad-slot::before { content: 'Ad slot reserved'; }

/* ───── stacked sections (hifi-theme.css L309-339) ───── */
body.ui-hifi .hf-stack { display: flex; flex-direction: column; margin-top: 14px; }
body.ui-hifi .hf-step {
  padding: 18px 24px;
}
body.ui-hifi .hf-step .step-head {
  display: flex; align-items: center; justify-content: space-between;
}
body.ui-hifi .hf-step .step-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--ink);
}
body.ui-hifi .hf-step .step-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 4px;
}
body.ui-hifi .hf-step .step-chev {
  color: var(--ink-3); font-size: 22px;
}
body.ui-hifi .hf-step.s1 { background: var(--paper-2); }
body.ui-hifi .hf-step.s2 { background: var(--paper-3); }
body.ui-hifi .hf-step.s3 {
  background: var(--paper-4);
  color: var(--paper);
}
body.ui-hifi .hf-step.s3 .step-title { color: var(--paper); }
body.ui-hifi .hf-step.s3 .step-meta  { color: rgba(255,255,255,0.7); }
body.ui-hifi .hf-step.s3 .step-chev  { color: var(--paper); }

/* FAQ <details> inside step (production add for crawlable content) */
body.ui-hifi .hf-step .step-body { margin-top: 14px; }
body.ui-hifi .hf-step .step-q {
  border-top: 1px solid var(--rule);
  padding: 8px 0;
}
body.ui-hifi .hf-step .step-q[open] { padding-bottom: 12px; }
body.ui-hifi .hf-step .step-q summary {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 0 6px 24px;
  list-style: none;
  position: relative;
}
body.ui-hifi .hf-step .step-q summary::-webkit-details-marker { display: none; }
body.ui-hifi .hf-step .step-q summary::before {
  content: '+';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
body.ui-hifi .hf-step .step-q[open] summary::before { content: '\2212'; }
body.ui-hifi .hf-step .step-q .answer p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 6px 0 0;
  padding-left: 24px;
}

/* Related links inside step.s2 */
body.ui-hifi .hf-step .step-related {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
body.ui-hifi .hf-step .step-related a {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
body.ui-hifi .hf-step .step-related a:hover { background: var(--ink); color: var(--paper); }

/* ───── trust line (hifi-theme.css L377-392) ───── */
body.ui-hifi .hf-trust {
  padding: 14px 24px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  display: flex; gap: 8px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
}
body.ui-hifi .hf-trust::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
}

/* ───── helper utilities (hifi-theme.css L478-482) ───── */
body.ui-hifi .hf-muted { color: var(--ink-3); }
body.ui-hifi .hf-tiny  { font-size: 11px; }
body.ui-hifi .hf-small { font-size: 12px; }
body.ui-hifi .hf-bold  { font-weight: 700; }
body.ui-hifi .hf-row   { display: flex; gap: 12px; align-items: center; }
body.ui-hifi .hf-between { display: flex; justify-content: space-between; align-items: center; }
body.ui-hifi .hf-grow  { flex: 1; }

/* ───── footer (production-only) ───── */
body.ui-hifi .hf-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px 18px;
  gap: 12px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
body.ui-hifi .hf-foot .foot-links { display: flex; gap: 14px; flex-wrap: wrap; }
body.ui-hifi .hf-foot a {
  color: var(--ink-2); text-decoration: none;
}
body.ui-hifi .hf-foot a:hover { color: var(--accent); }
body.ui-hifi .hf-foot button.theme-toggle {
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

/* ───── mobile compact ≤380px ───── */
@media (max-width: 380px) {
  body.ui-hifi .hf-header,
  body.ui-hifi .hf-crumb,
  body.ui-hifi .hf-display,
  body.ui-hifi .hf-sub,
  body.ui-hifi .hf-fields,
  body.ui-hifi .hf-result,
  body.ui-hifi .hf-cap,
  body.ui-hifi .hf-chips,
  body.ui-hifi .hf-trust,
  body.ui-hifi .hf-foot,
  body.ui-hifi .hf-step { padding-left: 20px; padding-right: 20px; }
  body.ui-hifi .hf-method-block,
  body.ui-hifi .hf-ad { margin-left: 20px; margin-right: 20px; }
  /* .hf-display font-size handled by HOTFIX-2 (A) @max-480px and @max-360px rules above. */
  body.ui-hifi .hf-result .r-num { font-size: 68px; }
  body.ui-hifi .hf-step .step-title { font-size: 30px; }
}

/* ───── dark mode ───── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.ui-hifi {
    --bg:       #18171a;
    --paper:    #1e1d20;
    --paper-2:  #2a282c;
    --paper-3:  #353237;
    --paper-4:  #423d44;
    --ink:      #f6f4ef;
    --ink-2:    #c8c4bd;
    --ink-3:    #908a82;
    --ink-4:    #6e6a61;
    --rule:     rgba(246,244,239,0.10);
    --rule-2:   rgba(246,244,239,0.20);
  }
}
html[data-theme="dark"] body.ui-hifi {
  --bg:       #18171a;
  --paper:    #1e1d20;
  --paper-2:  #2a282c;
  --paper-3:  #353237;
  --paper-4:  #423d44;
  --ink:      #f6f4ef;
  --ink-2:    #c8c4bd;
  --ink-3:    #908a82;
  --ink-4:    #6e6a61;
  --rule:     rgba(246,244,239,0.10);
  --rule-2:   rgba(246,244,239,0.20);
}

/* END hifi-port block ─────────────────────────────────────────── */




/* ─────────────────────────────────────────────────────────────
   HF-HOME — Homepage launcher variant (Patch J, 2026-05-13)
   Scoped via body.ui-hifi + main.hf.hf-home wrapper.
   Reuses Tip pilot tokens; adds homepage-specific:
     - desktop nav (hf-topnav)
     - huge editorial hero (hf-display-xl)
     - stat row (hf-stat-row)
     - yellow featured tile (hf-featured-tile)
     - layered launcher rows (hf-launcher-row l1/l2/l3/l4)
   ───────────────────────────────────────────────────────────── */

/* Home variant: wider canvas (homepage is launcher, not mobile artboard) */
body.ui-hifi main.hf.hf-home {
  max-width: 480px;
}
@media (min-width: 768px)  { body.ui-hifi main.hf.hf-home { max-width: 720px; } }
@media (min-width: 1024px) {
  body.ui-hifi main.hf.hf-home {
    max-width: 1440px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   HOTFIX (Patch H-fix): generic hf tool pages desktop layout.
   Base rule body.ui-hifi main.hf { max-width: 420px } was Patch H
   "mobile artboard feel on desktop". On real desktop viewports this
   renders tool pages as a narrow phone-sized column. Homepage has its
   own .hf-home override; tool pages had none.

   This block widens tool pages on tablet (≥768px) and desktop (≥1024px)
   without touching .hf-home or mobile (≤767px stays untouched).
   Pure CSS, no HTML changes.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body.ui-hifi main.hf:not(.hf-home) {
    max-width: 720px;
    padding: 24px 32px 48px !important;
  }
}
@media (min-width: 1024px) {
  body.ui-hifi main.hf:not(.hf-home) {
    max-width: 820px;
    padding: 40px 48px 56px !important;
  }
}

/* Desktop nav (hf-topnav) — hidden on mobile, shown ≥768 */
body.ui-hifi .hf-topnav {
  display: none;
}
@media (min-width: 768px) {
  body.ui-hifi .hf-topnav {
    display: inline-flex;
    gap: 28px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-left: auto;
    margin-right: 18px;
  }
  body.ui-hifi .hf-topnav a {
    color: inherit;
    text-decoration: none;
  }
  body.ui-hifi .hf-topnav a:hover { color: var(--ink); }
  body.ui-hifi .hf-topnav a.active { color: var(--ink); }
  body.ui-hifi .hf-topnav a.active .dash {
    color: var(--accent);
    margin-right: 6px;
    font-weight: 700;
  }
  /* Hide hamburger menu glyph when topnav visible */
  body.ui-hifi .hf-home .hf-menu-btn { display: none; }
}

/* Hero — huge editorial display */
body.ui-hifi .hf-hero {
  padding: 18px 24px 8px;
}
body.ui-hifi .hf-display-xl {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-size: 56px;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 768px)  { body.ui-hifi .hf-display-xl { font-size: 88px; } }
@media (min-width: 1024px) { body.ui-hifi .hf-display-xl { font-size: 104px; letter-spacing: -0.025em; line-height: 0.88; } }

body.ui-hifi .hf-hero-lede {
  margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.5;
  max-width: 440px;
}
@media (min-width: 1024px) { body.ui-hifi .hf-hero-lede { font-size: 16px; } }

/* Stat row */
body.ui-hifi .hf-stat-row {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
body.ui-hifi .hf-stat-row .stat {
  display: flex; flex-direction: column;
  gap: 4px;
}
body.ui-hifi .hf-stat-row dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body.ui-hifi .hf-stat-row dd {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  font-variation-settings: "wght" 800, "wdth" 75;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* Yellow featured tile */
body.ui-hifi .hf-featured-tile {
  margin: 22px 24px 0;
  padding: 18px 22px 18px;
  background: #fed64a;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-featured-tile {
    padding: 32px 32px;
    min-height: 360px;
    max-width: 440px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
body.ui-hifi .hf-featured-tile .featured-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.ui-hifi .hf-featured-tile .featured-cap { color: var(--ink-2); }
body.ui-hifi .hf-featured-tile .featured-slug {
  color: var(--ink-2);
  opacity: 0.55;
}
body.ui-hifi .hf-featured-tile .featured-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.ui-hifi .hf-featured-tile .featured-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-featured-tile .featured-num { font-size: 112px; }
}
body.ui-hifi .hf-featured-tile .featured-num .cur {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-2);
  font-stretch: 100%;
  font-variation-settings: "wght" 800, "wdth" 100;
  align-self: flex-start;
  margin-top: 6px;
  margin-right: 2px;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-featured-tile .featured-num .cur { font-size: 30px; }
}
body.ui-hifi .hf-featured-tile .featured-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 600;
}
body.ui-hifi .hf-featured-tile .featured-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
  margin-top: 6px;
}
body.ui-hifi .hf-featured-tile .featured-cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
body.ui-hifi .hf-featured-tile .featured-cta .arrow {
  font-size: 24px;
  font-weight: 800;
}
body.ui-hifi .hf-featured-tile .featured-cta:hover .arrow { color: var(--accent); }

/* Desktop: hero LEFT + yellow featured tile RIGHT in one row.
   Use a parent grid on the wrapper that contains both .hf-hero and .hf-featured-tile.
   Patch K: hero and featured tile are direct siblings under main.hf-home,
   so we make main.hf-home itself a grid on desktop. */
@media (min-width: 1024px) {
  body.ui-hifi main.hf.hf-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 96px;
    padding: 0 72px 40px !important;
  }
  body.ui-hifi main.hf.hf-home > .hf-header,
  body.ui-hifi main.hf.hf-home > .hf-launcher,
  body.ui-hifi main.hf.hf-home > .hf-trust,
  body.ui-hifi main.hf.hf-home > .hf-foot,
  body.ui-hifi main.hf.hf-home > .skip-link {
    grid-column: 1 / -1;  /* span full width */
  }
  body.ui-hifi main.hf.hf-home > .hf-hero {
    grid-column: 1;
    padding: 40px 0 0;
  }
  body.ui-hifi main.hf.hf-home > .hf-featured-tile {
    grid-column: 2;
    margin: 40px 0 0;
    align-self: start;
  }
}

/* Launcher section header */
body.ui-hifi .hf-launcher {
  margin-top: 26px;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher { margin-top: 8px; }
}
body.ui-hifi .hf-launcher-head {
  padding: 0 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--ink);
  margin: 0 24px 0;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-head {
    padding: 0 0 14px;
    margin: 0;
    border-bottom-width: 2px;
  }
}
body.ui-hifi .hf-launcher-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-title { font-size: 64px; }
}
body.ui-hifi .hf-launcher-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Launcher rows — Monday-style layered paper backgrounds */
body.ui-hifi .hf-launcher-stack {
  display: flex; flex-direction: column;
}
body.ui-hifi .hf-launcher-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  min-height: 72px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: filter 120ms ease;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-row {
    grid-template-columns: 320px 1fr 32px;
    padding: 0 56px;
    min-height: 108px;
    column-gap: 40px;
  }
}
body.ui-hifi .hf-launcher-row:hover { filter: brightness(0.96); }
body.ui-hifi .hf-launcher-row .row-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-size: 30px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-row .row-title {
    font-size: 48px;
    line-height: 0.9;
    align-self: center;
    grid-row: 1 / span 2;
  }
}
body.ui-hifi .hf-launcher-row .row-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.45;
}
@media (max-width: 767px) {
  body.ui-hifi .hf-launcher-row .row-desc { display: none; }
  body.ui-hifi .hf-launcher-row { grid-template-columns: 1fr auto; gap: 12px; }
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-row .row-desc { font-size: 13px; }
}
body.ui-hifi .hf-launcher-row .row-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 4px;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-row .row-desc {
    grid-column: 2;
    align-self: end;
    line-height: 1.4;
    margin-bottom: 0;
    padding-bottom: 4px;
  }
  body.ui-hifi .hf-launcher-row .row-url {
    grid-column: 2;
    align-self: start;
    margin-top: 0;
    padding-top: 4px;
  }
}
@media (max-width: 767px) {
  body.ui-hifi .hf-launcher-row .row-url { display: none; }
}
body.ui-hifi .hf-launcher-row .row-arrow {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  justify-self: end;
  align-self: center;
}
@media (min-width: 1024px) {
  body.ui-hifi .hf-launcher-row .row-arrow { font-size: 26px; }
}

/* Layered backgrounds — Monday-style 4-tone alternation */
body.ui-hifi .hf-launcher-row.l1 { background: var(--paper); }
body.ui-hifi .hf-launcher-row.l2 { background: var(--paper-2); }
body.ui-hifi .hf-launcher-row.l3 { background: var(--paper-3); }
body.ui-hifi .hf-launcher-row.l4 {
  background: var(--paper-4);
  color: var(--paper);
}
body.ui-hifi .hf-launcher-row.l4 .row-title,
body.ui-hifi .hf-launcher-row.l4 .row-arrow { color: var(--paper); }
body.ui-hifi .hf-launcher-row.l4 .row-desc,
body.ui-hifi .hf-launcher-row.l4 .row-url { color: rgba(255,255,255,0.7); }

/* Patch U — arrow hover color (CSS-only)
   HOTFIX-2 (B): hover scope expanded from arrow-only to whole launcher row.
   Hovering anywhere on a row recolors the arrow. Featured tile CTA already
   uses .featured-cta:hover .arrow (defined earlier), no change there. */
body.ui-hifi .hf-launcher-row:hover .row-arrow {
  color: var(--accent);
  transition: color 120ms ease;
}
body.ui-hifi .hf-launcher-row.l4:hover .row-arrow {
  color: #fff;
  transition: color 120ms ease;
}

/* Trust + footer on homepage variant (use existing Tip pilot styles, no override needed) */

/* Mobile compact for homepage */
@media (max-width: 380px) {
  body.ui-hifi .hf-home .hf-hero,
  body.ui-hifi .hf-home .hf-featured-tile,
  body.ui-hifi .hf-home .hf-launcher-head { padding-left: 20px; padding-right: 20px; }
  body.ui-hifi .hf-home .hf-display-xl { font-size: 44px; }
  body.ui-hifi .hf-home .hf-featured-tile .featured-num { font-size: 56px; }
  body.ui-hifi .hf-home .hf-launcher-row { padding-left: 20px; padding-right: 20px; }
  body.ui-hifi .hf-home .hf-launcher-row .row-title { font-size: 26px; }
}

/* END hf-home block ──────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   PATCH P — Homepage MOBILE parity tuning (≤767 px)
   2026-05-13. Per canvas mobile launcher screenshot.
   Desktop (≥1024) untouched. Tablet (≥768) untouched.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Page shell: keep 480 px max-width, but cap at 100% on small phones to prevent overflow */
  body.ui-hifi main.hf.hf-home {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hero — compact, tight, canvas-faithful */
  body.ui-hifi .hf-hero {
    padding: 8px 24px 2px;
  }
  body.ui-hifi .hf-display-xl {
    font-size: 35px;
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
  body.ui-hifi .hf-hero-lede {
    font-size: 12px;
    margin-top: 6px;
    max-width: 280px;
    line-height: 1.35;
  }

  /* Stat row — compact, tighter gap */
  body.ui-hifi .hf-stat-row {
    margin-top: 10px;
    gap: 18px;
  }
  body.ui-hifi .hf-stat-row dt {
    font-size: 9px;
  }
  body.ui-hifi .hf-stat-row dd {
    font-size: 16px;
  }

  /* Yellow featured tile — full-width within page padding */
  body.ui-hifi .hf-featured-tile {
    margin: 12px 24px 0;
    padding: 10px 14px;
    min-height: 0;
    border-radius: 12px;
    gap: 2px;
  }
  body.ui-hifi .hf-featured-tile .featured-head {
    font-size: 9px;
  }
  body.ui-hifi .hf-featured-tile .featured-num {
    font-size: 42px;
    line-height: 0.88;
    margin: 0;
  }
  body.ui-hifi .hf-featured-tile .featured-num .cur {
    font-size: 16px;
    margin-top: 4px;
  }
  body.ui-hifi .hf-featured-tile .featured-sub {
    font-size: 11px;
    margin-top: 0;
  }
  body.ui-hifi .hf-featured-tile .featured-meta {
    display: none;  /* canvas mobile drops the meta line, saves vertical space */
  }
  body.ui-hifi .hf-featured-tile .featured-cta {
    margin-top: 4px;
    font-size: 10px;
  }
  body.ui-hifi .hf-featured-tile .featured-cta .arrow {
    font-size: 16px;
  }

  /* Launcher head — "ALL CALCULATORS · 11" cap pattern per canvas mobile */
  body.ui-hifi .hf-launcher {
    margin-top: 10px;
  }
  body.ui-hifi .hf-launcher-head {
    padding: 0 24px 0;
    border-bottom: 0;
    margin-bottom: 4px;
  }
  body.ui-hifi .hf-launcher-title {
    display: none;  /* canvas mobile shows compact cap instead of huge title */
  }
  body.ui-hifi .hf-launcher-meta {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--ink-3);
  }
  /* Add fake "ALL CALCULATORS · 11" cap label inline via meta (already shows "11 tools · ordered by use" — good enough) */

  /* Launcher rows — compact mobile bands */
  body.ui-hifi .hf-launcher-row {
    grid-template-columns: 1fr 24px;
    padding: 10px 24px;
    min-height: 56px;
    gap: 6px;
    column-gap: 12px;
  }
  body.ui-hifi .hf-launcher-row .row-title {
    font-size: 22px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    grid-column: 1;
    align-self: end;
  }
  body.ui-hifi .hf-launcher-row .row-desc {
    display: block !important;
    grid-column: 1;
    align-self: start;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--ink-3);
    margin-top: 2px;
    line-height: 1.25;
  }
  body.ui-hifi .hf-launcher-row .row-url {
    display: none;
  }
  body.ui-hifi .hf-launcher-row .row-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 16px;
  }

  /* Footer + trust mobile compact */
  body.ui-hifi .hf-trust {
    padding: 18px 24px 4px;
    font-size: 10px;
    line-height: 1.5;
    flex-wrap: wrap;
  }
  body.ui-hifi .hf-foot {
    padding: 10px 24px 18px;
    font-size: 10px;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.ui-hifi .hf-foot .foot-links {
    gap: 12px;
  }
}

/* Very small mobile (≤380) — extra compact */
@media (max-width: 380px) {
  body.ui-hifi .hf-hero,
  body.ui-hifi .hf-featured-tile,
  body.ui-hifi .hf-launcher-head,
  body.ui-hifi .hf-launcher-row,
  body.ui-hifi .hf-trust,
  body.ui-hifi .hf-foot {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.ui-hifi .hf-featured-tile {
    margin-left: 20px;
    margin-right: 20px;
  }
  body.ui-hifi .hf-display-xl {
    font-size: 32px;
  }
  body.ui-hifi .hf-featured-tile .featured-num {
    font-size: 38px;
  }
  body.ui-hifi .hf-launcher-row .row-title {
    font-size: 18px;
  }
}

/* END Patch P mobile block ────────────────────────────────────── */

/* ─── V2 PROSE / DOC PAGES (Phase 1a, 2026-05-15) ───────────────
   Used by support pages (about, privacy, terms, changelog, 404).
   Wider shell than calculator artboard (720px vs 420px), readable
   body type. Scoped entirely under body.ui-hifi so calculator
   tool pages are unaffected unless they explicitly add .hf-prose. */

body.ui-hifi main.hf.hf-doc {
  max-width: 720px;
}

body.ui-hifi .hf-prose {
  padding: 28px 24px 32px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
body.ui-hifi .hf-prose h1 {
  font-family: 'Archivo', 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  color: var(--ink);
}
body.ui-hifi .hf-prose .lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 60ch;
}
body.ui-hifi .hf-prose .lastmod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 28px;
}
body.ui-hifi .hf-prose h2 {
  font-family: 'Archivo', 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
  color: var(--ink);
}
body.ui-hifi .hf-prose p {
  margin: 0 0 14px;
  max-width: 64ch;
}
body.ui-hifi .hf-prose p strong { font-weight: 600; }
body.ui-hifi .hf-prose ul {
  margin: 0 0 14px 22px;
  max-width: 64ch;
}
body.ui-hifi .hf-prose ul li { margin-bottom: 6px; }
body.ui-hifi .hf-prose a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
body.ui-hifi .hf-prose a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
body.ui-hifi .hf-prose .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}

/* Changelog entry block (lives inside .hf-prose) */
body.ui-hifi .hf-prose .entry {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
body.ui-hifi .hf-prose .entry:last-of-type { border-bottom: 0; }
body.ui-hifi .hf-prose .entry .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
body.ui-hifi .hf-prose .entry p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: none;
}

/* 404 — centered hero variant (lives inside main.hf.hf-doc) */
body.ui-hifi .hf-notfound {
  padding: 56px 24px 32px;
  text-align: center;
}
body.ui-hifi .hf-notfound .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
body.ui-hifi .hf-notfound h1 {
  font-family: 'Archivo', 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 22px;
  color: var(--ink);
}
body.ui-hifi .hf-notfound .lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 auto 28px;
}
body.ui-hifi .hf-notfound .actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}
body.ui-hifi .hf-notfound .actions a {
  display: inline-block;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
}
body.ui-hifi .hf-notfound .actions a:hover {
  background: var(--ink);
  color: var(--paper);
}
body.ui-hifi .hf-notfound .section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 28px 0 12px;
}

/* Prose mobile compact */
@media (max-width: 720px) {
  body.ui-hifi .hf-prose {
    padding: 20px 18px 24px;
  }
  body.ui-hifi .hf-notfound {
    padding: 36px 18px 24px;
  }
}

/* END V2 prose / doc pages ────────────────────────────────────── */

/* ─── HOMEPAGE FEATURED TILE — whole-card click target (2026-05-17) ────
   Stretched-link pattern: the inner <a class="featured-cta"> gets an
   absolutely-positioned ::after that overlays the entire .hf-featured-tile
   (which already has position: relative). The yellow card becomes one
   click target on both mouse and touch, without changing markup.

   Accessibility:
   - the <a> keeps its accessible name (aria-label="Open Tip Calculator")
   - keyboard focus still lands on the <a>; :focus-within outlines the
     whole tile so keyboard users see the same affordance as mouse hover
   - cursor: pointer on the tile signals the entire surface is clickable

   Scope: only .hf-featured-tile, which exists exclusively on the homepage.
   Tool and support pages are unaffected. */
body.ui-hifi .hf-featured-tile { cursor: pointer; }
body.ui-hifi .hf-featured-tile .featured-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  z-index: 1;
}
body.ui-hifi .hf-featured-tile:hover .featured-cta .arrow,
body.ui-hifi .hf-featured-tile:focus-within .featured-cta .arrow {
  color: var(--accent);
}
body.ui-hifi .hf-featured-tile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* END homepage featured tile click target ─────────────────────── */

/* ───── native fieldset groups (scoped utility for tool pages) ─────
   Class-scoped only — no global fieldset/legend element styling.
   Legend carries .hf-cap for typography; rules below just neutralize
   default fieldset chrome and legend quirks. */
body.ui-hifi .hf-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
body.ui-hifi .hf-fieldset > legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 14px 0 2px;
}

/* ───── UX-MOBILE-1: real Tools link replaces the decorative menu button ─────
   Tap targets grown via padding + negative margin so header height is unchanged. */
body.ui-hifi .hf-tools-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 17px 0 17px 16px;
  margin: -17px 0;
}
body.ui-hifi .hf-tools-link:hover { color: var(--accent); }
body.ui-hifi .hf-wordmark { padding: 16px 16px 16px 0; margin: -16px 0; }
@media (min-width: 1024px) {
  body.ui-hifi .hf-home .hf-tools-link { display: none; }
}