:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1b1f24;
  --muted: #5b6570;
  --border: #dde1e6;
  --accent: #2b5fd9;
  --highlight-bg: #eef3ff;
  --danger: #b23b3b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card-bg: #1d2126;
    --text: #e8eaed;
    --muted: #9aa4b2;
    --border: #2c3138;
    --accent: #6f9bff;
    --highlight-bg: #1f2a44;
    --danger: #e07a7a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.site-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

h1 { margin-top: 0; }

.subtitle { color: var(--muted); margin-top: -0.5rem; }

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.report-header .button-link { margin-top: 0; flex-shrink: 0; }

form label {
  display: block;
  margin-bottom: 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

form label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

form input[type="text"],
form input[type="number"],
form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

form label.checkbox input { width: auto; margin: 0; }

.contractor-notes-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

button, .button-link {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 0.5rem;
}

.alert {
  background: #fde8e8;
  color: #8a1f1f;
  border: 1px solid #f3b7b7;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.note { color: var(--muted); font-size: 0.9rem; }

.fun-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0 1.75rem;
}

.fun-fact-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fun-fact-tile .value { font-size: 1.05rem; font-weight: 700; }
.fun-fact-tile .label { font-size: 0.72rem; color: var(--muted); }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.hero-tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero-tile .value { font-size: 1.9rem; font-weight: 800; }
.hero-tile .label { font-size: 0.85rem; color: var(--muted); }
.hero-tile.primary { background: var(--highlight-bg); border-color: var(--accent); }
.hero-tile.primary .value { color: var(--accent); }

.tab-radio { position: absolute; opacity: 0; pointer-events: none; }

/* Unified control style — every selectable dimension (product, power,
   mount, rating, controller) renders as the same row: a fixed-width
   uppercase label, then a group of equal bordered buttons. Per Mitch
   (2026-08-05): pills read as inconsistent/hard to scan, and this also
   needs to print/PDF cleanly, so every option is always visible (no
   hover-only state) with the active one distinguished by border + fill,
   not color alone. */
.config-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.85rem 0;
}

.config-label {
  flex: 0 0 6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nested-row {
  display: none;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border);
}
input[data-hasbands="true"]:checked ~ #power-row { display: flex; }

/* Families with no real outdoor choice (e.g. Lattice — IP65 rated as
   standard, same SKU/price either way) keep Rating visible rather than
   hiding it, but force "Outdoor rated" to read as selected and disable
   "Indoor" so it's clear there's nothing to actually pick. */
input[data-hasoutdoor="false"]:checked ~ #outdoor-row label[for="outdoor-yes"] {
  color: var(--text);
  border-color: var(--accent);
  background: var(--highlight-bg);
  font-weight: 700;
}
input[data-hasoutdoor="false"]:checked ~ #outdoor-row label[for="outdoor-no"] {
  color: #5a6270;
  border-color: var(--border);
  background: transparent;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tab-label {
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}

.zones-input {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  width: 6rem;
}

/* Generic active-state for simple (non cross-gated) groups where the
   radio sits immediately before its own label — outdoor rating and
   controller. */
input.tab-radio:checked + label.tab-label {
  color: var(--text);
  border-color: var(--accent);
  background: var(--highlight-bg);
  font-weight: 700;
}

