/* ============================================================================
   Burton v8 — Category Hub components
   ----------------------------------------------------------------------------
   Styles for /acoustic-panels/ and future per-category hubs (category-{slug}.php
   templates). These complement the shared hub.css (hero + picks + page-section
   patterns) with category-specific layouts:

     - stage-columns    → 2-col layout (primary reads + comparison aside)
     - stage-entry      → numbered editorial row (stages 1, 4)
     - spec-grid        → anatomy cards (stage 2)
     - quantity-stack   → reads + embedded calculator (stage 3)
     - placement-stack  → reads + Placement Planner CTA (stage 4)
     - room-grid        → use-case router (stage 5)
     - picks-stack      → buying-guide rows (stage 6)
     - install-grid     → install/maintain tasks (stage 7)
     - library          → full filterable index of every article
     - next-topics      → sister-category CTAs

   Also includes the simple acoustic-panel calculator styles (self-contained so
   the _preview renders identically to WP without needing style.css).
   ========================================================================= */

/* ── Stage columns (Stage 1: primary reads + comparison aside) ──────────── */

.stage-columns {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .stage-columns {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }
}

.stage-columns__primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Stage entry (numbered editorial row, used in stages 1 + 4) ─────────── */

.stage-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-6) var(--space-4) var(--space-6) 0;
  border-top: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-base) var(--ease-out),
              padding-left var(--duration-base) var(--ease-out);
}

.stage-entry:first-child {
  border-top: 0;
  padding-top: var(--space-2);
}

.stage-entry:hover,
.stage-entry:focus-visible {
  background: var(--color-surface-2);
  padding-left: var(--space-4);
}

.stage-entry__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  min-width: 2.5ch;
}

.stage-entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stage-entry__q {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
}

.stage-entry__gist {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  max-width: 60ch;
}

/* ── Stage aside column (Stage 1: hosts the decision module) ─────────── */
/* The aside column itself is a plain positioning slot — no border, no fill.
   Its child .decision-module carries its own tinted background, so we don't
   want any hairline rules competing with it on either axis.                  */

.stage-columns__aside {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ── Decision module (Stage 1 aside: "wrong tool?" callout) ───────────── */
/* A single tinted callout that sits opposite the editorial learning ladder.
   Three "if X, you need Y" prompts in a deliberately different register
   (serif italic symptoms + sans-bold verdicts) so the reader immediately
   understands this is disambiguation, not continued editorial content.
   An overflow link at the bottom jumps to the filterable library for the
   other 7 comparisons.                                                        */

.decision-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  position: sticky;
  top: var(--space-10);
}

@media (max-width: 899px) {
  .decision-module {
    position: static;
    padding: var(--space-5);
  }
}

.decision-module__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.decision-module__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
}

.decision-module__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent-hover);
}

.decision-module__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.decision-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  transition: padding-left var(--duration-base) var(--ease-out);
}

.decision-prompt:first-child {
  border-top: 0;
  padding-top: var(--space-2);
}

.decision-prompt:hover,
.decision-prompt:focus-visible {
  padding-left: var(--space-3);
}

/* Symptom leads the eye — bigger serif italic, primary ink. This is what the
   reader scans to self-identify ("is this me?") before reading the verdict. */
.decision-prompt__symptom {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

/* Verdict is the supporting answer — smaller, muted, regular sans. The tool
   name inside stays prominent via the accent underline below.                 */
.decision-prompt__verdict {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  letter-spacing: 0;
}

.decision-prompt__tool {
  font-weight: var(--fw-bold);
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.decision-prompt__read {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.decision-prompt:hover .decision-prompt__read,
.decision-prompt:focus-visible .decision-prompt__read {
  opacity: 1;
  transform: translateX(0);
}

.decision-module__overflow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  text-decoration: none;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  transition: color var(--duration-base) var(--ease-out),
              padding-left var(--duration-base) var(--ease-out);
}

.decision-module__overflow:hover,
.decision-module__overflow:focus-visible {
  color: var(--color-ink);
  padding-left: var(--space-2);
}

/* ── Decision module: shape variant (foam Stage 3) ────────────────────────
   Reuses the decision-module shell (tinted background, sticky on desktop,
   eyebrow + title lockup) but swaps the list of symptom/verdict prompts
   for a set of short, informational cards describing the four foam shapes.
   Shape cards are non-interactive — they summarise a choice rather than
   link out. The Stage 3 primary-reads column handles the navigation. */

.decision-module--shapes {
  gap: var(--space-4);
}

.shape-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shape-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.shape-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.shape-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.shape-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.shape-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}

.shape-card__body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0;
}

