/* ===== design_intelligence — components.css (SHARED, floor-safe primitives) =====
 *
 * The reusable component layer that sits BETWEEN foundation.css (direction-agnostic
 * base) and a direction-*.css token file. A builder pastes, in order:
 *     foundation.css  →  direction-<x>.css  →  components.css  →  page-specific styles
 * so that nav / buttons (colour-bound) / .photo-slot / .lead-index / .trust-row /
 * .proof / .cta / footer are all real, paste-able CSS — NOT trapped in a Python
 * generator. (Before this file existed, every fresh build reinvented these slightly
 * differently or reverse-engineered them from a proof HTML — the "skin-not-bones each
 * builder hand-rolls the same component" hazard.)
 *
 * Separation primitive: ONE per direction (never border AND shadow together). Each
 * direction-*.css sets --sep-shadow / --sep-border; the defaults below match the
 * hairline register, so a direction that sets neither still renders correctly.
 *
 * This file is the SINGLE SOURCE OF TRUTH: build_proof.py reads it verbatim (no inline
 * duplicate to drift). Keep it token-only — never hardcode a colour/size a token owns. */

/* ===== proof/page layout ===== */
body { background: var(--bg); color: var(--text); }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--page-pad); }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* margins: kill UA heading/paragraph defaults so spacing is controlled by the
   layout (flex gap / explicit rules), never by uneven browser em-margins. */
h1, h2, h3, p, figure, blockquote { margin: 0; }
.hero .eyebrow, .bcell--hero .eyebrow, .brutal-main .eyebrow { margin-bottom: var(--space-4); }
.hero .lead { margin-top: var(--space-6); }
h3 + .body { margin-top: var(--space-2); }

/* nav base + link scoping. :not(.btn) keeps the muted link colour OFF the CTA
   (an unscoped `.nav .links a{color:--muted}` outranks .btn-primary and paints
   the button label muted-on-accent = illegible). */
.nav { display:flex; align-items:center; justify-content:space-between;
       height:64px; border-bottom:1px solid var(--border); }
.nav .brand { font-weight:600; letter-spacing:-0.02em; font-size:1.0625rem; }
.nav .links { display:flex; gap:var(--space-8); align-items:center; }
.nav .links a { font-size:var(--fs-small); }
.nav .links a:not(.btn) { color:var(--muted); }
@media (hover:hover){ .nav .links a:not(.btn):hover { color:var(--text); } }

/* buttons wired to the accent/ink of the active direction. .btn base lives in
   foundation.css (shape/padding/press); these bind the colour + the quiet variant
   the hero anatomy (§3: "one filled CTA + one quiet text link") asks for. */