#power-high:checked ~ .config-row label[for="power-high"],
#power-med:checked ~ .config-row label[for="power-med"],
#power-low:checked ~ .config-row label[for="power-low"],
#family-lattice:checked ~ .config-row label[for="family-lattice"],
#family-flexiblesheet:checked ~ .config-row label[for="family-flexiblesheet"],
#family-edgelitpanel:checked ~ .config-row label[for="family-edgelitpanel"],
#tab-din:checked ~ .config-row label[for="tab-din"],
#tab-surface:checked ~ .config-row label[for="tab-surface"],
#color-lattice-2700:checked ~ .config-row label[for="color-lattice-2700"],
#color-lattice-3000:checked ~ .config-row label[for="color-lattice-3000"],
#color-lattice-3500:checked ~ .config-row label[for="color-lattice-3500"],
#color-lattice-4000:checked ~ .config-row label[for="color-lattice-4000"],
#color-lattice-5000:checked ~ .config-row label[for="color-lattice-5000"],
#color-flexiblesheet-3000:checked ~ .config-row label[for="color-flexiblesheet-3000"],
#color-flexiblesheet-4100:checked ~ .config-row label[for="color-flexiblesheet-4100"],
#color-flexiblesheet-5300:checked ~ .config-row label[for="color-flexiblesheet-5300"],
#color-flexiblesheet-6500:checked ~ .config-row label[for="color-flexiblesheet-6500"],
#color-edgelitpanel-2700:checked ~ .config-row label[for="color-edgelitpanel-2700"],
#color-edgelitpanel-3000:checked ~ .config-row label[for="color-edgelitpanel-3000"],
#color-edgelitpanel-3500:checked ~ .config-row label[for="color-edgelitpanel-3500"],
#color-edgelitpanel-4100:checked ~ .config-row label[for="color-edgelitpanel-4100"],
#color-edgelitpanel-5300:checked ~ .config-row label[for="color-edgelitpanel-5300"],
#color-edgelitpanel-6500:checked ~ .config-row label[for="color-edgelitpanel-6500"] {
  color: var(--text);
  border-color: var(--accent);
  background: var(--highlight-bg);
  font-weight: 700;
}

/* Three independent toggle dimensions — power band, product family, mount
   path — each a flat radio group at the top of the card, so chained
   general-sibling combinators (~) can gate any combination as long as
   every gated element is a flat sibling of the radios (no wrapper divs).
   Family slugs are the two current PRODUCT_FAMILIES ("Lattice" ->
   "lattice", "Flexible Sheet" -> "flexiblesheet") — add a new family's
   slug here when one is added in calc.py. */

/* fun-facts: gated by power + family (2-way). Explicit display value (not
   `revert`) since it needs grid layout. Mount nav chrome and
   product/power selector chrome are hoisted out of this loop entirely
   (same 2 shared radios regardless of which band/family panel is
   active). LED Product/Wire/Conduit/Enclosure all live inside
   .mount-panel (LED Product is duplicated per mount path so it can sit
   above that path's own equipment list — see report.html), so the 3-way
   mount-panel gating below already covers them; they don't need their
   own 2-way rules here. */
#fun-facts-high-lattice-2700,
#fun-facts-high-lattice-3000,
#fun-facts-high-lattice-3500,
#fun-facts-high-lattice-4000,
#fun-facts-high-lattice-5000,
#fun-facts-high-lattice-nocolor,
#fun-facts-high-flexiblesheet-3000,
#fun-facts-high-flexiblesheet-4100,
#fun-facts-high-flexiblesheet-5300,
#fun-facts-high-flexiblesheet-6500,
#fun-facts-high-flexiblesheet-nocolor,
#fun-facts-med-lattice-2700,
#fun-facts-med-lattice-3000,
#fun-facts-med-lattice-3500,
#fun-facts-med-lattice-4000,
#fun-facts-med-lattice-5000,
#fun-facts-med-lattice-nocolor,
#fun-facts-med-flexiblesheet-3000,
#fun-facts-med-flexiblesheet-4100,
#fun-facts-med-flexiblesheet-5300,
#fun-facts-med-flexiblesheet-6500,
#fun-facts-med-flexiblesheet-nocolor,
#fun-facts-low-lattice-2700,
#fun-facts-low-lattice-3000,
#fun-facts-low-lattice-3500,
#fun-facts-low-lattice-4000,
#fun-facts-low-lattice-5000,
#fun-facts-low-lattice-nocolor,
#fun-facts-low-flexiblesheet-3000,
#fun-facts-low-flexiblesheet-4100,
#fun-facts-low-flexiblesheet-5300,
#fun-facts-low-flexiblesheet-6500,
#fun-facts-low-flexiblesheet-nocolor,
#fun-facts-high-edgelitpanel-nocolor,
#fun-facts-high-edgelitpanel-2700,
#fun-facts-high-edgelitpanel-3000,
#fun-facts-high-edgelitpanel-3500,
#fun-facts-high-edgelitpanel-4100,
#fun-facts-high-edgelitpanel-5300,
#fun-facts-high-edgelitpanel-6500,
#fun-facts-med-edgelitpanel-nocolor,
#fun-facts-med-edgelitpanel-2700,
#fun-facts-med-edgelitpanel-3000,
#fun-facts-med-edgelitpanel-3500,
#fun-facts-med-edgelitpanel-4100,
#fun-facts-med-edgelitpanel-5300,
#fun-facts-med-edgelitpanel-6500,
#fun-facts-low-edgelitpanel-nocolor,
#fun-facts-low-edgelitpanel-2700,
#fun-facts-low-edgelitpanel-3000,
#fun-facts-low-edgelitpanel-3500,
#fun-facts-low-edgelitpanel-4100,
#fun-facts-low-edgelitpanel-5300,
#fun-facts-low-edgelitpanel-6500 {
  display: none;
}

