/* Leadership — the island stylesheet (#600, slice C)
   =========================================================================================
   Scope: `.lead`, applied by leadership-boot.mjs to whichever element it is mounted into —
   the shell's `#leadership-root` inside /exec/people, or the standalone dev harness. Every
   selector below is confined to that scope (tools/scope_island_css.py), because this island is
   injected into a Rock page that already has its own chrome and a stray `body` or `*` rule does
   not restyle the island, it restyles Rock's navigation.

   --------------------------------------------------------------------------- the visual world

   GROUND: light, and cream rather than white. The operator's ruling is that this surface reads
   light; `favor-cream` is the palette that already satisfies the enforced contrast policy on a
   light ground (surfaceRaised must be LIGHTER than background, which pure #ffffff cannot be),
   and its accent is already the brand orange this dashboard wants. `favor-leadership-orange`
   remains defined and wearable — the shell can hand it over — but cream is what ships.

   TWO HUES, AND ONLY TWO:
       Connect  → --secondary (brand blue)    the pastoral care structure
       Ministry → --accent    (brand orange)  the serving structure
   The two ladders are this dashboard's spine, so branch identity is carried by hue everywhere
   and by nothing else. Depth WITHIN a ladder is a lightness ramp off the branch hue, so a tier
   reads as "this branch, that far up" instead of introducing a third colour.

   POLARITY IS A DIFFERENT JOB and uses the --state-* / --soft-* ramps, never the branch hues. A
   stretched Connect cluster must not look like a Ministry team. This is the token contract's
   ruling 1, and on a two-hue page it bites immediately.

   ABSENCE: --ghost-wash and an em dash. Never zero, never a hidden panel (ADR 0018).
   ========================================================================================= */

/* >>> GENERATED THEME BLOCKS -- tools/build_theme_blocks.py from themes/favor-*.json. Do not hand-edit. <<< */

