/*
  claude-system.css — shared cohesion layer (Phase 4)
  Loaded after every original stylesheet, before claude-tokens-{a|b|c}.css.
  Never hardcodes a color: everything reads --c-* tokens defined per variant.
  Concepts are preserved; only material, radius, and color language converge.
*/

/* ---------- 0. Radius family + base type ---------- */

:root {
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

html, body {
  background: var(--c-bg-0);
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ---------- 1. Global grain (one overlay for the whole page) ---------- */

body::after {
  content: "";
  position: fixed;
  z-index: 95;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: var(--c-grain-opacity, .07);
  pointer-events: none;
}

/* The old per-section tiles retire in favor of the global one. */
.hero-visual::before { display: none; }

/* ---------- 2. Navigation ---------- */

.nav-glass {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-hairline);
  background:
    radial-gradient(ellipse 220px 110px at 2% -10%, rgba(var(--c-accent-rgb), .16), rgba(var(--c-accent-rgb), .05) 46%, transparent 74%),
    var(--c-nav-fill);
  box-shadow: inset 0 1px 0 var(--c-topline), inset 0 -1px 0 var(--c-hairline);
}

.nav-glass::before {
  background:
    radial-gradient(ellipse 112px 34px at 7% 0, var(--c-topline), transparent 72%),
    linear-gradient(112deg, var(--c-topline), transparent 30% 76%, var(--c-topline));
  opacity: .4;
}

@media (min-width: 761px) {
  .site-header.is-compact .nav-glass {
    border-radius: calc(var(--r-lg) - 4px);
    background:
      radial-gradient(ellipse 190px 104px at 2% -10%, rgba(var(--c-accent-rgb), .26), rgba(var(--c-accent-rgb), .1) 46%, transparent 74%),
      var(--c-nav-fill-compact);
    box-shadow: var(--c-shadow-raised), inset 0 1px 0 var(--c-topline), inset 0 -1px 0 var(--c-hairline);
  }
}

.nav-link { color: var(--c-text-mid); border-radius: var(--r-sm); }
.nav-link:hover { color: var(--c-text-hi); background: rgba(var(--c-accent-rgb), .16); }

.nav-cta,
.button {
  border-radius: var(--r-sm);
  background: var(--c-btn-fill);
  color: var(--c-btn-text);
  box-shadow: var(--c-shadow-rest), inset 0 1px 0 var(--c-topline);
}

.nav-cta span:last-child,
.button span:last-child { color: var(--c-accent); }

/* ---------- 3. Hero (re-tint only) ---------- */

.hero { background: var(--c-bg-0); }

.hero-copy h1 { color: var(--c-text-hi); }

.xx-mark {
  border-radius: 4px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: .035em .035em 0 rgba(var(--c-shadow-rgb), .28);
}

.hero-copy > p { color: var(--c-text-mid); }

.scan-form input {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-hairline-strong);
  background: var(--c-field-fill);
  color: var(--c-text-hi);
}

.scan-form input::placeholder { color: var(--c-text-low); }

.scan-form input:focus {
  border-color: var(--c-accent);
  background: var(--c-field-fill-focus);
  box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18);
}

.scan-form .button { box-shadow: var(--c-glow-cta), var(--c-shadow-rest); }

.control-note { color: var(--c-text-low); }
.founder-link { color: var(--c-text-hi); }
.founder-arrow { color: var(--c-text-mid); }
.founder-link:hover .founder-arrow { color: var(--c-text-hi); }

.founder-avatar {
  border-color: var(--c-hairline-strong);
  box-shadow: var(--c-shadow-rest);
}

/* Hero visual panel: keep the media, converge the frame + scrim.
   The panel is always dark media, so its local text tokens stay light
   regardless of the page theme. */
.hero-visual {
  --paper: #f2f0ec;
  --paper-rgb: 242, 240, 236;
  --ink: #261923;
  --ink-rgb: 38, 25, 35;
  border-radius: var(--r-lg);
  background: var(--c-panel-floor);
  color: #f2f0ec;
}

