/* CMS prototype styles — design-system-native, fully CSS-variable driven.
   No brand colors are hardcoded here; everything comes from the active skin (tokens.js). */

:root {
  --radius: 16px;
  --button-radius: 999px;
  --font-display: 'Luckiest Guy', system-ui, sans-serif;
  --font-ui: 'Coming Soon', system-ui, sans-serif;
  --font-body: 'Pangolin', system-ui, sans-serif;
  --display-baseline-shift: 0.09em;
  --display-transform: uppercase;
}

* { box-sizing: border-box; }

/* The [hidden] attribute must always remove an element from layout. interact.js (ADR-018
   viewer behaviors) and other show/hide logic set el.hidden to hide cards — but an explicit
   author `display` on the element (e.g. .card { display: flex }, .card-wide { display: grid })
   otherwise beats the user-agent [hidden] rule by cascade origin, leaving "hidden" cards fully
   visible (B-001: production filter pills toggled the attribute but nothing disappeared).
   !important makes the attribute authoritative regardless of what else styles the element. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Mode / accent color utilities ──
   The per-accent color rules (.pop-<n>, .badge-<n>, .card-mode-<n>, .chip-<n>,
   .callout-<n>, .row-mode-<n>, .mode-border-<n>, .eyebrow.is-<n>, .title-mode-<n>,
   .mode-<n>) are INJECTED at runtime by matrices.js applyVocabulary(), driven by the
   site's vocabulary, so any naming (Contextus modes, CognaType families, anything) works.
   Only naming-independent structure lives in this file. */
em[class^='pop-'] { font-style: normal; }

/* ── Section ── */
.section-band { padding: 40px 0 8px; }
.section-heading { margin-bottom: 22px; }
.eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  margin: 0 0 6px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: var(--display-transform);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.section-title .section-icon { font-size: 1.5em; }
/* B-049: no max-width — a fixed ch cap doesn't scale with the section's container the way the
   heading beside it does, so on a wide layout the intro visibly stopped short of the heading's
   own width ("not honoring the full length of the title," live-caught by Jody on cluster-example
   and traits-intro). The intro should always match its container, same as the heading.
   text-wrap:pretty stays as an orphan-safety net for whenever the container itself forces a wrap
   (narrow viewports, longer intros) — unsupported browsers fall back to normal wrapping. */
.section-intro { color: var(--ink-muted); margin: 0; text-wrap: pretty; }

/* ── Hidden section (ADR-023) — Studio-preview only ──
   Served/production output omits hidden sections entirely (renderSection returns ''); the Studio
   preview wraps them in .section-hidden so the operator sees config truth: the content dimmed +
   non-interactive, with a corner "Hidden" badge at full opacity. */
.section-hidden { position: relative; }
.section-hidden > .section-hidden-body { opacity: 0.45; pointer-events: none; }
.section-hidden > .section-hidden-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.7rem; padding: 3px 10px; border-radius: 999px;
  background: var(--ink); color: var(--reverse-text);
}

/* ── Card base ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
/* banded: an accent-colored top band (--band set by injected .card-mode-<n> rule) */
.card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--band, var(--primary));
}

.card-meta { display: flex; align-items: center; gap: 10px; }
.type-badge {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: calc(var(--radius) * 0.5);
  color: var(--reverse-text);
}
.type-badge .ms { font-size: 20px; }
.meta-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.74rem;
  color: var(--ink-muted);
}
.meta-label b { color: var(--ink); font-weight: 700; }
/* DES-1 (2026-07-08): fixed top-right corner wedge, independent of card content flow — a
   row-displayed card's CTA used to shove the old inline .eros-dot around. `.card` is already
   `position: relative; overflow: hidden`, so the wedge clips cleanly to the card's own corner
   radius. Color is property-owned via --accent-eros (Law 1 — engine never hardcodes it).
   DES-1b (2026-07-08, Round 2): Jody's call — a plain colored indicator only, no glyph. */