/* The palette .lead ships today. A page that sets no data-theme is unchanged. */
.lead {
  --accent: #95610f;
  --accent-deep: #6f4809;
  --age-all-ages: #5d6a72;
  --age-deaf: #bd5348;
  --age-adults: #2c5a8b;
  --age-kids: #ad7b21;
  --age-mature: #78508d;
  --age-seasoned: #78508d;
  --age-young-adults: #2a8878;
  --age-youth: #ad7b21;
  --background: #edf0ef;
  --brand-gold: #ad7b21;
  --cohort-core: #ad7b21;
  --cohort-crowd: #bd5348;
  --cohort-leader: #116a60;
  --cohort-new: #2c5a8b;
  --edge-lit: #eaeeec;
  --edge-strong: #748791;
  --faint-ink: #5d6a72;
  --focus: #14202a;
  --gap-wash: #eef1f0;
  --gender-men: #41598a;
  --gender-unknown: #7a868d;
  --gender-women: #4f8676;
  --ghost-wash: #e6ebe9;
  --hover-wash: #f0f4f3;
  --ink: #14202a;
  --move-gain: #116a60;
  --move-gain-text: #0e574f;
  --move-loss: #a03227;
  --move-loss-text: #8f2b22;
  --move-neutral: #7a868d;
  --move-neutral-text: #5b6a73;
  --move-stalled: #8a5d0c;
  --move-stalled-text: #7a520a;
  --muted-ink: #41535e;
  --on-accent: #ffffff;
  --rule: #d7dedc;
  --secondary: #116a60;
  --selected-wash: #dfe8e5;
  --shadow-ink: #14202a;
  --soft-critical: #fbe9e7;
  --soft-gain: #e7f2ee;
  --soft-healthy: #e7f2ee;
  --soft-loss: #fbe9e7;
  --soft-neutral: #f0f4f3;
  --soft-stalled: #fdf1dc;
  --soft-thin: #fdf1dc;
  --soft-watch: #fdf1dc;
  --state-critical: #a03227;
  --state-critical-text: #8f2b22;
  --state-healthy: #116a60;
  --state-healthy-text: #0e574f;
  --state-thin: #95610f;
  --state-thin-text: #7d5009;
  --state-unknown: #768884;
  --state-unknown-text: #5b6a73;
  --state-watch: #8a5d0c;
  --state-watch-text: #7a520a;
  --surface: #f8faf9;
  --surface-lit: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #e3e9e7;
  --swatch-mark: #116a60;
  --trajectory-ground: #ffffff;
  --trajectory-line: #41598a;
  --trajectory-line-edge: #2c5a8b;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-cream"] {
  --accent: #f45500;
  --accent-deep: #c23f00;
  --age-all-ages: #726f65;
  --age-deaf: #b3402f;
  --age-adults: #47734d;
  --age-kids: #ffb42a;
  --age-mature: #6b46c1;
  --age-seasoned: #625f59;
  --age-young-adults: #007fae;
  --age-youth: #f45500;
  --background: #fef1e8;
  --brand-gold: #ffb42a;
  --cohort-core: #ffb42a;
  --cohort-crowd: #b3402f;
  --cohort-leader: #47734d;
  --cohort-new: #5b9bd5;
  --edge-lit: #ded8d1;
  --edge-strong: #8d8880;
  --faint-ink: #726f65;
  --focus: #0077a4;
  --gap-wash: #f2ece5;
  --gender-men: #0077a4;
  --gender-unknown: #a7a29c;
  --gender-women: #f45500;
  --ghost-wash: #ece6e2;
  --hover-wash: #fff2e8;
  --ink: #121411;
  --move-gain: #34735a;
  --move-gain-text: #2c6350;
  --move-loss: #c23f00;
  --move-loss-text: #b03900;
  --move-neutral: #a7a29c;
  --move-neutral-text: #6b6660;
  --move-stalled: #a65b00;
  --move-stalled-text: #8f4e00;
  --muted-ink: #625f59;
  --on-accent: #121411;
  --rule: #d8cec6;
  --secondary: #0077a4;
  --selected-wash: #ffebd8;
  --shadow-ink: #121411;
  --soft-critical: #f6e4de;
  --soft-gain: #e7eae3;
  --soft-healthy: #e9eae2;
  --soft-loss: #f8e4d8;
  --soft-neutral: #f6f1ed;
  --soft-stalled: #f4e7d8;
  --soft-thin: #f6e6da;
  --soft-watch: #fee6d8;
  --state-critical: #ae1c21;
  --state-critical-text: #a5171d;
  --state-healthy: #47734d;
  --state-healthy-text: #3d6543;
  --state-thin: #9d4908;
  --state-thin-text: #934301;
  --state-unknown: #c9c2bc;
  --state-unknown-text: #6b6660;
  --state-watch: #8b6000;
  --state-watch-text: #805800;
  --surface: #fffaf6;
  --surface-lit: #fffdfa;
  --surface-raised: #fdf6f1;
  --surface-sunken: #fef1e8;
  --trajectory-ground: #ffffff;
  --trajectory-line: #2f4553;
  --trajectory-line-edge: #3d5a68;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-dark"] {
  --accent: #ff7a33;
  --accent-deep: #ff9459;
  --age-all-ages: #7b8b93;
  --age-deaf: #d9675e;
  --age-adults: #ffc24d;
  --age-kids: #35b0dc;
  --age-mature: #a78bfa;
  --age-seasoned: #b487b6;
  --age-young-adults: #7fae8c;
  --age-youth: #ff7a33;
  --background: #070b0e;
  --brand-gold: #ffc24d;
  --cohort-core: #35b0dc;
  --cohort-crowd: #ffc24d;
  --cohort-leader: #ff7a33;
  --cohort-new: #b487b6;
  --edge-lit: #35505f;
  --edge-strong: #5c7788;
  --faint-ink: #7b8b93;
  --focus: #7fd2f0;
  --gap-wash: #1a252f;
  --gender-men: #35b0dc;
  --gender-unknown: #7b8b93;
  --gender-women: #ff7a33;
  --ghost-wash: #16202a;
  --hover-wash: #1a232d;
  --ink: #e2edf2;
  --move-gain: #3fbf8e;
  --move-gain-text: #5fd0a5;
  --move-loss: #ff6a3d;
  --move-loss-text: #ff8a65;
  --move-neutral: #7b8b93;
  --move-neutral-text: #9aa8af;
  --move-stalled: #e8973a;
  --move-stalled-text: #f0ac5c;
  --muted-ink: #93a8b3;
  --on-accent: #131e26;
  --rule: #1e2c35;
  --secondary: #56c2e8;
  --selected-wash: #273039;
  --shadow-ink: #02050a;
  --soft-critical: #342325;
  --soft-gain: #153132;
  --soft-healthy: #153132;
  --soft-loss: #342325;
  --soft-neutral: #1f2932;
  --soft-stalled: #302b24;
  --soft-thin: #2e2726;
  --soft-watch: #302b24;
  --state-critical: #ff6a3d;
  --state-critical-text: #ff8a65;
  --state-healthy: #3fbf8e;
  --state-healthy-text: #5fd0a5;
  --state-thin: #d98243;
  --state-thin-text: #e79a63;
  --state-unknown: #7b8b93;
  --state-unknown-text: #9aa8af;
  --state-watch: #e8973a;
  --state-watch-text: #f0ac5c;
  --surface: #0d1620;
  --surface-lit: #131e26;
  --surface-raised: #101a21;
  --surface-sunken: #0c1319;
  --trajectory-ground: #000000;
  --trajectory-line: #4a6b7c;
  --trajectory-line-edge: #a0becd;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-indigo"] {
  --accent: #8796fc;
  --accent-deep: #b1bdfc;
  --age-all-ages: #8b8e9e;
  --age-deaf: #c4503d;
  --age-adults: #538059;
  --age-kids: #ffb42a;
  --age-mature: #a78bfa;
  --age-seasoned: #95969d;
  --age-young-adults: #646cff;
  --age-youth: #f45500;
  --background: #0f111c;
  --brand-gold: #ffb42a;
  --cohort-core: #ffb42a;
  --cohort-crowd: #c4503d;
  --cohort-leader: #f45500;
  --cohort-new: #8796fc;
  --edge-lit: #4a5175;
  --edge-strong: #686f92;
  --faint-ink: #8b8e9e;
  --focus: #8796fc;
  --gap-wash: #262836;
  --gender-men: #8796fc;
  --gender-unknown: #73757b;
  --gender-women: #f45500;
  --ghost-wash: #202337;
  --hover-wash: #242632;
  --ink: #f4efe6;
  --move-gain: #538059;
  --move-gain-text: #74a279;
  --move-loss: #c4503d;
  --move-loss-text: #eb735e;
  --move-neutral: #73757b;
  --move-neutral-text: #95969d;
  --move-stalled: #bc5915;
  --move-stalled-text: #e17c3f;
  --muted-ink: #afb2c1;
  --on-accent: #23273b;
  --rule: #2b3047;
  --secondary: #b1bdfc;
  --selected-wash: #32333d;
  --shadow-ink: #060725;
  --soft-critical: #39272f;
  --soft-gain: #262f33;
  --soft-healthy: #262f33;
  --soft-loss: #39272f;
  --soft-neutral: #2b2d39;
  --soft-stalled: #37292a;
  --soft-thin: #37292a;
  --soft-watch: #3c2525;
  --state-critical: #f25852;
  --state-critical-text: #fa7d73;
  --state-healthy: #538059;
  --state-healthy-text: #74a279;
  --state-thin: #d7712e;
  --state-thin-text: #e68a54;
  --state-unknown: #73757b;
  --state-unknown-text: #95969d;
  --state-watch: #b7831f;
  --state-watch-text: #ca9842;
  --surface: #171926;
  --surface-lit: #23273b;
  --surface-raised: #1d2030;
  --surface-sunken: #12141f;
  --trajectory-ground: #000000;
  --trajectory-line: #4a6b7c;
  --trajectory-line-edge: #a0becd;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-grow-multicolor"] {
  --accent: #4f3ad0;
  --accent-deep: #4130b3;
  --age-all-ages: #66656e;
  --age-deaf: #2653c2;
  --age-adults: #2a7f46;
  --age-kids: #e9b62c;
  --age-mature: #6a44c4;
  --age-seasoned: #b8356c;
  --age-young-adults: #0f8489;
  --age-youth: #bf5f12;
  --background: #fbfbfd;
  --brand-gold: #e9b62c;
  --cohort-core: #e9b62c;
  --cohort-crowd: #2653c2;
  --cohort-leader: #c3441f;
  --cohort-new: #0a9aa1;
  --edge-lit: #e3e3ea;
  --edge-strong: #85848f;
  --faint-ink: #66656e;
  --focus: #4130b3;
  --gap-wash: #ececf2;
  --gender-men: #2653c2;
  --gender-unknown: #a5a4ad;
  --gender-women: #b8356c;
  --ghost-wash: #e8e8ee;
  --hover-wash: #f1eefc;
  --ink: #121411;
  --move-gain: #2a7f46;
  --move-gain-text: #256a3d;
  --move-loss: #a82c1c;
  --move-loss-text: #922719;
  --move-neutral: #a5a4ad;
  --move-neutral-text: #63626b;
  --move-stalled: #a55e07;
  --move-stalled-text: #84480a;
  --muted-ink: #57565f;
  --on-accent: #fffdfa;
  --rule: #dcdce4;
  --secondary: #a8391a;
  --selected-wash: #e4defa;
  --shadow-ink: #121411;
  --soft-critical: #fbe3df;
  --soft-gain: #e3f2e8;
  --soft-healthy: #e3f2e8;
  --soft-loss: #fbe3df;
  --soft-neutral: #f3f3f7;
  --soft-stalled: #fbecd8;
  --soft-thin: #fce8dc;
  --soft-watch: #fcefd6;
  --state-critical: #a82c1c;
  --state-critical-text: #922719;
  --state-healthy: #2a7f46;
  --state-healthy-text: #256a3d;
  --state-thin: #b04f18;
  --state-thin-text: #8d3f0e;
  --state-unknown: #c5c5cd;
  --state-unknown-text: #63626b;
  --state-watch: #a55e07;
  --state-watch-text: #84480a;
  --surface: #ffffff;
  --surface-lit: #ffffff;
  --surface-raised: #f6f6f9;
  --surface-sunken: #f0f0f5;
  --trajectory-ground: #ffffff;
  --trajectory-line: #3b2f7a;
  --trajectory-line-edge: #4f3ad0;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-leadership"] {
  --accent: #95610f;
  --accent-deep: #6f4809;
  --age-all-ages: #5d6a72;
  --age-deaf: #bd5348;
  --age-adults: #2c5a8b;
  --age-kids: #ad7b21;
  --age-mature: #78508d;
  --age-seasoned: #78508d;
  --age-young-adults: #2a8878;
  --age-youth: #ad7b21;
  --background: #edf0ef;
  --brand-gold: #ad7b21;
  --cohort-core: #ad7b21;
  --cohort-crowd: #bd5348;
  --cohort-leader: #116a60;
  --cohort-new: #2c5a8b;
  --edge-lit: #eaeeec;
  --edge-strong: #748791;
  --faint-ink: #5d6a72;
  --focus: #14202a;
  --gap-wash: #eef1f0;
  --gender-men: #41598a;
  --gender-unknown: #7a868d;
  --gender-women: #4f8676;
  --ghost-wash: #e6ebe9;
  --hover-wash: #f0f4f3;
  --ink: #14202a;
  --move-gain: #116a60;
  --move-gain-text: #0e574f;
  --move-loss: #a03227;
  --move-loss-text: #8f2b22;
  --move-neutral: #7a868d;
  --move-neutral-text: #5b6a73;
  --move-stalled: #8a5d0c;
  --move-stalled-text: #7a520a;
  --muted-ink: #41535e;
  --on-accent: #ffffff;
  --rule: #d7dedc;
  --secondary: #116a60;
  --selected-wash: #dfe8e5;
  --shadow-ink: #14202a;
  --soft-critical: #fbe9e7;
  --soft-gain: #e7f2ee;
  --soft-healthy: #e7f2ee;
  --soft-loss: #fbe9e7;
  --soft-neutral: #f0f4f3;
  --soft-stalled: #fdf1dc;
  --soft-thin: #fdf1dc;
  --soft-watch: #fdf1dc;
  --state-critical: #a03227;
  --state-critical-text: #8f2b22;
  --state-healthy: #116a60;
  --state-healthy-text: #0e574f;
  --state-thin: #95610f;
  --state-thin-text: #7d5009;
  --state-unknown: #768884;
  --state-unknown-text: #5b6a73;
  --state-watch: #8a5d0c;
  --state-watch-text: #7a520a;
  --surface: #f8faf9;
  --surface-lit: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #e3e9e7;
  --swatch-mark: #116a60;
  --trajectory-ground: #ffffff;
  --trajectory-line: #41598a;
  --trajectory-line-edge: #2c5a8b;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.lead[data-theme="favor-watershed"] {
  --accent: #0077a4;
  --accent-deep: #005a7d;
  --age-all-ages: #726f65;
  --age-deaf: #b3402f;
  --age-adults: #47734d;
  --age-kids: #ffb42a;
  --age-mature: #6b46c1;
  --age-seasoned: #625f59;
  --age-young-adults: #007fae;
  --age-youth: #f45500;
  --background: #f6fbfd;
  --brand-gold: #ffb42a;
  --cohort-core: #ffb42a;
  --cohort-crowd: #b3402f;
  --cohort-leader: #47734d;
  --cohort-new: #5b9bd5;
  --edge-lit: #dbe6ec;
  --edge-strong: #79868e;
  --faint-ink: #726f65;
  --focus: #005a7d;
  --gap-wash: #e6eef2;
  --gender-men: #0077a4;
  --gender-unknown: #a7a29c;
  --gender-women: #f45500;
  --ghost-wash: #e2e9ee;
  --hover-wash: #e9f5fb;
  --ink: #121411;
  --move-gain: #34735a;
  --move-gain-text: #2c6350;
  --move-loss: #c23f00;
  --move-loss-text: #b03900;
  --move-neutral: #a7a29c;
  --move-neutral-text: #6b6660;
  --move-stalled: #a65b00;
  --move-stalled-text: #8f4e00;
  --muted-ink: #625f59;
  --on-accent: #ffffff;
  --rule: #cfdde5;
  --secondary: #00607f;
  --selected-wash: #d8ecf7;
  --shadow-ink: #0d2028;
  --soft-critical: #f6e4de;
  --soft-gain: #e7eae3;
  --soft-healthy: #e9eae2;
  --soft-loss: #f8e4d8;
  --soft-neutral: #f6f1ed;
  --soft-stalled: #f4e7d8;
  --soft-thin: #f6e6da;
  --soft-watch: #fee6d8;
  --state-critical: #ae1c21;
  --state-critical-text: #a5171d;
  --state-healthy: #47734d;
  --state-healthy-text: #3d6543;
  --state-thin: #9d4908;
  --state-thin-text: #934301;
  --state-unknown: #c9c2bc;
  --state-unknown-text: #6b6660;
  --state-watch: #8b6000;
  --state-watch-text: #805800;
  --surface: #fcfeff;
  --surface-lit: #fdffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eaf4f9;
  --trajectory-ground: #ffffff;
  --trajectory-line: #1f4a5e;
  --trajectory-line-edge: #2e6076;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

/* A pinned surface keeps its own ground in every theme, because the ground carries
   meaning. It resolves the whole contract from favor-cream, which is what replaced
   Connect Health's twelve -deep / -mark-cream tokens. */
.lead .pinned-cream {
  --accent: #f45500;
  --accent-deep: #c23f00;
  --age-all-ages: #726f65;
  --age-deaf: #b3402f;
  --age-adults: #47734d;
  --age-kids: #ffb42a;
  --age-mature: #6b46c1;
  --age-seasoned: #625f59;
  --age-young-adults: #007fae;
  --age-youth: #f45500;
  --background: #fef1e8;
  --brand-gold: #ffb42a;
  --cohort-core: #ffb42a;
  --cohort-crowd: #b3402f;
  --cohort-leader: #47734d;
  --cohort-new: #5b9bd5;
  --edge-lit: #ded8d1;
  --edge-strong: #8d8880;
  --faint-ink: #726f65;
  --focus: #0077a4;
  --gap-wash: #f2ece5;
  --gender-men: #0077a4;
  --gender-unknown: #a7a29c;
  --gender-women: #f45500;
  --ghost-wash: #ece6e2;
  --hover-wash: #fff2e8;
  --ink: #121411;
  --move-gain: #34735a;
  --move-gain-text: #2c6350;
  --move-loss: #c23f00;
  --move-loss-text: #b03900;
  --move-neutral: #a7a29c;
  --move-neutral-text: #6b6660;
  --move-stalled: #a65b00;
  --move-stalled-text: #8f4e00;
  --muted-ink: #625f59;
  --on-accent: #121411;
  --rule: #d8cec6;
  --secondary: #0077a4;
  --selected-wash: #ffebd8;
  --shadow-ink: #121411;
  --soft-critical: #f6e4de;
  --soft-gain: #e7eae3;
  --soft-healthy: #e9eae2;
  --soft-loss: #f8e4d8;
  --soft-neutral: #f6f1ed;
  --soft-stalled: #f4e7d8;
  --soft-thin: #f6e6da;
  --soft-watch: #fee6d8;
  --state-critical: #ae1c21;
  --state-critical-text: #a5171d;
  --state-healthy: #47734d;
  --state-healthy-text: #3d6543;
  --state-thin: #9d4908;
  --state-thin-text: #934301;
  --state-unknown: #c9c2bc;
  --state-unknown-text: #6b6660;
  --state-watch: #8b6000;
  --state-watch-text: #805800;
  --surface: #fffaf6;
  --surface-lit: #fffdfa;
  --surface-raised: #fdf6f1;
  --surface-sunken: #fef1e8;
  --trajectory-ground: #ffffff;
  --trajectory-line: #2f4553;
  --trajectory-line-edge: #3d5a68;

  /* Classic mode reads the same contract, so a swatch re-themes both modes. */
  --classic-surface: var(--surface);
  --classic-surface-2: var(--surface-raised);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted-ink);
  --classic-rule: var(--rule);
  --classic-accent: var(--accent-deep);
  --classic-focus: var(--focus);
  --classic-wash-healthy: var(--soft-healthy);
  --classic-wash-watch: var(--soft-watch);
  --classic-wash-thin: var(--soft-thin);
  --classic-wash-neutral: var(--soft-neutral);
  --classic-wash-unknown: var(--ghost-wash);
  --classic-bar: var(--secondary);
  --classic-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

/* The #469 spectrum: Favor Grow Multicolor's non-semantic hue ladder, rotated across the
   page and locked to one hue when a reader narrows to one item (--spectrum-lock). */
@property --sp { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --sp-ink { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --sp-band { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --sp-band-ink { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --surface-raised { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --surface-sunken { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --muted-ink { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --accent-deep { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --secondary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --focus { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --hover-wash { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --selected-wash { syntax: "<color>"; inherits: true; initial-value: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .lead { transition: --background .2s cubic-bezier(.16,1,.3,1), --surface .2s cubic-bezier(.16,1,.3,1), --surface-raised .2s cubic-bezier(.16,1,.3,1), --surface-sunken .2s cubic-bezier(.16,1,.3,1), --ink .2s cubic-bezier(.16,1,.3,1), --muted-ink .2s cubic-bezier(.16,1,.3,1), --rule .2s cubic-bezier(.16,1,.3,1), --accent .2s cubic-bezier(.16,1,.3,1), --accent-deep .2s cubic-bezier(.16,1,.3,1), --secondary .2s cubic-bezier(.16,1,.3,1), --focus .2s cubic-bezier(.16,1,.3,1), --hover-wash .2s cubic-bezier(.16,1,.3,1), --selected-wash .2s cubic-bezier(.16,1,.3,1); }
  .lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard) { transition: --sp .18s cubic-bezier(.16,1,.3,1) var(--sp-delay, 0s), --sp-ink .18s cubic-bezier(.16,1,.3,1) var(--sp-delay, 0s), --sp-band .18s cubic-bezier(.16,1,.3,1) var(--sp-delay, 0s), --sp-band-ink .18s cubic-bezier(.16,1,.3,1) var(--sp-delay, 0s); }
}
.lead[data-theme="favor-grow-multicolor"] { --spectrum-1: #5b3ee0; --spectrum-1-text: #3f2aa8; --spectrum-1-on: #ffffff; --spectrum-2: #d6560b; --spectrum-2-text: #9a3a06; --spectrum-2-on: #121411; --spectrum-3: #2f62e0; --spectrum-3-text: #1f45a3; --spectrum-3-on: #ffffff; --spectrum-4: #078f94; --spectrum-4-text: #0b6b70; --spectrum-4-on: #121411; --spectrum-5: #c93b78; --spectrum-5-text: #8f2a55; --spectrum-5-on: #ffffff; --spectrum-6: #2f9a52; --spectrum-6-text: #1f6436; --spectrum-6-on: #121411; --spectrum-7: #1686bf; --spectrum-7-text: #0b5c85; --spectrum-7-on: #121411;
  --spectrum-band: linear-gradient(90deg, #5b3ee0 0.00% 14.29%, #d6560b 14.29% 28.57%, #2f62e0 28.57% 42.86%, #078f94 42.86% 57.14%, #c93b78 57.14% 71.43%, #2f9a52 71.43% 85.71%, #1686bf 85.71% 100.00%);
  --sp-own: var(--spectrum-1); --sp-ink-own: var(--spectrum-1-text); --sp-on-own: var(--spectrum-1-on);
  --sp: var(--spectrum-lock, var(--sp-own)); --sp-ink: var(--sp-ink-own);
  --sp-band: var(--spectrum-lock-wash, var(--sp-own)); --sp-band-ink: var(--spectrum-lock-ink, var(--sp-on-own)); }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard) { --sp: var(--spectrum-lock, var(--sp-own)); --sp-ink: var(--sp-ink-own); --sp-band: var(--spectrum-lock-wash, var(--sp-own)); --sp-band-ink: var(--spectrum-lock-ink, var(--sp-on-own)); }
.lead[data-theme="favor-grow-multicolor"] :is(.xrail__btn, .filter-fieldset) { --sp: var(--sp-own); --sp-ink: var(--sp-ink-own); --sp-band: var(--sp-own); --sp-band-ink: var(--sp-on-own); }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+1) { --sp-own: var(--spectrum-1); --sp-ink-own: var(--spectrum-1-text); --sp-on-own: var(--spectrum-1-on); --sp-delay: 0ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+2) { --sp-own: var(--spectrum-2); --sp-ink-own: var(--spectrum-2-text); --sp-on-own: var(--spectrum-2-on); --sp-delay: 10ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+3) { --sp-own: var(--spectrum-3); --sp-ink-own: var(--spectrum-3-text); --sp-on-own: var(--spectrum-3-on); --sp-delay: 20ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+4) { --sp-own: var(--spectrum-4); --sp-ink-own: var(--spectrum-4-text); --sp-on-own: var(--spectrum-4-on); --sp-delay: 30ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+5) { --sp-own: var(--spectrum-5); --sp-ink-own: var(--spectrum-5-text); --sp-on-own: var(--spectrum-5-on); --sp-delay: 40ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+6) { --sp-own: var(--spectrum-6); --sp-ink-own: var(--spectrum-6-text); --sp-on-own: var(--spectrum-6-on); --sp-delay: 50ms; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .pulse-card, .combo-card, .dir-card, .kpi-tile, .stack-tile, .mode-panel, .groupcard, .xrail__btn, .filter-fieldset):nth-child(7n+7) { --sp-own: var(--spectrum-7); --sp-ink-own: var(--spectrum-7-text); --sp-on-own: var(--spectrum-7-on); --sp-delay: 60ms; }
.lead[data-theme="favor-grow-multicolor"] { accent-color: var(--spectrum-1); caret-color: var(--spectrum-1); scrollbar-color: var(--spectrum-1) color-mix(in srgb, var(--spectrum-1) 10%, var(--surface)); }
.lead[data-theme="favor-grow-multicolor"] ::selection { background: color-mix(in srgb, var(--sp) 30%, var(--surface)); color: var(--ink); }
.lead[data-theme="favor-grow-multicolor"] :focus-visible { outline-color: var(--sp); }
.lead[data-theme="favor-grow-multicolor"] :is(.title-beta, .masthead h1 .beta) { color: var(--spectrum-1-text); }
.lead[data-theme="favor-grow-multicolor"] .status-beta { background: var(--spectrum-1); border-color: var(--spectrum-1); color: var(--spectrum-1-on); }
.lead[data-theme="favor-grow-multicolor"] .sidebar-head { background-image: var(--spectrum-band); background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 100%; border-bottom-color: transparent; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) { background: var(--sp-band); color: var(--sp-band-ink); border-color: var(--sp); padding: .65rem .95rem; box-shadow: none; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) :is(h2, h3, .chapter__meta, .chapter__no, .chapter__title-group, .sub, .station-tag, .cw__question, .cw__lead, .cw__title, .combo-card__source, .pathway-section__count, .station-question, .station-note, .station-note strong, .station-note em, .prosemark, .info-disc > summary, .info-tip, .info-disc, .cw__info, .cw__expand) { color: inherit; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) :is(.station-tag, .prosemark, .info-tip, .info-disc, .cw__info, .cw__expand) { border-color: currentColor; background: transparent; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) .state-badge { background-color: var(--surface); }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) .xrail__btn:not(:disabled, [aria-disabled="true"], .tool__off) { background: var(--surface); border-color: var(--surface); color: var(--sp-ink-own); }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) .xrail__btn:not(:disabled, [aria-disabled="true"], .tool__off):is(:hover, :focus-visible) { background: var(--sp-ink-own); border-color: var(--surface); color: #ffffff; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter__head, .station-head, .pathway-section__head, .cw__head, .pulse-card__head, .combo-card__head) .tool__off { background: transparent; border-color: currentColor; color: inherit; opacity: .8; }
.lead[data-theme="favor-grow-multicolor"] :is(.pulse-card, .combo-card, .dir-card, .cw, .kpi-tile, .stack-tile, .mode-panel, .groupcard) { background-color: color-mix(in srgb, var(--sp) 7%, var(--surface)); box-shadow: inset 0 6px 0 var(--sp); }
.lead[data-theme="favor-grow-multicolor"] :is(.pulse-kpi, .kpi-tile__value, .queue-rank, .donut-center-total):not(.hero-card *) { color: var(--sp-ink); }
.lead[data-theme="favor-grow-multicolor"] .pulse-grid { background: repeating-linear-gradient(135deg, var(--rule) 0 1px, var(--surface-raised) 1px 10px); }
.lead[data-theme="favor-grow-multicolor"] :is(.pulse-track, .combo-row__track) { background-color: color-mix(in srgb, var(--sp) 20%, var(--surface)); }
.lead[data-theme="favor-grow-multicolor"] .hero-card { --invert-surface: var(--spectrum-1); --invert-ink: var(--spectrum-1-on); background-color: var(--spectrum-1); box-shadow: none; }
.lead[data-theme="favor-grow-multicolor"] .hero-card .pulse-card__head { background: none; color: var(--invert-ink); padding-inline: 0; }
.lead[data-theme="favor-grow-multicolor"] .hero-card :is(.info-tip, .info-disc, .cw__info, .cw__expand, a, .pulse-cta) { color: var(--invert-ink); border-color: var(--invert-ink); text-decoration-color: currentColor; opacity: 1; }
.lead[data-theme="favor-grow-multicolor"] :is(.chapter, .station, .pathway-section, .cw, .combo-card, .dir-card) a:not(.xrail__btn, .copy-prompt-btn, .combo-row, .hero-card *) { color: var(--sp-ink); text-decoration-color: var(--sp); }
.lead[data-theme="favor-grow-multicolor"] :is(.info-tip, .info-disc, .cw__info, .cw__expand) { color: var(--sp-ink); border-color: var(--sp); }
.lead[data-theme="favor-grow-multicolor"] thead th { background-color: var(--sp-band); color: var(--sp-band-ink); border-bottom-color: var(--sp); }
.lead[data-theme="favor-grow-multicolor"] :is(.combo-row, .queue-row, .cohort-row, .rhythm-row, .modes-row, .swarmrow, tbody tr):nth-child(even) { background-color: color-mix(in srgb, var(--sp) 9%, var(--surface)); }
.lead[data-theme="favor-grow-multicolor"] :is(.combo-row, .queue-row, .cohort-row, .rhythm-row, .modes-row, .swarmrow, tbody tr):hover { background-color: color-mix(in srgb, var(--sp) 20%, var(--surface)); }
.lead[data-theme="favor-grow-multicolor"] .xrail__btn:not(:disabled, [aria-disabled="true"]) { background: var(--sp); border-color: var(--sp); color: var(--sp-on-own); }
.lead[data-theme="favor-grow-multicolor"] .xrail__btn:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--sp-ink-own); border-color: var(--sp-ink-own); color: #ffffff; }
.lead[data-theme="favor-grow-multicolor"] .xrail__btn:is(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--sp) 10%, var(--surface)); border-color: color-mix(in srgb, var(--sp) 45%, var(--surface)); color: var(--sp-ink-own); }
.lead[data-theme="favor-grow-multicolor"] .filter-legend { color: var(--sp-ink); }
.lead[data-theme="favor-grow-multicolor"] .filter-fieldset :is(button, [role="button"]):not([aria-pressed="true"]):hover { background-color: color-mix(in srgb, var(--sp) 14%, var(--surface)); border-color: var(--sp); }
.lead[data-theme="favor-grow-multicolor"] .filter-fieldset :is(button, [role="button"])[aria-pressed="true"] { background: var(--sp); border-color: var(--sp); color: var(--sp-on-own); box-shadow: none; }
.lead[data-theme="favor-grow-multicolor"] .filter-fieldset :is(button, [role="button"])[aria-pressed="true"] * { color: inherit; }

/* The #248 theme swatch. Every rule but the disc colours reads the contract, so the
   control re-themes with the page it sits in. The disc colours are literal on purpose:
   a swatch has to show the palette it offers, not the one already showing. */
.lead .theme-swatch { position: sticky; bottom: 3.25rem; margin-left: 1.25rem; z-index: 100;
  display: inline-flex; align-items: center; gap: .1rem; padding: .1rem .3rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  opacity: .85; transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lead .theme-swatch:hover, .lead .theme-swatch:focus-within { opacity: 1; border-color: var(--edge-strong);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--shadow-ink) 28%, transparent); }
/* The open menu must be fully opaque whatever the resting pill's opacity is: opacity on a
   parent applies to its children, and a palette list you can read the page through is not a
   list (#611). */
.lead .theme-swatch[data-open="true"] { opacity: 1; }
.lead .theme-swatch__btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 0; color: var(--muted-ink); font: inherit;
  cursor: pointer; line-height: 0; }
.lead .theme-swatch__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
.lead .theme-swatch__disc { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none;
  /* the dual-colour split: ground on one half, accent on the other */
  background: linear-gradient(115deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
  transition: box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1); }
.lead .theme-swatch__btn[aria-pressed="true"] .theme-swatch__disc { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 2px var(--ink); }
.lead .theme-swatch__btn:hover .theme-swatch__disc { transform: scale(1.12); }
/* THE MENU IS MINIMAL (#611): the other palettes as a row of discs, the same discs the control
   has always used, with each one's name on its own hover. A list of words would be a second
   vocabulary for something a reader picks by colour. */
.lead .theme-swatch__menu .theme-swatch__btn { padding: .1rem; border-radius: 999px; }
/* The name outside the menu stays the floating label the resting control has always had. */
.lead .theme-swatch__name { position: absolute; bottom: calc(100% + .65rem); left: 0; z-index: 120;
  transform: translateY(.25rem); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--surface); color: var(--ink); border: 1px solid var(--edge-strong);
  padding: .35rem .6rem; border-radius: .35rem; box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
  transition: opacity .16s ease, transform .2s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; gap: .15rem; text-align: left; }
.lead .theme-swatch__title { font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.lead .theme-swatch__sub { font-size: .65rem; font-weight: 400; line-height: 1.2; color: var(--muted-ink); letter-spacing: .01em; }
.lead .theme-swatch__btn:hover .theme-swatch__name, .lead .theme-swatch__btn:focus-visible .theme-swatch__name { opacity: 1; transform: translateY(0); }
/* No stored choice means the palette the stylesheet ships, and the trigger says so by drawing
   the page's own ground and accent rather than an empty ring. */
.lead .theme-swatch__trigger[data-theme-pick=""] .theme-swatch__disc { --a: var(--background); --b: var(--swatch-mark, var(--accent)); }
/* The menu itself is opaque, and its own box: see the structure in apps/shared/ux-base.css. */
.lead .theme-swatch__menu { background: var(--surface); }
.lead .theme-swatch__btn[data-theme-pick="favor-cream"] .theme-swatch__disc { --a: #fef1e8; --b: #f45500; --c: #121411; }
.lead .theme-swatch__btn[data-theme-pick="favor-dark"] .theme-swatch__disc { --a: #070b0e; --b: #ff7a33; --c: #e2edf2; }
.lead .theme-swatch__btn[data-theme-pick="favor-indigo"] .theme-swatch__disc { --a: #0f111c; --b: #8796fc; --c: #f4efe6; }
.lead .theme-swatch__btn[data-theme-pick="favor-grow-multicolor"] .theme-swatch__disc { --a: #fbfbfd; --b: #4f3ad0; --c: #121411; }
.lead .theme-swatch__btn[data-theme-pick="favor-grow-multicolor"] .theme-swatch__disc { background: conic-gradient(#5b3ee0 0% 25%, #d6560b 25% 50%, #078f94 50% 75%, #c93b78 75% 100%); }
.lead .theme-swatch__btn[data-theme-pick="favor-leadership"] .theme-swatch__disc { --a: #edf0ef; --b: #116a60; --c: #14202a; }
.lead .theme-swatch__btn[data-theme-pick="favor-watershed"] .theme-swatch__disc { --a: #f6fbfd; --b: #0077a4; --c: #121411; }
@media (prefers-reduced-motion: reduce) {
  .lead .theme-swatch__disc { transition: box-shadow .18s ease; }
  .lead .theme-swatch__btn:hover .theme-swatch__disc { transform: none; }
  .lead .theme-swatch__name { transform: translateY(0); }
}
@media print {
  .lead .theme-swatch { display: none; }
}

/* >>> END GENERATED THEME BLOCKS <<< */

.lead {
  --lead-connect: var(--secondary, #0077a4);
  --lead-ministry: var(--accent, #f45500);
  /* One console width across the suite (Grow, Connect Field, Pathways all use 320px). */
  --sidebar-w: 320px;
  --lead-gap: 1.5rem;
  --lead-gap-lg: 2.75rem;
  --lead-radius: 10px;
  --lead-body-font: var(--body-font, "Favor Sans", Arial, sans-serif);
  --lead-display-font: var(--display-font, "Favorvetica", Arial, sans-serif);

  /* Fonts are deliberately never themed: a palette changes colour, not voice. These two are
     declared here because the merged UX block consumes them with no fallback, so an island that
     does not declare them resolves them to nothing rather than to a default. */
  --classic-body-font: var(--lead-body-font);
  --classic-heading-font: var(--lead-body-font);

  position: relative;
  box-sizing: border-box;
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 0 6rem;
  background: var(--background, #fef1e8);
  color: var(--ink, #121411);
  font-family: var(--lead-body-font);
  font-size: 15px;
  line-height: 1.55;
}
.lead *, .lead *::before, .lead *::after { box-sizing: border-box; }

/* The browser surfaces this island did not draw still belong to the design: selection, the
   caret, the scrollbar and the focus ring all ship with defaults that answer to no palette. */
.lead ::selection { background: var(--selected-wash, #ffebd8); color: var(--ink, #121411); }
.lead input, .lead select, .lead textarea { caret-color: var(--accent, #f45500); }
.lead :focus-visible {
  outline: 2px solid var(--focus, #0077a4);
  outline-offset: 2px;
  border-radius: 4px;
}
.lead { scrollbar-color: var(--edge-strong, #8d8880) transparent; scrollbar-width: thin; }
.lead ::-webkit-scrollbar { width: 10px; height: 10px; }
.lead ::-webkit-scrollbar-track { background: transparent; }
.lead ::-webkit-scrollbar-thumb {
  background: var(--edge-lit, #ded8d1);
  border: 2px solid var(--background, #fef1e8);
  border-radius: 999px;
}
.lead ::-webkit-scrollbar-thumb:hover { background: var(--edge-strong, #8d8880); }

/* Every figure on this page is a count compared against another count, so the numerals line up
   in columns. This is one declaration and it is the difference between a table that can be
   scanned and one that has to be read. */
.lead .lead-kpi__value, .lead .lead-bar__value, .lead .lead-rung__value,
.lead .lead-chain__value, .lead td[data-numeric], .lead th[data-numeric],
.lead .lead-bandrow__total, .lead .lead-area__placed {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------- the masthead -- */

.lead .lead-trail { padding: 0 1.25rem; }
@media (max-width: 768px) {
  .lead .lead-trail { padding: 0; }
  .lead .suite-breadcrumbs {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: .85rem;
    width: 100%;
    max-width: none;
    padding: .5rem 1rem;
    border-left: 0;
    border-right: 0;
  }
}

.lead .lead-masthead {
  padding: 1.75rem var(--lead-gap) 0;
}
/* The measure cap belongs to the prose, not to the header: capping the header pulled the page's
   two artifacts in from the edge they are meant to sit on. */
.lead .lead-masthead__question { max-width: 46ch; }
.lead .lead-masthead__title {
  margin: 0;
  font-family: var(--lead-display-font);
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.lead .lead-masthead__question {
  margin: .6rem 0 0;
  max-width: 62ch;
  color: var(--muted-ink, #625f59);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}


/* ------------------------------------------------------------------------------- the chips -- */

.lead .lead-chip-host { padding: 1.25rem var(--lead-gap) 0; }
.lead .lead-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.lead .lead-chips__empty { font-size: .84rem; color: var(--faint-ink, #726f65); }
.lead .lead-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .3rem .28rem .6rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 999px;
  background: var(--surface-raised, #fdf6f1);
  font-size: .8rem;
}
.lead .lead-chip__label { color: var(--faint-ink, #726f65); }
.lead .lead-chip__value { font-weight: 700; }
.lead .filter-tag__remove {
  border: 0;
  background: transparent;
  color: var(--muted-ink, #625f59);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
}
.lead .filter-tag__remove:hover { background: var(--hover-wash, #fff2e8); color: var(--accent-deep, #c23f00); }

/* -------------------------------------------------------------------------------- the layout */

/* Reading left, console right. The console is a fixed 320px column -- not a fraction -- because
   its contents are fixed-width controls: a rail that grows with the viewport just stretches its
   selects, which helps nobody, while the reading beside it genuinely uses every pixel it gets. */
.lead .lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w, 320px);
  gap: var(--lead-gap-lg);
  align-items: start;
  padding: var(--lead-gap);
}
.lead .lead-main { display: flex; flex-direction: column; gap: var(--lead-gap-lg); min-width: 0; }

/* ------------------------------------------------------------------------------ the console */

/* One sticky 320px column, the same width and the same behaviour every other Executive console
   has (Grow is the reference). It rides the reading rather than scrolling away from it: at this
   height a reader can change a filter while the chapter they are aiming at is still on screen.
   The body is not capped at 320px -- that made the console a small box with its own scrollbar
   inside a tall empty column. It runs to the bottom of the viewport and scrolls only past it. */
/* THE HANDLE'S OWN BAND. The console starts one handle-height below `--console-top`, so the
   sticky handle rides directly ABOVE the console it opens instead of over its first control.
   Pathways and Grow both reserve this band (`--console-bar-h`); Leadership did not, and paid for
   it by shoving the handle LEFT by the console's whole width to get out of the way -- which put
   the control on the far side of the page from the thing it controls. */
.lead {
  --console-bar-h: 2.7rem;
  /* The shared #808 tracker owns this measurement; the console follows the same host chrome. */
  --console-top: calc(var(--host-chrome-bottom, 0px) + 1rem);
  overflow-x: clip;
}
.lead .lead-console-host {
  position: sticky;
  top: calc(var(--console-top, 1rem) + var(--console-bar-h));
  width: var(--sidebar-w, 320px);
}
.lead .lead-console {
  position: sticky;
  top: calc(var(--console-top, 1rem) + var(--console-bar-h));
  /* IT TAKES THE WHOLE COLUMN IT IS GIVEN. There was an editorial cap here as well as this
     viewport bound, on the argument that a full-height console reads as a second page. In
     practice the cap ended the panel partway down and left a tall band of empty paper beneath
     it, so the console read as a box that had run out rather than as a tool with more inside:
     the emptiness was doing the opposite of what the cap was for. The bound that remains is the
     one that is load-bearing -- past it the lower filters are unreachable -- and the body still
     scrolls, so nothing is lost by letting the panel reach the bottom of the screen. */
  max-height: calc(100vh - var(--console-top, 1rem) - var(--console-bar-h) - 1.5rem);
  display: grid;
  /* THREE rows, not two: the mode switch, the head, then the scrolling body. This was `auto
   * minmax(0, 1fr)` for a two-child console, so the moment the mode switch became the console's
   * first control (#638) the head and the body were both auto-placed into the second row and
   * drew on top of each other -- "CONSOLE" struck through by the reset button. A fixed
   * grid-template is a contract with the child count; this one now states all three. */
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--rule, #d8cec6);
  border-radius: var(--lead-radius);
  background: var(--surface, #fffaf6);
  overflow: hidden;
}
.lead .sidebar-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule, #d8cec6);
}
.lead .sidebar-head h2 { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.lead .active-summary-pill {
  /* Next to the title it qualifies, not flung to the far edge: the head reads
     "Console / All ......... Reset all", which is a statement and its remedy. */
  padding: .15rem .55rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 999px;
  background: var(--surface-raised, #fdf6f1);
  font-size: .7rem;
  font-weight: 700;
  color: var(--faint-ink, #726f65);
}
.lead .sidebar-back-btn {
  display: none;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 999px;
  background: var(--surface-raised, #fdf6f1);
  color: inherit;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .lead-console__body {
  padding: .75rem 1rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* A fieldset per thing being narrowed; the legend names it and the `sub` says what narrowing it
   does, so the console explains itself without prose. */
.lead .filter-fieldset { border: 0; margin: 0 0 1.05rem; padding: 0; min-width: 0; }
.lead .filter-legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  padding: 0;
  margin-bottom: .4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint-ink, #726f65);
}
.lead .filter-legend .sub { font-size: .66rem; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }

/* TILES. The whole vocabulary visible at once, one press to choose, 44px of touch target each.
   Selection is a 2px ink border and weight, never colour alone. */
.lead .lead-tiles { display: grid; gap: .35rem; }
.lead .lead-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead .lead-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead .lead-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lead .lead-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 44px;
  padding: .3rem .45rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 8px;
  background: var(--surface-raised, #fdf6f1);
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.lead .lead-tile__label { overflow-wrap: anywhere; }
.lead .lead-tile:hover { border-color: var(--edge-strong, #8d8880); background: var(--hover-wash, #fff2e8); }
.lead .lead-tile[aria-pressed="true"] {
  border: 2px solid var(--ink, #121411);
  padding: calc(.3rem - 1px) calc(.45rem - 1px);
  font-weight: 800;
}
/* THE BRANCH TILES CARRY THEIR OWN BRANCH'S HUE, pressed or not. Connect and Ministry are the
   two structures this whole dashboard keeps apart, and every mark on the page is already coloured
   by which one it belongs to -- but the console, where a reader CHOOSES between them, was the one
   place that drew them identically and only tinted the winner after the fact. The hue is carried
   on the tile's own meter and a left rail rather than by washing the whole tile, so the colour
   sits on a mark (WCAG's 3:1 floor, which --lead-connect and --lead-ministry already clear as
   --secondary and --accent) and never behind label text. */
.lead .lead-tile--connect { --tile-tone: var(--lead-connect); }
.lead .lead-tile--ministry { --tile-tone: var(--lead-ministry); }
.lead .lead-tile--connect[aria-pressed="true"] { background: var(--connect-wash, #e7f1f7); }
.lead .lead-tile--ministry[aria-pressed="true"] { background: var(--ministry-wash, #ffe9dd); }

.lead .lead-tile { flex-direction: column; align-items: stretch; justify-content: center; gap: .25rem; }
.lead .lead-tile__top { display: flex; align-items: baseline; gap: .35rem; justify-content: center; }
.lead .lead-tile__count {
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-ink, #625f59);
}
.lead .lead-tile[aria-pressed="true"] .lead-tile__count { color: var(--ink); }
/* The track is a hairline the full width of the tile; the fill is the option's weight against
   the biggest of its siblings. scaleX rather than width, so it animates on the compositor. */
.lead .lead-tile__meter {
  display: block;
  height: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--muted-ink) 14%, transparent);
  overflow: hidden;
}
.lead .lead-tile__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 1px;
  background: var(--tile-tone, var(--secondary));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--motion-layout, 260ms) var(--ease-out, ease);
}
/* An option that would leave the page empty. The tile stays pressable -- pressing it and reading
   the ghost is a legitimate thing to do -- it simply stops claiming to hold anybody. */
.lead .lead-tile[data-empty="true"] { opacity: .55; }
.lead .lead-tile[data-empty="true"] .lead-tile__meter { background: transparent; border: 1px dashed color-mix(in srgb, var(--muted-ink) 40%, transparent); }
.lead .lead-tile:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: 2px; }

.lead .lead-group { margin: 0 0 1.1rem; padding: 0; border: 0; }
.lead .lead-group__legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint-ink, #726f65);
}
.lead .lead-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.lead .lead-field__label { font-size: .8rem; font-weight: 600; }
.lead .lead-field__hint { font-size: .72rem; color: var(--faint-ink, #726f65); line-height: 1.35; }

/* ONE CONTROL HEIGHT, STATED ONCE. A select and a text field standing next to each other in the
   same filter row must be the same object at different jobs, and `--lead-control-h` is the only
   place that height is written -- the pair cannot drift apart by editing one of them. */
.lead { --lead-control-h: 44px; }
.lead .lead-select, .lead .lead-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--lead-control-h);
  min-height: var(--lead-control-h);
  padding: .4rem .6rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 7px;
  background: var(--surface-raised, #fdf6f1);
  color: inherit;
  font: inherit;
  font-size: .87rem;
  /* THE SELECT IS DRAWN, NOT BORROWED. With `appearance: auto` a <select> is an OS control that
     the engine sizes itself: WebKit ignores the height and renders it at its own intrinsic
     ~21px, so on Safari the dropdowns sat visibly shorter than the search field beside them
     while Chrome measured all four at exactly 44px. Same stylesheet, two different rows. It also
     means the OS picks the fill, which on this surface's dark palettes is the wrong colour
     outright. Turning appearance off makes the select an ordinary box that obeys the height, the
     background and the radius in every engine; the chevron below replaces the one we gave up. */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--motion-state, 180ms) var(--ease-out, ease);
}
.lead .lead-select {
  /* The chevron, drawn from the ink token so it themes with everything else, and room kept for
     it so a long option label can never run underneath. */
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) calc(50% + 1px), calc(100% - .7rem) calc(50% + 1px);
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  color: var(--ink);
}
.lead .lead-select:hover, .lead .lead-input:hover { border-color: var(--edge-strong, #8d8880); }
.lead .lead-input--number { width: 6rem; }

/* The scope toggle states the CURRENT reading rather than the action: a reader needs to know
   what they are looking at more often than what a press would do. aria-pressed carries the
   control state for anyone navigating by it. */
.lead .lead-scope {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 7px;
  background: var(--surface-raised, #fdf6f1);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lead .lead-scope[aria-pressed="true"] { border-color: var(--accent, #f45500); background: var(--selected-wash, #ffebd8); }
.lead .lead-scope__state { font-size: .84rem; font-weight: 700; }
.lead .lead-scope__why { font-size: .72rem; color: var(--muted-ink, #625f59); line-height: 1.3; }

.lead .reset-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 7px;
  background: transparent;
  color: var(--accent-deep, #c23f00);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .reset-btn:hover { background: var(--hover-wash, #fff2e8); border-color: var(--accent, #f45500); }

/* THE CONSOLE'S OWN RESET is not that button. In the head it is the quiet counterpart of the
   count beside it -- "3 active" on the left, the way to make that zero on the right -- and it
   is the same quiet text control Pathways, Connect Field and Grow all put there. The bordered
   full-width form above stays for the PANEL-level resets ("Clear structure filters"), which sit
   among fields and need to look like one. */
.lead .sidebar-head .reset-btn {
  width: auto;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-deep, #c23f00);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lead .sidebar-head .reset-btn:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lead .filter-backdrop { display: none; }
/* THE DESKTOP CONSOLE HANDLE. This rule used to be `display: none`, with the bar appearing
 * only inside the mobile media query as a fixed bottom sheet -- so on a desktop Rock page, with
 * the console collapsed by default (#638), there was NO control anywhere that opened it. The
 * filters were reachable only by already knowing the console existed.
 *
 * It is STICKY rather than static for the second half of the complaint: this page runs ~9,000px,
 * and a handle that scrolls away at the masthead is gone for the other 8,000. Sticky at
 * `--console-top` keeps it at the reader's eye wherever they are, which is what Pathways does
 * (`.sidebar-toggle-bar`, pathways.css) and what this surface should have matched from the
 * start. The bar itself is click-through so it never steals a pointer from the panel beneath;
 * only the button takes events. */
.lead .console-toggle-bar {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: var(--console-top, 1rem);
  z-index: 30;
  margin: 0 0 .65rem;
  pointer-events: none;
}
.lead .console-toggle-bar > * { pointer-events: auto; }
.lead .console-toggle-bar .toggle-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--lead-classic-r, 3px);
  background: var(--surface-raised, #fff);
  color: var(--ink);
  font: inherit; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; user-select: none;
  /* Opaque with a shadow, because it sits OVER a panel rather than above one. */
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--shadow-ink, #14202a) 60%, transparent);
  transition: background var(--motion-state, 180ms) var(--ease-out, ease),
              border-color var(--motion-state, 180ms) var(--ease-out, ease);
}
.lead .console-toggle-bar .toggle-btn:hover {
  background: var(--hover-wash, #f0f4f3);
  border-color: var(--secondary);
}
.lead .console-toggle-bar .chevron {
  color: var(--secondary);
  transition: transform var(--motion-state, 180ms) var(--ease-out, ease);
}
/* Closed points right, at the console it will pull open; open points left, back at the edge it
 * folds into. Same direction as the other three islands. */
.lead[data-console="open"] .console-toggle-bar .chevron { transform: rotate(180deg); }
/* `hidden` has to win over the display below, or the pill shows as an empty dot whenever there
 * is nothing to count -- which is the default state of this page. */
.lead .console-toggle-bar__count[hidden] { display: none; }
.lead .console-toggle-bar__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px;
  background: var(--secondary); color: var(--on-accent, #fff);
  font-size: .65rem; font-weight: 700; letter-spacing: 0;
}

/* ------------------------------------------------------------------------------ the headline */

.lead .lead-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}
.lead .lead-kpi {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule, #d8cec6);
  /* The 3px top border encodes the branch (Connect / Ministry / both / all), so it stays. What
   * goes is the 10px radius it used to sit on: a coloured accent on a rounded box curves away
   * from the corner and reads as a stray highlight rather than as the card's own top edge. At
   * the peg's 3px the accent meets both corners square and reads as a deliberate rule. */
  border-top: 3px solid var(--edge-strong, #8d8880);
  border-radius: var(--lead-classic-r, 3px);
  background: var(--surface, #fffaf6);
}
.lead .lead-kpi[data-tone="connect"] { border-top-color: var(--lead-connect); }
.lead .lead-kpi[data-tone="ministry"] { border-top-color: var(--lead-ministry); }
.lead .lead-kpi[data-tone="both"] {
  /* The one place the two hues meet, because "lead in both" is literally the intersection. */
  border-top-color: transparent;
  border-image: linear-gradient(90deg, var(--lead-connect) 0 50%, var(--lead-ministry) 50% 100%) 1;
  border-image-width: 3px 0 0 0;
}
.lead .lead-kpi[data-tone="all"] { border-top-color: var(--ink, #121411); }
.lead .lead-kpi__value {
  font-family: var(--lead-display-font);
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lead .lead-kpi__top { display: flex; align-items: center; gap: .1rem; margin-top: .25rem; }
.lead .lead-kpi__label { font-size: .88rem; font-weight: 700; }

/* ----------------------------------------------------------------------------- the chapters */

.lead .lead-chapter { display: flex; flex-direction: column; gap: 1.1rem; }
.lead .lead-chapter__head { max-width: 68ch; }
.lead .lead-chapter__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-family: var(--lead-display-font);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
/* The number earns its place: these are four readings in a fixed order that hand off to each
   other, and the copy refers back to them by number. */
.lead .lead-chapter__no {
  flex: none;
  width: 1.85rem; height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink, #121411);
  color: var(--background, #fef1e8);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lead .lead-chapter__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.1rem;
  align-items: start;
}

/* -------------------------------------------------------------------------------- the panel */

.lead .lead-panel {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: var(--lead-radius);
  background: var(--surface, #fffaf6);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink, #121411) 5%, transparent),
              0 8px 22px color-mix(in srgb, var(--shadow-ink, #121411) 6%, transparent);
  min-width: 0;
}
.lead .lead-panel--wide { grid-column: 1 / -1; }
/* Title left, rail right, one row. The rail is the panel's quiet tool edge and belongs beside
   the heading rather than under it. */
.lead .lead-panel__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lead .lead-panel__title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lead .lead-panel__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* A wide panel holding a long list of short rows reads better in columns than as one tall
   ribbon: the eye compares neighbours, and twelve stacked bars put the twelfth a screen away
   from the first. */
.lead .lead-panel__body--columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: .5rem 2rem;
}


/* ------------------------------------------------------------------------------- the ghost --
   An absence keeps its place in the layout and says why (ADR 0018). It is never a zero and it
   is never a panel that quietly does not render. */
.lead .lead-ghost {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--edge-strong, #8d8880);
  border-radius: 8px;
  background: var(--ghost-wash, #ece6e2);
}
.lead .lead-ghost__mark {
  font-family: var(--lead-display-font);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted-ink, #625f59);
}
.lead .lead-ghost__why { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted-ink, #625f59); max-width: 62ch; }

/* ------------------------------------------------------------------------------ the ladders */

.lead .lead-ladders { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.lead .lead-ladder { display: flex; flex-direction: column; gap: .3rem; }
.lead .lead-ladder__title {
  display: flex;
  align-items: center;
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lead .lead-ladder[data-branch="connect"] .lead-ladder__title { color: var(--lead-connect); }
.lead .lead-ladder[data-branch="ministry"] .lead-ladder__title { color: var(--accent-deep, #c23f00); }

/* The pyramid. Order is locked to the ladder and never sorted by magnitude — the shape is the
   reading. A rung with nobody on it still draws, because an empty rung is the most important
   thing this mark can show. */
.lead .lead-pyramid { display: flex; flex-direction: column; gap: .3rem; }
.lead .lead-rung {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: .1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color var(--motion-feedback, 120ms) linear;
}
.lead .lead-rung:hover { background: var(--hover-wash, #fff2e8); }
.lead .lead-rung.is-selected { background: var(--selected-wash, #ffebd8); }
.lead .lead-rung__bar {
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  border-radius: 5px;
  /* Depth within a ladder is a lightness ramp off the branch hue, so the tier reads as position
     rather than as a fourth colour. */
  background: var(--lead-connect);
  opacity: .16;
}
.lead .lead-rung[data-branch="ministry"] .lead-rung__bar { background: var(--lead-ministry); }
.lead .lead-rung:hover .lead-rung__bar, .lead .lead-rung.is-selected .lead-rung__bar { opacity: .3; }
.lead .lead-rung__bar[data-empty="true"] {
  background: repeating-linear-gradient(135deg,
    var(--ghost-wash, #ece6e2) 0 5px, transparent 5px 10px);
  opacity: 1;
  border: 1px dashed var(--edge-strong, #8d8880);
}
.lead .lead-rung__text {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .6rem;
  width: 100%;
  padding: .15rem .7rem;
}
.lead .lead-rung__label { font-size: .88rem; font-weight: 600; }
.lead .lead-rung__value { font-size: 1.05rem; font-weight: 700; text-align: right; }
.lead .lead-rung--bench .lead-rung__label, .lead .lead-rung--bench .lead-rung__value { color: var(--muted-ink, #625f59); }
/* The bench tag rides under the rung's own label rather than trailing the row, so a rung that
   carries it stays the same shape as one that does not and the ladder's edge stays straight. */
.lead .lead-rung { flex-wrap: wrap; }
.lead .lead-rung__tag {
  position: relative;
  width: 100%;
  padding: 0 .7rem .1rem;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint-ink, #726f65);
}

/* Lay Pastor, drawn beside the Connect ladder rather than as a rung on it. */
.lead .lead-ladder__beside {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .85rem;
  padding: .7rem .8rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 8px;
  background: var(--surface-raised, #fdf6f1);
}
.lead .lead-ladder__beside-value { font-family: var(--lead-display-font); font-size: 1.4rem; font-weight: 700; line-height: 1; }
.lead .lead-ladder__beside-label { display: flex; align-items: center; font-size: .85rem; font-weight: 700; }


/* ---------------------------------------------------------------------------------- the bar */

/* THREE COLUMNS ON ONE LINE: label, bar, value. A ranked list of bars is read by running the
 * eye down the right-hand ends, and that only works when every bar starts at the same x and the
 * labels are right-aligned into a shared gutter -- the peg's own composition. The previous rule
 * stacked a label row ABOVE a full-width 8px track, which made every bar the same length and
 * left the height doing all the work: thin lines, not bars.
 *
 * `--lead-bar-gutter` is the label column. It is a clamp rather than a fixed width so a panel
 * at phone width keeps ~7rem for the name and a wide panel gives it a third of the row. */
.lead .lead-bar {
  --lead-bar-gutter: clamp(7rem, 30%, 13rem);
  display: grid;
  grid-template-columns: var(--lead-bar-gutter) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .6rem;
  row-gap: .12rem;
  width: 100%;
  padding: .18rem .1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: var(--lead-classic-r, 3px);
}
.lead button.lead-bar { cursor: pointer; transition: background-color var(--motion-feedback, 120ms) linear; }
.lead button.lead-bar:hover { background: var(--hover-wash, #fff2e8); }
.lead button.lead-bar.is-selected { background: var(--selected-wash, #ffebd8); }
.lead .lead-bar__label {
  font-size: .8rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lead .lead-bar__value { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The track is the bar's own height, and it is the peg's 18px rather than a hairline. The
 * remaining track is a wash rather than empty, because "how much of the largest" is part of
 * the reading and an unfilled bar with no ground cannot say it. */
.lead .lead-bar__track {
  height: 1.1rem;
  min-height: 14px;
  border-radius: var(--lead-classic-r, 3px);
  background: var(--gap-wash, #f2ece5);
  overflow: hidden;
}
.lead .lead-bar__fill {
  height: 100%;
  border-radius: var(--lead-classic-r, 3px);
  background: var(--lead-connect);
  transition: width var(--motion-layout, 280ms) var(--motion-ease, ease);
}
/* The sub-line sits under the bar, in the bar's own two columns, never under the label. */
.lead .lead-bar__sub { grid-column: 2 / -1; }
.lead .lead-bar[data-tone="ministry"] .lead-bar__fill { background: var(--lead-ministry); }
.lead .lead-bar[data-tone="critical"] .lead-bar__fill { background: var(--state-critical, #ae1c21); }
.lead .lead-bar[data-tone="thin"] .lead-bar__fill { background: var(--state-thin, #9d4908); }
.lead .lead-bar__fill[data-unknown="true"] {
  background: repeating-linear-gradient(135deg, var(--edge-lit, #ded8d1) 0 4px, transparent 4px 8px);
}
.lead .lead-bar__sub { font-size: .7rem; color: var(--muted-ink, #625f59); }

/* ------------------------------------------------------------------------- roles across bands */

/* THE STACKED BAND ROW, on the peg's grammar and on the same gutter as `.lead-bar` above, so a
 * reader running down the page meets one bar shape rather than two. Label right-aligned in the
 * gutter, the stack itself as a THICK bar on a shared baseline, its total just past the end.
 *
 * The old rule put the label and the total on a head line ABOVE a 13px stack, which cost a row
 * of vertical space per band and, worse, broke the comparison: with the label above, the stacks
 * were the only thing left to compare and they read as four near-identical hairlines. */
.lead .lead-bandrow {
  --lead-bar-gutter: clamp(7rem, 22%, 11rem);
  display: grid;
  grid-template-columns: var(--lead-bar-gutter) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .6rem;
  row-gap: .1rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--rule, #d8cec6);
}
.lead .lead-bandrow:last-child { border-bottom: 0; }
.lead .lead-bandrow__head { display: contents; }
.lead .lead-bandrow__label {
  font-size: .82rem; font-weight: 700; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead .lead-bandrow__total { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The stack is the mark, so it takes the bar height rather than a hairline, and it is the middle
 * grid column -- the width the JS sets on it is its share of the largest band, as before. */
.lead .lead-stack {
  grid-column: 2;
  display: flex; height: 1.1rem; min-height: 14px;
  border-radius: var(--lead-classic-r, 3px); overflow: hidden; min-width: 3rem;
}
/* The tier breakdown reads under the bar, in the bar's own columns, never under the label. */
.lead .lead-bandrow__legend { grid-column: 2 / -1; }
.lead .lead-stack__seg {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--lead-connect);
  transition: filter var(--motion-feedback, 120ms) linear;
}
/* The four Connect tiers, as one lightness ramp off the branch hue. */
.lead .lead-stack__seg[data-tier="connect"] { background: color-mix(in srgb, var(--lead-connect) 35%, var(--surface, #fffaf6)); }
.lead .lead-stack__seg[data-tier="regional"] { background: color-mix(in srgb, var(--lead-connect) 60%, var(--surface, #fffaf6)); }
.lead .lead-stack__seg[data-tier="cluster"] { background: color-mix(in srgb, var(--lead-connect) 85%, var(--surface, #fffaf6)); }
.lead .lead-stack__seg[data-tier="section"] { background: var(--lead-connect); }
.lead .lead-stack__seg:hover { filter: brightness(.88); }
.lead .lead-bandrow__legend { margin: 0; font-size: .72rem; color: var(--muted-ink, #625f59); }

/* -------------------------------------------------------------------------------- the table */

/* REPO RULE (operator, 2026-09-21): NO VERTICAL SCROLLABLE WINDOWS. A panel never gets its
   own vertical scrollbar -- the page scrolls, the panel does not. Horizontal scroll is the one
   exception, for a table or plot that is genuinely wider than the column it sits in.

   An inner vertical scroll hides content behind a gesture the reader has no reason to expect,
   and hides it from Cmd-F, from print, and from an export. The panel grows instead; the page
   was always going to be long, and a long page a reader can scan beats a short one with rows
   they never find. */
/* A wide table scrolls sideways inside its panel. It never scrolls DOWN: the 88-row care
   structure makes this a long panel, and that is the correct outcome.

   `overflow-y` is spelled `hidden`, not `visible`, and that spelling is the whole rule. CSS
   coerces a `visible` axis to `auto` whenever the other axis is not visible, so
   `overflow-x: auto; overflow-y: visible` declares a VERTICAL scroller as well -- which is
   how a panel written to this rule went on scrolling vertically anyway. `hidden` is the only
   spelling that holds, and nothing is clipped by it because the panel has no max-height. */
.lead .lead-table {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 8px;
}
.lead .lead-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.lead .lead-table caption { padding: .5rem .7rem; text-align: left; font-size: .78rem; color: var(--muted-ink, #625f59); }
.lead .lead-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--edge-strong, #8d8880);
  background: var(--surface-raised, #fdf6f1);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
}
.lead .lead-table th[data-numeric], .lead .lead-table td[data-numeric] { text-align: right; }
.lead .lead-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--rule, #d8cec6); vertical-align: top; }
.lead .lead-table tbody tr:last-child td { border-bottom: 0; }
.lead .lead-table tbody tr[data-selectable] { cursor: pointer; }
.lead .lead-table tbody tr:hover { background: var(--hover-wash, #fff2e8); }

/* Polarity, on the state ramp and never on a branch hue. The wash is the whole signal: a tint
   plus the number, no icon and no second colour. */
.lead .lead-table tbody tr[data-tone="healthy"] { background: color-mix(in srgb, var(--soft-healthy, #e9eae2) 40%, transparent); }
.lead .lead-table tbody tr[data-tone="watch"] { background: color-mix(in srgb, var(--soft-watch, #fee6d8) 45%, transparent); }
.lead .lead-table tbody tr[data-tone="thin"] { background: color-mix(in srgb, var(--soft-thin, #f6e6da) 60%, transparent); }
.lead .lead-table tbody tr[data-tone="critical"] { background: color-mix(in srgb, var(--soft-critical, #f6e4de) 70%, transparent); }

.lead .lead-sort {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.lead .lead-sort:hover { text-decoration-color: var(--accent, #f45500); }
.lead .lead-sort[data-active="true"] { color: var(--accent-deep, #c23f00); text-decoration-color: currentColor; }

.lead .lead-people { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.lead .lead-people__n { font-weight: 700; }
.lead .lead-people__caveat { font-size: .7rem; color: var(--faint-ink, #726f65); }
.lead .lead-load { font-weight: 700; }
.lead .lead-bench[data-empty="true"] { color: var(--state-critical-text, #a5171d); font-weight: 700; }
.lead .lead-tag {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface-raised, #fdf6f1);
  border: 1px solid var(--rule, #d8cec6);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------------ sign-up areas */

.lead .lead-area { padding: .35rem 0; border-bottom: 1px solid var(--rule, #d8cec6); }
.lead .lead-area:last-child { border-bottom: 0; }
.lead .lead-area__outcome { margin: .1rem 0 .3rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.lead .lead-area__placed { font-size: .82rem; font-weight: 700; }
.lead .lead-area__why { font-size: .74rem; color: var(--muted-ink, #625f59); max-width: 58ch; line-height: 1.4; }
.lead .lead-area__outcome[data-unknown="true"] .lead-area__placed { color: var(--muted-ink, #625f59); font-size: 1rem; }

/* ------------------------------------------------------------------------- teams with nobody */

.lead .lead-noleader {
  margin-top: .3rem;
  padding: .85rem 1rem;
  border: 1px solid var(--state-critical, #ae1c21);
  border-radius: 8px;
  background: color-mix(in srgb, var(--soft-critical, #f6e4de) 60%, transparent);
}
.lead .lead-noleader__title { margin: 0 0 .4rem; font-size: .86rem; font-weight: 700; }
.lead .lead-noleader__none { margin: 0; font-size: .82rem; color: var(--muted-ink, #625f59); }
.lead .lead-noleader__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.lead .lead-noleader__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .84rem; }
.lead .lead-noleader__team { font-weight: 700; }
.lead .lead-noleader__count { font-size: .76rem; color: var(--muted-ink, #625f59); }

/* ------------------------------------------------------------------------------- the chain -- */

.lead .lead-chain {
  display: flex;
  align-items: stretch;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.lead .lead-chain__step {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .8rem .85rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 8px;
  background: var(--surface-raised, #fdf6f1);
  min-width: 0;
}
/* Raise is the only number on this page to plan against, so it is the only step that carries
   weight. The emphasis is the single authored moment on this surface. */
.lead .lead-chain__step[data-terminal="true"] {
  border-color: var(--accent, #f45500);
  background: var(--selected-wash, #ffebd8);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-ink, #121411) 8%, transparent),
              0 12px 26px color-mix(in srgb, var(--accent, #f45500) 14%, transparent);
}
.lead .lead-chain__value {
  font-family: var(--lead-display-font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lead .lead-chain__step[data-terminal="true"] .lead-chain__value { font-size: 1.95rem; color: var(--accent-deep, #c23f00); }
.lead .lead-chain__label { font-size: .82rem; font-weight: 700; }
.lead .lead-chain__why { font-size: .71rem; color: var(--muted-ink, #625f59); line-height: 1.35; }
.lead .lead-chain__arrow { align-self: center; color: var(--edge-strong, #8d8880); font-size: 1rem; }
.lead .lead-raise { font-weight: 700; color: var(--accent-deep, #c23f00); }


/* ------------------------------------------------------------------------------- the roster */

.lead .lead-roster {
  display: flex;
  flex-direction: column;
  /* No max-height and no inner scroll (repo rule, 2026-09-21). The roster is long; the page
     carries it. */
}
.lead .lead-person { border-bottom: 1px solid var(--rule, #d8cec6); }
.lead .lead-person:last-child { border-bottom: 0; }
.lead .lead-person__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  padding: .3rem .1rem;
  cursor: pointer;
  list-style: none;
  font-size: .88rem;
}
.lead .lead-person__head::-webkit-details-marker { display: none; }
.lead .lead-person__name { font-weight: 700; }
.lead .lead-person__marks { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lead .lead-person__branch {
  padding: .05rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--rule, #d8cec6);
  font-size: .7rem;
  font-weight: 700;
}
.lead .lead-person__branch[data-branch="connect"] { border-color: var(--lead-connect); color: var(--lead-connect); }
.lead .lead-person__branch[data-branch="ministry"] { border-color: var(--lead-ministry); color: var(--accent-deep, #c23f00); }
.lead .lead-person__roles { font-size: .74rem; color: var(--faint-ink, #726f65); }
.lead .lead-person__list { margin: 0 0 .7rem; padding: 0 0 0 .1rem; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.lead .lead-person__role { display: flex; gap: .6rem; font-size: .8rem; padding-left: .7rem; border-left: 1px solid var(--rule, #d8cec6); }
.lead .lead-person__role[data-branch="connect"] { border-left-color: var(--lead-connect); }
.lead .lead-person__role[data-branch="ministry"] { border-left-color: var(--lead-ministry); }
.lead .lead-person__tier { font-weight: 700; min-width: 9rem; }
.lead .lead-person__context { color: var(--muted-ink, #625f59); }


/* ------------------------------------------------------------------------------ the console
   at narrow widths: a bottom sheet, one occupant at the bottom edge (ADR 0020, #351) --------- */

@media (max-width: 1100px) {
  /* Below this the fixed rail costs the reading more than it earns: a chapter's tables start
     wrapping, and a wrapped table is worse than a console one press away. */
  .lead .lead-layout { grid-template-columns: minmax(0, 1fr); gap: var(--lead-gap); }
  .lead .lead-console-host { width: auto; }
}

@media (max-width: 900px) {
  .lead .lead-chapter__body { grid-template-columns: minmax(0, 1fr); }
  .lead .lead-panel--wide { grid-column: auto; }
}

/* ------------------------------------------------------- the mobile bottom edge (ADR 0020) --
   The house contract, built from docs/guides/mobile-bottom-edge.md rather than copied off
   whichever island this was cloned from. The bottom band holds ONE occupant: the console,
   a bottom sheet whose top edge is its own handle.

   Four things below are the guide's and are not this surface's to reinterpret: the handle is a
   full-width 48px grab bar rather than a floating pill, `--console-h` is one number two objects
   read, the safe-area inset applies only when closed, and the z-budget is shared across every
   surface (backdrop 980, sheet 990, handle 991). Nothing here blurs or fills the backdrop, so
   the board stays readable while a filter is being tapped. */
@media (max-width: 1100px) {
  .lead { --lead-gap: 1rem; --lead-gap-lg: 2rem; --console-h: min(38vh, 320px); }
  .lead .lead-console { max-height: none; }
  .lead .lead-console-host { position: static; width: auto; }

  .lead .lead-console {
    position: fixed;
    /* top: auto is load-bearing. The desktop rule pins the sticky column with `top`, and a fixed
       box that keeps both `top` and `bottom` resolves from the top: the sheet hung from the
       status bar instead of sitting on the bottom edge (ADR 0020). */
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 990;
    height: var(--console-h);
    display: flex;
    flex-direction: column;
    border: 0;
    border-top: 1px solid var(--rule, #d8cec6);
    /* No top radius: the sheet's top edge is the handle now. */
    border-radius: 0;
  }
  .lead[data-console="closed"] .lead-console { display: none; }
  .lead .sidebar-back-btn { display: inline-flex; align-items: center; }
  .lead .lead-console__body {
    max-height: none;
    flex: 1;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    -webkit-overflow-scrolling: touch;
  }

  /* Transparent, so a reader can watch the board while tapping filters. */
  .lead .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 980;
    background: transparent;
    backdrop-filter: none;
  }
  .lead[data-console="closed"] .filter-backdrop { display: none; }

  .lead .console-toggle-bar {
    display: block;
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 991;
    margin: 0;
    padding: .5rem 1rem max(.5rem, env(safe-area-inset-bottom, .5rem));
    background: var(--surface, #fffaf6);
    border-top: 1px solid var(--rule, #d8cec6);
    pointer-events: auto;
    transform: none;
  }
  .lead[data-console="open"] .console-toggle-bar {
    bottom: var(--console-h);
    padding-bottom: .5rem;
  }
  .lead .console-toggle-bar .toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-height: 48px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
  }
  /* A drawer lid points UP when closed and DOWN when open. The label never changes; the arrow
     is the only thing that does, because it is the only thing that has. */
  .lead .toggle-btn .chevron {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform var(--motion-state, 180ms) var(--motion-ease, ease);
  }
  .lead[data-console="open"] .toggle-btn .chevron { transform: rotate(90deg); }

  .lead .console-toggle-bar__count[hidden] { display: none; }
  .lead .console-toggle-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem; height: 1.3rem;
    border-radius: 999px;
    background: var(--accent, #f45500);
    color: var(--on-accent, #121411);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
  }

  /* The palette leaves the z-budget entirely: a static row inside the console, not an object. */
  .lead .palette-slot .theme-swatch {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    z-index: auto;
  }

  .lead .mk-rail { bottom: calc(48px + .75rem); }

  .lead .lead-chain { flex-direction: column; }
  .lead .lead-chain__arrow { transform: rotate(90deg); }
  .lead .lead-person__tier { min-width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* This block had a selector list that ended in a comma and no declarations, so the browser
     dropped the whole rule and the surface honoured nothing. Every transition here is a STATE
     READ arriving -- a bar filling, a wedge brightening, a drawer's chevron turning -- so with
     motion reduced the state still changes, it just arrives instead of travelling. */
  .lead .lead-bar__fill,
  .lead .lead-donut__chart path[data-slice],
  .lead .lead-donut__row,
  .lead .console-toggle-bar .toggle-btn,
  .lead .console-toggle-bar .chevron,
  .lead .toggle-btn .chevron,
  .lead .lead-select,
  .lead .lead-input {
    transition: none;
  }
}

@media print {
  .lead .console-toggle-bar, .lead .filter-backdrop, .lead .lead-console-host { display: none; }
  .lead .lead-layout { grid-template-columns: minmax(0, 1fr); }
  .lead .lead-panel { box-shadow: none; break-inside: avoid; }
  }

/* BEGIN merged Breadcrumbs block (apps/shared/breadcrumbs-base.css)
   Shared Executive Suite wayfinding, scoped to ".lead" by tools/scope_island_css.py.
   Edit apps/shared/breadcrumbs-base.css and re-paste, never this copy. */
.lead .suite-breadcrumbs {
  box-sizing: border-box;
  width: auto;
  margin-left: calc(-1 * var(--suite-breadcrumbs-bleed, clamp(1rem, 2.5vw, 2.4rem)));
  margin-right: calc(-1 * var(--suite-breadcrumbs-bleed, clamp(1rem, 2.5vw, 2.4rem)));
  margin-top: 0;
  margin-bottom: 1rem;
  padding: .55rem clamp(1.1rem, 2.5vw, 2.4rem);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 9px),
    var(--surface-sunken);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  color: var(--muted-ink);
  font-family: var(--font-mono, "SF Mono", Monaco, Consolas, monospace);
  font-size: clamp(.62rem, .58rem + .12vw, .72rem);
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.lead .suite-breadcrumbs__trail { display: flex; flex-wrap: nowrap; align-items: baseline; gap: .25rem .35rem; margin: 0; padding: 0; list-style: none; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent 100%); }
.lead .suite-breadcrumbs__trail::-webkit-scrollbar { display: none; }
.lead .suite-breadcrumbs[data-draggable="true"] .suite-breadcrumbs__trail, .lead .suite-breadcrumbs__trail.is-draggable { cursor: grab; }
.lead .suite-breadcrumbs[data-dragging="true"] .suite-breadcrumbs__trail, .lead .suite-breadcrumbs__trail.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-behavior: auto; }
.lead .suite-breadcrumbs[data-dragging="true"] .suite-breadcrumbs__link, .lead .suite-breadcrumbs__trail.is-dragging .suite-breadcrumbs__link { pointer-events: none; }
.lead .suite-breadcrumbs__trail::after {
  content: "";
  flex: 1 1 0%;
  min-width: .75rem;
  align-self: stretch;
  margin-left: .15rem;
  background: linear-gradient(90deg, var(--rule), transparent 55%);
  opacity: .55;
  pointer-events: none;
}
.lead .suite-breadcrumbs__item { display: inline-flex; align-items: baseline; min-width: 0; flex: 0 0 auto; }
.lead .suite-breadcrumbs__item--root { flex-shrink: 0; }
.lead .suite-breadcrumbs__peers { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .25rem .35rem; }
.lead .suite-breadcrumbs__root-link, .lead .suite-breadcrumbs__link { color: var(--ink); text-decoration: none; transition: color 120ms ease; white-space: nowrap; }
.lead .suite-breadcrumbs__prefix { color: var(--muted-ink); font-weight: 400; }
.lead .suite-breadcrumbs__link { color: var(--muted-ink); padding: 4px 6px; margin: -4px -2px; }
.lead .suite-breadcrumbs__root-link:hover, .lead .suite-breadcrumbs__link:hover { color: var(--accent); }
.lead .suite-breadcrumbs__link.is-active { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.lead .suite-breadcrumbs__divider, .lead .suite-breadcrumbs__sep { color: var(--rule); user-select: none; flex-shrink: 0; }
.lead .suite-breadcrumbs__root-link:focus-visible, .lead .suite-breadcrumbs__link:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 768px) {
  .lead .suite-breadcrumbs {
    margin-left: calc(-1 * var(--suite-breadcrumbs-bleed, clamp(1rem, 2.5vw, 1.25rem)));
    margin-right: calc(-1 * var(--suite-breadcrumbs-bleed, clamp(1rem, 2.5vw, 1.25rem)));
    margin-top: 0;
    margin-bottom: .85rem;
    width: auto;
    max-width: none;
    padding: .5rem 1rem;
    border-left: 0;
    border-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lead .suite-breadcrumbs__root-link, .lead .suite-breadcrumbs__link { transition: none; }
}

/* ------------------------------------------------------------------ nested surfaces (#600)
   One surface in the suite is three dashboards behind one masthead, and the trail shows it:
   hovering or tabbing into People reveals the three. Pointer only, and CSS only. A coarse
   pointer has no hover and a tap on the parent is a navigation, so touch readers reach the
   three from the page's own lens bar instead of from a menu that opens under their thumb. */
.lead .suite-breadcrumbs__nest { position: relative; display: inline-block; }
.lead .suite-breadcrumbs__nest.is-open .suite-breadcrumbs__sub, .lead .suite-breadcrumbs__nest[aria-expanded="true"] .suite-breadcrumbs__sub {
  display: block;
}
/* THE TRAIL CLIPS, so it has to stop while the menu is open. `.suite-breadcrumbs__trail` is a
   horizontally scrolling rail with a fade mask, and a mask clips a child absolutely positioned
   outside it just as overflow does: the menu rendered at the right coordinates and was invisible
   on every real page. While a nest is open the rail drops both, which is safe because the reveal
   is pointer-only and the rail only scrolls when it is too narrow for the pointer case. */
.lead .suite-breadcrumbs__trail.has-open-nest, .lead .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest.is-open), .lead .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest[aria-expanded="true"]), .lead .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest:hover), .lead .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest:focus-within) {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.lead .suite-breadcrumbs__sub {
  position: absolute;
  top: 100%;
  left: -.35rem;
  z-index: 40;
  display: none;
  min-width: 15rem;
  max-width: calc(100vw - 1rem);
  box-sizing: border-box;
  margin-top: .4rem;
  padding: .3rem;
  background: var(--surface-raised, var(--surface, #fff));
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-ink, #121411) 22%, transparent);
}
/* The gap between the link and the menu is bridged, so a pointer travelling down does not
   cross dead space and close the thing it is aiming at. */
.lead .suite-breadcrumbs__sub::before { content: ""; position: absolute; inset: -.5rem 0 100%; }
@media (hover: hover) and (pointer: fine) {
  .lead .suite-breadcrumbs__nest:hover .suite-breadcrumbs__sub, .lead .suite-breadcrumbs__nest:focus-within .suite-breadcrumbs__sub { display: block; }
}
.lead .suite-breadcrumbs__tab {
  display: block;
  padding: .4rem .55rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.lead .suite-breadcrumbs__tab:hover { background: var(--hover-wash, color-mix(in srgb, var(--accent) 10%, transparent)); }
.lead .suite-breadcrumbs__tab:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: -2px; }
.lead .suite-breadcrumbs__tab-label { display: block; font-weight: 700; font-size: .82rem; }
.lead .suite-breadcrumbs__tab-question { display: block; font-size: .72rem; color: var(--muted-ink); }

/* END merged Breadcrumbs block (apps/shared/breadcrumbs-base.css) */

/* BEGIN merged Markup block (apps/shared/markup-base.css)
   The Executive Markup pen and its overlay, scoped to ".lead" by tools/scope_island_css.py.
   Edit apps/shared/markup-base.css and re-paste, never this copy;
   tools/check_merged_blocks.py fails the build if this drifts from its source. */
/* Executive Markup V2 -- the pen and the island's frozen state (#598).
 * Pasted under each island's own scope by tools/scope_island_css.py. Everything the drawing
 * surface itself needs ships inside markup-app.css and mounts outside the island, so this
 * block only styles the pen beside the palette and what the live dashboard does while a board
 * is open. Every selector starts with `.` or `[` so the scoping pass confines it. */

.lead .markup-pen {
  position: sticky; bottom: 5.75rem; margin-left: 1.25rem; z-index: 95;
  display: flex; clear: both; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--rule, rgba(18, 20, 17, .18)); border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink, #121411); font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #121411) 22%, transparent);
  opacity: .85; cursor: pointer;
  transition: opacity var(--motion-state, 180ms) var(--motion-ease, ease), border-color var(--motion-feedback, 120ms) var(--motion-ease, ease),
    background-color var(--motion-feedback, 120ms) var(--motion-ease, ease), color var(--motion-feedback, 120ms) var(--motion-ease, ease),
    transform var(--motion-feedback, 120ms) var(--motion-ease, ease);
}
.lead .markup-pen:hover, .lead .markup-pen:focus-within { opacity: 1; border-color: var(--edge-strong, currentColor); }
.lead .markup-pen:active { transform: translateY(1px); }
.lead .markup-pen:focus-visible { outline: 2px solid var(--focus, #f45500); outline-offset: 3px; }
.lead .markup-pen[aria-pressed="true"] { opacity: 1; background: var(--ink, #121411); color: var(--invert-ink, var(--background, #fef1e8)); border-color: var(--ink, #121411); }
.lead .markup-pen[aria-busy="true"] { cursor: progress; }
.lead .markup-pen[aria-busy="true"] .markup-pen__icon { animation: markup-pen-tap 900ms ease-in-out infinite; }
.lead .markup-pen__icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* Animated hover tooltip: explains that it freezes current dashboard view */
.lead .markup-pen__tooltip {
  position: absolute; bottom: calc(100% + .65rem); left: 0; z-index: 120;
  display: flex; flex-direction: column; gap: 2px; padding: .45rem .65rem;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--edge-strong, rgba(18, 20, 17, .24));
  border-radius: 8px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #121411) 20%, transparent);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity var(--motion-state, 180ms) var(--motion-ease, ease), transform var(--motion-state, 180ms) var(--motion-ease, ease);
  white-space: nowrap; text-align: left;
}
.lead .markup-pen:hover .markup-pen__tooltip, .lead .markup-pen:focus-visible .markup-pen__tooltip {
  opacity: 1; transform: translateY(0);
}
.lead .markup-pen__label {
  font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--ink, #121411);
}
.lead .markup-pen__desc {
  font-size: .65rem; font-weight: 400; line-height: 1.2; color: var(--muted-ink, #555); letter-spacing: .01em;
}

@keyframes markup-pen-tap { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) rotate(-6deg) } }

/* Mobile: floating fixed icon on lower left, always outside the filter console */
@media (max-width: 768px) {
  .lead .markup-pen {
    position: fixed;
    bottom: calc(max(env(safe-area-inset-bottom, 0px), .5rem) + 4.25rem);
    left: 1.25rem;
    margin-left: 0;
    z-index: 990;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--shadow-ink, #121411) 28%, transparent);
  }
  .lead .markup-pen__tooltip { display: none; }
}

/* Instant veil -- mounted at 0ms upon pen button click for immediate user feedback */
.lead .fm-instant-veil {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface, #fff) 85%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  font-family: var(--body-font);
  animation: fm-fade 160ms ease both;
}
.lead .fm-instant-veil .fm-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  padding: 1.75rem 2rem 1.5rem; border-radius: 20px;
  background: var(--surface, #fff); color: var(--ink, #121411);
  border: 1px solid var(--rule, rgba(18,20,17,.16));
  box-shadow: 0 10px 30px rgba(18,20,17,.18);
  width: min(390px, calc(100vw - 2.5rem)); text-align: center;
}
.lead .fm-instant-veil .fm-progress-bar {
  width: 100%; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 60%, #e0e0e0);
  overflow: hidden; position: relative;
}
.lead .fm-instant-veil .fm-progress-bar__fill--animated {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--focus, #f45500), #ff8b4d);
  animation: fm-instant-pulse 1.8s ease-in-out infinite;
}
@keyframes fm-instant-pulse {
  0% { width: 15%; }
  50% { width: 75%; }
  100% { width: 92%; }
}

/* While a board is open the island sits inert under the overlay; the state is stated by the
 * attribute, never by colour alone. Paused is the exception -- the dashboard is live again on
 * purpose, so nothing recedes and the pen only marks that a board is waiting. */
.lead [data-markup="canvas"], .lead [data-markup="saving"], .lead [data-markup="viewing"] { user-select: none; }
.lead [data-markup="paused"] .markup-pen { border-color: var(--warn, #b8860b); }

@media (prefers-reduced-motion: reduce) {
  .lead .markup-pen { transition: none; }
  .lead .markup-pen__tooltip { transition: none; }
  .lead .markup-pen[aria-busy="true"] .markup-pen__icon { animation: none; }
  .lead .fm-instant-veil .fm-progress-bar__fill--animated { animation: none; width: 60%; }
}
/* END merged Markup block (apps/shared/markup-base.css) */


/* BEGIN merged UX block (apps/shared/ux-base.css)
   The UX bar (#587): motion tokens, pressed feedback, the status chip, the change cue, the
   busy veil, and the mobile sheet entrance. Generated from the shared source under the scope
   ".lead" by tools/scope_island_css.py; edit apps/shared/ux-base.css and re-paste, never this
   copy. Drift is caught by tools/check_merged_blocks.py.
   Island-specific UX rules belong in the override zone AFTER the END delimiter. */
/* ---------- 1. motion vocabulary ---------- */
/* Durations are the whole timing story. A control reads one token; nothing in
   an island states a millisecond value of its own for a UX-bar behaviour. */
.lead {
  --motion-feedback: 120ms;   /* press, hover, toggle acknowledgement */
  --motion-state: 180ms;      /* a state the eye must follow: selected, mode, chip in/out */
  --motion-layout: 280ms;     /* a sheet, a panel, a change cue settling */
  --motion-focus: 360ms;      /* a focal element arriving once */
  --motion-focal: 550ms;      /* the rare authored moment; one per surface, if any */
  --motion-ease: cubic-bezier(.16, 1, .3, 1);      /* confident arrival */
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);   /* leaves faster than it came */
  --host-chrome-bottom: 0px;                       /* shared runtime measurement */
  --ux-status-gap: .75rem;                         /* one shared clearance, not a surface offset */
  --ux-status-top: calc(var(--host-chrome-bottom) + var(--ux-status-gap));
}
/* Reduced motion is one switch, not a hunt: every duration collapses to zero,
   so each transition and animation below completes on its first frame while the
   state it carried (pressed, selected, done, failed) still lands. Reduced motion
   is never reduced information. */
@media (prefers-reduced-motion: reduce) {
  .lead {
    --motion-feedback: 0ms;
    --motion-state: 0ms;
    --motion-layout: 0ms;
    --motion-focus: 0ms;
    --motion-focal: 0ms;
  }
}

/* ---------- 2. pressed feedback ---------- */
/* The shared control vocabulary acknowledges a press before anything else
   happens: a 1px settle on :active, back on release. Islands add their own
   control classes to this list in their override zone, never a second rule. */
.lead .mode-switch__btn, .lead .xrail__btn, .lead .cw__expand, .lead .ct__sort, .lead .copy-prompt-btn, .lead .copy-prompt-option, .lead .copy-prompt-opt, .lead .toggle-btn, .lead .sidebar-back-btn, .lead .reset-btn, .lead .scopebar-reset, .lead .theme-swatch__btn, .lead .mk-toggle, .lead .mk-rail__btn, .lead .opt-btn, .lead .acronym-btn, .lead .gender-btn, .lead .filter-tag__remove {
  transition: transform var(--motion-feedback) var(--motion-ease),
              background-color var(--motion-feedback) linear,
              border-color var(--motion-feedback) linear,
              color var(--motion-feedback) linear,
              box-shadow var(--motion-feedback) linear;
}
.lead .mode-switch__btn:active, .lead .xrail__btn:active:not([disabled]), .lead .cw__expand:active, .lead .ct__sort:active, .lead .copy-prompt-btn:active, .lead .copy-prompt-option:active, .lead .copy-prompt-opt:active, .lead .toggle-btn:active, .lead .sidebar-back-btn:active, .lead .reset-btn:active, .lead .scopebar-reset:active, .lead .theme-swatch__btn:active, .lead .mk-toggle:active, .lead .mk-rail__btn:active, .lead .opt-btn:active, .lead .acronym-btn:active, .lead .gender-btn:active, .lead .filter-tag__remove:active {
  transform: translateY(1px);
}

/* ---------- 3. the status chip ---------- */
/* One chip per island, mounted by dashboard-status.mjs. It sits top-centre,
   below the shared host-chrome boundary measured at runtime, so the mobile bottom
   edge keeps its one occupant (ADR 0020). It is the visible half of every announce():
   the live region says it to a screen reader, the chip says it to everyone else.
   Same words, both places. */
.lead .ux-status {
  position: fixed;
  top: var(--ux-status-top);
  left: 50%;
  z-index: 996;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: min(92vw, 36rem);
  min-height: 2.5rem;
  padding: .45rem .9rem .45rem .75rem;
  border: 1px solid var(--invert-surface, var(--classic-ink, var(--ink, #121411)));
  border-radius: 999px;
  background: var(--invert-surface, var(--classic-ink, var(--ink, #121411)));
  color: var(--invert-ink, var(--classic-surface, var(--surface, #ffffff)));
  font-family: var(--classic-body-font, var(--font-body, system-ui, sans-serif));
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .005em;
  box-shadow: 0 10px 24px -10px var(--shadow-ink, rgba(0, 0, 0, .45));
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity var(--motion-feedback) var(--motion-ease-exit),
              transform var(--motion-feedback) var(--motion-ease-exit);
}
.lead .ux-status[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition: opacity var(--motion-state) var(--motion-ease),
              transform var(--motion-state) var(--motion-ease);
}
.lead .ux-status__text { min-width: 0; overflow-wrap: anywhere; }
.lead .ux-status__mark {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}
.lead .ux-status__mark svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* done: the mark draws its tick once, then rests. */
.lead .ux-status[data-kind="done"] .ux-status__mark { color: var(--state-healthy, var(--classic-healthy, #2f9a52)); }
.lead .ux-status[data-kind="done"] .ux-status__mark path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: favor-ux-tick var(--motion-state) var(--motion-ease) forwards; }
/* busy: the only loop in the block, and it stops the moment the chip changes kind
   or closes, because the spinning element leaves with it. */
.lead .ux-status[data-kind="busy"] .ux-status__mark { animation: favor-ux-spin 900ms linear infinite; }
/* fail: inverted back to the surface so the red carries the weight, and the chip
   stays until dismissed -- a failure is never a toast. */
.lead .ux-status[data-kind="fail"] {
  background: var(--classic-surface, var(--surface, #ffffff));
  color: var(--classic-ink, var(--ink, #121411));
  border-color: var(--state-critical, var(--classic-critical, #b3261e));
  box-shadow: 0 10px 24px -10px var(--shadow-ink, rgba(0, 0, 0, .45)), inset 0 0 0 1px var(--state-critical, var(--classic-critical, #b3261e));
}
.lead .ux-status[data-kind="fail"] .ux-status__mark { color: var(--state-critical, var(--classic-critical, #b3261e)); }
.lead .ux-status__btn {
  position: relative;
  flex: none;
  margin: -.2rem -.45rem -.2rem 0;
  min-height: 2rem;
  padding: 0 .65rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.lead .ux-status__btn::after { content: ""; position: absolute; inset: -.45rem -.3rem; }
.lead .ux-status__btn:hover { background: var(--hover-wash, rgba(127, 127, 127, .14)); }
.lead .ux-status__btn:active { transform: translateY(1px); }
.lead .ux-status__btn:focus-visible { outline: 2px solid var(--classic-focus, var(--focus, #005eb8)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lead .ux-status[data-kind="busy"] .ux-status__mark { animation: none; }
  .lead .ux-status[data-kind="done"] .ux-status__mark path { animation: none; stroke-dashoffset: 0; }
}

/* A live region an island can mount when it has none: present to assistive tech, absent
   from layout. The chip is the sighted half of whatever is written here. */
.lead .ux-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- 4. the change cue ---------- */
/* After a filter or scope change the stations whose reading changed settle
   once: an accent inset ring that fades over the layout beat. Applied by
   dashboard-status.mjs markChanged(), to a capped handful of nodes, once per
   user action -- never ambient, never on load. */
.lead .ux-changed { animation: favor-ux-settle var(--motion-layout) var(--motion-ease) 1 both; }

/* ---------- 5. the busy veil ---------- */
/* A region that is truthfully still working. It keeps the last reading visible
   under a light veil rather than blanking it, and the cursor says "working". */
.lead .ux-busy { position: relative; cursor: progress; }
.lead .ux-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--classic-surface, var(--surface, #ffffff));
  opacity: .42;
  pointer-events: none;
  transition: opacity var(--motion-state) linear;
}

/* ---------- 6. the mobile sheet ---------- */
/* The console arrives from the edge it lives on and the handle rides up with it
   (docs/guides/mobile-bottom-edge.md). Closing is instant on the sheet and a beat
   shorter on the handle: exits are faster than entrances. The state attribute lives
   on the island root, so :is([data-console="open"] *) reaches it from inside the
   scope prefix without a per-island exception. */
@media (max-width: 768px) {
  .lead .filter-sidebar:is([data-console="open"] *) { animation: favor-ux-sheet-in var(--motion-layout) var(--motion-ease) 1 both; }
  .lead .sidebar-toggle-bar, .lead .console-toggle-bar { transition: bottom var(--motion-layout) var(--motion-ease); }
  .lead .sidebar-toggle-bar:is([data-console="closed"] *), .lead .console-toggle-bar:is([data-console="closed"] *) { transition-duration: var(--motion-state); transition-timing-function: var(--motion-ease-exit); }
  .lead .ux-status { max-width: calc(100vw - 2rem); }
}

@keyframes favor-ux-tick { to { stroke-dashoffset: 0; } }
@keyframes favor-ux-spin { to { transform: rotate(360deg); } }
@keyframes favor-ux-settle {
  from { box-shadow: inset 0 0 0 2px var(--classic-accent, var(--accent, #f45500)); }
  to { box-shadow: inset 0 0 0 2px transparent; }
}
@keyframes favor-ux-sheet-in {
  from { transform: translateY(18px); opacity: .001; }
  to { transform: translateY(0); opacity: 1; }
}

/* ------------------------------------------------------------- the theme swatch (#611)
   At rest: `Theme` and one disc, the palette showing now, plus shuffle. The rest arrive on
   hover and stay on a click, the same gesture as every readout (DESIGN.md). Each island keeps
   its own chrome for the pill and the discs; what lives here is the structure, so a palette
   added later costs no layout anywhere. */
/* No `position` here on purpose. Each island places the pill itself (sticky at the page's lower
   left on desktop), and setting `relative` here silently un-stuck all of them. The menu anchors
   to whatever the island placed, because sticky is already a positioned ancestor; the one case
   that needs help is the mobile console row, where the pill is static. */
.lead .palette-slot .theme-swatch { position: relative; }
.lead .theme-swatch__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-ink); padding-left: .35rem;
}
/* The trigger is the current palette: a disc, and nothing else at rest. It keeps each island's
   own disc chrome by also carrying .theme-swatch__btn. */
.lead .theme-swatch__trigger { position: relative; }
.lead .theme-swatch__trigger[aria-expanded="true"] { z-index: 41; }
.lead .theme-swatch__menu {
  position: absolute; bottom: calc(100% + .4rem); left: 0; z-index: 40;
  display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .3rem;
  background: var(--surface-raised, var(--surface)); border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink, #121411) 26%, transparent);
}
.lead .theme-swatch__menu[hidden] { display: none; }
/* The gap between the trigger and the menu is bridged, so a pointer travelling up does not
   cross dead space and close the thing it is aiming at. */
.lead .theme-swatch__menu::after { content: ""; position: absolute; inset: 100% 0 -.5rem; }
.lead .theme-swatch__shuffle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0; margin-left: .1rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted-ink);
  cursor: pointer;
}
.lead .theme-swatch__shuffle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lead .theme-swatch__shuffle:hover { color: var(--ink); background: var(--hover-wash, color-mix(in srgb, var(--accent) 12%, transparent)); }
.lead .theme-swatch__shuffle:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: 2px; }
/* Pinned reads as held open rather than as hovered. */
.lead .theme-swatch[data-pinned="true"] /* The trigger is the current palette: a disc, .lead and nothing else at rest. It keeps each island's
   own disc chrome by also carrying .theme-swatch__btn. */
.theme-swatch__trigger { position: relative; }
.lead .theme-swatch__trigger[aria-expanded="true"] { z-index: 41; }
.lead .theme-swatch__menu { border-color: var(--edge-strong, var(--ink)); }

/* END merged UX block (apps/shared/ux-base.css) */

/* ---------------------------------------------------------------------------- the readout ----
   The shared tooltip (apps/shared/dashboard-tooltip.mjs), dressed for this surface. The DOM and
   the gesture are the suite's; only the skin is local, so a reader who learns the readout on one
   dashboard has learned it on all of them.

   It is SUPPLEMENTARY: every value it carries is already drawn beside its mark. What it adds is
   what does not fit on the row -- the caveat, the denominator, the reason a figure is unknown. */
.lead .dashboard-tip {
  position: fixed;
  /* Above Rock's chrome: its left nav is z-index 1025 and its top header 1030, so 1000 put the
   * bubble UNDER both and any mark in the left third of the page opened a tooltip the sidebar
   * covered. Matches the shared floor in apps/shared/classic-base.css. */
  z-index: 1040;
  max-width: 22rem;
  padding: .55rem .7rem;
  border: 1px solid var(--edge-strong, #8d8880);
  border-radius: 8px;
  background: var(--surface-raised, #fdf6f1);
  color: var(--ink, #121411);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink, #121411) 14%, transparent),
              0 14px 32px color-mix(in srgb, var(--shadow-ink, #121411) 16%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-feedback, 120ms) linear;
}
.lead .dashboard-tip[data-open="true"] { opacity: 1; }
/* A pinned bubble accepts the pointer, so its text can be selected and read at leisure. */
.lead .dashboard-tip[data-pinned="true"] { pointer-events: auto; border-color: var(--accent, #f45500); }
.lead .dashboard-tip__card { display: flex; flex-direction: column; gap: .18rem; }
.lead .dashboard-tip__head { display: flex; align-items: center; gap: .4rem; }
.lead .dashboard-tip__swatch {
  width: .6rem; height: .6rem;
  border-radius: 2px;
  flex: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow-ink, #121411) 25%, transparent);
}
.lead .dashboard-tip__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint-ink, #726f65);
}
.lead .dashboard-tip__value { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.3; }
.lead .dashboard-tip__compare { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted-ink, #625f59); }
.lead .dashboard-tip__unit { font-size: .74rem; line-height: 1.4; color: var(--faint-ink, #726f65); }

/* A mark that carries a readout says so: a dotted underline on text triggers, and a cursor
   change on the rest. Without it the bubble is a surprise rather than an affordance. */
.lead [data-tip] { cursor: help; }
.lead button[data-tip], .lead a[data-tip] { cursor: pointer; }
.lead td[data-tip] { text-decoration: underline dotted var(--edge-strong, #8d8880); text-underline-offset: 3px; }

/* ------------------------------------------------------------------------------- the (i) ----
   Prose never occupies layout (DESIGN.md). This is the mark it lives behind: a real button, so
   hover, focus, and tap all open it, sized to a 32px visual with a 44px hit box through the
   ::after extension rather than by growing the glyph. */
.lead .info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  margin-left: .4rem;
  width: 1.15rem; height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-ink, #625f59);
  cursor: help;
  flex: none;
}
.lead .info-tip::after { content: ""; position: absolute; inset: -.75rem; }
.lead .info-tip svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lead .info-tip .dotcap { fill: currentColor; stroke: none; }
.lead .info-tip:hover, .lead .info-tip:focus-visible { color: var(--accent-deep, #c23f00); }

/* ------------------------------------------------------------------- the export rail + prompt
   Both are shared furniture, dressed for this surface and never re-shaped. The rail is quiet by
   design: it sits at the end of the panel head, it is ink on surface, and the accent is reserved
   for the copied state. */
.lead .lead-panel__rail { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.lead .xrail { display: flex; align-items: center; gap: .25rem; }
.lead .xrail__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 32px;
  padding: 0 .45rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 6px;
  background: var(--surface-raised, #fdf6f1);
  color: var(--ink, #121411);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .xrail__btn::after { content: ""; position: absolute; inset: -6px; }
.lead .xrail__btn:hover { border-color: var(--edge-strong, #8d8880); background: var(--hover-wash, #fff2e8); }
.lead .xrail__btn[disabled] { opacity: .45; cursor: not-allowed; }
.lead .xrail__btn.is-copied { border-color: var(--accent, #f45500); color: var(--accent-deep, #c23f00); }
.lead .xrail__icon { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lead .xrail__label { white-space: nowrap; }
.lead .xrail__suffix { color: var(--faint-ink, #726f65); font-weight: 400; }

/* The masthead is a two-column head: the title and its question on the reading edge, the page's
   two artifacts (the prompt and the package) on the opposite edge, where a reader looks for
   actions rather than for words. They stack under the question only once the column is too
   narrow to hold both. */
.lead .lead-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title tools" "question tools";
  column-gap: var(--lead-gap-lg, 2rem);
  align-items: start;
}
.lead .lead-masthead__title { grid-area: title; }
.lead .lead-masthead__question { grid-area: question; }
.lead .lead-masthead__tools {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  margin-top: .35rem;
}
@media (max-width: 900px) {
  .lead .lead-masthead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "question" "tools"; }
  .lead .lead-masthead__tools { align-items: flex-start; margin-top: 1rem; }
}
.lead .copy-prompt { position: relative; }
.lead .copy-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .85rem;
  border: 1px solid var(--ink, #121411);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #121411);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .copy-prompt-btn:hover, .lead .copy-prompt-btn[aria-expanded="true"] {
  background: var(--ink, #121411);
  color: var(--background, #fef1e8);
}
.lead .copy-prompt-btn.is-copied { border-color: var(--accent, #f45500); color: var(--accent-deep, #c23f00); background: transparent; }
.lead .copy-prompt-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lead .copy-prompt-btn__caret { width: .7rem; height: .7rem; }
.lead .copy-prompt-popover {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 140;
  min-width: 19rem;
  padding: .45rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 10px;
  background: var(--surface, #fffaf6);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink, #121411) 12%, transparent),
              0 16px 34px color-mix(in srgb, var(--shadow-ink, #121411) 14%, transparent);
}
.lead .copy-prompt--end .copy-prompt-popover { left: auto; right: 0; }
.lead .copy-prompt-popover[hidden] { display: none; }
.lead .copy-prompt-option {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100%;
  padding: .55rem .6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lead .copy-prompt-option:hover { background: var(--hover-wash, #fff2e8); }
.lead .copy-prompt-option__body { display: flex; flex-direction: column; gap: .1rem; }
.lead .copy-prompt-option__label { font-size: .84rem; font-weight: 700; }
.lead .copy-prompt-option__hint { font-size: .74rem; color: var(--muted-ink, #625f59); line-height: 1.4; }
.lead .copy-prompt-error {
  margin: .3rem .6rem .5rem;
  font-size: .76rem;
  color: var(--state-critical-text, #a5171d);
}

/* The roster overflow line is a reading, not prose: it states what is on screen. */
.lead .lead-more { margin: .5rem 0 0; font-size: .76rem; color: var(--faint-ink, #726f65); }

/* The desktop palette keeps exactly what it has on every other surface. */
.lead .palette-slot { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--rule, #d8cec6); }

/* The desktop pill keeps the generated swatch chrome (tools/build_theme_blocks.py): sticky at
   the page's lower left, exactly where every other Executive surface puts it. */


/* The AI guidelines line is part of the shared copy-prompt component, so it is dressed rather
   than moved: it is a link to a policy, not an explainer about a reading. */
.lead .ai-guidelines-tip {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-size: .74rem;
  color: var(--faint-ink, #726f65);
}
.lead .ai-guidelines-tip__link { color: var(--focus, #0077a4); text-underline-offset: 3px; }
.lead .ai-guidelines-tip__mark { font-size: .7rem; }
.lead .how-to-tip { font-size: .74rem; color: var(--faint-ink, #726f65); }
.lead .how-to-tip__link { color: var(--focus, #0077a4); text-underline-offset: 3px; }


/* BEGIN production hold (#638) -- extracted verbatim into the /exec/people block by
   tools/build_leadership_block.py, because the hold shipped while the scp transport to the
   web root was down and the block is the one artifact that reaches prod over REST. Delete
   this section and the block stops carrying it; nothing else needs changing. */
/* ------------------------------------------------------------------ the production hold (#638)
   Production holds while the body of this dashboard is rebuilt against the Manila peg; preview
   keeps the live reading. See the `holdingSurface` comment in leadership-boot.mjs for the gate
   and for exactly what to delete when the hold lifts — these rules go with it.

   The surface is deliberately short, so its whole design problem is one column of text and one
   drawing. Every value below binds to a theme token, so the hold re-themes with the swatch like
   every other surface rather than freezing one palette into the page that explains a rewrite. */

.lead--hold .lead-hold { padding: 1.75rem var(--lead-gap) 0; max-width: 68ch; }

/* The state, in four words, above the sentence that repeats it in the product's own language.
   It is the machine-readable half; the title is the human half. */
.lead--hold .lead-hold__status {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep, #c23f00);
}
.lead--hold .lead-hold__title {
  margin: 0;
  font-family: var(--lead-display-font);
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.lead--hold .lead-hold__question {
  margin: .6rem 0 0;
  max-width: 46ch;
  color: var(--muted-ink, #625f59);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.lead--hold .lead-hold__line {
  margin: .7rem 0 0;
  max-width: 58ch;
  color: var(--muted-ink, #625f59);
  font-size: .92rem;
  line-height: 1.55;
  text-wrap: pretty;
}
/* One way out, in the surface's own words. Multiplication carries the same link in the same
   place, for the same reason: a page that cannot answer yet should point somewhere that can. */
.lead--hold .lead-hold__back {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--accent-deep, #c23f00);
  font-size: .85rem;
  font-weight: 700;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------------------------ the drawing --
   The two forms being restored: an ordered descent, and a part-to-whole ring. Widths and the
   ring's stroke share one scale so the pair reads as one sketch rather than two charts parked
   beside each other. Nothing here carries a figure. */
.lead--hold .lead-hold__figure { margin: 1.9rem var(--lead-gap) 2.5rem; max-width: 42rem; }
.lead--hold .lead-hold__figure svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The descent. Opacity falls with the steps, so the narrowing is legible even where the bars
   are clipped by a narrow viewport. */
.lead--hold .lead-hold__step { fill: var(--secondary, #0077a4); opacity: .9; }
.lead--hold .lead-hold__step:nth-of-type(2) { opacity: .75; }
.lead--hold .lead-hold__step:nth-of-type(3) { opacity: .6; }
.lead--hold .lead-hold__step:nth-of-type(5) { opacity: .45; }

/* A tier nobody measures. Hollow, never a shorter filled bar, because a short bar is a small
   number and this is an absence (ADR 0018). */
.lead--hold .lead-hold__step--unmeasured {
  fill: none;
  stroke: var(--secondary, #0077a4);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: .55;
}

.lead--hold .lead-hold__arc { fill: none; stroke-width: 24; stroke-linecap: butt; }
.lead--hold .lead-hold__arc--connect { stroke: var(--secondary, #0077a4); }
.lead--hold .lead-hold__arc--ministry { stroke: var(--accent, #f45500); }
.lead--hold .lead-hold__arc--both { stroke: var(--brand-gold, #ffb42a); }

@media (max-width: 47.9375rem) {
  .lead--hold .lead-hold { padding-top: 1.25rem; }
  .lead--hold .lead-hold__figure { margin-top: 1.75rem; margin-bottom: 2rem; }
}
/* END production hold (#638) */

/* ---------- BEGIN pasted apps/shared/classic-base.css (scope .lead) ---------- */
/* ==========================================================================
   Classic mode -- token-agnostic composition block (#214).
   Spec: docs/design/classic-grammar.md. Builders: apps/shared/classic-widgets.mjs.

   Each island merges this block into its own stylesheet under its own scope
   prefix (#exec-overview-island / .pathways / #connect-field). Every selector
   here starts with "." "[" or "#" so a prefixing pass can wrap it verbatim;
   there is no :root, no bare element, no *, and no @keyframes.

   An island sets these on its root (under [data-mode="classic"] or always):
     --classic-surface        widget / tile ground
     --classic-surface-2      table head band, hover band, bar track, switch well
     --classic-ink            all text, all numerals
     --classic-muted          labels, units, captions, deltas, the (i) glyph
     --classic-rule           hairlines
     --classic-accent         open (i), copied state, current-mode rule
     --classic-focus          the focus ring
     --classic-wash-healthy | -watch | -thin | -neutral | -unknown   backgrounds only
     --classic-bar            inline bars and sparklines (one data hue, never state)
     --classic-heading-font   widget titles
     --classic-body-font      everything else
   Optional: --classic-shadow (popover shadow), --classic-num-font (defaults to Arial).

   Every color below is a bare var(--classic-*) with NO fallback. It used to carry a
   var(--classic-x, var(--y, #creamHex)) chain ending in a literal, on the theory that a
   widget should render sanely before an island had mapped a value. Under a theme switch
   that theory inverts: a broken chain no longer degrades, it paints cream into a dark
   theme and looks like a rendering bug rather than a missing token. Every island now
   receives the whole map from its generated theme blocks
   (tools/build_theme_blocks.py), in all four themes, so there is nothing left to fall
   back to and an unmapped token must fail visibly instead of quietly.
   ========================================================================== */

/* ---------- layout ---------- */
.lead .classic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.lead .classic-grid > .kpi-strip, .lead .classic-grid > .cw { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 48rem) {
  .lead .classic-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; }
  .lead .classic-grid > .cw--half { grid-column: span 6; }
  .lead .classic-grid > .cw--expanded { grid-column: 1 / -1; }
}

/* ---------- widget (cw) ---------- */
.lead .cw { display: flex; flex-direction: column; min-width: 0; background: var(--classic-surface); border: 1px solid var(--classic-rule); color: var(--classic-ink); font-family: var(--classic-body-font); }
.lead .cw__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .9rem; padding: .8rem .9rem .6rem; border-bottom: 1px solid var(--classic-rule); }
.lead .cw__lead { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lead .cw__titlerow { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.lead .cw__title { margin: 0; font-family: var(--classic-heading-font); font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--classic-ink); text-wrap: balance; }
.lead .cw__question { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--classic-muted); }
.lead .cw__info { margin-left: .1rem; }
.lead .cw__tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: none; }
.lead .cw__rail { display: flex; align-items: center; }
.lead .cw__expand { position: relative; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--classic-rule); background: transparent; color: var(--classic-muted); cursor: pointer; }
.lead .cw__expand::after { content: ""; position: absolute; inset: -.4rem; }
.lead .cw__expand svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lead .cw__expand:hover { color: var(--classic-ink); border-color: var(--classic-ink); }
.lead .cw__expand[aria-pressed="true"] { background: var(--classic-ink); color: var(--classic-surface); border-color: var(--classic-ink); }
/* No padding at the top of the scroll container. The scrollport is the padding box, so a
   top inset here leaves a band the sticky <thead> cannot cover and rows slide visibly
   through it; the head rule and the cells' own padding carry the breathing room instead. */
.lead .cw__body { position: relative; padding: 0 .9rem .8rem; overflow: auto; max-height: 28rem; min-width: 0; }
.lead .cw--expanded .cw__body { max-height: none; }
/* A body showing readings rather than a table has nothing to scroll, and capping it clips
   the (i) popovers its tiles open. Any table in the body means the cap is doing real work. */
.lead .cw__body:has(.kpi-strip):not(:has(.ct)) { overflow: visible; max-height: none; }
.lead .cw__aid { display: flex; align-items: flex-start; justify-content: center; padding: .5rem 0; min-width: 0; }
.lead .cw__aid svg { display: block; max-width: 100%; height: auto; }
.lead .cw__aid:empty { display: none; }
.lead .cw__note { margin: 0; padding: .55rem .9rem .7rem; border-top: 1px solid var(--classic-rule); font-size: .82rem; line-height: 1.45; color: var(--classic-ink); }
.lead .cw__note strong { font-weight: 700; }
/* Beside the table only where the widget's own column can hold both. A half-width widget
   has room for one or the other, so its aid stays under the table until the widget is
   expanded back to full width. Below that the body is a plain block and the aid follows
   the table because it follows it in the DOM (classic-widgets.mjs keeps it last). */
@media (min-width: 64rem) {
  .lead .cw--has-aid:not(.cw--half) .cw__body, .lead .cw--has-aid.cw--half.cw--expanded .cw__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: 1rem; align-items: start; }
  .lead .cw--has-aid:not(.cw--half) .cw__aid, .lead .cw--has-aid.cw--half.cw--expanded .cw__aid { grid-column: 2; grid-row: 1; position: sticky; top: 0; }
}

/* ---------- unavailable (a refusal is never a zero) ---------- */
.lead .cw__unavail { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: .45rem 0 .2rem; padding: 1rem 1rem 1.05rem; border: 1px dashed var(--classic-muted); background: transparent; color: var(--classic-ink); }
.lead .cw__unavail-label { font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--classic-muted); }
.lead .cw__unavail-reason { margin: 0; font-size: .84rem; line-height: 1.5; max-width: 52ch; }

/* ---------- classic table (ct) ---------- */
.lead .ct { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: .86rem; line-height: 1.35; color: var(--classic-ink); font-family: var(--classic-body-font); }
.lead .ct caption { caption-side: bottom; text-align: left; padding: .5rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--classic-muted); }
.lead .ct th, .lead .ct td { padding: .42rem .55rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--classic-rule); white-space: nowrap; }
.lead .ct th:first-child, .lead .ct td:first-child { padding-left: 0; white-space: normal; }
.lead .ct th:last-child, .lead .ct td:last-child { padding-right: 0; }
.lead .ct thead th { position: sticky; top: 0; z-index: 1; font-size: .74rem; font-weight: 700; color: var(--classic-muted); background: var(--classic-surface); border-bottom: 1px solid var(--classic-ink); text-transform: none; letter-spacing: 0; }
.lead .ct tbody th { font-weight: 600; }
/* Row headers stay put while a wide pivot scrolls sideways inside .cw__body. */
.lead .ct thead th:first-child, .lead .ct tbody th[scope="row"] { position: sticky; left: 0; background-color: var(--classic-surface); }
.lead .ct thead th:first-child { z-index: 2; }
.lead .ct tbody tr:hover > th, .lead .ct tbody tr:hover > td { background-color: var(--classic-surface-2); }
.lead .ct__num { font-family: var(--classic-num-font, Arial, sans-serif); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.lead .ct td.ct__num, .lead .ct th.ct__num { text-align: right; }
.lead .ct__share { color: var(--classic-muted); }
.lead .ct__unavail { color: var(--classic-muted); }
.lead .ct__group > th { padding-top: .95rem; font-size: .74rem; font-weight: 700; color: var(--classic-muted); border-bottom: 1px solid var(--classic-ink); }
.lead .ct tbody:first-of-type .ct__group > th { padding-top: .5rem; }
.lead .ct tbody tr.ct__group:hover > th { background: transparent; }
.lead .ct__total > th, .lead .ct__total > td { border-top: 2px solid var(--classic-ink); border-bottom: 0; font-weight: 700; }
.lead .ct__total .ct__share { color: var(--classic-ink); }
.lead .ct__bar { width: 7.5rem; min-width: 5rem; vertical-align: middle; }
.lead .ct__bar-track { display: block; height: .55rem; width: 100%; background: var(--classic-surface-2); }
.lead .ct__bar-fill { display: block; height: 100%; max-width: 100%; background: var(--classic-bar); }
.lead .ct__spark { width: 8.5rem; vertical-align: middle; }
.lead .ct__spark svg { display: block; overflow: visible; }
.lead .spark__base { stroke: var(--classic-rule); stroke-width: 1; }
.lead .spark__line { fill: none; stroke: var(--classic-bar); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.lead .spark__dot { fill: var(--classic-bar); }
/* Sorting is the primary interaction in a Classic table, and on a phone the control is the
   column label -- about 28px tall, under the 44px a thumb needs. Every other control in this
   grammar already carries the same invisible hit expander (.cw__expand, .info-disc > summary,
   .xrail__btn); this one was the exception. Vertical only, so neighbouring column headers
   keep their own horizontal edges. */
.lead .ct__sort { position: relative; display: inline-flex; align-items: center; gap: .25rem; min-height: 1.75rem; margin: -.3rem 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.lead .ct__sort::after { content: ""; position: absolute; inset: -.5rem 0; }
.lead .ct__sort svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.lead .ct__sort:hover { color: var(--classic-ink); }
.lead .ct th[aria-sort="ascending"] .ct__sort svg, .lead .ct th[aria-sort="descending"] .ct__sort svg { opacity: 1; }
.lead .ct th[aria-sort="ascending"] .ct__sort-down, .lead .ct th[aria-sort="descending"] .ct__sort-up { display: none; }
.lead .ct__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- quiet KPI strip ---------- */
.lead .kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--classic-rule); border: 1px solid var(--classic-rule); }
@media (min-width: 48rem) { .lead .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
@media (max-width: 47.98rem) { .lead .kpi-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.lead .kpi-tile { display: flex; flex-direction: column; gap: .2rem; min-width: 0; min-height: 5.6rem; padding: .7rem .8rem .65rem; background-color: var(--classic-surface); color: var(--classic-ink); font-family: var(--classic-body-font); }
.lead .kpi-tile[data-state="healthy"] { background-image: linear-gradient(var(--classic-wash-healthy), var(--classic-wash-healthy)); }
.lead .kpi-tile[data-state="watch"] { background-image: linear-gradient(var(--classic-wash-watch), var(--classic-wash-watch)); }
.lead .kpi-tile[data-state="thin"] { background-image: linear-gradient(var(--classic-wash-thin), var(--classic-wash-thin)); }
.lead .kpi-tile[data-state="neutral"] { background-image: linear-gradient(var(--classic-wash-neutral), var(--classic-wash-neutral)); }
.lead .kpi-tile[data-state="unknown"] { background-image: linear-gradient(var(--classic-wash-unknown), var(--classic-wash-unknown)); }
.lead .kpi-tile__top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-width: 0; }
.lead .kpi-tile__label { font-size: .74rem; line-height: 1.3; color: var(--classic-muted); overflow-wrap: anywhere; }
.lead .kpi-tile__reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.lead .kpi-tile__value { font-family: var(--classic-num-font, Arial, sans-serif); font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--classic-ink); }
.lead .kpi-tile__value.is-unavail { font-weight: 400; color: var(--classic-muted); }
.lead .kpi-tile__unit { font-size: .78rem; color: var(--classic-muted); }
.lead .kpi-tile__delta { font-size: .74rem; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--classic-muted); }
.lead .kpi-tile__delta:empty { display: none; }

/* ---------- mode switch (contract §3 markup) ---------- */
.lead .mode-switch { display: inline-flex; width: 100%; gap: 2px; padding: 2px; border: 1px solid var(--classic-rule); background: var(--classic-surface-2); }
.lead .mode-switch__btn { flex: 1 1 0; min-height: 2.75rem; padding: 0 1rem; border: 0; background: transparent; color: var(--classic-muted); font-family: var(--classic-body-font); font-size: .82rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; }
.lead .mode-switch__btn:hover { color: var(--classic-ink); }
.lead .mode-switch__btn[aria-pressed="true"] { background: var(--classic-ink); color: var(--classic-surface); cursor: default; }

/* ---------- (i) disclosure ---------- */
.lead .info-disc { display: inline-block; position: relative; vertical-align: middle; flex: none; }
.lead .info-disc > summary { position: relative; list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.lead .info-disc > summary::-webkit-details-marker { display: none; }
.lead .info-disc > summary::after { content: ""; position: absolute; inset: -.5rem; }
.lead .info-disc > summary svg { width: 15px; height: 15px; display: block; }
.lead .info-disc > summary svg circle, .lead .info-disc > summary svg line { fill: none; stroke: var(--classic-muted); stroke-width: 1.4; }
.lead .info-disc > summary svg .dotcap { fill: var(--classic-muted); stroke: none; }
.lead .info-disc > summary:hover svg circle, .lead .info-disc > summary:hover svg line { stroke: var(--classic-ink); }
.lead .info-disc > summary:hover svg .dotcap { fill: var(--classic-ink); }
.lead .info-disc[open] > summary svg circle, .lead .info-disc[open] > summary svg line { stroke: var(--classic-accent); }
.lead .info-disc[open] > summary svg .dotcap { fill: var(--classic-accent); }
.lead .info-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: -8px; width: min(28rem, calc(100vw - 3rem)); padding: .75rem .9rem; background: var(--classic-surface); border: 1px solid var(--classic-rule); color: var(--classic-ink); box-shadow: var(--classic-shadow); font-family: var(--classic-body-font); font-size: .8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; }
.lead .info-disc--end .info-pop { left: auto; right: -8px; }

/* ---------- tooltip (mounted by dashboard-tooltip.mjs, #236/#252) ---------- */
/* One bubble per document, positioned fixed by dashboard-tooltip.mjs's placeNear() -- fixed
   positioning leaves every ancestor's overflow box, the same reason .info-pop above nudges
   itself back on screen instead of relying on z-index.

   THE z-index IS MEASURED AGAINST ROCK'S CHROME, not chosen. Every dashboard here renders
   inside a Rock page whose left nav is `z-index: 1025` and whose top header is `1030`
   (read off staging, 2026-09-18). At 60 the bubble lost to both: hovering any mark in
   the left third of the page opened a tooltip UNDER the sidebar, on every Classic surface in
   the repo, not just Leadership. 1040 clears Rock's highest layer with room to spare and
   still sits under a Rock modal backdrop, which is the one thing that should cover us. */
.lead .dashboard-tip { position: fixed; z-index: 1040; top: 0; left: 0; max-width: 18rem; padding: .6rem .75rem; background: var(--classic-surface); border: 1px solid var(--classic-rule); color: var(--classic-ink); box-shadow: var(--classic-shadow); font-family: var(--classic-body-font); font-size: .8rem; line-height: 1.45; pointer-events: none; }
/* The closed state belongs to the shared contract, not to each island.
   dashboard-tooltip.mjs only ever flips `data-open`; it deliberately does not touch
   the `hidden` attribute, because `display: none` cannot be transitioned. An island
   that never defined the closed half of that pair therefore left the bubble on screen
   forever: hover filled it, "close" set an attribute nothing read, and the last thing
   hovered stood there over a pointer that had moved on. That is the "tooltips are too
   sticky, they still show when you are not hovering" report, and it was never in the
   JavaScript. Connect Field had carried its own copy of these two rules; every other
   island shipped the bubble permanently visible. */
.lead .dashboard-tip { opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; }
.lead .dashboard-tip[data-open="true"] { opacity: 1; visibility: visible; }
.lead .dashboard-tip__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.lead .dashboard-tip__swatch { flex: none; width: .6rem; height: .6rem; background: currentColor; }
.lead .dashboard-tip__label { font-weight: 700; color: var(--classic-muted); }
.lead .dashboard-tip__value { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.lead .dashboard-tip__compare { margin: .1rem 0 0; color: var(--classic-muted); }
.lead .dashboard-tip__unit { margin-left: .3rem; color: var(--classic-muted); }
.lead .spark__hit { fill: transparent; cursor: pointer; }

/* ---------- export rail (mounted by dashboard-export.mjs) ---------- */
.lead .xrail { display: inline-flex; align-items: center; gap: .3rem; }
.lead .xrail__btn { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: 0 .55rem; border: 1px solid var(--classic-rule); border-radius: 4px; background: transparent; color: var(--classic-ink); font-family: var(--classic-body-font); font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
.lead .xrail__btn::after { content: ""; position: absolute; inset: -.4rem 0; }
.lead .xrail__btn svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lead .xrail__icon { display: inline-flex; align-items: center; }
.lead .xrail__label { display: inline-block; }
.lead .xrail__suffix { display: inline-block; font-size: .68rem; font-weight: 500; opacity: .75; padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, currentColor 10%, transparent); margin-left: .25rem; }
.lead .xrail__btn:hover { border-color: var(--classic-ink); background: var(--classic-surface-2); }
.lead .xrail__btn:active { background: var(--classic-rule); }
.lead .xrail__btn.is-busy { cursor: progress; opacity: .65; }
.lead .xrail__btn.is-copied, .lead .xrail__btn.is-done { border-color: var(--classic-accent); color: var(--classic-accent); background: transparent; }
.lead .xrail__btn--package { min-height: 2.25rem; padding: 0 .85rem; border-radius: 6px; font-size: .78rem; }
.lead .package-control { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.lead .how-to-tip { margin: 0; font-size: .7rem; line-height: 1.35; color: var(--classic-muted); }
.lead .how-to-tip a, .lead .how-to-tip__link { position: relative; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.lead .how-to-tip a::after, .lead .how-to-tip__link::after { content: ""; position: absolute; inset: -.6rem -.2rem; }
/* Honest disabled form: dashed, muted, no hover, still readable, title says why. */
.lead .tool__off, .lead .xrail__btn:disabled, .lead .xrail__btn[aria-disabled="true"] { border-style: dashed; border-color: var(--classic-rule); color: var(--classic-muted); background: transparent; cursor: not-allowed; opacity: 1; }
.lead .tool__off:hover, .lead .xrail__btn:disabled:hover, .lead .xrail__btn[aria-disabled="true"]:hover { border-color: var(--classic-rule); background: transparent; color: var(--classic-muted); }

/* ---------- copy prompt (mounted by dashboard-prompt.mjs) ---------- */
.lead .copy-prompt { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.lead .copy-prompt-btn { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: 0 .85rem; border: 1px solid var(--classic-ink); border-radius: 6px; background: transparent; color: var(--classic-ink); font-family: var(--classic-body-font); font-size: .78rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }
.lead .copy-prompt-btn svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lead .copy-prompt-btn svg.copy-prompt-btn__caret { width: 11px; height: 11px; stroke-width: 2; opacity: .7; margin-left: .1rem; }
.lead .copy-prompt-btn:hover, .lead .copy-prompt-btn[aria-expanded="true"] { background: var(--classic-ink); color: var(--classic-surface); }
.lead .copy-prompt-btn.is-copied { background: transparent; border-color: var(--classic-accent); color: var(--classic-accent); }
/* dashboard-prompt.mjs emits .copy-prompt-popover / .copy-prompt-option(__body|__label|__hint) /
   .ai-guidelines-tip(__link); the shorter names are the contract's aliases. Both are styled. */
.lead .copy-prompt-tip, .lead .ai-guidelines-tip { margin: 0; font-size: .7rem; line-height: 1.35; color: var(--classic-muted); }
/* The tip link is set in .72rem type, so its own box is about 11px tall -- readable, but not
   a thumb target. It gets the same expander, wide enough to be tappable without covering the
   sentence around it. */
.lead .copy-prompt-tip a, .lead .ai-guidelines-tip__link { position: relative; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.lead .copy-prompt-tip a::after, .lead .ai-guidelines-tip__link::after { content: ""; position: absolute; inset: -.6rem -.2rem; }
/* The drawn "opens in a new tab" mark dashboard-prompt.mjs appends to the tip link. Sized in
   em so it tracks the tip's type, and painted in currentColor so it is the link's own ink. */
.lead .ai-guidelines-tip__mark { width: 1em; height: 1em; margin-left: .2em; vertical-align: -.12em; flex: none; }
/* The popover hangs off the control, and the control is not always on the same side of a
   masthead. Anchoring therefore follows it: from the start edge by default, from the end
   edge when the mount says so -- rather than assuming a right-hand control and running off
   the left of the screen everywhere the control sits at the start. */
.lead .copy-prompt-pop, .lead .copy-prompt-popover { position: absolute; z-index: 50; top: calc(2.25rem + 6px); left: 0; right: auto; display: grid; gap: .2rem; min-width: 18rem; max-width: min(24rem, calc(100vw - 2rem)); padding: .35rem; background: var(--classic-surface); border: 1px solid var(--classic-rule); border-radius: 6px; box-shadow: var(--classic-shadow); }
.lead .copy-prompt--end .copy-prompt-pop, .lead .copy-prompt--end .copy-prompt-popover { left: auto; right: 0; }
.lead .copy-prompt-pop[hidden], .lead .copy-prompt-popover[hidden] { display: none; }
@media (max-width: 47.98rem) {
  .lead .copy-prompt-pop, .lead .copy-prompt-popover, .lead .copy-prompt--end .copy-prompt-pop, .lead .copy-prompt--end .copy-prompt-popover { left: 0; right: auto; min-width: 0; width: min(24rem, calc(100vw - 2rem)); }
}
.lead .copy-prompt-opt, .lead .copy-prompt-option { display: flex; align-items: flex-start; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--classic-ink); font-family: var(--classic-body-font); text-align: left; cursor: pointer; }
.lead .copy-prompt-opt svg, .lead .copy-prompt-option svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lead .copy-prompt-opt:hover, .lead .copy-prompt-option:hover { background: var(--classic-surface-2); border-color: var(--classic-rule); }
.lead .copy-prompt-option__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.lead .copy-prompt-opt__title, .lead .copy-prompt-option__label { font-size: .82rem; font-weight: 700; line-height: 1.3; }
.lead .copy-prompt-opt__desc, .lead .copy-prompt-option__hint { font-size: .74rem; line-height: 1.35; color: var(--classic-muted); white-space: normal; }
.lead .copy-prompt-error { margin: 0; padding: .45rem .65rem; border: 1px solid var(--classic-rule); border-radius: 4px; background-color: var(--classic-surface); background-image: linear-gradient(var(--classic-wash-thin), var(--classic-wash-thin)); color: var(--classic-ink); font-size: .76rem; line-height: 1.4; }
.lead .copy-prompt-error:empty { display: none; }

/* ---------- focus: one ring, everywhere ---------- */
.lead .cw__expand:focus-visible, .lead .xrail__btn:focus-visible, .lead .mode-switch__btn:focus-visible, .lead .copy-prompt-btn:focus-visible, .lead .copy-prompt-opt:focus-visible, .lead .copy-prompt-option:focus-visible, .lead .ai-guidelines-tip__link:focus-visible, .lead .ct__sort:focus-visible, .lead .info-disc > summary:focus-visible, .lead .kpi-tile__reading:focus-visible, .lead .ct__unavail:focus-visible, .lead .arc-chart path:focus-visible, .lead .spark__hit:focus-visible { outline: 2px solid var(--classic-focus); outline-offset: 2px; }

/* ---------- motion: state communication only ---------- */
.lead .cw, .lead .kpi-strip { transition: opacity 180ms cubic-bezier(.2, .7, .2, 1), transform 180ms cubic-bezier(.2, .7, .2, 1); }
/* `is-mode-switching` lands on the island ROOT, and §19's prefixing pass turns a descendant
   selector into `<scope> .is-mode-switching .cw` -- a rule nothing can match, because the
   scope element is the element carrying the class. Naming the ancestor from inside the
   subject keeps the rule true both unprefixed and after prefixing. */
.lead .cw:is(.is-mode-switching *), .lead .kpi-strip:is(.is-mode-switching *) { opacity: 0; transform: translateY(4px); }
.lead .xrail__btn, .lead .cw__expand, .lead .mode-switch__btn, .lead .copy-prompt-btn, .lead .copy-prompt-opt, .lead .copy-prompt-option { transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lead .cw, .lead .kpi-strip, .lead .xrail__btn, .lead .cw__expand, .lead .mode-switch__btn, .lead .copy-prompt-btn, .lead .copy-prompt-opt, .lead .copy-prompt-option { transition: none; }
  .lead .cw:is(.is-mode-switching *), .lead .kpi-strip:is(.is-mode-switching *) { opacity: 1; transform: none; }
}

/* ---------- print: tables print, chrome does not ---------- */
@media print {
  .lead .cw__rail, .lead .xrail, .lead .cw__expand, .lead .mode-switch, .lead .copy-prompt, .lead .copy-prompt-btn, .lead .copy-prompt-pop, .lead .copy-prompt-popover, .lead .copy-prompt-tip, .lead .ai-guidelines-tip, .lead .info-disc, .lead .dashboard-tip { display: none !important; }
  .lead .classic-grid { display: block; }
  .lead .cw, .lead .kpi-strip { break-inside: avoid; margin-bottom: 1rem; border-color: var(--classic-ink); }
  .lead .cw__body { max-height: none; overflow: visible; }
  .lead .cw--has-aid .cw__body { display: block; }
  .lead .ct thead th, .lead .ct thead th:first-child, .lead .ct tbody th[scope="row"] { position: static; }
  .lead .ct th, .lead .ct td { border-color: var(--classic-ink); white-space: normal; }
  .lead .kpi-tile { border: 1px solid var(--classic-rule); }
}
/* ---------- END pasted apps/shared/classic-base.css ---------- */

/* ------------------------------------------------------------------------ Classic look (#638)
 * Everything below is scoped to `[data-mode="classic"]` and touches Classic ONLY. Creative's own
 * rules (above, inside the generated block and the surrounding hand-written CSS) are untouched:
 * this is an addition, not an edit, per the repo rule that new CSS lands after the generated
 * theme block and never inside it.
 *
 * THE PEG IS SQUARE AND DENSE. Pas. John's own composition runs a 3px corner radius everywhere
 * -- panels, bars, chips, buttons, tiles -- never a pill, and body copy at roughly 12.5px against
 * this surface's larger Creative scale. Both are scoped to Classic's own containers so Creative's
 * untouched chapters (kept in the file, unreachable, see leadership-boot.mjs) keep their own
 * numbers exactly as they were. The page container itself is NOT touched here: it stays at the
 * repo's 96rem standard (#608) regardless of mode, only the panel CONTENTS run denser. */
.lead[data-mode="classic"] {
  --lead-classic-r: 3px;
}

.lead[data-mode="classic"] .lead-main {
  font-size: 0.86em;
}

/* A flat grid of PEER panels, not a masonry (per-browser state nobody else saw) and not numbered
 * chapters (a sequence the peg never had). `wide` panels still span every column; everything
 * else falls into a dense multi-column flow the same way the console's tile grids already do. */
/* THREE UP, NOT auto-fit. The narrow panels come in threes -- the three distribution donuts
 * (age / gender / ministry), then the three "leaders per ..." bar panels -- exactly as they do
 * in the peg. `auto-fit, minmax(20rem, 1fr)` resolves to FOUR tracks inside the repo's 96rem
 * container, so every one of those rows filled three and left the fourth column empty: a dead
 * quarter of the page on a surface whose whole complaint was that it read too sparse. An
 * explicit three-track row makes each row close, and the two step-downs keep it readable when
 * the container is narrower than three panels can honestly hold. */
.lead[data-mode="classic"] .lead-classic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lead-gap, 1.5rem);
  /* Stretch, not start: a row of three reads as one band only when its cards share a baseline
   * bottom. Ministry's legend is the tallest of the three and used to leave the other two
   * floating mid-air against the row's own gap. */
  align-items: stretch;
  margin-top: var(--lead-gap, 1.5rem);
}
@media (min-width: 52rem) {
  .lead[data-mode="classic"] .lead-classic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 76rem) {
  .lead[data-mode="classic"] .lead-classic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lead[data-mode="classic"] .lead-classic-grid .lead-panel--wide { grid-column: 1 / -1; }

.lead[data-mode="classic"] :is(.lead-panel, .lead-console, table, .lead-tile, .lead-chip,
    .lead-select, button:not(.markup-pen), .info-tip, .lead-input, .lead-donut__swatch) {
  border-radius: var(--lead-classic-r);
}

/* Flat panels: a 1px rule, no soft drop shadow. The `--lead-radius` custom property still
 * governs Creative's own panels (its chapters are still in the file); Classic overrides the
 * radius and the shadow on its own scoped selector rather than redefining the token globally. */
.lead[data-mode="classic"] .lead-panel {
  border: 1px solid var(--rule);
  box-shadow: none;
  padding: 0.85rem 1rem;
}
.lead[data-mode="classic"] .lead-panel__title { font-size: 0.95rem; }
.lead[data-mode="classic"] .lead-bar,
.lead[data-mode="classic"] .lead-rung__bar,
.lead[data-mode="classic"] .lead-stack__seg,
.lead[data-mode="classic"] .lead-chain__step {
  border-radius: var(--lead-classic-r);
}
.lead[data-mode="classic"] table :is(th, td) { padding: 0.3rem 0.5rem; font-size: 0.92em; }

/* The donut (panels 1-3): the arc itself is drawn to scale by arcChart and needs no override;
 * the legend beside it is what makes a slice's share readable per-row rather than by eye. */
/* ARC ON TOP, LEGEND UNDER IT. Side by side, the legend is what sets the panel's height, so
 * Ministry's ~40 teams stretched the whole three-panel row to its length and left Age and Gender
 * as small arcs adrift in white -- the bloat. Stacked, each arc keeps its own size, the legend
 * flows in the panel's full width, and a long legend makes one panel tall rather than three. */
.lead[data-mode="classic"] .lead-donut { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.lead[data-mode="classic"] .lead-donut__legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  width: 100%;
  /* CAPPED, AND THIS IS WHERE WE BEAT THE PEG. Manila has 40 ministry families, and the peg
   * simply lets that legend run: its Ministry panel ends up three times the height of Age and
   * Gender beside it, and because a row of panels shares a baseline the other two are padded
   * with white to match. Capping the list and letting it scroll keeps all 40 reachable, keeps
   * the panel proportionate to its neighbours, and costs nothing for the short legends -- at
   * seven rows this rule does not apply. The scroll is the browser's own, themed by the page. */
  /* UNCAPPED (repo rule, 2026-09-21). Manila's 40 ministry families make this legend tall and
     its panel taller than Age and Gender beside it. That asymmetry is the honest picture: a
     capped list with its own scrollbar hid 33 of the 40 behind a gesture, and hid them from
     Cmd-F and from print as well.
     BOUNDED, NOT SCROLLED (#765). mountBoundedList() now hides everything past the first five
     rows and offers "Show all (N)" -- Cmd-F and print still reach every row once expanded,
     which a scrollbar never allowed. No overflow/max-height belongs on this rule again. */
}
.lead[data-mode="classic"] .lead-donut__item { font-size: 0.85em; }
.lead[data-mode="classic"] [hidden] { display: none; }
/* The bounded-list toggle (#765/#766): one quiet full-width control under a legend or a bar
 * list, in the same voice as .reset-btn beside it. */
.lead[data-mode="classic"] .bounded-list__toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .35rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 7px;
  background: transparent;
  color: var(--accent-deep, #c23f00);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.lead[data-mode="classic"] .bounded-list__toggle:hover { background: var(--hover-wash, #fff2e8); border-color: var(--accent, #f45500); }
/* The row IS the control -- a button when the dimension filters, a span when it does not -- so
 * both forms are laid out by one rule and cannot drift apart. */
.lead[data-mode="classic"] .lead-donut__row {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%;
  padding: 0.15rem 0.3rem;
  border: 0; border-radius: var(--lead-classic-r, 3px);
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.lead[data-mode="classic"] button.lead-donut__row { cursor: pointer; }
/* NO HOVER WASH ON THE ROW. Pointing at a legend row lights up its WEDGE (`.is-hot` below):
   the row is already under the reader's eye and highlighting it says nothing, while the wedge
   is the thing they are trying to find. The feedback is on the graph, where the question is.
   Keyboard still gets a ring of its own, because a focus ring is orientation, not decoration. */
.lead[data-mode="classic"] button.lead-donut__row:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 1px;
}
.lead[data-mode="classic"] .lead-donut__swatch { display: inline-block; width: 0.7rem; height: 0.7rem; background: var(--c, var(--muted-ink)); flex: none; }
.lead[data-mode="classic"] .lead-donut__swatch--ghost { background: var(--ghost-wash, var(--surface-raised)); border: 1px dashed var(--muted-ink); color: var(--muted-ink); font-size: 0.6rem; display: flex; align-items: center; justify-content: center; }
.lead[data-mode="classic"] .lead-donut__label { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Count and share together, right-aligned and tabular so the column of numbers lines up and the
 * share reads as a second column rather than as part of the label. */
.lead[data-mode="classic"] .lead-donut__share {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted-ink);
  white-space: nowrap;
}
.lead[data-mode="classic"] .lead-donut__share b { color: var(--ink); font-weight: 700; }
.lead[data-mode="classic"] .lead-donut__item--ghost { color: var(--muted-ink); }

/* THE SELECTION GRAMMAR, shared by the arc and its legend. Selected keeps its full colour and
 * gains an ink outline; everything unselected drops to a wash. Dimming rather than hiding is
 * the point: the reader still sees what the selection is a part OF. Ink, never a hue -- a
 * selected Connect wedge must not turn the colour of another branch (themes/favor-leadership). */
.lead[data-mode="classic"] .lead-donut__chart path.is-clickable { cursor: pointer; }
.lead[data-mode="classic"] .lead-donut__chart path.is-on { stroke: var(--ink); stroke-width: 2.5; }
.lead[data-mode="classic"] .lead-donut__chart path.is-dim,
.lead[data-mode="classic"] .lead-donut__row.is-dim { opacity: 0.3; }
.lead[data-mode="classic"] .lead-donut__row.is-on { background: var(--selected-wash); font-weight: 700; }

/* THE HOVER LIVES ON THE ARC. A wedge answers a pointer whether the pointer is on the wedge or
   on its legend row (`.is-hot`, set by the legend's delegate in leadership-boot.mjs), and it
   answers the same way both times, so the two halves of one reading behave as one object.
   Brightness plus a hairline outline, deliberately lighter than `.is-on`'s 2.5px ink: hovering
   must never be mistakable for having selected. `.is-hot` also lifts a dimmed wedge back to
   full, because the reason to point at a dimmed slice is to see it. */
.lead[data-mode="classic"] .lead-donut__chart path[data-slice] {
  transition: opacity var(--motion-state, 180ms) var(--ease-out, ease),
              filter var(--motion-state, 180ms) var(--ease-out, ease);
}
.lead[data-mode="classic"] .lead-donut__chart path.is-clickable:hover,
.lead[data-mode="classic"] .lead-donut__chart path[data-slice]:focus-visible,
.lead[data-mode="classic"] .lead-donut__chart path.is-hot {
  filter: brightness(1.14);
  opacity: 1;
  stroke: var(--ink);
  stroke-width: 1.25;
}
.lead[data-mode="classic"] .lead-donut__chart path.is-on.is-hot { stroke-width: 2.5; }
.lead[data-mode="classic"] .lead-donut__row { transition: opacity var(--motion-state, 180ms) var(--ease-out, ease); }

/* Same rule for the bars: the mark brightens, not the row it sits in. */
.lead[data-mode="classic"] .lead-bar__fill { transition: filter var(--motion-state, 180ms) var(--ease-out, ease); }
.lead[data-mode="classic"] button.lead-bar:hover .lead-bar__fill,
.lead[data-mode="classic"] button.lead-bar:focus-visible .lead-bar__fill { filter: brightness(1.14); }

/* The total in the hole: the denominator every share on the legend is taken against. */
.lead[data-mode="classic"] .lead-donut__total {
  font-family: var(--display-font, inherit);
  font-size: 25px; font-weight: 700;
  fill: var(--ink);
}
.lead[data-mode="classic"] .lead-donut__totalsub {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  fill: var(--muted-ink);
}

/* The mode switch is the console's first control and its own band: a rule under it separates
 * "how am I reading this" from "what am I reading", which is the boundary the rest of the
 * console sits below. Without the gap it collided with the CONSOLE heading beneath it. */
/* The switch is the console's own top band: it sits flush inside the panel with a rule under
 * it, the same separation the head has from the body. The `padding-bottom` + `border-bottom`
 * pair it used to carry drew a SECOND rule 0.85rem below the control's own border, so the
 * console opened with two horizontal lines stacked under one control. */
.lead .lead-console > .mode-switch {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: .55rem 1rem;
  gap: 2px;
  background: var(--surface, #fffaf6);
}

/* THE TWO SEMANTIC LAYERS (#638). Both sit between the panel's title and its marks, in the
 * order a reader needs them: where the figure came from, then how to read it. */

/* Provenance. A quiet chip, not a badge: findable when asked for, invisible when not. Live is
 * the church's own teal because a live read is the good state; the fixture variant is amber,
 * because an offline number that looks official is the failure this chip exists to prevent. */
.lead[data-mode="classic"] .lead-asof {
  align-self: center;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.lead[data-mode="classic"] .lead-asof--live { background: var(--soft-healthy); color: var(--state-healthy-text); }
.lead[data-mode="classic"] .lead-asof--pending { background: var(--soft-neutral); color: var(--classic-muted); }
.lead[data-mode="classic"] .lead-asof--fixture { background: var(--soft-watch); color: var(--state-watch-text); }

/* How to read. Behind the mark on the panel's own title, which is why there is no block rule
 * here -- the sentence costs the layout nothing and the marks start where the title ends.
 * The mark hugs the title it belongs to: the head's own 0.75rem gap is the separation between
 * DIFFERENT things (title, provenance, tools), and the mark is not a different thing. */
.lead[data-mode="classic"] .lead-panel__head .info-tip { margin-left: -0.35rem; }

/* THE FIND BAR, under the search box it belongs to: what was found, and the two controls that
 * walk it. The count is the first thing, because "47 matches" and "no matches" are the two
 * answers a reader is actually waiting for, and an empty result says so in words rather than by
 * showing a disabled pair of buttons and leaving them to infer it. */
.lead .lead-find-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
}
.lead .lead-find-count {
  flex: 1;
  min-width: 0;
  font-size: .74rem;
  color: var(--faint-ink, #726f65);
  font-variant-numeric: tabular-nums;
}
.lead .lead-find-count[data-empty="true"] { color: var(--state-watch-text, var(--muted-ink)); font-weight: 700; }
.lead .lead-find-nav { display: flex; gap: .25rem; flex: none; }
.lead .lead-find-btn {
  min-height: 2rem;
  padding: 0 .6rem;
  border: 1px solid var(--rule);
  border-radius: var(--lead-classic-r, 3px);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .lead-find-btn:hover:not(:disabled) { background: var(--hover-wash); border-color: var(--secondary); }
.lead .lead-find-btn:disabled { opacity: .4; cursor: not-allowed; }

/* THE MARK ITSELF. Two states, and they have to be told apart at a glance from across the page:
 * every match is washed, and the one the reader is standing on takes the ink outline this
 * surface already uses for selection everywhere else. Ink, never a second hue -- a match sitting
 * on a Connect bar must not read as a Ministry one (themes/favor-leadership). */
.lead mark.lead-find {
  background: var(--soft-watch, #f6e6c8);
  color: inherit;
  padding: 0 .1em;
  border-radius: 2px;
}
.lead mark.lead-find.is-current {
  background: var(--accent, #f45500);
  color: var(--on-accent, #fff);
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* SORT, AS A FIELD IN THE ROW. Two controls in one field, on one line, so the pair reads as a
 * single sentence: sorted by <column>, <which end> first. The select carries the column and the
 * button carries the direction, and the button states the CURRENT order rather than the action,
 * the same way the scope toggle does, because a reader needs to know what they are looking at
 * more often than what a press would do. The direction is a word, never a bare arrow glyph. */
.lead[data-mode="classic"] .lead-sortrow { display: flex; gap: 0.35rem; align-items: stretch; }
.lead[data-mode="classic"] .lead-field--sort .lead-select { width: auto; min-width: 9rem; }
.lead[data-mode="classic"] .lead-sortdir {
  flex: none;
  height: var(--lead-control-h);
  padding: 0 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--lead-classic-r, 3px);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-state, 180ms) var(--ease-out, ease),
              border-color var(--motion-state, 180ms) var(--ease-out, ease);
}
.lead[data-mode="classic"] .lead-sortdir:hover { background: var(--hover-wash); border-color: var(--secondary); }

/* Panels 8 and 10's own in-widget filters: a dense row of fields, never styled like the global
 * console (different job, different scope) but built from the same `field()`/`select()` markup
 * so it inherits every focus and label rule that markup already carries. */
.lead[data-mode="classic"] .lead-panel-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end;
  padding: 0.6rem 0; margin-bottom: 0.6rem; border-bottom: 1px solid var(--rule);
}
.lead[data-mode="classic"] .lead-panel-filters .lead-field { min-width: 8rem; }
/* A CLEAR BUTTON SIZED TO ITS OWN WORDS. It inherited the console's full-width primary form, so
 * in a row of 8rem fields it stretched to whatever space was left and became the widest, loudest
 * thing in the row -- the least-used control shouting over the four that do the work. Here it is
 * the same height as the fields it sits beside and no wider than its label. */
.lead[data-mode="classic"] .lead-panel-filters .reset-btn--inline {
  align-self: end;
  width: auto;
  height: var(--lead-control-h);
  min-height: 0;
  padding: 0 0.8rem;
  border-radius: var(--lead-classic-r, 3px);
  font-size: 0.8rem;
}

/* Pagination (#766): reuses the same field/reset-btn voice as the filter row above it, so a
 * page-size select and Previous/Next read as one control family rather than a second grammar. */
.lead[data-mode="classic"] .lead-pagination {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding: 0.5rem 0 0; margin-top: 0.4rem; border-top: 1px solid var(--rule);
}
.lead[data-mode="classic"] .lead-pagination .lead-field__label { font-size: 0.78rem; }
.lead[data-mode="classic"] .lead-pagination .reset-btn--inline {
  align-self: center; width: auto; height: var(--lead-control-h); min-height: 0;
  padding: 0 0.8rem; border-radius: var(--lead-classic-r, 3px); font-size: 0.8rem;
}
.lead[data-mode="classic"] .lead-pagination .reset-btn--inline[disabled] { opacity: 0.45; cursor: not-allowed; }
.lead[data-mode="classic"] .lead-pagination__status {
  font-size: 0.8rem; color: var(--muted-ink, #625f59); margin-inline: auto 0;
}

/* Panel 9, span of care, is PROMINENT by construction (`wide: true` in leadership-boot.mjs) and
 * its bars run slightly taller than the rest of Classic's bar rows, because the largest row --
 * one cluster head's own name beside 523 people on prod -- reading first is the point of the
 * panel (#638). */
.lead[data-mode="classic"] .lead-panel:has(.lead-bar) .lead-bar { padding-block: 0.15rem; }

/* THE CONSOLE, DEFAULT COLLAPSED. Creative's console opens by default because a reader arriving
 * mid-narrative may already know which chapter they want; Classic's dense fourteen-panel grid is
 * the opposite case, a reader arrives to READ before they narrow, so the console stays out of the
 * way until asked for. The desktop layout otherwise pins the console open regardless of
 * `[data-console]` (it is a fixed grid column, not a toggled one) -- Classic is the one mode
 * where that pin is lifted, and the shared mobile toggle bar is reused at every width rather than
 * inventing a second open/close affordance, because it already owns the count badge and the
 * keyboard/backdrop wiring `openConsole`/`closeConsole` in leadership-boot.mjs drive. */
@media (min-width: 68.75rem) {
  .lead[data-mode="classic"][data-console="closed"] .lead-console-host { display: none; }
  .lead[data-mode="classic"][data-console="closed"] .lead-layout { grid-template-columns: minmax(0, 1fr); }
  .lead[data-mode="classic"] .console-toggle-bar {
    display: flex;
    position: sticky;
    top: var(--console-top, 1rem);
    justify-content: flex-end;
    padding: 0 var(--lead-gap, 1.5rem);
    /* Over the reading it floats above, under the console it must never cover. */
    z-index: 5;
  }
  /* THE HANDLE SITS ON THE CONSOLE'S OWN EDGE, open or closed. It used to be shifted left by the
   * console column plus the grid gap whenever the console was open, so that a flex-end handle
   * would not land on the mode switch -- but that put the control on the far LEFT of the page
   * and the thing it controls on the far RIGHT, which is not a relationship a reader can see.
   * `--console-bar-h` reserves the band above the console instead, so right-alignment is free
   * and the pair reads as one object: the handle is the console's lid.
   *
   * It stays visible with the console open because on desktop this handle is the only control
   * that closes it -- `.sidebar-back-btn` is mobile-only. */
  .lead[data-mode="classic"] .console-toggle-bar .toggle-btn {
    width: auto;
    border-radius: var(--lead-classic-r);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink, #121411) 12%, transparent);
  }
}

/* ------------------------------------------------------------------- THE TABLET CONSOLE (#638)
 * Between the phone sheet (<=768px) and the desktop column (>=1100px) the console had no
 * behaviour of its own, and it showed: the layout collapses to one column at 1100px, so the
 * console fell to the END of the document -- a 752px full-width slab parked 10,000px down the
 * page, past every panel. Worse, the rule that hides it when closed is scoped to the desktop
 * query, so on a tablet the slab was there whether or not the reader had asked for it, and the
 * handle at the top of the page toggled something they would never scroll far enough to see.
 *
 * At this width the console becomes what the handle implies: a drawer that opens UNDER the
 * handle, against the right margin, over the reading rather than after it. It is the mobile
 * sheet's logic at a landscape size -- fixed, bounded, dismissed by the same backdrop and the
 * same Escape -- and it needs no new control, because `openConsole`/`closeConsole` already own
 * every part of it. */
@media (min-width: 769px) and (max-width: 1099.98px) {
  .lead[data-mode="classic"][data-console="closed"] .lead-console-host { display: none; }
  .lead[data-mode="classic"] .lead-console-host { position: static; width: auto; }
  .lead[data-mode="classic"] .lead-console {
    position: fixed;
    top: calc(var(--console-top, 1rem) + var(--console-bar-h));
    right: var(--lead-gap, 1.5rem);
    left: auto;
    width: min(22rem, calc(100vw - 2 * var(--lead-gap, 1.5rem)));
    max-height: calc(100vh - var(--console-top, 1rem) - var(--console-bar-h) - 1.5rem);
    z-index: 40;
    /* It floats over the reading here rather than sitting beside it, so it carries a cast
       shadow: offset and blurred, the one thing that says which surface is on top. */
    box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--shadow-ink, #14202a) 75%, transparent);
  }
  /* Transparent, so the board stays readable while a filter is being changed -- the same
     decision ADR 0020 made for the phone sheet, for the same reason. */
  .lead[data-mode="classic"] .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: transparent;
  }
  .lead[data-mode="classic"][data-console="closed"] .filter-backdrop { display: none; }
  .lead[data-mode="classic"] .console-toggle-bar {
    padding: 0 var(--lead-gap, 1.5rem);
    /* Above the drawer it opens: the handle is also the only control that closes it. */
    z-index: 45;
  }
  .lead[data-mode="classic"] .console-toggle-bar .toggle-btn {
    width: auto;
    border-radius: var(--lead-classic-r);
  }
}

/* THE RESET CONTROL MOVES TO THE TOP of the console, above every filter group, in Classic. The
 * console body is rebuilt on every render (`buildConsole()`), so `order` on the flex/grid item is
 * enough: no DOM reordering is needed and the reset button keeps the same click handler. */
.lead[data-mode="classic"] .lead-console__body { display: flex; flex-direction: column; }
/* The console's reset is in the head now, so nothing in the body needs re-ordering. The rule
 * that pulled it to the top with `order: -1` went with it. */

/* The mode switch control itself: squared off like everything else in Classic, and its disabled
 * Creative half reads as inert rather than merely dim -- lower opacity plus the platform's own
 * not-allowed cursor, never a removed control (ADR-style: absence stays visible, #638). */
/* TWO EQUAL HALVES ACROSS THE CONSOLE, the segmented control every other surface uses for this
 * choice. Inline-flex sized each half to its own word, so "Classic" and "Creative" were
 * different widths and the pair read as two buttons that happened to touch rather than as one
 * control with two positions -- and the position a reader is IN is the thing the control has to
 * say. `flex: 1 1 0` (not `1 1 auto`) is what makes the halves equal regardless of label length. */
.lead .mode-switch {
  display: flex;
  width: 100%;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--lead-classic-r);
  background: var(--surface-sunken, var(--surface-raised));
}
.lead .mode-switch__btn {
  flex: 1 1 0;
  min-height: 2.4rem;
  border: 0;
  border-radius: calc(var(--lead-classic-r) - 1px);
  background: transparent;
  color: var(--muted-ink);
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.lead .mode-switch__btn:hover { color: var(--ink); }
.lead .mode-switch__btn[aria-pressed="true"] { background: var(--secondary); color: var(--on-accent, #fff); cursor: default; }
.lead .mode-switch__btn--disabled { opacity: 0.45; cursor: not-allowed; }
.lead .mode-switch__btn--disabled[aria-pressed="true"] { background: var(--secondary); }


/* ---------------------------------------------------------------------- Classic density (#638)
 * The rendered Classic page measured 16178px tall against the peg's own 7826px for the same
 * content -- BUG 5. Two causes: the arcChart svg had no width/height ceiling (a bare
 * width:100%/height:auto with no sized ancestor grows to the donut's flex column, which on a
 * wide panel is most of 96rem), and every panel carried Creative's own generous padding, row
 * height and type scale rather than the peg's dense 12.5px body. Both are fixed here, scoped
 * to Classic only -- Creative's numbers above are untouched. The page container itself does
 * NOT change width here (#608's 96rem standard holds in every mode); only what sits inside it
 * gets denser. */

/* The donut, capped. `.lead-donut__chart` is the sized wrapper arcChart's svg sits inside
 * (leadership-boot.mjs); the svg itself resolves to 100% of that wrapper and never past it,
 * so there is no path back to an unbounded circle. */
.lead[data-mode="classic"] .lead-donut__chart {
  width: 172px;
  max-width: 100%;
  flex: none;
}
.lead[data-mode="classic"] .lead-donut__chart .arc-chart {
  display: block;
  width: 100%;
  height: auto;
}

/* Body copy toward the peg's own ~12.5px -- 0.86em on a 16px root was still ~13.8px; 0.78em
 * lands at 12.5px exactly, and every panel/table/tile rule below inherits it via em/rem rather
 * than repeating a literal size. */
.lead[data-mode="classic"] .lead-main { font-size: 0.78em; }

/* Panels: tighter padding and a smaller title, so fourteen peer panels read as a dense grid
 * rather than fourteen Creative chapter cards stacked to the same height as the peg's whole
 * page. */
.lead[data-mode="classic"] .lead-panel { padding: 0.55rem 0.7rem; }
.lead[data-mode="classic"] .lead-panel__title { font-size: 0.88rem; margin-bottom: 0.2rem; }
.lead[data-mode="classic"] .lead-panel-filters { padding: 0.4rem 0; margin-bottom: 0.4rem; gap: 0.4rem; }
.lead[data-mode="classic"] .lead-classic-grid { gap: 0.85rem; margin-top: 0.85rem; }

/* Rows: bars, ladders and the roster list all tighten their block rhythm together, since a
 * dense page is dense at every row, not just in the panels that happen to hold a donut. */
.lead[data-mode="classic"] .lead-bar,
.lead[data-mode="classic"] .lead-rung,
.lead[data-mode="classic"] .lead-chain__step,
.lead[data-mode="classic"] .lead-person {
  padding-block: 0.2rem;
}
.lead[data-mode="classic"] table :is(th, td) { padding: 0.24rem 0.4rem; font-size: 0.9em; }

/* The donut legend rows are already compact from the pasted classic-base block; Classic only
 * needs to close the gap between them further to match the peg's own row height. */
.lead[data-mode="classic"] .lead-donut__item { font-size: 0.8em; }

/* --- Deferred first paint (#543) ------------------------------------------- */
/* REPO RULE (operator, 2026-09-21): when a skeleton is needed in order to lazy
   load, ONLY THE GRAPHS AND BARS are skeleton. render() draws the real surface --
   trail, masthead, every panel and its real heading, and the whole filter console
   -- and only what lives INSIDE a panel is stubbed. The reader can already be
   filtering while the six reads run. A skeleton over a control is a control you
   took away.

   No number, label or axis goes in these, because a placeholder a reader can
   mistake for a reading is worse than an empty panel (ADR 0018).

   THE WASH IS --ghost-wash, not a formula of its own. That token is this island's
   answer to "what does an absence look like" and it is already defined per theme;
   a skeleton inventing a second near-identical wash would split that vocabulary
   in two for no gain.

   THE 1.4s SHIMMER IS A DELIBERATE EXCEPTION to the shared motion tokens in
   apps/shared/ux-base.css. Those tokens (120/180/280/360/550ms) time a STATE
   CHANGE: one move, from one settled state to another. A loading sweep is not a
   state change -- it is a continuous "still working" affordance with no end state
   to arrive at, and at --motion-focal it would read as a strobe. 1.4s matches the
   pre-existing .skeleton rule on Pathways so both islands sweep at one rate.
   Reduced motion stops the sweep and keeps the silhouette. */
.lead .skeleton { position: relative; overflow: hidden; background: var(--ghost-wash); border: 1px solid var(--rule); border-radius: 2px; }
.lead .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--secondary) 20%, transparent) 50%, transparent 100%); animation: lead-shimmer 1.4s infinite; }
@keyframes lead-shimmer { 100% { transform: translateX(100%); } }

.lead .lead-markskel { display: flex; flex-direction: column; gap: .55rem; }
.lead .lead-markskel__band { display: block; width: var(--lead-markskel-w, 60%); height: 1.35rem; }
.lead .lead-markskel__value { display: inline-block; width: 4.5rem; height: 1.6rem; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .lead .skeleton::after { animation: none; }
}

/* --- No vertical scrollable windows (repo rule, operator, 2026-09-21) ------- */
/* A panel never gets its own vertical scrollbar: the page scrolls, the panel does
   not. Horizontal scroll is the one exception, for a table or plot genuinely wider
   than its column.

   An inner vertical scroll hides content behind a gesture the reader has no reason
   to expect, and hides it from Cmd-F, from print, and from an export too. The panel
   grows instead. The page was always going to be long; a long page a reader can scan
   beats a short one with rows they never find.

   .cw__body is the shared Classic widget body (apps/shared/classic-base.css), pasted
   into every island, and it caps at 28rem with overflow:auto. This override sits
   AFTER the merged block, which is where island rules belong -- the pasted block is
   never hand-edited. The shared source still carries the cap for the five islands
   this branch does not deploy; fixing it there is a follow-up, because repasting it
   changes CSS for islands whose bytes this push does not update. */
.lead .cw__body { overflow-x: auto; overflow-y: hidden; max-height: none; }

/* --- Shell furniture: the section navigator (#767) and the zoom (#768) ------
   Island override zone. Both controls are FURNITURE, not readings: they carry no
   number, so they take the surface's neutral vocabulary -- --surface, --rule,
   --ink, --muted-ink -- and never the two branch hues. Connect is blue and
   Ministry is orange on this page without exception, and a control tinted with
   either would claim to be about one of them.

   Motion reads the shared tokens in apps/shared/ux-base.css and states no
   millisecond of its own; prefers-reduced-motion zeroes all five there, so the
   panel arrives on its first frame and still arrives.

   ADR 0020: the mobile bottom edge has ONE occupant, the console sheet and its
   handle. The capsule therefore sits in the band ABOVE that handle -- the same
   band .markup-pen already uses on the left -- and never on the edge itself. */

/* A jump has to land the heading clear of Rock's fixed chrome, which is what
   --console-top measures. Without this the heading scrolls to y=0 and sits
   underneath the host's header. */
.lead .lead-panel__title { scroll-margin-top: calc(var(--console-top, 1rem) + 1.25rem); }
.lead .lead-panel__title:focus-visible { outline: 2px solid var(--focus, #f45500); outline-offset: 4px; }

/* ---------- the zoom, in the masthead's furniture band ---------- */
.lead .lead-masthead { grid-template-areas: "title tools" "question furniture"; }
.lead .lead-masthead__furniture {
  grid-area: furniture;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: .5rem;
}
@media (max-width: 900px) {
  .lead .lead-masthead { grid-template-areas: "title" "question" "tools" "furniture"; }
  .lead .lead-masthead__furniture { justify-content: flex-start; margin-top: .75rem; }
}

.lead .dzoom {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: var(--lead-radius, 4px);
  background: var(--surface, #fffaf6);
  overflow: hidden;
}
.lead .dzoom__btn, .lead .dzoom__reset {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #121411);
  font-family: var(--classic-body-font, var(--font-body, inherit));
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  cursor: pointer;
}
/* 34px is the drawn size the brief asks for; 44px is the size a finger needs
   (ux-bar §7). The hit area is extended rather than the control inflated, which
   is the documented way to hold both. */
.lead .dzoom__btn::after, .lead .dzoom__reset::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.lead .dzoom__btn { width: 34px; }
.lead .dzoom__reset { width: 52px; border-left: 1px solid var(--rule, #d8cec6); border-right: 1px solid var(--rule, #d8cec6); }
.lead .dzoom__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.lead .dzoom__btn:hover:not([disabled]), .lead .dzoom__reset:hover {
  background: color-mix(in srgb, var(--ink, #121411) 6%, transparent);
}
.lead .dzoom__btn:focus-visible, .lead .dzoom__reset:focus-visible {
  outline: 2px solid var(--focus, #f45500);
  outline-offset: -2px;
}
.lead .dzoom__btn[disabled] { opacity: .38; cursor: not-allowed; }
/* The control says it is no longer at the default without relying on colour:
   the percentage itself has already changed, and the rule thickens. */
.lead .dzoom:not([data-zoom="100"]) { border-color: var(--edge-strong, var(--ink, #121411)); }
.lead .dzoom__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the section navigator, lower right ---------- */
.lead .dnav {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  font-family: var(--classic-body-font, var(--font-body, inherit));
}
.lead .dnav[data-empty="true"] { display: none; }

.lead .dnav__capsule {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 44px;
  max-width: min(20rem, calc(100vw - 2.5rem));
  padding: 0 .85rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fffaf6) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #121411) 22%, transparent);
  color: var(--ink, #121411);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
}
.lead .dnav__capsule:hover, .lead .dnav__capsule:focus-visible { border-color: var(--edge-strong, currentColor); }
.lead .dnav__capsule:focus-visible { outline: 2px solid var(--focus, #f45500); outline-offset: 3px; }
.lead .dnav__ord { flex: none; font-variant-numeric: tabular-nums; color: var(--muted-ink, #625f59); }
.lead .dnav__now {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.lead .dnav__mark { flex: none; display: inline-flex; width: 1rem; height: 1rem; }
.lead .dnav__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.lead .dnav__panel {
  width: min(17rem, calc(100vw - 2.5rem));
  max-height: 55vh;
  /* The one vertical scroll on this surface, and it is furniture rather than a
     reading: the sections it lists are all present in the page itself, so
     Cmd-F, print and every export still reach them. The repo rule (no vertical
     scrollable windows) is about panels hiding readings behind a gesture; a
     menu that outgrows the viewport has nowhere else to go. */
  overflow-y: auto;
  padding: .45rem;
  border: 1px solid var(--rule, #d8cec6);
  border-radius: var(--lead-radius, 4px);
  background: var(--surface, #fffaf6);
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--shadow-ink, #121411) 55%, transparent);
  transform-origin: bottom right;
  animation: lead-dnav-rise var(--motion-layout, 280ms) var(--motion-ease, ease) both;
}
@keyframes lead-dnav-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lead .dnav__panel { animation: none; }
}
.lead .dnav__panel-title {
  margin: 0 0 .35rem;
  padding: 0 .4rem;
  color: var(--muted-ink, #625f59);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lead .dnav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.lead .dnav__row { margin: 0; }
.lead .dnav__empty { padding: .5rem .4rem; color: var(--muted-ink, #625f59); font-size: .78rem; }
.lead .dnav__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: .45rem;
  width: 100%;
  min-height: 2.15rem;
  padding: .4rem .45rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink, #121411);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
}
.lead .dnav__item:hover { background: color-mix(in srgb, var(--ink, #121411) 6%, transparent); }
.lead .dnav__item:focus-visible { outline: 2px solid var(--focus, #f45500); outline-offset: -2px; }
.lead .dnav__item-ord { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted-ink, #625f59); }
.lead .dnav__item-title { overflow-wrap: anywhere; }
/* WHERE YOU ARE. The inverted fill is this surface's own selected state (the
   markup pen, the mode switch and the filter tags all read this way), so the
   navigator does not invent a fourteenth way to say "this one". It inverts
   through --invert-surface/--invert-ink so it is never white on white under
   favor-dark (#321), and it is never colour alone: aria-current carries it for
   a screen reader and the accent ordinal carries it at a glance. */
.lead .dnav__item[aria-current="true"] {
  background: var(--invert-surface, var(--ink, #121411));
  color: var(--invert-ink, var(--surface, #fffaf6));
  font-weight: 700;
}
.lead .dnav__item[aria-current="true"] .dnav__item-ord { color: var(--accent, #f45500); }

/* Pressed feedback, in the island's override zone exactly as ux-base.css asks. */
.lead .dnav__capsule, .lead .dnav__item, .lead .dzoom__btn, .lead .dzoom__reset {
  transition: background-color var(--motion-feedback, 120ms) linear,
              border-color var(--motion-feedback, 120ms) linear,
              color var(--motion-feedback, 120ms) linear,
              transform var(--motion-feedback, 120ms) var(--motion-ease, ease);
}
.lead .dnav__capsule:active, .lead .dnav__item:active,
.lead .dzoom__btn:active:not([disabled]), .lead .dzoom__reset:active { transform: translateY(1px); }

@media (max-width: 768px) {
  /* Above the console handle's band, never in it (ADR 0020). The offset matches
     .markup-pen's on the opposite corner, so the two floating controls sit on
     one line and the bottom edge stays the console's. */
  .lead .dnav {
    right: 1.25rem;
    bottom: calc(max(env(safe-area-inset-bottom, 0px), .5rem) + 4.25rem);
    z-index: 990;
  }
  /* The capsule collapses to the position readout alone: "03 / 14". The label
     is the section heading the reader can already see on screen, so on a narrow
     viewport it is the part that can go. */
  .lead .dnav__now { display: none; }
  .lead .dnav__capsule { padding: 0 .7rem; gap: .45rem; }
  .lead .dnav__panel { width: min(20rem, calc(100vw - 2.5rem)); max-height: 46vh; }
  /* The console sheet owns the screen while it is open; two overlapping
     navigators is one too many. */
  .lead[data-console="open"] .dnav { display: none; }
}