.hero-visual::after {
  box-shadow:
    inset 0 1px 0 var(--c-topline),
    inset 0 0 0 1px var(--c-hairline),
    inset 0 -1px 0 rgba(0, 0, 0, .34);
}

.background-scrim {
  background:
    radial-gradient(circle at 52% 48%, rgba(var(--c-scrim-rgb), .05), rgba(var(--c-scrim-rgb), .35) 86%),
    linear-gradient(90deg, rgba(var(--c-scrim-rgb), .3), rgba(var(--c-scrim-rgb), .08) 48%, rgba(var(--c-scrim-rgb), .4)),
    rgba(var(--c-scrim-rgb), .14);
}

.hero button:focus-visible,
.hero input:focus-visible,
.hero a:focus-visible,
.brand:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ---------- 4. Statement chapter: re-tint + mesh backdrop ---------- */

.decision-rail { --decision-bg: var(--c-bg-0); }

.decision-rail[data-motion-style="scroll-highlight"] {
  --highlight-muted: var(--c-statement-rest);
}

:root { --statement-upcoming: var(--c-statement-rest); }

.decision-rail[data-motion-style="scroll-highlight"] .decision-statement-stage {
  background:
    radial-gradient(ellipse 46% 38% at 30% 38%, var(--c-mesh-a), transparent 70%),
    radial-gradient(ellipse 40% 34% at 72% 62%, var(--c-mesh-b), transparent 70%),
    var(--c-bg-0);
}

.decision-rail-title { color: var(--c-text-hi); }
.decision-rail-subheading { color: var(--c-text-mid); }

/* ---------- 5. Before/after browser windows ---------- */

.journey-component.window-journey {
  --window-surface: var(--c-window-surface);
  --window-chrome: var(--c-window-chrome);
  --window-edge: var(--c-hairline-strong);
  --window-radius: var(--r-lg);
  --status-red: var(--c-status-bad);
  --status-amber: var(--c-status-warn);
}

.browser-window::before {
  box-shadow:
    inset 0 1px 0 var(--c-topline),
    inset 0 0 0 1px var(--c-hairline);
}

.before-window,
.after-window { box-shadow: var(--c-shadow-float); }

.browser-chrome {
  background: var(--c-window-chrome);
  box-shadow: inset 0 -1px 0 var(--c-hairline);
}

.traffic-lights i { background: var(--c-text-mid); }
.traffic-lights i:nth-child(2) { background: var(--c-text-low); }
.traffic-lights i:nth-child(3) { background: var(--c-hairline-strong); }

.browser-address {
  border-radius: var(--r-sm);
  background: var(--c-field-inset);
  color: var(--c-text-hi);
  box-shadow: inset 0 1px 2px rgba(var(--c-shadow-rgb), .1);
}

.browser-favicon {
  border-radius: 6px;
  background: var(--c-chip-fill);
  box-shadow: 0 1px 2px rgba(var(--c-shadow-rgb), .2);
}

/* Inner panels become real cards: the explicit cohesion ask. */
.browser-content.decision-stops {
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px);
  gap: clamp(14px, 1.4vw, 20px);
}

.browser-content .state-card {
  padding: var(--card-pad);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-card-on-window);
  box-shadow: inset 0 1px 0 var(--c-topline), var(--c-shadow-rest);
  translate: 0 clamp(8px, 1.4vh, 14px);
}

.state-card h3 { color: var(--c-text-hi); }
.state-card > p:last-child,
.solution-inner > p:last-child { color: var(--c-text-mid); }

.status-subject {
  background: var(--c-window-surface);
  box-shadow:
    0 0 0 2px var(--c-window-surface),
    var(--c-shadow-rest);
}

/* Agent logo chips keep a light fill so brand marks stay legible on any theme. */
.status-subject.agent-subject { background: var(--c-logo-chip, var(--c-window-surface)); }

.ghost-subject {
  border-color: var(--c-hairline-strong);
  box-shadow: 0 0 0 2px var(--c-window-surface);
}

.subject-badge {
  background: var(--c-surface-solid);
  color: var(--c-text-hi);
  box-shadow: 0 0 0 2px var(--c-window-surface), var(--c-shadow-rest);
}

