/*
  claude-merged.css — B (light) + C (dark) merged into one alternating-chapter page.
  Loads after claude-system.css. One structural system (claude-system.css),
  two mode token sets: :root carries the light set (page default), .m-dark
  re-scopes the same tokens for dark chapters. Custom properties inherit, so
  tagging a chapter element re-modes everything inside it.
*/

/* ============ 0. Lime: one brand accent, handled per surface ============ */

:root {
  --lime-on-dark: #e5f00b;  /* full lime: only on dark surfaces */
  --lime-on-light: #5d6a08; /* filled controls on light, white text passes AA */
  --lime-deep: #6d7c0c;     /* borders / underlines / small glyphs on light */
  --m-ink-chip: #14161c;    /* the dark chip that carries lime inside light chapters */
}

/* ============ 1. Light mode = page root (from variant B, cobalt retired) ============ */

:root {
  color-scheme: light;

  --c-bg-0: #eef1f4;
  --c-bg-1: #e8ecf1;
  --c-surface: rgba(255, 255, 255, .58);
  --c-surface-solid: #fafbfc;
  --c-glass-blur: 18px;
  --c-glass-sat: 140%;
  --c-hairline: rgba(20, 22, 28, .08);
  --c-hairline-strong: rgba(20, 22, 28, .16);
  --c-topline: rgba(255, 255, 255, .9);
  --c-text-hi: #14161c;
  --c-text-mid: #4c5361;
  --c-text-low: #626977;
  --c-accent: var(--lime-on-light);
  --c-accent-rgb: 93, 106, 8;
  --c-accent-ink: #fdfeef;
  --c-duo-human-rgb: 20, 22, 28;
  --c-duo-agent-rgb: 76, 122, 196;
  --c-status-bad: #d8506b;
  --c-status-warn: #e3c66f;
  --c-shadow-rgb: 28, 38, 64;
  --c-shadow-rest: 0 2px 8px rgba(28, 38, 64, .08);
  --c-shadow-raised: 0 16px 40px rgba(28, 38, 64, .1);
  --c-shadow-float: 0 6px 18px rgba(28, 38, 64, .08), 0 34px 80px rgba(28, 38, 64, .14);
  --c-glow-cta: 0 0 36px rgba(229, 240, 11, .18), 0 10px 26px rgba(28, 38, 64, .16);
  --c-grain-opacity: .06;
  --c-mesh-a: rgba(151, 183, 226, .14);
  --c-mesh-b: rgba(224, 170, 140, .1);
  --c-flute-line: rgba(20, 22, 28, .05);

  --c-nav-fill: rgba(250, 252, 254, .55);
  --c-nav-fill-compact: rgba(250, 252, 254, .74);
  --c-btn-fill: var(--m-ink-chip);
  --c-btn-text: #fafbfc;
  --c-field-fill: rgba(255, 255, 255, .78);
  --c-field-fill-focus: #ffffff;
  --c-field-inset: rgba(20, 22, 28, .05);
  --c-chip-fill: #14161c;
  --c-chip-text: #fafbfc;
  --c-logo-chip: #ffffff;

  --c-panel-floor: #14161c;
  --c-scrim-rgb: 16, 20, 30;
  --c-statement-rest: #a8afbc;

  --c-window-surface: #fafbfc;
  --c-window-chrome: #eff2f5;
  --c-card-on-window: rgba(255, 255, 255, .72);
  --c-sheet-rgb: 20, 22, 28;

  --c-console-bg: #171a21;
  --c-console-bg-2: #232835;
  --c-sonar-slice: rgba(20, 22, 28, .07);
  --c-mock-surface: #ffffff;
  --c-mock-hairline: rgba(20, 22, 28, .08);
  --c-mock-bar: rgba(20, 22, 28, .1);
  --c-mock-bar-strong: rgba(20, 22, 28, .22);
  --c-mock-marquee: rgba(20, 22, 28, .5);

  --c-night-bg: #e8ecf1;
  --c-poster-bg: #14171f;
  --c-poster-bg-rgb: 20, 23, 31;
  --c-poster-hairline: rgba(255, 255, 255, .12);
  --c-poster-topline: rgba(255, 255, 255, .09);
  --c-poster-text: #f2f4f8;
  --c-poster-text-mid: rgba(242, 244, 248, .74);
  /* one category family page-wide (C's aurora four; posters are dark media in both modes) */
  --c-cat-1-rgb: 224, 130, 79;
  --c-cat-2-rgb: 92, 140, 224;
  --c-cat-3-rgb: 63, 184, 168;
  --c-cat-4-rgb: 143, 122, 222;
  --c-rail-logo-filter: none;
  --c-streak-rgb: 20, 22, 28;

  --c-dot-grid: rgba(20, 22, 28, .05);
  --c-form-fill: rgba(255, 255, 255, .62);
  --c-form-hairline: rgba(20, 22, 28, .1);
  --c-form-topline: rgba(255, 255, 255, .95);
  --c-form-label: #4c5361;
  --c-form-input-fill: #ffffff;
  --c-form-input-fill-focus: #ffffff;
  --c-form-input-border: rgba(20, 22, 28, .24);
  --c-form-input-text: #14161c;
  --c-form-input-placeholder: #626977;
  --c-form-error: #b8324e;

  /* legacy re-points */
  --paper: #eef1f4;
  --paper-rgb: 238, 241, 244;
  --raised: #fafbfc;
  --ink: #14161c;
  --ink-rgb: 20, 22, 28;
  --lime: var(--lime-on-light);
  --lime-rgb: 93, 106, 8;
  --muted: #4c5361;
  --surface-paper: #eef1f4;
  --statement-upcoming: #a8afbc;
}

