/* pagehead.css — THE PAGE HEADER and THE RAIL'S SECTIONS (specs/164 §2–§3; NAV-1 / INV-2189 ·
   NAV-2 / INV-2190 · NAV-3 / INV-2191 · NAV-5 / INV-2193). Loaded by _base.html on every page.

   Bennett 2026-10-11: "that very top 'Campaigns' at the top of the window. I hate that … that
   CONCEPT of where we are and like how we actually go back and navigate needs a better
   solution." The top bar keeps its icons; the page says where you are in ONE header at the top
   of its content column (_page_header.html, common.page_header):

     .cl-pagehead               the band: a hairline under it, the canvas behind it, 14 px.
     .cl-pagehead__in           the grid — "where where" / "head acts" / "facts facts" /
                                "tabs tabs"; the acts sit at the right of the title row while the
                                DOM keeps NAV-2's order (back · path · title · status · facts ·
                                acts); 1520 px wide like the hub's <main>, its gutters 16 · 24 · 32.
     .cl-pagehead__where        the named back door (.cl-pagehead__back: where.css's drawn arrow +
                                the parent's name in the accent) and the path (where.css's
                                .cl-where__path chips and drawn chevrons — reused, never forked).
     .cl-pagehead__title        the page's one h1: serif, never italic (THE HEADING LAW), 24 px.
     .cl-pagehead__status       a word with ONE dot (.cl-dot--ok · warn · bad · info · muted);
                                never a pill, never two dots (CH-2).
     .cl-pagehead__facts        the facts line: 13 px muted, values in the primary ink, 14 px gaps.
     .cl-pagehead__acts         the acts, visible at rest (CH-3); ≤ 640 px two or more fold behind
                                .cl-pagehead__more (page-acts-more, a data-cl-menu <details>).
     .cl-pagehead__tabs         the object's tabs, underlined, attached to the band's bottom edge;
                                one row ≥ 768 px, scrolling in their own box below (N4).
     .cl-pagehead--compact      the editor grammar: one row, full width.
     .cl-pagehead--fallback     a page that still overrides {% block topbar_crumbs %}: its crumb
                                line drawn here, one 40 px row, the chevrons drawn (never "›").

   THE HEIGHT CHAIN. Full-bleed pages pinned their height to the 50 px top bar
   (calc(100dvh - 50px)); a header above them would push their foot off the screen. They subtract
   --cl-pagehead-h too — a 41 px default (the fallback band and its hairline) while a header is
   drawn (body.cl-has-pagehead), which frame.js replaces with the header's measured height (0 when
   the band is hidden at phone width). The pinned selectors are listed below, by page.

   THE RAIL'S SECTIONS (_rail.html, common.areas): under the active area's row, indented on a
   hairline, 30 px rows, the lit section in the accent (aria-current="page"). They ride this sheet
   — the rail's own rules live in the built django.css, which no lane rebuilds for this wave.

   Tokens only (tokens.css); both themes from them; nothing moves on hover. */

:root { --cl-pagehead-h: 0px; }
body.cl-has-pagehead { --cl-pagehead-h: 41px; }

/* ── The band ──────────────────────────────────────────────────────── */
.cl-pagehead {
  flex: none;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}
/* the top bar's small-window rule (django.css: `.cl-shell-col > header` pads 10 px) is the top
   bar's own — the band keeps its gutters */