.eros-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--accent-eros) transparent transparent;
  pointer-events: none;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: var(--display-transform);
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
}
/* Icon shape carries the type: round = Trait, square = Domain, hexagon = Cluster. */
.type-badge.shape-round { border-radius: 50%; }
.type-badge.shape-square { border-radius: 4px; }
.type-badge.shape-hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* The card name sits beside the icon (replacing the old type label). */
.card-name { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); font-size: 1.05rem; line-height: 1.05; margin: 0; }
.card-medium .card-name, .card-large .card-name { font-size: 1.15rem; }
.card-xl .card-name { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
/* Polarity pills on the trait page: Core EF inverted (loud), other functional accented, distributional subtle. */
.polarity-tags .tag-func { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.polarity-tags .tag-coreef { background: var(--ink); color: var(--reverse-text); border-color: var(--ink); font-weight: 700; }
.polarity-tags .tag-dist { border-color: var(--border-strong); color: var(--ink-muted); }
.card-descriptor { color: var(--ink-muted); margin: 0; font-size: 0.95rem; }
.card-description { margin: 0; }
.card-highlights { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--ink);
}

/* Scannable card tags (polarity for traits, functional layer + trait count for domains). */
.card-tags { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--font-ui); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--ink-muted); white-space: nowrap;
}
.tag-execution { border-color: var(--accent-execution); color: var(--accent-execution); }
.tag-meaning { border-color: var(--accent-meaning); color: var(--accent-meaning); }
.tag-foundation { border-color: var(--accent-foundation); color: var(--accent-foundation); }
.tag-drive { border-color: var(--accent-drive); color: var(--accent-drive); }
.tag-clusters { border-color: var(--accent-clusters); color: var(--accent-clusters); }
.tag-assessments { border-color: var(--accent-assessments); color: var(--accent-assessments); }
.tag-methods { border-color: var(--accent-methods); color: var(--accent-methods); }
.tag-traits { border-color: var(--accent-traits); color: var(--accent-traits); }
.tag-domains { border-color: var(--accent-domains); color: var(--accent-domains); }
.subpage-tags { margin-top: 12px; }

/* Sub-page breadcrumb. */
.subpage-crumbs { font-family: var(--font-ui); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin: 4px 0 14px; display: flex; gap: 8px; align-items: center; }
.subpage-crumbs a { color: var(--ink-muted); text-decoration: none; }
.subpage-crumbs a:hover { color: var(--ink); }
.crumb-sep { opacity: 0.5; }

.card-hero { margin: 4px -18px -16px; }
.card-hero img { width: 100%; display: block; }
/* ADR-022: card-face media (media.card place left/right). The float + max-width come from the
   shared .blk-image-<place>/<size> rules; the wrap is a block-formatting context (overflow:hidden)
   so the float is contained and the card text wraps around it (.card is a flex column, so the
   image can't float as a direct child). */
.card-media-wrap { overflow: hidden; }
.card-media { margin: 0 0 6px; }
.card-media img { width: 100%; border-radius: var(--radius); display: block; }

.card-action {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--reverse-text);
  background: var(--primary);
  padding: 8px 14px;
  border-radius: var(--button-radius);
}
.card-action:hover { filter: brightness(1.07); }
.card-action .ms { font-size: 18px; }

/* size nuances */
.card-micro { padding-bottom: 18px; }
.card-micro .card-title { font-size: 1.05rem; }
.card-xl { padding: 24px; gap: 14px; }
.card-xl .card-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.card-bodypreview { color: var(--ink); }
.card-bodypreview .blk-lead { font-size: 1.05rem; }

/* ── Section layouts ── */
.lay-feature-stack { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.fs-stack { display: flex; flex-direction: column; gap: 14px; }
/* feature-duo: one large feature + two medium cards beside it (cluster example).
   align-items stretch + flex on the feature so the large card matches the stack height. */
.lay-feature-duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: stretch; }
.fd-feature { display: flex; }
.fd-feature > .card { flex: 1; }
.fd-pair { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) { .lay-feature-duo { grid-template-columns: 1fr; } }

/* v1.5 feature-duo compositions (ADR-009 wave 1): additive modifiers only — the base
   .lay-feature-duo rules above are untouched, so sections without compose keep their layout. */
.lay-feature-duo.fd-two-large { grid-template-columns: 1fr; }
.fd-two-large .fd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lay-feature-duo.fd-xl-trio { grid-template-columns: 1.6fr 1fr; }
.lay-feature-duo.fd-wide-column { grid-template-columns: 1fr; }
.fdw-wrap {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start;
  background: var(--surface-alt); border-radius: var(--radius); padding: 14px;
}
.fd-overflow { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 760px) {
  .fd-two-large .fd-pair, .fdw-wrap { grid-template-columns: 1fr; }
}