.shape-card__best {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0;
}

.shape-card__best strong {
  font-weight: var(--fw-semibold);
  color: var(--color-accent-hover);
  margin-right: var(--space-1);
}

/* Note-style planner CTA (foam Stage 4 — no interactive planner, just a
   reminder that placement is half the battle). Inherits the planner-cta
   shell, softens the launch button so it reads as a next-read rather than
   a tool launch. */
.planner-cta--note .planner-cta__launch {
  background: transparent;
  color: var(--color-accent-hover);
  border: 1px solid currentColor;
}

.planner-cta--note .planner-cta__launch:hover,
.planner-cta--note .planner-cta__launch:focus-visible {
  background: var(--color-accent-hover);
  color: var(--color-bg);
}

/* ── Spec grid (Stage 2: anatomy — editorial entries, no boxes) ─────────── */
/* 8 spec entries laid out as a 2-column editorial index. Each entry is a
   hairline-ruled row with a monospace tag, a bold spec heading, muted body,
   and a CTA lockup. No backgrounds, no borders around each card.            */

.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 780px) {
  .spec-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
  }
}

.spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: padding-left var(--duration-base) var(--ease-out);
}

.spec-card:hover,
.spec-card:focus-visible {
  transform: none;
  border-color: var(--color-line);
  box-shadow: none;
  padding-left: var(--space-4);
}

.spec-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.spec-card__spec {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0;
}

.spec-card__body {
  flex: 1;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  margin: 0;
}

.spec-card__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.spec-card:hover .spec-card__cta,
.spec-card:focus-visible .spec-card__cta {
  color: var(--color-accent);
}

/* ── Quantity stack (Stage 3: reads + calculator) ───────────────────────── */

.quantity-stack {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 1000px) {
  .quantity-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.quantity-stack__reads {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Editorial numbered rows — no boxes, hairline rules between entries.     */
.quantity-read {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-6) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: padding-left var(--duration-base) var(--ease-out);
}

.quantity-read:first-child { border-top: 0; padding-top: var(--space-2); }

.quantity-read:hover,
.quantity-read:focus-visible {
  transform: none;
  border-color: var(--color-line);
  padding-left: var(--space-4);
}

/* Primary read — typographic emphasis via accent bar, not a dark box. */
.quantity-read--primary {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
  color: inherit;
}

.quantity-read--primary + .quantity-read { border-top: 1px solid var(--color-line); }

.quantity-read--primary .quantity-read__q { color: var(--color-ink); }
.quantity-read--primary .quantity-read__gist { color: var(--color-ink-muted); }
.quantity-read--primary .quantity-read__num { color: var(--color-accent); }

.quantity-read--primary:hover,
.quantity-read--primary:focus-visible {
  border-color: var(--color-accent);
  padding-left: var(--space-6);
}

.quantity-read__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  min-width: 2.5ch;
}

.quantity-read__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quantity-read__q {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
}

.quantity-read__gist {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

/* Calculator frame that wraps the shortcode output.
   Minimal structural frame — hairline only, no shadow. The calculator is a
   functional tool (inputs need visual containment) but the frame should not
   compete with the editorial stages around it.                               */

.quantity-calc-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
}

.quantity-calc-frame__banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.quantity-calc-frame__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.quantity-calc-frame__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.quantity-calc-frame__hint {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

/* Kill margins on the calculator shortcode so it fits flush inside the frame */
.quantity-calc-frame .acoustic-calc-simple {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-surface);
}

/* Hide the shortcode's own header when wrapped in our frame (our banner replaces it) */
.quantity-calc-frame .acoustic-calc-simple .calc-simple-header,
.quantity-calc-frame .acoustic-calc-simple .calc-simple-footer {
  display: none;
}

/* ── Placement stack (Stage 4: reads + planner CTA) ─────────────────────── */