#power-high:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #fun-facts-high-lattice-2700 { display: grid; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #fun-facts-high-lattice-3000 { display: grid; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #fun-facts-high-lattice-3500 { display: grid; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #fun-facts-high-lattice-4000 { display: grid; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #fun-facts-high-lattice-5000 { display: grid; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #fun-facts-high-lattice-nocolor { display: grid; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #fun-facts-high-flexiblesheet-3000 { display: grid; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #fun-facts-high-flexiblesheet-4100 { display: grid; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #fun-facts-high-flexiblesheet-5300 { display: grid; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #fun-facts-high-flexiblesheet-6500 { display: grid; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #fun-facts-high-flexiblesheet-nocolor { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #fun-facts-high-edgelitpanel-nocolor { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #fun-facts-high-edgelitpanel-2700 { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #fun-facts-high-edgelitpanel-3000 { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #fun-facts-high-edgelitpanel-3500 { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #fun-facts-high-edgelitpanel-4100 { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #fun-facts-high-edgelitpanel-5300 { display: grid; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #fun-facts-high-edgelitpanel-6500 { display: grid; }

#power-med:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #fun-facts-med-lattice-2700 { display: grid; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #fun-facts-med-lattice-3000 { display: grid; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #fun-facts-med-lattice-3500 { display: grid; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #fun-facts-med-lattice-4000 { display: grid; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #fun-facts-med-lattice-5000 { display: grid; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #fun-facts-med-lattice-nocolor { display: grid; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #fun-facts-med-flexiblesheet-3000 { display: grid; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #fun-facts-med-flexiblesheet-4100 { display: grid; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #fun-facts-med-flexiblesheet-5300 { display: grid; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #fun-facts-med-flexiblesheet-6500 { display: grid; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #fun-facts-med-flexiblesheet-nocolor { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #fun-facts-med-edgelitpanel-nocolor { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #fun-facts-med-edgelitpanel-2700 { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #fun-facts-med-edgelitpanel-3000 { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #fun-facts-med-edgelitpanel-3500 { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #fun-facts-med-edgelitpanel-4100 { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #fun-facts-med-edgelitpanel-5300 { display: grid; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #fun-facts-med-edgelitpanel-6500 { display: grid; }

#power-low:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #fun-facts-low-lattice-2700 { display: grid; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #fun-facts-low-lattice-3000 { display: grid; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #fun-facts-low-lattice-3500 { display: grid; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #fun-facts-low-lattice-4000 { display: grid; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #fun-facts-low-lattice-5000 { display: grid; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #fun-facts-low-lattice-nocolor { display: grid; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #fun-facts-low-flexiblesheet-3000 { display: grid; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #fun-facts-low-flexiblesheet-4100 { display: grid; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #fun-facts-low-flexiblesheet-5300 { display: grid; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #fun-facts-low-flexiblesheet-6500 { display: grid; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #fun-facts-low-flexiblesheet-nocolor { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #fun-facts-low-edgelitpanel-nocolor { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #fun-facts-low-edgelitpanel-2700 { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #fun-facts-low-edgelitpanel-3000 { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #fun-facts-low-edgelitpanel-3500 { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #fun-facts-low-edgelitpanel-4100 { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #fun-facts-low-edgelitpanel-5300 { display: grid; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #fun-facts-low-edgelitpanel-6500 { display: grid; }

/* Color config-row is per-family (its own radio group + label set), only
   rendered by report.html when that family has >1 color-temp SKU. Visible
   only while that family's tab is active. */
#family-lattice:checked ~ #color-row-lattice { display: flex; }
#family-flexiblesheet:checked ~ #color-row-flexiblesheet { display: flex; }
#family-edgelitpanel:checked ~ #color-row-edgelitpanel { display: flex; }