.blk-cards { margin: 18px 0; }
.blk-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .blk-cards.cols-2, .blk-cards.cols-3, .blk-cards.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .blk-cards.cols-2, .blk-cards.cols-3, .blk-cards.cols-4 { grid-template-columns: 1fr; } }
.lay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lay-workbench { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lay-solo { display: block; }
.lay-rows { display: flex; flex-direction: column; gap: 8px; }

/* rows */
.row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--band, var(--primary));
  border-radius: calc(var(--radius) * 0.5);
  padding: 10px 14px;
  text-decoration: none; color: var(--ink);
}
.row .type-badge { width: 28px; height: 28px; }
.row-main { display: flex; flex-direction: column; }
.row-title { font-family: var(--font-display); text-transform: var(--display-transform); font-size: 1rem; }
.row-desc { color: var(--ink-muted); font-size: 0.85rem; }
.row-detail { margin-left: auto; font-family: var(--font-ui); text-transform: uppercase; font-size: 0.72rem; color: var(--ink-muted); }
a.row:hover { border-color: var(--band); }

/* ── Sub-page ── */
.subpage { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
/* Task 13: the sub-page hero (`.subpage-hero-left/right`, ADR-020) is a direct child of
   `.subpage`, a SIBLING of `.subpage-body` — not nested inside it (confirmed by reading
   renderSubpage's template: `${hero}\n<div class="subpage-body">...`). Without this clearfix, a
   floated hero taller than the rest of the article's content can extend past `.subpage`'s own
   bottom edge and overlap whatever the page renders after the article (the site footer). */
.subpage::after { content: ''; display: block; clear: both; }
.subpage-back, .subpage-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.8rem; color: var(--ink-muted); text-decoration: none; margin-bottom: 18px;
}
.subpage-back:hover { color: var(--ink); }
.subpage-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.subpage-titlerow { display: flex; align-items: center; gap: 14px; }
.subpage-titlerow .subpage-title { margin: 0; }
.subpage-head .type-badge { width: 40px; height: 40px; flex: 0 0 auto; }
.subpage-title {
  font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform);
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.04; margin: 4px 0 0;
}
.subpage-hero { margin: 8px 0 20px; border-radius: var(--radius); overflow: hidden; }
.subpage-hero img { width: 100%; display: block; }
.subpage-body > * { margin: 0 0 18px; }
/* Task 13: `.subpage-body` directly hosts floated `.blk-image-left/right` children (ADR-019).
   Without this clearfix, a floated image taller than the surrounding prose can spill past
   `.subpage-body`'s own bottom edge into whatever follows. This clears only `.subpage-body`'s OWN
   floated children (via its own ::after) — it does not add `clear` to `.subpage-body` itself, so
   body text still wraps beside a preceding floated `.subpage-hero-left/right` as intended. */
.subpage-body::after { content: ''; display: block; clear: both; }

.blk-heading { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); line-height: 1.1; margin-top: 30px; }
h2.blk-heading { font-size: 1.7rem; }
h3.blk-heading { font-size: 1.35rem; }
h4.blk-heading { font-size: 1.12rem; }
.blk-lead { font-size: 1.22rem; color: var(--ink); line-height: 1.5; }
.blk-prose { font-size: 1.02rem; }
.blk-list { padding-left: 1.3em; }
.blk-list li { margin: 4px 0; }
/* One grid for the whole list so terms align across rows. Default (trait pages): a narrow term
   column that may wrap to two lines, top-aligned with the blurb. */