.cl-shell-col > header.cl-pagehead { gap: 0; padding-inline: 0; }
.cl-pagehead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "where where"
    "head acts"
    "sub sub"
    "facts facts"
    "tabs tabs"
    "under under";
  align-items: center;
  column-gap: 16px;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 12px 16px 12px;
}
.cl-pagehead:has(.cl-pagehead__tabs) .cl-pagehead__in { padding-bottom: 0; }
@media (min-width: 640px) { .cl-pagehead__in { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .cl-pagehead__in { padding-left: 32px; padding-right: 32px; } }

/* ── Where you are: the back door and the path ─────────────────────── */
.cl-pagehead__where {
  grid-area: where;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: -2px 0 6px -8px;
  font-size: 13px;
  line-height: 1;
}
.cl-pagehead__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  max-width: 40ch;
  padding: 0 10px 0 9px;
  border-radius: 999px;
  color: var(--accent-brief);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
@media (hover: hover) {
  .cl-pagehead__back:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-pagehead__back:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 2px; }
.cl-pagehead__back-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-pagehead__path { padding-left: 10px; }

/* ── The title row: the h1 and its status word ─────────────────────── */
.cl-pagehead__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}
.cl-pagehead__title {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cl-pagehead__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}
@media (hover: hover) {
  a.cl-pagehead__status:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-stronger); }
}
a.cl-pagehead__status:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 3px; border-radius: 3px; }
.cl-pagehead .cl-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.cl-pagehead .cl-dot--ok { background: var(--status-verified); }
.cl-pagehead .cl-dot--warn { background: var(--status-warning); }
.cl-pagehead .cl-dot--bad { background: var(--status-error); }
.cl-pagehead .cl-dot--info { background: var(--accent-brief); }
.cl-pagehead .cl-dot--muted { background: var(--text-faint); }

/* ── The facts line ────────────────────────────────────────────────── */
.cl-pagehead__facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.cl-pagehead__fact { min-width: 0; color: inherit; text-decoration: none; }
.cl-pagehead__fact b { color: var(--text-primary); font-weight: 500; }
@media (hover: hover) {
  a.cl-pagehead__fact:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-stronger); }
}
a.cl-pagehead__fact:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 2px; border-radius: 3px; }

/* ── The acts: at the right of the title row, visible at rest ─────── */
.cl-pagehead__acts {
  grid-area: acts;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.cl-pagehead__more { display: none; grid-area: more; }
.cl-pagehead__more > summary { list-style: none; }
.cl-pagehead__more > summary::-webkit-details-marker { display: none; }
.cl-pagehead__more-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
}
@media (hover: hover) {
  .cl-pagehead__more-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-pagehead__more-btn:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 2px; }

/* ── The tabs: the object's sections, attached to the band ─────────── */
.cl-pagehead__tabs {
  grid-area: tabs;
  display: flex;
  gap: 2px;
  min-width: 0;
  margin: 8px 0 -1px -12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cl-pagehead__tabs::-webkit-scrollbar { display: none; }
.cl-pagehead__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
@media (hover: hover) {
  .cl-pagehead__tab:hover { color: var(--text-primary); border-bottom-color: var(--border-stronger); }
}
.cl-pagehead__tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent-brief); }
.cl-pagehead__tab:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; border-radius: 4px; }
.cl-pagehead__count { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── Compact: the editor grammar, one row ──────────────────────────── */
.cl-pagehead--compact .cl-pagehead__in {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "where head acts"
    "tabs tabs tabs";
  max-width: none;
  padding-top: 6px;
  padding-bottom: 6px;
}
.cl-pagehead--compact .cl-pagehead__where { margin: 0 4px 0 -8px; }
.cl-pagehead--compact .cl-pagehead__title { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pagehead--compact .cl-pagehead__head { flex-wrap: nowrap; align-items: center; }
.cl-pagehead--compact .cl-pagehead__facts { display: none; }
.cl-pagehead--compact .cl-pagehead__tabs { margin-top: 2px; }

/* ── The fallback band: a page's old crumb line, out of the top bar ── */
.cl-pagehead--fallback .cl-pagehead__in {
  display: flex;
  align-items: center;
  height: 40px;
  max-width: none;
  padding-top: 0;
  padding-bottom: 0;
}
.cl-pagehead__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
}
.cl-pagehead__crumbs > nav,
.cl-pagehead__crumbs [aria-label="Breadcrumb"] { min-width: 0; overflow: hidden; white-space: nowrap; }
.cl-pagehead__crumbs .cl-topbar-context { margin-left: 0; font-size: 13px; }
.cl-pagehead__crumbs .cl-topbar-context > * { max-width: 260px; }
.cl-pagehead__crumbs .cl-topbar-context > * + *::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 11px 0 7px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  opacity: .45;
}
.cl-pagehead__crumbs .cl-topbar-context > :last-child { max-width: 420px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
@media (hover: hover) {
  .cl-pagehead__crumbs .cl-topbar-context > a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-stronger); }
}
.cl-pagehead__crumbs .case-crumb { margin-left: 0; font-size: 13px; }
.cl-pagehead__crumbs .case-crumb > :last-child { color: var(--text-primary); font-size: 14px; font-weight: 600; }
/* a crumb line every child of which hides on a phone leaves no empty band behind */
@media (max-width: 639px) {
  .cl-pagehead--fallback:not(:has(.cl-pagehead__crumbs > :not(.max-sm\:hidden))) { display: none; }
}