/* Mount panels need power + family + color + mount all checked (4-way
   chain). Color slugs are literal color-temp values (see
   _color_temp_options in calc.py) plus "nocolor", the implicit single
   option for types with no color choice (Tunable, RGBW) — extend this
   list if the catalog grows more color-temp SKUs. */
.mount-panel { display: none; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-din:checked ~ #panel-high-lattice-2700-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-surface:checked ~ #panel-high-lattice-2700-surface { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-din:checked ~ #panel-high-lattice-3000-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-surface:checked ~ #panel-high-lattice-3000-surface { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-din:checked ~ #panel-high-lattice-3500-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-surface:checked ~ #panel-high-lattice-3500-surface { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-din:checked ~ #panel-high-lattice-4000-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-surface:checked ~ #panel-high-lattice-4000-surface { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-din:checked ~ #panel-high-lattice-5000-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-surface:checked ~ #panel-high-lattice-5000-surface { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-din:checked ~ #panel-high-lattice-nocolor-din { display: block; }
#power-high:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-surface:checked ~ #panel-high-lattice-nocolor-surface { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-din:checked ~ #panel-high-flexiblesheet-3000-din { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-surface:checked ~ #panel-high-flexiblesheet-3000-surface { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-din:checked ~ #panel-high-flexiblesheet-4100-din { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-surface:checked ~ #panel-high-flexiblesheet-4100-surface { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-din:checked ~ #panel-high-flexiblesheet-5300-din { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-surface:checked ~ #panel-high-flexiblesheet-5300-surface { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-din:checked ~ #panel-high-flexiblesheet-6500-din { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-surface:checked ~ #panel-high-flexiblesheet-6500-surface { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-din:checked ~ #panel-high-flexiblesheet-nocolor-din { display: block; }
#power-high:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-surface:checked ~ #panel-high-flexiblesheet-nocolor-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-nocolor-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-nocolor-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-2700-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-2700-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-3000-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-3000-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-3500-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-3500-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-4100-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-4100-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-5300-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-5300-surface { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-din:checked ~ #panel-high-edgelitpanel-6500-din { display: block; }
#power-high:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-surface:checked ~ #panel-high-edgelitpanel-6500-surface { display: block; }

#power-med:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-din:checked ~ #panel-med-lattice-2700-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-surface:checked ~ #panel-med-lattice-2700-surface { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-din:checked ~ #panel-med-lattice-3000-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-surface:checked ~ #panel-med-lattice-3000-surface { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-din:checked ~ #panel-med-lattice-3500-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-surface:checked ~ #panel-med-lattice-3500-surface { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-din:checked ~ #panel-med-lattice-4000-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-surface:checked ~ #panel-med-lattice-4000-surface { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-din:checked ~ #panel-med-lattice-5000-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-surface:checked ~ #panel-med-lattice-5000-surface { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-din:checked ~ #panel-med-lattice-nocolor-din { display: block; }
#power-med:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-surface:checked ~ #panel-med-lattice-nocolor-surface { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-din:checked ~ #panel-med-flexiblesheet-3000-din { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-surface:checked ~ #panel-med-flexiblesheet-3000-surface { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-din:checked ~ #panel-med-flexiblesheet-4100-din { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-surface:checked ~ #panel-med-flexiblesheet-4100-surface { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-din:checked ~ #panel-med-flexiblesheet-5300-din { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-surface:checked ~ #panel-med-flexiblesheet-5300-surface { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-din:checked ~ #panel-med-flexiblesheet-6500-din { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-surface:checked ~ #panel-med-flexiblesheet-6500-surface { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-din:checked ~ #panel-med-flexiblesheet-nocolor-din { display: block; }
#power-med:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-surface:checked ~ #panel-med-flexiblesheet-nocolor-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-nocolor-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-nocolor-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-2700-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-2700-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-3000-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-3000-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-3500-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-3500-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-4100-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-4100-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-5300-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-5300-surface { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-din:checked ~ #panel-med-edgelitpanel-6500-din { display: block; }
#power-med:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-surface:checked ~ #panel-med-edgelitpanel-6500-surface { display: block; }

#power-low:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-din:checked ~ #panel-low-lattice-2700-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-2700:checked ~ #tab-surface:checked ~ #panel-low-lattice-2700-surface { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-din:checked ~ #panel-low-lattice-3000-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3000:checked ~ #tab-surface:checked ~ #panel-low-lattice-3000-surface { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-din:checked ~ #panel-low-lattice-3500-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-3500:checked ~ #tab-surface:checked ~ #panel-low-lattice-3500-surface { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-din:checked ~ #panel-low-lattice-4000-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-4000:checked ~ #tab-surface:checked ~ #panel-low-lattice-4000-surface { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-din:checked ~ #panel-low-lattice-5000-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-5000:checked ~ #tab-surface:checked ~ #panel-low-lattice-5000-surface { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-din:checked ~ #panel-low-lattice-nocolor-din { display: block; }
#power-low:checked ~ #family-lattice:checked ~ #color-lattice-nocolor:checked ~ #tab-surface:checked ~ #panel-low-lattice-nocolor-surface { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-din:checked ~ #panel-low-flexiblesheet-3000-din { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-3000:checked ~ #tab-surface:checked ~ #panel-low-flexiblesheet-3000-surface { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-din:checked ~ #panel-low-flexiblesheet-4100-din { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-4100:checked ~ #tab-surface:checked ~ #panel-low-flexiblesheet-4100-surface { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-din:checked ~ #panel-low-flexiblesheet-5300-din { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-5300:checked ~ #tab-surface:checked ~ #panel-low-flexiblesheet-5300-surface { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-din:checked ~ #panel-low-flexiblesheet-6500-din { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-6500:checked ~ #tab-surface:checked ~ #panel-low-flexiblesheet-6500-surface { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-din:checked ~ #panel-low-flexiblesheet-nocolor-din { display: block; }
#power-low:checked ~ #family-flexiblesheet:checked ~ #color-flexiblesheet-nocolor:checked ~ #tab-surface:checked ~ #panel-low-flexiblesheet-nocolor-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-nocolor-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-nocolor:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-nocolor-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-2700-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-2700:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-2700-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-3000-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3000:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-3000-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-3500-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-3500:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-3500-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-4100-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-4100:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-4100-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-5300-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-5300:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-5300-surface { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-din:checked ~ #panel-low-edgelitpanel-6500-din { display: block; }
#power-low:checked ~ #family-edgelitpanel:checked ~ #color-edgelitpanel-6500:checked ~ #tab-surface:checked ~ #panel-low-edgelitpanel-6500-surface { display: block; }

section { margin-top: 2rem; }
section h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }

/* Conduit size selector — self-contained per band/family section, matched
   by position (nth-of-type) rather than unique IDs per combination, so the
   same 6 rules work for every band/family's conduit block without needing
   per-combination CSS. Radios are flat children of the <section> (required
   for the ~ combinator to reach the label group and the qty group, both
   later siblings within that same section). */
.conduit-qty-group { margin: 0.75rem 0; }
.conduit-qty-group p.conduit-note { display: none; margin: 0; }
.conduit-fill-group { margin-top: 0.4rem; }
.conduit-fill-group span { display: none; }

.conduit-size-radio:nth-of-type(1):checked ~ .config-row .tabs-nav label:nth-of-type(1),
.conduit-size-radio:nth-of-type(2):checked ~ .config-row .tabs-nav label:nth-of-type(2),
.conduit-size-radio:nth-of-type(3):checked ~ .config-row .tabs-nav label:nth-of-type(3),
.conduit-size-radio:nth-of-type(4):checked ~ .config-row .tabs-nav label:nth-of-type(4),
.conduit-size-radio:nth-of-type(5):checked ~ .config-row .tabs-nav label:nth-of-type(5),
.conduit-size-radio:nth-of-type(6):checked ~ .config-row .tabs-nav label:nth-of-type(6) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--highlight-bg);
  font-weight: 700;
}

.conduit-size-radio:nth-of-type(1):checked ~ .conduit-qty-group p:nth-of-type(1),
.conduit-size-radio:nth-of-type(2):checked ~ .conduit-qty-group p:nth-of-type(2),
.conduit-size-radio:nth-of-type(3):checked ~ .conduit-qty-group p:nth-of-type(3),
.conduit-size-radio:nth-of-type(4):checked ~ .conduit-qty-group p:nth-of-type(4),
.conduit-size-radio:nth-of-type(5):checked ~ .conduit-qty-group p:nth-of-type(5),
.conduit-size-radio:nth-of-type(6):checked ~ .conduit-qty-group p:nth-of-type(6) {
  display: block;
}

.conduit-size-radio:nth-of-type(1):checked ~ .conduit-fill-group span:nth-of-type(1),
.conduit-size-radio:nth-of-type(2):checked ~ .conduit-fill-group span:nth-of-type(2),
.conduit-size-radio:nth-of-type(3):checked ~ .conduit-fill-group span:nth-of-type(3),
.conduit-size-radio:nth-of-type(4):checked ~ .conduit-fill-group span:nth-of-type(4),
.conduit-size-radio:nth-of-type(5):checked ~ .conduit-fill-group span:nth-of-type(5),
.conduit-size-radio:nth-of-type(6):checked ~ .conduit-fill-group span:nth-of-type(6) {
  display: inline-block;
}

/* Enclosure size selector — same self-contained nth-of-type pattern as
   conduit above, just with its own class names so the two independent
   selectors (both can appear in the same mount panel) don't cross-match
   each other. Enclosure options come from the catalog (19 distinct
   footprints total; DIN's 8" min depth only matches a subset, Surface's
   shallower 4" min depth can match all 19) — extend past nth-of-type(19)
   here if the catalog ever grows more distinct footprints. */
.enclosure-qty-group { margin-top: 0.75rem; }
.enclosure-qty-group p { display: none; margin: 0; }

.enclosure-size-radio:nth-of-type(1):checked ~ .config-row .tabs-nav label:nth-of-type(1),
.enclosure-size-radio:nth-of-type(2):checked ~ .config-row .tabs-nav label:nth-of-type(2),
.enclosure-size-radio:nth-of-type(3):checked ~ .config-row .tabs-nav label:nth-of-type(3),
.enclosure-size-radio:nth-of-type(4):checked ~ .config-row .tabs-nav label:nth-of-type(4),
.enclosure-size-radio:nth-of-type(5):checked ~ .config-row .tabs-nav label:nth-of-type(5),
.enclosure-size-radio:nth-of-type(6):checked ~ .config-row .tabs-nav label:nth-of-type(6),
.enclosure-size-radio:nth-of-type(7):checked ~ .config-row .tabs-nav label:nth-of-type(7),
.enclosure-size-radio:nth-of-type(8):checked ~ .config-row .tabs-nav label:nth-of-type(8),
.enclosure-size-radio:nth-of-type(9):checked ~ .config-row .tabs-nav label:nth-of-type(9),
.enclosure-size-radio:nth-of-type(10):checked ~ .config-row .tabs-nav label:nth-of-type(10),
.enclosure-size-radio:nth-of-type(11):checked ~ .config-row .tabs-nav label:nth-of-type(11),
.enclosure-size-radio:nth-of-type(12):checked ~ .config-row .tabs-nav label:nth-of-type(12),
.enclosure-size-radio:nth-of-type(13):checked ~ .config-row .tabs-nav label:nth-of-type(13),
.enclosure-size-radio:nth-of-type(14):checked ~ .config-row .tabs-nav label:nth-of-type(14),
.enclosure-size-radio:nth-of-type(15):checked ~ .config-row .tabs-nav label:nth-of-type(15),
.enclosure-size-radio:nth-of-type(16):checked ~ .config-row .tabs-nav label:nth-of-type(16),
.enclosure-size-radio:nth-of-type(17):checked ~ .config-row .tabs-nav label:nth-of-type(17),
.enclosure-size-radio:nth-of-type(18):checked ~ .config-row .tabs-nav label:nth-of-type(18),
.enclosure-size-radio:nth-of-type(19):checked ~ .config-row .tabs-nav label:nth-of-type(19) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--highlight-bg);
  font-weight: 700;
}