.badge-pending, .badge-ghost { color: var(--c-text-low); }
.badge-resolved { background: var(--c-accent); color: var(--c-accent-ink); }
.badge-expression { color: var(--c-text-hi); }
.badge-expression.is-confused { background: var(--c-status-warn); }
.badge-expression.is-unimpressed { background: var(--c-surface-solid); }
.badge-expression.is-skeptical { background: var(--c-field-inset); }

.window-stage.is-micro-ready .subject-badge.is-thinking {
  background: var(--c-surface-solid) !important;
  color: var(--c-text-low) !important;
}

.page-subject { background: var(--c-field-inset); }
.page-sheet { background: rgba(var(--c-sheet-rgb), var(--page-alpha, .8)); box-shadow: 0 2px 5px rgba(var(--c-shadow-rgb), .2); }
.page-sheet::before, .page-sheet::after { background: var(--c-window-surface); }
.page-owner { border-color: var(--c-window-surface); background: var(--c-surface-solid); }

.handover-message { color: var(--c-text-hi); }
.handover-rule { background: var(--c-accent); }

/* ---------- 6. Pryor difference ---------- */

.pryor-difference { background: var(--c-bg-1); }
.pd-kicker, .pd-note-kicker { color: var(--c-text-low); }
.pd-header h2, .pd-note-title { color: var(--c-text-hi); }
.pd-sub, .pd-note-lines { color: var(--c-text-mid); }
.pd-note-icon { color: var(--c-text-hi); }
.pd-baseline { color: var(--c-text-low); }

/* The ink circle is a screen: it stays dark in every variant. */
.pd-circle-ink {
  background: var(--c-console-bg);
  box-shadow: var(--c-shadow-float);
}

.pd-console { background: var(--c-console-bg-2); border-radius: var(--r-sm); }

.pd-circle-glass {
  background: var(--c-surface);
  -webkit-backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
  backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
  border: 1px solid var(--c-hairline);
  box-shadow: inset 0 1px 0 var(--c-topline), var(--c-shadow-raised);
}

@supports not (backdrop-filter: blur(1px)) {
  .pd-circle-glass { background: var(--c-surface-solid); }
}

.pd-circle-glass .pd-sonar path { fill: var(--c-sonar-slice); }
.pd-sonar .pd-sonar-core-circle { fill: var(--c-accent); stroke: var(--c-hairline-strong); }
.pd-sonar circle:last-of-type { fill: var(--c-accent); stroke: var(--c-console-bg); }
.pd-core-text { color: var(--c-accent-ink); }

.pd-mockup {
  background: var(--c-mock-surface);
  border-color: var(--c-mock-hairline);
  border-radius: var(--r-md);
}

.pd-mock-chrome { border-bottom-color: var(--c-mock-hairline); }
.pd-mock-chrome i, .pd-mock-bar, .pd-mock-media, .pd-mock-thumb { background: var(--c-mock-bar); }
.pd-mock-cta { background: var(--c-mock-bar-strong); }

.pd-select-frame rect { stroke: var(--c-mock-marquee); }
.pd-select-handle { background: var(--c-mock-marquee); }

.pd-cursor svg path { fill: var(--c-text-hi); stroke: var(--c-accent); }
.pd-cursor span {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: transparent;
  box-shadow: var(--c-shadow-rest);
}

.pd-ring-chip {
  background: var(--c-chip-fill);
  color: var(--c-chip-text);
  border: 1px solid var(--c-hairline);
  box-shadow: var(--c-shadow-rest);
}

/* ---------- 7. (retired: night-chapter fluted dividers) ---------- */

/* ---------- 8. Playbooks zone ---------- */

.pb-chapter {
  --night: var(--c-night-bg);
  --night-panel: var(--c-surface-solid);
  --pb-hair: var(--c-hairline);
  --pb-hair-strong: var(--c-hairline-strong);
  --pb-head-c: var(--c-text-hi);
  --pb-body-c: var(--c-text-mid);
  --pb-micro-c: var(--c-text-low);
  --pb-lime: var(--c-accent-rgb);
  --pb-radius: var(--r-lg);
  background: var(--c-night-bg);
}

.pb-zone-playbooks::before {
  background: radial-gradient(closest-side, var(--c-mesh-a), transparent 72%);
  filter: blur(2px);
}

/* Category recolor (chroma discipline lives in the token files). */
.pb-card[data-pb-cat="ab"]   { --pb-c: var(--c-cat-1-rgb); }
.pb-card[data-pb-cat="aeo"]  { --pb-c: var(--c-cat-2-rgb); }
.pb-card[data-pb-cat="pers"] { --pb-c: var(--c-cat-3-rgb); }
.pb-card[data-pb-cat="acct"] { --pb-c: var(--c-cat-4-rgb); }

.pb-card {
  border-radius: var(--r-lg);
  border-color: var(--c-poster-hairline);
  background: var(--c-poster-bg);
  box-shadow: var(--c-shadow-raised), inset 0 1px 0 var(--c-poster-topline);
}

.pb-card:hover {
  border-color: rgba(var(--pb-c), .38);
  box-shadow: var(--c-shadow-float), inset 0 1px 0 var(--c-poster-topline);
}

.pb-final-glass .pb-card { box-shadow: var(--c-shadow-raised), inset 0 1px 0 var(--c-poster-topline); }

/* Art steps back: stronger foot scrim + reduced intensity so copy leads. */
.pb-final-glass .pb-card-art::before { opacity: .62; }
.pb-final-glass .pb-card:hover .pb-card-art::before { opacity: .72; }

.pb-final-glass .pb-card-art::after {
  background:
    linear-gradient(180deg, rgba(var(--c-poster-bg-rgb), .58) 0%, transparent 20%, transparent 40%, rgba(var(--c-poster-bg-rgb), .72) 62%, rgba(var(--c-poster-bg-rgb), .99) 88%),
    linear-gradient(90deg, rgba(var(--c-poster-bg-rgb), .32), transparent 22% 78%, rgba(var(--c-poster-bg-rgb), .32));
}

.pb-card-tag {
  border-radius: var(--r-sm);
  border-color: rgba(var(--pb-c), .3);
  background: rgba(var(--c-poster-bg-rgb), .7);
  color: rgb(var(--pb-c));
}

.pb-card-title { color: var(--c-poster-text); }
.pb-card-line { color: var(--c-poster-text-mid); }

/* Mechanic glyph: a simple stroke pictogram of what the play does. */
.pb-card .pb-card-art::after { pointer-events: none; }

.pb-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 26%;
  left: 50%;
  width: 84px;
  height: 84px;
  background: rgba(var(--pb-c), .8);
  transform: translateX(-50%);
  opacity: .85;
  -webkit-mask: var(--pb-glyph) center / contain no-repeat;
  mask: var(--pb-glyph) center / contain no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
  pointer-events: none;
}

.pb-card[data-pb-cat="ab"] {
  --pb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='18' width='30' height='42' rx='5'/%3E%3Crect x='46' y='18' width='30' height='42' rx='5' fill='%23fff' fill-opacity='.16'/%3E%3Cpath d='M14 30h18M14 38h12'/%3E%3Cpath d='M52 30h18M52 38h12'/%3E%3Cpath d='M56 50l4 4 8-9'/%3E%3C/svg%3E");
}

.pb-card[data-pb-cat="pers"] {
  --pb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='8'/%3E%3Cpath d='M10 52c2.5-8 9-11 14-11s11.5 3 14 11'/%3E%3Crect x='48' y='18' width='28' height='16' rx='4'/%3E%3Crect x='48' y='42' width='28' height='16' rx='4' fill='%23fff' fill-opacity='.16'/%3E%3Cpath d='M40 26h6m-6 24h6'/%3E%3C/svg%3E");
}

.pb-card[data-pb-cat="aeo"] {
  --pb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 20h56a6 6 0 0 1 6 6v22a6 6 0 0 1-6 6H36l-12 10v-10h-10a6 6 0 0 1-6-6V26a6 6 0 0 1 6-6z'/%3E%3Cpath d='M20 32h44M20 40h30'/%3E%3Cpath d='M56 44l4 4 8-9' /%3E%3C/svg%3E");
}