/* ── Phone (≤ 640 px): back + title on one row, the acts fold, the tabs scroll ── */
@media (max-width: 640px) {
  .cl-pagehead__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "where head more"
      "sub sub sub"
      "facts facts facts"
      "acts acts acts"
      "tabs tabs tabs"
      "under under under";
    column-gap: 8px;
    padding-top: 10px;
  }
  .cl-pagehead__where { margin: 0 0 0 -8px; }
  .cl-pagehead__path { display: none; }
  .cl-pagehead__back { max-width: 34vw; padding: 0 8px; }
  .cl-pagehead__title { font-size: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* one act stays in the row; two or more fold behind ⋯ (page-acts-more) */
  .cl-pagehead__acts { grid-area: more; }
  .cl-pagehead__in:has(.cl-pagehead__acts > :nth-child(2)) .cl-pagehead__more { display: block; }
  .cl-pagehead__in:has(.cl-pagehead__acts > :nth-child(2)) .cl-pagehead__acts { display: none; grid-area: acts; justify-content: flex-start; margin-top: 8px; }
  .cl-pagehead__in:has(.cl-pagehead__acts > :nth-child(2)) .cl-pagehead__more[open] ~ .cl-pagehead__acts { display: flex; }
  .cl-pagehead--compact .cl-pagehead__in { grid-template-areas: "where head more" "acts acts acts" "tabs tabs tabs"; }
  /* a header with no back door (the Campaigns home: the day is the title) starts at the gutter */
  .cl-pagehead__in:not(:has(.cl-pagehead__where)) { grid-template-areas: "head head more" "sub sub sub" "facts facts facts" "acts acts acts" "tabs tabs tabs" "under under under"; }
}

/* ── Lane D's slots (specs/166 §4, §9 — WL-3 / WL-9): the count beside the title, the sentence
   under it (page-sub: 14 px secondary, wrapping at 80ch, never clipped — what the page is), the
   band's foot (People's views bar). ─────────────────────────────────────────────────────────────────────────────────── */