.blk-def { display: grid; grid-template-columns: 160px 1fr; column-gap: 20px; row-gap: 16px; align-items: start; }
.def-row { display: contents; }
.def-term { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; font-size: 0.85rem; line-height: 1.25; margin: 0; }
.def-blurb { margin: 0; }
/* Chain variant (the cluster's ordered chain): wide single-line labels, vertically centered. */
.blk-def-chain { grid-template-columns: max-content 1fr; align-items: center; }
.blk-def-chain .def-term { white-space: nowrap; }
.blk-quote { border-left: 4px solid var(--primary); padding: 4px 0 4px 18px; font-size: 1.15rem; font-style: italic; color: var(--ink); }
.blk-quote cite { display: block; margin-top: 6px; font-size: 0.85rem; font-style: normal; color: var(--ink-muted); }
.blk-callout {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--cmode, var(--primary));
  border-radius: calc(var(--radius) * 0.5);
  padding: 14px 16px;
}
.blk-callout .callout-icon { color: var(--cmode); font-size: 22px; }
.blk-image img { width: 100%; border-radius: var(--radius); display: block; }
.blk-image figcaption { font-size: 0.82rem; color: var(--ink-muted); margin-top: 6px; text-align: center; }
/* ADR-019 (image block) + ADR-020 (hero slot), consolidated (Task 13): both places grew the same
   `place: 'left'|'right'|'full'` vocabulary, so the float/wrap/breakpoint CSS is written ONCE per
   behavior and shared across both class prefixes rather than duplicated. `-full` is an explicit
   no-op (today's only behavior, kept for clarity even though it's also the default). `-left`/
   `-right` float at a bounded width so surrounding text wraps; collapse to full-width stacked
   below 760px (matches this file's existing stacking breakpoint, e.g. .lay-feature-duo,
   .blk-cards). Exact property values are Task 12's original .blk-image-* values, unchanged. */
.blk-image-full, .subpage-hero-full { /* no-op: spans the column, same as today */ }
.blk-image-left, .blk-image-right, .subpage-hero-left, .subpage-hero-right { max-width: 45%; }
.blk-image-left, .subpage-hero-left { float: left; margin-right: 20px; }
.blk-image-right, .subpage-hero-right { float: right; margin-left: 20px; }
@media (max-width: 760px) {
  .blk-image-left, .blk-image-right, .subpage-hero-left, .subpage-hero-right {
    float: none; max-width: 100%; margin-left: 0; margin-right: 0;
  }
}
/* Task 15 (ADR-019, last piece): `size` ('s'/'m'/'l') on the image block — bounded max-width
   buckets, NOT author pixel values, mirroring the existing `.type-badge.isize-s/m/l` icon-size
   convention above (hardcoded deliberate values per bucket, no dedicated --space-* scale exists
   in this file to draw from). Values are proportioned against `.subpage`'s own 760px content
   column (s ~ 32%, m ~ 63%, l ~ 95% of it) rather than invented arbitrarily.
   Cascade note: declared AFTER `.blk-image-left/right`'s max-width rule on purpose. Both are
   single-class selectors (equal specificity), so when a block sets BOTH `place` and `size`
   (e.g. `place: 'left', size: 's'`), source order alone decides which max-width wins — and
   `size` is the more specific author intent, so its rule must come later to win the cascade.
   Verified live via computed-style (not just read on paper): see Task 15 report. */
.blk-image-s { max-width: 240px; }
.blk-image-m { max-width: 480px; }
.blk-image-l { max-width: 720px; }
/* Media round Task 15 review gap: Task 10 (ADR-020) has renderSubpage unconditionally emit
   `subpage-hero-s`/`-m`/`-l` (the hero's `size` field), and Task 11 gave the Editor a control for
   picking one, but no task in the original breakdown ever added CSS keyed on these classes — the
   hero's `size` knob has been a complete no-op since Task 10 shipped (confirmed: `grep -n
   "subpage-hero-s\|subpage-hero-m\|subpage-hero-l" engine/cms.css` matched nothing before this
   change). The hero is a different visual role than the inline `.blk-image` (it's the lead image
   for the whole sub-page, meant to read as more prominent), so its buckets are NOT copied from
   `.blk-image-s/m/l` — they're set larger, still proportioned against `.subpage`'s own 760px
   content column: s ~ 45% (comparable to the existing `-left`/`-right` float width, so a small
   hero doesn't look bigger than a floated one), m ~ 80% (a clearly-bigger-than-inline mid-point),
   l ~ 100% (760px, matching `.subpage`'s own column width exactly — the hero's pre-existing
   full-bleed default was already implicitly capped at the column via `.subpage`'s own max-width,
   so `l` makes that explicit as a real bucket value rather than leaving it as an unstated "none").
   Cascade note: declared AFTER the shared `.subpage-hero-left/right` max-width:45% rule above, on
   purpose — same reasoning as Task 15's image-block buckets: both are single-class selectors
   (equal specificity), so when a hero sets BOTH `place` and `size` (e.g. `place: 'left', size:
   's'`), source order alone decides, and `size` is the more specific author intent (mirrors
   Task 15's "size wins" call, kept consistent rather than special-cased for the hero).
   Verified live via computed-style (not just read on paper): see this task's report. */