.enclosure-size-radio:nth-of-type(1):checked ~ .enclosure-qty-group p:nth-of-type(1),
.enclosure-size-radio:nth-of-type(2):checked ~ .enclosure-qty-group p:nth-of-type(2),
.enclosure-size-radio:nth-of-type(3):checked ~ .enclosure-qty-group p:nth-of-type(3),
.enclosure-size-radio:nth-of-type(4):checked ~ .enclosure-qty-group p:nth-of-type(4),
.enclosure-size-radio:nth-of-type(5):checked ~ .enclosure-qty-group p:nth-of-type(5),
.enclosure-size-radio:nth-of-type(6):checked ~ .enclosure-qty-group p:nth-of-type(6),
.enclosure-size-radio:nth-of-type(7):checked ~ .enclosure-qty-group p:nth-of-type(7),
.enclosure-size-radio:nth-of-type(8):checked ~ .enclosure-qty-group p:nth-of-type(8),
.enclosure-size-radio:nth-of-type(9):checked ~ .enclosure-qty-group p:nth-of-type(9),
.enclosure-size-radio:nth-of-type(10):checked ~ .enclosure-qty-group p:nth-of-type(10),
.enclosure-size-radio:nth-of-type(11):checked ~ .enclosure-qty-group p:nth-of-type(11),
.enclosure-size-radio:nth-of-type(12):checked ~ .enclosure-qty-group p:nth-of-type(12),
.enclosure-size-radio:nth-of-type(13):checked ~ .enclosure-qty-group p:nth-of-type(13),
.enclosure-size-radio:nth-of-type(14):checked ~ .enclosure-qty-group p:nth-of-type(14),
.enclosure-size-radio:nth-of-type(15):checked ~ .enclosure-qty-group p:nth-of-type(15),
.enclosure-size-radio:nth-of-type(16):checked ~ .enclosure-qty-group p:nth-of-type(16),
.enclosure-size-radio:nth-of-type(17):checked ~ .enclosure-qty-group p:nth-of-type(17),
.enclosure-size-radio:nth-of-type(18):checked ~ .enclosure-qty-group p:nth-of-type(18),
.enclosure-size-radio:nth-of-type(19):checked ~ .enclosure-qty-group p:nth-of-type(19) {
  display: block;
}

.enclosure-fill-group { margin-top: 0.4rem; }
.enclosure-fill-group span { display: none; }

.enclosure-size-radio:nth-of-type(1):checked ~ .enclosure-fill-group span:nth-of-type(1),
.enclosure-size-radio:nth-of-type(2):checked ~ .enclosure-fill-group span:nth-of-type(2),
.enclosure-size-radio:nth-of-type(3):checked ~ .enclosure-fill-group span:nth-of-type(3),
.enclosure-size-radio:nth-of-type(4):checked ~ .enclosure-fill-group span:nth-of-type(4),
.enclosure-size-radio:nth-of-type(5):checked ~ .enclosure-fill-group span:nth-of-type(5),
.enclosure-size-radio:nth-of-type(6):checked ~ .enclosure-fill-group span:nth-of-type(6),
.enclosure-size-radio:nth-of-type(7):checked ~ .enclosure-fill-group span:nth-of-type(7),
.enclosure-size-radio:nth-of-type(8):checked ~ .enclosure-fill-group span:nth-of-type(8),
.enclosure-size-radio:nth-of-type(9):checked ~ .enclosure-fill-group span:nth-of-type(9),
.enclosure-size-radio:nth-of-type(10):checked ~ .enclosure-fill-group span:nth-of-type(10),
.enclosure-size-radio:nth-of-type(11):checked ~ .enclosure-fill-group span:nth-of-type(11),
.enclosure-size-radio:nth-of-type(12):checked ~ .enclosure-fill-group span:nth-of-type(12),
.enclosure-size-radio:nth-of-type(13):checked ~ .enclosure-fill-group span:nth-of-type(13),
.enclosure-size-radio:nth-of-type(14):checked ~ .enclosure-fill-group span:nth-of-type(14),
.enclosure-size-radio:nth-of-type(15):checked ~ .enclosure-fill-group span:nth-of-type(15),
.enclosure-size-radio:nth-of-type(16):checked ~ .enclosure-fill-group span:nth-of-type(16),
.enclosure-size-radio:nth-of-type(17):checked ~ .enclosure-fill-group span:nth-of-type(17),
.enclosure-size-radio:nth-of-type(18):checked ~ .enclosure-fill-group span:nth-of-type(18),
.enclosure-size-radio:nth-of-type(19):checked ~ .enclosure-fill-group span:nth-of-type(19) {
  display: inline-block;
}

table.line-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.line-items th, table.line-items td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

table.line-items th.num, table.line-items td.num { text-align: right; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.1rem;
}

.budget-range {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.75rem 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--highlight-bg);
}

.budget-figure {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
}

.budget-note {
  font-size: 0.78rem;
  color: var(--muted);
}

.conduit-note {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.disclaimer {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
}

.form-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-header-row h1 { margin-bottom: 0; }

.link {
  color: var(--accent);
  font-size: 0.9rem;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.optional { font-weight: 400; color: var(--muted); font-size: 0.8rem; }

.danger-link {
  background: none;
  border: none;
  color: var(--danger);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.estimates-table td, .estimates-table th { white-space: nowrap; }

/* Small screens — config-rows (Rating/Product/Color/Power/Mount/size
   pickers) are a flex row with a fixed-width label, which on a narrow
   viewport squeezes .tabs-nav down to almost no width and forces every
   button onto its own line — a long single-file column with the label
   vertically centered beside it (worst on Enclosure, which can have up
   to 19 size options). Stacking the label above a full-width tabs-nav
   lets buttons wrap into a normal multi-per-row grid instead. */
@media (max-width: 640px) {
  main { padding: 1rem; }
  .card { padding: 1.25rem; }

  .config-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .config-label { flex: none; }
  .nested-row { margin-left: 0.5rem; padding-left: 0.75rem; }

  .report-header { flex-direction: column; align-items: flex-start; }
}

/* Print / save-as-PDF — per Mitch, these reports get printed/saved as
   part of the workflow. Force a light, high-contrast page regardless of
   the viewer's OS theme (a dark-mode PDF wastes toner and reads poorly),
   drop anything that only makes sense on-screen (the New Estimate link,
   card border/shadow chrome), and keep tables/tiles from splitting
   across a page break mid-row. */
@media print {
  body { background: #fff; color: #111; }
  .site-header { display: none; }
  main { max-width: none; padding: 0; }
  .card {
    border: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
  }
  .no-print { display: none; }
  .budget-range { background: #fff; border: 1px solid #999; }
  .budget-figure { color: #111; }
  .tab-label { border-color: #999; color: #333; }
  input.tab-radio:checked + label.tab-label,
  #power-high:checked ~ .config-row label[for="power-high"],
  #power-med:checked ~ .config-row label[for="power-med"],
  #power-low:checked ~ .config-row label[for="power-low"],
  #family-lattice:checked ~ .config-row label[for="family-lattice"],
  #family-flexiblesheet:checked ~ .config-row label[for="family-flexiblesheet"],
  #family-edgelitpanel:checked ~ .config-row label[for="family-edgelitpanel"],
  #tab-din:checked ~ .config-row label[for="tab-din"],
  #tab-surface:checked ~ .config-row label[for="tab-surface"],
  input[data-hasoutdoor="false"]:checked ~ #outdoor-row label[for="outdoor-yes"] {
    background: #eee;
    border-color: #111;
    color: #111;
  }
  input[data-hasoutdoor="false"]:checked ~ #outdoor-row label[for="outdoor-no"] {
    color: #999;
  }
  .conduit-size-radio:nth-of-type(1):checked ~ .config-row .tabs-nav label:nth-of-type(1),
  .conduit-size-radio:nth-of-type(2):checked ~ .config-row .tabs-nav label:nth-of-type(2),
  .conduit-size-radio:nth-of-type(3):checked ~ .config-row .tabs-nav label:nth-of-type(3),
  .conduit-size-radio:nth-of-type(4):checked ~ .config-row .tabs-nav label:nth-of-type(4),
  .conduit-size-radio:nth-of-type(5):checked ~ .config-row .tabs-nav label:nth-of-type(5),
  .conduit-size-radio:nth-of-type(6):checked ~ .config-row .tabs-nav label:nth-of-type(6) {
    background: #eee;
    border-color: #111;
    color: #111;
  }
  .hero-tile.primary { background: #eee; border-color: #111; }
  .hero-tile.primary .value { color: #111; }
  .fun-fact-tile, .hero-tile, table.line-items, section {
    break-inside: avoid;
  }
}