.placement-stack {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 1000px) {
  .placement-stack {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.placement-stack__reads {
  display: flex;
  flex-direction: column;
}

.placement-stack__planner {
  position: sticky;
  top: var(--space-12);
}

@media (max-width: 999px) {
  .placement-stack__planner {
    position: static;
  }
}

/* Planner CTA — the flagship tool card */

.planner-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: linear-gradient(145deg, var(--color-ink) 0%, var(--color-ink-raised) 100%);
  color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}

.planner-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(6, 182, 212, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(6, 182, 212, 0.08) 0%, transparent 45%);
  pointer-events: none;
}

.planner-cta > * {
  position: relative;
}

.planner-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.planner-cta__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--color-surface);
}

.planner-cta__body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.planner-cta__features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.planner-cta__features li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--lh-normal);
}

.planner-cta__features li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

.planner-cta__launch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-accent);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-snug);
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.planner-cta__launch:hover,
.planner-cta__launch:focus-visible {
  background: var(--color-surface);
  transform: translateY(-1px);
}

.planner-cta__launch-arrow {
  font-size: var(--fs-lg);
  transition: transform var(--duration-base) var(--ease-out);
}

.planner-cta__launch:hover .planner-cta__launch-arrow {
  transform: translateX(4px);
}

/* ── Room grid (Stage 5: image-led editorial gallery) ─────────────────── */
/* 13 rooms rendered as a magazine gallery: each card is a featured image in
   a 4:3 frame (no border, no shadow) with bold room name + muted hook
   below. The image IS the visual anchor — typography sits quietly beneath
   it and the mono CTA only appears on hover to keep the gallery uncluttered.
   Grid scales 2 → 3 → 4 columns with the viewport.                           */

.room-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-10);
  border: 0;
}

@media (min-width: 560px) {
  .room-grid { grid-template-columns: repeat(2, 1fr); }
}

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

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

.room-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: none;
}

.room-card:hover,
.room-card:focus-visible {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
}

/* Featured-image frame — fixed aspect ratio, no radius to keep it editorial. */
.room-card__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-2);
}

.room-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow, 400ms) var(--ease-out);
}

.room-card:hover .room-card__img,
.room-card:focus-visible .room-card__img {
  transform: scale(1.04);
}

.room-card__room {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  margin: 0;
  transition: color var(--duration-base) var(--ease-out);
}

.room-card:hover .room-card__room,
.room-card:focus-visible .room-card__room {
  color: var(--color-accent);
}

.room-card__hook {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  margin: 0;
}

.room-card__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-1);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.room-card:hover .room-card__cta,
.room-card:focus-visible .room-card__cta {
  opacity: 1;
  transform: translateX(0);
}

/* ── Picks stack (Stage 6: buying-guide rows — no outer box) ────────────── */
/* Picks are a lineup of editorial rows. We drop the outer card wrapper and
   let hairline top rules stitch the rows together. The row itself keeps its
   numbered + label + title + hook + arrow lockup.                           */

.picks-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.pick-row {
  display: grid;
  grid-template-columns: 140px auto auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-base) var(--ease-out);
}

.pick-row:hover,
.pick-row:focus-visible {
  background: transparent;
  padding-left: var(--space-4);
}

/* Left-side thumbnail for each pick. Fixed 4:3 frame, no radius, no shadow;
   the image anchors the row without competing with the editorial typography. */
.pick-row__thumb-wrap {
  display: block;
  width: 140px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-2);
}

.pick-row__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow, 400ms) var(--ease-out);
}

.pick-row:hover .pick-row__thumb,
.pick-row:focus-visible .pick-row__thumb {
  transform: scale(1.05);
}

.pick-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  min-width: 2.5ch;
}

.pick-row__label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pick-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pick-row__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

.pick-row__hook {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

.pick-row__cta {
  font-size: var(--fs-xl);
  color: var(--color-ink-subtle);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.pick-row:hover .pick-row__cta,
.pick-row:focus-visible .pick-row__cta {
  color: var(--color-accent);
  transform: translateX(4px);
}

@media (max-width: 680px) {
  .pick-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--space-3);
    padding: var(--space-5) 0;
  }

  .pick-row__thumb-wrap { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--space-2); }
  .pick-row__num { grid-column: 1; grid-row: 2; }
  .pick-row__label { grid-column: 2; grid-row: 2; justify-self: start; }
  .pick-row__main { grid-column: 1 / -1; grid-row: 3; }
  .pick-row__cta { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
}

/* ── Install grid (Stage 7: editorial task list, no boxes) ──────────────── */
/* 9 install/maintain tasks laid out as a 3-column editorial index at desktop
   with hairline top rules between rows. Each task is a typographic row with
   task name (bold), goal (muted), and a right-aligned arrow.                 */

.install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 720px) {
  .install-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
  }
}

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

.install-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-base) var(--ease-out);
}

.install-row:hover,
.install-row:focus-visible {
  border-color: var(--color-line);
  transform: none;
  padding-left: var(--space-4);
}

.install-row__task {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
}

.install-row__goal {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
}

.install-row__arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  font-size: var(--fs-lg);
  color: var(--color-ink-subtle);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.install-row:hover .install-row__arrow,
.install-row:focus-visible .install-row__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* ── Library (full index with filters) ──────────────────────────────────── */

.library__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

/* Filter chips — minimal; no filled pill, just underline on active.       */
.library__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.library__filter:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-line-strong);
}

.library__filter--active {
  background: transparent;
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
}

.library__filter--active:hover {
  background: transparent;
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.library__filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-ink-subtle);
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.library__filter--active .library__filter-count {
  background: transparent;
  color: var(--color-accent);
}

/* Library list — open editorial grid. No outer box, no cell grid lines;
   just a hairline top rule per row, and column-gap between columns.         */
.library__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

@media (min-width: 640px) {
  .library__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
}

@media (min-width: 1100px) {
  .library__list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-8);
  }
}

.library__item {
  border: 0;
  border-top: 1px solid var(--color-line);
}

.library__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-base) var(--ease-out);
}

.library__link:hover,
.library__link:focus-visible {
  background: transparent;
  padding-left: var(--space-3);
}

.library__stage-tag {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.library__title {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

.library__arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  font-size: var(--fs-md);
  color: var(--color-ink-subtle);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.library__link:hover .library__arrow,
.library__link:focus-visible .library__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* ── Next topics (sister-category CTAs — editorial, no cards) ───────────── */
/* 4 sister categories laid out as editorial columns separated by hairline
   vertical rules (desktop) or top rules (mobile). No backgrounds, no
   shadows — typography and arrows carry the interactivity.                 */

.next-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 780px) {
  .next-topics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .next-topics {
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--color-line);
  }
}

.next-topic {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6) var(--space-8) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (min-width: 1100px) {
  .next-topic {
    padding: 0 var(--space-6);
    border-bottom: 0;
    border-left: 1px solid var(--color-line);
    min-height: 260px;
  }
  .next-topic:first-child { border-left: 0; padding-left: 0; }
  .next-topic:last-child { padding-right: 0; }
}

.next-topic:hover,
.next-topic:focus-visible {
  transform: none;
  border-color: var(--color-line);
  box-shadow: none;
}

.next-topic:hover .next-topic__name,
.next-topic:focus-visible .next-topic__name {
  color: var(--color-accent);
}

.next-topic__role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.next-topic__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0;
}

.next-topic__hook {
  flex: 1;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  margin: 0;
}

.next-topic__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-top: var(--space-1);
}

.next-topic:hover .next-topic__cta,
.next-topic:focus-visible .next-topic__cta {
  color: var(--color-accent);
}

/* ============================================================================
   Simple acoustic calculator — self-contained for preview + category hub use.
   Mirrors the styles from style.css (.acoustic-calc-simple …) but retokenised
   against v8 design tokens. This lets the calculator render correctly inside
   .quantity-calc-frame without depending on the legacy style.css stylesheet.
   ============================================================================ */

.acoustic-calc-simple {
  max-width: 100%;
  margin: 0;
  background: var(--color-surface);
  border-radius: 0;
  overflow: hidden;
}

.calc-simple-body {
  padding: var(--space-6);
}

.calc-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
}

.calc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.calc-dimension-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.calc-dim-input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-xs);
  transition: border-color var(--duration-base) var(--ease-out);
}

.calc-dim-input:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.calc-dim-input .dim-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-ink-subtle);
}

.calc-dim-input input {
  width: 48px;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-align: center;
  background: transparent;
  color: var(--color-ink);
}

.calc-dim-input input:focus { outline: none; }

.dim-x {
  font-family: var(--font-mono);
  color: var(--color-ink-subtle);
  font-weight: var(--fw-medium);
}

.calc-unit-toggle {
  display: inline-flex;
  background: var(--color-bg);
  border-radius: var(--radius-xs);
  padding: 2px;
}

.calc-unit-toggle .unit-btn {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.calc-unit-toggle .unit-btn.active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}

.calc-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (max-width: 500px) {
  .calc-options-row { grid-template-columns: 1fr; }
}

.calc-select-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.calc-select-group select {
  width: 100%;
  padding: var(--space-3);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}

.calc-select-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.calc-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-accent);
  color: var(--color-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.calc-btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface);
  transform: translateY(-1px);
}

.calc-result {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--color-ink);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-surface);
}

.calc-result .result-number {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-accent);
}

.calc-result .result-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.calc-result .result-details {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PICK-TIER (canonical Ch 7 tier-card layout) — shared across product hubs
   ---------------------------------------------------------------------------
   Originally built for soundbar-hub.css Ch 7. Promoted here once the DJ
   sub-hub needed the same tier-card shape; MIDI will reuse it next.

   Each tier card is a two-column grid: left meta (tier label, spec, verified
   date), right editorial body (criterion → context → pick → tradeoff →
   runner-up). The CRITERION — not the product name — is the h3; this is the
   editorial ordering that signals "criteria are the content, picks are the
   example."

   The component is intentionally tool-agnostic: all colour comes from
   --color-accent and --color-accent-subtle, which the per-hub identity
   overlay (soundbar-hub.css / dj-hub.css / midi-hub.css) sets via a body
   class. The hover shadow uses color-mix on --color-accent so the tint
   matches the hub palette automatically; hub files can still override the
   shadow for fine-tuning (see .dj-hub .pick-tier:hover in dj-hub.css).
   ═══════════════════════════════════════════════════════════════════════════ */

.pick-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pick-tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  position: relative;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

@media (min-width: 800px) {
  .pick-tier {
    grid-template-columns: 220px 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }
}

/* Top accent stripe — echoes the tool-card pattern from treatment-hub.css
   Ch 2. Colour picks up the active hub's --color-accent automatically. */
.pick-tier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  opacity: 0.9;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .pick-tier:hover {
    border-color: var(--color-accent-subtle);
    box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}

/* Left column: tier label + headline spec + verified date. Compact
   mono-stacked metadata so the right column (editorial content) gets the
   visual prominence. */
.pick-tier__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2); /* optical-align with right column heading */
}

.pick-tier__tier {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Headline spec — renamed generically. Soundbar uses channel count ("7.1.4"),
   DJ uses channel count ("2-ch" / "4-ch") or form factor ("standalone"),
   MIDI will use key count ("25 keys" / "88 keys"). The class name stays
   generic (.pick-tier__spec) so markup is portable across hubs. The legacy
   .pick-tier__channels alias remains for existing soundbar markup. */
.pick-tier__spec,
.pick-tier__channels {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.pick-tier__spec-note {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-ink-soft, #6B7280);
  line-height: 1.3;
}

.pick-tier__price-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.pick-tier__verified {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-subtle);
  letter-spacing: 0.04em;
}

.pick-tier__verified strong {
  color: var(--color-ink-muted);
  font-weight: var(--fw-semibold);
}

/* Right column: criterion → context → pick → tradeoff → runner-up. */
.pick-tier__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pick-tier__criterion {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.pick-tier__criterion em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
}

.pick-tier__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}

.pick-tier__row:last-child {
  border-bottom: 0;
}

.pick-tier__row-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.pick-tier__row-value {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-ink);
}

.pick-tier__row-value strong {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

.pick-tier__row-value em {
  font-style: italic;
  color: var(--color-ink-muted);
}

.pick-tier__row-value a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: border-color 180ms ease;
}

.pick-tier__row-value a:hover {
  border-bottom-color: var(--color-accent);
}