.pb-card[data-pb-cat="acct"] {
  --pb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 10h26l12 12v50a2 2 0 0 1-2 2H24a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2z'/%3E%3Cpath d='M50 10v12h12'/%3E%3Cpath d='M30 40h24M30 48h18'/%3E%3Ccircle cx='36' cy='62' r='6' fill='%23fff' fill-opacity='.16'/%3E%3Cpath d='M46 66c1-4 5-6 8-6' /%3E%3C/svg%3E");
}

/* Custom playbook command = glass card */
.pb-command {
  border-radius: var(--r-md);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  box-shadow: inset 0 1px 0 var(--c-topline);
  color: var(--c-text-mid);
  -webkit-backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
  backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
}

.pb-command-symbol { color: var(--c-text-low); }
.pb-command-cursor { background: var(--c-text-mid); }
.pb-custom-title { color: var(--c-text-hi); }
.pb-custom-body { color: var(--c-text-mid); }

/* De-dupe: "nothing ships from a blank prompt" already closes the previous section. */
.pb-zone-playbooks .pb-keeper { display: none; }

/* ---------- 9. Integrations: flatten to two visual layers ---------- */

.pb-logo-mark {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  box-shadow: inset 0 1px 0 var(--c-topline), var(--c-shadow-rest);
  color: var(--c-text-mid);
}

.pb-logo-name { color: var(--c-text-low); }
.pb-final-glass .pb-logo-mark::before { background: radial-gradient(ellipse, var(--c-mesh-a), transparent 70%); }
.pb-integration-b .pb-logo-field::after,
.pb-integration-a .pb-logo-mark::after { background: linear-gradient(180deg, var(--c-hairline), transparent); }

/* Layer 1: one quiet aurora wash. Kills the seven-radial art + vignette. */
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-architecture::before {
  background:
    radial-gradient(ellipse 40% 64% at 38% 46%, var(--c-mesh-a), transparent 72%),
    radial-gradient(ellipse 40% 64% at 62% 54%, var(--c-mesh-b), transparent 72%);
  filter: blur(24px);
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 62% 84% at 50% 49%, #000 0 44%, rgba(0, 0, 0, .6) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 84% at 50% 49%, #000 0 44%, rgba(0, 0, 0, .6) 66%, transparent 100%);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-architecture::after {
  display: none;
}

/* Duo tokens */
#night-chapter .pb-schema-v3-signal-spine {
  --pb-v3-human: var(--c-duo-human-rgb);
  --pb-v3-agent: var(--c-duo-agent-rgb);
}

/* Layer 2: every stage is the same glass card. */
#night-chapter .pb-schema-v3-signal-spine .pb-website-stage,
#night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage {
  border-radius: var(--r-md);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  box-shadow: inset 0 1px 0 var(--c-topline), var(--c-shadow-raised);
  -webkit-backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
  backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-sat));
}

#night-chapter .pb-schema-v3-signal-spine .pb-website-stage::before,
#night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage::before { display: none; }

#night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage {
  border-color: rgba(var(--c-accent-rgb), .34);
}

#night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage::after {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(var(--c-accent-rgb), .16) 38%,
    rgba(var(--c-accent-rgb), .55) 50%,
    rgba(var(--c-accent-rgb), .16) 62%,
    transparent 90%) top / 100% 1px no-repeat;
}

#night-chapter .pb-schema-v3-signal-spine .pb-components { background: none; }

#night-chapter .pb-schema-v3-signal-spine .pb-output {
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--c-duo-human-rgb), .2);
  background: var(--c-surface);
  box-shadow: inset 0 1px 0 var(--c-topline), var(--c-shadow-rest);
}

#night-chapter .pb-schema-v3-signal-spine .pb-output + .pb-output {
  border: 1px solid rgba(var(--c-duo-agent-rgb), .26);
  background: var(--c-surface);
}

.pb-runtime-title { color: var(--c-text-hi); }
.pb-component-name, .pb-output-name { color: var(--c-text-hi); }
.pb-node-label, .pb-stage-label, .pb-component-label { color: var(--c-text-low); }
.pb-context-copy, .pb-stage-copy, .pb-component-copy { color: var(--c-text-mid); }

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-node-label { color: var(--c-text-low); }
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-context-copy { color: var(--c-text-mid); }
#night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage > .pb-stage-label { color: rgba(var(--c-accent-rgb), .9); }
#night-chapter .pb-schema-v3-signal-spine .pb-output-stage > .pb-stage-label { color: var(--c-text-low); }

.pb-rail-mark,
#night-chapter .pb-schema-v3-signal-spine .pb-rail-mark,
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-rail-mark,
.pb-final-glass .pb-rail-mark {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  color: var(--c-text-mid);
  box-shadow: inset 0 1px 0 var(--c-topline);
}

.pb-rail-mark img { filter: var(--c-rail-logo-filter); }

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-context-input,
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-context-output {
  border-color: var(--c-hairline-strong);
}

/* Spine + connectors: hairlines and one accent, nothing else. */
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-runtime::before {
  background: linear-gradient(180deg,
    rgba(var(--c-duo-human-rgb), .2),
    rgba(var(--c-duo-human-rgb), .8) 30%,
    rgba(var(--c-accent-rgb), .85) 52%,
    rgba(var(--c-duo-human-rgb), .66) 78%,
    rgba(var(--c-duo-human-rgb), .1));
  box-shadow: 0 0 14px rgba(var(--c-accent-rgb), .12);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output-stage::before {
  background: linear-gradient(180deg,
    rgba(var(--c-accent-rgb), .66),
    rgba(var(--c-duo-human-rgb), .8) 58%,
    rgba(var(--c-duo-human-rgb), .14));
  box-shadow: 0 0 12px rgba(var(--c-accent-rgb), .1);
}

#night-chapter .pb-schema-v3-signal-spine .pb-output-stage::after {
  border-color: rgba(var(--c-accent-rgb), .6);
  background: var(--c-surface-solid);
  box-shadow: 0 0 10px rgba(var(--c-accent-rgb), .12);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-route,
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-route-in {
  background: linear-gradient(90deg, transparent, rgba(var(--c-duo-human-rgb), .5));
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-route-out {
  background: linear-gradient(90deg, rgba(var(--c-duo-agent-rgb), .5), transparent);
}

#night-chapter .pb-schema-v3-signal-spine .pb-route::after {
  background: rgba(var(--c-accent-rgb), .6);
  box-shadow: 0 0 10px rgba(var(--c-accent-rgb), .12);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output-icon {
  color: rgba(var(--c-duo-human-rgb), .82);
  filter: none;
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output + .pb-output .pb-output-icon {
  color: rgba(var(--c-duo-agent-rgb), .86);
  filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #night-chapter .pb-schema-v3-signal-spine .pb-website-stage,
  #night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage,
  #night-chapter .pb-schema-v3-signal-spine .pb-output,
  .pb-command { background: var(--c-surface-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  #night-chapter .pb-schema-v3-signal-spine .pb-website-stage,
  #night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage,
  #night-chapter .pb-schema-v3-signal-spine .pb-output,
  .pb-command,
  .pd-circle-glass {
    background: var(--c-surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- 10. Timeline ---------- */

.pb-entry-tag { color: var(--c-text-low); }
.pb-entry-label { color: var(--c-text-hi); }
.pb-entry-line { color: var(--c-text-mid); }

.pb-bar {
  background: linear-gradient(90deg, rgba(var(--c-streak-rgb), .9), rgba(var(--c-streak-rgb), .06));
}

.pb-entry-3 .pb-bar {
  background: linear-gradient(90deg,
    rgba(var(--c-streak-rgb), .9),
    rgba(var(--c-streak-rgb), .6) calc(100% - 250px),
    rgba(var(--c-accent-rgb), .8) calc(100% - 96px),
    rgba(var(--c-accent-rgb), 0));
}

.pb-gantt::before {
  background: repeating-linear-gradient(90deg, var(--c-hairline) 0 1px, transparent 1px 120px);
}

@media (max-width: 639px) {
  .pb-bar {
    background: linear-gradient(180deg, rgba(var(--c-streak-rgb), .9), rgba(var(--c-streak-rgb), .35));
  }

  .pb-entry-3 .pb-bar {
    background: linear-gradient(180deg,
      rgba(var(--c-streak-rgb), .9),
      rgba(var(--c-streak-rgb), .6) calc(100% - 150px),
      rgba(var(--c-accent-rgb), .8) calc(100% - 64px),
      rgba(var(--c-accent-rgb), 0));
  }
}

.pb-kicker, .pb-keeper, .pb-logo-label { color: var(--c-text-low); }
.pb-title { color: var(--c-text-hi); }
.pb-sub { color: var(--c-text-mid); }

/* ---------- 11. Report close ---------- */

.report-close {
  border-radius: 0;
  background: var(--c-bg-0);
  color: var(--c-text-hi);
}

.report-close--merged {
  background:
    radial-gradient(circle, var(--c-dot-grid) .7px, transparent .8px),
    radial-gradient(ellipse 44% 30% at 50% 8%, var(--c-mesh-a), transparent 72%),
    var(--c-bg-0);
  background-size: 10px 10px, 100% 100%, 100% 100%;
}

.report-close__eyebrow { color: var(--c-text-low); }
.report-close__title { color: var(--c-text-hi); }
.report-close__lede { color: var(--c-text-mid); }
.report-close__proof { color: var(--c-text-hi); }

.report-close--merged .stream-line { stroke: rgba(var(--c-streak-rgb), var(--stream-alpha, .38)); }
.report-close--merged .stream-cable-label { fill: var(--c-text-low); stroke: var(--c-bg-0); }
.report-close--merged .stream-group-label { fill: var(--c-text-hi); }
.report-close--merged .stream-terminal { fill: var(--c-text-low); stroke: var(--c-bg-0); }

.report-close--merged .report-close__merged-bloom-plane { border-color: var(--c-hairline); mix-blend-mode: normal; }
.report-close--merged .report-close__merged-bloom-plane--accent { background: linear-gradient(180deg, rgba(var(--c-accent-rgb), .05), rgba(var(--c-accent-rgb), .1)); }
.report-close--merged .report-close__merged-bloom-plane--deep { background: linear-gradient(180deg, var(--c-mesh-b), rgba(var(--c-accent-rgb), .06)); }
.report-close--merged .report-close__merged-bloom-plane--neutral { background: linear-gradient(180deg, var(--c-mesh-a), transparent); }

.report-close--merged .report-close__form {
  border-radius: var(--r-md);
  border: 1px solid var(--c-form-hairline);
  background: var(--c-form-fill);
  box-shadow: inset 0 1px 0 var(--c-form-topline), var(--c-shadow-float);
}

.report-close--merged .report-close__label { color: var(--c-form-label); }

.report-close__input,
.report-close__submit { border-radius: var(--r-sm); }

.report-close__input {
  border-color: var(--c-form-input-border);
  background: var(--c-form-input-fill);
  color: var(--c-form-input-text);
}

.report-close__input::placeholder { color: var(--c-form-input-placeholder); }

.report-close--merged .report-close__input:focus {
  border-color: var(--c-accent);
  background: var(--c-form-input-fill-focus);
  box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .22);
}

.report-close--merged .report-close__submit {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--c-glow-cta);
}

.report-close--merged .report-close__error { color: var(--c-form-error); }

.report-close--merged .report-close__output-line,
.report-close--merged .report-close__output-pulse { stroke: var(--c-accent); }
.report-close--merged .report-close__output-terminal { fill: var(--c-accent); stroke: var(--c-bg-0); }
.report-close--merged .report-close__output-tag { color: var(--c-text-low); }

.report-close__trust { color: var(--c-text-mid); }
.report-close__closing-strip { border-top-color: var(--c-hairline-strong); }
.report-close__closing-lead { color: var(--c-text-hi); }
.report-close__closing-copy { color: var(--c-text-mid); }

.report-close__submit:focus-visible,
.report-close__input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-transparency: reduce) {
  .report-close--merged .report-close__form {
    background: var(--c-surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- 12. Print + reduced-motion respect ---------- */

@media print {
  body::after { display: none; }
}