/* ============ 2. Dark mode chapters (from variant C, verbatim values) ============ */

.m-dark {
  color-scheme: dark;

  --c-bg-0: #0b0d12;
  --c-bg-1: #10131a;
  --c-surface: linear-gradient(155deg, rgba(214, 226, 255, .075), rgba(214, 226, 255, .022));
  --c-surface-solid: #171b24;
  --c-glass-blur: 20px;
  --c-glass-sat: 125%;
  --c-hairline: rgba(220, 232, 255, .1);
  --c-hairline-strong: rgba(220, 232, 255, .18);
  --c-topline: rgba(230, 240, 255, .15);
  --c-text-hi: #eef1f6;
  --c-text-mid: rgba(238, 241, 246, .66);
  --c-text-low: rgba(238, 241, 246, .5);
  --c-accent: var(--lime-on-dark);
  --c-accent-rgb: 229, 240, 11;
  --c-accent-ink: #1c2005;
  --c-duo-human-rgb: 232, 230, 218;
  --c-duo-agent-rgb: 127, 177, 236;
  --c-status-bad: #e0596a;
  --c-status-warn: #dfc16a;
  --c-shadow-rgb: 2, 4, 10;
  --c-shadow-rest: 0 2px 8px rgba(2, 4, 10, .35);
  --c-shadow-raised: 0 18px 46px rgba(2, 4, 10, .42);
  --c-shadow-float: 0 8px 22px rgba(2, 4, 10, .34), 0 40px 96px rgba(2, 4, 10, .5);
  --c-glow-cta: 0 0 42px rgba(229, 240, 11, .2), 0 10px 30px rgba(2, 4, 10, .4);
  --c-mesh-a: rgba(79, 116, 255, .09);
  --c-mesh-b: rgba(255, 122, 69, .075);
  --c-flute-line: rgba(220, 232, 255, .06);

  --c-btn-fill: #eef1f6;
  --c-btn-text: #12141a;
  --c-field-fill: rgba(214, 226, 255, .06);
  --c-field-fill-focus: rgba(214, 226, 255, .1);
  --c-field-inset: rgba(214, 226, 255, .06);
  --c-chip-fill: #10131a;
  --c-chip-text: #eef1f6;
  --c-logo-chip: #eef1f6;

  --c-console-bg: #12151c;
  --c-console-bg-2: #1d2230;
  --c-sonar-slice: rgba(238, 241, 246, .07);
  --c-mock-surface: #f2f5fa;
  --c-mock-hairline: rgba(15, 20, 30, .1);
  --c-mock-bar: rgba(15, 20, 30, .13);
  --c-mock-bar-strong: rgba(15, 20, 30, .26);
  --c-mock-marquee: rgba(15, 20, 30, .55);

  --c-night-bg: #0b0d12;
  --c-streak-rgb: 238, 241, 246;

  --c-dot-grid: rgba(238, 241, 246, .045);
  --c-form-fill: linear-gradient(180deg, rgba(214, 226, 255, .07), rgba(214, 226, 255, .015) 48%, transparent), rgba(13, 16, 24, .76);
  --c-form-hairline: rgba(220, 232, 255, .16);
  --c-form-topline: rgba(230, 240, 255, .2);
  --c-form-label: rgba(238, 241, 246, .76);
  --c-form-input-fill: rgba(11, 13, 18, .58);
  --c-form-input-fill-focus: rgba(11, 13, 18, .82);
  --c-form-input-border: rgba(220, 232, 255, .24);
  --c-form-input-text: #eef1f6;
  --c-form-input-placeholder: rgba(238, 241, 246, .5);
  --c-form-error: #ffc9d1;

  --paper: #0b0d12;
  --paper-rgb: 11, 13, 18;
  --raised: #12151c;
  --ink: #eef1f6;
  --ink-rgb: 238, 241, 246;
  --lime: var(--lime-on-dark);
  --lime-rgb: 229, 240, 11;
  --muted: #a3a9b5;
  --surface-paper: #0b0d12;
}

