/* CtrlSpace — styles for the three subdirectory hubs: /setups/, /guides/ and
   /brands/. Loaded after site.css by every generated page in those folders
   (see local web/tools/csbuild.py). Nothing here is used by the root pages, so
   it is a separate file rather than more weight on site.css.
   Bump the ?v= in csbuild.py's head() whenever this file changes - the assets/
   TTL is one hour, same reasoning as CHROME_V. */

/* ---------- breadcrumbs ---------- */
.hb-crumbs { padding: 96px 0 0; }
.hb-crumbs .container { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.hb-crumbs a, .hb-crumbs span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
.hb-crumbs a { color: var(--text-muted); }
.hb-crumbs a:hover { color: var(--accent); }
.hb-crumbs [aria-current] { color: var(--accent); }
.hb-crumbs__sep { color: var(--ink-600) !important; }
/* The trail replaces the hero's own top padding, which is sized for a page that
   starts at the headline. */
.hb-crumbs + .page-hero { padding-top: 26px; }

.hb-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin: 24px 0 0;
}

/* ---------- one content rail ----------
   Every prose block on a generated page sits on the SAME centred measure. It
   used to be five different widths (hero 900, FAQ and pager 820, body and spec
   760) and the last two were left-aligned inside the 1160px .container, so the
   article visibly sat off to the left under a centred title. If you add a
   section, put .hb-rail on its .container or .hb-body on its text and do not
   invent another width.

   Card sections - related, the CTA, the brand directory, pros and cons - stay on
   the full 1160px .container on purpose: those are grids, not reading columns.
   They are centred too, so nothing is flush left anywhere. */
.hb-rail { max-width: 800px; }

/* ---------- long-form body ---------- */
.hb-body { max-width: 800px; margin-left: auto; margin-right: auto; }
.hb-body h2 {
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 700; color: var(--text-strong); margin: 52px 0 14px; scroll-margin-top: 96px;
}
.hb-body h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 32px 0 10px; }
.hb-body > :first-child { margin-top: 0; }
.hb-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.68; color: var(--text-body); margin: 0 0 17px; }
.hb-body ul { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hb-body ul li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-body);
}
.hb-body ul li::before { content: "-"; color: var(--accent); flex: none; }
.hb-body strong { color: var(--text-strong); font-weight: 600; }

/* ---------- key-takeaway callout ---------- */
.hb-key {
  border: 1px solid var(--accent); border-radius: 18px; background: var(--accent-soft);
  padding: 24px 26px; margin: 0 0 40px;
}
.hb-key__h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.hb-key ul { margin: 0; }

/* ---------- figures ---------- */
.hb-fig { margin: 30px 0; }
.hb-fig .imgslot { width: 100%; }
/* width/height are on the <img> so the box is reserved before the file lands;
   these two rules make it scale without losing that. */
.hb-fig img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--border-subtle);
  background: var(--ink-800);
}
/* Portrait phone shots would otherwise run taller than the viewport inside a
   760px text column. */
.hb-fig img { max-height: 620px; object-fit: cover; object-position: center; }
.hb-fig figcaption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 10px;
}

/* ---------- definition cards ----------
   A labelled list ("Lighting - smart switches on every gang…") reads as a wall
   of bullets and scans badly. csbuild.bullets_or_cards() turns those into this
   grid instead; plain lists stay bullets. */
.hb-defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 4px 0 26px; }
.hb-def {
  border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--surface-raised); padding: 20px 22px;
}
.hb-def__t {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  line-height: 1.3; color: var(--text-strong); margin-bottom: 9px;
}
/* Scoped under .hb-body so it beats the generic `.hb-body p` type rule, which
   would otherwise reimpose 16px and a 17px bottom margin inside the card. */
.hb-body .hb-def__d {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.6;
  color: var(--text-body); margin: 0;
}
@media (max-width: 720px) { .hb-defs { grid-template-columns: 1fr; } }

/* ---------- pros / cons ---------- */
.hb-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hb-col { border: 1px solid var(--border-default); border-radius: 18px; padding: 26px; }
.hb-col--pro { border-color: var(--accent); background: var(--accent-soft); }
.hb-col__h {
  font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 14px;
}
.hb-col--pro .hb-col__h { color: var(--accent); }
.hb-col--con .hb-col__h { color: var(--text-muted); }
.hb-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hb-col li {
  display: flex; gap: 11px; align-items: flex-start;
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text-body);
}
.hb-col--pro li::before { content: "\2713"; color: var(--accent); font-weight: 700; flex: none; }
.hb-col--con li::before { content: "\2715"; color: var(--text-faint); font-weight: 700; flex: none; }
.hb-col--con li { color: var(--text-muted); }

/* A brand page with no photograph runs its spec panel at text width rather than
   leaving half the row empty. Only two of the 49 have identifiable product
   shots - see media_map.py. */
.hb-solo { max-width: 800px; margin-left: auto; margin-right: auto; }

/* ---------- spec table ---------- */
.hb-spec { border: 1px solid var(--border-default); border-radius: 18px; overflow: hidden; }
.hb-spec__row {
  display: grid; grid-template-columns: 210px 1fr; gap: 20px;
  padding: 15px 22px; border-bottom: 1px solid var(--border-subtle);
}
.hb-spec__row:last-child { border-bottom: 0; }
.hb-spec__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); padding-top: 3px;
}
.hb-spec__v { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-body); }