.subpage-hero-s { max-width: 342px; }
.subpage-hero-m { max-width: 608px; }
.subpage-hero-l { max-width: 760px; }
.blk-embed { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; }
.blk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-divider { border: 0; border-top: 1px solid var(--border-soft); margin: 30px 0; }
.blk-cta { color: var(--reverse-text); }

/* Task 14 (ADR-019): two-column sub-page container. `fr` ratios (not percentages) so the
   `gap` is distributed correctly without the two sides + gap ever summing past 100%. Stacks
   to one column, source order, below the same 760px breakpoint every other multi-column
   layout in this file uses (.lay-feature-duo, .blk-image-left/right, .blk-cards.cols-*). */
.columns { display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr 1fr; }
.columns-50-50 { /* no-op: the base rule above already renders an even split */ }
.columns-60-40 { grid-template-columns: 60fr 40fr; }
.columns-40-60 { grid-template-columns: 40fr 60fr; }
.column > *:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
}

/* ── Demo harness chrome ── */
.demo-topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--chrome); color: var(--chrome-text);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px;
}
.demo-topbar h1 { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); font-size: 1.15rem; margin: 0; }
.demo-topbar .spacer { flex: 1; }
.demo-controls { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }
.demo-controls select, .demo-controls button {
  font: inherit; text-transform: inherit; letter-spacing: inherit;
  background: color-mix(in srgb, var(--chrome-text) 12%, transparent);
  color: var(--chrome-text); border: 1px solid color-mix(in srgb, var(--chrome-text) 30%, transparent);
  border-radius: var(--button-radius); padding: 6px 12px; cursor: pointer;
}
.demo-note { background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 16px; color: var(--ink-muted); font-size: 0.9rem; margin: 18px 0; }
.demo-section-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; color: var(--ink-muted); border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; margin: 40px 0 18px; }
.size-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.size-gallery > div { display: flex; flex-direction: column; gap: 8px; }
.size-tag { font-family: var(--font-ui); text-transform: uppercase; font-size: 0.72rem; color: var(--ink-muted); }

/* ── Archetype layouts: split-nav + hub-index (product/content sites) ── */
.lay-split-nav { display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start; }
.sn-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; }
.rail-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--ink-muted); margin: 0 0 2px; }
.sn-main { display: flex; flex-direction: column; gap: 18px; }
.lay-hub-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* ── Site chrome (per-site prototypes) ── */
.site-shell { min-height: 100vh; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--chrome); color: var(--chrome-text);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 24px;
}
.site-header .brandmark { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); font-size: 1.2rem; letter-spacing: 0.01em; }
.site-header .brand-descriptor { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; opacity: 0.8; }
/* Landing: a large, memorable wordmark so visitors register the site name. */
.site-header.is-landing { padding: 20px 24px; gap: 22px; }
.site-header.is-landing .brandmark { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: 0.02em; }
.site-header.is-landing .brand-descriptor { font-size: 0.82rem; align-self: center; }
.site-header nav { display: flex; gap: 14px; margin-left: auto; font-family: var(--font-ui); text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.03em; }
.site-header nav a { color: var(--chrome-text); text-decoration: none; opacity: 0.85; display: inline-flex; align-items: center; gap: 4px; }
.site-header nav a:hover { opacity: 1; }
.site-header nav a .ms { font-size: 1rem; }
.site-header nav a.is-highlight { color: var(--highlight); opacity: 1; }
.site-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
  padding: 48px 0 40px;
}
.site-hero .eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--ink-muted); margin: 0 0 8px; }
.site-hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform);
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; margin: 0 0 12px; max-width: 18ch;
}
.site-hero p { font-size: 1.15rem; color: var(--ink); max-width: 60ch; margin: 0; }
/* Hero: the "why" + description on the left, the waitlist signup card on the right. */
.site-hero .hero-cols { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 40px; align-items: start; }
.site-hero .hero-lead p { max-width: 52ch; }
/* Alternating-color title: every other word takes the active accent. */
.site-hero h1 .hw:nth-child(even) { color: var(--accent-drive); }