.btn-primary { background:var(--primary,#111); color:var(--on-primary,#fff); }
@media (hover:hover){ .btn-primary:hover { filter:brightness(1.08); } }
.btn-quiet { color:var(--muted); }
@media (hover:hover){ .btn-quiet:hover { color:var(--text); } }
.actions { display:flex; align-items:center; gap:var(--space-6); }

/* .lead-index — SHARED content component: the concrete specifics that fill any
   tall region with intentional content so it never reads as a void/missing-image
   placeholder (slop tell 33 that no token/contrast gate can see). Content-led;
   a short accent dash marks each item (NOT a 01/02/03 counter — these unordered
   specifics have no sequence: §1 tell 6). */
.lead-index { list-style:none; margin:0; padding:0; }
.lead-index li { display:flex; align-items:center; gap:var(--space-3);
                 padding:var(--space-3) 0; border-bottom:1px solid var(--border);
                 font-size:var(--fs-small); color:var(--muted); letter-spacing:-0.01em; }
.lead-index li:first-child { padding-top:0; }
.lead-index li:last-child { border-bottom:0; }
.lead-index li::before { content:""; flex:none; width:14px; height:2px;
                         border-radius:2px; background:var(--accent); }

/* quiet proof strip — inline, tabular, no giant gradient numbers */
.proof { display:flex; gap:var(--space-12); flex-wrap:wrap;
         padding-block:var(--space-12); border-top:1px solid var(--border);
         border-bottom:1px solid var(--border); }
.proof .stat .n { font-size:var(--fs-h3); font-weight:600; letter-spacing:-0.02em; }
.proof .stat .l { font-size:var(--fs-small); color:var(--muted); }

/* CTA band — surface with the direction's ONE separation primitive, one CTA.
   --sep-shadow / --sep-border are set per direction; both default to none. */
.cta { text-align:left; padding-block:clamp(64px,10vw,140px); }
.cta .box { box-shadow: var(--sep-shadow, none);
            border: var(--sep-border, none);   /* both default none: a token that sets ONLY
              --sep-shadow must NOT inherit a hairline too (= the banned border+shadow tell) */
            border-radius:var(--radius-card); background:var(--surface);
            padding:clamp(32px,5vw,64px); display:flex; align-items:center;
            justify-content:space-between; gap:var(--space-8); flex-wrap:wrap; }
.cta h2 { margin:0; }

footer { border-top:1px solid var(--border); padding-block:var(--space-8);
         color:var(--muted); font-size:var(--fs-small);
         display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); }

/* .photo-slot — SHARED stage-② image component. A warm/consumer site LIVES on real
   photography; a text-only layout there reads as unfinished. This is the honest,
   intentional placeholder the imagery stage emits BEFORE the real shot arrives: a
   correctly-proportioned figure with a warm fill, a camera glyph and an explicit
   "real photo goes here" caption. It is NOT tell 33 (void card: an empty tall panel
   reading as broken) — it announces itself as a photo slot; NOT tell 36 (a flat
   vector pretending to BE the product) — it never masquerades as the real thing.
   Swap the inner .ps-frame for an <img>/<picture> and the layout is unchanged. */
.photo-slot { position:relative; margin:0; }
.photo-slot .ps-frame { position:relative; width:100%; height:100%; min-height:inherit;
    border-radius:var(--radius-card); overflow:hidden;
    background:
      radial-gradient(120% 90% at 78% 0%, var(--accent-soft, rgba(128,128,128,0.08)), transparent 60%),
      linear-gradient(180deg, var(--surface), var(--bg));
    box-shadow: inset 0 0 0 1px var(--border);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--space-3); text-align:center; padding:var(--space-8); }
/* When an overlaid .ps-chip is present, reserve bottom room so the centred caption
   never collides with the chip in a short frame (the chip is absolute bottom-left; a
   ~240px frame at the caption's centre overlapped the chip — real, render-only bug).
   :has() targets only chip-bearing slots so no space is wasted otherwise; browsers
   without :has() fall back to the pre-fix behaviour (never worse). */
.photo-slot:has(.ps-chip) .ps-frame { padding-bottom: var(--space-16); }
.photo-slot .ps-icon { width:34px; height:34px; color:var(--accent); opacity:0.85; }
.photo-slot .ps-cap { font-size:var(--fs-small); color:var(--muted); max-width:24ch;
    letter-spacing:-0.005em; }
/* floating info chip — a real, useful status label overlaid on the photo */
.photo-slot .ps-chip { position:absolute; left:var(--space-4); bottom:var(--space-4);
    background:var(--surface); box-shadow:var(--shadow-2); border-radius:var(--radius-pill);
    padding:var(--space-2) var(--space-4); display:flex; align-items:center; gap:var(--space-2);
    font-size:var(--fs-small); }
.photo-slot .ps-chip .dot { flex:none; width:8px; height:8px; border-radius:50%;
    background:var(--primary); }
.photo-slot .ps-chip b { font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.photo-slot .ps-chip span { color:var(--muted); }

/* .trust-row — reassurance specifics for warm/consumer directions (a caring,
   content-led list, NOT a 01/02/03 sequence: these are unordered promises). */
.trust-row { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
    gap:var(--space-3); }
.trust-row li { display:flex; align-items:center; gap:var(--space-3);
    font-size:var(--fs-body); color:var(--text); letter-spacing:-0.01em; }
.trust-row li svg { flex:none; width:20px; height:20px; color:var(--primary); }