/* ============ 3. Page canvas + panel fills ============ */

/*
  One continuous dark-navy canvas behind everything. STATIC: it never animates
  and never blends with sections; panels simply sit on it (amigo.ai model).
*/
:root {
  --canvas-0: #0a0c11;
  --canvas-1: #10131b;
}

html {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--canvas-1), transparent 70%),
    var(--canvas-0);
}

body { background: transparent; }

/*
  Codex technique, adopted: every chapter paints one composite of
  (a) two soft corner radial washes in the page's two mesh hues and
  (b) a barely-there vertical step between two adjacent background tones.
  Alphas kept low enough that the gradient is felt, not seen.
*/
.hero.m-light {
  background:
    radial-gradient(circle at 12% 24%, var(--c-mesh-a), transparent 36%),
    radial-gradient(circle at 88% 70%, var(--c-mesh-b), transparent 38%),
    linear-gradient(180deg, #f2f4f7, var(--c-bg-0));
}

.decision-rail.m-light {
  --decision-bg: transparent;
  background:
    radial-gradient(circle at 86% 18%, var(--c-mesh-a), transparent 34%),
    radial-gradient(circle at 10% 78%, var(--c-mesh-b), transparent 36%),
    linear-gradient(180deg, var(--c-bg-0) 0%, #f1f3f6 46%, var(--c-bg-0) 100%);
}

/* Stage backgrounds inside the rail must not repaint flat fields over the chapter. */
.decision-rail.m-light .decision-statement-stage,
.decision-rail.m-light .window-scroll,
.decision-rail.m-light .window-stage.decision-network,
.decision-rail.m-light .journey-component.window-journey {
  background: transparent;
}

/* Mirrored horizontally: the bluish glow lives on the RIGHT so the dark-on-dark
   code panel (left circle) sits against the darker side. */
.pryor-difference.m-dark {
  background:
    radial-gradient(circle at 86% 30%, rgba(79, 116, 255, .11), transparent 40%),
    radial-gradient(circle at 12% 76%, rgba(255, 122, 69, .06), transparent 36%),
    linear-gradient(180deg, #12151d, var(--c-bg-1) 42%, #0e1117);
}

#night-chapter {
  background: transparent;
}

.pb-zone-playbooks.m-light {
  background:
    radial-gradient(circle at 12% 20%, var(--c-mesh-a), transparent 34%),
    linear-gradient(180deg, #f0f2f5, var(--c-bg-1));
}

.pb-zone-integration.m-light {
  background:
    radial-gradient(circle at 88% 30%, var(--c-mesh-a), transparent 36%),
    radial-gradient(circle at 10% 86%, var(--c-mesh-b), transparent 34%),
    linear-gradient(180deg, var(--c-bg-1), #e4e9ef);
}

/* The closing act (get-started + CTA) sits directly ON the canvas, full-bleed:
   no base fill of their own, just the shared static dot-grid texture. */
.pb-zone-timeline.m-dark {
  background:
    radial-gradient(circle, var(--c-dot-grid) .7px, transparent .8px);
  background-size: 10px 10px;
}

.report-close--merged.m-dark {
  background:
    radial-gradient(circle, var(--c-dot-grid) .7px, transparent .8px);
  background-size: 10px 10px;
}

/* Zones flow as chapters now: no hairline resets between them. */
.pb-zone + .pb-zone { border-top: 0; }

/* ============ 4. Section connection = panel rhythm (see claude-polish.css §6) ============
   The old fluted-seam system is deleted. Sections are rounded panels on the
   canvas; the gap between panels IS the transition. The closing act joins
   directly on the canvas: */
.pb-zone-timeline.m-dark { padding-bottom: clamp(40px, 6vh, 64px); }
.report-close--merged.m-dark { padding-top: clamp(40px, 5vh, 56px); }

/* ============ 5. Lime rules per surface ============ */

/* Light chapters: brand-true dark chips carry full lime. */
.m-light .xx-mark {
  background: var(--m-ink-chip);
  color: var(--lime-on-dark);
  box-shadow: .035em .035em 0 rgba(28, 38, 64, .22);
}

.m-light .button span:last-child,
.nav-cta span:last-child {
  color: var(--lime-on-dark);
}

.m-light .scan-form .button {
  box-shadow: 0 0 34px rgba(229, 240, 11, .16), var(--c-shadow-rest), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Resolved badges: ink chip + lime glyph inside light windows. */
.m-light .badge-resolved {
  background: var(--m-ink-chip);
  color: var(--lime-on-dark);
}

/* On the light surface itself lime appears only dropped: focus, hairline. */
.m-light .handover-rule { background: var(--lime-deep); }

/* Favicon chips are dark in both modes; their mark stays paper+lime. */
.browser-favicon { background: var(--m-ink-chip); }

/* Posters (dark media in both modes): tags sit on their own dark scrim. */
.pb-card-tag { background: rgba(20, 23, 31, .72); }
.pb-card::after { opacity: .95; }
.pb-card:hover { border-color: rgba(var(--pb-c), .5); }

/* Poster artwork keeps its native aurora hues: they are the page's category family now. */
.pb-final-glass .pb-card-art::before { filter: saturate(.92) brightness(.95); }

/* Light-zone timeline echo softening is not needed; dark timeline keeps C's look. */

/* ============ 6. Adaptive navbar ============ */

.site-header {
  --nav-fill: rgba(250, 252, 254, .55);
  --nav-fill-compact: rgba(250, 252, 254, .76);
  --nav-hairline: rgba(20, 22, 28, .08);
  --nav-topline: rgba(255, 255, 255, .85);
  --nav-text: #14161c;
  --nav-text-mid: #4c5361;
  --nav-shadow: 0 16px 40px rgba(28, 38, 64, .1);
}

.site-header[data-nav-mode="dark"] {
  --nav-fill: rgba(14, 17, 24, .58);
  --nav-fill-compact: rgba(14, 17, 24, .78);
  --nav-hairline: rgba(220, 232, 255, .12);
  --nav-topline: rgba(230, 240, 255, .13);
  --nav-text: #eef1f6;
  --nav-text-mid: rgba(238, 241, 246, .72);
  --nav-shadow: 0 16px 40px rgba(2, 4, 10, .4);
}

/* Flat color fill (transitions cleanly) + one constant lime kiss layer. */
.nav-glass,
.site-header.is-compact .nav-glass {
  background: var(--nav-fill);
  border: 1px solid var(--nav-hairline);
  box-shadow: inset 0 1px 0 var(--nav-topline), inset 0 -1px 0 var(--nav-hairline);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

@media (min-width: 761px) {
  .site-header.is-compact .nav-glass {
    background: var(--nav-fill-compact);
    box-shadow: var(--nav-shadow), inset 0 1px 0 var(--nav-topline), inset 0 -1px 0 var(--nav-hairline);
  }
}

.nav-glass::before {
  background:
    radial-gradient(ellipse 220px 110px at 2% -10%, rgba(229, 240, 11, .14), rgba(229, 240, 11, .05) 46%, transparent 74%);
  opacity: .8;
  transition: none;
}

.nav-link {
  color: var(--nav-text-mid);
  transition: color .35s ease, background-color .2s ease;
}

.nav-link:hover {
  color: var(--nav-text);
  background: rgba(229, 240, 11, .14);
}

/* Mode-invariant CTA: ink pill, white label, lime arrow. Passes on both chapters. */
.nav-cta {
  background: var(--m-ink-chip);
  color: #fafbfc;
  box-shadow: 0 2px 8px rgba(2, 4, 10, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.brand { position: relative; }
.brand img { transition: opacity .35s ease; }
.brand .brand-logo-dark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}

.site-header[data-nav-mode="dark"] .brand .brand-logo-light { opacity: 0; }
.site-header[data-nav-mode="dark"] .brand .brand-logo-dark { opacity: 1; }

.nav-link:focus-visible,
.nav-cta:focus-visible,
.brand:focus-visible {
  outline-color: var(--nav-text);
}

@media (prefers-reduced-motion: reduce) {
  .nav-glass, .site-header.is-compact .nav-glass, .nav-link, .brand img { transition: none; }
}

/* ============ 7. Chapter-specific reconciliations ============ */

/* The statement chapter is light: B rest values. */
.decision-rail[data-motion-style="scroll-highlight"] {
  --char-rest-blur: 9px;
  --char-rest-opacity: .3;
}

/* Statement backdrop: washes ride the chapter gradient instead of a flat stage. */
.decision-rail.m-light[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%);
}

/* Dark island: give the composition C's atmosphere behind the two circles. */
.pryor-difference.m-dark .pd-circle-glass {
  border-color: var(--c-hairline);
}

/* Integrations (light) schema: spine and connectors need ink-anchored strength on frost. */
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined.m-light .pb-runtime::before {
  background: linear-gradient(180deg,
    rgba(20, 22, 28, .14),
    rgba(20, 22, 28, .58) 30%,
    rgba(93, 106, 8, .8) 52%,
    rgba(20, 22, 28, .46) 78%,
    rgba(20, 22, 28, .08));
  box-shadow: none;
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined.m-light .pb-output-stage::before {
  background: linear-gradient(180deg,
    rgba(93, 106, 8, .6),
    rgba(20, 22, 28, .5) 58%,
    rgba(20, 22, 28, .1));
  box-shadow: none;
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-output-stage::after,
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-route::after {
  box-shadow: none;
}

/* Timeline (dark) sits inside a light-classed chapter parent: re-assert C values that
   claude-system reads from the chapter-level element. */
.pb-zone-timeline.m-dark .pb-gantt::before {
  background: repeating-linear-gradient(90deg, rgba(220, 232, 255, .07) 0 1px, transparent 1px 120px);
}

/* Windows chapter (light): ghost portraits keep B's multiply blend; nothing to patch. */

/* Playbooks ambient glow: quieter on frost so it doesn't fog seam 2. */
.pb-zone-playbooks.m-light::before {
  background: radial-gradient(closest-side, rgba(151, 183, 226, .08), transparent 70%);
}

/* ============ 8. Removed block hygiene ============ */

/* The custom-playbook block is removed from markup; keep the gallery's bottom
   rhythm so the zone still breathes before the integrations chapter. */
.pb-zone-playbooks .pb-gallery { padding-bottom: 34px; }