/* Signup card (right of hero): dark, scan-to-get-started. */
.hero-signup { background: var(--chrome); color: var(--chrome-text); border-radius: var(--radius); padding: 22px; border-top: 4px solid var(--accent-assessments); text-align: center; }
.site-hero .hero-signup-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; color: var(--highlight); margin: 0 0 12px; }
.hero-signup-qr { display: block; margin: 0 auto 14px; width: 150px; height: 150px; border-radius: 8px; background: #eef4fb; padding: 6px; }
.site-hero .hero-signup-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; margin: 0 0 10px; color: var(--chrome-text); }
.site-hero .hero-signup-title em { font-style: normal; color: var(--accent-assessments); }
.site-hero .hero-signup-blurb { font-size: 0.86rem; line-height: 1.5; color: var(--chrome-text); opacity: 0.9; margin: 0 0 16px; max-width: none; }
.hero-signup-cta { display: inline-block; background: var(--accent); color: var(--chrome); font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; text-decoration: none; padding: 11px 18px; border-radius: var(--button-radius); border: 1px solid var(--accent); }
.hero-signup-cta:hover { background: transparent; color: var(--chrome-text); }

/* Chips band: horizontal 3-up beneath the hero. */
.chips-band { padding: 28px 0 4px; }
.hero-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hero-chip { background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent-drive); border-radius: var(--radius); padding: 14px 16px; }
.hero-chip:nth-child(1) { border-left-color: var(--accent-drive); }
.hero-chip:nth-child(2) { border-left-color: var(--accent-meaning); }
.hero-chip:nth-child(3) { border-left-color: var(--accent-foundation); }
.hero-chip-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.68rem; color: var(--ink-muted); }
.hero-chip-title { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; margin: 2px 0 4px; color: var(--ink); }
.hero-chip-text { font-size: 0.86rem; line-height: 1.4; color: var(--ink-muted); margin: 0; max-width: none; }
@media (max-width: 820px) { .site-hero .hero-cols { grid-template-columns: 1fr; gap: 24px; } .hero-chips { grid-template-columns: 1fr; } }

/* The "what you'll find" components grid: responsive 2x2 (avoids the 4-in-3-col asymmetry). */
#find .lay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { #find .lay-grid { grid-template-columns: 1fr; } }

/* Disclosure band (the outro): the BETA notice, descriptive not diagnostic. */
/* Disclosure: a warm, present note (not fine print) — icon + title + intro + points. */
.disclosure-band { margin-top: 48px; background: var(--surface-alt); border-top: 4px solid var(--accent); padding: 40px 0; }
.disclosure-inner { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.disclosure-icon { color: var(--accent); font-size: 40px; line-height: 1; }
.disclosure-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; color: var(--accent); margin: 0 0 6px; }
.disclosure-title { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; margin: 0 0 12px; color: var(--ink); }
.disclosure-title em { font-style: normal; color: var(--accent); }
.disclosure-intro { font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 0 0 16px; max-width: 70ch; }
.disclosure-points { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.disclosure-points li { position: relative; padding-left: 22px; font-size: 0.98rem; line-height: 1.55; color: var(--ink-muted); max-width: 74ch; }
.disclosure-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
@media (max-width: 600px) { .disclosure-inner { grid-template-columns: 1fr; gap: 12px; } }

.site-footer { background: var(--chrome); color: var(--chrome-text); padding: 28px 24px; margin-top: 48px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.76rem; }

/* Sticky footer: shell fills the viewport so the footer never floats mid-page on short sub-pages. */
.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-shell .product-footer { margin-top: auto; }

/* ── Product footer (promoted from the Codex mock; themed via tokens) ── */
.product-footer { position: relative; overflow: hidden; margin-top: 48px; background: var(--chrome); color: var(--chrome-text);
  border-top: 4px solid; border-image: linear-gradient(90deg, var(--accent-execution) 0 25%, var(--accent-meaning) 25% 50%, var(--accent-foundation) 50% 75%, var(--accent-drive) 75% 100%) 1; }
.product-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent-foundation) 12%, transparent), transparent 28%),
    linear-gradient(115deg, transparent 0 58%, rgba(238,244,251,0.04) 58% 59%, transparent 59%); }
