/* ============================================================
   SECTION 1 — ACCENT COLOR VARIABLES
   Each page gets its own accent; homepage defaults to orange
============================================================ */
 
:root {
  --bg: #050505; /* ORIGINAL: #f3f4f6 */
  --bg-main-light: #f3f4f6;
  --bg-main-dark: #3B3B3B;

  --card: #ffffff;              /* inner form sections */
  --card-outer: #eef1f4;        /* sidebar cards / secondary cards */
  --card-bg: #202124;
  --card-deep: #141416;
  --card-side: #141416;         /* Was #171C24 */

  --card-light: #f7f2ea;        /* main outer calculator panel */
  --card-medium: #ffd7a8;

  --card-text: #c5cbd5;
  --text: #f8fafc;
  --text-muted: #a1a1aa;
  --text-dark: #050505;
  --muted: #a1a1aa;

  --accent: #f97316;
  --accent-light: #fb923c;
  --accent-dark: #c2410c;

  --status-box-light: #f7f8fa;  /* result/output panels */
  --status-box-medium: #60a5fa;
  --status-box-dark: #3B3B3B;
  --status-box-border: #d7dee7; /* softer than current */

  --form-bg: #202124;           /* Was #1d2430 actual form section background */
  --form-border: #2b2d31;       /* Was #2b3442 softer border */
  --cat-bg: #1d2430;
  --cat: #f97316;

  --border: #2b2d31;
  --border-color: #2b2d31;       /* alias — older rules reference --border-color */
  --border-lit: #C2410C;
  --soft: #f8fafc;

  /* Form-control chevron (used by .field select and .calc-input-unit__select).
     Stored as a full url() value so per-context overrides can swap it without
     re-declaring the SVG. Default = white stroke, suited to dark form bg. */
  --field-chevron: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="white"/></svg>');

  --radius: 18px;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

  --header-bg: #050505;
  --nav-border: #2b2d31;

  /* Warning callout tokens — match the canonical .verdict.bad / s-over status
     pattern (135° red wash + soft red border + bright red text). */
  --warning-fill: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  --warning-border: rgba(239, 68, 68, 0.20);
  --warning-text: var(--meter-red);

  --icon-bg: #fff3e8;

  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
  --hero-container: #8A7F75;

  /* meter system */
  --meter-track: #e5e7eb;
  --meter-green: #22c55e;
  --meter-yellow: #facc15;
  --meter-orange: #fb923c;
  --meter-red: #ef4444;
}

/* Global / sitemap (neutral PickShack brand orange) */
body.sitemap {
  --hero-accent:     #F97316;
  --hero-accent-rgb: 249, 115, 22;
  --hero-accent-lit: #FB923C;
}

/* TOOLS (warm energy / practical utility) */
body.tools,
.card-tools {
  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
}

/* PRINTABLES (preparedness / document / checklist green) */
body.printables,
.card-printables {
  --hero-accent:     #65A30D;
  --hero-accent-rgb: 101, 163, 13;
  --hero-accent-lit: #84CC16;
}

/* GUIDES (knowledge / reference / educational blue) */
body.guides,
.card-guides {
  --hero-accent:     #3C6EAF;
  --hero-accent-rgb: 60, 110, 175;
  --hero-accent-lit: #7AAEE8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

main {
  display: block;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: var(--accent-light);
}

a:hover {
  color: var(--hero-accent);
}

li::marker {
  color: var(--hero-accent);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 1rem 0;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.tool-group {
  display: grid;
  gap: 1.5rem;
}

.tool-group + .tool-group {
  margin-top: 2rem;
}

.seo-block p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

/* =========================
   HERO
   ========================= */

.hero {
  background: linear-gradient(180deg, var(--card-deep) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
}

.breadcrumbs {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  text-transform: capitalize;
}

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

.breadcrumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}

.breadcrumbs span {
  color: var(--text);
  font-weight: bold;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.eyebrow a {
  text-decoration: none;
}

.eyebrow a:hover {
  text-decoration: underline;
}

.eyebrow strong {
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 0.65rem;
  font-size: 2.2rem;
  line-height: 1.15;
}

.hero p {
  margin: 0;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ============================================================
   HERO BACKGROUND ART — PNG version
   Subtle object art for tool/guide/printable heroes
============================================================ */

section.hero .container {
  display: flex;
  justify-content: flex-start;
  min-height: 220px;
}

.hero-content {
  /* Fill the full container width so .hero-art's positioning is stable
     regardless of H1 length. Without flex:1 the flex item shrink-fits
     to its widest line and the art's right anchor drifts with title. */
  flex: 1;
  min-width: 0;
  max-width: 1200px;
  text-align: left;
  padding-right: min(32vw, 400px);
  position: relative;
  z-index: 2;
}

/* When a full-color .hero-feature image is present (e.g. the homepage),
   reserve more right-padding so the H1/paragraphs don't slide under the
   image. The feature image is up to 560px wide + ~64px right offset, so
   text needs at least ~640px of right gutter on wide viewports. */
.hero-content:has(.hero-feature) {
  padding-right: clamp(360px, 50vw, 640px);
}

/* Mobile (≤768px): both .hero-art (drifted off-edge at 0.06 opacity) and
   .hero-feature (display:none) yield the right gutter, so the text column
   should reclaim the full container width. Without this override the
   default min(32vw, 400px) padding-right pinches the H1 to ~75% on iPhone. */
@media (max-width: 768px) {
  .hero-content,
  .hero-content:has(.hero-feature) {
    padding-right: 0;
  }
}

.hero-art {
  /* Center the art on the column that visually mirrors the right side-panel
     in .tool-layout (grid: 2fr / 1fr → right col center = 5/6 ≈ 83.3% of
     content width). Using left + translateX(-50%) keeps the art's CENTER
     at that anchor regardless of art width. */
  position: absolute;
  left: 84%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 26vw, 360px);
  height: auto;
  opacity: 0.50;
  margin-top: 15px;
  pointer-events: none;
  user-select: none;
  z-index: 1;

  mix-blend-mode: screen;
  filter:
    sepia(1)
    saturate(4)
    hue-rotate(350deg)
    brightness(0.85)
    drop-shadow(0 0 26px rgba(var(--hero-accent-rgb), 0.28));
}

/* keep text above the art */
section.hero .breadcrumbs,
section.hero .eyebrow,
section.hero h1,
section.hero p {
  position: relative;
  z-index: 2;
}

/* per-image tuning — generator silhouette (per-page override on
   the 7 generator-specific pages under preparedness/power-fuel) */
.hero-art--generator {
  opacity: 0.5;
  width: clamp(190px, 25vw, 320px);
}

/* mobile: drift off-edge + fade. Reset left/transform to use right-anchor. */
@media (max-width: 768px) {
  .hero-art {
    left: auto;
    right: -3rem;
    top: 52%;
    transform: translateY(-50%);
    width: 210px;
    opacity: 0.06;
  }
}

@media (max-width: 520px) {
  .hero-art {
    display: none;
  }
}

/* =========================
   HERO FEATURE IMAGE
   Different from .hero-art (the decorative outline-only ghost
   layer used on tool/guide/printable/subcat hub/group hub pages).
   .hero-feature is for the homepage and (optionally) format hubs:
   a full-color, fully-visible centerpiece illustration that sits
   in the right half of the hero and carries real visual weight.
   Skip the sepia/saturate/screen-blend filter chain entirely.
   ========================= */
.hero-feature {
  position: absolute;
  right: clamp(0rem, 0vw, 4rem);
  top: 60%;
  transform: translateY(-50%);
  width: clamp(320px, 44vw, 560px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  /* No filter, no opacity reduction, no blend mode — full color */
}

/* mobile: hide. Hero text takes priority on narrow screens. */
@media (max-width: 768px) {
  .hero-feature {
    display: none;
  }
}

/* =========================
   SPACING UTILITIES
   ========================= */

.stack-md > * + * {
  margin-top: 1.5rem;
}

.stack-lg > * + * {
  margin-top: 2rem;
}

/* =========================
   LAYOUT + CARDS
   ========================= */

.tool-layout {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.tool-layout > * {
  min-width: 0;
}

/* Guide layout — article body + sticky "On this page" rail.
   Narrower right rail than .tool-layout (guides are reading
   experiences, the rail is just navigation, not a widget). */
.guide-layout {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 2.5rem;
}

.guide-layout > * {
  min-width: 0;
}

/* Base card surface — white with a subtle border + soft shadow.
   Promoted sitewide 2026-04-22 from the preparedness pilot for a
   consistent "product-like" look across home, tools, guides,
   printables, topic hubs, and subcategory pages. Explicit variants
   (.card-start, .card-printables, .jump-card) still override bg. */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.6rem;
  color: var(--text-muted);
}

.card.seo-block {
  background: var(--card-deep);
  border: 1px solid var(--border);
}

.card strong {
  color: var(--text);
}

.tool-layout .card {
    background: var(--card-deep);
    border: 1px solid var(--border);
}

/* .card-printables kept its green-tinted bg in the pre-2026-04-22 design.
   With the white-card baseline sitewide, the tint clashed — removed.
   The green --hero-accent (set at line ~70) still colors internal
   elements (icons, kickers) so the section keeps its brand identity. */

.card h2,
.card h3 {
  margin-top: 0;
  line-height: 1.25;
  text-transform: capitalize;
  color: var(--text);
  font-size: 1em;
}

.card h3 {
  text-transform: none;
}

.card h2:not(:first-child),
.card h3:not(:first-child) {
   /* Adjust size as needed */
}

/* .card-start formerly used --accent-light as a warm cream emphasis
   bg. With the white-card baseline promoted sitewide, the tint fought
   the clean aesthetic — now it inherits the default white surface and
   earns emphasis from its heading + the hub-feature-grid inside it. */
.card-start {
  /* background-color: var(--accent-light);  retired 2026-04-22 */
}

.jump-card {
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1rem;
}

.jump-card h2,
.jump-card h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  color: var(--soft)
}

.jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  text-transform: uppercase;
}

.jump-list li {
  margin: 0;
}

.jump-list a {
  display: block;
  padding: 0.15rem 0.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  transition: color 0.15s ease;
}

/* Arrow */
.jump-list a::before {
  content: "→";
  font-weight: 700;
  padding-right: 0.5rem;
  color: var(--soft);
  transition: transform 0.15s ease;
}

/* Hover effect */
.jump-list a:hover {
  color: var(--soft);
}

.jump-list a:hover::before {
  transform: translateX(4px);
}

.next-step-card {
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.10);
  margin-top: 1.4rem;
  color: var(--text);
}

.next-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.next-step-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
}

.next-step-panel strong {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 1rem;
}

@media (max-width: 700px) {
  .next-step-grid {
    grid-template-columns: 1fr;
  }
}

.back-to-top-link {
  margin-top: 1.25rem;
  margin-bottom: 0;
  text-align: right;
  font-size: 0.85rem;
}

.back-to-top-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
  color: var(--accent);
  border: transparent; /*  border: 1px solid rgba(249, 115, 22, 0.12); */
  background: transparent;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    color 0.16s ease;
}

.back-to-top-link a:hover,
.back-to-top-link a:focus-visible {
  /* background: rgba(249, 115, 22, 0.05);
  border-color: rgba(249, 115, 22, 0.12); */
  background: transparent;
  border-color: transparent;
  transform: translateY(-1px);
  color: var(--accent-dark);
  outline: none;
}

/* Back-to-group link on subcategory pages
   (e.g. "← All Household topics" at the bottom of /household/improvement/).
   Rendered by _admin/generate-topic-pages.py inside a .topic-back-strip wrapper. */
.topic-back-strip {
  margin-top: 0.75rem;
  padding: 0 0.1rem;
}
.topic-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hero-accent);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.topic-back-link:hover,
.topic-back-link:focus-visible {
  background: rgba(249, 115, 22, 0.04);
  transform: translateY(-1px);
  outline: none;
  color: var(--hero-accent-lit)
}

.muted {
  color: var(--card-muted);
}

.text-muted {
  color: var(--text-muted);
}

.note-box {
  /* background: var(--accent-light);
  border: 1px solid var(--accent); */
  background: rgba(var(--hero-accent-rgb), 0.05);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.12);
  border-radius: 7px;
  padding: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

/* Icon-led note-box variant for tips, hints, callouts, "did you know" copy.
   Markup contract:
     <div class="note-box note-box--tip">
       <span class="article-section-icon article-section-icon--purple" aria-hidden="true">
         <svg ...>...</svg>
       </span>
       <span>Tip body text...</span>
     </div>
   Pair the chip with any --orange/--blue/--purple/--green/--yellow/--red accent.
   Convention: --purple + lightbulb for general tips, --yellow + lightbulb for
   highlight/quick-reference, --blue + info for neutral notes, --red + alert
   for warnings. */
.note-box--tip {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.note-box--tip > .article-section-icon {
  flex: 0 0 auto;
  margin-top: 0.05rem;
}

.notes-box {
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--form-bg);
  margin-top: 0.5rem;
}

/* Paper-preview override — when .notes-box appears inside a print-sheet
   (emergency-info-sheet, first-aid-kit-restocking-checklist, medicine-
   checklist), match the cream paper background instead of the dark form
   surface. The @media print rules below force pure white regardless. */
.print-sheet .notes-box {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(60, 50, 40, 0.22);
}

.notes-large {
  min-height: 140px;
}

.warning {
  background: var(--warning-fill);
  border: 1px solid var(--warning-border);
  justify-items: center;
  text-align: center;
}

.warning h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warning-text);
    white-space: nowrap;
    padding: 0 16px;
    margin: 0;
}

.warning h3 {
  font-size: 16px;
  color: var(--warning-text);
}


/* Print rules consolidated into the @media print block at L~2189 below
   so on-screen dark theme overrides translate cleanly to monochrome paper. */

.simple-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2em;
}

.tips-list {
  margin: 0;
  padding-left: 1.1rem;
  padding-bottom: 1.5rem;
}

.tips-list li + li {
  margin-top: 0.45rem;
}

/* =========================
   FORMS
   ========================= */

.form-grid {
  display: grid;
  gap: 1rem;
}

/* Compact 2-column form variant: pair related fields side-by-side on wider widths.
   Opt-in by adding class "form-grid--compact" to the form element.
   Use class "full" on any .field that should span both columns (e.g., submit row, textarea). */
.form-grid--compact {
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}
@media (min-width: 520px) {
  .form-grid--compact {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid--compact .field.full,
  .form-grid--compact > .full {
    grid-column: 1 / -1;
  }
}
.form-grid--compact .field label {
  margin-top: 0;
}

.field label {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.78rem 0.85rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background: var(--form-bg);
  color: var(--text);
  font-size: 1rem;
  transition: border 0.15s ease, box-shadow 0.15s ease;
  background-image: var(--field-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid rgba(249, 115, 22, 0.18);
  border-color: var(--accent);
}

.unit-note {
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.full {
  grid-column: 1 / -1;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* =========================
   BUTTONS
   ========================= */

.cta {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.2s ease, background 0.2s ease;
}

.cta:hover {
  opacity: 0.96;
}

.cta:active {
  transform: translateY(1px);
}

/* =========================
   RESULTS
   ========================= */

.result-card {
  margin-top: 1.25rem;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  color: var(--text);
}

.result-status {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.result-main {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--meter-green);
}

.result-sub {
  margin: 0;
  color: var(--text-muted);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.result-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem;
}

.result-stat strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  color: var(--text);
}

.result-stat span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* =========================
   TOOL CARDS
   ========================= */

.tool-link-card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
}

.tool-link-card:hover {
  text-decoration: none;
}

.tool-link-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.tool-link-card p {
  margin: 0;
  color: var(--text-muted);
}

.tool-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}

.tool-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: transparent;
  border: 0;
}

.tool-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.tool-card-text {
  min-width: 0;
}

.tool-card-text h2 {
  margin: 0 0 0.35rem;
}

.tool-card-text p {
  margin: 0;
}

.tool-meta {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}

.tool-link-card .tool-meta {
  letter-spacing: 0.02em;
}

.tool-link-card .tool-meta:has(+ *) {
  margin-top: 0.75rem;
}


/* Plain .card is a static surface now — no lift on hover. The shadow
   is defined on the base .card rule above. Only the interactive
   link-card variants retain the hover lift. */
.tool-link-card,
.hub-feature-card,
.popular-guide-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-link-card:hover,
.hub-feature-card:hover,
.popular-guide-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* =========================
   TITLE / ICON HELPERS
   ========================= */

.page-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.title-accent {
  color: var(--accent);
}

.title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: transparent;
  border: 0;
}

.title-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.card-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px icon↔title gap */
}

/* Per-type heading on a .card.card-{tools|guides|printables} wrapper.
   The wrapping class already overrides --hero-accent / -rgb / -lit
   at scope (declared near L82). This rule pulls the heading text into
   the type's lit accent so the section is identifiable at a glance,
   matching the icon color (which already pulls from --hero-accent).
   Pairs with hub pages emitted by generate-topic-pages.py and the
   homepage Popular Tools / Guides / Printables cards. */
.card-tools > h2,
.card-guides > h2,
.card-printables > h2 {
  color: var(--hero-accent-lit);
}

/* Lucide-style inline heading icon — no box, no border, no background.
   Uses the card's own --hero-accent so a popular-tools card shows an
   orange icon, popular-guides shows blue, popular-printables shows
   green — matching each section's kicker/brand identity. Falls back
   to --accent outside a hero-accent scope. */
.card-title-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-accent, var(--accent));
  background: transparent;
  border: 0;
}

.card-title-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
}

.printables-category-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.printables-category-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: transparent;
  border: 0;
}

.printables-category-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
}

/* =========================
   DETAILS
   ========================= */

details summary {
  cursor: pointer;
  font-weight: 700;
}

details p {
  color: var(--text-muted);
}

/* =========================
   HEADER / NAV
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--accent);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.header-logo {
  flex-shrink: 0;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.05;
  flex-shrink: 0;
  align-items: flex-start;
  color: var(--soft);
}

.logo:hover {
  text-decoration: none;
}

.logo-main {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--card);
}

.logo-img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
}

.logo-tagline {
  font-size: 0.52rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.logo-copyright {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.logo svg,
.logo-img {
  transition: transform 0.15s ease;
}

.logo:hover svg,
.logo:hover .logo-img {
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 700px) {
  .logo-copyright {
    place-self: center;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.main-nav a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}

.main-nav a:hover {
  background: transparent;
}

body.home .nav-home,
body.sitemap .nav-sitemap,
body.tools .nav-tools,
body.printables .nav-printables,
body.guides .nav-guides {
  color: var(--accent);
  font-weight: 700;
}

/* Tablet */
@media (max-width: 900px) {
  .header-inner {
    align-items: flex-start;
  }

  .main-nav {
    max-width: 430px;
    justify-content: flex-end;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: auto;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .header-logo {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .logo {
    align-items: center;
    text-align: center;
  }

  .logo-main {
    font-size: 1.2rem;
  }

  .logo-img {
    width: 190px;
  }

  .logo-tagline,
  .logo-sub {
    display: none;
  }

  .main-nav {
    width: 100%;
    justify-content: center;
    gap: 0.45rem 0.5rem;
    max-width: none;
  }

  .main-nav a {
    font-size: 0.78rem;
    padding: 0.52rem 0.62rem;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .logo-img {
    width: 175px;
  }

  .main-nav a {
    font-size: 0.74rem;
    padding: 0.48rem 0.55rem;
  }
}

/* Narrow portrait phones */
@media (max-width: 430px) {
  .header-inner {
    gap: 0.55rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .logo-img {
    width: 165px;
    max-width: 100%;
    height: auto;
  }

  .logo-tagline {
    display: none;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.7rem;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.44rem 0.36rem;
    letter-spacing: 0.03em;
  }
}

/* =========================
   PREMIUM PORTRAIT HEADER
   ========================= */

@media (max-width: 430px) {
  .main-nav a {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .main-nav a::after {
    display: none;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
  }

  body.home .nav-home,
  body.sitemap .nav-sitemap,
  body.tools .nav-tools,
  body.printables .nav-printables,
  body.guides .nav-guides {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.35);
    color: var(--accent);
  }
}

/* =========================
   GUIDE HUB HELPERS
   ========================= */

.guide-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1em;
}

@media (max-width: 900px) {
  .guide-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .guide-hub-grid {
    grid-template-columns: 1fr;
  }
}

#guide-hubs {
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  color: var(--hero-accent-lit);
}

#popular-guides {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

#guide-hubs.card,
#popular-guides.card  {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

/* =========================================
   FEATURED GUIDE HUB CARDS
   ========================================= */

.hub-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  .hub-feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .start-hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.popular-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.25rem;
}

@media (min-width: 1200px) {
  .popular-guide-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.hub-feature-card,
.popular-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 1.25rem 1rem 1.1rem;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  color: inherit;
  /* Flat white surface to match the sitewide card baseline. Brand
     colour identity comes from the kicker pill and the bare title
     icon inside, not from a heavy tinted border or a colored top
     strip. Subtle neutral border + soft shadow do the lifting. */
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

/* Decorative top strip retired 2026-04-22 — was competing with the
   thinner border + kicker pill for brand weight. */

.hub-feature-kicker {
  display: inline-flex;
  align-self: center;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.68rem;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  color: var(--hero-accent-lit);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hub-feature / popular-guide showcase cards: bare inline icon, no box.
   Spec: no background, no border, no decorative container.              */
.hub-feature-icon,
.popular-guide-icon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  flex-shrink: 0;
}
.hub-feature-icon svg,
.popular-guide-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.hub-feature-body h3,
.popular-guide-body h3 {
  margin: 0 0 0.65rem;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--text);
  height: 2em;
}

.hub-feature-body p,
.popular-guide-body p {
  max-width: 280px;
  margin: 0 auto;
  color: var(--text-muted);
  line-height: 1.6;
}

.hub-feature-arrow,
.popular-guide-arrow {
  margin-top: auto;
  padding-top: 0.1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  transition: transform 0.18s ease;
}

.hub-feature-card:hover .hub-feature-arrow,
.popular-guide-card:hover .popular-guide-arrow {
  transform: translateX(4px);
}

.popular-guide-grid {
      gap: 1rem;
    }

    .popular-guide-card {
      min-height: 210px;
      padding: 1.15rem;
    }

    .popular-guide-icon {
      margin-bottom: 0.85rem;
    }

    .popular-guide-body h3 {
      font-size: 1.04rem;
      margin-bottom: 0.55rem;
    }

    .popular-guide-body p {
      line-height: 1.5;
      max-width: 32ch;
    }

    @media (max-width: 820px) {
      .hub-feature-grid,
      .popular-guide-grid {
        grid-template-columns: 1fr;
      }

      .hub-feature-card,
      .popular-guide-card {
        min-height: auto;
      }
    }

/* =========================
   HOMEPAGE TOPIC GRID — 7-tile "Start here" hub
   -----------------------------------------------
   Replaced the legacy 3-tile format-first grid (Tools/Printables/Guides)
   on 2026-04-22 so the homepage primary CTA aligns with the site's
   topical IA. Each tile = one group from categories.json. Auto-fit grid
   lets 7 tiles flow to 1–4 columns without orphan gaps. Tiles reuse the
   sitewide white-card baseline: flat surface, subtle border, soft
   shadow, modest hover lift.
   ========================= */

/* Topic-hub grid:
   Promoted 2026-05-07 from a horizontal-row tile to a vertical
   "feature card" pattern matching the popular-tools card style.
   7 across on desktop (one row); responsive cascade to 4/3/2/1
   columns through the tablet/phone breakpoints.

   Each tile carries a topic accent (--topic-accent / -rgb), used
   for the icon block tint and hover/focus border. Per-slug overrides
   live below as .topic-tile--{slug}. Default falls back to the site
   accent so unrecognised slugs still render correctly.
   ========================= */

.topic-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}
/* Responsive cascade for narrower viewports — drops to 4-col then
   3 / 2 / 1 as space tightens. */
@media (max-width: 1100px) {
  .topic-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .topic-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .topic-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .topic-hub-grid { grid-template-columns: 1fr; }
}

.topic-tile {
  /* default accent — overridden per slug below */
  --topic-accent:     var(--accent);
  --topic-accent-rgb: var(--hero-accent-rgb);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.95rem 0.55rem 0.8rem;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.topic-tile:hover,
.topic-tile:focus-visible {
  border-color: rgba(var(--topic-accent-rgb), 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
  outline: none;
}

a.topic-tile[href="#popular"] {
  border: 1px solid var(--border-lit);
}

/* Large square icon block at the top of each tile.
   Tinted bg from the topic accent + the icon glyph in the same
   accent. Mirrors the popular-tools-card styling in the screenshot. */
.topic-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: rgba(var(--topic-accent-rgb), 0.14);
  border: 1px solid rgba(var(--topic-accent-rgb), 0.22);
  color: var(--topic-accent);
  transition: transform 0.18s ease, background 0.18s ease;
}
.topic-tile:hover .topic-tile-icon {
  transform: scale(1.05);
  background: rgba(var(--topic-accent-rgb), 0.20);
}
.topic-tile-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.topic-tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.topic-tile-body h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.topic-tile-body p {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Count chip — replaces the inline "· 6" from the old horizontal
   pattern. Reads as "{N} Resources" inside a soft pill, modeled
   on the .cat-count chip used elsewhere on the site. */
/* margin-top: auto pins the chip to the bottom of .topic-tile-body
   regardless of how many lines the description above takes — so all
   chips align horizontally across the row. align-self: center keeps
   it pill-shaped (otherwise the inline-block would stretch to the
   body's full width inside the flex column). */
.topic-tile-count {
  align-self: center;
  margin-top: auto;
  padding: 0.16rem 0.55rem;
  background: rgba(var(--topic-accent-rgb), 0.12);
  border: 1px solid rgba(var(--topic-accent-rgb), 0.25);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--topic-accent);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* CTA line at the bottom of each tile — "Open topic →".
   Sits inside the link, picks up the topic accent, slides on hover. */
.topic-tile-cta {
  margin-top: auto;
  padding-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--topic-accent);
  letter-spacing: 0.01em;
  transition: transform 0.18s ease;
}
.topic-tile-cta-arrow {
  display: inline-block;
  margin-left: 0.18rem;
  transition: transform 0.18s ease;
}
.topic-tile:hover .topic-tile-cta-arrow {
  transform: translateX(3px);
}

/* Per-topic accent palette. RGB triples drive the soft tinted icon
   block, count chip, and hover border on each tile. Hex values are
   the on-text accent (icon glyph + count text + CTA). */
.topic-tile--household    { --topic-accent: #3F7D8F; --topic-accent-rgb: 63, 125, 143; }
.topic-tile--vehicle      { --topic-accent: #64748B; --topic-accent-rgb: 100, 116, 139; }
.topic-tile--yard-garden  { --topic-accent: #65A30D; --topic-accent-rgb: 101, 163, 13; }
.topic-tile--cooking      { --topic-accent: #C0392B; --topic-accent-rgb: 192, 57, 43; }
.topic-tile--preparedness { --topic-accent: #D4651A; --topic-accent-rgb: 212, 101, 26; }
.topic-tile--tech         { --topic-accent: #7C3AED; --topic-accent-rgb: 124, 58, 237; }
.topic-tile--health       { --topic-accent: #E11D48; --topic-accent-rgb: 225, 29, 72; }
.topic-tile--money        { --topic-accent: #B45309; --topic-accent-rgb: 180, 83, 9; }

/* Subcategory tile grid (group-hub "Browse by subcategory" card).
   Reuses the .topic-tile component for visual parity with the
   homepage "Start with your topic" cards. Layout is auto-fit so
   3-5 subcategories per group flow naturally without per-group
   tweaking. The accent comes from body.topic-{group} below so
   every tile within a hub inherits its group's topic color. */
.subcat-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1.1rem;
}
@media (max-width: 480px) {
  .subcat-tile-grid { grid-template-columns: 1fr; }
}

/* Per-group accent applied to every .topic-tile inside a topic-{group}
   body. Only group hubs carry these body classes; the homepage uses
   body.home and falls through to the per-slug .topic-tile--{slug}
   rules above. */
body.topic-household    .topic-tile { --topic-accent: #3F7D8F; --topic-accent-rgb: 63, 125, 143; }
body.topic-vehicle      .topic-tile { --topic-accent: #64748B; --topic-accent-rgb: 100, 116, 139; }
body.topic-yard-garden  .topic-tile { --topic-accent: #65A30D; --topic-accent-rgb: 101, 163, 13; }
body.topic-preparedness .topic-tile { --topic-accent: #D4651A; --topic-accent-rgb: 212, 101, 26; }
body.topic-tech         .topic-tile { --topic-accent: #7C3AED; --topic-accent-rgb: 124, 58, 237; }
body.topic-health       .topic-tile { --topic-accent: #E11D48; --topic-accent-rgb: 225, 29, 72; }
body.topic-money        .topic-tile { --topic-accent: #B45309; --topic-accent-rgb: 180, 83, 9; }

/* Eyebrow above the "Start with your topic" heading, added 2026-05-07
   to give the section more launch-pad punch. Mirrors the hero eyebrow
   pattern but scoped to .card-start so it does not bleed into other
   cards on the page. */
.card-start .eyebrow--start {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.22rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(var(--hero-accent-rgb), 0.10);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  border-radius: 999px;
}

@media (max-width: 540px) {
  .topic-tile {
    padding: 0.9rem 0.7rem 0.8rem;
  }
}

/* =========================
   FOOTER
   ========================= */

.site-footer {
  margin-top: 2rem;
  background: var(--header-bg);
  border-top: 2px solid var(--accent);
  color: var(--soft);
  background: var(--card-side);
  border-bottom: 1px solid var(--border);
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.25rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;

}

.footer-logo {
  max-width: 220px;
}

.site-footer .logo {
  color: var(--soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer-grid-group h4 {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--soft);
  text-transform: uppercase;
}

.footer-grid-group a {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
}

.footer-grid-group a:hover {
  color: var(--accent);
}

/* Shop column: link gets an inline icon. Shared with the
   "Premium Spreadsheets" panel inside next-step-home.html. */
.footer-shop a,
.next-step-panel.shop-panel a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-shop a svg,
.next-step-panel.shop-panel a svg {
  color: var(--accent);
  flex-shrink: 0;
}
.footer-shop a:hover svg,
.next-step-panel.shop-panel a:hover svg {
  color: var(--accent);
}

.footer-logo .logo-main {
  letter-spacing: 0.14em;
}

.footer-logo .logo-tagline {
  font-size: 0.52rem;
  opacity: 0.85;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .footer-logo {
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.6rem;
  }
}

@media (max-width: 700px) {
  .footer-logo {
    text-align: center;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .footer-inner {
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .footer-logo {
    text-align: center;
    margin: 0 auto;
  }

  .footer-logo .logo-img {
    width: 160px;
    max-width: 100%;
    height: auto;
  }

  .footer-logo .logo-tagline {
    display: none;
  }

  .footer-grid {
    gap: 1rem;
  }

  .footer-grid-group h4 {
    margin-bottom: 0.45rem;
    font-size: 0.84rem;
  }

  .footer-grid-group a {
    font-size: 0.88rem;
    margin-bottom: 0.32rem;
  }
}

/* =========================
   TECH TESTERS
   ========================= */

.tester-shell {
  background: #111827;
  color: #ffffff;
  min-height: 100vh;
}

/* (.tester-hero removed 2026-05-19 — keyboard/webcam/microphone testers now
   use the standard .hero + .hero-content + hero-art, matching the other 8
   tech/devices testers. The legacy dark-hero override is no longer used.) */

.dark-card {
  background: #1f2937;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.1);
}

.dark-card .muted,
.dark-card p,
.dark-card li {
  color: rgba(255,255,255,0.82);
}

.tester-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-self: center;
}

.status-box {
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 10px;
  background: var(--card-side);
  border: 1px solid var(--border);
}

/* Status box states */
.status-box {
  transition: all 0.2s ease;
}

.status-box.active {
  background: #ecfdf5; /* light green */
  border: 1px solid #34d399;
  color: #065f46;
}

.status-box.stopped {
  background: var(--status-box-light);
  border: 1px solid var(--status-box-medium);
  color: var(--text);
}

.status-box.finished {
  background: var(--status-box-light);/* light blue */
  border: 1px solid var(--status-box-medium);
  color: #1e3a8a;
}

.status-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hero-accent);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.status-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  word-break: break-word;
}

.status-sub {
  margin-top: 0.35rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
}

/* =========================
   DEAD PIXEL TEST
   ========================= */

.pixel-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.pixel-layout > * {
  min-width: 0;
}

.pixel-controls {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.color-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.color-btn {
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.color-btn:hover {
  background: #f3f6fb;
}

.color-btn:active {
  transform: translateY(1px);
}

.color-btn[data-color="#000000"] { background: #000000; color: #ffffff; }
.color-btn[data-color="#ffffff"] { background: #ffffff; color: #000000; }
.color-btn[data-color="#ff0000"] { background: #ff0000; color: #ffffff; }
.color-btn[data-color="#00ff00"] { background: #00ff00; color: #000000; }
.color-btn[data-color="#0000ff"] { background: #0000ff; color: #ffffff; }
.color-btn[data-color="#ffff00"] { background: #ffff00; color: #000000; }
.color-btn[data-color="#00ffff"] { background: #00ffff; color: #000000; }
.color-btn[data-color="#ff00ff"] { background: #ff00ff; color: #000000; }
.color-btn[data-color="#808080"] { background: #808080; color: #000000; }

.tester-note {
  margin-top: 1rem;
  color: var(--text-muted);
}

.test-area-wrapper {
  display: flex;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.test-area {
  position: relative;
  flex: 1;
  min-height: 100%;
  background: #000000;
  cursor: pointer;
}

.test-overlay {
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
}

.test-area.fullscreen {
  min-height: 100vh;
}

@media (max-width: 900px) {
  .pixel-layout {
    grid-template-columns: 1fr;
  }

  .test-area {
    min-height: 420px;
  }
}

@media (max-width: 700px) {
  .test-area {
    min-height: 320px;
  }

  .color-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
  }
}

.meter-shell {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 16px;
  padding: 1rem;
}

.meter-track {
  width: 100%;
  height: 28px;
  border-radius: 999px;
  background: #0f172a;
  overflow: hidden;
  border: 1px solid #334155;
}

.meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 70%, #ef4444 100%);
  transition: width 0.08s linear;
}

.camera-preview {
  width: 100%;
  max-width: 100%;
  min-height: 340px;
  background: #0f172a;
  border: 1px solid #374151;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-preview video {
  width: 100%;
  height: auto;
  display: block;
  background: #000000;
}

/* Keyboard tester */

.keyboard-card {
  overflow: hidden;
  min-width: 0;
}

.keyboard-layout {
  display: grid;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  width: 100%;
  padding-bottom: 0.35rem;
}

.keyboard-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  min-width: max-content;
}

.key {
  flex: 0 0 auto;
  min-width: 52px;
  height: 52px;
  padding: 0 0.75rem;
  border-radius: 12px;
  border: 1px solid #374151;
  background: #111827;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.05s ease, background 0.12s ease, border-color 0.12s ease;
  user-select: none;
  white-space: nowrap;
}

.key.small { min-width: 52px; }
.key.medium { min-width: 72px; }
.key.wide { min-width: 96px; }
.key.xwide { min-width: 120px; }
.key.space { min-width: 280px; }

.key.active {
  background: var(--accent);
  color: #062b14;
  border-color: var(--accent);
  transform: translateY(1px);
}

/* Keyboard tester layout fix (2026-05-05)
   The on-screen keyboard's widest row (Ctrl row with Space) needs
   ~920px of horizontal space at desktop key sizes. The standard
   .tool-layout 2/1 grid only gives the primary column ~640-700px
   on a typical 1024px container, so the bottom rows clip on the
   right. Override to single-column when a .keyboard-card is in the
   layout, then lay the status panel out horizontally below the
   keyboard so the vertical space stays compact. */
.tool-layout:has(.keyboard-card) {
  grid-template-columns: minmax(0, 1fr);
}
.tool-layout:has(.keyboard-card) > aside.grid > .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
}
.tool-layout:has(.keyboard-card) > aside.grid > .card > .status-box {
  margin: 0;
}
@media (max-width: 700px) {
  .tool-layout:has(.keyboard-card) > aside.grid > .card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Stretch-and-center pass (2026-05-05)
   Earlier rules sized the keyboard by content width, which made
   each row end at a different x-coordinate on the right and
   left-aligned the whole keyboard inside the card. Switch to a
   flex layout where each row spans 100% of its container, with
   keys flex-growing in proportion to their ANSI unit width. Then
   center the whole keyboard inside the card with a max-width and
   auto inline margins. The F-row has 13 keys vs ~15 elsewhere, so
   add a 1-unit inset on each side so F-keys render at the same
   width as the alpha-row keys. */
.keyboard-layout {
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  overflow-x: visible;          /* no longer needed; rows fit */
}
.keyboard-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;                 /* override the older max-content */
}
.key {
  flex: 1 1 0;
  min-width: 0;                 /* allow flex-shrink past prior min-widths */
}
.key.small  { flex: 1 1 0;     min-width: 0; }
.key.medium { flex: 1.25 1 0;  min-width: 0; }
.key.wide   { flex: 1.5 1 0;   min-width: 0; }
.key.xwide  { flex: 2 1 0;     min-width: 0; }
.key.space  { flex: 6 1 0;     min-width: 0; }
/* F-row: span the full keyboard width like the other rows.
   F-keys end up slightly wider than alpha-row keys (13 keys split
   the same width 15 alpha cells split), which is the trade-off
   for matching-row widths. Authentic ANSI keyboards either inset
   the F-row or break it into 4-key groups — we picked uniform
   row width here. */
.keyboard-row.fn-row {
  padding-inline: 0;
}

/* =========================
   SPEAKER TEST
   ========================= */

.speaker-test-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.range-group {
  margin-top: 1rem;
}

.range-group label {
  display: block;
  margin-bottom: 0.45rem;
}

.range-group input[type="range"] {
  width: 100%;
  max-width: 420px;
}

.btn-primary,
.btn-secondary,
.btn-ghost {

}

.btn-primary {

}

.btn-secondary {

}

.btn-secondary {

  background: var(--accent-dark);
  color: var(--soft);
}

.btn-ghost:hover {
  background: var(--accent-light);
  border: 1px solid var(--accent-dark);
}

.freq-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.freq-chip {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--form-border);
  background: var(--form-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.freq-chip:hover {
  background: rgba(249,115,22,0.12);
  border-color: var(--accent);
  color: var(--accent-light);
}

.freq-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}


/* =========================
   PLACEHOLDERS
   ========================= */

.site-shell-placeholder {
  padding: 0.9rem 1rem;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer-placeholder {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* =========================
   PRINTABLES
   ========================= */

.print-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  justify-content: center;
  align-items: center;
}

/* Premium print button — orange-tint glass, lifts on hover, glows on focus.
   Sits above the cream paper sheet on the dark page background. */

.print-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.15rem;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(var(--hero-accent-rgb), 0.18),
    rgba(var(--hero-accent-rgb), 0.10)
  );
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.print-actions .btn-primary:hover,
.print-actions .btn-primary:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--hero-accent-rgb), 0.40);
  background: linear-gradient(
    180deg,
    rgba(var(--hero-accent-rgb), 0.24),
    rgba(var(--hero-accent-rgb), 0.14)
  );
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(var(--hero-accent-rgb), 0.18);
  outline: none;
}
.print-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.print-actions .btn-primary svg {
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .print-actions .btn-primary,
  .print-actions .btn-primary:hover,
  .print-actions .btn-primary:focus-visible,
  .print-actions .btn-primary:active {
    transform: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
}

/* Dashed tether + arrowhead — visual cue connecting the print button
   to the sheet below. Two pseudo-elements: ::before draws a 22px
   dashed vertical line, ::after draws a CSS-border triangle for a
   crisp arrowhead. Scoped to body.printables so .print-actions used
   elsewhere on the site stays untouched. @media print rules already
   hide .print-actions, so nothing leaks onto paper. */
body.printables .print-actions {
  position: relative;
  margin-bottom: 2.6rem;
}
body.printables .print-actions::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 0;
  height: 22px;
  border-left: 2px dashed rgba(var(--hero-accent-rgb), 0.55);
  transform: translateX(-50%);
  pointer-events: none;
}
body.printables .print-actions::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -33px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(var(--hero-accent-rgb), 0.65);
  pointer-events: none;
}

.print-sheet {
  max-width: 920px;
  margin: 0 auto;
  background: linear-gradient(180deg, #f8f4ec 0%, #f2ece2 100%);
  color: #241f19;
  border: 1px solid rgba(120, 90, 60, 0.22);
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  padding: 2rem;
}
.print-sheet h2,
.print-sheet h3,
.print-sheet strong {
  color: #1f1a14;
}

.print-sheet-header h2 {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.print-sheet-header p {
  margin-top: 0;
  color: #6f6559;
}

.print-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}

.print-meta-item {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(60, 50, 40, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  color: #241f19;
}

.print-meta-item strong {
  display: block;
  margin-bottom: 0.4rem;
}

.print-meta-item span {
  display: block;
  height: 1.4rem;
  margin-top: 0.3rem;
  border-bottom: 1px solid rgba(60, 50, 40, 0.38);
  color: #7b6f63;
  opacity: 1;
}

.print-section + .print-section {
  margin-top: 1.5rem;
}

.print-section h3 {
  margin-bottom: 0.7rem;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 1.2em;
  background: var(--bg);
  border-collapse: separate; /* Required for border-radius to work */
  border-spacing: 0;         /* Removes gaps between cells */
  border: 1px solid var(--border);
  border-radius: 10px;       /* The corner roundness */
  overflow: hidden;
}

.print-table th,
.print-table td {
  border: 1px solid var(--border);
  padding: 0.7rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  color: var(--muted);
}

.print-table th {
  background: rgba(var(--hero-accent-rgb), 0.3);
  color: var(--hero-accent-lit);
}

/* Paper-preview override — cream/sepia colors when .print-table is INSIDE a
   .print-sheet (i.e., on a printable). Outside a print-sheet (guides/tools
   that use .print-table for body-content reference cards), the dark-theme
   defaults above stay in effect. The @media print rules below force pure
   white regardless. */
.print-sheet .print-table {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(60, 50, 40, 0.28);
}
.print-sheet .print-table th,
.print-sheet .print-table td {
  border: 1px solid rgba(60, 50, 40, 0.22);
  color: #2a241f;
}
.print-sheet .print-table th {
  background: rgba(var(--hero-accent-rgb), 0.16);
  color: #315f18;
}

.tool-layout .print-table th {
  background: var(--card-bg);
  color: var(--hero-accent);
}

td:first-child, th:first-child {
  /* border-left: 1px solid var(--border); */
}

td:last-child, th:last-child {
  /* border-right: 1px solid var(--border); */
}

.print-lines {
  display: grid;
  gap: 0.9rem;
}

.print-lines div {
  border-bottom: 1px solid rgba(60, 50, 40, 0.38);
  min-height: 1.2rem;
}

.print-grid-box {
  height: 220px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background:
    linear-gradient(to right, #f1f5f9 1px, transparent 1px),
    linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ============================================================
   .print-table--field — opt-in modifier for label/blank "field
   sheet" tables (2-col label + detail, or 3-col label + name +
   phone). Locks the first column at 30% so labels line up across
   panels and the writing column gets the room it needs. Do NOT
   apply this to wide multi-column data tables (medicine checklist,
   inventory sheet, expense tracker, fuel log) — those want
   content-sized columns.
============================================================ */
.print-table--field {
  table-layout: fixed;
}
.print-table--field td:first-child,
.print-table--field th:first-child {
  width: 30%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   WALLET CARD — 2x2 cuttable card sheet (2 cards × front + back)
   Screen view: dark theme; on print, becomes a wallet-sized
   3.5in × 2.25in cuttable card with a red emergency-alert header
   on the front and an orange "If found, please call" on the back.
============================================================ */
.wallet-card-frame {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.5rem 0 0;
}
.wallet-card {
  border: 2px dashed rgba(60, 50, 40, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wallet-card__alert {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.04));
  color: #f87171;
  border-bottom: 1px solid rgba(220, 38, 38, 0.30);
}
.wallet-card__alert--contacts {
  background: linear-gradient(135deg, rgba(212, 101, 26, 0.18), rgba(212, 101, 26, 0.04));
  color: var(--hero-accent-lit);
  border-bottom: 1px solid rgba(212, 101, 26, 0.30);
}
.wallet-card__alert--info {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.06));
  color: #94a3b8;
  border-bottom: 1px solid rgba(100, 116, 139, 0.32);
}
.wallet-card__paw {
  vertical-align: -2px;
  margin-right: 0.35rem;
  opacity: 0.85;
}
.wallet-card__body {
  padding: 0.8rem 0.95rem;
  display: grid;
  gap: 0.55rem;
  flex: 1;
  position: relative;
  color: #241f19;
}
.wallet-card__mascot {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  height: 75px;
  width: auto;
  pointer-events: none;
  z-index: 1;
}
.wallet-card__row {
  font-size: 0.85rem;
  color: #4f463d;
  line-height: 1.45;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-right: 82px;
}
.wallet-card__row:nth-of-type(n+3) {
  padding-right: 0;
}
.wallet-card__row strong {
  color: #211b16;
  font-weight: 600;
  flex-shrink: 0;
}
.wallet-card__line {
  flex: 1 1 auto;
  border-bottom: 1px solid rgba(60, 50, 40, 0.36);
  align-self: flex-end;
  margin-bottom: 0.2rem;
  min-width: 30px;
  min-height: 1px;
}
.wallet-card__footer {
  border-top: 1px solid rgba(60, 50, 40, 0.18);
  padding: 0.55rem 0.9rem;
  font-size: 0.72rem;
  color: #6a5f55;
  text-align: center;
  font-style: italic;
  background: rgba(60, 50, 40, 0.06);
}

/* ============================================================
   PRINT — flat monochrome paper output
   The on-screen printable surfaces (.print-sheet, .print-meta-item,
   .print-table) are intentionally dark to match the site theme. When
   the user clicks "Print this PRINTABLE", we force everything to a
   clean paper-white sheet with black ink, light-gray header fills,
   and strong borders. !important is required because most of the
   on-screen rules pull their bg/color from CSS-variable tokens that
   resolve to dark values. print-color-adjust: exact is set on header
   fills only, so browsers don't strip the gray we want for hierarchy.
============================================================ */
@media print {
  /* Hide all non-printable chrome */
  #site-header,
  #site-footer,
  .site-header,
  .site-footer,
  .hero,
  .no-print,
  .print-actions,
  #related-printables {
    display: none !important;
  }

  /* Force page surface to paper-white */
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .section {
    padding: 0 !important;
  }

  /* Sheet — flat paper, no card chrome */
  .print-sheet {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .print-sheet h1,
  .print-sheet h2,
  .print-sheet h3,
  .print-sheet h4,
  .print-sheet p,
  .print-sheet strong,
  .print-sheet span,
  .print-sheet td,
  .print-sheet th {
    color: #000 !important;
  }

  .print-sheet-header p {
    color: #555 !important;
  }

  /* Fill-in meta items — light frame, dark text */
  .print-meta-item {
    background: #fff !important;
    border: 1px solid #444 !important;
    color: #000 !important;
  }
  .print-meta-item strong {
    color: #000 !important;
  }
  .print-meta-item span {
    color: #555 !important;
    opacity: 1 !important;
  }

  /* Tables — paper-white cells, gray header fill, dark borders */
  .print-table {
    background: #fff !important;
    border: 1px solid #000 !important;
  }
  .print-table th,
  .print-table td {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #555 !important;
  }
  .print-table th {
    background: #ececec !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Notes lines — solid mid-gray, ink-friendly to write on */
  .print-lines div {
    border-bottom: 1px solid #555 !important;
  }

  /* Drop shadows + decorative orange/green tints on any nested print components */
  .print-sheet * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Links inside the sheet print as plain underlined dark text (no orange) */
  .print-sheet a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Wallet-card cut-out — the last page; put it on its own sheet so
     scissors can do their thing without shredding the rest of the doc. */
  .print-wallet-card {
    page-break-before: always;
    break-before: page;
  }
  .wallet-card__mascot {
    height: 0.6in !important;
    top: 0.08in !important;
    right: 0.1in !important;
  }
  .wallet-card__row {
    padding-right: 0.7in !important;
    gap: 0.06in !important;
  }
  .wallet-card__row:nth-of-type(n+3) {
    padding-right: 0 !important;
  }
  .wallet-card__line {
    border-bottom: 1px solid #555 !important;
    margin-bottom: 0.04in !important;
  }
  .wallet-card-frame {
    grid-template-columns: repeat(2, 3.5in) !important;
    gap: 0.4in !important;
    justify-content: center;
    margin: 0.4in 0 !important;
  }
  .wallet-card {
    height: 2.25in;
    border: 1.5px dashed #555 !important;
    background: #fff !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .wallet-card__alert {
    background: #dc2626 !important;
    color: #fff !important;
    border-bottom: 1px solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wallet-card__alert--contacts {
    background: #d4651a !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wallet-card__alert--info {
    background: #475569 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wallet-card__paw {
    color: #fff !important;
    opacity: 1 !important;
  }
  .wallet-card__body {
    padding: 0.13in 0.16in !important;
    gap: 0.05in !important;
  }
  .wallet-card__row {
    font-size: 8.5pt !important;
    color: #000 !important;
    line-height: 1.35 !important;
  }
  .wallet-card__row strong {
    color: #000 !important;
  }
  .wallet-card__footer {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-top: 1px solid #000 !important;
    font-size: 7pt !important;
    padding: 0.06in 0.14in !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

  .related-tools {
    /* display: none; */
  }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .guide-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .hero h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 700px) {
  .key {
    min-width: 44px;
    height: 46px;
    padding: 0 0.55rem;
    font-size: 0.82rem;
  }

  .key.medium { min-width: 62px; }
  .key.wide { min-width: 80px; }
  .key.xwide { min-width: 96px; }
  .key.space { min-width: 180px; }

  .print-meta-grid {
    grid-template-columns: 1fr;
  }

  .print-sheet {
    padding: 1.25rem;
  }
}

@media (max-width: 600px) {
  .logo-main {
    font-size: 1.2rem;
  }
}
/* =========================
   HEADER ACTIONS (search + hamburger)
   ========================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Search trigger button */
.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.search-trigger:hover {
  background: rgba(249,115,22,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

/* Hamburger button — mobile only */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-toggle:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

.burger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--soft);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease;
  transform-origin: center;
}

/* Animate to × when nav is open */
.site-header.nav-open .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .burger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.site-header.nav-open .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================
   MOBILE NAV DROPDOWN
   ========================= */

@media (max-width: 700px) {
  .nav-toggle {
    display: flex;
  }

  /* Hide the nav on mobile by default */
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    background: var(--header-bg);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 3px solid var(--accent);
    padding: 0.35rem 0 0.6rem;
    gap: 0;
    /* Reset desktop wrapping overrides */
    flex-wrap: nowrap;
    max-width: none;
    justify-content: flex-start;
    width: 100%;
  }

  /* Show when toggled */
  .site-header.nav-open .main-nav {
    display: flex;
  }

  .main-nav a {
    padding: 0.78rem 1.25rem;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: normal;
  }

  .main-nav a:last-child {
    border-bottom: none;
  }

  .main-nav a::after {
    display: none;
  }

  /* Desktop-style active state still works via body class */
  body.home .nav-home,
  body.sitemap .nav-sitemap,
  body.tools .nav-tools,
  body.printables .nav-printables,
  body.guides .nav-guides {
    background: rgba(249,115,22,0.12);
    color: var(--accent);
  }

  /* header-inner row: logo + action buttons on one line */
  .header-inner {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    gap: 0.5rem;
  }

  .header-logo {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .logo {
    align-items: flex-start;
    text-align: left;
  }

  .logo-img {
    width: 160px;
  }

  .logo-tagline {
    display: none;
  }
}

/* Very small phones: tighten up slightly */
@media (max-width: 390px) {
  .logo-img {
    width: 140px;
  }
}

/* =========================
   SEARCH MODAL — command palette
   Premium dark surface with refined hover, lightweight match highlight,
   integrated header and footer trays.
   ========================= */

.ps-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 2rem;
}

.ps-search-modal[hidden] {
  display: none;
}

.ps-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ps-search-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  color: var(--text);
}

/* Header — input row sits flush on the modal surface (no hard divider).
   Visual integration comes from shared bg + tight padding rhythm. */
.ps-search-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.05rem 0.95rem;
  flex-shrink: 0;
}

.ps-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.ps-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  min-width: 0;
  caret-color: var(--accent);
  letter-spacing: 0.005em;
}

.ps-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

/* Close button — minimal ghost variant. Hover lifts to a quiet dark tile. */
.ps-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-search-close:hover {
  background: var(--card-deep);
  border-color: var(--text-muted);
  color: var(--text);
}

.ps-search-close:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}

/* Results list — scrollable area; gets a subtle hairline at the top
   only when results exist, so the empty palette feels uninterrupted. */
.ps-search-results {
  overflow-y: auto;
  flex: 1;
  padding: 0.35rem 0 0.5rem;
}

.ps-search-results:not(:empty) {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}

.ps-search-results::-webkit-scrollbar { width: 10px; }
.ps-search-results::-webkit-scrollbar-track { background: transparent; }
.ps-search-results::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--card-bg);
  border-radius: 999px;
}
.ps-search-results::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.ps-result-group + .ps-result-group {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.ps-result-group-label {
  padding: 0.55rem 1.05rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.62rem 1.05rem 0.7rem 0.9rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.1s ease, border-left-color 0.1s ease;
  border-left: 2px solid transparent;
}

.ps-result-item:hover,
.ps-result-item.ps-result-active {
  background: rgba(249, 115, 22, 0.08);
  border-left-color: var(--accent);
}

.ps-result-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.ps-result-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Match highlight — color-only emphasis. No bg fill; the bolder accent
   weight is enough to pull the eye, even in a description full of matches. */
.ps-result-title mark,
.ps-result-desc mark {
  background: transparent;
  color: var(--accent-light);
  font-weight: 700;
  padding: 0;
}

/* No-results state */
.ps-no-results {
  padding: 1.6rem 1.1rem;
  color: var(--text-muted);
  font-size: 0.93rem;
  text-align: center;
}

.ps-no-results strong {
  color: var(--text);
  font-weight: 600;
}

/* Footer keyboard-hint tray — slightly recessed bg signals "controls" zone */
.ps-search-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.55rem 1.05rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
  gap: 0.25rem;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.25);
  letter-spacing: 0.01em;
}

.ps-search-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.66rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

@media (max-width: 700px) {
  .ps-search-modal {
    padding: 4vh 0.75rem 1.5rem;
  }

  .ps-search-box {
    border-radius: 14px;
    max-height: 88vh;
  }

  .ps-search-hint {
    display: none;
  }
}


/* ============================================================
   SECTION 2 — HERO BASE STYLES (all pages)
============================================================ */

section.hero {
  background-color: var(--card-bg);
  background-image: radial-gradient(
  ellipse 55% 65% at 82% 47%,
  rgba(var(--hero-accent-rgb), 0.12) 0%,
  rgba(var(--hero-accent-rgb), 0.05) 35%,
  transparent 60%
  );
  border-bottom: none;
  padding: 10px 0 4px;
  position: relative;
  overflow: hidden;
}

/* Decorative outer ring */
section.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hero-accent-rgb), 0.09);
  pointer-events: none;
  z-index: 0;
}

/* Decorative inner ring */
section.hero::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hero-accent-rgb), 0.06);
  pointer-events: none;
  z-index: 0;
}

/* Ensure all direct children of .container sit above the rings */
section.hero .container > * {
  z-index: 1;
}


/* ============================================================
   SECTION 3 — HOMEPAGE HERO (larger — no body class)
   Targets the homepage by excluding the three subpage classes
============================================================ */

body:not(.tools):not(.printables):not(.guides) section.hero {
  
}

body section.hero {
  padding: 22px 0 30px;
}

body:not(.tools):not(.printables):not(.guides) section.hero h1 {
  font-size: 40px;
  letter-spacing: -1.2px;
}


/* ============================================================
   SECTION 4 — BREADCRUMBS (subpages only, restyled for dark bg)
============================================================ */

section.hero .breadcrumbs {
  font-size: 12px;
  color: #5A5048;
  margin-bottom: 16px;
  text-align: left;
}

section.hero .breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}

section.hero .breadcrumbs a:hover {
  color: #C8BFB5;
}

section.hero .breadcrumbs span {
  color: var(--hero-container);
  margin: 0 4px;
}


/* ============================================================
   SECTION 5 — EYEBROW LABEL (pill badge)
============================================================ */

section.hero .eyebrow {
  display: inline-block;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  color: var(--hero-accent-lit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 600px;
}


/* ============================================================
   SECTION 6 — H1 & SUBTITLE
============================================================ */

section.hero h1 {
  font-size: 32px;
  font-weight: 600;
  color: #F5F0EA;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}

/* Accent word — wrap a word in <em> in your h1 to get this */
section.hero h1 em {
  font-style: normal;
  color: var(--hero-accent);
}

section.hero > .container > p,
section.hero p:first-of-type {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 22px;
  line-height: 1.65;
}


/* ============================================================
   SECTION 7 — CTA BUTTONS
   (requires adding HTML — see instructions at top of file)
============================================================ */

/* ── Hero total count badge ──────────────────────────────────
   Shown in the hero of tools/guides/printables index pages
   and on the homepage grand-total strip.
   --------------------------------------------------------- */
/* Legacy single-card hero usage on hub pages
   (e.g. "<p class='hero-total'><strong>131</strong> free tools available</p>"
   on /tools/index.html). Stays as plain text-with-bg, no flex/icon. */
.hero-total {
  display: initial;
  align-items: center;
  gap: 0.45rem;
  margin: 0.6rem auto 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
}

.hero-total strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

/* Type-coded stat card (homepage 3-card strip).
   Triggered only when a type modifier is present so the legacy
   single-card paragraph above stays untouched. Horizontal flex:
   tinted icon block on the left, number-over-label stacked on
   the right. Accent comes from --stat-accent declared per-type.
   Renders as a real <a> link to the matching format hub, so
   text-decoration / color overrides keep it looking like a card. */
.hero-total--tool,
.hero-total--guide,
.hero-total--printable {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-muted);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.hero-total--tool:hover,
.hero-total--guide:hover,
.hero-total--printable:hover,
.hero-total--tool:focus-visible,
.hero-total--guide:focus-visible,
.hero-total--printable:focus-visible {
  border-color: rgba(var(--stat-accent-rgb), 0.45);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
  outline: none;
}

.hero-total-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(var(--stat-accent-rgb), 0.14);
  border: 1px solid rgba(var(--stat-accent-rgb), 0.22);
  color: var(--stat-accent);
  flex: 0 0 auto;
}
.hero-total-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

.hero-total-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.hero-total-label {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* Per-type accent: same hex/rgb triplet as the sitewide type-color
   system (see project_type_color_system memory). Token-scope override
   means .hero-total-icon and the hover border both read from
   --stat-accent without per-component rules. */
.hero-total--tool      { --stat-accent: #D4651A; --stat-accent-rgb: 212, 101, 26; }
.hero-total--guide     { --stat-accent: #3C6EAF; --stat-accent-rgb: 60, 110, 175; }
.hero-total--printable { --stat-accent: #65A30D; --stat-accent-rgb: 101, 163, 13; }

/* Grand-total strip on the homepage */
.hero-grand-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.85rem;
  margin: 0.8rem 0 1rem;
}

.hero-grand-total .hero-total {
  margin: 0;
}

.hero-cta-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--hero-container);
}

.hero-btn-primary,
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-block;
  background: var(--accent);
  color: var(--soft);
  padding: 13px 26px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.15s ease;
  line-height: 1;
}

.hero-btn-primary:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: var(--soft);
  background: var(--accent-dark);
}

.hero-btn-ghost {
  display: inline-block;
  color: var(--hero-container);
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1;
}

.hero-btn-ghost:hover {
  color: #F5F0EA;
}


/* ============================================================
   SECTION 8 — JUMP CARD → HORIZONTAL NAV BAR
   Transforms the "On This Page" dark box into a slim strip
============================================================ */

.jump-card {
  /* Break out of .container to span full viewport width */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -1rem;            /* eat the .section top padding          */
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  padding: 0.55rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--header-bg);
  overflow-x: auto;
  scrollbar-width: none;
}

.jump-card::-webkit-scrollbar {
  display: none;
}

/* Hide "On This Page" label — the bar is self-explanatory now */
.jump-card h2,
.jump-card h3 {
  display: none;
}

/* Link list — horizontal row */
.jump-card ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.jump-card ul li {
  flex-shrink: 0;
}

.jump-card ul li a {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hero-accent);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color 0.15s ease;
  border-right: 1px solid var(--hero-accent);
}

.jump-card ul li a:hover {
  color: var(--hero-accent-lit);
}

/* Remove the bullet "•" prefix from links if present
   (your current links show "• POPULAR TOOLS" etc.) */
.jump-card ul li a::before {
  content: none;
}


/* ============================================================
   SECTION 9 — RESPONSIVE
============================================================ */

@media (max-width: 768px) {

  section.hero {
    padding: 40px 0 44px;
    text-align: center;
  }

  section.hero h1 {
    font-size: 28px;
    letter-spacing: -0.3px;
  }

  body:not(.tools):not(.printables):not(.guides) section.hero h1 {
    font-size: 32px;
  }

  section.hero > .container > p,
  section.hero p:first-of-type {
    font-size: 15px;
    margin-bottom: 24px;
  }

  /* Hide decorative rings on mobile */
  section.hero::before,
  section.hero::after {
    display: none;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .hero-btn-primary,
  .hero-btn-ghost {
    width: 100%;
    text-align: center;
    max-width: 280px;
  }

  /* Label already hidden globally */

}


/* ============================================================
   INDEX PAGE REDESIGN  (v10)
   Compact navigation + item grid for tools/guides/printables
   ============================================================ */

/* ── Horizontal category nav pills ──────────────────────────
   Replaces the old vertical .jump-list inside .jump-card     */
.cat-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0;
  margin-bottom: 0;
  justify-content: center;
  width: 100%;
}

.cat-nav-pills a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.72rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.cat-nav-pills a:hover {
  background: var(--hero-accent);
  border-color: var(--hero-accent-lit);
  color: #fff;
  text-decoration: none;
}

/* On mobile, wrap pills into a 2-column grid so all links are visible */
@media (max-width: 600px) {
  .cat-nav-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
  }
  .cat-nav-pills a {
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    white-space: normal;
    line-height: 1.25;
  }
}


/* ── Compact 4-column index grid ─────────────────────────────
   Used for all category item listings on index pages          */
.index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.5em;
}

@media (max-width: 1100px) {
  .index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .index-grid {
    grid-template-columns: 1fr;
  }
}


/* ── Compact index card ──────────────────────────────────────
   Icon + title in a tight card. Descriptions are hidden sitewide
   (see .index-card-body span rule below) for a cleaner, less busy
   grid. Icons are inline (no boxes) and use the global accent colour. */
.index-card {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px — spec: 8–10px between icon and title */
  padding: 0.58rem 0.65rem;
  background: var(--card-deep);
  border-radius: 7px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    color 0.16s ease;
}

.index-card:hover,
.index-card:focus-visible {
  background: rgba(var(--hero-accent-rgb), 0.08);
  border-color: rgba(var(--hero-accent-rgb), 0.30);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* Icon slot: inline only — no background, no border, no fixed box. */
.index-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-accent);
  background: transparent;
  border: 0;
  opacity: 0.9;

  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

.index-card:hover .index-card-icon,
.index-card:focus-visible .index-card-icon {
  transform: scale(1.08);
  opacity: 1;
}

.index-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.index-card-body {
  min-width: 0;
  flex: 1;
}

.index-card-body strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0;

  transition: color 0.16s ease;
}

.index-card:hover .index-card-body strong,
.index-card:focus-visible .index-card-body strong {
  color: var(--accent-dark);
}

/* Descriptions are intentionally hidden sitewide — grids are icon + title
   only for a cleaner, less busy look. The span content remains in the
   markup for SEO/accessibility but does not render visually. */
.index-card-body span {
  display: none;
}


/* ── Category item-count badge ───────────────────────────────
   Shown in the category heading: "Preparedness  [16]"         */
.cat-count {
/* margin-left: auto; */
  align-self: center;
  vertical-align: middle;
  padding: 0.18rem 0.55rem;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.25);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hero-accent);
  white-space: nowrap;
  letter-spacing: 0.02em;
}


/* ── Improved popular grid breakpoints ───────────────────────
   Adds a 3-col step between 820px and 1200px                  */
@media (min-width: 820px) and (max-width: 1199px) {
  .popular-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ── Compact popular grid ────────────────────────────────────
   3-column featured grid used for the Popular sections.
   Cards use .index-card--pop modifier: bigger icon, no clamp,
   subtle accent top-border to differentiate from regular grid  */
.popular-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1em;
}
@media (max-width: 860px) {
  .popular-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .popular-index-grid { grid-template-columns: 1fr; }
}

.index-card--pop {
  /* border: 2px solid rgba(var(--hero-accent-rgb), 0.38); */
  padding: 0.8rem 0.85rem;
}
/* Popular cards use the same inline icon — spec mandates a single
   Lucide-style 20px SVG with no container, so popular is visually
   differentiated by the accent border + bold text, not a larger icon. */
.index-card--pop .index-card-icon,
.index-card--pop .index-card-icon svg {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.index-card--pop .index-card-icon svg {
  width: 20px;
  height: 20px;
}
/* Popular cards inherit the sitewide hidden-description rule from
   .index-card-body span — no override needed. Accent border and bold
   text remain as the sole differentiators. */


/* ── Article-style card ──────────────────────────────────────
   Use .card--article on guide/tool content cards where
   multiple h2/h3 sections flow inside a single card.
   Adds breathing room between sections without needing
   separate card bubbles per heading.                          */
.card--article > h2:not(:first-child),
.card--article > h3:not(:first-child) {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

/* Tighten the bottom spacing on lists/note-boxes inside
   article cards so they don't add too much gap before the
   next section divider                                        */
.card--article .tips-list  { padding-bottom: 0; }
.card--article .note-box   { margin-bottom: 0; }
.card--article p.muted:last-child { margin-bottom: 0; }

.container .card--article .note-box   { margin-bottom: 20px; }

/* Resource grid inside guide/tool pages:
   2-col at narrow, 3-col from 640px                          */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1em;
}
aside .resource-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .resource-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 15px;}
}
@media (max-width: 400px) {
  .resource-grid { grid-template-columns: 1fr; }
}

/* ─── Per-destination-type card accents ────────────────────────
   Each type modifier overrides --hero-accent / -rgb / -lit at the
   card's local scope. Children that reference those tokens (the
   icon, the hover background/border via .index-card:hover, the
   .index-card-type badge) automatically pick up the type color
   regardless of which page the card sits on. So a Related Tools
   card on a Guide page renders orange even though the page accent
   is blue.

   --_card-accent kept for any legacy consumers; mirrors -rgb.    */
.index-card--tool {
  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
  --_card-accent:    212, 101, 26;
}
.index-card--guide {
  --hero-accent:     #3C6EAF;
  --hero-accent-rgb: 60, 110, 175;
  --hero-accent-lit: #7AAEE8;
  --_card-accent:    60, 110, 175;
}
.index-card--printable {
  --hero-accent:     #65A30D;
  --hero-accent-rgb: 101, 163, 13;
  --hero-accent-lit: #84CC16;
  --_card-accent:    101, 163, 13;
}

.index-card--tool .index-card-icon,
.index-card--guide .index-card-icon,
.index-card--printable .index-card-icon {
  background: transparent;
  border: 0;
  color: var(--hero-accent);
}

/* Type label — small tinted pill rendered below the link title.
   Uses the lit accent for high-contrast text on dark, with a soft
   matching background tint so the pill reads as a real chip. */
.index-card-type {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  background: rgba(var(--hero-accent-rgb), 0.14);
  color: var(--hero-accent-lit);
}

/* ─── Per-type related sections (Related Tools / Guides / Printables)
   Wraps each subsection rendered by related-tools/-guides/-printables.js
   so the heading + the cards inside both inherit the type color
   regardless of which page (tool / guide / printable) they're rendered on.

   Heading color is tied to --hero-accent-lit so it pops against the
   dark page bg without competing visually with the body text. */
.related-section--tool {
  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
}
.related-section--guide {
  --hero-accent:     #3C6EAF;
  --hero-accent-rgb: 60, 110, 175;
  --hero-accent-lit: #7AAEE8;
}
.related-section--printable {
  --hero-accent:     #65A30D;
  --hero-accent-rgb: 101, 163, 13;
  --hero-accent-lit: #84CC16;
}

.related-section + .related-section {
  margin-top: 1.75rem;
}

.related-section > h2,
.related-section > h3 {
  color: var(--hero-accent-lit);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.related-section > h2::before,
.related-section > h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hero-accent);
  flex-shrink: 0;
}

/* ============================================================
   TOWING CAPACITY EXPLAINED — guide-specific components
   Used on: /guides/towing-capacity-explained.html
============================================================ */

/* ── Visual equation chart ──────────────────────────── */
.tow-chart{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:0.5rem 0 0.25rem;
}
.tow-eq{
  display:grid;
  grid-template-columns:minmax(120px, 170px) 1fr;
  gap:1rem;
  align-items:center;
  padding:1rem 1.1rem;
  border-radius:12px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--card-deep);
  border: 1px solid var(--border);
}
.tow-eq:hover{
  border-color:#c7ccd3;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.tow-eq .eq-label{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.tow-eq .eq-abbr{
  font-size:1.35rem;
  font-weight:800;
  line-height:1.1;
  color: var(--hero-accent);
  letter-spacing:0.02em;
}
.tow-eq .eq-name{
  font-size:0.72rem;
  font-weight:700;
  color:var(--text-muted,#6b7280);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.tow-eq .eq-terms{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem 0.75rem;
  font-size:0.95rem;
}
.tow-eq .eq-op{
  font-size:1.4rem;
  font-weight:700;
  color:var(--text-muted,#9ca3af);
  line-height:1;
}
.tow-eq .eq-term{
  display:inline-flex;
  flex-direction:column;
  flex:1 1 0;
  align-items:center;
  text-align:center;
  gap:0.5rem;
  padding:0.75rem 0.85rem;
  border:1px solid var(--border,#e5e7eb);
  border-radius:10px;
  background: var(--card-bg);
  color:var(--text,#1f2937);
  font-weight:600;
  white-space:normal;
  min-width:110px;
}
.tow-eq .eq-op{ flex-shrink:0; }
.tow-eq .eq-term svg{
  width:44px;
  height:44px;
  flex-shrink:0;
  color: var(--hero-accent);
  overflow:visible;
}
@media (max-width:600px){
  .tow-eq{ grid-template-columns:1fr; gap:0.55rem; padding:0.75rem; }
  .tow-eq .eq-abbr{ font-size:1.2rem; }
  .tow-eq .eq-terms{
    flex-wrap:nowrap;
    gap:0.3rem;
    justify-content:center;
  }
  .tow-eq .eq-term{
    flex:1 1 0;
    min-width:0;
    font-size:0.72rem;
    padding:0.45rem 0.3rem;
    gap:0.3rem;
  }
  .tow-eq .eq-term svg{ width:32px; height:32px; }
  .tow-eq .eq-op{ font-size:1rem; flex-shrink:0; }
}

/* ── Reference table ──────────────────────────────── */
.tow-ref-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  margin:0.5rem 0 0;
  background: var(--bg);
  border-collapse: separate; /* Required for border-radius to work */
  border-spacing: 0;         /* Removes gaps between cells */
  border: 1px solid var(--border);    /* Your table border */
  border-radius: 10px;       /* The corner roundness */
  overflow: hidden; 
}

.tow-ref-table th,
.tow-ref-table td{
  text-align:left;
  padding:0.7rem 0.75rem;
  border: 1px solid var(--border);
  vertical-align:middle;
}
.tow-ref-table thead th{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.07em;
  font-weight:700;
  background: rgba(var(--hero-accent-rgb), 0.3);
  color: var(--hero-accent-lit);
}
.tow-ref-table td:first-child a{
  font-weight:700;
  color: var(--hero-accent);
  text-decoration:none;
}
.tow-ref-table td:first-child a:hover{ text-decoration:underline; }
.tow-ref-table tbody tr:last-child td{ border-bottom:none; }
@media (max-width:600px){
  .tow-ref-table th:nth-child(2),
  .tow-ref-table td:nth-child(2){ display:none; }
}

/* ── Per-term explainer blocks ─────────────────────── */
.term-block{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:1.25rem;
  padding:1.1rem 0;
  border-top:1px solid var(--border-color,#e5e7eb);
  scroll-margin-top:80px;
  align-items:center;
}
.term-block:first-of-type{ border-top:none; padding-top:0; }
.term-block .term-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--hero-accent);
  background:transparent;
  border:0;
  flex-shrink:0;
}
.term-block .term-icon svg{ width:100px; height:100px; stroke:currentColor; fill:none; overflow:visible; stroke-width:1; }
.term-block h3{
  margin:0 0 0.3rem;
  font-size:1.15rem;
  font-weight:800;
}
.term-block h3 .abbr{ color: var(--hero-accent); margin-right:0.4rem; }
.term-block .vs{
  margin-top:0.75rem;
  padding:0.6rem 0.75rem;
  background: var(--card-bg);
  border-left:3px solid var(--hero-accent-lit);
  border-radius:4px;
  font-size:0.92rem;
}
.term-block .vs strong{ color: var(--hero-accent); }
@media (max-width:900px){
  .term-block{ grid-template-columns:auto 1fr; gap:1rem; }
}
@media (max-width:600px){
  .term-block{
    grid-template-columns:auto 1fr;
    column-gap:0.85rem;
    row-gap:0.6rem;
    padding:0.9rem 0;
    align-items:start;
  }
  /* Flatten the wrapping content div so its children become grid items */
  .term-block > div:not(.term-icon){ display:contents; }
  .term-block .term-icon{
    grid-column:1; grid-row:1;
  }
  .term-block h3{
    grid-column:2; grid-row:1;
    align-self:center;
    font-size:1.02rem;
    margin:0;
  }
  .term-block h3 .abbr{ display:block; font-size:0.95rem; margin-right:0; }
  .term-block p,
  .term-block .vs{ grid-column:1 / -1; }
  .term-block .term-icon svg{ width:64px; height:64px; }
}

/* ── Door-jamb illustration ────────────────────────── */
.jamb-fig{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  flex-wrap:wrap;
  margin:0.5rem 0 0;
}
.jamb-fig .jamb-art{
  flex:0 0 auto;
  width:200px;
  max-width:100%;
}
.jamb-fig .jamb-copy{
  flex:1 1 260px;
  min-width:240px;
}

/* ── Tip callout ───────────────────────────────────── */
.tow-tip{
  border-left:4px solid var(--hero-accent);
  padding:0.9rem 1rem;
  border-radius:6px;
  margin:1rem 0 0;
  background: rgba(var(--hero-accent-rgb), 0.1);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.12);
}
.tow-tip strong{ color: var(--hero-accent); }

/* ============================================================
   TOWING CAPACITY CHECKER — tool-specific components
   Used on: /tools/towing-capacity-checker.html
============================================================ */

#tow-diagram{background:var(--surface-muted,#f5f5f3);border-radius:14px;padding:1.25rem 1rem .75rem;margin-bottom:1.25rem;transition:background .15s,padding .15s}
#tow-diagram.bg-loaded{background:transparent;padding:0 0 .75rem}
#tow-diagram .rig-stage{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:640/220;border-radius:14px;overflow:hidden}
#tow-diagram .rig-stage > *{position:absolute;inset:0;width:100%;height:100%;display:block}
#tow-diagram .rig-bg{object-fit:cover;display:none}
#tow-diagram .rig-stage.has-bg .rig-bg{display:block}
#tow-diagram .rig-stage.has-bg .rig-fallback{display:none}
#tow-diagram .diagram-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem .75rem;margin-top:.75rem;font-size:.78rem}
#tow-diagram .diagram-legend span{display:flex;align-items:center;gap:.4rem;color:var(--ink-soft,#4b4b46)}
#tow-diagram .dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot-cap{background:#2f7a4a}
.dot-gvwr{background:#c46a1c}
.dot-tw{background:#a33c3c}
.dot-pay{background:#3a6fa0}
@media (max-width:560px){#tow-diagram .diagram-legend{grid-template-columns:repeat(2,1fr)}}

.cap-bars{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.cap-bar{border-radius:12px;padding:.85rem 1rem; background: var(--card-bg); border: 1px solid var(--border);}
.cap-bar-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem}
.cap-bar-head strong{font-size:.9rem}
.cap-bar-head .val{font-weight:600;font-size:.95rem}
.cap-bar-track{position:relative;height:16px;background:var(--bg-main-dark);border-radius:8px;overflow:hidden}
.cap-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:8px;transition:width .25s ease,background-color .25s ease}
.cap-bar-fill.ok{background:#2f7a4a}
.cap-bar-fill.warn{background:#c48a1c}
.cap-bar-fill.bad{background:#a33c3c}
.cap-bar-zone{position:absolute;top:0;height:100%;background:rgba(47,122,74,.18);border-left:1px dashed rgba(47,122,74,.55);border-right:1px dashed rgba(47,122,74,.55);pointer-events:none}
.cap-bar-sub{margin-top:.35rem;font-size:.75rem;color:var(--ink-soft,#4b4b46)}

.verdict{border-radius:14px;padding:1rem 1.1rem;margin-top:1.25rem;display:flex;gap:.9rem;align-items:flex-start}
.verdict-icon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;color:#fff}
.verdict-body strong{display:block;font-size:1.02rem;margin-bottom:.15rem; color: var(--meter-green);}
.verdict-body p { 
  margin:0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #1f2937);
  line-height: 1.25;
}
.verdict.ok  {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.verdict.ok  .verdict-icon{background: var(--meter-green);}
.verdict.warn{background: linear-gradient(135deg,rgba(245, 158, 11, 0.06),rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.20);}
.verdict.warn .verdict-icon{background: var(--meter-yellow);}
.verdict.bad {background: linear-gradient(135deg,rgba(239, 68, 68, 0.06),rgba(239, 68, 68, 0.02));
  border: 1px solid rgba(239, 68, 68, 0.20);}
.verdict.bad .verdict-icon{background:var(--meter-red);}

.term-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem}
.term-strip a{display:block;padding:.55rem .6rem;background:var(--card-deep);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;font-size:.8rem;text-align:center;transition:background .15s}
.term-strip a:hover{  outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18);}
.term-strip a strong{display:block;font-size:.88rem;margin-bottom:.1rem}
.term-strip a span{color:var(--ink-soft,#4b4b46);font-size:.72rem}
@media (max-width:560px){.term-strip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   GAUGE COMPONENT — shared by generator tools
   Used on: /tools/generator-fuel-runtime-calculator.html
            /tools/whole-home-generator-sizing.html
============================================================ */

.calc-result-container{
  padding:0.5rem 0 0.25rem;
  text-align:center;
}
.gauge-svg{
  width:100%;
  max-width:320px;
  height:auto;
  display:inline-block;
  overflow:visible;
}
.gauge-tick{
  font-size:11px;
  fill:var(--text,#6b7280);
  font-weight:600;
}
.gauge-needle{
  transform-origin:150px 150px;
  transform:rotate(-90deg);
  transition:transform 0.55s cubic-bezier(0.34,1.28,0.64,1);
}
.calc-result-readout{
  margin-top:-0.25rem;
}
.calc-result-readout strong{
  font-size:2.1rem;
  font-weight:800;
  display:block;
  line-height:1.1;
  color: var(--meter-green);
}
.calc-result-readout span{
  font-size:0.72rem;
  color: var(--meter-green);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}

/* Two-column layout when the result card contains a half-circle gauge:
   left column = readout / sub / stats stack, right column = gauge.
   Uses display:contents on the inner container so we can place the
   readout and gauge as direct grid items without restructuring the HTML. */
.calc-result:has(> .calc-result-container > .gauge-svg){
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,260px);
  grid-template-areas:
    "status  status"
    "readout gauge"
    "sub     gauge"
    "stats   stats";
  column-gap:1.5rem;
  row-gap:0.35rem;
  align-items:start;
}
.calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container > .gauge-svg{
  /* SVG viewBox has ~18px of empty space above the top tick and ~10px
     below the bottom ticks; pull it tighter against neighboring rows. */
  margin-top:-4rem;
  margin-bottom:-4rem;
}
.calc-result:has(> .calc-result-container > .gauge-svg) > .result-status{ grid-area:status; }
.calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container{
  display:contents;
}
.calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container > .calc-result-readout{
  grid-area:readout;
  text-align:left;
  margin-top:0;
}
.calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container > .gauge-svg{
  grid-area:gauge;
  align-self:center;
  justify-self:center;
}
.calc-result:has(> .calc-result-container > .gauge-svg) > .result-sub{ grid-area:sub; }
.calc-result:has(> .calc-result-container > .gauge-svg) > .result-grid{ grid-area:stats; }
/* Any other direct child of the result card (e.g., #hss-upgrades on the
   home-security-score calculator) spans the full width below the grid. */
.calc-result:has(> .calc-result-container > .gauge-svg) > #hss-upgrades{
  grid-column:1 / -1;
}

@media (max-width:600px){
  .calc-result:has(> .calc-result-container > .gauge-svg){
    grid-template-columns:1fr;
    grid-template-areas:
      "status"
      "gauge"
      "readout"
      "sub"
      "stats";
    column-gap:0;
  }
  .calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container > .calc-result-readout{
    text-align:center;
  }
  /* Reset desktop's negative gauge margins on mobile — without this,
     the stacked layout would overlap the gauge with the status eyebrow
     above and the readout below. */
  .calc-result:has(> .calc-result-container > .gauge-svg) > .calc-result-container > .gauge-svg{
    margin-top:0;
    margin-bottom:0;
  }
}

/* ============================================================
   OUTAGE COVERAGE BAR — generator-fuel-runtime-calculator
   Horizontal duration bar with named preparedness milestones
   (8h overnight, 24h day, 72h FEMA standard, 168h week).
   Linear-within-bands scale, so each milestone sits at exactly
   25%/50%/75%/100% across the bar regardless of runtime length.
============================================================ */

.outage-bar{
  position:relative;
  margin:0.4rem auto 0.5rem;
  padding-top:14px;            /* room for the needle tip */
  max-width:520px;
}
.outage-bar-track{
  position:relative;
  display:flex;
  height:22px;
  border-radius:11px;
  overflow:hidden;
  background:#f3f4f6;
}
.outage-bar-band{
  flex:1 1 0;
  height:100%;
}
.outage-bar-band.band-red    { background:#ef4444; }
.outage-bar-band.band-orange { background:#f97316; }
.outage-bar-band.band-yellow { background:#eab308; }
.outage-bar-band.band-green  { background:#10b981; }
.outage-bar-band + .outage-bar-band{
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.55);
}
.outage-bar-needle{
  position:absolute;
  top:0;
  left:50%;
  width:0;
  height:36px;                 /* tip (14px) + line (22px = track height) */
  pointer-events:none;
  transition:left 0.55s cubic-bezier(0.34,1.28,0.64,1);
}
.outage-bar-needle-tip{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:9px solid var(--text,#0f172a);
}
.outage-bar-needle-line{
  position:absolute;
  top:14px;
  height:22px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background:var(--text,#0f172a);
  border-radius:1px;
}
.outage-bar-needle.is-overflow .outage-bar-needle-tip{
  border-top-color:#10b981;    /* still in green territory, just past the scale */
}
.outage-bar-needle.is-overflow .outage-bar-needle-line{
  background:#10b981;
}
.outage-bar-ticks{
  position:relative;
  list-style:none;
  margin:0.55rem 0 0;
  padding:0;
  height:2.5rem;
}
.outage-bar-ticks li{
  position:absolute;
  text-align:center;
  white-space:nowrap;
  transform:translateX(-50%);
}
.outage-bar-ticks li:nth-child(1){ left:25%; }
.outage-bar-ticks li:nth-child(2){ left:50%; }
.outage-bar-ticks li:nth-child(3){ left:75%; }
.outage-bar-ticks li:nth-child(4){ left:100%; transform:translateX(-100%); text-align:right; }
.outage-bar-ticks li strong{
  display:block;
  font-size:0.85rem;
  font-weight:700;
  color:var(--text,#0f172a);
  line-height:1.2;
}
.outage-bar-ticks li span{
  display:block;
  font-size:0.7rem;
  color:var(--text-muted,#646464);
  letter-spacing:0.02em;
}
@media (max-width:480px){
  .outage-bar{ max-width:none; }
  .outage-bar-ticks li strong{ font-size:0.78rem; }
  .outage-bar-ticks li span{ font-size:0.62rem; }
}

/* ============================================================
   PROS/CONS COMPARISON CARDS — 2×2 grid for product trade-offs
   Used on comparison guides (e.g. generator-vs-solar-backup).
   Row 1 = pros (green accent, check icon), Row 2 = cons (red
   accent, alert icon). Stacks to 1 column on narrow viewports.
============================================================ */

.pc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin:0.6rem 0 1.25rem;
}
@media (max-width:720px){
  .pc-grid{ grid-template-columns:1fr; }
}
.pc-card{
  background: rgba(var(--hero-accent-rgb), 0.05);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.12);
  border-radius:12px;
  padding:0.95rem 1.1rem 1.05rem;
}
.pc-card--pro{ border-left:4px solid #10b981; }
.pc-card--con{ border-left:4px solid #ef4444; }
.pc-card__title{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin:0 0 0.55rem;
  font-size:0.98rem;
  font-weight:700;
  color:var(--text,#1f2937);
}
.pc-card--pro .pc-card__title{ color:#047857; }
.pc-card--con .pc-card__title{ color:#b91c1c; }
.pc-card__icon{
  display:inline-flex;
  width:18px;
  height:18px;
  flex-shrink:0;
}
.pc-card__icon svg{
  width:100%;
  height:100%;
}
.pc-list{
  list-style:none;
  padding:0;
  margin:0;
}
.pc-list li{
  position:relative;
  padding:0.28rem 0 0.28rem 1rem;
  font-size:0.9rem;
  line-height:1.45;
  color:var(--text,#374151);
}
.pc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.72rem;
  width:6px;
  height:6px;
  border-radius:50%;
}
.pc-card--pro .pc-list li::before{ background:#10b981; }
.pc-card--con .pc-list li::before{ background:#ef4444; }

/* ============================================================
   DEBT PAYOFF CALCULATOR — tool-specific
   Used on: /tools/debt-payoff-calculator.html
============================================================ */

#debt-list{counter-reset:debt-counter;}
#debt-payoff-calculator-form .debt-entry{
  counter-increment:debt-counter;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem 0.75rem;
  padding:0.875rem 1rem 1rem;
  background:var(--card-deep);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:0.75rem;
}
#debt-payoff-calculator-form .debt-entry::before{
  content:"Debt " counter(debt-counter);
  grid-column:1/-1;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:0.25rem;
}
#debt-payoff-calculator-form .debt-entry .field{margin:0;}
#debt-payoff-calculator-form .debt-entry .unit-note{display:none;}

/* ============================================================
   FUEL STORAGE CALCULATOR — tool-specific
   Used on: /tools/fuel-storage-calculator.html
============================================================ */

/* Gas can visualization */
.can-viz{
  margin-top:0.9rem;
  padding:0.9rem 0.85rem 0.75rem;
  border:1px solid var(--border-color,#e5e7eb);
  border-radius:12px;
  background:linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
}
.can-viz-title{
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
  font-weight:700;
  margin:0 0 0.55rem;
}
.can-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:flex-end;
  min-height:46px;
}
.can{
  width:30px;
  height:40px;
  flex:0 0 auto;
  opacity:0;
  transform:translateY(6px) scale(0.85);
  animation:canPop 0.35s ease-out forwards;
}
@keyframes canPop{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.can-overflow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  height:28px;
  border-radius:999px;
  background:#fee2e2;
  color:#991b1b;
  font-weight:700;
  font-size:0.8rem;
  margin-left:2px;
}
.can-extra{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-top:0.75rem;
  padding-top:0.65rem;
  border-top:1px dashed var(--border-color,#e5e7eb);
}
.can-extra-item strong{
  display:block;
  font-size:1.1rem;
  font-weight:800;
  color:var(--text,#1f2937);
  line-height:1.1;
}
.can-extra-item span{
  font-size:0.7rem;
  color:var(--text-muted,#6b7280);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
}

/* ============================================================
   GAS MILEAGE / MPG TRACKER — tool-specific
   Used on: /tools/gas-mileage-mpg-tracker.html
============================================================ */

/* Fuel-economy trio: MPG / L/100km / km/L */
.econ-trio{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.5rem;
  margin:0.25rem 0 0.5rem;
  padding:0.75rem 0.5rem;
  border-radius:12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.econ-item{
  text-align:center;
  padding:0.25rem;
}
.econ-item strong{
  display:block;
  font-size:1.6rem;
  font-weight:800;
  line-height:1.1;
  color:var(--meter-green);
  transition:color 0.2s ease;
}
.econ-item.primary strong{
  color: var(--meter-green);
}
.econ-item span{
  display:block;
  font-size:0.68rem;
  color:var(--text-muted,#6b7280);
  letter-spacing:0.07em;
  text-transform:uppercase;
  font-weight:700;
  margin-top:0.15rem;
}
@media (max-width:480px){
  .econ-item strong{ font-size:1.35rem; }
  .econ-item span{ font-size:0.6rem; letter-spacing:0.04em; }
}

/* ============================================================
   GO-BAG WEIGHT BUDGET — tool-specific
   Used on: /tools/go-bag-weight-budget.html
============================================================ */

/* 3-column grid for go-bag category weight inputs */
#go-bag-form .cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.75rem 1rem;
}
#go-bag-form .cat-grid .cat-field{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  min-width:0;
}
#go-bag-form .cat-grid .cat-field label{
  font-size:0.82rem;
  font-weight:600;
  line-height:1.25;
  color:var(--text,#1f2937);
}
#go-bag-form .cat-grid .cat-field input{
  width:100%;
  padding:0.45rem 0.55rem;
  font-size:0.95rem;
}
#go-bag-form .cat-grid .cat-field .unit-note{
  font-size:0.7rem;
  line-height:1.3;
  color:var(--text-muted,#6b7280);
}
@media (max-width:700px){
  #go-bag-form .cat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  #go-bag-form .cat-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   HOME INVENTORY TRACKER — tool-specific
   Used on: /tools/home-inventory-tracker.html
============================================================ */

.inventory-table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:0.9rem; }
.inventory-table th { background:var(--color-surface, #f4f4f4); padding:8px 10px; text-align:left; font-weight:600; border-bottom:2px solid var(--color-border, #e0e0e0); }
.inventory-table td { padding:8px 10px; border-bottom:1px solid var(--color-border, #e0e0e0); vertical-align:middle; }
.inventory-table tr:hover td { background:var(--color-surface, #f9f9f9); }
.inventory-table .del-btn { background:none; border:none; color:#c0392b; cursor:pointer; font-size:1.1rem; padding:2px 6px; border-radius:4px; }
.inventory-table .del-btn:hover { background:#fdecea; }
.category-totals { margin-top:1.25rem; }
.category-totals table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.category-totals td { padding:6px 10px; border-bottom:1px solid var(--color-border, #e0e0e0); }
.category-totals td:last-child { text-align:right; font-weight:600; }
.copy-btn { margin-top:1rem; }
.empty-state { color:#999; font-style:italic; text-align:center; padding:1.5rem 0; }
.add-row { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:flex-end; margin-top:1rem; }
.add-row .field { margin:0; flex:1 1 140px; }
.add-row .field label { font-size:0.8rem; margin-bottom:3px; display:block; }
.add-row input, .add-row select { padding:7px 9px; font-size:0.9rem; }
.grand-total-row { font-size:1.05rem; font-weight:700; border-top:2px solid var(--color-border, #e0e0e0) !important; }

/* ============================================================
   MEDICATION EXPIRY TRACKER — tool-specific
   Used on: /tools/medication-expiry-tracker.html
============================================================ */

.med-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
.med-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border, #e5e7eb); font-weight: 600; }
.med-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border, #e5e7eb); vertical-align: middle; }
.med-table tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 0.2em 0.6em; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.badge--expired  { background: #fee2e2; color: #991b1b; }
.badge--soon     { background: #fef3c7; color: #92400e; }
.badge--ok       { background: #d1fae5; color: #065f46; }
.remove-btn { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 1rem; padding: 0.25rem; }
.remove-btn:hover { color: #ef4444; }
#med-list-empty { color: var(--muted, #6b7280); font-style: italic; margin-top: 1rem; }

/* ============================================================
   WATER STORAGE CALCULATOR — tool-specific
   Used on: /tools/water-storage-calculator.html
============================================================ */

/* Jug visualization */
.jug-viz{
  margin-top:0.9rem;
  padding:0.9rem 0.85rem 0.75rem;
  border:1px solid var(--border-color,#e5e7eb);
  border-radius:12px;
  background:linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}
.jug-viz-title{
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
  font-weight:700;
  margin:0 0 0.55rem;
}
.jug-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:flex-end;
  min-height:46px;
}
.jug{
  width:30px;
  height:40px;
  flex:0 0 auto;
  opacity:0;
  transform:translateY(6px) scale(0.85);
  animation:jugPop 0.35s ease-out forwards;
}
@keyframes jugPop{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.jug-overflow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  height:28px;
  border-radius:999px;
  background:#e0f2fe;
  color:#0369a1;
  font-weight:700;
  font-size:0.8rem;
  margin-left:2px;
}
.jug-extra{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-top:0.75rem;
  padding-top:0.65rem;
  border-top:1px dashed var(--border-color,#e5e7eb);
}
.jug-extra-item strong{
  display:block;
  font-size:1.1rem;
  font-weight:800;
  color:var(--text,#1f2937);
  line-height:1.1;
}
.jug-extra-item span{
  font-size:0.7rem;
  color:var(--text-muted,#6b7280);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
}

/* ============================================================
   WHOLE-HOME GENERATOR SIZING — tool-specific
   Used on: /tools/whole-home-generator-sizing.html
   (Note: also uses the shared GAUGE COMPONENT above)
============================================================ */

/* Scoped styling for this checkbox-heavy form. */
#whole-home-generator-sizing-form{grid-template-columns:1fr;}
@media (min-width:520px){
  #whole-home-generator-sizing-form{grid-template-columns:1fr 1fr 1fr;}
}
#whole-home-generator-sizing-form .field.full{grid-column:1/-1;}
/* Section headers: compact, uppercase tag look */
#whole-home-generator-sizing-form .section-head{
  margin-top:0.35rem;
  padding:0.35rem 0 0.15rem;
  border-bottom:1px solid #e5e7eb;
}
#whole-home-generator-sizing-form .section-head label{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-muted,#666);
  margin:0;
}
#whole-home-generator-sizing-form .section-head .unit-note{
  margin-top:0.15rem;
  font-size:0.8rem;
}
/* Checkbox rows: lighter weight, tighter */
#whole-home-generator-sizing-form .appliance-row{margin:0;}
#whole-home-generator-sizing-form .appliance-row label{
  display:flex;
  align-items:center;
  gap:0.45rem;
  font-weight:400;
  font-size:0.92rem;
  margin:0;
  padding:0.3rem 0;
  cursor:pointer;
}
#whole-home-generator-sizing-form .appliance-row input[type="checkbox"]{
  width:auto;
  margin:0;
  flex:0 0 auto;
}


/* ============================================================
   APPLIANCE TILE — selectable card-style appliance picker
   Used on: /household/energy/appliance-wattage-reference.html
   Replaces the old flat-row checkbox list with a 1/2/3-column grid
   of clickable tiles. Strong active state via orange accent border +
   subtle bg tint + custom checkbox indicator filled with the same
   orange. Component is page-agnostic so future tools can reuse it.
============================================================ */

.appliance-tile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.55rem;
  margin:0.4rem 0 0;
}
@media (min-width:560px){
  .appliance-tile-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .appliance-tile-grid{ grid-template-columns:1fr 1fr 1fr; }
}

.appliance-tile{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  padding:0.78rem 0.9rem;
  background:var(--form-bg);     /* dark input-chip surface so selected orange lands harder */
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:border-color 0.18s cubic-bezier(.4,.0,.2,1),
             background 0.18s cubic-bezier(.4,.0,.2,1),
             box-shadow 0.18s cubic-bezier(.4,.0,.2,1),
             transform 0.18s cubic-bezier(.4,.0,.2,1);
  user-select:none;
  margin:0;
  min-height:64px;
}
.appliance-tile:hover{
  border-color:rgba(249,115,22,0.45);
  background:rgba(249,115,22,0.06);
  transform:translateY(-1px);
}
.appliance-tile:focus-within{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(249,115,22,0.22);
}
.appliance-tile.is-selected{
  border-color:var(--accent);
  background:rgba(249,115,22,0.12);
  box-shadow:0 0 0 1px var(--accent) inset,
             0 1px 4px rgba(249,115,22,0.22);
}
.appliance-tile.is-selected:hover{
  background:rgba(249,115,22,0.16);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--accent) inset,
             0 3px 8px rgba(249,115,22,0.28);
}

/* Visually hide the native checkbox but keep it focusable for keyboard nav */
.appliance-tile input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.appliance-tile__check{
  width:20px;
  height:20px;
  flex-shrink:0;
  border:1.75px solid var(--form-border);
  border-radius:5px;
  background:var(--card-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0.1rem;
  transition:border-color 0.18s cubic-bezier(.4,.0,.2,1),
             background 0.18s cubic-bezier(.4,.0,.2,1),
             transform 0.18s cubic-bezier(.4,.0,.2,1);
}
.appliance-tile:hover .appliance-tile__check{
  border-color:var(--text-muted);
}
.appliance-tile.is-selected .appliance-tile__check{
  background:var(--accent);
  border-color:var(--accent);
}
.appliance-tile.is-selected .appliance-tile__check::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  margin-top:-2px;
}

.appliance-tile__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0.18rem;
}
.appliance-tile__name{
  font-size:0.93rem;
  font-weight:540;
  line-height:1.3;
  color:var(--text,#1f2937);
  letter-spacing:-0.005em;
}
.appliance-tile__watts,
.appliance-tile__meta{
  font-size:0.78rem;
  color:var(--text-muted,#6b7280);
  font-variant-numeric:tabular-nums;
  line-height:1.3;
}
/* Internal hierarchy on the secondary line: primary value feels anchored, suffix recedes */
.appliance-tile__watts strong,
.appliance-tile__meta strong{
  font-weight:600;
  color:var(--text);
}
.appliance-tile__watts-surge{
  color:var(--text-muted);
  font-weight:400;
}

/* Selected state: name darkens + thickens, secondary line picks up the orange family */
.appliance-tile.is-selected .appliance-tile__name{
  color: var(--hero-accent);
  font-weight:300;
}
.appliance-tile.is-selected .appliance-tile__watts strong,
.appliance-tile.is-selected .appliance-tile__meta strong{
  color: var(--meter-green);
}
.appliance-tile.is-selected .appliance-tile__watts-surge{
  color: var(--meter-red);
}

/* ============================================================
   Staples Stockpile Table — multi-row data entry component for
   the Pantry Stockpile Planner. Each row: include checkbox,
   staple name, editable per-person-per-day rate with unit,
   live-computed total. Stacks vertically on narrow viewports.
============================================================ */
.staples-table-wrap{
  margin:0.6rem 0 0;
  overflow-x:auto;
}
.staples-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.94rem;
  
}
.staples-table thead th{
  padding:0.55rem 0.5rem;
  text-align:left;
  font-weight:600;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-top:1px solid var(--border,#e5e7eb);
  border-bottom:1px solid var(--border,#e5e7eb);
  background: var(--card-bg);
  color: var(--hero-accent);
}

.staples-table thead th:first-child{
  border-left: 1px solid var(--border);
}

.staples-table thead th:last-child{
  text-align:right;
  border-right: 1px solid var(--border);
}
.staples-table tbody td{
  padding:0.6rem 0.5rem;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}

.staples-table tbody td:first-child{
}

.staples-table tbody tr.is-unchecked td{
  opacity:0.45;
}
.staples-table tbody tr.is-unchecked td.staple-include-cell,
.staples-table tbody tr.is-unchecked td.staple-rate-cell input{
  opacity:1;
}
.staples-table .staple-name{
  display:block;
  font-weight:500;
  color:var(--text,#1a1a1a);
  line-height:1.25;
}
.staples-table .staple-shelf{
  display:block;
  font-size:0.76rem;
  color:var(--muted,#6b7280);
  margin-top:0.15rem;
  letter-spacing:0;
}
.staples-table tr.staple-category td{
  padding:1.1rem 0.5rem 0.45rem;
  border-bottom:none;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text,#6b7280);
  background:transparent;
}
.staples-table tr.staple-category:first-child td{
  padding-top:0.45rem;
}
.staples-table .staple-rate-input{
  width:4.6em;
  padding:0.35rem 0.5rem;
  font-size:0.92rem;
  border:1px solid var(--form-border);
  border-radius:4px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  background:var(--form-bg);
  color:var(--text);
}
.staples-table .staple-rate-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(249,115,22,0.22);
}
.staples-table .staple-rate-cell{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.staples-table .staple-unit{
  color:var(--text-muted,#6b7280);
  font-size:0.88rem;
  margin-left:0.35rem;
}
.staples-table .staple-total{
  text-align:right;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:1.02rem;
  color:#C2410C;
}
.staples-table .staple-total.is-empty{
  color:var(--text-muted,#9ca3af);
  font-weight:400;
  font-size:0.94rem;
}
.staples-table input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#C2410C;
  cursor:pointer;
}

@media (max-width:600px){
  .staples-table thead{display:none;}
  .staples-table tbody tr{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:0.6rem;
    row-gap:0.25rem;
    padding:0.7rem 0;
    border-bottom:1px solid var(--border,#e5e7eb);
  }
  .staples-table tbody td{
    padding:0;
    border-bottom:none;
  }
  .staples-table .staple-include-cell{
    grid-row:1 / 3;
    align-self:center;
  }
  .staples-table .staple-name-cell{
    align-self:end;
  }
  .staples-table .staple-rate-cell{
    grid-column:2;
  }
  .staples-table .staple-rate-cell::before{
    content:"Rate: ";
    color:var(--text-muted,#6b7280);
    font-size:0.85rem;
    margin-right:0.35rem;
  }
  .staples-table .staple-total{
    grid-column:2;
    text-align:left;
  }
  .staples-table .staple-total::before{
    content:"Total: ";
    color:var(--text-muted,#6b7280);
    font-size:0.85rem;
    font-weight:400;
    margin-right:0.35rem;
  }
}

/* Coverage badge sitting next to the result-status label. Mirrors
   the coverage banner color scale. */
.coverage-badge{
  display:inline-block;
  margin-left:0.5rem;
  padding:0.18rem 0.6rem;
  font-size:0.74rem;
  font-weight:600;
  border-radius:999px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  vertical-align:middle;
}
.coverage-badge.is-idle{background:rgba(255,255,255,0.06);color:var(--text-muted);}
.coverage-badge.is-low{
  background:linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  border:1px solid rgba(239, 68, 68, 0.20);
  color:var(--meter-red);
}
.coverage-badge.is-mid{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border:1px solid rgba(245, 158, 11, 0.20);
  color:var(--meter-yellow);
}
.coverage-badge.is-good{
  background:linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border:1px solid rgba(34, 197, 94, 0.20);
  color:var(--meter-green);
}

/* Side-panel "Storage & rotation" card. Three operational rows
   (Rotate / Store / Build) with state-aware content driven by
   the calculator. Replaces the older single-sentence Pro tip. */
.side-storage{
  list-style:none;
  padding:0;
  margin:0;
}
.side-storage .storage-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.55rem;
  align-items:start;
  padding:0.75rem 0;
  font-size:0.91rem;
  line-height:1.4;
  border-bottom:1px solid var(--border);
}
.side-storage .storage-item:first-child{padding-top:0;}
.side-storage .storage-item:last-child{border-bottom:none;padding-bottom:0;}
.side-storage .storage-tag{
  flex-shrink:0;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.16rem 0.5rem;
  background:rgba(194,65,12,0.10);
  color:#C2410C;
  border-radius:4px;
  align-self:start;
  margin-top:0.05rem;
  white-space:nowrap;
}
.side-storage .storage-text{
  color:var(--muted,#1a1a1a);
}

/* Coverage banner under the staples table — surfaces calorie
   coverage state with a soft tinted band. */
.coverage-banner{
  margin-top:1rem;
  padding:0.65rem 0.85rem;
  border-radius:6px;
  font-size:0.92rem;
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.coverage-banner.is-low{
  background:linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  border:1px solid rgba(239, 68, 68, 0.20);
  color:var(--meter-red);
}
.coverage-banner.is-mid{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border:1px solid rgba(245, 158, 11, 0.20);
  color:var(--meter-yellow);
}
.coverage-banner.is-good{
  background:linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border:1px solid rgba(34, 197, 94, 0.20);
  color:var(--meter-green);
}
.coverage-banner__icon{flex-shrink:0;font-weight:700;}

/* Single-item fallback details block */
.single-item-toggle{
  margin-top:0.8rem;
  padding:0.9rem 1rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card-deep);
}
.single-item-toggle > summary{
  cursor:pointer;
  font-weight:500;
  color:var(--text);
  list-style:none;
}
.single-item-toggle > summary::-webkit-details-marker{display:none;}
.single-item-toggle > summary::before{
  content:"+";
  display:inline-block;
  margin-right:0.5rem;
  font-weight:600;
  color:var(--accent-light);
  width:1em;
}
.single-item-toggle[open] > summary::before{content:"−";}
.single-item-toggle .form-grid{margin-top:1rem;}
.single-item-toggle .si-result{
  margin-top:1rem;
  padding:0.75rem 1rem;
  background:var(--card-deep);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.95rem;
  color:var(--text);
}
.single-item-toggle .si-result strong{
  font-size:1.1rem;
  color:var(--accent-light);
  font-variant-numeric:tabular-nums;
}

/* Section header polish — shared across forms that adopt the .appliance-tile
   premium pattern. Extend the selector list when porting the pattern to a new tool. */
#appliance-wattage-reference-form .calc-section,
#whole-home-generator-sizing-form .calc-section,
#home-security-score-calculator-form .calc-section,
#transfer-switch-load-calculator-form .calc-section,
#variable-income-budget-planner-form .calc-section,
#car-loan-payment-calculator-form .calc-section,
#credit-card-payoff-calculator-form .calc-section,
#propane-vs-ng-form .calc-section,
#weed-removal-method-picker-form .calc-section,
#greenhouse-size-form .calc-section,
#72-hour-kit-calculator-form .calc-section,
#go-bag-form .calc-section,
#pet-evacuation-prep-checker-form .calc-section,
#hurricane-prep-form .calc-section,
#evacuation-route-time-calculator-form .calc-section,
#ethernet-form .calc-section,
#wifi-bandwidth-needs-calculator-form .calc-section,
#mesh-form .calc-section,
#simple-budget-calculator-form .calc-section,
#50-30-20-budget-calculator-form .calc-section,
#gravel-form .calc-section,
#raised-bed-form .calc-section,
#black-earth-form .calc-section,
#compost-form .calc-section,
#container-garden-soil-calculator-form .calc-section,
#bmi-calculator-form .calc-section,
#pantry-form .calc-section,
#deck-material-calculator-form .calc-section,
#flooring-material-calculator-form .calc-section,
#roof-material-calculator-form .calc-section,
#home-energy-audit-calculator-form .calc-section,
#water-heater-recovery-time-calculator-form .calc-section,
#cpr-compression-metronome-form .calc-section,
#medication-expiry-tracker-form .calc-section,
#med-storage-form .calc-section,
#freezer-loss-form .calc-section,
#fridge-safety-form .calc-section,
#tire-tread-depth-checker-form .calc-section,
#seed-germination-estimator-form .calc-section,
#companion-form .calc-section,
#seed-calendar-form .calc-section,
#garden-form .calc-section,
#roof-snow-load-calculator-form .calc-section,
#square-footage-form .calc-section,
#family-calorie-needs-calculator-form .calc-section,
#battery-runtime-form .calc-section,
#generator-size-calculator-form .calc-section,
#propane-tank-level-estimator-form .calc-section,
#power-outage-duration-estimator-form .calc-section,
#sinking-fund-calculator-form .calc-section,
#debt-payoff-calculator-form .calc-section,
#frost-form .calc-section,
#hvac-btu-sizing-calculator-form .calc-section,
#sump-pump-runtime-calculator-form .calc-section,
#heat-loss-form .calc-section,
#bug-out-bag-weight-calculator-form .calc-section,
#emergency-cash-form .calc-section,
#gas-mileage-mpg-tracker-form .calc-section,
#vehicle-total-cost-of-ownership-calculator-form .calc-section,
#tire-pressure-load-calculator-form .calc-section,
#fuel-cost-trip-calculator-form .calc-section,
#road-trip-split-cost-calculator-form .calc-section,
#towing-capacity-checker-form .calc-section,
#trip-time-calculator-form .calc-section,
#concrete-form .calc-section,
#fence-material-calculator-form .calc-section,
#paint-form .calc-section,
#fertilizer-form .calc-section,
#mulch-form .calc-section,
#water-storage-form .calc-section,
#water-needs-form .calc-section,
#fuel-storage-form .calc-section,
#propane-usage-form .calc-section,
#plant-spacing-form .calc-section,
#diesel-storage-life-calculator-form .calc-section,
#kerosene-storage-calculator-form .calc-section,
#fuel-stabilizer-dosage-calculator-form .calc-section,
#gasoline-rotation-schedule-form .calc-section,
#generator-runtime-form .calc-section,
#heating-fuel-form .calc-section,
#power-station-form .calc-section,
#ups-battery-runtime-calculator-form .calc-section,
#solar-recharge-form .calc-section,
#row-spacing-form .calc-section,
#garden-yield-family-calculator-form .calc-section,
#harvest-form .calc-section,
#drip-irrigation-flow-rate-calculator-form .calc-section,
#watering-schedule-calculator-form .calc-section,
#medication-dosage-weight-calculator-form .calc-section,
#calorie-burn-form .calc-section,
#daily-water-intake-calculator-form .calc-section,
#heart-rate-zone-calculator-form .calc-section,
#electricity-cost-calculator-form .calc-section,
#kwh-to-cost-calculator-form .calc-section,
#ev-charging-cost-calculator-form .calc-section,
#extension-cord-gauge-calculator-form .calc-section,
#generator-noise-form .calc-section,
#home-insulation-r-value-calculator-form .calc-section,
#solar-sizing-form .calc-section,
#solar-output-form .calc-section,
#watts-to-amps-form .calc-section,
#car-depreciation-calculator-form .calc-section,
#storage-unit-size-estimator-form .calc-section,
#mre-meal-count-calculator-form .calc-section,
#protein-storage-calculator-form .calc-section,
#rainwater-form .calc-section,
#water-purification-tablet-calculator-form .calc-section,
#emergency-pet-supply-calculator-form .calc-section,
#emergency-sanitation-calculator-form .calc-section,
#shelter-in-place-supply-calculator-form .calc-section,
#oil-change-interval-calculator-form .calc-section,
#freeze-dried-food-rehydration-calculator-form .calc-section,
#lawn-fertilizer-form .calc-section,
#fertilizer-selector-form .calc-section,
#water-heater-flush-frequency-calculator-form .calc-section,
#pressure-washer-psi-gpm-calculator-form .calc-section,
#hvac-filter-replacement-schedule-form .calc-section,
#outdoor-security-lighting-spacing-calculator-form .calc-section,
#weighted-blanket-weight-calculator-form .calc-section,
#dehydration-form .calc-section,
#blood-pressure-form .calc-section,
#refill-timing-form .calc-section,
#brake-pad-form .calc-section,
#moving-truck-form .calc-section,
#crop-rotation-planner-form .calc-section,
#smoker-size-form .calc-section,
#first-aid-kit-checker-form .calc-section,
#home-inventory-tracker-form .calc-section,
#garage-workshop-tool-inventory-form .calc-section{
  margin-top:1.4rem;
}
#appliance-wattage-reference-form .calc-section:first-of-type,
#whole-home-generator-sizing-form .calc-section:first-of-type,
#home-security-score-calculator-form .calc-section:first-of-type,
#transfer-switch-load-calculator-form .calc-section:first-of-type,
#variable-income-budget-planner-form .calc-section:first-of-type,
#car-loan-payment-calculator-form .calc-section:first-of-type,
#credit-card-payoff-calculator-form .calc-section:first-of-type,
#propane-vs-ng-form .calc-section:first-of-type,
#weed-removal-method-picker-form .calc-section:first-of-type,
#greenhouse-size-form .calc-section:first-of-type,
#72-hour-kit-calculator-form .calc-section:first-of-type,
#go-bag-form .calc-section:first-of-type,
#pet-evacuation-prep-checker-form .calc-section:first-of-type,
#hurricane-prep-form .calc-section:first-of-type,
#evacuation-route-time-calculator-form .calc-section:first-of-type,
#ethernet-form .calc-section:first-of-type,
#wifi-bandwidth-needs-calculator-form .calc-section:first-of-type,
#mesh-form .calc-section:first-of-type,
#simple-budget-calculator-form .calc-section:first-of-type,
#50-30-20-budget-calculator-form .calc-section:first-of-type,
#gravel-form .calc-section:first-of-type,
#raised-bed-form .calc-section:first-of-type,
#black-earth-form .calc-section:first-of-type,
#compost-form .calc-section:first-of-type,
#container-garden-soil-calculator-form .calc-section:first-of-type,
#bmi-calculator-form .calc-section:first-of-type,
#pantry-form .calc-section:first-of-type,
#deck-material-calculator-form .calc-section:first-of-type,
#flooring-material-calculator-form .calc-section:first-of-type,
#roof-material-calculator-form .calc-section:first-of-type,
#home-energy-audit-calculator-form .calc-section:first-of-type,
#water-heater-recovery-time-calculator-form .calc-section:first-of-type,
#cpr-compression-metronome-form .calc-section:first-of-type,
#medication-expiry-tracker-form .calc-section:first-of-type,
#med-storage-form .calc-section:first-of-type,
#freezer-loss-form .calc-section:first-of-type,
#fridge-safety-form .calc-section:first-of-type,
#tire-tread-depth-checker-form .calc-section:first-of-type,
#seed-germination-estimator-form .calc-section:first-of-type,
#companion-form .calc-section:first-of-type,
#seed-calendar-form .calc-section:first-of-type,
#garden-form .calc-section:first-of-type,
#roof-snow-load-calculator-form .calc-section:first-of-type,
#square-footage-form .calc-section:first-of-type,
#family-calorie-needs-calculator-form .calc-section:first-of-type,
#battery-runtime-form .calc-section:first-of-type,
#generator-size-calculator-form .calc-section:first-of-type,
#propane-tank-level-estimator-form .calc-section:first-of-type,
#power-outage-duration-estimator-form .calc-section:first-of-type,
#sinking-fund-calculator-form .calc-section:first-of-type,
#debt-payoff-calculator-form .calc-section:first-of-type,
#frost-form .calc-section:first-of-type,
#hvac-btu-sizing-calculator-form .calc-section:first-of-type,
#sump-pump-runtime-calculator-form .calc-section:first-of-type,
#heat-loss-form .calc-section:first-of-type,
#bug-out-bag-weight-calculator-form .calc-section:first-of-type,
#emergency-cash-form .calc-section:first-of-type,
#gas-mileage-mpg-tracker-form .calc-section:first-of-type,
#vehicle-total-cost-of-ownership-calculator-form .calc-section:first-of-type,
#tire-pressure-load-calculator-form .calc-section:first-of-type,
#fuel-cost-trip-calculator-form .calc-section:first-of-type,
#road-trip-split-cost-calculator-form .calc-section:first-of-type,
#towing-capacity-checker-form .calc-section:first-of-type,
#trip-time-calculator-form .calc-section:first-of-type,
#concrete-form .calc-section:first-of-type,
#fence-material-calculator-form .calc-section:first-of-type,
#paint-form .calc-section:first-of-type,
#fertilizer-form .calc-section:first-of-type,
#mulch-form .calc-section:first-of-type,
#water-storage-form .calc-section:first-of-type,
#water-needs-form .calc-section:first-of-type,
#fuel-storage-form .calc-section:first-of-type,
#propane-usage-form .calc-section:first-of-type,
#plant-spacing-form .calc-section:first-of-type,
#diesel-storage-life-calculator-form .calc-section:first-of-type,
#kerosene-storage-calculator-form .calc-section:first-of-type,
#fuel-stabilizer-dosage-calculator-form .calc-section:first-of-type,
#gasoline-rotation-schedule-form .calc-section:first-of-type,
#generator-runtime-form .calc-section:first-of-type,
#heating-fuel-form .calc-section:first-of-type,
#power-station-form .calc-section:first-of-type,
#ups-battery-runtime-calculator-form .calc-section:first-of-type,
#solar-recharge-form .calc-section:first-of-type,
#row-spacing-form .calc-section:first-of-type,
#garden-yield-family-calculator-form .calc-section:first-of-type,
#harvest-form .calc-section:first-of-type,
#drip-irrigation-flow-rate-calculator-form .calc-section:first-of-type,
#watering-schedule-calculator-form .calc-section:first-of-type,
#medication-dosage-weight-calculator-form .calc-section:first-of-type,
#calorie-burn-form .calc-section:first-of-type,
#daily-water-intake-calculator-form .calc-section:first-of-type,
#heart-rate-zone-calculator-form .calc-section:first-of-type,
#electricity-cost-calculator-form .calc-section:first-of-type,
#kwh-to-cost-calculator-form .calc-section:first-of-type,
#ev-charging-cost-calculator-form .calc-section:first-of-type,
#extension-cord-gauge-calculator-form .calc-section:first-of-type,
#generator-noise-form .calc-section:first-of-type,
#home-insulation-r-value-calculator-form .calc-section:first-of-type,
#solar-sizing-form .calc-section:first-of-type,
#solar-output-form .calc-section:first-of-type,
#watts-to-amps-form .calc-section:first-of-type,
#car-depreciation-calculator-form .calc-section:first-of-type,
#storage-unit-size-estimator-form .calc-section:first-of-type,
#mre-meal-count-calculator-form .calc-section:first-of-type,
#protein-storage-calculator-form .calc-section:first-of-type,
#rainwater-form .calc-section:first-of-type,
#water-purification-tablet-calculator-form .calc-section:first-of-type,
#emergency-pet-supply-calculator-form .calc-section:first-of-type,
#emergency-sanitation-calculator-form .calc-section:first-of-type,
#shelter-in-place-supply-calculator-form .calc-section:first-of-type,
#oil-change-interval-calculator-form .calc-section:first-of-type,
#freeze-dried-food-rehydration-calculator-form .calc-section:first-of-type,
#lawn-fertilizer-form .calc-section:first-of-type,
#fertilizer-selector-form .calc-section:first-of-type,
#water-heater-flush-frequency-calculator-form .calc-section:first-of-type,
#pressure-washer-psi-gpm-calculator-form .calc-section:first-of-type,
#hvac-filter-replacement-schedule-form .calc-section:first-of-type,
#outdoor-security-lighting-spacing-calculator-form .calc-section:first-of-type,
#weighted-blanket-weight-calculator-form .calc-section:first-of-type,
#dehydration-form .calc-section:first-of-type,
#blood-pressure-form .calc-section:first-of-type,
#refill-timing-form .calc-section:first-of-type,
#brake-pad-form .calc-section:first-of-type,
#moving-truck-form .calc-section:first-of-type,
#crop-rotation-planner-form .calc-section:first-of-type,
#smoker-size-form .calc-section:first-of-type,
#first-aid-kit-checker-form .calc-section:first-of-type,
#home-inventory-tracker-form .calc-section:first-of-type,
#garage-workshop-tool-inventory-form .calc-section:first-of-type{
  margin-top:0.5rem;
}
#appliance-wattage-reference-form .calc-section-head,
#whole-home-generator-sizing-form .calc-section-head,
#home-security-score-calculator-form .calc-section-head,
#transfer-switch-load-calculator-form .calc-section-head,
#variable-income-budget-planner-form .calc-section-head,
#car-loan-payment-calculator-form .calc-section-head,
#credit-card-payoff-calculator-form .calc-section-head,
#propane-vs-ng-form .calc-section-head,
#weed-removal-method-picker-form .calc-section-head,
#greenhouse-size-form .calc-section-head,
#72-hour-kit-calculator-form .calc-section-head,
#go-bag-form .calc-section-head,
#pantry-form .calc-section-head,
#pet-evacuation-prep-checker-form .calc-section-head,
#hurricane-prep-form .calc-section-head,
#evacuation-route-time-calculator-form .calc-section-head,
#ethernet-form .calc-section-head,
#wifi-bandwidth-needs-calculator-form .calc-section-head,
#mesh-form .calc-section-head,
#simple-budget-calculator-form .calc-section-head,
#50-30-20-budget-calculator-form .calc-section-head,
#gravel-form .calc-section-head,
#raised-bed-form .calc-section-head,
#black-earth-form .calc-section-head,
#compost-form .calc-section-head,
#container-garden-soil-calculator-form .calc-section-head,
#bmi-calculator-form .calc-section-head,
#deck-material-calculator-form .calc-section-head,
#flooring-material-calculator-form .calc-section-head,
#roof-material-calculator-form .calc-section-head,
#home-energy-audit-calculator-form .calc-section-head,
#water-heater-recovery-time-calculator-form .calc-section-head,
#cpr-compression-metronome-form .calc-section-head,
#medication-expiry-tracker-form .calc-section-head,
#med-storage-form .calc-section-head,
#freezer-loss-form .calc-section-head,
#fridge-safety-form .calc-section-head,
#tire-tread-depth-checker-form .calc-section-head,
#seed-germination-estimator-form .calc-section-head,
#companion-form .calc-section-head,
#seed-calendar-form .calc-section-head,
#garden-form .calc-section-head,
#roof-snow-load-calculator-form .calc-section-head,
#square-footage-form .calc-section-head,
#family-calorie-needs-calculator-form .calc-section-head,
#battery-runtime-form .calc-section-head,
#generator-size-calculator-form .calc-section-head,
#propane-tank-level-estimator-form .calc-section-head,
#power-outage-duration-estimator-form .calc-section-head,
#sinking-fund-calculator-form .calc-section-head,
#debt-payoff-calculator-form .calc-section-head,
#frost-form .calc-section-head,
#hvac-btu-sizing-calculator-form .calc-section-head,
#sump-pump-runtime-calculator-form .calc-section-head,
#heat-loss-form .calc-section-head,
#bug-out-bag-weight-calculator-form .calc-section-head,
#emergency-cash-form .calc-section-head,
#gas-mileage-mpg-tracker-form .calc-section-head,
#vehicle-total-cost-of-ownership-calculator-form .calc-section-head,
#tire-pressure-load-calculator-form .calc-section-head,
#fuel-cost-trip-calculator-form .calc-section-head,
#road-trip-split-cost-calculator-form .calc-section-head,
#towing-capacity-checker-form .calc-section-head,
#trip-time-calculator-form .calc-section-head,
#concrete-form .calc-section-head,
#fence-material-calculator-form .calc-section-head,
#paint-form .calc-section-head,
#fertilizer-form .calc-section-head,
#mulch-form .calc-section-head,
#water-storage-form .calc-section-head,
#water-needs-form .calc-section-head,
#fuel-storage-form .calc-section-head,
#propane-usage-form .calc-section-head,
#plant-spacing-form .calc-section-head,
#diesel-storage-life-calculator-form .calc-section-head,
#kerosene-storage-calculator-form .calc-section-head,
#fuel-stabilizer-dosage-calculator-form .calc-section-head,
#gasoline-rotation-schedule-form .calc-section-head,
#generator-runtime-form .calc-section-head,
#heating-fuel-form .calc-section-head,
#power-station-form .calc-section-head,
#ups-battery-runtime-calculator-form .calc-section-head,
#solar-recharge-form .calc-section-head,
#row-spacing-form .calc-section-head,
#garden-yield-family-calculator-form .calc-section-head,
#harvest-form .calc-section-head,
#drip-irrigation-flow-rate-calculator-form .calc-section-head,
#watering-schedule-calculator-form .calc-section-head,
#medication-dosage-weight-calculator-form .calc-section-head,
#calorie-burn-form .calc-section-head,
#daily-water-intake-calculator-form .calc-section-head,
#heart-rate-zone-calculator-form .calc-section-head,
#electricity-cost-calculator-form .calc-section-head,
#kwh-to-cost-calculator-form .calc-section-head,
#ev-charging-cost-calculator-form .calc-section-head,
#extension-cord-gauge-calculator-form .calc-section-head,
#generator-noise-form .calc-section-head,
#home-insulation-r-value-calculator-form .calc-section-head,
#solar-sizing-form .calc-section-head,
#solar-output-form .calc-section-head,
#watts-to-amps-form .calc-section-head,
#car-depreciation-calculator-form .calc-section-head,
#storage-unit-size-estimator-form .calc-section-head,
#mre-meal-count-calculator-form .calc-section-head,
#protein-storage-calculator-form .calc-section-head,
#rainwater-form .calc-section-head,
#water-purification-tablet-calculator-form .calc-section-head,
#emergency-pet-supply-calculator-form .calc-section-head,
#emergency-sanitation-calculator-form .calc-section-head,
#shelter-in-place-supply-calculator-form .calc-section-head,
#oil-change-interval-calculator-form .calc-section-head,
#freeze-dried-food-rehydration-calculator-form .calc-section-head,
#lawn-fertilizer-form .calc-section-head,
#fertilizer-selector-form .calc-section-head,
#water-heater-flush-frequency-calculator-form .calc-section-head,
#pressure-washer-psi-gpm-calculator-form .calc-section-head,
#hvac-filter-replacement-schedule-form .calc-section-head,
#outdoor-security-lighting-spacing-calculator-form .calc-section-head,
#weighted-blanket-weight-calculator-form .calc-section-head,
#dehydration-form .calc-section-head,
#blood-pressure-form .calc-section-head,
#refill-timing-form .calc-section-head,
#brake-pad-form .calc-section-head,
#moving-truck-form .calc-section-head,
#crop-rotation-planner-form .calc-section-head,
#smoker-size-form .calc-section-head,
#first-aid-kit-checker-form .calc-section-head,
#home-inventory-tracker-form .calc-section-head,
#garage-workshop-tool-inventory-form .calc-section-head{
  margin-bottom:0.55rem;
  gap:0.55rem;
  margin-left: -1rem;
}
#appliance-wattage-reference-form .calc-section-title,
#whole-home-generator-sizing-form .calc-section-title,
#home-security-score-calculator-form .calc-section-title,
#transfer-switch-load-calculator-form .calc-section-title,
#variable-income-budget-planner-form .calc-section-title,
#car-loan-payment-calculator-form .calc-section-title,
#credit-card-payoff-calculator-form .calc-section-title,
#propane-vs-ng-form .calc-section-title,
#weed-removal-method-picker-form .calc-section-title,
#greenhouse-size-form .calc-section-title,
#72-hour-kit-calculator-form .calc-section-title,
#go-bag-form .calc-section-title,
#pantry-form .calc-section-title,
#pet-evacuation-prep-checker-form .calc-section-title,
#hurricane-prep-form .calc-section-title,
#evacuation-route-time-calculator-form .calc-section-title,
#ethernet-form .calc-section-title,
#wifi-bandwidth-needs-calculator-form .calc-section-title,
#mesh-form .calc-section-title,
#simple-budget-calculator-form .calc-section-title,
#50-30-20-budget-calculator-form .calc-section-title,
#gravel-form .calc-section-title,
#raised-bed-form .calc-section-title,
#black-earth-form .calc-section-title,
#compost-form .calc-section-title,
#container-garden-soil-calculator-form .calc-section-title,
#bmi-calculator-form .calc-section-title,
#deck-material-calculator-form .calc-section-title,
#flooring-material-calculator-form .calc-section-title,
#roof-material-calculator-form .calc-section-title,
#home-energy-audit-calculator-form .calc-section-title,
#water-heater-recovery-time-calculator-form .calc-section-title,
#cpr-compression-metronome-form .calc-section-title,
#medication-expiry-tracker-form .calc-section-title,
#med-storage-form .calc-section-title,
#freezer-loss-form .calc-section-title,
#fridge-safety-form .calc-section-title,
#tire-tread-depth-checker-form .calc-section-title,
#seed-germination-estimator-form .calc-section-title,
#companion-form .calc-section-title,
#seed-calendar-form .calc-section-title,
#garden-form .calc-section-title,
#roof-snow-load-calculator-form .calc-section-title,
#square-footage-form .calc-section-title,
#family-calorie-needs-calculator-form .calc-section-title,
#battery-runtime-form .calc-section-title,
#generator-size-calculator-form .calc-section-title,
#propane-tank-level-estimator-form .calc-section-title,
#power-outage-duration-estimator-form .calc-section-title,
#sinking-fund-calculator-form .calc-section-title,
#debt-payoff-calculator-form .calc-section-title,
#frost-form .calc-section-title,
#hvac-btu-sizing-calculator-form .calc-section-title,
#sump-pump-runtime-calculator-form .calc-section-title,
#heat-loss-form .calc-section-title,
#bug-out-bag-weight-calculator-form .calc-section-title,
#emergency-cash-form .calc-section-title,
#gas-mileage-mpg-tracker-form .calc-section-title,
#vehicle-total-cost-of-ownership-calculator-form .calc-section-title,
#tire-pressure-load-calculator-form .calc-section-title,
#fuel-cost-trip-calculator-form .calc-section-title,
#road-trip-split-cost-calculator-form .calc-section-title,
#towing-capacity-checker-form .calc-section-title,
#trip-time-calculator-form .calc-section-title,
#concrete-form .calc-section-title,
#fence-material-calculator-form .calc-section-title,
#paint-form .calc-section-title,
#fertilizer-form .calc-section-title,
#mulch-form .calc-section-title,
#water-storage-form .calc-section-title,
#water-needs-form .calc-section-title,
#fuel-storage-form .calc-section-title,
#propane-usage-form .calc-section-title,
#plant-spacing-form .calc-section-title,
#diesel-storage-life-calculator-form .calc-section-title,
#kerosene-storage-calculator-form .calc-section-title,
#fuel-stabilizer-dosage-calculator-form .calc-section-title,
#gasoline-rotation-schedule-form .calc-section-title,
#generator-runtime-form .calc-section-title,
#heating-fuel-form .calc-section-title,
#power-station-form .calc-section-title,
#ups-battery-runtime-calculator-form .calc-section-title,
#solar-recharge-form .calc-section-title,
#row-spacing-form .calc-section-title,
#garden-yield-family-calculator-form .calc-section-title,
#harvest-form .calc-section-title,
#drip-irrigation-flow-rate-calculator-form .calc-section-title,
#watering-schedule-calculator-form .calc-section-title,
#medication-dosage-weight-calculator-form .calc-section-title,
#calorie-burn-form .calc-section-title,
#daily-water-intake-calculator-form .calc-section-title,
#heart-rate-zone-calculator-form .calc-section-title,
#electricity-cost-calculator-form .calc-section-title,
#kwh-to-cost-calculator-form .calc-section-title,
#ev-charging-cost-calculator-form .calc-section-title,
#extension-cord-gauge-calculator-form .calc-section-title,
#generator-noise-form .calc-section-title,
#home-insulation-r-value-calculator-form .calc-section-title,
#solar-sizing-form .calc-section-title,
#solar-output-form .calc-section-title,
#watts-to-amps-form .calc-section-title,
#car-depreciation-calculator-form .calc-section-title,
#storage-unit-size-estimator-form .calc-section-title,
#mre-meal-count-calculator-form .calc-section-title,
#protein-storage-calculator-form .calc-section-title,
#rainwater-form .calc-section-title,
#water-purification-tablet-calculator-form .calc-section-title,
#emergency-pet-supply-calculator-form .calc-section-title,
#emergency-sanitation-calculator-form .calc-section-title,
#shelter-in-place-supply-calculator-form .calc-section-title,
#oil-change-interval-calculator-form .calc-section-title,
#freeze-dried-food-rehydration-calculator-form .calc-section-title,
#lawn-fertilizer-form .calc-section-title,
#fertilizer-selector-form .calc-section-title,
#water-heater-flush-frequency-calculator-form .calc-section-title,
#pressure-washer-psi-gpm-calculator-form .calc-section-title,
#hvac-filter-replacement-schedule-form .calc-section-title,
#outdoor-security-lighting-spacing-calculator-form .calc-section-title,
#weighted-blanket-weight-calculator-form .calc-section-title,
#dehydration-form .calc-section-title,
#blood-pressure-form .calc-section-title,
#refill-timing-form .calc-section-title,
#brake-pad-form .calc-section-title,
#moving-truck-form .calc-section-title,
#crop-rotation-planner-form .calc-section-title,
#smoker-size-form .calc-section-title,
#first-aid-kit-checker-form .calc-section-title,
#home-inventory-tracker-form .calc-section-title,
#garage-workshop-tool-inventory-form .calc-section-title{
  font-size:0.95rem;
  font-weight:600;
  letter-spacing: 0.1em;
  color:var(--text,#1f2937);
  text-transform: uppercase;
}
#appliance-wattage-reference-form .calc-section-badge,
#whole-home-generator-sizing-form .calc-section-badge,
#home-security-score-calculator-form .calc-section-badge,
#transfer-switch-load-calculator-form .calc-section-badge,
#variable-income-budget-planner-form .calc-section-badge,
#car-loan-payment-calculator-form .calc-section-badge,
#credit-card-payoff-calculator-form .calc-section-badge,
#propane-vs-ng-form .calc-section-badge,
#weed-removal-method-picker-form .calc-section-badge,
#greenhouse-size-form .calc-section-badge,
#72-hour-kit-calculator-form .calc-section-badge,
#go-bag-form .calc-section-badge,
#pantry-form .calc-section-badge,
#pet-evacuation-prep-checker-form .calc-section-badge,
#hurricane-prep-form .calc-section-badge,
#evacuation-route-time-calculator-form .calc-section-badge,
#ethernet-form .calc-section-badge,
#wifi-bandwidth-needs-calculator-form .calc-section-badge,
#mesh-form .calc-section-badge,
#simple-budget-calculator-form .calc-section-badge,
#50-30-20-budget-calculator-form .calc-section-badge,
#gravel-form .calc-section-badge,
#raised-bed-form .calc-section-badge,
#black-earth-form .calc-section-badge,
#compost-form .calc-section-badge,
#container-garden-soil-calculator-form .calc-section-badge,
#bmi-calculator-form .calc-section-badge,
#deck-material-calculator-form .calc-section-badge,
#flooring-material-calculator-form .calc-section-badge,
#roof-material-calculator-form .calc-section-badge,
#home-energy-audit-calculator-form .calc-section-badge,
#water-heater-recovery-time-calculator-form .calc-section-badge,
#cpr-compression-metronome-form .calc-section-badge,
#medication-expiry-tracker-form .calc-section-badge,
#med-storage-form .calc-section-badge,
#freezer-loss-form .calc-section-badge,
#fridge-safety-form .calc-section-badge,
#tire-tread-depth-checker-form .calc-section-badge,
#seed-germination-estimator-form .calc-section-badge,
#companion-form .calc-section-badge,
#seed-calendar-form .calc-section-badge,
#garden-form .calc-section-badge,
#roof-snow-load-calculator-form .calc-section-badge,
#square-footage-form .calc-section-badge,
#family-calorie-needs-calculator-form .calc-section-badge,
#battery-runtime-form .calc-section-badge,
#generator-size-calculator-form .calc-section-badge,
#propane-tank-level-estimator-form .calc-section-badge,
#power-outage-duration-estimator-form .calc-section-badge,
#sinking-fund-calculator-form .calc-section-badge,
#debt-payoff-calculator-form .calc-section-badge,
#frost-form .calc-section-badge,
#hvac-btu-sizing-calculator-form .calc-section-badge,
#sump-pump-runtime-calculator-form .calc-section-badge,
#heat-loss-form .calc-section-badge,
#bug-out-bag-weight-calculator-form .calc-section-badge,
#emergency-cash-form .calc-section-badge,
#gas-mileage-mpg-tracker-form .calc-section-badge,
#vehicle-total-cost-of-ownership-calculator-form .calc-section-badge,
#tire-pressure-load-calculator-form .calc-section-badge,
#fuel-cost-trip-calculator-form .calc-section-badge,
#road-trip-split-cost-calculator-form .calc-section-badge,
#towing-capacity-checker-form .calc-section-badge,
#trip-time-calculator-form .calc-section-badge,
#concrete-form .calc-section-badge,
#fence-material-calculator-form .calc-section-badge,
#paint-form .calc-section-badge,
#fertilizer-form .calc-section-badge,
#mulch-form .calc-section-badge,
#water-storage-form .calc-section-badge,
#water-needs-form .calc-section-badge,
#fuel-storage-form .calc-section-badge,
#propane-usage-form .calc-section-badge,
#plant-spacing-form .calc-section-badge,
#diesel-storage-life-calculator-form .calc-section-badge,
#kerosene-storage-calculator-form .calc-section-badge,
#fuel-stabilizer-dosage-calculator-form .calc-section-badge,
#gasoline-rotation-schedule-form .calc-section-badge,
#generator-runtime-form .calc-section-badge,
#heating-fuel-form .calc-section-badge,
#power-station-form .calc-section-badge,
#ups-battery-runtime-calculator-form .calc-section-badge,
#solar-recharge-form .calc-section-badge,
#row-spacing-form .calc-section-badge,
#garden-yield-family-calculator-form .calc-section-badge,
#harvest-form .calc-section-badge,
#drip-irrigation-flow-rate-calculator-form .calc-section-badge,
#watering-schedule-calculator-form .calc-section-badge,
#medication-dosage-weight-calculator-form .calc-section-badge,
#calorie-burn-form .calc-section-badge,
#daily-water-intake-calculator-form .calc-section-badge,
#heart-rate-zone-calculator-form .calc-section-badge,
#electricity-cost-calculator-form .calc-section-badge,
#kwh-to-cost-calculator-form .calc-section-badge,
#ev-charging-cost-calculator-form .calc-section-badge,
#extension-cord-gauge-calculator-form .calc-section-badge,
#generator-noise-form .calc-section-badge,
#home-insulation-r-value-calculator-form .calc-section-badge,
#solar-sizing-form .calc-section-badge,
#solar-output-form .calc-section-badge,
#watts-to-amps-form .calc-section-badge,
#car-depreciation-calculator-form .calc-section-badge,
#storage-unit-size-estimator-form .calc-section-badge,
#mre-meal-count-calculator-form .calc-section-badge,
#protein-storage-calculator-form .calc-section-badge,
#rainwater-form .calc-section-badge,
#water-purification-tablet-calculator-form .calc-section-badge,
#emergency-pet-supply-calculator-form .calc-section-badge,
#emergency-sanitation-calculator-form .calc-section-badge,
#shelter-in-place-supply-calculator-form .calc-section-badge,
#oil-change-interval-calculator-form .calc-section-badge,
#freeze-dried-food-rehydration-calculator-form .calc-section-badge,
#lawn-fertilizer-form .calc-section-badge,
#fertilizer-selector-form .calc-section-badge,
#water-heater-flush-frequency-calculator-form .calc-section-badge,
#pressure-washer-psi-gpm-calculator-form .calc-section-badge,
#hvac-filter-replacement-schedule-form .calc-section-badge,
#outdoor-security-lighting-spacing-calculator-form .calc-section-badge,
#weighted-blanket-weight-calculator-form .calc-section-badge,
#dehydration-form .calc-section-badge,
#blood-pressure-form .calc-section-badge,
#refill-timing-form .calc-section-badge,
#brake-pad-form .calc-section-badge,
#moving-truck-form .calc-section-badge,
#crop-rotation-planner-form .calc-section-badge,
#smoker-size-form .calc-section-badge,
#first-aid-kit-checker-form .calc-section-badge,
#home-inventory-tracker-form .calc-section-badge,
#garage-workshop-tool-inventory-form .calc-section-badge{
  width:40px;
  height:40px;
  flex-shrink:0;
}

/* Page-scoped micro-typography polish for the form-driven calc prototype.
   Lightly de-bolds labels (700 → 600) and tightens helper text rhythm. */
#variable-income-budget-planner-form .field label,
#car-loan-payment-calculator-form .field label,
#credit-card-payoff-calculator-form .field label,
#propane-vs-ng-form .field label,
#weed-removal-method-picker-form .field label,
#greenhouse-size-form .field label,
#72-hour-kit-calculator-form .field label,
#go-bag-form .field label,
#pantry-form .field label,
#pet-evacuation-prep-checker-form .field label,
#hurricane-prep-form .field label,
#evacuation-route-time-calculator-form .field label,
#ethernet-form .field label,
#wifi-bandwidth-needs-calculator-form .field label,
#mesh-form .field label,
#appliance-wattage-reference-form .field label,
#simple-budget-calculator-form .field label,
#50-30-20-budget-calculator-form .field label,
#gravel-form .field label,
#raised-bed-form .field label,
#black-earth-form .field label,
#compost-form .field label,
#container-garden-soil-calculator-form .field label,
#bmi-calculator-form .field label,
#deck-material-calculator-form .field label,
#flooring-material-calculator-form .field label,
#roof-material-calculator-form .field label,
#water-heater-recovery-time-calculator-form .field label,
#sump-pump-runtime-calculator-form .field label,
#heat-loss-form .field label,
#gas-mileage-mpg-tracker-form .field label,
#vehicle-total-cost-of-ownership-calculator-form .field label,
#tire-pressure-load-calculator-form .field label,
#fuel-cost-trip-calculator-form .field label,
#road-trip-split-cost-calculator-form .field label,
#towing-capacity-checker-form .field label,
#trip-time-calculator-form .field label,
#concrete-form .field label,
#fence-material-calculator-form .field label,
#paint-form .field label,
#fertilizer-form .field label,
#mulch-form .field label,
#water-storage-form .field label,
#water-needs-form .field label,
#fuel-storage-form .field label,
#propane-usage-form .field label,
#plant-spacing-form .field label,
#diesel-storage-life-calculator-form .field label,
#kerosene-storage-calculator-form .field label,
#fuel-stabilizer-dosage-calculator-form .field label,
#gasoline-rotation-schedule-form .field label,
#generator-runtime-form .field label,
#heating-fuel-form .field label,
#power-station-form .field label,
#ups-battery-runtime-calculator-form .field label,
#solar-recharge-form .field label,
#row-spacing-form .field label,
#garden-yield-family-calculator-form .field label,
#harvest-form .field label,
#drip-irrigation-flow-rate-calculator-form .field label,
#watering-schedule-calculator-form .field label,
#medication-dosage-weight-calculator-form .field label,
#calorie-burn-form .field label,
#daily-water-intake-calculator-form .field label,
#heart-rate-zone-calculator-form .field label,
#electricity-cost-calculator-form .field label,
#kwh-to-cost-calculator-form .field label,
#ev-charging-cost-calculator-form .field label,
#storage-unit-size-estimator-form .field label,
#protein-storage-calculator-form .field label,
#rainwater-form .field label,
#water-purification-tablet-calculator-form .field label,
#oil-change-interval-calculator-form .field label,
#freeze-dried-food-rehydration-calculator-form .field label,
#lawn-fertilizer-form .field label,
#fertilizer-selector-form .field label,
#water-heater-flush-frequency-calculator-form .field label,
#pressure-washer-psi-gpm-calculator-form .field label,
#hvac-filter-replacement-schedule-form .field label,
#outdoor-security-lighting-spacing-calculator-form .field label,
#weighted-blanket-weight-calculator-form .field label,
#dehydration-form .field label,
#blood-pressure-form .field label,
#refill-timing-form .field label,
#brake-pad-form .field label,
#moving-truck-form .field label,
#crop-rotation-planner-form .field label,
#transfer-switch-load-calculator-form .field label,
#home-security-score-calculator-form .field label,
#smoker-size-form .field label,
#home-inventory-tracker-form .field label,
#garage-workshop-tool-inventory-form .field label{
  font-weight:600;
  font-size:0.88rem;
  letter-spacing:0.005em;
  color:var(--text,#1f2937);
  margin-bottom:0.4rem;
  margin-top: 1rem;
}
#variable-income-budget-planner-form .field .unit-note,
#car-loan-payment-calculator-form .field .unit-note,
#credit-card-payoff-calculator-form .field .unit-note,
#propane-vs-ng-form .field .unit-note,
#weed-removal-method-picker-form .field .unit-note,
#greenhouse-size-form .field .unit-note,
#72-hour-kit-calculator-form .field .unit-note,
#go-bag-form .field .unit-note,
#pantry-form .field .unit-note,
#pet-evacuation-prep-checker-form .field .unit-note,
#hurricane-prep-form .field .unit-note,
#evacuation-route-time-calculator-form .field .unit-note,
#ethernet-form .field .unit-note,
#wifi-bandwidth-needs-calculator-form .field .unit-note,
#mesh-form .field .unit-note,
#appliance-wattage-reference-form .field .unit-note,
#simple-budget-calculator-form .field .unit-note,
#50-30-20-budget-calculator-form .field .unit-note,
#gravel-form .field .unit-note,
#raised-bed-form .field .unit-note,
#black-earth-form .field .unit-note,
#compost-form .field .unit-note,
#container-garden-soil-calculator-form .field .unit-note,
#bmi-calculator-form .field .unit-note,
#deck-material-calculator-form .field .unit-note,
#flooring-material-calculator-form .field .unit-note,
#roof-material-calculator-form .field .unit-note,
#water-heater-recovery-time-calculator-form .field .unit-note,
#sump-pump-runtime-calculator-form .field .unit-note,
#heat-loss-form .field .unit-note,
#gas-mileage-mpg-tracker-form .field .unit-note,
#vehicle-total-cost-of-ownership-calculator-form .field .unit-note,
#tire-pressure-load-calculator-form .field .unit-note,
#fuel-cost-trip-calculator-form .field .unit-note,
#road-trip-split-cost-calculator-form .field .unit-note,
#towing-capacity-checker-form .field .unit-note,
#trip-time-calculator-form .field .unit-note,
#concrete-form .field .unit-note,
#fence-material-calculator-form .field .unit-note,
#paint-form .field .unit-note,
#fertilizer-form .field .unit-note,
#mulch-form .field .unit-note,
#water-storage-form .field .unit-note,
#water-needs-form .field .unit-note,
#fuel-storage-form .field .unit-note,
#propane-usage-form .field .unit-note,
#plant-spacing-form .field .unit-note,
#diesel-storage-life-calculator-form .field .unit-note,
#kerosene-storage-calculator-form .field .unit-note,
#fuel-stabilizer-dosage-calculator-form .field .unit-note,
#gasoline-rotation-schedule-form .field .unit-note,
#generator-runtime-form .field .unit-note,
#heating-fuel-form .field .unit-note,
#power-station-form .field .unit-note,
#ups-battery-runtime-calculator-form .field .unit-note,
#solar-recharge-form .field .unit-note,
#row-spacing-form .field .unit-note,
#garden-yield-family-calculator-form .field .unit-note,
#harvest-form .field .unit-note,
#drip-irrigation-flow-rate-calculator-form .field .unit-note,
#watering-schedule-calculator-form .field .unit-note,
#medication-dosage-weight-calculator-form .field .unit-note,
#calorie-burn-form .field .unit-note,
#daily-water-intake-calculator-form .field .unit-note,
#heart-rate-zone-calculator-form .field .unit-note,
#electricity-cost-calculator-form .field .unit-note,
#kwh-to-cost-calculator-form .field .unit-note,
#ev-charging-cost-calculator-form .field .unit-note,
#storage-unit-size-estimator-form .field .unit-note,
#protein-storage-calculator-form .field .unit-note,
#rainwater-form .field .unit-note,
#water-purification-tablet-calculator-form .field .unit-note,
#oil-change-interval-calculator-form .field .unit-note,
#freeze-dried-food-rehydration-calculator-form .field .unit-note,
#lawn-fertilizer-form .field .unit-note,
#fertilizer-selector-form .field .unit-note,
#water-heater-flush-frequency-calculator-form .field .unit-note,
#pressure-washer-psi-gpm-calculator-form .field .unit-note,
#hvac-filter-replacement-schedule-form .field .unit-note,
#outdoor-security-lighting-spacing-calculator-form .field .unit-note,
#weighted-blanket-weight-calculator-form .field .unit-note,
#dehydration-form .field .unit-note,
#blood-pressure-form .field .unit-note,
#refill-timing-form .field .unit-note,
#brake-pad-form .field .unit-note,
#moving-truck-form .field .unit-note,
#crop-rotation-planner-form .field .unit-note,
#transfer-switch-load-calculator-form .field .unit-note,
#home-security-score-calculator-form .field .unit-note,
#smoker-size-form .field .unit-note,
#home-inventory-tracker-form .field .unit-note,
#garage-workshop-tool-inventory-form .field .unit-note{
  font-size:0.78rem;
  line-height:1.45;
  color:var(--text-muted,#6b7280);
  margin-top:0.4rem;
  letter-spacing:0.005em;
}

/* Bag-preset segmented variant — used when bag size is a fixed-set picker
   (no free-text input above). Slightly larger chips, no "Common:" label,
   chips fill available row width on smaller viewports. */
.bag-presets--segmented{
  margin-top:0;
  flex-wrap:wrap;
}
.bag-presets--segmented .bag-preset{
  flex:1 1 auto;
  min-width:64px;
  text-align:center;
  padding:0.45rem 0.85rem;
  font-size:0.84rem;
  line-height:1.25;
}

/* Optional secondary label inside a segmented chip — small grey subtitle
   that clarifies a primary chip label (e.g., "5/4×6 / 5.5 in"). */
.bag-preset__sub{
  display:block;
  font-size:0.7rem;
  font-weight:500;
  color:var(--text-muted,#6b7280);
  margin-top:0.1rem;
  letter-spacing:0;
  text-transform:none;
}
.bag-preset.is-active .bag-preset__sub{
  color:rgba(251,146,60,0.8);
}

/* Currency-style prefix on a .calc-input-unit chip — left-side $ symbol
   that mirrors the right-side suffix. Use for cost or price inputs. */
.calc-input-unit__prefix{
  display:inline-flex;
  align-items:center;
  padding:0 0.65rem;
  background:var(--card-deep);
  border-right:1px solid var(--form-border,#e5e7eb);
  font-size:0.86rem;
  font-weight:500;
  color:var(--text-muted,#6b7280);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Paired-input chip variant — two number inputs sharing a single chip,
   each with its own suffix (e.g. height ft+in, time hr+min). The middle
   suffix gets dividers on both sides; the end suffix only on the left. */
.calc-input-unit--pair{
  display:flex;
  align-items:stretch;
}
.calc-input-unit--pair > input[type="number"]{
  flex:1 1 0;
  min-width:0;
  width:auto;
}
.calc-input-unit--pair > .calc-input-unit__suffix{
  flex-shrink:0;
}
.calc-input-unit--pair > input[type="number"] + .calc-input-unit__suffix + input[type="number"]{
  border-left:1px solid var(--form-border,#e5e7eb);
}

/* ---- BMI calculator: page-scoped gauge + result polish ---- */

/* Bigger result-main number for BMI: this is the tool's primary outcome. */
.bmi-result .result-main{
  font-size:3.6rem;
  line-height:1;
  letter-spacing:-0.02em;
  font-weight:700;
  margin:0.1rem 0 0.4rem;
}
@media (max-width: 520px){
  .bmi-result .result-main{ font-size:2.8rem; }
}
.bmi-result .result-sub{
  font-size:0.95rem;
  font-weight:500;
  color:var(--text-muted,#6b7280);
  margin-bottom:0.85rem;
}
.bmi-result-caveat{
  margin-top:1.1rem;
  padding-top:0.85rem;
  border-top:1px solid rgba(15,23,42,0.07);
  font-size:0.78rem;
  line-height:1.5;
  color:var(--text-muted,#6b7280);
}
.bmi-result-caveat a{ color:inherit; text-decoration:underline; }
.bmi-result-caveat a:hover{ color:var(--text,#1f2937); }

/* BMI result-card head row — BMI number on the left, category status pill
   on the right, on a single flex baseline. Gives the result a strong
   horizontal hierarchy where the user's number and category read together. */
.bmi-result-head{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin:0.1rem 0 0.4rem;
}
.bmi-result-head .result-main{
  margin:0;
  flex:0 0 auto;
}
.bmi-status-pill{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.42rem 0.8rem 0.42rem 0.65rem;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:-0.005em;
  white-space:nowrap;
  background:#eef0f3;
  color:#5f6368;
  border:1px solid rgba(15,23,42,0.06);
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bmi-status-pill__icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.bmi-status-pill[data-zone="ok"]{
  background:linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border-color:rgba(34, 197, 94, 0.20);
  color:var(--meter-green);
}
.bmi-status-pill[data-zone="under"]{
  background:linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02));
  border-color:rgba(148, 163, 184, 0.20);
  color:var(--text-muted);
}
.bmi-status-pill[data-zone="warn"]{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-color:rgba(245, 158, 11, 0.20);
  color:var(--meter-yellow);
}
.bmi-status-pill[data-zone="over"]{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-color:rgba(245, 158, 11, 0.20);
  color:var(--meter-yellow);
}
.bmi-status-pill[data-zone="severe"]{
  background:linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  border-color:rgba(239, 68, 68, 0.20);
  color:var(--meter-red);
}

/* BMI gauge — page-scoped zone-aligned gradient overlaying the generic
   .calc-gauge. Standard BMI zones on a 15–35 scale:
     under     0%   – 17.5%  (BMI 15  → 18.5)  cool gray
     healthy   17.5% – 50%   (BMI 18.5 → 25)   green
     over      50%  – 75%    (BMI 25  → 30)    yellow
     class I   75%  – 90%    (BMI 30  → 33)    orange
     class II+ 90%  – 100%   (BMI 33+ → 35+)   red */
.bmi-gauge.calc-gauge{
  background:linear-gradient(to right,
    #94a3b8 0%, #94a3b8 17.5%,
    #4DB95C 17.5%, #4DB95C 50%,
    #F0C84B 50%, #F0C84B 75%,
    #F08A30 75%, #F08A30 90%,
    #D94A40 90%, #D94A40 100%);
  margin-top:2rem;
}
.bmi-gauge .calc-gauge-marker{
  width:4px;
  background:#1f2937;
}
.bmi-gauge-pin{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#1f2937;
  color:#fff;
  font-size:0.75rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
  padding:2px 7px;
  border-radius:5px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
}
.bmi-gauge-pin::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:#1f2937;
}
.bmi-gauge-pin.is-empty{ display:none; }
.bmi-gauge-axis{ font-weight:500; }

/* Zone labels under the gauge — colored to match each zone, centered in
   the band they describe. Anchors the gauge with named zones rather than
   leaving the user to interpret colors alone. */
.bmi-gauge-zones{
  position:relative;
  height:1.05rem;
  margin-top:0.5rem;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.01em;
}

/* BP gauge variant — narrow middle zones (Elevated 120-130, Stage 1 130-140)
   force the Stage 1 label onto a second row to avoid colliding with Elev /
   Stage 2. Add height to fit the staggered row. */
.bmi-gauge-zones.bp-gauge-zones{
  height:2.2rem;
}
.bmi-gauge-zones span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  white-space:nowrap;
}
.bmi-gauge-zones .z-under   { color:var(--text-muted); }
.bmi-gauge-zones .z-healthy { color:var(--meter-green); }
.bmi-gauge-zones .z-over    { color:var(--meter-yellow); }
.bmi-gauge-zones .z-obese   { color:var(--meter-red); }

/* Confirmation strip — restates the user's zone in prose with the zone name
   color-coded inline. Tinted background per zone. */
.bmi-gauge-confirm{
  margin:0.95rem 0 0;
  padding:0.55rem 0.75rem;
  background:#f3f5f8;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:8px;
  font-size:0.83rem;
  line-height:1.4;
  color:var(--text,#1f2937);
}
.bmi-gauge-confirm[data-zone="ok"]{
  background:linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border-color:rgba(34, 197, 94, 0.20);
}
.bmi-gauge-confirm[data-zone="under"]{
  background:linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02));
  border-color:rgba(148, 163, 184, 0.20);
}
.bmi-gauge-confirm[data-zone="warn"]{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-color:rgba(245, 158, 11, 0.20);
}
.bmi-gauge-confirm[data-zone="over"]{
  background:linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-color:rgba(245, 158, 11, 0.20);
}
.bmi-gauge-confirm[data-zone="severe"]{
  background:linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  border-color:rgba(239, 68, 68, 0.20);
}
.bmi-gauge-confirm em{
  font-style:normal;
  font-weight:600;
}
.bmi-gauge-confirm em.z-healthy { color:var(--meter-green); }
.bmi-gauge-confirm em.z-under   { color:var(--text-muted); }
.bmi-gauge-confirm em.z-over    { color:var(--meter-yellow); }
.bmi-gauge-confirm em.z-obese   { color:var(--meter-red); }

/* Pro Tip "Next step" card — leading icon block + eyebrow + lead phrase.
   Icon color and tint shift per BMI tier so the card itself signals where
   the user stands at a glance. */
.bmi-next-card{ padding-top:1.05rem; }
.bmi-next-head{
  display:flex;
  align-items:center;
  gap:0.85rem;
  margin-bottom:0.5rem;
}
.bmi-next-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:#eef0f3;
  color:#5f6368;
}
.bmi-next-icon svg{ width:22px; height:22px; }
.bmi-next-card[data-zone="ok"]     .bmi-next-icon{ background:rgba(34, 197, 94, 0.14);   color:var(--meter-green); }
.bmi-next-card[data-zone="under"]  .bmi-next-icon{ background:rgba(148, 163, 184, 0.16); color:var(--text-muted); }
.bmi-next-card[data-zone="warn"]   .bmi-next-icon{ background:rgba(245, 158, 11, 0.18);  color:var(--meter-yellow); }
.bmi-next-card[data-zone="over"]   .bmi-next-icon{ background:rgba(245, 158, 11, 0.16);  color:var(--meter-yellow); }
.bmi-next-card[data-zone="severe"] .bmi-next-icon{ background:rgba(239, 68, 68, 0.16);   color:var(--meter-red); }

.bmi-next-text{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  min-width:0;
}
.bmi-next-eyebrow{
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
}
.bmi-next-lead{
  font-size:1.02rem;
  letter-spacing:-0.01em;
  line-height:1.25;
  color:var(--text,#1f2937);
}
.bmi-next-card[data-zone="ok"]     .bmi-next-lead{ color:var(--meter-green); }
.bmi-next-card[data-zone="under"]  .bmi-next-lead{ color:var(--text-muted); }
.bmi-next-card[data-zone="warn"]   .bmi-next-lead{ color:var(--meter-yellow); }
.bmi-next-card[data-zone="over"]   .bmi-next-lead{ color:var(--meter-yellow); }
.bmi-next-card[data-zone="severe"] .bmi-next-lead{ color:var(--meter-red); }
.bmi-next-body{
  margin:0;
  font-size:0.88rem;
  line-height:1.55;
  color:var(--text-muted,#6b7280);
}

/* BMI ranges list — colored dot per zone, matching gauge zone colors.
   Replaces the default bullet so the legend reads visually consistent with
   the live gauge above. The dot uses absolute positioning so the wrapped
   prose lines stay properly indented. */
.bmi-ranges-list{
  list-style:none;
  padding-left:0;
}
.bmi-ranges-list > li{
  position:relative;
  padding-left:1.5rem;
  line-height:1.55;
  color:var(--text,#1f2937);
}
.bmi-ranges-list > li + li{ margin-top:0.55rem; }
.bmi-ranges-list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55rem;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94a3b8;
}
.bmi-ranges-list > li.z-under::before    { background:#5e8ec0; }
.bmi-ranges-list > li.z-healthy::before  { background:#4DB95C; }
.bmi-ranges-list > li.z-over::before     { background:#F0C84B; }
.bmi-ranges-list > li.z-obese-1::before  { background:#F08A30; }
.bmi-ranges-list > li.z-obese-2::before  { background:#D94A40; }
.bmi-ranges-list > li strong{
  font-weight:600;
  color:var(--text,#1f2937);
}

/* About BMI card — disclaimer in a dedicated side card (replaces the
   result-card inline caveat). Info icon block + eyebrow + body. */
.bmi-about-card{
  background:#f7f8fa;
  border:1px solid rgba(15,23,42,0.07);
}
.bmi-about-head{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin-bottom:0.55rem;
}
.bmi-about-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:rgba(96,116,196,0.14);
  color:#4458a6;
}
.bmi-about-icon svg{ width:16px; height:16px; }
.bmi-about-eyebrow{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text,#1f2937);
}
.bmi-about-body{
  margin:0;
  font-size:0.82rem;
  line-height:1.55;
  color:var(--text-muted,#6b7280);
}
.bmi-about-body a{ color:inherit; text-decoration:underline; }
.bmi-about-body a:hover{ color:var(--text,#1f2937); }

/* Roomier tips-list for prose-style bullets (e.g., "Common mistakes" lists
   that pair a bold lead phrase with an explanation clause). Sitewide opt-in. */
.tips-list.tips-list--spaced{
  padding-bottom:0.5rem;
}
.tips-list.tips-list--spaced li{
  line-height:1.55;
}
.tips-list.tips-list--spaced li + li{
  margin-top:0.85rem;
}
.tips-list.tips-list--spaced li strong{
  color:var(--text,#1f2937);
  font-weight:600;
}

/* Quick-select preset chip group (raised-bed-soil bag-size, repurposable
   for any "common values" affordance under a number input). */
.bag-presets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.4rem;
  margin-top:0.55rem;
}
.bag-presets__label{
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
  margin-right:0.15rem;
}
.bag-preset{
  font-family:inherit;
  font-size:0.78rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:999px;
  padding:0.32rem 0.7rem;
  cursor:pointer;
  line-height:1.2;
  transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bag-preset:hover{
  border-color:rgba(249,115,22,0.4);
  background:rgba(249,115,22,0.06);
}
.bag-preset:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(249,115,22,0.22);
}
.bag-preset.is-active{
  background:rgba(249,115,22,0.14);
  border-color:rgba(249,115,22,0.55);
  color:var(--accent-light);
}
.bag-preset--skip{
  color:var(--text-muted);
  font-weight:500;
}
.bag-preset--skip.is-active{
  background:var(--form-bg);
  border-color:var(--text-muted);
  color:var(--text);
}

/* Outcome chip below .side-math: visually elevates the derived "bags needed"
   answer so it reads as the result, not just another step in the calc list. */
.side-math-outcome{
  margin-top:0.85rem;
  margin-bottom: 0.85rem;
  padding:0.7rem 0.85rem;
  background:linear-gradient(135deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02));
  border:1px solid rgba(34,197,94,0.2);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
}
.side-math-outcome.is-hidden{ display:none; }
.side-math-outcome__label{
  display:flex;
  flex-direction:column;
  gap:0.12rem;
  min-width:0;
  font-size: 0.9rem;
}
.side-math-outcome__eyebrow{
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#22c55e;
}
.side-math-outcome__main{
  font-size:0.88rem;
  font-weight:600;
  color:var(--text-muted,#1f2937);
  line-height:1.25;
}
.side-math-outcome__value{
  font-size:1.18rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color: var(--meter-green);
  letter-spacing:-0.01em;
  white-space:nowrap;
}

/* Structured Pro Tip — bold lead phrase + supporting body sentence.
   Replaces the prose-paragraph treatment for tier-based recommendations
   on form-driven calcs. Reusable across other tools that adopt the pattern. */
.side-tip-structured{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.side-tip-lead{
  font-size:0.86rem;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--text,#1f2937);
  line-height:1.3;
}
.side-tip-body{
  margin:0;
  font-size:0.86rem;
  line-height:1.55;
  color:var(--text-muted,#6b7280);
}

/* Pro Tip compare rows — pulls numeric "Bagged vs. Bulk" cost comparisons
   out of body prose into a scannable 3-column grid (Label · Qty · Cost).
   Children use display:contents so the rows align column-wise. */
.side-tip-compare{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:0.85rem;
  row-gap:0.32rem;
  margin-top:0.6rem;
  padding-top:0.6rem;
  border-top:1px solid rgba(0,0,0,0.06);
  font-size:0.84rem;
  font-variant-numeric:tabular-nums;
  align-items:baseline;
}
.side-tip-compare.is-hidden{ display:none; }
.side-tip-compare__row{ display:contents; }
.side-tip-compare__label{
  font-weight:600;
  color:var(--text,#1f2937);
  letter-spacing:-0.005em;
}
.side-tip-compare__qty{
  color:var(--text-muted,#6b7280);
  white-space:nowrap;
}
.side-tip-compare__cost{
  font-weight:600;
  color:var(--text,#1f2937);
  text-align:right;
  white-space:nowrap;
}

/* ============================================================
   PREMIUM NUMBER + UNIT INPUT
   --------------------------------------------------------------
   Renders a number input + unit suffix (static text or dropdown)
   as a single chip with internal divider. First introduced on
   gravel-calculator. Reusable across form-driven calculators.
   ============================================================ */
.calc-input-unit{
  display:flex;
  align-items:stretch;
  border:1px solid var(--form-border);
  border-radius:12px;
  background:var(--form-bg);
  overflow:hidden;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.calc-input-unit:hover{
  border-color:#d1d5db;
}
.calc-input-unit:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(249,115,22,0.18);
}
.calc-input-unit:focus-within:hover{
  border-color:var(--accent);
}
/* Override the global .field input styling for inputs nested in a chip */
.field .calc-input-unit > input[type="number"]{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0.78rem 0.85rem;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
  outline:none;
}
.field .calc-input-unit > input[type="number"]:focus{
  outline:none;
  border:0;
  box-shadow:none;
}
/* Static unit suffix (e.g., "ft", "tons/yd³") */
.calc-input-unit__suffix{
  display:inline-flex;
  align-items:center;
  padding:0 0.85rem;
  background: var(--card-deep);
  border-left:1px solid var(--form-border);
  font-size:0.86rem;
  font-weight:500;
  color:var(--text-muted,#6b7280);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Dropdown unit suffix (e.g., depth in/ft toggle) */
.calc-input-unit__select{
  border:0;
  border-left:1px solid var(--form-border);
  border-radius:0;
  background:var(--card-deep);
  padding:0 1.85rem 0 0.85rem;
  font-size:0.86rem;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.7rem center;
}
.calc-input-unit__select:hover{
  background-color:var(--form-bg);
}
.calc-input-unit__select:focus{
  outline:none;
}

/* Inline "(N points)" suffix in section titles — muted, non-competing. */
.calc-section-points{
  color:var(--text-muted,#6b7280);
  font-weight:500;
  font-size:0.84em;
  letter-spacing:0;
  margin-left:0.25rem;
}

/* Preset banner — sits above the first calc-section to signal that the
   page loads with an example selection, with a one-click way to clear it. */
.preset-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.85rem;
  margin-bottom:1.2rem;
  padding:0.7rem 0.95rem;
  background:rgba(194,65,12,0.05);
  border:1px solid rgba(194,65,12,0.18);
  border-radius:10px;
}
.preset-banner[hidden]{ display:none; }
.preset-banner__text{
  display:flex;
  flex-direction:column;
  gap:0.12rem;
  min-width:0;
  flex:1;
}
.preset-banner__text strong{
  font-size:0.86rem;
  font-weight:600;
  color:var(--text,#1f2937);
  letter-spacing:-0.005em;
}
.preset-banner__sub{
  font-size:0.78rem;
  color:var(--text-muted,#6b7280);
  line-height:1.4;
}
.preset-banner__clear{
  background:transparent;
  border:0;
  color:#C2410C;
  font-size:0.82rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  padding:0.32rem 0.6rem;
  border-radius:6px;
  transition:background 0.15s ease;
  flex-shrink:0;
}
.preset-banner__clear:hover{
  background:rgba(194,65,12,0.1);
}
@media (max-width:480px){
  .preset-banner{ flex-wrap:wrap; }
  .preset-banner__clear{ align-self:flex-end; }
}

/* Pro Tip headline lead — gives the structured recommendation card a
   prominent first line above the dt/dd spec rows. */
.side-tip-headline{
  font-size:0.95rem;
  font-weight:600;
  color:var(--text,#1f2937);
  line-height:1.3;
  letter-spacing:-0.005em;
  margin:0 0 0.55rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.side-tip-block[hidden]{ display:none; }

/* Optional small "Additional watts (custom)" field tucked under the tile sections.
   Visually demoted from a section so it reads as a side input, not a 7th group. */
.calc-extra-watts{
  margin-top:1.4rem;
  padding:0.85rem 0.95rem;
  background:var(--card-deep);
  border:1px solid var(--border);
  border-radius:10px;
}
.calc-extra-watts label{
  display:block;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--text);
  margin-bottom:0.35rem;
}
.calc-extra-watts input[type="number"]{
  width:100%;
  max-width:200px;
  padding:0.5rem 0.65rem;
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:8px;
  color:var(--text);
  font-size:0.95rem;
  font-variant-numeric:tabular-nums;
}
.calc-extra-watts .unit-note{
  margin-top:0.4rem;
  font-size:0.75rem;
  color:var(--text-muted);
}

/* ----- Featured live-math panel (Recommended big stat + summary) ----- */
.side-math-feature{
  text-align:center;
  padding:0.4rem 0 0.65rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
  margin-bottom:0.65rem;
}
.side-math-feature__label{
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
  font-weight:600;
  line-height:1.25;
}
.side-math-feature__value{
  font-size:1.7rem;
  font-weight:800;
  color:var(--text,#0f172a);
  line-height:1.1;
  margin-top:0.15rem;
  font-variant-numeric:tabular-nums;
}
.side-math-feature__sub{
  font-size:0.74rem;
  color:var(--text-muted,#6b7280);
  margin-top:0.2rem;
  letter-spacing:0.01em;
}
.side-math-summary{
  margin:0;
  font-size:0.82rem;
  color:var(--text-muted,#6b7280);
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}

/* ----- Pro Tip spec (Best fit / Good options) ----- */
.side-tip-empty{
  margin:0;
  font-size:0.86rem;
  color:var(--text-muted,#6b7280);
  line-height:1.5;
}
.side-tip-spec{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.side-tip-row{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.side-tip-row dt{
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted,#6b7280);
  font-weight:600;
  margin:0;
}
.side-tip-row dd{
  margin:0;
  font-size:0.92rem;
  font-weight:540;
  color:var(--text,#1f2937);
  line-height:1.35;
  letter-spacing:-0.005em;
}


/* ============================================================
   HOME SECURITY SCORE CALCULATOR — tool-specific
   Used on: /tools/home-security-score-calculator.html
============================================================ */

/* Reuse the checkbox-heavy 3-column pattern */
#home-security-score-calculator-form{grid-template-columns:1fr;}
@media (min-width:520px){
  #home-security-score-calculator-form{grid-template-columns:1fr 1fr;}
}
@media (min-width:900px){
  #home-security-score-calculator-form{grid-template-columns:1fr 1fr 1fr;}
}
#home-security-score-calculator-form .field.full{grid-column:1/-1;}
#home-security-score-calculator-form .section-head{
  margin-top:0.35rem;
  padding:0.35rem 0 0.15rem;
  border-bottom:1px solid #e5e7eb;
}
#home-security-score-calculator-form .section-head label{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-muted,#666);
  margin:0;
}
#home-security-score-calculator-form .section-head .unit-note{
  margin-top:0.15rem;
  font-size:0.8rem;
}
#home-security-score-calculator-form .appliance-row{margin:0;}
#home-security-score-calculator-form .appliance-row label{
  display:flex;
  align-items:flex-start;
  gap:0.45rem;
  font-weight:400;
  font-size:0.92rem;
  margin:0;
  padding:0.3rem 0;
  cursor:pointer;
  line-height:1.35;
}
#home-security-score-calculator-form .appliance-row input[type="checkbox"]{
  width:auto;
  margin:0.2rem 0 0;
  flex:0 0 auto;
}

/* Budget-grouped upgrade list inside the result card */
.hss-budget-group{margin-bottom:1rem;}
.hss-budget-group:last-child{margin-bottom:0;}
.hss-budget-label{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-muted,#666);
  margin-bottom:0.35rem;
}
.hss-upgrade-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.hss-upgrade-list li{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  font-size:0.9rem;
  line-height:1.45;
  padding:0.5rem 0.65rem;
  background:var(--card-deep);
  border:1px solid var(--border);
  border-radius:6px;
  height: 60px;
  align-items: center;
}
.hss-upgrade-list li.hss-empty{
  color:var(--text-muted);
  font-style:italic;
  background:transparent;
  border:1px dashed var(--border);
}
.hss-upgrade-pts{
  flex:0 0 auto;
  font-weight:700;
  font-size:0.78rem;
  color:#4A7FBF;
  padding:0.12rem 0.45rem;
  background:#eaf1fa;
  border-radius:999px;
  letter-spacing:0.02em;
  margin-top:0.05rem;
}
.hss-upgrade-text{flex:1 1 auto;
  color: var(--text-dark);
}

/* ============================================================
   GUIDE FIGURES — reusable for images/diagrams inside guides
   Used on: any guide that embeds photos or SVG schematics
============================================================ */
.guide-figure{
  margin:1.75rem 0;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--card-deep);
  border:1px solid var(--border);
}
.guide-figure img,
.guide-figure svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.guide-figure--bleed{
  background:transparent;
  border:none;
  padding:0;
}
/* Cap width for tall or square photos so they don't dominate the card */
.guide-figure--compact{
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
}
.guide-figure figcaption{
  padding:0.7rem 1rem 0.9rem;
  font-size:0.88rem;
  color:var(--text-muted);
  background:var(--card-bg);
  border-top:1px solid var(--border);
  line-height:1.45;
}
.guide-figure--bleed figcaption{
  background:transparent;
  border-top:none;
  padding:0.55rem 0 0;
}

/* ============================================================
   AFFILIATE CARD — reusable Amazon / partner CTA block
   Used on: guides and tool pages promoting related products
============================================================ */
.affiliate-card{
  margin:1.75rem 0;
  padding:1.25rem 1.4rem;
  border:1px solid var(--border-color,#e5e7eb);
  border-radius:12px;
  background:#fff7ef;
}
.affiliate-card .affiliate-disclosure{
  display:block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#a0480e;
  margin-bottom:0.5rem;
}
.affiliate-card p{
  margin:0 0 0.9rem;
  color:var(--text,#1f2937);
  font-size:0.98rem;
  line-height:1.55;
}
.affiliate-card .affiliate-cta{
  display:inline-block;
  padding:0.65rem 1.15rem;
  background:#d4651a;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
  transition:background 0.15s ease;
}
.affiliate-card .affiliate-cta:hover,
.affiliate-card .affiliate-cta:focus{
  background:#a0480e;
  color:#fff;
}

/* =========================================================================
   MEGA-MENU NAVIGATION (Phase 4)
   Overrides the legacy flat .main-nav anchor styles above and introduces
   the 7-group topical mega-menu. Breakpoint for hamburger: 860px.
   ========================================================================= */

/* The default .container caps at 1120px which is too narrow for logo +
   7-item nav + actions. Widen only the header's inner container so the
   body content keeps its existing reading width. */
.site-header > .container {
  max-width: 1320px;
}

/* Keep the header-actions fixed-width so it doesn't get squeezed by the
   flex: 1 nav. Without this, a wide nav can force the search/hamburger
   off the right edge of the viewport. */
.header-actions {
  flex-shrink: 0;
}

/* Reset: legacy .main-nav a rules were descendant selectors and would still
   apply inside panels. Neutralize them on the trigger + panel anchors only.
   Kept narrow so we don't fight with .nav-trigger and .nav-subcat's own
   padding/font-size below. */
.main-nav .nav-list > .nav-item > .nav-trigger,
.main-nav .nav-panel a {
  background: none;
  border-radius: 0;
  white-space: normal;
}
.main-nav .nav-list > .nav-item > .nav-trigger::after,
.main-nav .nav-panel a::after {
  content: none;
}

/* ── Top-level list ──────────────────────────────────────────────────── */
/* max-width: none explicitly wins over the legacy tablet rule
   `@media (max-width: 900px) { .main-nav { max-width: 430px } }` earlier in
   the file (same specificity, later source order). Without this the 7-item
   nav would clip to 430px on tablet.
   position: relative so .nav-panel (position: absolute) anchors to the nav
   list rather than the individual trigger — keeps right-edge panels onscreen. */
.main-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  position: relative;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
}

.nav-item {
  /* position: static so .nav-panel (absolute) anchors to the nearest
     positioned ancestor — .main-nav — not the individual trigger. */
  position: static;
  display: flex;
  align-items: stretch;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.6rem;
  background: transparent;
  border: 0;
  color: var(--soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  line-height: 1;
}

.nav-trigger::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

/* Simple link variant (e.g. "Browse all") — no dropdown, no underline. */
/* "Browse all": the one action item in a row of topic menus — give it a
   subtle accent pill so it stands out without shouting. Selector is scoped to
   beat the `.main-nav .nav-list > .nav-item > .nav-trigger` reset (0,4,0)
   that zeroes border-radius and resets padding on top-level triggers. */
.main-nav .nav-list > .nav-item > .nav-trigger.nav-trigger--link {
  text-decoration: none;
  color: var(--accent-light);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.55);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  margin-right: 0.4rem;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.main-nav .nav-list > .nav-item > .nav-trigger.nav-trigger--link .nav-trigger-label {
  color: inherit;
}
.main-nav .nav-list > .nav-item > .nav-trigger.nav-trigger--link:hover,
.main-nav .nav-list > .nav-item > .nav-trigger.nav-trigger--link:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0b0b;
}

.nav-trigger:hover,
.nav-trigger:focus-visible {
  color: var(--card);
  outline: none;
}

.nav-trigger:hover::after,
.nav-trigger:focus-visible::after,
.nav-item.is-open .nav-trigger::after {
  transform: scaleX(1);
}

.nav-chevron {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.65;
  transition: transform 0.18s ease, opacity 0.18s ease;
  transform: translateX(0) rotate(0deg);
}

.nav-item.is-open .nav-chevron {
  transform: translateX(3px) rotate(180deg);
  opacity: 1;
}

/* ── Dropdown panel (desktop) ────────────────────────────────────────── */
/* Anchored to the right edge of .main-nav so right-most items' panels
   don't overflow the viewport. The nav is already right-aligned in the
   header, so right: 0 on the panel means it lines up with where the last
   nav trigger ends — always onscreen. */
.nav-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 640px;
  max-width: min(92vw, 960px);
  z-index: 120;
  background: var(--card-bg, var(--header-bg));
  color: var(--soft);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 0;
  margin-top: 0;
  animation: navPanelIn 0.14s ease-out;
}

@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-panel[hidden] {
  display: none;
}

.nav-panel-inner {
  padding: 1.25rem 1.5rem 1.4rem;
  max-width: none;
}

.nav-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.75rem;
}

/* Panel header (left column) */
.nav-panel-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

/* Panel-head icon — sized to match subcat / popular / format-tile icons
   (18px) so every Lucide glyph in the menu reads as one coherent set.
   The inline SVG still carries its own width/height attrs from lib_icons,
   but this CSS wins via specificity. */
.nav-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-panel-icon svg {
  width: 18px;
  height: 18px;
}

.nav-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

/* Subcategory list — horizontal rows: icon | title+desc stacked | chevron.
   No visible box by default; hover adds a subtle white wash and nudges the
   trailing chevron. Keeps the dropdown feeling utility-first (like the rest
   of the site's mini-rows), not card-heavy. */
.nav-subcat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}

.nav-subcat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s ease, transform 0.14s ease;
}

/* Whole-row nudge right on hover gives the row a tactile, interactive feel
   without introducing shadows or heavy motion. Chevron's own translate is
   removed below so the two don't compound into a larger shift. */
.nav-subcat:hover,
.nav-subcat:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(3px);
  outline: none;
}

/* Leading icon slot — inline, no box, accent color (matches site icon rules).
   18px matches popular + format-tile icons so the Lucide set reads uniform. */
.nav-subcat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.nav-subcat-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Text column grows to fill, gets min-width 0 so long descriptions ellipsize
   gracefully rather than push the chevron off the row */
.nav-subcat-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.nav-subcat-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.nav-subcat:hover .nav-subcat-title,
.nav-subcat:focus-visible .nav-subcat-title {
  background: rgba(255,255,255,0.035);
  color: var(--accent);
}

.nav-subcat-desc {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.nav-subcat:hover .nav-subcat-desc,
.nav-subcat:focus-visible .nav-subcat-desc {
  color: var(--text);
}

/* Trailing chevron — muted by default, brightens + nudges right on hover.
   Replaces the old title-trailing " →" pseudo-element pattern. */
.nav-subcat-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.14s ease, color 0.14s ease;
}

/* Chevron stays at 16px — it's a meta indicator, not a content icon, so
   it sits one tier down from the 18px Lucide set used everywhere else. */
.nav-subcat-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* On hover the whole row translates 3px (see .nav-subcat above) so the
   chevron's own translate is removed here — avoids compound motion. */
.nav-subcat:hover .nav-subcat-chevron,
.nav-subcat:focus-visible .nav-subcat-chevron {
  opacity: 1;
  color: var(--accent);
}

/* Right column: popular + formats + see-all.
   Divider softened to rgba 0.06 for a lighter visual break between the two
   columns — keeps separation without looking like a hard UI border. */
.nav-panel-popular {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-panel-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.nav-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Popular row: small leading icon + title. On hover the whole row shifts to
   accent (no background fill, no underline) to stay quieter than the subcat
   rows on the left. */
.nav-popular {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--soft);
  line-height: 1.3;
  transition: color 0.12s ease;
}

.nav-popular-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: color 0.12s ease;
}

.nav-popular-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.9;
}

.nav-popular-text {
  min-width: 0;
  flex: 1 1 auto;
}

.nav-popular:hover,
.nav-popular:focus-visible {
  color: var(--accent);
  outline: none;
  background: transparent;
}

.nav-popular:hover .nav-popular-icon,
.nav-popular:focus-visible .nav-popular-icon {
  color: var(--accent);
}

/* Stat tiles: 3 equal columns. Each tile is icon + number + label stacked
   and centered, subtle white-wash bg, no heavy border, 8px radius so they
   match the subcat rows' shape without feeling like separate product cards.
   Same 18px icon as the rest of the menu so the Lucide set stays uniform. */
.nav-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-format {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.65rem 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--soft);
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

/* Per-type color overrides — selected by href so no markup change is
   required. Pairs with the sitewide type-color system (Tools = orange,
   Guides = blue, Printables = green). Higher specificity than body.guides
   etc., so the per-link accent wins regardless of which page the menu
   is rendered on. */
.nav-format[href="/tools/"] {
  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
}
.nav-format[href="/guides/"] {
  --hero-accent:     #3C6EAF;
  --hero-accent-rgb: 60, 110, 175;
  --hero-accent-lit: #7AAEE8;
}
.nav-format[href="/printables/"] {
  --hero-accent:     #65A30D;
  --hero-accent-rgb: 101, 163, 13;
  --hero-accent-lit: #84CC16;
}

.nav-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-accent, var(--accent));
  width: 18px;
  height: 18px;
  transition: color 0.12s ease;
}

.nav-format-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.nav-format strong {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--card);
  font-weight: 700;
}

.nav-format-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.nav-format:hover,
.nav-format:focus-visible {
  background: rgba(var(--hero-accent-rgb), 0.10);
  border-color: rgba(var(--hero-accent-rgb), 0.30);
  outline: none;
}

.nav-format:hover .nav-format-icon,
.nav-format:focus-visible .nav-format-icon {
  color: var(--hero-accent-lit, var(--accent-light));
}

.nav-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.45rem 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.nav-see-all:hover,
.nav-see-all:focus-visible {
  color: var(--accent-dark);
}

.nav-panel-popular .nav-see-all {
  color: var(--accent);
}

.nav-panel-popular .nav-see-all:hover {
  color: var(--accent-light);
}



/* The mobile-only nav-mobile-footer stays hidden on desktop */
.nav-mobile-footer {
  display: none;
}

/* ── Tablet: narrower panels, hide tagline to free up horizontal space ── */
@media (max-width: 1100px) {
  .nav-panel {
    min-width: 560px;
  }
  .nav-trigger {
    padding: 0.65rem 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
  /* Free ~180px for the 7-item nav at mid-desktop widths */
  .logo-tagline {
    display: none;
  }
}

/* ── Mobile (hamburger) ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  /* Hide the desktop nav by default; open on .nav-open */
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    background: var(--header-bg);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 3px solid var(--accent);
    padding: 0.35rem 0 0.6rem;
    gap: 0;
    flex-wrap: nowrap;
    max-width: none;
    justify-content: flex-start;
    width: 100%;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .site-header.nav-open .main-nav {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .nav-item {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .nav-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.95rem 1.25rem;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .nav-trigger::after {
    display: none;
  }

  .nav-chevron {
    width: 16px;
    height: 16px;
  }

  /* Panel collapses inline below its trigger on mobile */
  .nav-panel {
    position: static;
    transform: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    box-shadow: none;
    animation: none;
    background: rgba(255,255,255,0.02);
  }

  .nav-panel-inner {
    padding: 0.5rem 0 0.75rem;
  }

  .nav-panel-grid {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .nav-panel-head {
    padding: 0.4rem 1.25rem 0.55rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-panel-icon,
  .nav-panel-icon svg {
    width: 18px;
    height: 18px;
  }

  .nav-subcat-list {
    padding: 0 0.5rem;
  }

  .nav-subcat {
    padding: 0.65rem 0.75rem;
  }

  .nav-subcat-desc {
    display: none;          /* keep mobile lightweight */
  }

  /* Per-row chevron is redundant on mobile — the whole nav is already an
     accordion, and each subcat itself is just a link. Hide it so the row
     reads as icon + title only. */
  .nav-subcat-chevron {
    display: none;
  }

  /* Hide the popular / formats / see-all column on mobile -- keeps the
     accordion fast and focused on subcategory navigation. A global
     mobile footer row below the nav list surfaces the format counts. */
  .nav-panel-popular {
    display: none;
  }

  /* Mobile-only footer row inside the slide-out panel — reuses the same
     stat-tile markup from the panels. 3 equal columns, tighter padding. */
  .nav-mobile-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.75rem 1.25rem 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.25rem;
  }

  .nav-mobile-footer .nav-format {
    padding: 0.5rem 0.55rem;
  }

  .nav-mobile-footer .nav-format strong {
    font-size: 0.95rem;
  }

  .nav-mobile-footer .nav-format-label {
    font-size: 0.66rem;
  }
}

/* Very small phones: tighter padding */
@media (max-width: 430px) {
  .nav-trigger {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
  }

  .nav-subcat {
    padding: 0.55rem 0.75rem;
  }

  .nav-subcat-title {
    font-size: 0.9rem;
  }

  .nav-mobile-footer {
    flex-wrap: wrap;
  }
}

/* ============================================================
   HERO RELATED-CHIPS STRIP
   Thin band between the hero and the tool UI. Sits on the page
   background (lighter than the hero), keeps the chips present but
   visually secondary so the H1 + intro paragraph stay the headline.
   Populated by renderRelatedTools() (related-tools.js) — that JS
   adds .has-chips to the strip only when chips render, so the strip
   stays fully collapsed on tools without cross-links.
   Used on: every tool page, directly below the hero section.
============================================================ */
.related-hero-strip {
  display: none; /* default: collapsed; renderRelatedTools flips .has-chips */
  padding: 0.75rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.related-hero-strip.has-chips {
  display: block;
}

.related-hero {
  display: flex;
  flex-wrap: nowrap;          /* keep all chips on a single line */
  gap: 0.55rem;
  align-items: center;
  /* No overflow-x:auto — chips shrink with ellipsis instead of scrolling */
}

.related-hero-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hero-accent-lit);
  font-weight: 700;
  margin-right: 0.2rem;
  flex-shrink: 0;             /* never compress the label */
  white-space: nowrap;
}

/* Chip styling reflects each chip's DESTINATION type via --hero-accent
   (orange = tool, blue = guide, green = printable), matching the bottom-
   of-page .index-card colors. The .chip--tool / .chip--guide /
   .chip--printable rules below override --hero-accent / -rgb / -lit per
   chip; on a chip without a type modifier, the page-level --hero-accent
   provides a sensible fallback. */
.chip--tool {
  --hero-accent:     #D4651A;
  --hero-accent-rgb: 212, 101, 26;
  --hero-accent-lit: #E8906A;
}
.chip--guide {
  --hero-accent:     #3C6EAF;
  --hero-accent-rgb: 60, 110, 175;
  --hero-accent-lit: #7AAEE8;
}
.chip--printable {
  --hero-accent:     #65A30D;
  --hero-accent-rgb: 101, 163, 13;
  --hero-accent-lit: #84CC16;
}

.related-hero .chip {
  display: inline-block;      /* inline-block so text-overflow works on the chip */
  padding: 0.36rem 0.75rem;
  background: rgba(var(--hero-accent-rgb), 0.04);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.18);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  /* Single-line + ellipsis truncation when the chip can't fit at full size */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allow flex shrink so all chips stay on one line; uniform shrink ratio */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 350px;           /* cap any single chip so titles don't dominate */
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.related-hero .chip:hover,
.related-hero .chip:focus-visible {
  background: rgba(var(--hero-accent-rgb), 0.10);
  border-color: rgba(var(--hero-accent-rgb), 0.40);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  outline: none;
}

.related-hero .chip-type {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hero-accent-lit);
  padding-right: 0.45rem;
  border-right: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  font-weight: 700;
}
@media (max-width: 520px) {
  .related-hero-strip {
    padding: 0.6rem 0;
  }
  .related-hero {
    gap: 0.35rem;
  }
  .related-hero .chip {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }
  .related-hero-label {
    display: none;
  }
}

/* ============================================================
   SECTION 20 — DASHBOARD SIDE PANEL
   Dynamic right-column support panel for tool pages.
   Three archetypes share these utilities:
     A) Targets-vs-actuals  → .side-bucket + .side-bucket-bar (bars)
                              or .side-gauge (single-zone gauge)
     B) Simple calculator   → .side-math
     C) Tracker             → .side-totals
   All three use .side-checklist + .side-next-text.

   Canonical class vocabulary (use these, don't invent new ones):
     Layout:  .side-panel, .side-panel .card, .side-panel h3
     Shared:  .side-checklist, .side-next-text, .side-hint,
              .side-sublabel, .side-subrow
     A:       .side-bucket, .side-bucket-head, .side-bucket-label,
              .side-bucket-status [.s-ok|.s-over|.s-under|.s-empty|.s-warn],
              .side-bucket-bar, .side-bucket-fill, .side-bucket-nums,
              .side-gauge, .side-gauge-marker, .side-gauge-legend
     B:       .side-math, .side-math .ml, .side-math .mv, .side-math .total
     C:       .side-totals, .side-totals .tstat

   Status-chip wording rules (locked):
     - Empty / no input:            "—"            (s-empty)
     - Within target band:          "on target"    (s-ok)
     - Well under target:           "$X under" / "$X short" (s-ok/s-under)
     - Approaching limit:           "close" / "moderate"   (s-warn)
     - Over target or limit:        "$X over" / "X% over"  (s-over)
     Max 3 words or a short numeric. Never sentence-form.
============================================================ */

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 900px) {
  .side-panel {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}
.side-panel .card {
  padding: 1rem 1.1rem;
}
.side-panel h3 {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

/* Parenthetical muted suffix inside bucket labels, e.g. "Needs (50%)" */
.side-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Small uppercase subhead inside a side-panel card, e.g. "Top weight" */
.side-sublabel {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

/* Single row under a sublabel, e.g. "Water · 2.1 · 18%" */
.side-subrow {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 1rem 0;
}
.side-subrow .v {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Container for supplementary rows below the primary widget
   (e.g. top-3 list under a gauge). Adds consistent top-margin
   so pilots don't need inline `margin-top`. */
.side-extras {
  margin-top: 0.9rem;
}
.side-extras:empty {
  margin: 0;
}

/* =========================
   GUIDE TOC RAIL  ("On this page")
   Sticky right-rail nav inside .guide-layout. Trello-style:
   quiet, no card chrome, faint vertical rule, active link
   gets accent color + accent-tinted rail slice. Below 900px
   the rail is hidden and .guide-layout collapses to one column.
   Anchor jumps account for the sticky .site-header via
   scroll-margin-top on guide h2s.
   ========================= */
.guide-toc {
  align-self: start;
  font-size: 0.9rem;
  /* Calc-side-card chrome — matches the .calc-side-card pattern used on
     tool side-panels so the ToC reads as a proper sidebar card. */
  background: var(--card-side);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
}
@media (min-width: 901px) {
  .guide-toc {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}
@media (max-width: 900px) {
  .guide-toc { display: none; }
}

/* Custom scrollbar inside the sticky ToC card so the rounded corners
   stay visually clean when long ToCs scroll. Webkit-only; non-supporting
   browsers fall back to the platform default. */
.guide-toc::-webkit-scrollbar { width: 8px; }
.guide-toc::-webkit-scrollbar-track { background: transparent; }
.guide-toc::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--card-side);
  border-radius: 999px;
}
.guide-toc::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.guide-toc__eyebrow {
  margin: 0 0 0.4rem;
  padding-left: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-accent);
}
.guide-toc__title {
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.guide-toc__heading {
  margin: 0 0 0.6rem;
  padding-left: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.guide-toc__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--border);
}
.guide-toc__nav li { margin: 0; }
.guide-toc__nav a {
  display: block;
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  margin-left: -3px;
  border-left: 3px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.guide-toc__nav a:hover { color: var(--text); }
.guide-toc__nav a.is-active {
  color: var(--hero-accent-lit);
  border-left-color: var(--hero-accent-lit);
  font-weight: 600;
}

/* Anchor offset so jumping to a heading doesn't park it
   under the sticky site header. Scoped to guide article body. */
.guides .card--article :is(h2, h3)[id] {
  scroll-margin-top: 5.5rem;
}

/* ---- Archetype A — Targets vs Actuals ---- */
.side-bucket { margin-bottom: 0.9rem; }
.side-bucket:last-child { margin-bottom: 0; }
.side-bucket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.side-bucket-label { font-weight: 600; font-size: 0.95rem; }
.side-bucket-status {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Good / within target */
.side-bucket-status.s-ok {
  color: var(--meter-green);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.06),
    rgba(34, 197, 94, 0.02)
  );
  border: 1px solid rgba(34, 197, 94, 0.20);
}

/* Over / unsafe / exceeds target */
.side-bucket-status.s-over {
  color: var(--meter-red);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.06),
    rgba(239, 68, 68, 0.02)
  );
  border: 1px solid rgba(239, 68, 68, 0.20);
}

/* Under / below target but not critical */
.side-bucket-status.s-under {
  color: var(--text-muted);
  background: linear-gradient(
    135deg,
    rgba(148, 163, 184, 0.06),
    rgba(148, 163, 184, 0.02)
  );
  border: 1px solid rgba(148, 163, 184, 0.16);
}

/* Empty / no data yet */
.side-bucket-status.s-empty {
  color: var(--text-soft);
  background: linear-gradient(
    135deg,
    rgba(100, 116, 139, 0.05),
    rgba(100, 116, 139, 0.015)
  );
  border: 1px solid rgba(100, 116, 139, 0.12);
}

/* Warning / close to threshold */
.side-bucket-status.s-warn {
  color: var(--meter-yellow);
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.06),
    rgba(245, 158, 11, 0.02)
  );
  border: 1px solid rgba(245, 158, 11, 0.20);
}

.side-bucket-bar {
  position: relative;
  height: 8px;
  background: var(--bg-main-dark);
  border-radius: 4px;
  overflow: hidden;
}
.side-bucket-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--accent, #4A7FBF); /* default so no inline style is required */
  transition: width 0.25s ease, background-color 0.2s ease;
}
.side-bucket-nums {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.side-bucket-nums strong { color: var(--card-text, #1a1a1a); }

/* Single-zone gauge — default stops map to 10/15/20% zones when the
   marker is positioned by (pct / 25) * 100 (i.e. 100% gauge = 25% of
   body weight, or whatever upper bound the tool picks). Override
   inline only if the upper bound differs. */
.side-gauge {
  position: relative;
  height: 25px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(to right,
    #e6f4ea 0%, #e6f4ea 60%,
    #fff4e0 60%, #fff4e0 80%,
    #fbe6e3 80%, #fbe6e3 100%);
  margin-top: 0.1rem;
}
.side-gauge-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--card-text, #1a1a1a);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.25s ease;
}
.side-gauge-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---- Archetype B — Simple calculator: live math rows ---- */
.side-math {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.side-math li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.side-math .ml { color: var(--text-muted); }
.side-math .mv {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--card-text, #1a1a1a);
}
.side-math .total {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.side-math .total .mv { font-size: 1.02rem; }

/* ---- Archetype C — Tracker: totals chip grid ---- */
.side-totals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
.side-totals .tstat {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.side-totals .tstat strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--card-text, #1a1a1a);
}
.side-totals .tstat span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---- Shared — quick-checks checklist ---- */
.side-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.side-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-bottom: 1rem;
}
.side-checklist .ic {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.05rem;
}
.side-checklist li.ok   .ic { background: none; color: #1e7e34; }
.side-checklist li.warn .ic { background: none; color: #b46a00; }
.side-checklist li.bad  .ic { background: none; color: #b8291f; }
.side-checklist li.idle .ic { background: none; color: #8a8f98; }

/* ---- Shared — single "do this next" action block ----
   <strong> inside the next-text is NEUTRAL bold (inherit color).
   Don't paint it red by default — it gets used for positive actions
   too ("Buy 2 gallons", "Add electronics"). Use .warn for actual
   warning numbers you want to draw the eye to. */
.side-next-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--card-text, #1a1a1a);
}
.side-next-text strong { color: inherit; }
.side-next-text .warn { color: #b8291f; font-weight: 700; }


/* ============================================================
   TOPIC PAGES — premium utility polish (group hubs + subcategory pages)
   ------------------------------------------------------------
   Promoted sitewide 2026-04-22 from the Preparedness pilot.
   Scope: body.topic catches every group-hub and subcategory page
   (home/tool/guide/printable pages are unaffected). Pattern:
     1. White cards that clearly lift off the warm page bg
     2. Subcategory block as a 2-col mini-card nav grid
     3. Tool/Guide/Printable grid rhythm (auto-fill, capped titles)
     4. About-card prose measure + leading
     5. Grouped sections with eyebrow labels
============================================================ */

/* 1. Card surface + no-lift hover are now global defaults — see the
      base `.card` rule near the top of this stylesheet. Topic pages
      inherit them automatically. */

/* 2. Subcategory navigation grid. Reuses .index-card so the visual
      language matches the Tools grid, but at a larger scale with
      descriptions kept visible (override of the sitewide hide rule). */
body.topic .subcat-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@media (max-width: 700px) {
  body.topic .subcat-nav-grid {
    grid-template-columns: 1fr;
  }
}

body.topic .subcat-nav-card {
  align-items: flex-start;
  padding: 1rem 1.05rem;
  background: var(--card-deep);
  border: 1px solid var(--border);
  gap: 0.75rem;
    transition:
      background 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease,
      transform 0.16s ease;
}
body.topic .subcat-nav-card:hover,
body.topic .subcat-nav-card:focus-visible {
  background: rgba(var(--hero-accent-rgb), 0.04);
  border-color: rgba(var(--hero-accent-rgb), 0.18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
  outline: none;
}
body.topic .subcat-nav-card .index-card-icon {
  margin-top: 2px;
    transition:
      transform 0.16s ease,
      opacity 0.16s ease;
  opacity: 0.9;
}

body.topic .subcat-nav-card:hover .index-card-icon, body.topic .subcat-nav-card:focus-visible .index-card-icon {
  transform: scale(1.05);
  opacity: 1;
}

body.topic .subcat-nav-card .index-card-body strong {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  /* Override the 2-line clamp that's applied to tool/guide grid titles —
     here we want the <span class="cat-count"> to sit inline at the end
     of the subcategory title, not on a wrapped clamp-line below it. */
  /* display: block; */
  -webkit-line-clamp: unset;
  -webkit-box-orient: horizontal;
  overflow: visible;
  transition: color 0.16s ease;
}

body.topic .subcat-nav-card:hover .index-card-body strong,
body.topic .subcat-nav-card:focus-visible .index-card-body strong {
  color: var(--hero-accent);
}

/* Descriptions are intentionally visible here only — navigational
   context matters more than a scannable icon-row for subcategories. */
body.topic .subcat-nav-card .index-card-body span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}
/* Strip the decorative orange-pill look inside subcategory cards.
   Reads as "Kits & Gear · 6" — quieter and more natural. */
body.topic .subcat-nav-card .cat-count {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: normal;
  padding: 0;
  margin-left: 0.4rem;
  vertical-align: baseline;
}
body.topic .subcat-nav-card .cat-count::before {
  content: "·";
  margin-right: 0.35rem;
  color: var(--text-muted);
  opacity: 0.6;
}

/* 3. Tools/Guides grid rhythm — auto-fill at a sensible min-width so
      we don't force 4 cramped columns; cap titles at 2 lines so one
      long name can't offset an entire row. Gaps are deliberately
      looser (row + col) and per-card padding is slightly generous so
      the grid reads as a considered layout, not a directory dump. */
body.topic .index-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem 0.5rem;
}
body.topic .index-card {
  min-height: 52px;
  padding: 0.8rem 0.9rem;
  align-items: top;
}
body.topic .index-card-body strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4. About-card prose — narrower measure, generous leading, a softer
      slate than full --text so the block reads considered rather than
      stark. `text-wrap: pretty` lets the browser optimise line breaks
      like a real typesetter would. Pure typography, no decoration. */
body.topic .card > p {
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #a1a1aa;
  text-wrap: pretty;
  margin-bottom: 10px;
}
body.topic .card > p + p {
  margin-top: 1rem;
}

/* 5. Grouped sections inside Tools/Guides/Printables cards.
      A small uppercase eyebrow introduces each subcategory's items, and
      generous vertical rhythm between groups turns a flat list into
      scannable clusters. No decorative dividers — the whitespace does
      the work. */
body.topic .grouped-section + .grouped-section {
  margin-top: 2.25rem;
}
body.topic .group-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: solid;
  border-color: var(--border);
}
/* Count inside the eyebrow mirrors the subcat-nav-card treatment:
   muted number preceded by a subtle "·" separator, never a pill.
   Kept one step lighter than the label so the label→count hierarchy
   still reads cleanly. */
body.topic .group-eyebrow .cat-count {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  padding: 0;
  margin-left: 0.35rem;
  vertical-align: baseline;
  opacity: 0.85;
}
body.topic .group-eyebrow .cat-count::before {
  content: "·";
  margin-right: 0.3rem;
  opacity: 0.6;
}

/* ============================================================
   SECTION — UNIFIED CALCULATOR / TOOL UI PATTERN  (2026-04-23)

   Reference implementation:
     /preparedness/kits/bug-out-bag-weight-calculator.html
     (keeps a safety-net inline <style> block that mirrors these
      rules one-for-one; scheduled for cleanup in a follow-up.)

   Tonal vocabulary:
     beige    container  .calc-shell
     white    input      .calc-section, .cat-field
     lt-gray  output     .calc-result   (opt-in on .result-card)
     med-gray aside      .calc-side-card (opt-in on .side-panel .card)

   All classes are OPT-IN — existing tools are unaffected until
   the retrofit script (Phase 3) adds these class names to their
   markup. Adding rules here changes nothing visually on its own.
   ============================================================ */

/* ---------- Outer shell (warm beige panel) ---------- */
.calc-shell {
  background: #f7f2ea;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.calc-shell > h2 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.calc-shell > p.muted { margin-top: 0; margin-bottom: 1rem; }
.calc-shell form { display: block; }

/* ---------- Inner form section cards (white) ---------- */
.calc-section {
  background: var(--card-deep);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 0.5rem;
  margin-top: 0.9rem;
}
.calc-section:first-of-type { margin-top: 0; }

.calc-section-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
}
.calc-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.calc-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cat-bg);
  color: var(--cat);
  flex-shrink: 0;
}
.calc-section-badge svg { width: 30px; height: 30px; }

.calc-section-hint {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Stat-input grid ---------- */
.calc-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1rem;
}
@media (min-width: 640px) {
  .calc-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
}
.calc-stat-grid .field label {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-transform: none;
}
.calc-stat-grid .field input,
.calc-stat-grid .field select {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background-image: var(--field-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  
}
.calc-stat-grid .field input:focus,
.calc-stat-grid .field select:focus {
  outline: none;
  border-color: #C2410C;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18);
}
.calc-stat-grid .unit-note { font-size: 0.78rem; }

/* ---------- Tool-specific override: whole-home-generator-sizing ----------
   Default .calc-stat-grid (minmax(250px, 1fr)) wraps to 2 columns inside
   this page's narrower calc-shell (the .tool-layout side-panel takes part
   of the row width). The appliance labels here are short enough that 3
   columns fit comfortably and meaningfully reduce vertical scroll.
   Scoped by form ID so no other calculator's grid is affected. */
@media (min-width: 640px) {
  #whole-home-generator-sizing-form .calc-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Category input grid (icon chip + label + number) ----------
   Use when inputs are parallel items of the same kind (e.g. gear-weight
   categories, expense categories, storage-by-type). For 3-input stat
   rows, prefer .calc-stat-grid instead. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.6rem 0.7rem;
}
.cat-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--card-deep);
  border-radius: 10px;
  background: var(--card-deep);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cat-field .unit-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.cat-field:hover { border-color: rgba(255, 255, 255, 0.14); }
.cat-field:focus-within {
  border-color: var(--cat, var(--accent));
  box-shadow: 0 0 0 3px var(--cat-ring, rgba(249, 115, 22, 0.22));
}
.cat-field label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.cat-label-text {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.cat-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  /* background: var(--cat-bg, #f1f5f9); */
  color: var(--cat, #64748b);
  flex-shrink: 0;
}
.cat-icon-chip svg { width: 24px; height: 24px; }

/* When a .cat-icon-chip lives inside a generic .field label (not nested in
   a .cat-field), switch the label to a flex row so the icon sits next to
   the label text instead of stacking. Keeps backward-compatible with the
   existing .cat-field layout (which is already flex via its own rules). */
.field label:has(.cat-icon-chip) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.field label .cat-label-text {
  min-width: 0;
}
.cat-field input[type="number"] {
  width: 72px;
  padding: 0.4rem 0.45rem;
  text-align: center;
  border: 1px solid var(--form-border);
  border-radius: 8px;
  background: var(--form-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease;
  background-image: var(--field-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.cat-field input[type="number"]:focus {
  outline: none;
  border-color: var(--cat, var(--accent));
}
.cat-field select,
.cat-field input[type="text"] {
  flex-basis: 100%;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--form-border);
  border-radius: 8px;
  background: var(--form-bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.cat-field select:focus,
.cat-field input[type="text"]:focus {
  outline: none;
  border-color: var(--cat, var(--accent));
}

.cat-field {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.cat-field label,
.cat-field select,
.cat-field input[type="text"],
.cat-field input[type="number"],
.cat-field .unit-note {
  width: 100%;
}

.cat-field input[type="number"] {
  width: 100%;
  text-align: left;
}

/* ---------- Category color tokens ----------
   Use via <div class="cat-field" data-cat="KEY">.
   Each token set supplies:
     --cat      accent color (icon stroke, focus border)
     --cat-bg   chip background tint
     --cat-ring focus-within ring color
   Add new categories here as new tools demand them, but keep
   the palette restrained — no more than ~15 total tokens. */
.cat-field[data-cat="water"]    { --cat:#2563EB; --cat-bg:#DBEAFE; --cat-ring:rgba(37,99,235,0.18); }
.cat-field[data-cat="food"]     { --cat:#D97706; --cat-bg:#FEF3C7; --cat-ring:rgba(217,119,6,0.18); }
.cat-field[data-cat="shelter"]  { --cat:#16A34A; --cat-bg:#D1FAE5; --cat-ring:rgba(22,163,74,0.18); }
.cat-field[data-cat="clothing"] { --cat:#7C3AED; --cat-bg:#EDE9FE; --cat-ring:rgba(124,58,237,0.18); }
.cat-field[data-cat="tools"]    { --cat:#EA580C; --cat-bg:#FFE4D6; --cat-ring:rgba(234,88,12,0.18); }
.cat-field[data-cat="firstaid"] { --cat:#DC2626; --cat-bg:#FEE2E2; --cat-ring:rgba(220,38,38,0.18); }
.cat-field[data-cat="pack"]     { --cat:#64748B; --cat-bg:#E2E8F0; --cat-ring:rgba(100,116,139,0.18); }
.cat-field[data-cat="fuel"]     { --cat:#B45309; --cat-bg:#FEF3C7; --cat-ring:rgba(180,83,9,0.18); }
.cat-field[data-cat="power"]    { --cat:#F59E0B; --cat-bg:#FEF3C7; --cat-ring:rgba(245,158,11,0.18); }
.cat-field[data-cat="money"]    { --cat:#22c55e; --cat-bg:#D1FAE5; --cat-ring:rgba(21,128,61,0.18); }
.cat-field[data-cat="time"]     { --cat:#0E7490; --cat-bg:#CFFAFE; --cat-ring:rgba(14,116,144,0.18); }
.cat-field[data-cat="distance"] { --cat:#4338CA; --cat-bg:#E0E7FF; --cat-ring:rgba(67,56,202,0.18); }
.cat-field[data-cat="garden"]   { --cat:#4D7C0F; --cat-bg:#ECFCCB; --cat-ring:rgba(77,124,15,0.18); }
.cat-field[data-cat="health"]   { --cat:#BE185D; --cat-bg:#FCE7F3; --cat-ring:rgba(190,24,93,0.18); }

/* ---------- Action row ----------
   Quiet Reset + live-status hint. The Reset button is a safety net,
   not a CTA, so we override the chunky global .btn-secondary with a
   ghost-style chip when it lives inside .calc-actions. */
.calc-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.2rem;
  justify-content: flex-end;
}
.calc-actions-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.calc-actions-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  opacity: 0.85;
  flex-shrink: 0;
}
.calc-actions .cta.btn-secondary,
.calc-actions .btn-secondary,
#clearAllBtn {
  background: transparent;
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.calc-actions .cta.btn-secondary:hover,
.calc-actions .btn-secondary:hover,
#clearAllBtn:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--accent);
  color: var(--text, #1f2937);
  transform: translateY(-1px);
  filter: none;
}
.calc-actions .cta.btn-secondary:active,
.calc-actions .btn-secondary:active {
  transform: translateY(0);
}

@media (max-width: 520px) {
  .calc-shell { padding: 1.15rem 1.1rem; }
  .calc-section { padding: 1rem 1rem 1.05rem; }
  .cat-field input[type="number"] { width: 66px; }
  .cat-field label { font-size: 0.84rem; }
}

/* ---------- Threshold meter (opt-in) ----------
   Segmented green → yellow → orange → red track with a dark
   vertical marker that slides to (value / limit) × 100%.
   Use ONLY when a numeric threshold is the core story of the
   tool (e.g. "am I over limit?"). Do NOT add to tools where
   there's no clear pass/fail boundary — it would be noise. */
.calc-gauge {
  position: relative;
  height: 25px;
  border-radius: 8px;
  overflow: visible;
  background: linear-gradient(to right,
    #4DB95C 0%,  #4DB95C 60%,
    #F0C84B 60%, #F0C84B 75%,
    #F08A30 75%, #F08A30 90%,
    #D94A40 90%, #D94A40 100%);
  margin-top: 0.5rem;
}
.calc-gauge-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  background: #333;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.25s ease, opacity 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.calc-gauge-marker.is-empty { opacity: 0; }
.calc-gauge-axis {
  position: relative;
  height: 1.15rem;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.calc-gauge-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.calc-gauge-axis span.is-start { transform: translateX(0); }
.calc-gauge-axis span.is-end   { transform: translateX(-100%); }

/* ---------- Result panel (cool light gray output surface) ----------
   Opt-in: add .calc-result alongside existing .result-card. */
.result-card.calc-result {
  background: var(--card-deep);
  border: 1px solid var(--border);
}

/* ---------- Sidebar card tint (slightly darker than default .card) ----------
   Opt-in: add .calc-side-card to individual .side-panel .card blocks. */
.side-panel .card.calc-side-card {
  background: var(--card-side);
  border: 1px solid var(--border);
}

/* ---- Shelter-in-Place: page-scoped polish (2026-05-03) ----
   Comfortable scenario chips with a sub-label, anchored Live indicator
   inside the result card, and stronger numeric hierarchy on result stats. */
#shelter-in-place-supply-calculator-form .bag-presets {
  gap: 2rem;
  margin-top: 0.65rem;
  justify-content: center;
}
#shelter-in-place-supply-calculator-form .bag-preset {
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  font-size: 0.84rem;
  line-height: 1.2;
  min-height: 48px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
}
#shelter-in-place-supply-calculator-form .bag-preset__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
#shelter-in-place-supply-calculator-form .bag-preset.is-active .bag-preset__icon {
  background: rgba(249, 115, 22, 0.18);
  color: var(--accent-light);
}
#shelter-in-place-supply-calculator-form .bag-preset__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
#shelter-in-place-supply-calculator-form .bag-preset__main {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
#shelter-in-place-supply-calculator-form .bag-preset .bag-preset__sub {
  font-size: 0.72rem;
  margin-top: 0.1rem;
  line-height: 1.2;
}

/* Result card top row — pairs the "Supply plan" status pill with a small
   live-update indicator so the hint feels anchored to the result, not
   floating between sections. */
.shelter-result .result-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.shelter-result .result-status-row .result-status {
  margin-bottom: 0;
}
.shelter-result .result-live-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.shelter-result .result-live-hint::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

/* Result hierarchy — keep main + stat sizes at sitewide defaults for
   continuity with other tools; only apply tabular-nums to the stat
   numbers so the three values align cleanly in a row. */
.shelter-result .result-stat strong {
  font-variant-numeric: tabular-nums;
}

/* Spacing rhythm — tighten the gap between the form and the result card,
   and between the action row and the result card so the section reads as
   one continuous flow rather than three loose blocks. */
#shelter-in-place-supply-calculator-form .calc-section + .calc-section {
  margin-top: 1rem;
}
.calc-shell:has(#shelter-in-place-supply-calculator-form) .calc-actions {
  margin-top: 1rem;
}
.calc-shell:has(#shelter-in-place-supply-calculator-form) .shelter-result {
  margin-top: 0.85rem;
}

/* ---- Water Purification Tablet: page-scoped polish (2026-05-03) ----
   Two-section input flow (product, then water-to-treat). Volume + unit
   live in a single paired chip; water clarity is a 2-up icon-chip group
   inside a cat-field. Live-update hint is anchored to the result card. */

/* Long product names — slightly tighter font so the closed select
   shows the full label without truncation. */
#water-purification-tablet-calculator-form #tablet-type {
  font-size: 0.94rem;
  line-height: 1.35;
}

/* Default cat-grid is auto-fit; force 2-up at this section width so
   volume and clarity sit side-by-side until the layout collapses. */
#water-purification-tablet-calculator-form .cat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
@media (max-width: 560px) {
  #water-purification-tablet-calculator-form .cat-grid {
    grid-template-columns: 1fr;
  }
}

/* Volume + unit paired chip lives inside a cat-field — let it fill the
   row width and left-align the number. */
#water-purification-tablet-calculator-form .cat-field .calc-input-unit {
  width: 100%;
}
#water-purification-tablet-calculator-form .cat-field .calc-input-unit > input[type="number"] {
  text-align: left;
}

/* Clarity chip group lives inside a cat-field — fill the row width and
   stretch each chip equally so the pair reads as one decisive control. */
#water-purification-tablet-calculator-form .cat-field .bag-presets {
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-top: 0;
}
#water-purification-tablet-calculator-form .cat-field .bag-preset {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.75rem 0.5rem 0.6rem;
  font-size: 0.84rem;
  line-height: 1.2;
  min-height: 48px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
}
#water-purification-tablet-calculator-form .cat-field .bag-preset__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
#water-purification-tablet-calculator-form .cat-field .bag-preset.is-active .bag-preset__icon {
  background: rgba(249, 115, 22, 0.18);
  color: var(--accent-light);
}
#water-purification-tablet-calculator-form .cat-field .bag-preset__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}
#water-purification-tablet-calculator-form .cat-field .bag-preset__main {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
#water-purification-tablet-calculator-form .cat-field .bag-preset .bag-preset__sub {
  font-size: 0.72rem;
  margin-top: 0.1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Result card top row — pairs the "Dosage" status pill with a small
   Live indicator so the hint feels anchored to the result. */
.water-purify-result .result-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.water-purify-result .result-status-row .result-status {
  margin-bottom: 0;
}
.water-purify-result .result-live-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.water-purify-result .result-live-hint::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

/* Tabular alignment on stat numbers, no other size override (keep sitewide
   defaults for continuity). */
.water-purify-result .result-stat strong {
  font-variant-numeric: tabular-nums;
}

/* Spacing rhythm — tighten gaps between the form, the action row, and
   the result card so the section reads as one continuous flow. */
#water-purification-tablet-calculator-form .calc-section + .calc-section {
  margin-top: 1rem;
}
.calc-shell:has(#water-purification-tablet-calculator-form) .calc-actions {
  margin-top: 1rem;
}
.calc-shell:has(#water-purification-tablet-calculator-form) .water-purify-result {
  margin-top: 0.85rem;
}

/* ---- Battery Backup Runtime: page-scoped polish (2026-05-03) ----
   Anchored Live indicator inside the result card; tabular-nums on stats. */
.battery-runtime-result .result-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.battery-runtime-result .result-status-row .result-status {
  margin-bottom: 0;
}
.battery-runtime-result .result-live-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.battery-runtime-result .result-live-hint::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}
.battery-runtime-result .result-stat strong {
  font-variant-numeric: tabular-nums;
}
.calc-shell:has(#battery-runtime-form) .calc-actions {
  margin-top: 1rem;
}
.calc-shell:has(#battery-runtime-form) .battery-runtime-result {
  margin-top: 0.85rem;
}

/* ---- Battery runtime visualization ----
   AA/D-cell-proportioned battery silhouette (~4.5:1 ratio) acting as
   a usable-runtime gauge. Body is a clean light-grey "empty" cell;
   green fill grows from left in proportion to log-scaled realistic
   runtime. Single semantic: filled = usable energy. The tick scale
   below labels the time tier (Emergency / Outage / Day / Multi-day)
   so the user can read the fill position at a glance. The runtime
   number lives in the result-main below the battery — the viz is
   purely supporting visual, no competing centered readout. */
.battery-runtime-result .battery-viz {
  display: flex;
  align-items: stretch;
  width: 320px;
  max-width: 100%;
  height: 68px;
  margin: 1rem auto 0.55rem;
  gap: 0;
}
.battery-runtime-result .battery-viz-body {
  flex: 1;
  position: relative;
  border: 3px solid #1f2937;
  border-radius: 13px;
  overflow: hidden;
  background: #eef1f4;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.battery-runtime-result .battery-viz-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #5BC56A 0%, #4DB95C 55%, #43A852 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              inset -1px 0 0 rgba(0, 0, 0, 0.25);
  transition: width 0.4s ease;
}
.battery-runtime-result .battery-viz-cap {
  width: 12px;
  background: #1f2937;
  border-radius: 0 5px 5px 0;
  margin: 18px 0;
  height: 32px;
  align-self: center;
}
.battery-runtime-result .battery-viz-ticks {
  position: relative;
  margin: 0 auto 1rem;
  padding: 0;
  width: 320px;
  max-width: 100%;
  height: 36px;
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  /* Account for the cap on the right (~12px + cap gap) so the percentages
     map onto the body interior, not the full container width. */
  padding-right: 14px;
  box-sizing: border-box;
}
.battery-runtime-result .battery-viz-tick {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
.battery-runtime-result .battery-viz-tick::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 5px;
  background: rgba(15, 23, 42, 0.25);
}
.battery-runtime-result .battery-viz-tick strong {
  color: var(--text, #1f2937);
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: 0.1rem;
}
.battery-runtime-result .battery-viz-tick span {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 520px) {
  .battery-runtime-result .battery-viz {
    width: 100%;
    height: 58px;
    margin: 0.85rem 0 0.5rem;
  }
  .battery-runtime-result .battery-viz-body {
    border-width: 2.5px;
    border-radius: 11px;
  }
  .battery-runtime-result .battery-viz-cap {
    width: 10px;
    height: 26px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
  }
  .battery-runtime-result .battery-viz-ticks {
    width: 100%;
  }
}

/* ============================================================
   GUIDE CONTENT COMPONENTS (2026-04-24)
   Richer guide pattern — added for companion-planting-basics
   reference impl. Additive; existing selectors untouched.
   Components:
     .related-strip       — breadcrumb-adjacent related-links row
     .tips-list--icons    — tinted icon-block bullets (mechanisms)
     .quick-start         — green chips + CTA band
     .inline-note         — slim leaf-prefixed inline callout
============================================================ */

/* ---- Related strip ----
   Reuses the existing .related-hero-strip / .related-hero / .chip / .chip-type
   markup so guide pages and tool pages share the same top-of-page strip.
   Rendered by renderRelatedStrip in related-guides.js. No new CSS required. */

/* ---- Mechanism list — icon-block bullets for "four ways" pattern.
       Use as: <ul class="tips-list tips-list--icons"> ----- */
.tips-list.tips-list--icons {
  list-style: none;
  padding-left: 0;
}
.tips-list.tips-list--icons > li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.7rem;
}
.tips-list.tips-list--icons > li:first-child { margin-top: 0; }
.mechanism-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border-radius: 10px;
  color: var(--hero-accent-lit);
}
.mechanism-icon svg { width: 25px; height: 25px; }

/* ---- Quick start band — chips + subtle inline action ---- */
.quick-start {
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
  background: rgba(var(--hero-accent-rgb), 0.1);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.12);
  border-radius: var(--radius);
}
.quick-start__main {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.quick-start__leaf {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #3f7a2a;
  margin-top: 0.2rem;
}
.quick-start__body { flex: 1 1 auto; min-width: 0; }
.quick-start__heading {
  margin: 0 0 0.15rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.quick-start__sub {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.quick-start__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quick-start__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.2;
  background: rgba(var(--hero-accent-rgb), 0.12);
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  color: var(--hero-accent-lit);
}
.quick-start__chip svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #3f7a2a;
}
.quick-start__action {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.quick-start__action a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.quick-start__action a:hover {
  color: var(--accent-light);
}

@media (max-width: 720px) {
  .quick-start__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .quick-start__chips { grid-template-columns: 1fr; }
}

/* ---- Inline note — slim leaf-prefixed callout inside prose ---- */
.inline-note {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.inline-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #3f7a2a;
  transform: translateY(3px);
}
.inline-note a {
  color: var(--accent);
  text-decoration: none;
}
.inline-note a:hover { text-decoration: underline; }

/* Heart-rate guide additions */

/* A. Quick Understanding mental-model card */
.hr-basics { margin: 1.5rem 0; }
.hr-basics__title {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.05rem; margin: 0 0 .9rem;
}
.hr-basics__title svg { width: 20px; height: 20px; color: #c93838; flex: 0 0 auto; }
.hr-basics__pipeline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .6rem; margin: 0 0 1rem;
}
.hr-basics__node {
  display: inline-block; padding: .4rem .75rem;
  background: var(--card-deep); border: 1px solid var(--border);
  border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--text); white-space: nowrap;
}
.hr-basics__node--accent {
  background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.4); color: var(--accent-light);
}
.hr-basics__arrow { color: var(--text-muted); font-weight: 700; }
.hr-basics__zones {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
}
.hr-zone-pill {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .55rem .7rem; border-radius: 10px;
  background: var(--card-deep); border: 1px solid var(--border);
  font-size: .82rem; line-height: 1.2;
}
.hr-zone-pill b {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .15rem; color: var(--text-muted);
}
.hr-zone-pill--1 { border-left: 4px solid #16a34a; }
.hr-zone-pill--2 { border-left: 4px solid #3b82f6; }
.hr-zone-pill--3 { border-left: 4px solid #f59e0b; }
.hr-zone-pill--4 { border-left: 4px solid #f97316; }
.hr-zone-pill--5 { border-left: 4px solid #dc2626; }
@media (max-width: 720px) {
  .hr-basics__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* B. Horizontal zone intensity bar */
.hr-bar {
  margin: 2rem 0 1.25rem; padding: 1rem 1.1rem;
  background: var(--card-deep); border: 1px solid var(--border); border-radius: var(--radius);
}
.hr-bar__title {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 .65rem;
}
.hr-bar__track {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}
.hr-bar__seg {
  padding: .55rem .5rem; text-align: center;
  color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .03em;
}
.hr-bar__seg--1 { background: #16a34a; }
.hr-bar__seg--2 { background: #3b82f6; }
.hr-bar__seg--3 { background: #f59e0b; }
.hr-bar__seg--4 { background: #f97316; }
.hr-bar__seg--5 { background: #dc2626; }
.hr-bar__labels {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: .5rem; gap: .25rem;
  font-size: .78rem; color: var(--text-muted); text-align: center;
}
@media (max-width: 520px) {
  .hr-bar__seg { font-size: .72rem; padding: .45rem .25rem; }
  .hr-bar__labels { font-size: .7rem; }
}

/* C. Calculator CTA */
.calc-cta {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.1rem; margin: 1.5rem 0;
  background: rgba(249,115,22,0.10); border: 1px solid rgba(249,115,22,0.35); border-radius: var(--radius);
  color: var(--text);
}
.calc-cta__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(249,115,22,0.18); color: var(--accent); border: 1px solid rgba(249,115,22,0.35);
}
.calc-cta__icon svg { width: 22px; height: 22px; }
.calc-cta__body { flex: 1 1 auto; min-width: 0; }
.calc-cta__title { font-weight: 700; font-size: 1rem; margin: 0 0 .15rem; }
.calc-cta__sub { font-size: .88rem; color: var(--text-muted); margin: 0; }
.calc-cta__action {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem; border-radius: 10px;
  background: var(--accent); color: var(--text-dark); font-weight: 600; font-size: .9rem;
  text-decoration: none; white-space: nowrap;
}
.calc-cta__action:hover { background: var(--accent-light); }
@media (max-width: 560px) {
  .calc-cta { flex-wrap: wrap; }
  .calc-cta__action { width: 100%; justify-content: center; }
}

/* D. Key takeaway */
.key-takeaway {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem; margin: 1.25rem 0 0;
  background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.30); border-radius: 12px;
  color: var(--text);
}
.key-takeaway svg { width: 20px; height: 20px; color: #60a5fa; flex: 0 0 auto; margin-top: 1px; }
.key-takeaway p { margin: 0; font-size: .92rem; }
.key-takeaway b { display: block; margin-bottom: .15rem; }

.zone-table-wrap {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
}

.zone-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--text);
}

.zone-table th,
.zone-table td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.zone-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--card-bg);
}

.zone-table tr:last-child td {
  border-bottom: 0;
}

.zone-table td:first-child {
  font-weight: 700;
  width: 150px;
}

.zone-table td:first-child strong {
  text-transform: uppercase;
}

.zone-table td:first-child span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
}

.zone-table td.num {
  text-align: center;
}

.zone-table .zone-1 td:first-child {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border-left: 3px solid rgba(34, 197, 94, 0.40);
  color: var(--meter-green);
}
.zone-table .zone-2 td:first-child {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
  border-left: 3px solid rgba(59, 130, 246, 0.40);
  color: #60a5fa;
}
.zone-table .zone-3 td:first-child {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-left: 3px solid rgba(245, 158, 11, 0.40);
  color: var(--meter-yellow);
}
.zone-table .zone-4 td:first-child {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0.02));
  border-left: 3px solid rgba(249, 115, 22, 0.40);
  color: #fb923c;
}
.zone-table .zone-5 td:first-child {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
  border-left: 3px solid rgba(239, 68, 68, 0.40);
  color: var(--meter-red);
}

/* ========= COLOR BLINDNESS TEST — tool-specific ========= */

.color-blind-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 1.25rem;
  padding: 0.5rem;
  border-radius: 16px;
  background: var(--card-deep);
  border: 1px solid var(--border);
}

.color-blind-stage svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.color-blind-results .color-blind-score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.color-blind-score-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
}

.color-blind-score-row strong {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent, #c2410c);
}

.color-blind-score-row span {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.color-blind-detail {
  margin: 0.75rem 0 1rem;
}

.color-blind-detail summary {
  cursor: pointer;
  font-weight: 600;
}

.color-blind-detail ol {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .color-blind-results .color-blind-score {
    grid-template-columns: 1fr;
  }
}

/* ========= SCREEN RESOLUTION CHECKER — tool-specific ========= */

/* ============================================================
   TESTER RESULT GRID — tech/devices T2/T3 result readouts
   Canonical icon-tinted result grid. Consolidates the former
   .refresh-status-* / .dpi-result-* / .screen-info-* families
   (identical layout) into one shared family, 2026-05-19.
   Modifiers: --compact = tighter min column (dense numeric grids
   like mouse-dpi); --dense = smaller value font for many-cell
   grids like screen-resolution. See _admin/DEVICE-TESTER-POLISH.md §2.
============================================================ */
.tester-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.tester-result-grid--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.tester-result-cell {
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tester-result-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.1rem;
}

.tester-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
}
.tester-result-icon svg { width: 18px; height: 18px; }
.tester-result-icon--blue   { background: rgba(96, 165, 250, 0.12); color: #93C5FD; }
.tester-result-icon--green  { background: rgba(101, 163, 13, 0.14); color: #84CC16; }
.tester-result-icon--purple { background: rgba(167, 139, 250, 0.12); color: #C4B5FD; }
.tester-result-icon--orange { background: rgba(249, 115, 22, 0.12); color: #FB923C; }
.tester-result-icon--yellow { background: rgba(234, 179, 8, 0.12);  color: #FACC15; }
.tester-result-icon--red    { background: rgba(239, 68, 68, 0.12);  color: #F87171; }

.tester-result-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.tester-result-value {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--result-main);
  font-variant-numeric: tabular-nums;
}
.tester-result-grid--dense .tester-result-value { font-size: 1.35rem; line-height: 1.15; }

.tester-result-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Detected-display summary line. Mirrors .side-math-outcome chip styling
   (green-tinted gradient + green border + elevated text) so the headline
   reads as the conclusion of the auto-detection, not a plain caption. */
.tester-result-summary {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--meter-green);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ARTICLE SECTION ICONS (2026-05-05)
   Adds a colored icon chip next to body-section h2/h3 headings
   inside .card--article. Pilot impl: propane-vs-natural-gas-cost.
   Complements .calc-section-badge (form sections) and
   .cat-icon-chip (input labels). Visual rule: 30x30 rounded
   tinted badge, 18px stroke icon at full-saturation accent color.
============================================================ */
h2.article-section-title,
h3.article-section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.article-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
}
.article-section-icon svg { width: 20px; height: 20px; }

/* Accent variants — orange (default/how-to/tips/warning),
   blue (info/water), purple (specialty/win), green (positive/FAQ),
   yellow (tip), red (mistakes/danger). Backgrounds use ~12% rgba
   of the accent so the chip reads on dark cards without competing
   with surrounding content. */
.article-section-icon--orange { background: rgba(249, 115, 22, 0.12); color: #FB923C; }
.article-section-icon--blue   { background: rgba(96, 165, 250, 0.12); color: #93C5FD; }
.article-section-icon--purple { background: rgba(167, 139, 250, 0.12); color: #C4B5FD; }
.article-section-icon--green  { background: rgba(101, 163, 13, 0.14); color: #84CC16; }
.article-section-icon--yellow { background: rgba(234, 179, 8, 0.12);  color: #FACC15; }
.article-section-icon--red    { background: rgba(239, 68, 68, 0.12);  color: #F87171; }

/* ========= MONITOR REFRESH RATE TESTER — tool-specific ========= */

/* (Former .refresh-status-* result grid consolidated into .tester-result-* above, 2026-05-19. monitor-refresh-rate-tester now uses .tester-result-*.) */

.refresh-canvas-wrap {
  margin: 1rem 0;
}

.refresh-canvas {
  position: relative;
  width: 100%;
  height: 110px;
  background: var(--card-deep);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.refresh-canvas-track {
  position: absolute;
  inset: 30px 0 30px 0;
  background: linear-gradient(180deg, transparent 0%, transparent 49%, rgba(255,255,255,0.10) 49%, rgba(255,255,255,0.10) 51%, transparent 51%);
}

.refresh-bar {
  position: absolute;
  top: 50%;
  left: -30px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: var(--accent, #c2410c);
  border-radius: 6px;
  will-change: transform;
}

.refresh-canvas-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px calc(100% / 12));
  pointer-events: none;
}

.refresh-canvas-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

/* ========= MOUSE DPI CHECKER — tool-specific ========= */

.dpi-stage {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--card-deep);
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed var(--border);
  cursor: crosshair;
  user-select: none;
  margin: 1rem 0 1.25rem;
}

.dpi-stage.is-tracking { border-color: var(--accent, #c2410c); }

.dpi-stage-instruction {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  pointer-events: none;
}

.dpi-stage-instruction strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.dpi-stage-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--accent, #c2410c);
  border-radius: 50%;
  border: 3px solid var(--card-bg, #fff);
  box-shadow: 0 0 0 2px var(--accent, #c2410c);
  pointer-events: none;
}

.dpi-stage-trail {
  position: absolute;
  background: rgba(194, 65, 12, 0.14);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
  transform-origin: left center;
}

/* (Former .dpi-result-* result grid consolidated into .tester-result-* above, 2026-05-19. mouse-dpi-checker now uses .tester-result-grid .tester-result-grid--compact.) */

.dpi-distance-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
}

.dpi-distance-input label {
  font-weight: 600;
  font-size: 0.92rem;
}

.dpi-distance-input .calc-input-unit {
  width: auto;
  min-width: 140px;
}

/* ===== Smoker buying-guide components =====
   Used on /cooking/grilling-smoking/how-to-choose-a-smoker.html (and any future
   guide that needs the same "quick-rec / comparison strip / type mini-cards"
   triplet). All styles use dark-theme tokens so they ride the surface ladder
   correctly. */

/* Quick-recommendation decision table */
.quickrec-card {
  margin: 1.1rem 0 1.35rem;
  padding: 0.95rem 1.1rem 0.85rem;
  background: var(--card-side);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.quickrec-card__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.quickrec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 720px) {
  .quickrec-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
.quickrec-list li {
  display: grid;
  grid-template-columns: minmax(120px, max-content) auto 1fr;
  gap: 0.55rem 0.65rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
  color: var(--text);
}
.quickrec-list li:last-child { border-bottom: none; }
@media (min-width: 720px) {
  /* Re-balance the borders so columns terminate cleanly */
  .quickrec-list li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
.quickrec-list__when {
  font-weight: 600;
  color: var(--text);
}
.quickrec-list__arrow {
  color: var(--text-muted);
  font-weight: 600;
}
.quickrec-list__pick strong {
  color: var(--meter-green);
  font-weight: 700;
}
.quickrec-list__why {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* At-a-glance comparison strip — designed as a lightweight scan layer that
   pairs with the more substantial detail cards below. Smaller text, tighter
   spacing, thinner accents so it visually defers to the editorial breakdown. */
.smoker-strip__intro {
  margin: 1.2rem 0 0.55rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.smoker-strip__intro strong { color: var(--text); }
.smoker-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 720px) { .smoker-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } }
a.smoker-strip__card { text-decoration: none; color: inherit; }
a.smoker-strip__card:hover,
a.smoker-strip__card:focus-visible { text-decoration: none; }
.smoker-strip__card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.7rem 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--meter-green);
  border-radius: 10px;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
a.smoker-strip__card:hover,
a.smoker-strip__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--text-muted);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
/* Per-tier accent on the top stripe; ties to the badge color in the detail card below */
.smoker-strip__card--beginner  { border-top-color: var(--meter-green); }
.smoker-strip__card--fastest   { border-top-color: var(--meter-orange); }
.smoker-strip__card--value     { border-top-color: var(--meter-yellow); }
.smoker-strip__card--flavor    { border-top-color: var(--meter-red); }
.smoker-strip__card--allaround { border-top-color: #a78bfa; }
.smoker-strip__card--apartment { border-top-color: #38bdf8; }
.smoker-strip__art {
  position: relative;
  aspect-ratio: 4 / 4;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
/* Placeholder treatment: clean dark recess so when artwork (`<img>` or
   `background-image:`) lands, the slot already feels framed. No "IMAGE"
   overlay text — the recessed surface is the affordance. */
.smoker-strip__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.smoker-strip__tagline {
  margin: -0.15rem 0 0.1rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
  font-style: italic;
}
.smoker-strip__metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.7rem;
  text-align: left;
}
.smoker-strip__metrics li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
  color: var(--text-muted);
}
/* Slimmer bar within strip cards — quieter, scan-layer feel. The reusable
   .bar5 keeps full size in any other context. */
.smoker-strip__metrics .bar5 {
  width: 42px;
  height: 3px;
}

/* Reusable 5-step bar gauge (used in smoker-strip metrics; available to any
   future guide that needs a compact 1-of-5 rating). */
.bar5 {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  vertical-align: middle;
}
.bar5__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--meter-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Smoker type detail cards (the "in depth" section). Full-width stack, one
   card per row, with a larger feature-image slot. The extra horizontal space
   lets the specs split into two columns on desktop for faster scanning. */
.type-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1rem 0 1.25rem;
}
.type-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.15rem;
  padding: 1.05rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--meter-green);
  border-radius: 10px;
  align-items: start;
  transition: transform 0.18s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  scroll-margin-top: 90px; /* keep anchor jumps clear of sticky header */
}
.type-card:hover,
.type-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
@media (max-width: 540px) {
  .type-card { grid-template-columns: 1fr; gap: 0.7rem; padding: 0.9rem; }
}

/* Scroll-driven active state — paired with the IntersectionObserver wired at
   the bottom of the smoker guide. Subtle: just lightens the border so the
   currently-being-read card and its strip-card sibling feel "current."
   `:target` (the click-to-jump state) overrides this with a stronger shadow. */
.type-card.is-active {
  border-color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
a.smoker-strip__card.is-active {
  border-color: var(--text-muted);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
a.smoker-strip__card.is-active .smoker-strip__jump {
  opacity: 1;
  color: var(--text);
}
/* Per-tier left-border accent; matches the strip-card top-border tier color */
.type-card--beginner  { border-left-color: var(--meter-green); }
.type-card--fastest   { border-left-color: var(--meter-orange); }
.type-card--value     { border-left-color: var(--meter-yellow); }
.type-card--flavor    { border-left-color: var(--meter-red); }
.type-card--allaround { border-left-color: #a78bfa; }
.type-card--apartment { border-left-color: #38bdf8; }
.type-card__art {
  position: relative;
  aspect-ratio: 4 / 4;
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
/* Placeholder treatment: same dark recess as the strip cards. Once
   per-type silhouette PNGs land, the slot accepts an `<img>` or a
   `background-image:` rule without further layout work. */

/* Per-type artwork. As silhouettes land, add the matching rule alongside
   this one. `contain` keeps the whole silhouette visible (no crop); the
   dark recess shows around it. Switch to `cover` per-type if a particular
   image is composed to fill the frame edge-to-edge. */
.smoker-strip__art--pellet,
.type-card__art--pellet {
  background-image: url("/assets/img/hero-art/smoker-pellet.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.smoker-strip__art--gas,
.type-card__art--gas {
  background-image: url("/assets/img/hero-art/smoker-gas.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.smoker-strip__art--bullet,
.type-card__art--bullet {
  background-image: url("/assets/img/hero-art/smoker-vertical.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.smoker-strip__art--offset,
.type-card__art--offset {
  background-image: url("/assets/img/hero-art/smoker-horizontal.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.smoker-strip__art--kamado,
.type-card__art--kamado {
  background-image: url("/assets/img/hero-art/smoker-kamado.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.smoker-strip__art--electric,
.type-card__art--electric {
  background-image: url("/assets/img/hero-art/smoker-electric.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.type-card__body { min-width: 0; }
.type-card__head {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0.5rem;
}
.type-card__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.type-card__badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--meter-green);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 4px;
}
.type-card__badge--beginner  { color: var(--meter-green);  background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); }
.type-card__badge--fastest   { color: var(--meter-orange); background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.30); }
.type-card__badge--value     { color: var(--meter-yellow); background: rgba(250, 204, 21, 0.12); border-color: rgba(250, 204, 21, 0.32); }
.type-card__badge--flavor    { color: var(--meter-red);    background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.30); }
.type-card__badge--allaround { color: #a78bfa;             background: rgba(167, 139, 250, 0.13); border-color: rgba(167, 139, 250, 0.32); }
.type-card__badge--apartment { color: #38bdf8;             background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.32); }

.type-card__verdict {
  margin: -0.1rem 0 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.type-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  font-size: 0.88rem;
}
@media (min-width: 720px) {
  /* Full-width detail cards have room for the 5 specs to split into two
     columns. Faster scanning, denser layout without feeling cramped. */
  .type-card__specs {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.3rem;
  }
}
.type-card__specs li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--text);
  padding: 0.12rem 0;
}
.type-card__spec-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.type-card__brands {
  margin: 0;
  font-size: 0.83rem;
  color: var(--text);
}
.type-card__brands-label {
  display: block;
  margin-bottom: 0.32rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

/* Brand chip list (Wirecutter-style "available brands" pills). Reusable for
   any compare/buying-guide context where a short list of brand or model names
   needs to scan faster than inline prose. */
.brand-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}
.brand-chips li {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 4px;
  color: var(--text);
}

/* Editorial section eyebrow — labeled hairline rule used to separate the
   at-a-glance comparison strip from the detailed breakdown beneath it. Lives
   outside the heading hierarchy so it doesn't pollute the guide ToC. Wirecutter
   / RTINGS section-label aesthetic, restrained for dark-premium. */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 2rem 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-eyebrow__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
/* Variant: eyebrow opens a section (paired with a hint paragraph) rather than
   dividing two sections. Tighter top margin since the article intro is just
   above it. */
.section-eyebrow--top { margin: 1.3rem 0 0.55rem; }
.section-eyebrow__hint {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.section-eyebrow__hint strong { color: var(--text); }

/* Small jump-affordance arrow at the bottom-right of each strip card. Always
   faintly visible so the click-to-jump pattern is discoverable; brightens on
   hover/focus. Pairs with the `:target` highlight on the detail card below. */
.smoker-strip__jump {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.smoker-strip__jump svg {
  width: 13px;
  height: 13px;
  display: block;
}
a.smoker-strip__card:hover .smoker-strip__jump,
a.smoker-strip__card:focus-visible .smoker-strip__jump {
  opacity: 1;
  color: var(--text);
  transform: translateY(1px);
}

/* :target emphasis — when a detail card is navigated to via anchor click,
   bump its left-border accent and add a deeper shadow so the user can see
   where they landed. Persists until the user navigates elsewhere on the page;
   feels editorial, not flashing-and-fading. */
.type-card:target {
  border-left-width: 5px;
  padding-left: calc(0.9rem - 2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
@media (max-width: 540px) {
  .type-card:target { padding-left: 0.9rem; }
}

/* ============================================================
   REPORT A BUG MODAL — sitewide, in the footer link
   Used by: /assets/js/report-bug.js
   Trigger: footer link with data-report-bug
============================================================ */
.ps-bug-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ps-bug-modal[hidden] { display: none; }
body.ps-bug-open { overflow: hidden; }

.ps-bug-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(2px);
}

.ps-bug-box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--bg, #0f172a);
  color: var(--text, #e6edf7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  padding: 1.5rem 1.5rem 1.25rem;
}
@media (max-width: 540px) {
  .ps-bug-box { padding: 1.1rem 1rem 0.9rem; border-radius: 12px; }
}

.ps-bug-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  background: transparent;
  border: 0;
  color: var(--text-muted, #9aa6bd);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ps-bug-close:hover,
.ps-bug-close:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #e6edf7);
}

.ps-bug-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.ps-bug-lede {
  margin: 0 0 1rem;
  color: var(--text-muted, #9aa6bd);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ps-bug-form { display: flex; flex-direction: column; gap: 0.8rem; }

.ps-bug-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ps-bug-label {
  font-size: 0.85rem;
  color: var(--text-muted, #9aa6bd);
}
.ps-bug-textarea,
.ps-bug-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #e6edf7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  font: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.ps-bug-textarea { resize: vertical; min-height: 110px; }
.ps-bug-textarea:focus,
.ps-bug-input:focus {
  outline: none;
  border-color: rgba(120, 168, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(120, 168, 255, 0.16);
}
.ps-bug-textarea[aria-invalid="true"] {
  border-color: rgba(255, 110, 110, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 110, 110, 0.18);
}

.ps-bug-meta {
  font-size: 0.82rem;
  color: var(--text-muted, #9aa6bd);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
}
.ps-bug-meta summary {
  cursor: pointer;
  list-style: none;
}
.ps-bug-meta summary::-webkit-details-marker { display: none; }
.ps-bug-meta summary::before {
  content: "\25B8 ";
  display: inline-block;
  transition: transform 0.15s ease;
  margin-right: 0.25rem;
}
.ps-bug-meta[open] summary::before { content: "\25BE "; }
.ps-bug-meta-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0.5rem 0 0;
}
.ps-bug-meta-list dt { font-weight: 600; }
.ps-bug-meta-list dd {
  margin: 0;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.ps-bug-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
@media (max-width: 420px) {
  .ps-bug-actions { flex-direction: column-reverse; }
  .ps-bug-actions .cta { width: 100%; }
}

.ps-bug-fallback {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: #ffdc9a;
  background: rgba(255, 196, 100, 0.08);
  border: 1px solid rgba(255, 196, 100, 0.25);
  border-radius: 8px;
}
.ps-bug-fallback strong { color: #fff; }

/* ============================================================
   FOOTER STORAGE NOTE — passive cookies/local-storage disclosure
   Used on: sitewide footer copyright line (includes/footer.html)
============================================================ */
.footer-storage-note {
  color: var(--text-muted, #9aa6bd);
  font-size: 0.82rem;
}
.footer-storage-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(154, 166, 189, 0.45);
  text-underline-offset: 2px;
}
.footer-storage-note a:hover,
.footer-storage-note a:focus-visible {
  color: var(--text, #e6edf7);
  text-decoration-color: currentColor;
}
@media (max-width: 540px) {
  .logo-copyright .footer-storage-note {
    display: block;
    margin-top: 0.35rem;
  }
  .logo-copyright > span + .footer-storage-note { margin-top: 0.35rem; }
}

/* ============================================================
   FIRST AID KIT CHECKER — tool-specific
   Used on: /preparedness/kits/first-aid-kit-checker.html
============================================================ */
#first-aid-kit-checker-form .calc-section{ padding:1rem 1.1rem; }
#first-aid-kit-checker-form .checklist-group-heading{
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#737373;
  margin: 0 0 .5rem;
}
#first-aid-kit-checker-form .checklist-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.35rem 0;
  cursor:pointer;
  font-size:.95rem;
}
#first-aid-kit-checker-form .checklist-checkbox{
  width:1.1rem;
  height:1.1rem;
  flex-shrink:0;
  cursor:pointer;
}
#first-aid-kit-checker-form .checklist-critical-pill{
  font-size:.7rem;
  background:#fee2e2;
  color:#b91c1c;
  border-radius:3px;
  padding:1px 5px;
  margin-left:.3rem;
  font-weight:600;
  letter-spacing:.03em;
}
#missing-list .missing-list-heading{ font-size:.85rem; }
#missing-list .missing-list-ul{
  margin:.5rem 0 0 1.2rem;
  font-size:.85rem;
  line-height:1.7;
}
#missing-list .missing-list-critical{
  color:#b91c1c;
  font-style:normal;
}
#missing-list .missing-list-complete{
  color:#15803d;
  font-size:.9rem;
  font-weight:600;
}

/* ============================================================
   HOME INVENTORY TRACKER + GARAGE-WORKSHOP TOOL INVENTORY — shared
   Used on: /household/maintenance/home-inventory-tracker.html
   Used on: /household/maintenance/garage-workshop-tool-inventory.html
   Two sibling inventory trackers, polished together for parity.
============================================================ */
#home-inventory-tracker-form .add-row,
#garage-workshop-tool-inventory-form .add-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:flex-end;
}
#home-inventory-tracker-form .add-row .field,
#garage-workshop-tool-inventory-form .add-row .field{
  flex:1 1 180px;
  min-width:140px;
}
#home-inventory-tracker-form .add-row__qty,
#garage-workshop-tool-inventory-form .add-row__qty{ flex:0 1 90px; min-width:80px; }
#home-inventory-tracker-form .add-row__value,
#garage-workshop-tool-inventory-form .add-row__value{ flex:0 1 150px; min-width:130px; }
#garage-workshop-tool-inventory-form .add-row__cond{ flex:0 1 120px; min-width:110px; }
#home-inventory-tracker-form .add-row__btn,
#garage-workshop-tool-inventory-form .add-row__btn{ flex:0 0 auto; }
#home-inventory-tracker-form .add-row input[type="text"],
#home-inventory-tracker-form .add-row input[type="number"],
#home-inventory-tracker-form .add-row select,
#garage-workshop-tool-inventory-form .add-row input[type="text"],
#garage-workshop-tool-inventory-form .add-row input[type="number"],
#garage-workshop-tool-inventory-form .add-row select{
  width:100%;
}
#home-inventory-tracker-form .add-row__btn-spacer,
#garage-workshop-tool-inventory-form .add-row__btn-spacer{
  visibility:hidden;
  display:block;
}
#home-inventory-tracker-form .add-row__btn-cta,
#garage-workshop-tool-inventory-form .add-row__btn-cta{
  white-space:nowrap;
}
#home-inventory-tracker-form .cat-label-optional,
#garage-workshop-tool-inventory-form .cat-label-optional{
  font-weight:400;
  color:#999;
  margin-left:.25rem;
  font-size:0.85em;
}
.inventory-table .inv-cell-center,
.category-totals .inv-cell-center{ text-align:center; }
.inventory-table .inv-cell-right,
.category-totals .inv-cell-right{ text-align:right; }

/* ============================================================
   DEVICE-TESTER LAYOUT HELPERS — tech/devices testers
   Used on: webcam-tester, microphone-tester (and future T1 ports)
   Replaces inline style="margin-bottom:1rem" on stacked
   surface-card blocks (.form-grid, .tester-actions) per the
   no-inline-styles rule. See _admin/DEVICE-TESTER-POLISH.md.
============================================================ */
.tester-row-gap { margin-bottom: 1rem; }

/* ============================================================
   BBQ RUB & SAUCE MIXING RATIOS — tool-specific
   Used on: /cooking/grilling-smoking/bbq-rub-and-sauce-mixing-ratios.html
   Provides the per-spice + per-ingredient result tables inside
   the result-card, plus a generic .is-hidden helper scoped to
   tool result blocks so the "None" sauce option can hide its
   ingredient breakdown without affecting other widgets.
============================================================ */
.calc-result-block{
  margin-top:1.1rem;
  padding:0.9rem 1rem;
  background:var(--card-deep,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
}
.calc-result-block.is-hidden{ display:none; }
.calc-result-block__title{
  margin:0 0 0.55rem 0;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--text,#1f2937);
}
.calc-result-block__note{
  margin:0.6rem 0 0 0;
  font-size:0.83rem;
  line-height:1.5;
  color:var(--text-muted,#6b7280);
}
.calc-result-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.86rem;
  font-variant-numeric:tabular-nums;
}
.calc-result-table th,
.calc-result-table td{
  text-align:left;
  padding:0.36rem 0.45rem;
  border-bottom:1px solid var(--border, rgba(0,0,0,0.05));
}
.calc-result-table th{
  font-weight:600;
  color:var(--text,#1f2937);
  background:var(--card-deep, rgba(0,0,0,0.025));
}
.calc-result-table tbody tr:last-child td{ border-bottom:none; }
.calc-result-table td:nth-child(2),
.calc-result-table td:nth-child(3),
.calc-result-table th:nth-child(2),
.calc-result-table th:nth-child(3){ text-align:right; white-space:nowrap; }
.side-tip-body.is-hidden{ display:none; }

/* ==========================================================================
   Homepage compact search (hands off to /browse/?q=…)
   ========================================================================== */
.home-search {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.home-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}
.home-search-icon {
  position: absolute;
  left: 0.8rem;
  color: var(--text-muted);
  pointer-events: none;
}
.home-search-input {
  width: 100%;
  padding: 0.7rem 0.8rem 0.7rem 2.5rem;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}
.home-search-input::placeholder { color: var(--text-muted); }
.home-search-input:focus {
  outline: none;
  border-color: rgba(var(--hero-accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--hero-accent-rgb), 0.15);
}
.home-search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.7rem 1.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--soft);
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.home-search-btn:hover,
.home-search-btn:focus-visible {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  outline: none;
}
@media (max-width: 520px) {
  .home-search-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Sitewide filtered search (resource-filter.js)
   Sidebar facets + live results grid. Results reuse .index-card markup.
   ========================================================================== */
.rf-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* ---- sidebar ---- */
.rf-sidebar {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.25rem;
  background: var(--card-side);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.rf-sidebar-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rf-field { display: flex; flex-direction: column; gap: 0.4rem; }

.rf-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.rf-search { position: relative; display: flex; align-items: center; }

.rf-search-icon {
  position: absolute;
  left: 0.6rem;
  color: var(--text-muted);
  pointer-events: none;
}

.rf-search-input {
  width: 100%;
  padding: 0.55rem 0.6rem 0.55rem 2.1rem;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.rf-search-input::placeholder { color: var(--text-muted); }
.rf-search-input:focus {
  outline: none;
  border-color: rgba(var(--hero-accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--hero-accent-rgb), 0.15);
}

/* ---- popular toggle ---- */
.rf-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
.rf-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---- facets ---- */
.rf-facet {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.rf-facet-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rf-facet-list { display: flex; flex-direction: column; gap: 0.1rem; }

.rf-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.35rem;
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s ease;
}
.rf-check:hover { background: rgba(var(--hero-accent-rgb), 0.08); }
.rf-check input { accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }
.rf-check-name { flex: 1; min-width: 0; }
.rf-check-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.rf-clear {
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.rf-clear:hover { color: var(--text); border-color: rgba(var(--hero-accent-rgb), 0.4); }

/* ---- results ---- */
.rf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  min-height: 1.5rem;
}
.rf-count { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.rf-count strong { color: var(--text); }

.rf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}

/* Result card: extend .index-card with a format badge on the right.
   Only the TITLE reserves space for the absolute badge (so it never runs
   behind it); the description spans the card full width and wraps beneath the
   badge. Both title and description are line-clamped to keep cards uniform. */
.rf-card { position: relative; align-items: flex-start; }
.rf-card .index-card-icon { margin-top: 0.1rem; }

/* Title: clamp to 2 lines and keep a right gutter clear of the badge.
   Selectors carry body.topic so they beat the page-level
   `body.topic .index-card-body strong` rule (specificity + source order). */
.rf-card .index-card-body strong,
body.topic .rf-card .index-card-body strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 5rem;          /* clears TOOL/GUIDE badges */
}
.rf-card--printable .index-card-body strong,
body.topic .rf-card--printable .index-card-body strong {
  padding-right: 6rem;          /* the wider PRINTABLE badge */
}

/* Description: full width (wraps under the badge), clamped to 3 lines. */
.rf-card .index-card-body span,
body.topic .rf-card .index-card-body span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.rf-card mark {
  background: rgba(var(--hero-accent-rgb), 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.rf-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--card-deep);
}
.rf-badge--tool { color: #fb923c; border-color: rgba(251, 146, 60, 0.4); }
.rf-badge--guide { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); }
.rf-badge--printable { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }

.rf-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.rf-empty-title { margin: 0 0 0.25rem; font-weight: 700; color: var(--text); }
.rf-empty-sub { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* ---- responsive: sidebar stacks above results ---- */
@media (max-width: 760px) {
  .rf-layout { grid-template-columns: 1fr; gap: 1rem; }
  .rf-sidebar { position: static; }
  .rf-grid { grid-template-columns: 1fr; }
}