/* ---------- index cards ----------
   Flex column so every card in a row is the same height and the "Read the setup"
   line sits on the same baseline across all of them, however long the blurb is.
   That is what margin-top:auto on .hb-card__go does - it eats the slack. */
.hb-card { display: flex; flex-direction: column; height: 100%; }
.hb-card .card__title { transition: color .15s var(--ease-out); }
.hb-card:hover .card__title { color: var(--accent); }
.hb-card .imgslot, .hb-card__img { margin-bottom: 20px; }
.hb-card__img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border-subtle); background: var(--ink-800);
}
.hb-card__n {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--accent);
  display: block; margin-bottom: 12px;
}
/* Equal rows, not just equal cards within a row. Without this a 2x2 grid sizes
   each row to its own tallest card, so the four "Read the setup" lines end up at
   two different heights down the page. */
.hb-even { grid-auto-rows: 1fr; }
.hb-card__go {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  margin-top: auto; padding-top: 20px;
}
.hb-card:hover .hb-card__go { color: var(--accent-hover); }

/* Dense brand grid - 40+ entries, so the card is a compact row rather than a
   full card with a blurb. */
.hb-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hb-brand {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-raised);
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.hb-brand:hover { border-color: var(--accent); transform: translateY(-2px); }
.hb-brand__t { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-strong); }
.hb-brand:hover .hb-brand__t { color: var(--accent); }
.hb-brand__c { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
/* The protocol a brand actually speaks - the one fact worth scanning a directory
   of 49 entries for. */
.hb-brand__p {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- native <details> FAQ ---------- */
.hb-faq { border-bottom: 1px solid var(--border-default); }
.hb-faq:first-of-type { border-top: 1px solid var(--border-default); }
.hb-faq summary {
  list-style: none; cursor: pointer; padding: 20px 4px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-strong);
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
/* The question is an <h3> inside the <summary> (2026-09-15): answer engines and
   featured snippets extract a question-phrased heading followed by its answer,
   and a <span> carried no heading weight. `font: inherit` keeps the summary's
   own display/17px/600 styling so nothing moves visually - without it the UA
   h3 default (bold, 1.17em, block, margins) would resize and stack the row. */
.hb-faq summary h3 { font: inherit; color: inherit; margin: 0; }

/* Direct answer: the 40-60 word passage under the H1 that answer engines lift.
   Slightly larger than body copy and rule-marked on the left so it reads as the
   answer, without becoming a decorative callout people skip. */
.hb-answer {
  margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--accent);
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: var(--text-body); max-width: 720px;
}

.hb-faq summary::-webkit-details-marker { display: none; }
.hb-faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 21px; color: var(--accent); flex: none; }
.hb-faq[open] summary::after { content: "\2013"; }
.hb-faq__b {
  padding: 0 4px 22px; max-width: 640px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text-body);
}

/* ---------- series navigation (guide pages) ----------
   Two renderings of the same links, see csbuild.pager(). */

/* Chevrons pinned to the screen edges. Hidden by default and switched on only
   when the viewport is wide enough to hold them OUTSIDE the 1160px content
   rail: 1160 + 2x(52px button + 20px edge + 20px breathing room) = 1344. Below
   that they would sit on top of the article, so the cards below do the job. */
.hb-side { display: none; }
@media (min-width: 1344px) {
  .hb-side {
    position: fixed; top: 50%; transform: translateY(-50%);
    /* under .site-header (100) so a sticky nav always wins */
    z-index: 90;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    text-decoration: none;
  }
  .hb-side--prev { left: 20px; }
  .hb-side--next { right: 20px; }
  .hb-side__ico {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-default); color: var(--text-body);
    background: color-mix(in srgb, var(--ink-900) 82%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: border-color .16s var(--ease-out), color .16s, box-shadow .16s, transform .16s;
  }
  .hb-side__lbl {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-faint); transition: color .16s;
  }
  .hb-side:hover .hb-side__ico {
    border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-signal);
  }
  .hb-side--prev:hover .hb-side__ico { transform: translateX(-2px); }
  .hb-side--next:hover .hb-side__ico { transform: translateX(2px); }
  .hb-side:hover .hb-side__lbl { color: var(--accent); }
  .hb-side:focus-visible .hb-side__ico { border-color: var(--accent); box-shadow: var(--focus-ring); }
}

/* Cards at the foot of the article. Always present. */
.hb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hb-pager__card {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--border-subtle); border-radius: 16px;
  background: var(--surface-raised); padding: 20px 22px;
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.hb-pager__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hb-pager__card--next { text-align: right; align-items: flex-end; }
.hb-pager__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.hb-pager__t {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  line-height: 1.3; color: var(--text-strong);
}
/* Holds the column open at the first and last guide, so the single remaining
   card stays on its own side instead of sliding across. */
.hb-pager__gap { display: block; }
@media (max-width: 620px) {
  .hb-pager { grid-template-columns: 1fr; }
  .hb-pager__card--next { text-align: left; align-items: flex-start; }
  .hb-pager__gap { display: none; }
}

/* ---------- CTA card ---------- */
.hb-cta { text-align: center; padding: 44px; }
.hb-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hb-pc { grid-template-columns: 1fr; }
  .hb-brands { grid-template-columns: repeat(2, 1fr); }
  .hb-crumbs { padding-top: 84px; }
}
@media (max-width: 620px) {
  .hb-brands { grid-template-columns: 1fr; }
  .hb-spec__row { grid-template-columns: 1fr; gap: 5px; }
  .hb-cta { padding: 30px 22px; }
}