.footer-shell { position: relative; width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 20px; }
.footer-main { display: grid; grid-template-columns: minmax(14rem, 0.9fr) minmax(18rem, 1.3fr) minmax(13rem, 0.7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.footer-context { border-left: 1px solid rgba(238,244,251,0.16); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.footer-kicker, .footer-label, .directory-label { margin: 0 0 0.7rem; color: var(--highlight); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
.footer-wordmark { margin: 0; color: var(--chrome-text); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 0.96; }
.footer-wordmark span { color: var(--accent-foundation); }
.footer-promise { max-width: 28rem; margin: 1rem 0 0; color: var(--chrome-text); font-size: 0.96rem; line-height: 1.6; }
.footer-context-copy { max-width: 41rem; margin: 0; color: var(--chrome-text); font-size: 0.96rem; line-height: 1.7; }
.footer-meta, .participation-note { margin: 0.5rem 0 0; color: var(--chrome-muted, #aebdcb); font-size: 0.82rem; line-height: 1.6; }
.footer-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0.8rem 1.1rem; border: 1px solid var(--accent); border-radius: 0.55rem; background: var(--accent); color: var(--chrome); font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; text-align: center; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
.footer-cta:hover { background: transparent; color: var(--chrome-text); transform: translateY(-2px); }
.footer-directory { display: grid; gap: 0.8rem; margin-top: 2.6rem; border-top: 1px solid rgba(238,244,251,0.16); padding-top: 1.5rem; }
.directory-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.directory-label { margin: 0; color: var(--chrome-faint, #718399); }
.directory-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; }
.footer-link, .footer-credit { color: var(--chrome-text); font-size: 0.9rem; text-decoration: none; }
.directory-row:first-child .footer-link { box-shadow: inset 0 -2px 0 var(--accent-execution); padding-bottom: 0.1rem; }
.directory-row:first-child .footer-link:nth-child(1) { box-shadow: inset 0 -2px 0 var(--accent-execution); }
.directory-row:first-child .footer-link:nth-child(2) { box-shadow: inset 0 -2px 0 var(--accent-meaning); }
.directory-row:first-child .footer-link:nth-child(3) { box-shadow: inset 0 -2px 0 var(--accent-foundation); }
.directory-row:first-child .footer-link:nth-child(4) { box-shadow: inset 0 -2px 0 var(--accent-drive); }
.footer-link:hover, .footer-credit:hover { color: var(--accent); }
.footer-bottom { display: flex; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: 1.6rem; border-top: 1px solid rgba(238,244,251,0.16); padding-top: 1.1rem; color: var(--chrome-muted, #aebdcb); font-size: 0.78rem; }
.footer-bottom p { margin: 0; }
.footer-credit { color: var(--chrome-muted, #aebdcb); }
@media (max-width: 820px) { .footer-main { grid-template-columns: 1fr; gap: 1.75rem; } .footer-context { border-left: 0; border-top: 1px solid rgba(238,244,251,0.16); padding-left: 0; padding-top: 1.25rem; } .directory-row { grid-template-columns: 1fr; gap: 0.5rem; } .footer-bottom { display: grid; justify-content: start; } }

/* ── Prototype hub (the chooser page) ── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 24px 0 48px; }
.hub-card { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; }
.hub-card:hover { border-color: var(--primary); }
.hub-card .ms { font-size: 30px; color: var(--primary); }
.hub-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-transform); margin: 10px 0 6px; font-size: 1.3rem; }
.hub-card p { margin: 0; color: var(--ink-muted); }
.hub-card .hub-tag { font-family: var(--font-ui); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--accent); }

@media (max-width: 860px) {
  .lay-split-nav { grid-template-columns: 1fr; }
  .sn-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .sn-rail > * { flex: 1 1 200px; }
}
@media (max-width: 720px) {
  .lay-feature-stack { grid-template-columns: 1fr; }
  .blk-def { grid-template-columns: 1fr; row-gap: 4px; align-items: start; }
  .def-term { margin-top: 6px; }
}

/* ── v1.3 card style-profile variants (ADR-009) — additive; unused without a style ── */
.card-band-left::before { inset: 0 auto 0 0; width: 4px; height: auto; }
.card-band-none::before { display: none; }
.card-border-mode { border-color: color-mix(in srgb, var(--band, var(--border-soft)) 45%, var(--border-soft)); }
.card-compact { padding: 12px 14px 12px; gap: 7px; }
.card-compact .card-description { font-size: 0.94rem; }
.cm-iconrow { align-items: flex-start; }
.cm-iconrow .cm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-iconrow .type-badge { width: 38px; height: 38px; }
.card-action-link {
  background: none; color: var(--primary);
  padding: 0; border-radius: 0;
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: 0.95rem;
}
.card-action-link:hover { filter: none; text-decoration: underline; text-underline-offset: 0.18em; }
.card-wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.card-wide .card-meta { grid-column: 1; }
.card-wide .card-description { grid-column: 1; margin: 0; }
.card-wide .card-action { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
.lay-wide-stack { display: grid; gap: 14px; }
.eyebrow-pill {
  display: inline-block; border: 1px solid currentColor; border-radius: 999px;
  padding: 1px 10px; font-size: 0.72rem; letter-spacing: 0.04em;
  margin-left: 6px; vertical-align: middle; text-transform: uppercase;
}

/* ── v1.4 knob variants (round-3 design review) ── */
.cm-stacked { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cm-split { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cm-split .cm-row { display: flex; align-items: center; gap: 10px; }
.card-title-l .card-name { font-size: 2.2rem; line-height: 1.05; }
.card-title-s .card-name { font-size: 1rem; }
.card-roomy { padding: 26px 26px 22px; gap: 14px; }
.card-bandw-thick.card-band-left::before { width: 8px; }
.card-bandw-thick.card-band-top::before { height: 8px; }
.card-band-right::before { inset: 0 0 0 auto; width: 4px; height: auto; }
.card-bandw-thick.card-band-right::before { width: 8px; }
.card-borderw-thick { border-width: 2px; }
.card-border-none { border-color: transparent; }
.type-badge.ib-none { background: none; color: var(--band, var(--ink)); }
.type-badge.ib-light { background: color-mix(in srgb, var(--band, var(--primary)) 15%, var(--surface)); color: var(--band, var(--primary)); }
/* Each knob shape sets BOTH border-radius and clip-path so an explicit knob fully overrides
   the type-identity shape (shape-round/square/hex); setting only one axis lets the identity's
   other axis leak through (e.g. shape-round's 50% intersecting a hex clip = a rounded "lemon"). */
.type-badge.ishape-round { border-radius: 50%; clip-path: none; }
.type-badge.ishape-square { border-radius: calc(var(--radius) * 0.5); clip-path: none; }
.type-badge.ishape-none { border-radius: 0; clip-path: none; }
.type-badge.ishape-hex { border-radius: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* Icon size knob: badge + glyph scale together. Late-sheet position is load-bearing —
   it lets an explicit knob beat the context sizes (.row / .cm-iconrow) on source order. */
.type-badge.isize-s { width: 28px; height: 28px; }
.type-badge.isize-s .ms { font-size: 16px; }
.type-badge.isize-m { width: 34px; height: 34px; }
.type-badge.isize-m .ms { font-size: 20px; }
.type-badge.isize-l { width: 44px; height: 44px; }
.type-badge.isize-l .ms { font-size: 26px; }
.mode-pill { display: inline-block; border-radius: 999px; padding: 0 9px; }
.mode-pill.pill-none { border: 1px solid currentColor; }
.eyebrow-pill-tint { border: 1px solid; padding: 2px 10px; }

/* ── v1.4.1 corrections (round-4 review) ── */
.cm-stacked.cm-align-center { align-items: center; text-align: center; }
.lay-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .lay-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.blk-def-inline { display: block; }
.blk-def-inline .def-row { display: list-item; list-style: disc; margin-left: 1.2em; margin-bottom: 0.45em; }
.blk-def-inline .def-term { display: inline; font-family: var(--font-body); font-size: 1.02rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.blk-def-inline .def-blurb { display: inline; margin-left: 0.35em; font-size: 1.02rem; color: var(--ink-muted); }

.card-title-m .card-name { font-size: 1.45rem; line-height: 1.12; }
.card-body-muted .card-description, .card-body-muted .blk-prose, .card-body-muted .blk-lead, .card-body-muted .def-blurb { color: var(--ink-muted); }

/* ADR-018 T1 viewer filter bar (revealed by interact.js; [hidden] keeps it out without JS). */
.section-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-soft); background: transparent; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; color: inherit; }
.filter-pill .ms { font-size: 1rem; }
.filter-pill .filter-count { opacity: 0.6; font-variant-numeric: tabular-nums; }
.filter-pill[aria-pressed="true"] { background: var(--accent, #333); color: #fff; border-color: var(--accent, #333); }