.cl-pagehead__titlecount { color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the sentence wraps (design §4 · §9: max-width 80ch) — never clipped mid-word (DEF-WL-19) */
.cl-pagehead__sub {
  grid-area: sub;
  min-width: 0;
  max-width: 80ch;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.cl-pagehead__under { grid-area: under; min-width: 0; margin-top: 12px; }
@media (max-width: 640px) {
  .cl-pagehead__under { margin-top: 10px; }
}

/* ── The height chain: full-bleed pages subtract the header too ───── */
/* the Tailwind-pinned editors, method frames and the audit list (h-[calc(100dvh-50px)]) */
body.cl-has-pagehead [class*="h-[calc(100dvh-50px)]"]:not([class*="max-lg:h-auto"]) { height: calc(100dvh - 50px - var(--cl-pagehead-h)); }
@media (min-width: 1024px) {
  body.cl-has-pagehead [class*="h-[calc(100dvh-50px)]"][class*="max-lg:h-auto"] { height: calc(100dvh - 50px - var(--cl-pagehead-h)); }
}
/* the Workbench (editor-shell.css), the claim checks and the legacy viewer (their inline sheets) */
body.cl-has-pagehead #workbench-shell,
body.cl-has-pagehead #claim-check-host,
body.cl-has-pagehead #claim-check-root,
body.cl-has-pagehead #viewer-root { height: calc(100dvh - 50px - var(--cl-pagehead-h)); }
/* Drive and the file readers (document-studio.css, file-reader.css) */
body.cl-has-pagehead .document-studio,
body.cl-has-pagehead .drive-studio,
body.cl-has-pagehead .file-reader-standalone { height: calc(100dvh - 52px - var(--cl-pagehead-h)); }

/* ── The rail's sections (_rail.html; NAV-1) ───────────────────────── */
.cl-rail-sections {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 1px 0 5px 17px;
  padding-left: 8px;
  border-left: 1px solid var(--border-default);
}
.cl-rail-section {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  flex: none;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
@media (hover: hover) {
  .cl-rail-section:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-rail-section:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }
.cl-rail-section[aria-current="page"] { color: var(--accent-brief); font-weight: 600; background: var(--accent-brief-softer); }
.cl-rail-section__label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* specs/166 §1 (lane D, the design §2): the count is quiet mono text at the row's end — no pill */
.cl-rail-section__count {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px; /* the strip's count was held to 12 px (D2, CH-12 / INV-2045; Wave 8 DEF-CH-02) — its rail twin too */
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cl-rail-section[aria-current="page"] .cl-rail-section__count { color: var(--text-secondary); }
.cl-rail-section__count[hidden] { display: none; }

/* ── ⌘K: the Recent group (frame.js; specs/164 §4, NAV-4) ─────────────── */
.cl-palette-group { display: block; }
.cl-palette-group + .cl-palette-row { border-top: 1px solid var(--border-default); }
.cl-palette-group__head {
  padding: 10px 16px 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── The facts' atoms at 12 px (lane H, DEF-SH-02) ──────────────────────
   A chip, a pill or an id in the facts line (a campaign's case, a brief's anchor) reads at the
   house's 12 px floor on every page that declares a header — the hub's kit lifts them inside its
   own blocks, and the lab's pages load no kit. */
.cl-pagehead__facts :is(.cl-pill, .cl-chip-id, .cl-echip, .cl-echip__kind, .cl-echip__label, .cl-echip__meta) {
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .cl-pagehead__back, .cl-pagehead__tab, .cl-rail-section { transition: none; }
}

/* ── The rail's groups (specs/164 §3, amended 2026-10-12): an area's row is a door AND a fold; its
   sections are listed at all times under it; a folded group hides them and keeps the row lit ── */
.cl-rail-row--group { display: flex; align-items: stretch; gap: 0; padding: 0; }
.cl-rail-row--group > .cl-rail-row__door { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; color: inherit; text-decoration: none; border-radius: inherit; }
@media (hover: hover) {
  .cl-rail-row--group > .cl-rail-row__door:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-rail-row--group > .cl-rail-row__fold { display: inline-flex; flex: none; width: 28px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: transform .15s ease, color .15s ease, background .15s ease; }
@media (hover: hover) {
  .cl-rail-row--group > .cl-rail-row__fold:hover { color: var(--text-primary); background: var(--bg-surface-2); }
}
.cl-rail-row--group > .cl-rail-row__fold:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }
.cl-rail-row--group[data-open="false"] > .cl-rail-row__fold { transform: rotate(-90deg); }
.cl-rail-row--group[data-open="false"] + .cl-rail-sections { display: none; }
.cl-rail-section__badge { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .cl-rail-row--group > .cl-rail-row__fold { transition: none; } }

/* ── The parent and the leaf (2026-10-12, the one-column rail): an OPEN group whose area is the
   page's says "in here" in the ink alone — its lit section carries the fill; a FOLDED group's row
   carries both, since the section is out of sight ────────────────────────────────────────────── */
.cl-rail-row--group.cl-rail-active[data-open="true"] { background: transparent; }
.cl-rail-row--group.cl-rail-active[data-open="true"]::before { display: none; }
.cl-rail-row--group.cl-rail-active[data-open="true"] > .cl-rail-row__door { color: var(--text-primary); font-weight: 600; }
/* A badge the page hides stays hidden (DEF-U-62): the rail's Messages count is toggled with the
   utility class .hidden by comms-hub.js, and .cl-pill's own display (later in django.css) drew an
   empty dot-pill — a "switch" beside Messages — whenever nothing was unread. */
.cl-pill.hidden { display: none; }
/* The active group's DOOR wears cl-rail-active too (the row is lit inside its area — every page,
   specs/171 §4 R2), as a marker only: the group row paints the fill and the bar, never the door. */
.cl-rail-row--group > .cl-rail-row__door.cl-rail-active { position: static; }
.cl-rail-row--group > .cl-rail-row__door.cl-rail-active:not(:hover) { background: transparent; }
.cl-rail-row--group > .cl-rail-row__door.cl-rail-active::before { display: none; }

/* ── THE AREA STRIP (specs/164 §3 amended 2026-10-12 (2); _area_strip.html) ──────────────────────
   The active area's sections under the top bar, drawn from the rail's groups and lit together:
   the same 13 px / 500 label, the same hover surface, the same accent fill on the lit one
   (.cl-rail-section[aria-current]), the same quiet mono count. A band in the flow under the 50 px
   top bar, whose own hairline yields to the strip's at rest so the two read as one head
   (body.cl-has-strip). Its items start at the page header's gutter (16 · 24 · 32, less the tab's
   own 10 px) and the row scrolls sideways in its own box on a narrow window (no page overflow).
   Part of the height chain: frame.js adds the band to --cl-pagehead-h. */
.cl-strip {
  flex: none;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-canvas);
}
/* At rest the top bar and the strip read as ONE head under one hairline; once the page has
   scrolled (frame.js: body[data-scrolled]) the strip is gone from view and the sticky top bar
   draws its own line again over the content passing under it. A page's own sticky parts keep
   pinning to the 50 px top bar — the strip is in the flow, like the page header, and nothing
   below it has to know its height. */
body.cl-has-strip:not([data-scrolled]) .cl-shell-col > header:first-of-type { border-bottom-color: transparent; }
.cl-strip__in {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cl-strip__in::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .cl-strip__in { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 768px) { .cl-strip__in { padding-left: 22px; padding-right: 22px; } }
.cl-strip__area {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.cl-strip__area > svg { flex: none; }
@media (hover: hover) {
  .cl-strip__area:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-strip__area:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }
.cl-strip__sep { flex: none; width: 1px; height: 16px; margin: 0 6px 0 4px; background: var(--border-strong); }
.cl-strip__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
@media (hover: hover) {
  .cl-strip__tab:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-strip__tab:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }
.cl-strip__tab[aria-current="page"] { color: var(--accent-brief); font-weight: 600; background: var(--accent-brief-softer); }
.cl-strip__count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.cl-strip__tab[aria-current="page"] .cl-strip__count { color: var(--text-secondary); }
.cl-strip__count[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cl-strip__tab, .cl-strip__area { transition: none; }
}

/* ── The house "not open to you" page (specs/171 §2, RV-6; common/feature_closed.html): the
   sentence sits on the page header's gutter, under its title ───────────────────────────────── */
.cl-feature-closed { flex: 1 1 auto; width: 100%; max-width: 1520px; margin: 0 auto; padding: 20px 16px 64px; }
@media (min-width: 640px) { .cl-feature-closed { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .cl-feature-closed { padding-left: 32px; padding-right: 32px; } }
.cl-feature-closed__p { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }