/* exec/connect — Connect Health · mission-control console world.
   Semantic hues are Favor's own (healthy green / watch orange / thin amber /
   critical red / cohort Leader-Core-Crowd-New), lifted only as far as WCAG AA
   needs on the dark console ground. The cream Favor paper survives as the one
   lit surface in the room: the plotboard map. */

@font-face { font-family: Favorvetica; src: url('../../../../_fonts/Favorvetica-Regular.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Favorvetica; src: url('../../../../_fonts/Favorvetica-Bold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: FavorSans; src: url('../../../../_fonts/FavorSans.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: FavorSans; src: url('../../../../_fonts/FavorSans-Bold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

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

/* The palette #connect-field ships today. A page that sets no data-theme is unchanged. */
#connect-field {
  --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);
}

#connect-field[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);
}

#connect-field[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);
}

#connect-field[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);
}

#connect-field[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);
}

#connect-field[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);
}

#connect-field[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. */
#connect-field .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) {
  #connect-field { 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); }
  #connect-field[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); }
}
#connect-field[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)); }
#connect-field[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)); }
#connect-field[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); }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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)); }
#connect-field[data-theme="favor-grow-multicolor"] ::selection { background: color-mix(in srgb, var(--sp) 30%, var(--surface)); color: var(--ink); }
#connect-field[data-theme="favor-grow-multicolor"] :focus-visible { outline-color: var(--sp); }
#connect-field[data-theme="favor-grow-multicolor"] :is(.title-beta, .masthead h1 .beta) { color: var(--spectrum-1-text); }
#connect-field[data-theme="favor-grow-multicolor"] .status-beta { background: var(--spectrum-1); border-color: var(--spectrum-1); color: var(--spectrum-1-on); }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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; }
#connect-field[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); }
#connect-field[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); }
#connect-field[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; }
#connect-field[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; }
#connect-field[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); }
#connect-field[data-theme="favor-grow-multicolor"] :is(.pulse-kpi, .kpi-tile__value, .queue-rank, .donut-center-total):not(.hero-card *) { color: var(--sp-ink); }
#connect-field[data-theme="favor-grow-multicolor"] .pulse-grid { background: repeating-linear-gradient(135deg, var(--rule) 0 1px, var(--surface-raised) 1px 10px); }
#connect-field[data-theme="favor-grow-multicolor"] :is(.pulse-track, .combo-row__track) { background-color: color-mix(in srgb, var(--sp) 20%, var(--surface)); }
#connect-field[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; }
#connect-field[data-theme="favor-grow-multicolor"] .hero-card .pulse-card__head { background: none; color: var(--invert-ink); padding-inline: 0; }
#connect-field[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; }
#connect-field[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); }
#connect-field[data-theme="favor-grow-multicolor"] :is(.info-tip, .info-disc, .cw__info, .cw__expand) { color: var(--sp-ink); border-color: var(--sp); }
#connect-field[data-theme="favor-grow-multicolor"] thead th { background-color: var(--sp-band); color: var(--sp-band-ink); border-bottom-color: var(--sp); }
#connect-field[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)); }
#connect-field[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)); }
#connect-field[data-theme="favor-grow-multicolor"] .xrail__btn:not(:disabled, [aria-disabled="true"]) { background: var(--sp); border-color: var(--sp); color: var(--sp-on-own); }
#connect-field[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; }
#connect-field[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); }
#connect-field[data-theme="favor-grow-multicolor"] .filter-legend { color: var(--sp-ink); }
#connect-field[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); }
#connect-field[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; }
#connect-field[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. */
#connect-field .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; }
#connect-field .theme-swatch:hover, #connect-field .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). */
#connect-field .theme-swatch[data-open="true"] { opacity: 1; }
#connect-field .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; }
#connect-field .theme-swatch__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
#connect-field .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); }
#connect-field .theme-swatch__btn[aria-pressed="true"] .theme-swatch__disc { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 2px var(--ink); }
#connect-field .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. */
#connect-field .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. */
#connect-field .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; }
#connect-field .theme-swatch__title { font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
#connect-field .theme-swatch__sub { font-size: .65rem; font-weight: 400; line-height: 1.2; color: var(--muted-ink); letter-spacing: .01em; }
#connect-field .theme-swatch__btn:hover .theme-swatch__name, #connect-field .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. */
#connect-field .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. */
#connect-field .theme-swatch__menu { background: var(--surface); }
#connect-field .theme-swatch__btn[data-theme-pick="favor-cream"] .theme-swatch__disc { --a: #fef1e8; --b: #f45500; --c: #121411; }
#connect-field .theme-swatch__btn[data-theme-pick="favor-dark"] .theme-swatch__disc { --a: #070b0e; --b: #ff7a33; --c: #e2edf2; }
#connect-field .theme-swatch__btn[data-theme-pick="favor-indigo"] .theme-swatch__disc { --a: #0f111c; --b: #8796fc; --c: #f4efe6; }
#connect-field .theme-swatch__btn[data-theme-pick="favor-grow-multicolor"] .theme-swatch__disc { --a: #fbfbfd; --b: #4f3ad0; --c: #121411; }
#connect-field .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%); }
#connect-field .theme-swatch__btn[data-theme-pick="favor-leadership"] .theme-swatch__disc { --a: #edf0ef; --b: #116a60; --c: #14202a; }
#connect-field .theme-swatch__btn[data-theme-pick="favor-watershed"] .theme-swatch__disc { --a: #f6fbfd; --b: #0077a4; --c: #121411; }
@media (prefers-reduced-motion: reduce) {
  #connect-field .theme-swatch__disc { transition: box-shadow .18s ease; }
  #connect-field .theme-swatch__btn:hover .theme-swatch__disc { transform: none; }
  #connect-field .theme-swatch__name { transform: translateY(0); }
}
@media print {
  #connect-field .theme-swatch { display: none; }
}

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

/* T4 -- the notebook card look, ported from Grow, scoped to the multicolor theme only.
   Token names match Grow's verbatim; the page ground stays white, dots and beige live
   on the card. Accent varies by island: Connect Field takes a top rule in the chapter hue.
   Kept OUTSIDE the generated theme block above (tools/build_theme_blocks.py) so it is not
   wiped the next time that block regenerates. */
#connect-field[data-theme="favor-grow-multicolor"] {
  --notebook-page: #ffffff;
  --notebook-ground: #f5e6d2;
  --notebook-surface: #fdf6ec;
  --notebook-rule: #dccbb5;
  --notebook-radius: 10px;
  --notebook-card-shadow: 0 16px 40px -12px color-mix(in srgb, var(--shadow-ink) 14%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  --dot-ink: color-mix(in srgb, #7d6f5e 14%, transparent);
  --dot-pitch: 18px;
}
#connect-field[data-theme="favor-grow-multicolor"] .station {
  background-color: var(--notebook-surface);
  background-image: radial-gradient(circle, var(--dot-ink) .75px, transparent .85px);
  background-size: var(--dot-pitch) var(--dot-pitch);
  border: 1px solid var(--notebook-rule);
  border-radius: var(--notebook-radius);
  box-shadow: var(--notebook-card-shadow), inset 0 3px 0 0 var(--sp, var(--chapter-hue, var(--accent)));
  padding: 1.4rem 1.6rem;
}

#connect-field {
  /* ═══ CONNECT PRIMARY RAMP — brand hue OKLCH 275.6°, anchored on
         connect.example.invalid indigo.DEFAULT (500) and indigo.light (400) ═══ */
  --connect-50:  #edf1ff;  /* lightest wash; chip text on 700/800 fills, board tint */
  --connect-100: #d5dcfd;  /* density heat step 1 (cream board); quiet chrome wash */
  --connect-200: #b1bdfc;  /* primary readable purple — headings, active chip text (10.34:1) */
  --connect-300: #8796fc;  /* PRIMARY UI purple — links, focus ring, active rules (6.98:1) */
  --connect-400: #646cff;  /* brand indigo.light — large text / 3:1 marks only, never body copy */
  --connect-500: #4036d2;  /* brand indigo.DEFAULT — primary fill; pair with --connect-50 (6.96:1) */
  --connect-600: #3428b2;  /* pressed fill, ::selection ground, heat step 5 */
  --connect-700: #271e8b;  /* active-chip fill on dark; pair with --connect-200 (7.02:1) */
  --connect-800: #191361;  /* deep well, selected-row fill; pair with --connect-200 (8.84:1) */
  --connect-900: #0e0b40;  /* deepest chrome, sidebar spine, heat step 6 */
  --connect-950: #060725;  /* below-ground shadow well; decorative only */

  /* ═══ CONSOLE MATERIALS — the old graphite value ladder held to the
         hundredth in OKLCH L, re-hued from green 145° to Connect 275.6°.
         Phase 2: redefined onto the token contract (docs/design/theme-token-contract.md)
         so the ladder follows the active [data-theme], not a fixed literal.
         --edge-lit / --edge-strong share their name with the contract token, so the
         generated region above already supplies them; no local re-declaration needed.
         --panel-lit became the contract's --surface-lit in Phase 3. ═══ */
  --ground:    var(--background);  /* was #0f111c */
  --panel:     var(--surface);  /* was #171926 */
  --panel-2:   var(--surface-raised);  /* was #1d2030 */
  --panel-lit: var(--surface-lit);  /* was #23273b */
  --edge:      var(--rule);  /* was #2b3047 */

  /* ═══ CHROME INK — warm Favor cream ink kept verbatim over the cool ground.
         That warm/cool tension is what keeps the console in the Favor family.
         --ink shares its name with the contract token of the same name, so the
         generated region above already supplies it at the correct cascade value;
         a local `--ink: var(--ink)` here would be a self-reference cycle, so it is
         not re-declared. --muted / --faint are locally-named, so they alias below. ═══ */
  --muted: var(--muted-ink);  /* was #afb2c1 */
  --faint: var(--faint-ink);  /* was #8b8e9e */

  /* ═══ SEMANTIC STATE — Exec hues, NOT purple. Ruling 2 of the token contract:
         the -deep / -mark-cream triad members are deleted. A pinned surface (marked
         `.pinned-cream` in markup) resolves the whole contract from favor-cream, so
         a rule painting onto that surface uses the plain token and gets the cream
         value automatically. See the CSS report for which -deep survivors are map/
         Plotboard. The -deep family below is that survivor set, completed and given
         its real job by #258: it is the state ramp for the CREAM board, where the
         dark-console --state-* values are the wrong end of the scale. Every one is
         a bubble FILL carrying a --cream-surface numeral, so both ratios are named.
         Nothing else on the page may use them.

         #324 / critique F6: the ramp now runs WITH severity on both grounds. It used
         to run against it. Watch wore the brand orange #f45500, which was the highest
         chroma AND the highest lightness in the set, so the third-worst state was the
         loudest mark on the board; worse, its hue sat BETWEEN Critical and Thin, which
         left the two states a reader most needs to tell apart the closest pair in the
         ramp (OKLab dE .045 at 1px, against .099 from Critical to Watch).

         All three channels now fall together, Critical first:

           state      OKLCH hue   chroma          job
           Critical   26 deg      highest         vermilion, the loudest mark
           Thin       50 deg      next            burnt orange
           Watch      78 deg      next            cool brass, NOT the brand orange
           Healthy   148 deg      quiet           the green already in use, unmoved
           Unknown   271 deg      C .010          off the ramp, near-achromatic

         Adjacent states are >= .064 apart in OKLab on both grounds, so the field-strip
         tick separates on hue alone at 1px width, where there is no shape or label to
         help. #f45500 is no longer a state token anywhere; it stays --cohort-leader.

         The console values are the contract's, so they follow [data-theme]; the ramp
         itself lives in themes/favor-indigo.json and themes/favor-cream.json. The -deep
         literals below ARE the favor-cream state fills, held dark enough that the
         bubble clears 4.5:1 on --cream and still carries a --cream-surface numeral. ═══ */
  --healthy:       var(--state-healthy);  /* was #538059 */
  --healthy-text:  var(--state-healthy-text);  /* was #74a279 */

  --watch:         var(--state-watch);  /* was #b7831f */
  --watch-text:    var(--state-watch-text);  /* was #ca9842 */
  --watch-deep:    #8b6000;  /* on --cream 5.03:1 · --cream-surface numeral on it 5.37:1 */

  --thin:          var(--state-thin);  /* was #d7712e */
  --thin-text:     var(--state-thin-text);  /* was #e68a54 */
  --thin-deep:     #9d4908;  /* on --cream 5.59:1 · --cream-surface numeral on it 5.98:1 */

  --critical:      var(--state-critical);  /* was #f25852 */
  --critical-text: var(--state-critical-text);  /* was #fa7d73 */
  --critical-deep: #ae1c21;  /* on --cream 6.35:1 · --cream-surface numeral on it 6.78:1 */
  --healthy-deep:  #4c7752;  /* on --cream 4.66:1 · --cream-surface numeral on it 4.98:1 */
  --unknown-deep:  #5b5d63;  /* on --cream 5.94:1 · --cream-surface numeral on it 6.35:1 */

  --core-gold:      var(--cohort-core);  /* was #ffb42a */

  /* ═══ UNKNOWN vs UNAVAILABLE — near-achromatic (C .010) so neither can be
         mistaken for the purple chrome or for a state hue ═══ */
  --unknown:      var(--state-unknown);  /* was #73757b */
  --unknown-text: var(--state-unknown-text);  /* was #95969d */
  --unavailable-ink:  #95969d; /* "Unavailable — not zero." copy; same slate as Unknown */
  --unavailable-rule: #73757b; /* 1px DASHED border, 4px/4px. The dash is the carrier;
                                  unavailable is never filled and never animated */
  --unavailable-fill: transparent; /* explicit: a hollow box can never be read as a zero bar */

  /* ═══ SKELETON / GHOST — Connect purple, because loading is CHROME work,
         not a data state. Filled + shimmering + "?" glyph, so it can never be
         confused with a real 0 (solid --ink numeral on a baseline rule) or
         with unavailable (hollow, dashed, slate, static) ═══ */
  --ghost-fill:    #1e223d;  /* skeleton bar body — purple-tinted, 1.12:1 above --panel:
                                present as a solid mass, but carries no readable value */
  --ghost-fill-2:  #262b4c;  /* second skeleton row, so a stack of bars still reads as rows */
  --ghost-edge:    #6c74a1;  /* skeleton bar outline — 3.44:1 on --ghost-fill, 3.86:1 on --panel.
                                This is the token that proves "a bar is here" at 3:1 */
  --ghost-shimmer: #343b69;  /* sweep highlight, top of the gradient — 1.46:1 above --ghost-fill */
  --ghost-glyph:   #8590c5;  /* the "?" placeholder — 5.03:1 on --ghost-fill, 5.64:1 on --panel.
                                It is text, so it clears 4.5:1, and it is lilac, so it is
                                unmistakably neither a numeral (cream) nor Unknown (slate) */
  --ghost-shimmer-duration: 1400ms;

  /* ═══ FOCUS & SELECTION ═══ */
  --focus:           #8796fc; /* = --connect-300. 6.98 ground / 5.47 --panel-lit / 2.91 on a
                                 --connect-500 fill — so focus over a purple fill also takes
                                 --focus-inner below as a 2px inner ring */
  --focus-inner:     #0f111c; /* inner halo = --ground; 6.98:1 against --focus */
  --selection-bg:    #3428b2; /* = --connect-600 (was --watch orange) */
  --selection-ink:   #f4efe6; /* 8.76:1 on --selection-bg */

  /* ═══ SEQUENTIAL DENSITY HEAT — retires --info; the plotboard density and
         seats layers become one purple sequence, freeing blue entirely ═══ */
  --heat-1: #d5dcfd;  /* = --connect-100 — lowest density; label ink #121411, 13.66:1 */
  --heat-2: #b1bdfc;  /* = --connect-200 — label ink #121411, 10.19:1 */
  --heat-3: #8796fc;  /* = --connect-300 — label ink #121411, 6.88:1 */
  --heat-4: #646cff;  /* = --connect-400 — label ink #121411, 4.53:1 (last dark-ink step) */
  --heat-5: #4036d2;  /* = --connect-500 — labels switch to --cream-surface, 7.57:1 */
  --heat-6: #271e8b;  /* = --connect-700 — labels --cream-surface, 12.32:1 */
  --heat-ink-light: #121411; /* label ink over --heat-1..4 */
  --heat-ink-dark:  #fffaf6; /* label ink over --heat-5..6 */

  /* ═══ THE LIT BOARD — Favor cream world, hues unchanged ═══ */
  --cream:         #fef1e8;
  --cream-surface: #fffaf6;
  --cream-ink:     #121411;  /* 16.72:1 on --cream */
  --cream-rule:    rgba(18,20,17,.16);
  --cream-accent:  #4036d2;  /* Connect purple survives onto the lit board — 7.08:1 on --cream */

  /* ═══ TYPE & LAYOUT — unchanged ═══ */
  --font-body:    FavorSans, Arial, sans-serif;
  --font-display: Favorvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --sidebar-w:    320px;
  --ease:         cubic-bezier(.22,.9,.3,1);

  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  margin: 0;
  padding: 0 clamp(1rem, 2.5vw, 2.4rem) 4rem;
  overflow-x: clip;
  max-width: 100%;
  /* No overflow on the island root: it breaks position:sticky when embedded in Rock. */
}
#connect-field { background: var(--ground); overflow-x: clip; max-width: 100%; }

#connect-field ::selection { background: var(--selection-bg); color: var(--selection-ink); }
#connect-field :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 1px var(--focus-inner); }
#connect-field * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--edge-lit) var(--panel); }
#connect-field ::-webkit-scrollbar { height: 8px; width: 8px; }
#connect-field ::-webkit-scrollbar-thumb { background: var(--edge-lit); }
#connect-field ::-webkit-scrollbar-track { background: var(--panel); }
#connect-field h1, #connect-field h2, #connect-field h3, #connect-field p { margin: 0; }
#connect-field a { color: var(--connect-300); text-decoration: none; }
#connect-field a:hover { text-decoration: underline; text-underline-offset: 3px; }
#connect-field .mono, #connect-field .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#connect-field .nowrap { white-space: nowrap; }
/* Rock's chrome loads Bootstrap, and Bootstrap's `button, input, optgroup,
   select, textarea { color: inherit; font: inherit }` hands every button this
   sheet forgets to paint our cream --ink while leaving the UA's
   `background: buttonface` (#efefef) exactly where it was. So a bare button is
   BLACK on grey in the workbench, where there is no Bootstrap and the UA's own
   buttontext wins -- ugly, legible, easy to walk past -- and cream on near-white
   at contrast 1.00 the moment it ships. That asymmetry is why two families of
   button went out invisible on prod and preview and looked fine locally, and it
   is why this rule now takes away the whole UA button rather than only its font:
   an unpainted button has to be quiet and readable in BOTH places. Painting the
   button properly is still the job -- this is the floor, not the design. */
/* :where() and not a plain :not(), because a reset carrying an id outranks every
   single-class rule in this sheet: the first cut of this line beat
   `#connect-field .acronym-btn` and quietly took the boxes off BNE / MNL / SEL.
   :where() contributes nothing to specificity, so this reads as a FLOOR --
   anything that actually paints a button wins, and only a button nothing paints
   lands here.

   MapLibre's controls are still excluded outright. They are a vendor widget with
   a complete stylesheet of its own that this sheet has no business overriding,
   and even at :where() weight the id would beat `.maplibregl-ctrl button` -- it
   had already taken the 1px divider out from between the zoom + and - buttons.
   .loc-bubble rides the same exclusion because MapLibre stamps its own classes
   on the marker element; it is fully painted further down. */
#connect-field button:where(:not([class*="maplibregl-"])) { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; }

/* ---------- masthead ---------- */
#connect-field .masthead { max-width: 96rem; margin: 0 auto; padding: 1.2rem 0 1rem; border-bottom: 1px solid var(--edge); }
#connect-field .masthead__top { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
#connect-field .masthead__id { flex: 1 1 24rem; min-width: 0; }
/* The tools sit at the BOTTOM of the masthead row, not level with the title: the stamps
   read down the left (#295/#297), so a corner-top control would read as a second headline
   competing with the title. Dropped here it reads as what the page lets you do, under
   everything it says. Prod Exec Overview has the same reading order. */
#connect-field .masthead__aside { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; gap: .85rem; text-align: right; margin-left: auto; }
#connect-field .masthead__flags { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }
#connect-field .console-line { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#connect-field .console-line .console-word { color: var(--ink); font-weight: 700; }
#connect-field .console-line strong { color: var(--watch); letter-spacing: .14em; }
#connect-field .console-sep { color: var(--faint); }
#connect-field .suite-link { color: var(--muted); pointer-events: none; }
/* --paper was never defined, so `color: var(--paper)` was dropped as invalid and the
   text inherited --ink -- cream on a cream background. --ground is the island ground
   and gives 16.41:1 against --ink. */
#connect-field .status-beta { display: inline-flex; align-items: baseline; gap: .45rem; margin-top: .7rem; padding: .3rem .6rem; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); font-size: .72rem; letter-spacing: .04em; }
#connect-field .status-beta strong { text-transform: uppercase; letter-spacing: .12em; }
#connect-field .status-beta span { color: var(--ground); opacity: .82; }
#connect-field .masthead h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: .88; letter-spacing: -.02em;
  margin-top: .4rem; text-wrap: balance;
}
#connect-field .title-beta { display: inline-block; font-size: .58em; letter-spacing: 0; white-space: nowrap; }
#connect-field .thesis { max-width: 58ch; color: var(--muted); margin-top: .9rem; font-size: .95rem; }
#connect-field .thesis strong, #connect-field .thesis em { color: var(--ink); font-style: normal; }
#connect-field .flag-fictional {
  display: inline-block; margin-top: .6rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ground); background: var(--watch); padding: .18rem .6rem;
}
#connect-field .masthead__meta { align-items: flex-start; text-align: left; }
#connect-field .masthead__stamps { display: grid; gap: .55rem; min-width: 15rem; max-width: 28rem; margin-top: .9rem; align-items: flex-start; text-align: left; }
#connect-field .stamp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.2rem; align-items: baseline; border-top: 1px solid var(--edge); padding-top: .4rem; }
#connect-field .stamp-key { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* At 390px the widest stamp ("6 wk · 2026-07-19 -> 2026-08-23") wrapped inside a date: the
   line broke at the hyphen, leaving "2026-08-" above "23" -- one date reading as two numbers.
   The dated values are held on one line and the row is allowed to wrap instead, so a value
   too wide to sit beside its key drops whole onto the next line. */
#connect-field .stamp-val { font-size: .84rem; font-weight: 700; }
#connect-field .stamp-val.mono { white-space: nowrap; }
#connect-field .stamp-stale .stamp-val { color: var(--thin-text); text-shadow: 0 0 14px rgba(208,145,45,.55); } /* stale = decayed afterglow, visible, never hidden */

/* ---------- scope bar ---------- */
#connect-field .scopebar {
  max-width: 96rem; margin: .8rem auto 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border: 1px solid var(--edge); background: var(--panel); padding: .55rem .8rem;
}
#connect-field .scopebar-lead { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
#connect-field .scopebar-summary { font-size: .86rem; font-weight: 700; }
#connect-field .scopebar-tags { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
#connect-field .scope-tag {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700;
  border: 1px solid var(--edge-lit); background: var(--panel-2); padding: .12rem .5rem; color: var(--ink);
}
#connect-field .scope-tag button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 .05rem; font-size: .85rem; line-height: 1; }
#connect-field .scope-tag button:hover { color: var(--critical-text); }
#connect-field .scopebar-reset { margin-left: auto; border: 1px solid var(--edge-lit); background: none; color: var(--watch-text); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .7rem; cursor: pointer; }
#connect-field .scopebar-reset:hover { border-color: var(--watch); background: color-mix(in srgb, var(--watch) 8%, transparent); }

/* ---------- layout + filter console (family anatomy, console skin) ---------- */
/* The toggle travels with the console it controls. The console is sticky, so on
   a long page it is still there at scroll depth -- but the button that closes it
   sat in normal flow at the top of the document, so you could open the console,
   scroll, and then have no way to close it without scrolling back up. The bar now
   sticks to the same --console-top the sidebar uses. It spans the full column but
   is transparent, so only the button takes pointer events; everything else passes
   through to the chart underneath. */
#connect-field .sidebar-toggle-bar {
  max-width: 96rem; margin: .6rem auto .5rem; display: flex; justify-content: flex-end;
  position: sticky; top: var(--console-top, 1rem); z-index: 30; pointer-events: none;
}
#connect-field .sidebar-toggle-bar > * { pointer-events: auto; }
#connect-field .toggle-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .85rem;
  border: 1px solid var(--edge-lit); background: var(--panel); color: var(--ink);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; cursor: pointer;
}
#connect-field .toggle-btn:hover { background: var(--panel-lit); }
#connect-field .toggle-btn .arrow { color: var(--muted); transition: transform .2s var(--ease); }
/* Keyed off the island root, not off .is-collapsed: the toggle bar is a sibling of
   .dashboard-layout, which is the element that carries that class, so the descendant
   selector never matched and the mark never turned. data-console is already written on
   the root for the mobile bottom sheet and is an ancestor of both. Closed points left,
   at the console it will pull open; open points right, back at the edge it folds into. */
#connect-field[data-console="closed"] .toggle-btn .arrow { transform: rotate(180deg); }

#connect-field .dashboard-layout {
  max-width: 96rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) var(--sidebar-w);
  gap: 1.9rem; align-items: start;
  transition: grid-template-columns .25s var(--ease), opacity .18s var(--ease);
}
#connect-field .dashboard-layout.is-collapsed { grid-template-columns: minmax(0,1fr) 0; gap: 0; }
#connect-field .dashboard-layout.is-collapsed .filter-sidebar { display: none; }
#connect-field .main-column { min-width: 0; }

/* Classic/Creative switch (#215 foundation): a 180ms settle on the board
 * itself while state repaints, state-communication only -- never decoration
 * (DESIGN.md motion rule). The file-wide prefers-reduced-motion rule below
 * already zeroes transitions out; the boot script also skips adding this
 * class under state.reducedMotion, so the two guards agree instead of one
 * silently masking the other. */
#connect-field.is-mode-switching .dashboard-layout { opacity: .55; }

#connect-field .filter-sidebar {
  /* Clears the sticky toggle bar above it -- see .sidebar-toggle-bar. */
  position: sticky; top: calc(var(--console-top, 1rem) + 2.3rem);
  max-height: calc(100vh - var(--console-top, 1rem) - 2.3rem - 1rem);
  background: var(--panel); border: 1px solid var(--edge-lit);
  padding: .95rem 1rem 1rem; display: flex; flex-direction: column; gap: .85rem;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
/* Display-mode switch (#215 foundation, #219, #237): styled consistently with
 * Pathways and Exec Overview -- 44px segments, classic-surface-2 well, classic-ink active fill,
 * Classic on the left and Creative on the right. */
#connect-field #mode-switch-mount { display: flex; width: 100%; }
#connect-field .mode-switch { display: inline-flex; width: 100%; gap: 2px; padding: 2px; border: 1px solid var(--classic-rule); background: var(--classic-surface-2); flex: none; }
#connect-field .mode-switch__btn { flex: 1 1 0; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 0; background: transparent; color: var(--classic-muted); font-family: var(--classic-body-font); font-size: .82rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
#connect-field .mode-switch__btn:hover { color: var(--classic-ink); }
#connect-field .mode-switch__btn[aria-pressed="true"] { background: var(--classic-ink); color: var(--classic-surface); cursor: default; }
#connect-field .mode-switch__btn:focus-visible { outline: 2px solid var(--classic-focus); outline-offset: 2px; }
#connect-field .sidebar-head { display: flex; align-items: baseline; gap: .6rem; border-bottom: 1px solid var(--edge-lit); padding-bottom: .5rem; }
#connect-field .sidebar-head h2 { font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
#connect-field .sidebar-back-btn {
  display: none;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .65rem;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  min-height: 44px;
}
#connect-field .sidebar-back-btn:hover, #connect-field .sidebar-back-btn:focus-visible {
  background: var(--panel-lit);
  border-color: var(--accent);
}
#connect-field .filter-backdrop {
  display: none;
}
#connect-field .active-summary-pill { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--watch-text); }
#connect-field .reset-btn { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--watch-text); background: none; border: none; cursor: pointer; padding: 0; }
#connect-field .reset-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
#connect-field .filter-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
#connect-field .filter-legend { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; width: 100%; margin-bottom: .15rem; }
#connect-field .filter-legend .sub { font-weight: 400; font-size: .64rem; color: var(--faint); }

#connect-field .campus-acronym-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
#connect-field .acronym-btn, #connect-field .opt-btn, #connect-field .mini-btn, #connect-field .legend-btn, #connect-field .recenter-btn {
  border: 1px solid var(--edge); background: var(--panel-2); color: var(--muted);
  cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
#connect-field .acronym-btn { padding: 6px 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
#connect-field .acronym-btn:hover, #connect-field .opt-btn:hover, #connect-field .mini-btn:hover, #connect-field .legend-btn:hover, #connect-field .recenter-btn:hover { border-color: var(--edge-lit); background: var(--panel-lit); color: var(--ink); }
/* struck forward: the active option lights hard while its siblings stay present as ghosts */
#connect-field .acronym-btn[aria-pressed="true"], #connect-field .opt-btn[aria-pressed="true"], #connect-field .mini-btn[aria-pressed="true"], #connect-field .legend-btn[aria-pressed="true"] {
  border: 2px solid var(--ink); background: var(--panel-lit); color: var(--ink); font-weight: 800;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), inset 0 0 18px color-mix(in srgb, var(--ink) 5%, transparent);
}
#connect-field .chip-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; }
#connect-field .opt-btn { display: flex; flex-direction: column; gap: 3px; padding: .32rem .45rem; text-align: left; width: 100%; }
#connect-field .btn-row-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; width: 100%; font-size: .72rem; }
#connect-field .btn-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#connect-field .val-tag { font-family: var(--font-mono); font-size: .66rem; color: var(--faint); }
#connect-field .opt-btn[aria-pressed="true"] .val-tag { color: var(--muted); }
#connect-field .btn-meter { height: 3px; width: 100%; background: var(--edge); overflow: hidden; }
#connect-field .btn-meter-fill { height: 100%; background: var(--connect-300); transform-origin: left center; transition: transform .25s var(--ease); }
#connect-field .opt-btn[data-key="health"] .btn-meter-fill { background: var(--unknown); }
#connect-field .meet-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
#connect-field .mini-btn { padding: 6px 3px; font-size: .7rem; font-weight: 700; text-align: center; }
#connect-field .select-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#connect-field .field-select {
  width: 100%; min-height: 34px; border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink);
  padding: 5px 7px; font-size: .76rem; font-weight: 600; font-family: var(--font-body);
}
#connect-field .field-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#connect-field .filter-count-note { font-size: .74rem; color: var(--muted); padding-top: .5rem; border-top: 1px dashed var(--edge-lit); line-height: 1.45; }
#connect-field .filter-count-note strong { color: var(--ink); }

/* ---------- (i) disclosures — repo rule: explainer prose collapses behind a clickable (i) ---------- */
#connect-field .info-disc { display: inline-block; position: relative; vertical-align: middle; }
#connect-field .info-disc summary { list-style: none; cursor: pointer; display: inline-flex; padding: 2px; }
#connect-field .info-disc summary::-webkit-details-marker { display: none; }
#connect-field .info-disc summary svg { width: 15px; height: 15px; display: block; }
#connect-field .info-disc summary svg circle, #connect-field .info-disc summary svg line { fill: none; stroke: var(--muted); stroke-width: 1.4; }
#connect-field .info-disc summary svg .dotcap { fill: var(--muted); stroke: none; r: 1.1px; }
#connect-field .info-disc summary:hover svg circle, #connect-field .info-disc summary:hover svg line { stroke: var(--connect-300); }
#connect-field .info-disc summary:hover svg .dotcap { fill: var(--connect-300); }
#connect-field .info-disc[open] summary svg circle:first-of-type { fill: var(--panel-lit); stroke: var(--connect-300); }
#connect-field .info-disc[open] summary svg line { stroke: var(--connect-300); }
#connect-field .info-disc[open] summary svg .dotcap { fill: var(--connect-300); }
#connect-field .info-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: -8px;
  width: min(30rem, calc(100vw - 3rem));
  background: var(--panel-2); border: 1px solid var(--edge-lit); color: var(--muted);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  padding: .8rem .95rem; font-size: .8rem; font-weight: 400; line-height: 1.55;
  font-family: var(--font-body); letter-spacing: 0; text-transform: none;
}
#connect-field .info-pop strong, #connect-field .info-pop em { color: var(--ink); font-style: normal; }
#connect-field .info-disc-h1 { margin-left: .4rem; }
#connect-field .info-disc-h1 summary svg { width: 20px; height: 20px; }

/* ---------- stations ---------- */
#connect-field .station { padding: 2.6rem 0 0; margin-top: 2.4rem; border-top: 1px solid var(--edge); }
#connect-field .station:first-child { margin-top: 0; border-top: none; padding-top: .6rem; }
#connect-field .station-head { margin-bottom: 1.1rem; }
#connect-field .station-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; text-wrap: balance; }
#connect-field .station-tag { font-family: var(--font-mono); font-size: .66rem; font-weight: 400; letter-spacing: .22em; color: var(--watch-text); border: 1px solid var(--edge-lit); padding: .18rem .5rem .14rem; transform: translateY(-.22em); }
#connect-field .station-note { color: var(--muted); font-size: .87rem; max-width: 76ch; margin-top: .55rem; }
#connect-field .station-note em { color: var(--ink); font-style: normal; }
#connect-field .station-foot { color: var(--muted); font-size: .8rem; margin-top: .8rem; max-width: 76ch; }
#connect-field .station-foot strong { color: var(--ink); }

/* ---------- SIGNAL board: poster type, hierarchy by size alone ---------- */
#connect-field .board { display: grid; gap: 0; }
#connect-field .board-line { display: grid; grid-template-columns: minmax(11rem, 22rem) 1fr auto; gap: 1.4rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--edge); }
#connect-field .board-line:first-child { border-top: none; padding-top: .2rem; }
#connect-field .board-line.is-actionable { cursor: pointer; }
#connect-field .board-line.is-actionable:hover .board-headline { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
#connect-field .board-headline { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: .92; }
#connect-field .board-line[data-rank="1"] .board-headline { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
#connect-field .board-line[data-rank="2"] .board-headline { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
#connect-field .board-line[data-rank="3"] .board-headline { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
#connect-field .board-line[data-rank="4"] .board-headline { font-size: clamp(1.15rem, 2.1vw, 1.6rem); }
#connect-field .board-sub { font-family: var(--font-mono); color: var(--muted); font-size: .72rem; letter-spacing: .03em; align-self: center; }
#connect-field .board-sub strong { color: var(--ink); font-weight: 700; }
#connect-field .board-verb { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; align-self: center; color: var(--faint); }
#connect-field .board-composition { display: block; padding: .6rem 0; border-top: 1px solid var(--edge); }
#connect-field .board-composition-counts { margin: 6px 0 0; font-size: .76rem; color: var(--muted-ink); letter-spacing: .02em; }
#connect-field .c-critical { color: var(--critical-text); } #connect-field .c-thin { color: var(--thin-text); } #connect-field .c-watch { color: var(--watch-text); } #connect-field .c-healthy { color: var(--healthy-text); } #connect-field .c-unknown { color: var(--unknown-text); } #connect-field .c-info { color: var(--connect-300); }

/* the field strip: every group, one tick */
#connect-field .fieldstrip-wrap {
  margin-top: 1rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#connect-field .fieldstrip { display: flex; align-items: flex-end; gap: 1px; height: 44px; min-width: 0; }
#connect-field .fieldstrip .tick { flex: 1 1 auto; min-width: 1px; max-width: 7px; height: 44px; opacity: .92; transform: scaleY(var(--s, .68)); transform-origin: bottom; transition: transform .18s var(--ease), opacity .18s var(--ease); cursor: pointer; }
#connect-field .fieldstrip .tick.h-critical { background: var(--critical); --s: 1; }
#connect-field .fieldstrip .tick.h-thin { background: var(--thin); --s: .86; }
#connect-field .fieldstrip .tick.h-watch { background: var(--watch); --s: .75; }
#connect-field .fieldstrip .tick.h-healthy { background: var(--healthy); --s: .59; }
#connect-field .fieldstrip .tick.is-dim { opacity: .14; --s: .41; }
#connect-field .fieldstrip .tick:hover { opacity: 1; outline: 1px solid var(--ink); }
#connect-field .fieldstrip-legend { font-size: .74rem; color: var(--muted); margin-top: .5rem; }
#connect-field .fieldstrip-legend .sw { display: inline-block; width: .62em; height: .62em; margin: 0 .3em 0 .9em; }
#connect-field .fieldstrip-legend .sw:first-child { margin-left: 0; }

/* ---------- matrices (cohort + rhythm) ---------- */
#connect-field .matrix-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--edge);
  background: var(--panel);
}
#connect-field .cohort-grid { display: grid; min-width: 860px; }
#connect-field .cohort-row, #connect-field .cohort-headrow { display: grid; grid-template-columns: 130px repeat(7, minmax(96px, 1fr)); }
#connect-field .cohort-headrow > div, #connect-field .cohort-rowlabel, #connect-field .cohort-cell { border: 0; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 9px 10px; }
#connect-field .cohort-headrow > div:last-child, #connect-field .cohort-cell:last-child { border-right: none; }
#connect-field .cohort-row:last-child > .cohort-rowlabel, #connect-field .cohort-row:last-child > .cohort-cell { border-bottom: none; }
#connect-field .cohort-headrow > div { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
#connect-field .cohort-rowlabel { font-size: .78rem; font-weight: 700; background: var(--panel-2); display: flex; align-items: center; }
#connect-field .cohort-cell { position: relative; min-height: 72px; cursor: pointer; background: var(--panel); text-align: left; color: inherit; font-family: inherit; display: flex; flex-direction: column; width: 100%; }
#connect-field .cohort-cell:hover { box-shadow: inset 0 0 0 2px var(--ink); }
#connect-field .cohort-cell.is-active { box-shadow: inset 0 0 0 2px var(--watch); }
#connect-field .cohort-cell .cell-n { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1; }
#connect-field .cohort-cell .cell-sub { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); margin-top: 5px; margin-bottom: 6px; }
#connect-field .cohort-cell .cell-strip { height: 4px; background: var(--edge); margin-top: auto; }
#connect-field .cohort-cell .cell-strip i { display: block; height: 100%; background: var(--critical); }
/* designed absence: a combination that structurally does not exist is an unlit ghost, not a blank */
#connect-field .cohort-cell.is-na { cursor: default; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,136,123,.07) 5px 6px); }
#connect-field .cohort-cell.is-na .cell-n { color: var(--faint); font-size: .95rem; }
#connect-field .cohort-cell.is-na:hover { box-shadow: none; }
#connect-field .cohort-cell.is-zero .cell-n { color: var(--faint); }
#connect-field .cohort-cell.is-zero .cell-sub { color: var(--faint); }

#connect-field .rhythm-grid { display: grid; min-width: 760px; }
#connect-field .rhythm-headrow, #connect-field .rhythm-row { display: grid; grid-template-columns: 120px repeat(7, minmax(84px, 1fr)); }
#connect-field .rhythm-headrow > div, #connect-field .rhythm-rowlabel, #connect-field .rhythm-cell { border: 0; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 8px 9px; }
#connect-field .rhythm-headrow > div:last-child, #connect-field .rhythm-cell:last-child { border-right: none; }
#connect-field .rhythm-row:last-child > .rhythm-rowlabel, #connect-field .rhythm-row:last-child > .rhythm-cell { border-bottom: none; }
#connect-field .rhythm-headrow > div { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
#connect-field .rhythm-rowlabel { font-size: .76rem; font-weight: 700; background: var(--panel-2); display: flex; align-items: center; }
#connect-field .rhythm-cell { position: relative; min-height: 56px; cursor: pointer; text-align: left; color: inherit; font-family: inherit; display: flex; flex-direction: column; width: 100%; background: var(--panel); }
#connect-field .rhythm-cell:hover { box-shadow: inset 0 0 0 2px var(--ink); }
#connect-field .rhythm-cell.is-active { box-shadow: inset 0 0 0 2px var(--watch); }
#connect-field .rhythm-cell .rn { font-family: var(--font-mono); font-weight: 700; font-size: .92rem; }
#connect-field .rhythm-cell .rsub { font-family: var(--font-mono); font-size: .6rem; color: var(--muted); margin-top: 3px; margin-bottom: 5px; }
#connect-field .rhythm-cell .cell-strip { height: 3px; background: var(--edge); margin-top: auto; }
#connect-field .rhythm-cell .cell-strip i { display: block; height: 100%; background: var(--critical); }
#connect-field .rhythm-cell.is-zero { cursor: default; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,136,123,.06) 5px 6px); }
#connect-field .rhythm-cell.is-zero .rn { color: var(--faint); font-weight: 400; }
#connect-field .rhythm-cell.is-zero:hover { box-shadow: none; }

/* ---------- pressure plot ---------- */
#connect-field .plot-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--edge);
  background: var(--panel);
}
#connect-field .pressure-plot { display: block; width: 100%; min-width: 700px; height: auto; }
#connect-field .pressure-plot .axis { stroke: var(--edge-lit); stroke-width: 1; }
#connect-field .pressure-plot .gridline { stroke: rgba(127,136,123,.14); stroke-width: 1; }
#connect-field .pressure-plot .guide { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 4; }
#connect-field .pressure-plot .quad-label { font: 700 .62rem var(--font-mono); letter-spacing: .16em; fill: var(--faint); }
#connect-field .pressure-plot .axis-label { font: 700 .66rem var(--font-mono); letter-spacing: .1em; fill: var(--muted); }
#connect-field .pressure-plot .tick-label { font: .62rem var(--font-mono); fill: var(--muted); }
#connect-field .pressure-plot .gutter-label { font: 700 .6rem var(--font-mono); letter-spacing: .12em; fill: var(--thin-text); }
#connect-field .pressure-plot .dot { cursor: pointer; transition: opacity .15s var(--ease); }
#connect-field .pressure-plot .dot.is-dim { opacity: .1 !important; pointer-events: none; }
#connect-field .pressure-plot .dot.is-hover { opacity: 1 !important; stroke: var(--ink); stroke-width: 1.5; }

/* ---------- meeting modes ---------- */
#connect-field .modes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#connect-field .mode-panel { border: 1px solid var(--edge); background: var(--panel); padding: 12px 13px; cursor: pointer; text-align: left; color: inherit; font-family: inherit; display: block; }
#connect-field .mode-panel:hover { border-color: var(--edge-lit); background: var(--panel-2); }
#connect-field .mode-panel.is-active { border: 2px solid var(--ink); padding: 11px 12px; background: var(--panel-lit); }
#connect-field .mode-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
#connect-field .mode-name { font-weight: 700; font-size: .95rem; }
#connect-field .mode-n { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
#connect-field .mode-spark { width: 100%; height: 74px; display: block; margin-top: .55rem; }
#connect-field .mode-spark .baseline { stroke: rgba(127,136,123,.25); stroke-width: 1; stroke-dasharray: 2 4; }
#connect-field .mode-spark polyline { fill: none; stroke: var(--connect-300); stroke-width: 2; }
#connect-field .mode-spark .spark-dot { fill: var(--connect-300); }
#connect-field .mode-ret { margin-top: .6rem; }
#connect-field .mode-ret-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; }
#connect-field .mode-ret-track { position: relative; height: 16px; margin-top: 4px; background: var(--panel-2); border: 1px solid var(--edge); }
#connect-field .mode-ret-track .rdot { position: absolute; top: 50%; width: 5px; height: 5px; transform: translate(-50%,-50%); opacity: .5; }
#connect-field .mode-foot { font-size: .74rem; color: var(--muted); margin-top: .6rem; }
#connect-field .mode-foot strong { color: var(--ink); }
#connect-field .mode-empty { color: var(--faint); font-size: .8rem; padding: .8rem 0 .4rem; font-style: italic; }

/* ---------- canopy ---------- */
#connect-field .canopy { display: flex; gap: 6px; align-items: stretch; min-height: 190px; }
#connect-field .canopy-band { position: relative; min-width: 64px; border: 1px solid var(--edge); background: var(--panel); cursor: pointer; text-align: left; color: inherit; font-family: inherit; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0; }
#connect-field .canopy-band:hover { border-color: var(--ink); }
#connect-field .canopy-band.is-active { border: 2px solid var(--watch); }
#connect-field .canopy-fill { position: absolute; inset: 0; display: flex; flex-direction: column; }
#connect-field .canopy-fill i { display: block; width: 100%; opacity: .62; }
#connect-field .canopy-label { position: relative; z-index: 2; background: rgba(15,19,15,.82); padding: 7px 8px; font-size: .72rem; font-weight: 700; border-top: 1px solid var(--edge); }
#connect-field .canopy-label small { display: block; font-weight: 400; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); margin-top: 2px; }
#connect-field .canopy-empty { color: var(--faint); font-size: .82rem; font-style: italic; align-self: center; }

/* ---------- queue (one label anatomy) ---------- */
#connect-field .queue { display: grid; gap: 8px; }
#connect-field .queue-row { display: grid; grid-template-columns: 2.4rem minmax(15rem, 1.15fr) minmax(16rem, 1.5fr) auto auto; gap: 14px; align-items: center; border: 1px solid var(--edge); background: var(--panel); padding: 11px 13px; }
#connect-field .queue-rank { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--faint); line-height: 1; }
#connect-field .queue-name { font-weight: 700; font-size: .95rem; }
#connect-field .queue-meta { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: 3px; letter-spacing: .02em; }
#connect-field .queue-why { font-size: .8rem; color: var(--muted); }
/* Was the mono WHY NOW eyebrow. The sentence is the label now, so the row leads with body
   ink at the queue's own size and the eyebrow's mono voice is gone from this station.
   --ink on --panel is 15.24:1. */
#connect-field .queue-why .why-line { display: block; color: var(--ink); font-size: .8rem; line-height: 1.4; margin-bottom: 3px; }
#connect-field .state-chip { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .5rem; border: 1px solid; justify-self: center; }
#connect-field .state-chip.h-critical { color: var(--critical-text); border-color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, transparent); }
#connect-field .state-chip.h-thin { color: var(--thin-text); border-color: var(--thin); background: color-mix(in srgb, var(--thin) 10%, transparent); }
#connect-field .state-chip.h-watch { color: var(--watch-text); border-color: var(--watch); background: color-mix(in srgb, var(--watch) 9%, transparent); }
#connect-field .state-chip.h-healthy { color: var(--healthy-text); border-color: var(--healthy); background: color-mix(in srgb, var(--healthy) 10%, transparent); }
#connect-field .state-chip.h-unknown { color: var(--unknown-text); border-color: var(--unknown); background: color-mix(in srgb, var(--unknown) 10%, transparent); }
#connect-field .open-connect {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--ground) !important; padding: .5rem .8rem; white-space: nowrap;
}
#connect-field .open-connect:hover { background: var(--watch); text-decoration: none !important; }
#connect-field .queue-empty { border: 1px dashed var(--edge-lit); color: var(--muted); padding: 1.1rem 1.2rem; font-size: .86rem; }
/* logging strip: six expected occurrences, four distinct states */
#connect-field .occ-strip { display: inline-flex; gap: 3px; vertical-align: middle; }
#connect-field .occ { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--edge-lit); background: transparent; }
#connect-field .occ-submitted { background: var(--healthy); border-color: var(--healthy); }
#connect-field .occ-didnotmeet { background: linear-gradient(135deg, transparent 44%, var(--muted) 44%, var(--muted) 56%, transparent 56%); }
#connect-field .occ-notlogged { background: rgba(211,78,59,.18); border-color: var(--critical); }
#connect-field .occ-none { border-style: dashed; border-color: var(--faint); }
#connect-field .occ-unknown { background: var(--unknown); border-color: var(--unknown); }

/* ---------- PLOTBOARD — the locality operations board (#258) ----------

   Two permanent parts, always both present: the lit board on the left and the
   ranked rail on the right. The rail does not appear and disappear with the
   reading, so the board's geometry never depends on which question is being
   asked.

   All Plotboard colour lives here, not in the runtime. The marker carries
   `data-band` / `data-cap` (facts) and the console carries `data-plotmode` (the
   question); the rules below decide what those mean on the cream board. So a
   mode change repaints without rebuilding a node, and there is no colour
   literal in connect-field-boot.mjs at all. */
#connect-field .map-console {
  border: 1px solid var(--edge-lit); background: var(--panel); padding: 10px;
  display: grid; grid-template-columns: minmax(0,1fr) 16.5rem; gap: 10px;
}
#connect-field .map-console-bar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
#connect-field .plot-modes { display: flex; gap: 5px; flex-wrap: wrap; }
#connect-field .legend-btn { padding: .42rem .8rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
#connect-field .plot-scope { display: flex; align-items: stretch; gap: 5px; flex-wrap: wrap; }
#connect-field .plot-scope .recenter-btn { margin-left: .55rem; border-left: 1px solid var(--edge-lit); padding-left: .95rem; }
#connect-field .plot-campus-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 2.9rem; }
/* Camera only. Named for what it does, and deliberately not shaped like the
   campus buttons beside it, because it is not a second campus selector. */
#connect-field .recenter-btn { padding: .42rem .8rem; font-size: .74rem; font-weight: 400; letter-spacing: .04em; color: var(--muted); }
#connect-field .map-mode-copy { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--ink); max-width: 90ch; }
#connect-field .map-frame { position: relative; border: 1px solid var(--edge-lit); min-height: 620px; overflow: hidden; max-width: 100%; }
#connect-field .map-canvas-container { width: 100%; height: 100%; min-height: 520px; position: relative; overflow: hidden; max-width: 100%; }
/* The legend is a caption, not board furniture. It sat in the board's bottom
   corner in a cream chip, where it covered whichever marks happened to be there
   — on Manila, the whole southern group. It now reads as the second line of the
   station's own copy, directly under the sentence that names the reading. */
#connect-field .plot-legend {
  grid-column: 1 / -1; margin: -2px 0 0;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}

/* A locality the board could not place. Painted, not inherited: this is the one note
   on the surface whose whole job is to be noticed, and it is the exact shape Bootstrap
   turns invisible. Warm rather than red -- it is a gap in what we can draw, not a
   failure of the church. */
#connect-field .plot-unplaced {
  grid-column: 1 / -1; margin: .35rem 0 0; padding: .45rem .6rem;
  border-left: 2px solid var(--accent); border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink); font-size: .72rem; line-height: 1.45;
}
#connect-field .plot-unplaced strong { font-weight: 700; color: var(--accent); }

/* ---------- the locality mark ----------
   One anatomy, in every mode: a disc sized by group count with that same count
   inside it, and the place name beneath. Nothing is added or taken away when
   the question changes; only the fill moves. */
/* The button IS the disc, and the name hangs off it absolutely. That way the
   translate(-50%,-50%) that pins the mark to its centroid pins the DISC to the
   centroid — while the name was inside the flow the pair was centred together,
   so every disc sat half a label above the place it was naming. */
#connect-field .loc-bubble {
  --bubble: 32px;
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  width: var(--bubble); height: var(--bubble);
  font-family: var(--font-body); color: var(--cream-ink); text-align: center;
  transform: translate(-50%, -50%);
  /* No `position` here on purpose: MapLibre's own .maplibregl-marker supplies
     position:absolute, and that is what makes this element the containing block
     the name below hangs off. Declaring position:relative at this selector's
     specificity beat MapLibre's rule and dropped every mark back into normal
     flow, stacking them down the left of the board. */
}
#connect-field .loc-bubble .lb-dot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1.5px solid rgba(18,20,17,.72); background: var(--cream-surface);
  transition: background-color .18s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease);
}
#connect-field .loc-bubble .lb-n {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; line-height: 1;
  color: var(--cream-ink); font-variant-numeric: tabular-nums;
}
/* The name takes whichever of the four sides of its own mark is free — below
   first, because that is where a reader looks for it. */
#connect-field .loc-bubble .lb-name {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 3px; font-size: .6rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream-ink); text-shadow: 0 0 3px var(--cream-surface), 0 0 3px var(--cream-surface);
}
#connect-field .loc-bubble .lb-name[data-side="above"] { top: auto; bottom: 100%; margin: 0 0 3px; }
#connect-field .loc-bubble .lb-name[data-side="right"] { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 5px; }
#connect-field .loc-bubble .lb-name[data-side="left"] { left: auto; right: 100%; top: 50%; transform: translateY(-50%); margin: 0 5px 0 0; }
/* Names collide; bubbles never do. A name that would sit on top of a bigger
   locality's name steps back to a wayfinding tint — it is still on the board,
   and it is in the rail and the table regardless. */
#connect-field .loc-bubble .lb-name.is-quiet { visibility: hidden; }
#connect-field .loc-bubble:hover .lb-name.is-quiet, #connect-field .loc-bubble.is-cued .lb-name.is-quiet, #connect-field .loc-bubble:focus-visible .lb-name.is-quiet, #connect-field .loc-bubble.is-selected .lb-name.is-quiet { visibility: visible; }
#connect-field .loc-bubble:hover .lb-dot, #connect-field .loc-bubble.is-cued .lb-dot { border-color: var(--cream-ink); box-shadow: 0 0 0 3px rgba(255,250,246,.75); }
#connect-field .loc-bubble.is-selected { z-index: 30; }
#connect-field .loc-bubble.is-selected .lb-dot { border-width: 2.5px; border-color: var(--cream-accent); box-shadow: 0 0 0 4px rgba(255,250,246,.9); }
#connect-field .loc-bubble:focus-visible { outline: none; }
#connect-field .loc-bubble:focus-visible .lb-dot { box-shadow: 0 0 0 3px var(--cream-surface), 0 0 0 6px var(--focus); }

/* ---------- the empty locality mark (#278) ----------
   Designed absence: a known locality with zero Connect Groups renders as an
   unlit ghost mark using the house 45° hatch idiom. Sits beneath has-Connect
   marks in stacking and emphasis, and answers WHERE there is no Connect. */
#connect-field .loc-empty {
  display: block; padding: 0; border: 0; background: none; color: var(--cream-ink); cursor: pointer;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  z-index: 4;
}
#connect-field .loc-empty .le-ghost {
  display: block; width: 100%; height: 100%;
  border: 1px dashed rgba(18,20,17,.38);
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(18,20,17,.12) 3px 4px);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .12s var(--ease);
}
#connect-field .loc-empty .lb-name {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 3px; font-size: .56rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: rgba(18,20,17,.55);
  text-shadow: 0 0 3px var(--cream-surface), 0 0 3px var(--cream-surface);
  pointer-events: none;
}
#connect-field .loc-empty .lb-name[data-side="above"] { top: auto; bottom: 100%; margin: 0 0 3px; }
#connect-field .loc-empty .lb-name[data-side="right"] { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 5px; }
#connect-field .loc-empty .lb-name[data-side="left"] { left: auto; right: 100%; top: 50%; transform: translateY(-50%); margin: 0 5px 0 0; }
#connect-field .loc-empty .lb-name.is-quiet { visibility: hidden; }
#connect-field .loc-empty:hover, #connect-field .loc-empty.is-cued, #connect-field .loc-empty:focus-visible {
  z-index: 25;
}
#connect-field .loc-empty:hover .lb-name.is-quiet, #connect-field .loc-empty.is-cued .lb-name.is-quiet, #connect-field .loc-empty:focus-visible .lb-name.is-quiet {
  visibility: visible;
}
#connect-field .loc-empty:hover .le-ghost, #connect-field .loc-empty.is-cued .le-ghost {
  border-color: var(--cream-ink);
  border-style: solid;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(18,20,17,.24) 3px 4px);
  box-shadow: 0 0 0 2px rgba(255,250,246,.85);
}
#connect-field .loc-empty:focus-visible {
  outline: none;
}
#connect-field .loc-empty:focus-visible .le-ghost {
  box-shadow: 0 0 0 2px var(--cream-surface), 0 0 0 4px var(--focus);
}

/* ---------- empty locality popup ---------- */
#connect-field .loc-empty-popup .maplibregl-popup-content {
  background: var(--cream-surface);
  color: var(--cream-ink);
  border: 1px solid rgba(18,20,17,.22);
  box-shadow: 0 6px 18px rgba(18,20,17,.16);
  padding: .5rem .7rem;
  font-family: var(--font-body);
  font-size: .75rem;
  line-height: 1.35;
  pointer-events: none;
}
#connect-field .loc-empty-popup .maplibregl-popup-tip {
  border-top-color: var(--cream-surface);
  border-bottom-color: var(--cream-surface);
  border-left-color: var(--cream-surface);
  border-right-color: var(--cream-surface);
}
#connect-field .loc-empty-pop {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
}
#connect-field .loc-empty-pop .lep-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--cream-ink);
}
#connect-field .loc-empty-pop .lep-status {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
#connect-field .loc-empty-pop .lep-nearest {
  font-size: .7rem;
  color: rgba(18,20,17,.72);
  border-top: 1px solid rgba(18,20,17,.1);
  padding-top: .2rem;
  margin-top: .1rem;
}

/* ---------- how loudly a mark speaks ----------
   `data-lit` is the one emphasis channel, and it is the same in every reading:

     on    the place is in the rail's list      — filled in its own hue
     near  it has this reading's signal, below the cut — ring in that hue, no fill
     off   this reading has nothing to say about it   — quiet neutral ring

   Painting every mark in every mode is what made the first board unreadable: on
   the real spread a locality with one Critical group in thirty-three drew the
   same red as the place carrying fourteen under pressure, so the colour channel
   could not answer "where first" and the map became decoration beside a rail that
   could. Achromatic structure dominates; semantic colour speaks only where it
   carries a decision (#258 §10). Position, size, numeral and name are unchanged
   at every level — nothing is hidden, only quieted. */
/* A lit mark and its name sit above the quiet ones. Markers are siblings in the
   map's own overlay, so without this a quiet ring painted later covered the name
   of the place the rail was pointing at -- MANILA and PASIG came out half eaten. */
#connect-field .loc-bubble[data-lit="on"] { z-index: 20; }
#connect-field .loc-bubble[data-lit="near"] { z-index: 12; }
#connect-field .loc-bubble[data-lit="off"] .lb-dot { background: var(--cream-surface); border-color: var(--cream-rule); }
#connect-field .loc-bubble[data-lit="off"] .lb-n { color: var(--cream-ink); }
#connect-field .loc-bubble[data-lit="off"] .lb-name { font-weight: 400; color: rgba(18,20,17,.62); }
#connect-field .loc-bubble[data-lit="near"] .lb-dot { background: var(--cream-surface); border-width: 2px; }
#connect-field .loc-bubble[data-lit="near"] .lb-n { color: var(--cream-ink); }

/* PRESSURE — the worst state actually present, and nothing else. Not an average
   and not a score: one Critical group makes the place Critical, because that is
   the group somebody has to go and see. WHETHER it is filled says whether the
   rail is pointing at it; WHICH hue says what it would be pointing at. */
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"][data-band="critical"] .lb-dot { background: var(--critical-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"][data-band="thin"] .lb-dot { background: var(--thin-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"][data-band="watch"] .lb-dot { background: var(--watch-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"][data-band="healthy"] .lb-dot { background: var(--healthy-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"][data-band="unknown"] .lb-dot { background: var(--unknown-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="on"] .lb-n { color: var(--cream-surface); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="near"][data-band="critical"] .lb-dot { border-color: var(--critical-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="near"][data-band="thin"] .lb-dot { border-color: var(--thin-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="near"][data-band="watch"] .lb-dot { border-color: var(--watch-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="near"][data-band="healthy"] .lb-dot { border-color: var(--healthy-deep); }
#connect-field [data-plotmode="pressure"] .loc-bubble[data-lit="near"][data-band="unknown"] .lb-dot { border-color: var(--unknown-deep); }

/* CAPACITY — known open seats, in six steps, on the eight places with the most
   of them. `unknown` is NOT step 0: nobody set a capacity in Rock, which is a
   different fact from "there is no room", so it draws dashed and keeps reading
   ink whatever else the mode is doing. */
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="0"] .lb-dot { background: var(--heat-1); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="1"] .lb-dot { background: var(--heat-2); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="2"] .lb-dot { background: var(--heat-3); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="3"] .lb-dot { background: var(--heat-4); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="4"] .lb-dot { background: var(--heat-5); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="5"] .lb-dot { background: var(--heat-6); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="4"] .lb-n, #connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="on"][data-cap="5"] .lb-n { color: var(--heat-ink-dark); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-lit="near"] .lb-dot { border-color: var(--cream-accent); }
#connect-field [data-plotmode="capacity"] .loc-bubble[data-cap="unknown"] .lb-dot { background: transparent; border-style: dashed; border-color: var(--unknown-deep); border-width: 1.5px; }

/* NETWORK — presence, and presence is already the size of the mark. Nothing is
   lit here because the reading makes no judgement to light: filling every mark
   purple said "these are all the same kind of important", which is one claim
   more than "this is where Connect is". */
#connect-field [data-plotmode="network"] .loc-bubble .lb-dot { background: var(--cream-surface); border-color: var(--cream-accent); }
#connect-field [data-plotmode="network"] .loc-bubble .lb-n { color: var(--cream-ink); }
#connect-field [data-plotmode="network"] .loc-bubble .lb-name { font-weight: 700; color: var(--cream-ink); }

/* OPPORTUNITY — there is no verified demand source, so the fill says nothing and
   is not allowed to look like it does. Hollow, with the dashed edge this page
   uses everywhere for "we cannot tell you", so it reads the same as a locality
   whose capacity nobody has set. --gap-wash was wrong here: it resolves to the
   DARK console value (#262836) and this mark sits on the cream board, which
   painted every Opportunity bubble near-black. */
#connect-field [data-plotmode="opportunity"] .loc-bubble .lb-dot { background: var(--cream-surface); border-style: dashed; border-color: var(--unknown-deep); }
#connect-field [data-plotmode="opportunity"] .loc-bubble .lb-n { color: var(--cream-ink); }

/* ---------- the permanent rail ---------- */
#connect-field .plot-rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 620px; overflow-y: auto; }
#connect-field .rail-title { margin: 0; font-family: var(--font-mono); font-size: .62rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#connect-field .rail-body { display: flex; flex-direction: column; gap: 6px; }
#connect-field .rail-list { display: flex; flex-direction: column; gap: 4px; }
/* The locality table's row header IS the control: clicking the name lifts that
   locality into the shared filter. It carries no chrome on purpose -- the name is
   the target -- which is exactly the shape Bootstrap turns invisible, so its ink
   is declared here rather than inherited and hoped for. */
#connect-field .loc-name { display: inline; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
#connect-field .loc-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#connect-field .loc-name[aria-pressed="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#connect-field .loc-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#connect-field .is-not-mapped .loc-name { color: var(--muted); font-weight: 400; font-style: italic; }

#connect-field .rail-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--edge); border-left-width: 3px; background: var(--panel-2);
  color: inherit; font-family: inherit; padding: 7px 9px;
  transition: border-color .12s var(--ease), background-color .12s var(--ease);
}
#connect-field .rail-row:hover, #connect-field .rail-row.is-cued { border-color: var(--edge-lit); border-left-color: var(--accent); background: var(--panel-lit); }
#connect-field .rail-row[aria-pressed="true"] { border-left-color: var(--accent); background: var(--panel-lit); }
#connect-field .rr-top { display: flex; align-items: baseline; gap: .45rem; }
#connect-field .rr-rank { font-family: var(--font-mono); font-size: .64rem; color: var(--faint); min-width: .9rem; }
#connect-field .rr-name { font-weight: 700; font-size: .85rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#connect-field .rr-count { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
#connect-field .rr-stat { display: block; margin-top: 2px; padding-left: 1.35rem; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); line-height: 1.5; }

/* The composition channel #258 moved OFF the marker and into the rail, where
   there is room for the words beside it. */
#connect-field .band-bar { display: none; height: 3px; margin-top: 6px; gap: 1px; background: var(--edge); }
#connect-field [data-plotmode="pressure"] .band-bar { display: flex; }
#connect-field .band-bar-signal { display: flex; height: 4px; margin-top: 6px; }
#connect-field .band-bar i { display: block; height: 100%; min-width: 2px; }
#connect-field .band-critical { background: var(--critical); }
#connect-field .band-thin { background: var(--thin); }
#connect-field .band-watch { background: var(--watch); }
#connect-field .band-healthy { background: var(--healthy); opacity: .78; }
#connect-field .band-unknown { background: var(--unknown); background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(18,20,17,.28) 2px 4px); }
#connect-field .rail-foot { margin: 0; font-size: .7rem; line-height: 1.55; color: var(--muted); }

/* ---------- the rail's locality detail ---------- */
#connect-field .rail-detail-head { border-bottom: 1px solid var(--edge); padding-bottom: 6px; }
#connect-field .rd-name { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
#connect-field .rd-scope { margin: 2px 0 0; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#connect-field .rd-pressure { margin: 6px 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink); }
#connect-field .loc-pressure { text-align: center; font-size: .8rem; color: var(--muted); }
#connect-field .rd-facts { display: grid; grid-template-columns: 1fr auto; gap: 3px .6rem; margin: 0; font-size: .74rem; }
#connect-field .rd-facts dt { color: var(--muted); }
#connect-field .rd-facts dd { margin: 0; font-family: var(--font-mono); font-weight: 700; text-align: right; color: var(--ink); }
#connect-field .rd-bands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#connect-field .rd-band { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--edge); border-left-width: 3px; padding: .16rem .4rem; font-size: .66rem; }
#connect-field .rd-band.band-critical { border-left-color: var(--critical); }
#connect-field .rd-band.band-thin { border-left-color: var(--thin); }
#connect-field .rd-band.band-watch { border-left-color: var(--watch); }
#connect-field .rd-band.band-healthy { border-left-color: var(--healthy); }
#connect-field .rd-band.band-unknown { border-left-color: var(--unknown); }
#connect-field .rd-band-label { color: var(--muted); }
#connect-field .rd-band-n { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
/* `.btn` had no rule anywhere in this stylesheet, so both rail actions were
   rendering as raw user-agent controls on a dark console: "Back" as a grey 3-D
   box in 16px black Times, and "Open the queue" — the ACT step of the whole page
   — as a bare blue link. The hierarchy was not just unstyled, it was inverted. */
#connect-field .btn {
  display: inline-block; border: 1px solid var(--edge-lit); background: var(--panel-lit);
  color: var(--ink); font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.35; padding: .5rem .85rem; cursor: pointer;
  text-align: center; text-decoration: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
#connect-field .btn:hover { border-color: var(--accent); }
#connect-field .btn-sm { padding: .34rem .6rem; font-size: .72rem; }
#connect-field .btn-quiet { background: none; border-color: transparent; color: var(--muted); font-weight: 400; }
#connect-field .btn-quiet:hover { color: var(--ink); border-color: var(--edge-lit); }

#connect-field .rail-actions { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
/* The destination is the loudest control in the rail and the first one the eye
   and the Tab key reach after the facts, because it is what this station is
   for (#258 §9). "Back" is a way out, not an action, and is styled as one. */
#connect-field .rail-drill { border-width: 2px; border-color: var(--accent); }
#connect-field .rail-drill:hover { background: var(--panel); border-color: var(--accent-deep); text-decoration: none; }
#connect-field .rail-back { align-self: flex-start; }

/* Compact Colophon Disclosure */
#connect-field .colophon-disclosure { border: 1px solid var(--edge); background: var(--panel-2); padding: 12px 18px; border-radius: 4px; }
#connect-field .colophon-summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 700; color: var(--ink); outline: none; }
#connect-field .colophon-summary:hover { color: var(--accent); }
#connect-field .colophon-toggle-hint { font-size: 0.72rem; color: var(--muted); font-weight: 400; font-family: var(--font-mono); }
#connect-field .colophon-disclosure[open] .colophon-cols { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--edge); }

/* ---------- group card (shared label anatomy) ---------- */
#connect-field .groupcard {
  position: fixed; z-index: 60; width: min(23rem, calc(100vw - 2rem));
  background: var(--panel-2); border: 1px solid var(--ink); color: var(--ink);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  padding: 14px 15px;
}
#connect-field .groupcard[hidden] { display: none; }

/* ---------- the scrub keycap (#369) ----------
   The pointer-input twin of the group card: one element, three lines, always above
   the finger. Never the only path to a group -- the strip's arrow-key walk and the
   pressure table both reach every group with no pointer at all, and this is
   aria-hidden precisely so a screen reader stays on those. */
#connect-field .keycap {
  position: fixed; z-index: 996; top: 0; left: 0;
  display: flex; flex-direction: column;
  width: max-content; max-width: min(17rem, calc(100vw - 24px));
  padding: .5rem .7rem;
  background: var(--panel-2); border: 1px solid var(--ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  pointer-events: none; opacity: 0;
  transition: opacity .15s var(--ease);
}
#connect-field .keycap[hidden] { display: none; }
#connect-field .keycap[data-keycap-on="true"] { opacity: 1; }
#connect-field .keycap[data-cancel="true"] { opacity: .55; border-color: var(--edge-strong); }
#connect-field .keycap-state { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#connect-field .keycap[data-cancel="true"] .keycap-state { color: var(--muted); }
#connect-field .keycap-name { margin-top: 2px; font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#connect-field .keycap-pos { margin-top: 3px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .02em; color: var(--muted); }

/* The aimed tick (#369 amendment 1). Needed only on the strip: the dot plot reuses
   .dot.is-hover, which bindDots already sets for a mouse. Height is the one
   dimension a 1.3px tick has to spare, so the aim is full height rather than a
   thicker outline. Placed here rather than beside the other .tick rules so it wins
   on source order over .is-dim and the five .h-* rules at equal specificity. */
#connect-field .fieldstrip .tick.is-aim { opacity: 1; --s: 1; outline: 1px solid var(--ink); outline-offset: 1px; }

/* The scrub's invitation. Rendered at every width, shown only where a finger is
   the input; display:none also keeps the sentence out of the accessibility tree
   on desktop, where it would not be true. */
#connect-field .scrub-hint { display: none; }
#connect-field .gc-close { position: absolute; top: 8px; right: 9px; border: none; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
#connect-field .gc-close:hover { color: var(--critical-text); }
#connect-field .gc-name { font-weight: 700; font-size: 1.02rem; padding-right: 1.6rem; }
#connect-field .gc-meta { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: 3px; letter-spacing: .02em; }
#connect-field .gc-states { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0 0; font-size: .74rem; }
#connect-field .gc-states dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
/* The Overall row is chip + sentence on one line; the four component rows are chip +
   short fact. Both wrap rather than clip, because a reason is a sentence and a card is
   narrow. `dd` is bold by default (L1374); the fact is the quiet half of the pair, so it
   resets weight and takes muted ink. */
#connect-field .gc-states dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 0; font-weight: 700; }
#connect-field .gcs-overall { row-gap: 3px; }
#connect-field .gcs-overall .why-line { color: var(--ink); font-weight: 400; font-size: .76rem; line-height: 1.35; flex: 1 1 11rem; }
#connect-field .gcs-fact { color: var(--muted); font-weight: 400; font-size: .72rem; }

/* ADR 0018 ghost stat. Static, hollow, slate: it can never be read as the loading
   skeleton (`.ghost-bar`, connect-field.css:1406`) which is filled, lilac and shimmering, nor as a real zero
   (.state-zero, a solid numeral on a baseline rule). --unknown-text on --panel is 5.92:1,
   and on --surface-lit 5.00:1, so the glyph clears 4.5:1 wherever the card can sit. */
#connect-field .stat-ghost { display: inline-block; min-width: 1.15rem; padding: 0 .25rem; font-family: var(--font-mono); font-weight: 700; font-size: .74rem; line-height: 1.3; text-align: center; color: var(--unknown-text); border: 1px dashed var(--unavailable-rule); background: var(--unavailable-fill); cursor: help; }

/* "Operating signals": the one new word on the card. It is a label, not a heading, so it
   speaks in the telemetry grid's own mono voice, one step quieter than a `dt`. The rule
   carries the top border that used to sit on .gc-tele, so the label and its grid read as
   one block; .is-signals then stands the grid's own border and margin down. */
#connect-field .gc-tele-label { margin-top: 10px; border-top: 1px solid var(--edge); padding-top: 9px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#connect-field .gc-tele.is-signals { margin-top: 6px; border-top: 0; padding-top: 0; }
#connect-field .gc-tele { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-top: 10px; border-top: 1px solid var(--edge); padding-top: 9px; font-family: var(--font-mono); font-size: .7rem; }
#connect-field .gc-tele .k { color: var(--muted); }
#connect-field .gc-tele .v { text-align: right; font-weight: 700; }
#connect-field .gc-tele .v.unknown { color: var(--unknown-text); font-weight: 400; font-style: italic; }
#connect-field .stale-mark { color: var(--thin-text); font-size: .86em; font-weight: 400; text-shadow: 0 0 10px rgba(208,145,45,.55); white-space: nowrap; }
#connect-field .gc-why { margin-top: 9px; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--edge); padding-top: 8px; }
#connect-field .gc-why strong { color: var(--thin-text); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 2px; }
#connect-field .gc-why .why-line { color: var(--ink); }
#connect-field .gc-actions { margin-top: 11px; display: flex; gap: 8px; align-items: center; }
#connect-field .gc-note { font-size: .64rem; color: var(--faint); }

/* ---------- colophon ---------- */
#connect-field .colophon { margin-top: 3.4rem; border-top: 1px solid var(--edge-lit); padding-top: 1.8rem; }
#connect-field .colophon-title { font-size: 1.15rem; font-weight: 700; }
#connect-field .colophon-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1rem; }
#connect-field .colophon h3 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
#connect-field .colophon p { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
#connect-field .colophon p strong { color: var(--ink); }
#connect-field .state-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .8rem; color: var(--muted); }
#connect-field .state-legend strong { color: var(--ink); }
#connect-field .state-legend .occ { margin-right: .45rem; }
#connect-field .colophon-fine { font-size: .7rem; color: var(--faint); }

/* ---------- the three states: skeleton (loading) / real zero / unavailable ----------
   These must never be confusable. Skeleton is the only filled, animated, purple one.
   Unavailable is the only hollow, dashed one. A real zero carries a cream-ink numeral
   on an unbroken baseline rule and nothing else. */

/* skeleton: the animated form. .ghost-bar is a generic filled/shimmering placeholder;
   .ghost-row lays out a stack of them as a station's loading state, .ghost-num sizes
   one to stand in for a single numeral (compose as class="ghost-bar ghost-num"). */
#connect-field .ghost-bar {
  position: relative;
  background:
    linear-gradient(90deg,
      var(--ghost-fill) 0%,
      var(--ghost-shimmer) 45%,
      var(--ghost-fill) 90%) 0 0 / 220% 100% no-repeat;
  border: 1px solid var(--ghost-edge);
  animation: connect-ghost-sweep var(--ghost-shimmer-duration) linear infinite;
}
#connect-field .ghost-bar::after {
  content: "?";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: var(--ghost-glyph);
  font-family: var(--font-mono);
  font-weight: 700;
}
#connect-field .ghost-row { display: flex; flex-direction: column; gap: 6px; }
#connect-field .ghost-row .ghost-bar { height: 14px; width: 100%; }
#connect-field .ghost-row .ghost-bar:nth-child(even) {
  background:
    linear-gradient(90deg,
      var(--ghost-fill-2) 0%,
      var(--ghost-shimmer) 45%,
      var(--ghost-fill-2) 90%) 0 0 / 220% 100% no-repeat;
}
#connect-field .ghost-num { display: inline-block; width: 2.6em; height: 1.1em; vertical-align: middle; }
@keyframes connect-ghost-sweep { from { background-position: 140% 0; } to { background-position: -60% 0; } }

/* skeleton: the static alternative. Reduced motion loses the sweep, so a 45° hatch
   carries "in flight" instead -- a different angle and a different line type from
   the unavailable dash below, so the two stay separable with motion off. */
@media (prefers-reduced-motion: reduce) {
  #connect-field .ghost-bar {
    animation: none;
    background:
      repeating-linear-gradient(45deg,
        var(--ghost-fill) 0 6px,
        var(--ghost-shimmer) 6px 12px);
  }
}

/* unavailable: hollow, dashed, slate, never animated -- never mistaken for a zero bar. */
#connect-field .is-unavailable {
  background: var(--unavailable-fill);
  border: 1px dashed var(--unavailable-rule);
  color: var(--unavailable-ink);
}
/* station-unavailable: the full-station hold used when a resolver, freshness rule,
   or Guid handle does not exist yet (demand, map, retention, progression). Room for a
   reason paragraph pulled from payload.unavailable -- a refusal is never zero. */
#connect-field .station-unavailable {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  border: 1px dashed var(--unavailable-rule);
  background: var(--unavailable-fill);
  color: var(--unavailable-ink);
  padding: 2.6rem 1.6rem;
  text-align: center;
}
#connect-field .station-unavailable .unavailable-label {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--unavailable-ink);
}
#connect-field .station-unavailable .unavailable-reason {
  max-width: 52ch; margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted);
}

/* real zero: no bar, no fill -- the baseline rule remains and the numeral reads in
   --ink, never --faint or --unavailable-ink, so a zero is legible as data. */
#connect-field .state-zero { color: var(--ink); }
#connect-field .state-zero .zero-baseline { border-top: 1px solid var(--edge-strong); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  #connect-field .map-console { grid-template-columns: 1fr; }
  #connect-field .plot-rail { max-height: none; }
  /* The frame and the canvas inside it BOTH carry a min-height, so shrinking one
     alone does nothing -- the 420px below was dead for exactly that reason and a
     phone-width board still reserved 520px of map above a full-width rail. */
  #connect-field .map-frame { min-height: 520px; }
  #connect-field .map-canvas-container { min-height: 520px; }
}
@media (max-width: 1080px) {
  #connect-field .board-line { grid-template-columns: 1fr; gap: .3rem; padding: .85rem 0; }
  #connect-field .board-verb { display: none; }
  #connect-field .modes-row { grid-template-columns: 1fr; }
  #connect-field .colophon-cols { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #connect-field {
    overflow-x: clip;
    max-width: 100vw;
    /* One number, read by both the sheet and its handle, so the handle can never
       land on top of the sheet's own contents again. */
    --console-h: min(38vh, 320px);
  }

  /* The fixed bottom sheet is outside grid flow. Keep its former desktop track out of
     the layout too, or opening it reserves the console column and squeezes the board. */
  #connect-field .dashboard-layout,
  #connect-field .dashboard-layout.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* The queue row: three explicit placements, one grid, no patch. See section 6. */
  #connect-field .queue-row { grid-template-columns: 2rem 1fr auto; }
  #connect-field .queue-row .state-chip { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  #connect-field .queue-row .queue-why { grid-column: 2 / -1; grid-row: 2; }
  #connect-field .queue-row .open-connect { grid-column: 2 / -1; grid-row: 3; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- the bottom edge: one object, in two parts ----
     The handle is not a floating pill any more. It docks to the sheet's top edge
     when open and to the viewport's bottom edge when closed, so the FILTER CONSOLE
     control is never drawn over the Critical and Thin tiles inside the console. */
  #connect-field .sidebar-toggle-bar {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    z-index: 991;
    display: block; max-width: none; margin: 0; padding: 0;
    pointer-events: none;
  }
  #connect-field[data-console="open"] .sidebar-toggle-bar { bottom: var(--console-h); }
  #connect-field .toggle-btn {
    pointer-events: auto;
    display: flex; width: 100%;
    align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px;
    padding: .5rem 1rem max(.5rem, env(safe-area-inset-bottom, .5rem));
    background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--edge-strong); border-left: none; border-right: none; border-bottom: none;
    font-size: .74rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
  }
  #connect-field[data-console="open"] .toggle-btn { padding-bottom: .5rem; box-shadow: none; }
  /* The closed selector is spelled out at the same weight the desktop rule above uses.
     A media query adds no specificity, so the bare `#connect-field .toggle-btn .arrow`
     on its own would lose to it and the sheet's handle would point sideways-wrong. */
  #connect-field .toggle-btn .arrow,
  #connect-field[data-console="closed"] .toggle-btn .arrow { transform: rotate(-90deg); }
  #connect-field[data-console="open"] .toggle-btn .arrow { transform: rotate(90deg); }

  /* The sheet. Square-topped, because its top edge is now the handle. The old
     3.8rem of bottom padding reserved room for a pill that no longer floats. */
  #connect-field .filter-sidebar {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: var(--console-h);
    max-height: min(40vh, 340px);
    min-height: 200px;
    margin: 0;
    order: initial;
    z-index: 990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid var(--edge); border-bottom: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
    padding: .85rem 1rem max(1rem, env(safe-area-inset-bottom, 1rem));
    transform: translateY(0);
  }
  #connect-field .dashboard-layout.is-collapsed .filter-sidebar {
    display: none;
    transform: translateY(100%);
  }

  #connect-field .sidebar-back-btn { display: inline-flex; }

  /* Touch outside backdrop: NO BLUR, transparent so graphs are visible for real-time comparison */
  #connect-field .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 980;
    opacity: 0;
    pointer-events: none;
  }
  #connect-field .dashboard-layout:not(.is-collapsed) ~ .filter-backdrop, #connect-field .filter-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- the palette, as the console's last row ----
     A preference, in the place preferences live, shaped like every other console
     row. Desktop keeps the sticky pill exactly as it is; none of this reaches it. */
  #connect-field .palette-slot { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--edge); }
  #connect-field .theme-swatch {
    position: static;
    margin: 0; padding: 0;
    display: flex; width: 100%; justify-content: flex-start; gap: .25rem;
    background: transparent;
    border: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
  }
  #connect-field .theme-swatch__btn { min-width: 44px; min-height: 44px; justify-content: center; }

  /* ---- the group card, as a sheet in the same slot ----
     It used to open at the touch point, which put the answer on top of the strip
     that raised the question. */
  #connect-field .groupcard {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 992;
    border: 1px solid var(--edge-strong); border-bottom: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
    padding: 14px 15px max(1rem, env(safe-area-inset-bottom, 1rem));
  }
  #connect-field .gc-close { top: 4px; right: 4px; min-width: 44px; min-height: 44px; font-size: 1.25rem; }

  /* ---- drag to aim, release to commit ----
     Scoped to the two plots and nowhere else. A parent with touch-action: none
     takes vertical page scroll away from everything inside it. */
  #connect-field .fieldstrip { touch-action: none; user-select: none; -webkit-user-select: none; }
  #connect-field .pressure-plot { touch-action: none; user-select: none; -webkit-user-select: none; }
  /* Classic clones the plot as a picture and never binds a scrub to it, so the
     clone keeps its own scrolling. */
  #connect-field .classic-plot-aid { touch-action: auto; }
  #connect-field .scrub-hint { display: block; margin-top: .35rem; font-size: .72rem; color: var(--muted); }

  /* ---- 44px floor, every console control ---- */
  #connect-field .reset-btn { min-height: 44px; padding: 0 .5rem; }
  #connect-field .acronym-btn { min-height: 44px; }
  #connect-field .opt-btn { min-height: 44px; justify-content: center; }
  #connect-field .mini-btn { min-height: 44px; }
  #connect-field .field-select { min-height: 44px; }
  #connect-field .why-trigger-disc { min-width: 44px; min-height: 44px; }
}
@media (max-width: 720px) {
  #connect-field .masthead__top { align-items: flex-start; }
  #connect-field .masthead__aside { align-items: flex-start; text-align: left; width: 100%; margin-left: 0; }
  #connect-field .masthead__tools { justify-content: flex-start; }
  #connect-field .masthead__tools .copy-prompt, #connect-field .masthead__tools .package-control { align-items: flex-start; text-align: left; }
  #connect-field .masthead__tools .ai-guidelines-tip, #connect-field .masthead__tools .how-to-tip { max-width: none; text-align: left; }
  #connect-field .masthead__tools .copy-prompt-popover { left: 0; right: auto; }
  #connect-field .masthead__stamps { width: 100%; }
  #connect-field .queue-row { grid-template-columns: 2rem 1fr auto; }
  #connect-field .queue-row .state-chip { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  #connect-field .queue-row .queue-why { grid-column: 2 / -1; grid-row: 2; }
  #connect-field .queue-row .open-connect { grid-column: 2 / -1; grid-row: 3; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
  #connect-field .map-frame { min-height: 420px; }
  #connect-field .map-canvas-container { min-height: 420px; }
  #connect-field .canopy { flex-wrap: wrap; }
  #connect-field .canopy-band { min-height: 130px; flex: 1 1 40%; }
  #connect-field .scopebar-reset { margin-left: 0; }
}
@media (max-width: 48rem) {
  #connect-field .gc-states { grid-template-columns: 1fr; gap: 2px 0; }
  #connect-field .gc-states dt { margin-top: 6px; }
  #connect-field .gc-states dd { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #connect-field *, #connect-field *::before, #connect-field *::after { transition: none !important; animation: none !important; }
}

/* ---------- boot failure ----------
   The island could not start. Rendered without the model, because the model is what
   failed. Deliberately wears the same hollow dashed unavailable treatment as every other
   "we cannot tell you" state, so it reads as a state the dashboard knows how to be in
   rather than as a broken page. */
#connect-field .boot-failure {
  max-width: 46rem;
  margin: 3rem auto;
  padding: 1.75rem 2rem;
  border-radius: 10px;
}
#connect-field .boot-failure h2 {
  margin: 0 0 .75rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--unavailable-ink);
}
#connect-field .boot-failure p {
  margin: 0 0 .75rem 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--unavailable-ink);
}
#connect-field .boot-failure-detail {
  display: block;
  padding: .7rem .85rem;
  border: 1px dashed var(--unavailable-rule);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--unavailable-ink);
  overflow-wrap: anywhere;
}

/* ---------- Creative mode tables (#274) ---------- */
#connect-field .tablewrap, #connect-field .locality-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  margin-top: .8rem;
}
#connect-field .field-table {
  width: 100%;
  border-spacing: 0;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink);
  font-family: var(--font-body);
}
#connect-field .field-table caption {
  caption-side: top;
  text-align: left;
  padding: .4rem 0 .75rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 400;
  max-width: 76ch;
}
#connect-field .field-table th, #connect-field .field-table td {
  padding: .45rem .75rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
#connect-field .field-table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  border-bottom: 1px solid var(--edge-strong);
  vertical-align: bottom;
  white-space: normal;
  line-height: 1.3;
}
#connect-field .field-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  min-width: 8rem;
  white-space: normal;
}
#connect-field .field-table th.num, #connect-field .field-table td.num {
  text-align: right;
}
#connect-field #pressure-table thead th:nth-child(3), #connect-field #pressure-table thead th:nth-child(4), #connect-field #pressure-table thead th:nth-child(5), #connect-field #pressure-table thead th:nth-child(6), #connect-field #pressure-table thead th:nth-child(7) {
  text-align: right;
}
#connect-field .locality-table tbody tr:hover > th, #connect-field .locality-table tbody tr:hover > td, #connect-field #pressure-table tbody tr:hover > th, #connect-field #pressure-table tbody tr:hover > td {
  background-color: var(--panel-lit);
}
#connect-field .field-table tr.is-not-mapped th, #connect-field .field-table tr.is-not-mapped td {
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,136,123,.07) 5px 6px);
  color: var(--muted);
}
#connect-field .locality-table tbody tr.is-not-mapped:hover > th, #connect-field .locality-table tbody tr.is-not-mapped:hover > td {
  background-color: var(--panel-lit);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,136,123,.07) 5px 6px);
}
#connect-field .logging-table td:last-child {
  min-width: 7rem;
  vertical-align: middle;
}
#connect-field .logbar {
  display: flex;
  height: .55rem;
  width: 100%;
  min-width: 6rem;
  background: var(--panel-2);
  gap: 1px;
}
#connect-field .logseg {
  display: block;
  height: 100%;
  flex-shrink: 0;
}
#connect-field #pressure-table {
  margin-top: 1.2rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}
#connect-field #pressure-table > summary {
  padding: .65rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
#connect-field #pressure-table > summary::-webkit-details-marker {
  display: none;
}
#connect-field #pressure-table > summary:hover {
  color: var(--ink);
}
#connect-field #pressure-table > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#connect-field #pressure-table[open] > summary {
  border-bottom: 1px solid var(--edge);
}
#connect-field #pressure-table .tablewrap {
  margin-top: 0;
  max-height: 28rem;
  overflow-y: auto;
}
#connect-field #pressure-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}
#connect-field .field-table .why-cell {
  white-space: normal;
  min-width: 14rem;
  max-width: 28rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
}
#connect-field .field-table .group-ref-link {
  color: var(--ink);
  font-weight: 700;
}
#connect-field .field-table .group-ref-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#connect-field .unavailable-mark {
  display: inline-block;
  padding: .1rem .35rem;
  font-size: .72rem;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLASSIC MODE (#214 / #219)

   Classic is a second composition under this same theme -- not a second theme.
   Everything below sits on the console's own tokens; only the anatomy is
   shared with the other islands.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The --classic-* map, per docs/design/classic-grammar.md §13 (Connect column).
   Set unconditionally rather than under [data-mode="classic"], because the mode
   switch and the Creative export rails use these tokens in both modes.
   --classic-wash-critical is this island's one addition to the map: Connect has
   a fifth state the shared set does not name, and the health-band table would
   otherwise have to leave Critical unwashed. */
#connect-field {
  --classic-surface: var(--panel);
  --classic-surface-2: var(--panel-2);
  --classic-ink: var(--ink);
  --classic-muted: var(--muted);
  --classic-rule: var(--edge);
  --classic-accent: var(--connect-300);
  --classic-focus: var(--focus);
  --classic-wash-healthy: color-mix(in srgb, var(--healthy) 18%, transparent);
  --classic-wash-watch: color-mix(in srgb, var(--watch) 16%, transparent);
  --classic-wash-thin: color-mix(in srgb, var(--thin) 18%, transparent);
  --classic-wash-critical: color-mix(in srgb, var(--critical) 18%, transparent);
  --classic-wash-neutral: var(--panel-lit);
  --classic-wash-unknown: color-mix(in srgb, var(--unknown) 18%, transparent);
  --classic-bar: var(--connect-300);
  --classic-heading-font: var(--font-display);
  --classic-body-font: var(--font-body);
  --classic-shadow: 0 12px 34px rgba(0,0,0,.5);
}

/* ───────────────────────────────────────────────────────────────────────────
   MERGED BLOCK — apps/shared/classic-base.css, every selector prefixed with
   #connect-field (docs/design/classic-grammar.md §19 step 2).
   Synced 2026-09-02. DO NOT hand-edit inside this block: refresh it by
   re-running the shared file through tools/scope_island_css.py and diffing.
   One deliberate narrowing: the shared (i) disclosure rules are prefixed with
   `.classic-mount` instead of the bare island scope, because this island's
   masthead and station heads already carry their own .info-disc voice and the
   Creative composition must not move.
   The block is contiguous and ends at "END MERGED BLOCK".
   ─────────────────────────────────────────────────────────────────────────── */
/* ==========================================================================
   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 three themes, so there is nothing left to fall
   back to and an unmapped token must fail visibly instead of quietly.
   ========================================================================== */

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

/* ---------- widget (cw) ---------- */
#connect-field .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); }
#connect-field .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); }
#connect-field .cw__lead { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
#connect-field .cw__titlerow { display: flex; align-items: center; gap: .3rem; min-width: 0; }
#connect-field .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; }
#connect-field .cw__question { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--classic-muted); }
#connect-field .cw__info { margin-left: .1rem; }
#connect-field .cw__tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: none; }
#connect-field .cw__rail { display: flex; align-items: center; }
#connect-field .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; }
#connect-field .cw__expand::after { content: ""; position: absolute; inset: -.4rem; }
#connect-field .cw__expand svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#connect-field .cw__expand:hover { color: var(--classic-ink); border-color: var(--classic-ink); }
#connect-field .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. */
#connect-field .cw__body { position: relative; padding: 0 .9rem .8rem; overflow: auto; max-height: 28rem; min-width: 0; }
#connect-field .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. */
#connect-field .cw__body:has(.kpi-strip):not(:has(.ct)) { overflow: visible; max-height: none; }
#connect-field .cw__aid { display: flex; align-items: flex-start; justify-content: center; padding: .5rem 0; min-width: 0; }
#connect-field .cw__aid svg { display: block; max-width: 100%; height: auto; }
#connect-field .cw__aid:empty { display: none; }
#connect-field .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); }
#connect-field .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) {
  #connect-field .cw--has-aid:not(.cw--half) .cw__body, #connect-field .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; }
  #connect-field .cw--has-aid:not(.cw--half) .cw__aid, #connect-field .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) ---------- */
#connect-field .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); }
#connect-field .cw__unavail-label { font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--classic-muted); }
#connect-field .cw__unavail-reason { margin: 0; font-size: .84rem; line-height: 1.5; max-width: 52ch; }

/* ---------- classic table (ct) ---------- */
#connect-field .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); }
#connect-field .ct caption { caption-side: bottom; text-align: left; padding: .5rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--classic-muted); }
#connect-field .ct th, #connect-field .ct td { padding: .42rem .55rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--classic-rule); white-space: nowrap; }
#connect-field .ct th:first-child, #connect-field .ct td:first-child { padding-left: 0; white-space: normal; }
#connect-field .ct th:last-child, #connect-field .ct td:last-child { padding-right: 0; }
#connect-field .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; }
#connect-field .ct tbody th { font-weight: 600; }
/* Row headers stay put while a wide pivot scrolls sideways inside .cw__body. */
#connect-field .ct thead th:first-child, #connect-field .ct tbody th[scope="row"] { position: sticky; left: 0; background-color: var(--classic-surface); }
#connect-field .ct thead th:first-child { z-index: 2; }
#connect-field .ct tbody tr:hover > th, #connect-field .ct tbody tr:hover > td { background-color: var(--classic-surface-2); }
#connect-field .ct__num { font-family: var(--classic-num-font, Arial, sans-serif); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
#connect-field .ct td.ct__num, #connect-field .ct th.ct__num { text-align: right; }
#connect-field .ct__share { color: var(--classic-muted); }
#connect-field .ct__unavail { color: var(--classic-muted); }
#connect-field .ct__group > th { padding-top: .95rem; font-size: .74rem; font-weight: 700; color: var(--classic-muted); border-bottom: 1px solid var(--classic-ink); }
#connect-field .ct tbody:first-of-type .ct__group > th { padding-top: .5rem; }
#connect-field .ct tbody tr.ct__group:hover > th { background: transparent; }
#connect-field .ct__total > th, #connect-field .ct__total > td { border-top: 2px solid var(--classic-ink); border-bottom: 0; font-weight: 700; }
#connect-field .ct__total .ct__share { color: var(--classic-ink); }
#connect-field .ct__bar { width: 7.5rem; min-width: 5rem; vertical-align: middle; }
#connect-field .ct__bar-track { display: block; height: .55rem; width: 100%; background: var(--classic-surface-2); }
#connect-field .ct__bar-fill { display: block; height: 100%; max-width: 100%; background: var(--classic-bar); }
#connect-field .ct__spark { width: 8.5rem; vertical-align: middle; }
#connect-field .ct__spark svg { display: block; overflow: visible; }
#connect-field .spark__base { stroke: var(--classic-rule); stroke-width: 1; }
#connect-field .spark__line { fill: none; stroke: var(--classic-bar); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
#connect-field .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. */
#connect-field .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; }
#connect-field .ct__sort::after { content: ""; position: absolute; inset: -.5rem 0; }
#connect-field .ct__sort svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
#connect-field .ct__sort:hover { color: var(--classic-ink); }
#connect-field .ct th[aria-sort="ascending"] .ct__sort svg, #connect-field .ct th[aria-sort="descending"] .ct__sort svg { opacity: 1; }
#connect-field .ct th[aria-sort="ascending"] .ct__sort-down, #connect-field .ct th[aria-sort="descending"] .ct__sort-up { display: none; }
#connect-field .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 ---------- */
#connect-field .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) { #connect-field .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
@media (max-width: 47.98rem) { #connect-field .kpi-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
#connect-field .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); }
#connect-field .kpi-tile[data-state="healthy"] { background-image: linear-gradient(var(--classic-wash-healthy), var(--classic-wash-healthy)); }
#connect-field .kpi-tile[data-state="watch"] { background-image: linear-gradient(var(--classic-wash-watch), var(--classic-wash-watch)); }
#connect-field .kpi-tile[data-state="thin"] { background-image: linear-gradient(var(--classic-wash-thin), var(--classic-wash-thin)); }
#connect-field .kpi-tile[data-state="neutral"] { background-image: linear-gradient(var(--classic-wash-neutral), var(--classic-wash-neutral)); }
#connect-field .kpi-tile[data-state="unknown"] { background-image: linear-gradient(var(--classic-wash-unknown), var(--classic-wash-unknown)); }
#connect-field .kpi-tile__top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-width: 0; }
#connect-field .kpi-tile__label { font-size: .74rem; line-height: 1.3; color: var(--classic-muted); overflow-wrap: anywhere; }
#connect-field .kpi-tile__reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
#connect-field .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); }
#connect-field .kpi-tile__value.is-unavail { font-weight: 400; color: var(--classic-muted); }
#connect-field .kpi-tile__unit { font-size: .78rem; color: var(--classic-muted); }
#connect-field .kpi-tile__delta { font-size: .74rem; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--classic-muted); }
#connect-field .kpi-tile__delta:empty { display: none; }

/* ---------- mode switch (contract §3 markup) ---------- */
#connect-field .mode-switch { display: inline-flex; width: 100%; gap: 2px; padding: 2px; border: 1px solid var(--classic-rule); background: var(--classic-surface-2); }
#connect-field .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; }
#connect-field .mode-switch__btn:hover { color: var(--classic-ink); }
#connect-field .mode-switch__btn[aria-pressed="true"] { background: var(--classic-ink); color: var(--classic-surface); cursor: default; }

/* ---------- (i) disclosure ---------- */
#connect-field .classic-mount .info-disc { display: inline-block; position: relative; vertical-align: middle; flex: none; }
#connect-field .classic-mount .info-disc > summary { position: relative; list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; }
#connect-field .classic-mount .info-disc > summary::-webkit-details-marker { display: none; }
#connect-field .classic-mount .info-disc > summary::after { content: ""; position: absolute; inset: -.5rem; }
#connect-field .classic-mount .info-disc > summary svg { width: 15px; height: 15px; display: block; }
#connect-field .classic-mount .info-disc > summary svg circle, #connect-field .classic-mount .info-disc > summary svg line { fill: none; stroke: var(--classic-muted); stroke-width: 1.4; }
#connect-field .classic-mount .info-disc > summary svg .dotcap { fill: var(--classic-muted); stroke: none; }
#connect-field .classic-mount .info-disc > summary:hover svg circle, #connect-field .classic-mount .info-disc > summary:hover svg line { stroke: var(--classic-ink); }
#connect-field .classic-mount .info-disc > summary:hover svg .dotcap { fill: var(--classic-ink); }
#connect-field .classic-mount .info-disc[open] > summary svg circle, #connect-field .info-disc[open] > summary svg line { stroke: var(--classic-accent); }
#connect-field .classic-mount .info-disc[open] > summary svg .dotcap { fill: var(--classic-accent); }
#connect-field .classic-mount .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; }
#connect-field .classic-mount .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. */
#connect-field .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. */
#connect-field .dashboard-tip { opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; }
#connect-field .dashboard-tip[data-open="true"] { opacity: 1; visibility: visible; }
#connect-field .dashboard-tip__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
#connect-field .dashboard-tip__swatch { flex: none; width: .6rem; height: .6rem; background: currentColor; }
#connect-field .dashboard-tip__label { font-weight: 700; color: var(--classic-muted); }
#connect-field .dashboard-tip__value { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
#connect-field .dashboard-tip__compare { margin: .1rem 0 0; color: var(--classic-muted); }
#connect-field .dashboard-tip__unit { margin-left: .3rem; color: var(--classic-muted); }
#connect-field .spark__hit { fill: transparent; cursor: pointer; }

/* ---------- export rail (mounted by dashboard-export.mjs) ---------- */
#connect-field .xrail { display: inline-flex; align-items: center; gap: .3rem; }
#connect-field .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; }
#connect-field .xrail__btn::after { content: ""; position: absolute; inset: -.4rem 0; }
#connect-field .xrail__btn svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
#connect-field .xrail__icon { display: inline-flex; align-items: center; }
#connect-field .xrail__label { display: inline-block; }
#connect-field .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; }
#connect-field .xrail__btn:hover { border-color: var(--classic-ink); background: var(--classic-surface-2); }
#connect-field .xrail__btn:active { background: var(--classic-rule); }
#connect-field .xrail__btn.is-busy { cursor: progress; opacity: .65; }
#connect-field .xrail__btn.is-copied, #connect-field .xrail__btn.is-done { border-color: var(--classic-accent); color: var(--classic-accent); background: transparent; }
#connect-field .xrail__btn--package { min-height: 2.25rem; padding: 0 .85rem; border-radius: 6px; font-size: .78rem; }
#connect-field .package-control { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
#connect-field .how-to-tip { margin: 0; font-size: .7rem; line-height: 1.35; color: var(--classic-muted); }
#connect-field .how-to-tip a, #connect-field .how-to-tip__link { position: relative; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
#connect-field .how-to-tip a::after, #connect-field .how-to-tip__link::after { content: ""; position: absolute; inset: -.6rem -.2rem; }
/* Honest disabled form: dashed, muted, no hover, still readable, title says why. */
#connect-field .tool__off, #connect-field .xrail__btn:disabled, #connect-field .xrail__btn[aria-disabled="true"] { border-style: dashed; border-color: var(--classic-rule); color: var(--classic-muted); background: transparent; cursor: not-allowed; opacity: 1; }
#connect-field .tool__off:hover, #connect-field .xrail__btn:disabled:hover, #connect-field .xrail__btn[aria-disabled="true"]:hover { border-color: var(--classic-rule); background: transparent; color: var(--classic-muted); }

/* ---------- copy prompt (mounted by dashboard-prompt.mjs) ---------- */
#connect-field .copy-prompt { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
#connect-field .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; }
#connect-field .copy-prompt-btn svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
#connect-field .copy-prompt-btn svg.copy-prompt-btn__caret { width: 11px; height: 11px; stroke-width: 2; opacity: .7; margin-left: .1rem; }
#connect-field .copy-prompt-btn:hover, #connect-field .copy-prompt-btn[aria-expanded="true"] { background: var(--classic-ink); color: var(--classic-surface); }
#connect-field .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. */
#connect-field .copy-prompt-tip, #connect-field .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. */
#connect-field .copy-prompt-tip a, #connect-field .ai-guidelines-tip__link { position: relative; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
#connect-field .copy-prompt-tip a::after, #connect-field .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. */
#connect-field .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. */
#connect-field .copy-prompt-pop, #connect-field .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); }
#connect-field .copy-prompt--end .copy-prompt-pop, #connect-field .copy-prompt--end .copy-prompt-popover { left: auto; right: 0; }
#connect-field .copy-prompt-pop[hidden], #connect-field .copy-prompt-popover[hidden] { display: none; }
@media (max-width: 47.98rem) {
  #connect-field .copy-prompt-pop, #connect-field .copy-prompt-popover, #connect-field .copy-prompt--end .copy-prompt-pop, #connect-field .copy-prompt--end .copy-prompt-popover { left: 0; right: auto; min-width: 0; width: min(24rem, calc(100vw - 2rem)); }
}
#connect-field .copy-prompt-opt, #connect-field .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; }
#connect-field .copy-prompt-opt svg, #connect-field .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; }
#connect-field .copy-prompt-opt:hover, #connect-field .copy-prompt-option:hover { background: var(--classic-surface-2); border-color: var(--classic-rule); }
#connect-field .copy-prompt-option__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
#connect-field .copy-prompt-opt__title, #connect-field .copy-prompt-option__label { font-size: .82rem; font-weight: 700; line-height: 1.3; }
#connect-field .copy-prompt-opt__desc, #connect-field .copy-prompt-option__hint { font-size: .74rem; line-height: 1.35; color: var(--classic-muted); white-space: normal; }
#connect-field .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; }
#connect-field .copy-prompt-error:empty { display: none; }

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

/* ---------- motion: state communication only ---------- */
#connect-field .cw, #connect-field .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. */
#connect-field .cw:is(.is-mode-switching *), #connect-field .kpi-strip:is(.is-mode-switching *) { opacity: 0; transform: translateY(4px); }
#connect-field .xrail__btn, #connect-field .cw__expand, #connect-field .mode-switch__btn, #connect-field .copy-prompt-btn, #connect-field .copy-prompt-opt, #connect-field .copy-prompt-option { transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  #connect-field .cw, #connect-field .kpi-strip, #connect-field .xrail__btn, #connect-field .cw__expand, #connect-field .mode-switch__btn, #connect-field .copy-prompt-btn, #connect-field .copy-prompt-opt, #connect-field .copy-prompt-option { transition: none; }
  #connect-field .cw:is(.is-mode-switching *), #connect-field .kpi-strip:is(.is-mode-switching *) { opacity: 1; transform: none; }
}

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


/* ─────────────────────────────────────────── END MERGED BLOCK ───────────── */

/* ---------- tooltip layer & trigger affordances (#275) ---------- */
/* Overrides and extensions over classic-base.css's #connect-field .dashboard-tip: a wider
   measure for bulleted prose, and a slide to go with the fade. The closed state itself is no
   longer carried here -- it moved into the shared contract, which is why this island was for
   a while the only one whose bubble ever went away. The opacity/visibility pair below is kept
   only because this rule restates the whole transition to add `transform` to it. */
#connect-field .dashboard-tip {
  max-width: 22rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-.2rem);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
#connect-field .dashboard-tip[data-open="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
}
#connect-field .dashboard-tip__value { color: var(--ink); }
#connect-field .dashboard-tip__bullets { margin: .2rem 0 0; padding-left: 1.1rem; list-style-type: disc; }
#connect-field .dashboard-tip__bullets li { margin: .18rem 0; font-size: .78rem; line-height: 1.4; }
#connect-field .dashboard-tip__bullets li strong { color: var(--connect-200); font-weight: 600; }

#connect-field .unavailable-trigger {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem;
  border: 1px dashed var(--edge-lit); background: var(--panel); color: var(--muted);
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; cursor: pointer;
  margin-top: .3rem;
}
#connect-field .unavailable-trigger:hover, #connect-field .unavailable-trigger:focus-visible {
  border-color: var(--connect-300); color: var(--ink); background: var(--panel-lit);
  outline: 2px solid var(--focus); outline-offset: 1px;
}

#connect-field .foot-info-trigger {
  display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem;
  border: 1px solid var(--edge-lit); background: var(--panel); color: var(--ink);
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; cursor: pointer;
  vertical-align: middle;
}
#connect-field .foot-info-trigger:hover, #connect-field .foot-info-trigger:focus-visible {
  border-color: var(--connect-300); background: var(--panel-lit); color: var(--connect-200);
  outline: 2px solid var(--focus); outline-offset: 1px;
}

#connect-field .rail-foot-trigger {
  display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem;
  border: 1px solid var(--edge-lit); background: var(--panel); color: var(--ink);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600; cursor: pointer;
  text-align: left;
}
#connect-field .rail-foot-trigger:hover, #connect-field .rail-foot-trigger:focus-visible {
  border-color: var(--connect-300); background: var(--panel-lit); color: var(--connect-200);
  outline: 2px solid var(--focus); outline-offset: 1px;
}

#connect-field .queue-notes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
#connect-field .queue-note-trigger {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem;
  border: 1px solid var(--edge-lit); background: var(--panel-2); color: var(--ink);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600; cursor: pointer;
}
#connect-field .queue-note-trigger:hover, #connect-field .queue-note-trigger:focus-visible {
  border-color: var(--connect-300); background: var(--panel-lit); color: var(--connect-200);
  outline: 2px solid var(--focus); outline-offset: 1px;
}

#connect-field .mode-stat-trigger {
  display: inline; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; text-align: left; text-decoration: underline dotted var(--edge-lit);
  text-underline-offset: 2px;
}
#connect-field .mode-stat-trigger:hover, #connect-field .mode-stat-trigger:focus-visible {
  color: var(--connect-200); background: transparent; text-decoration-color: var(--connect-300);
  outline: 2px solid var(--focus); outline-offset: 1px;
}

/* ---------- Classic mode: island chrome ---------- */

/* §19 step 2 prefixes every shared selector with the island scope, which turns
   the shared `.is-mode-switching .cw` into a descendant rule -- and this island
   carries that class on the island root itself, so the prefixed rule can never
   match. The compound form is restated here rather than edited inside the
   merged block, so a later refresh of that block still diffs clean. */
#connect-field.is-mode-switching .cw, #connect-field.is-mode-switching .kpi-strip { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  #connect-field.is-mode-switching .cw, #connect-field.is-mode-switching .kpi-strip { opacity: 1; transform: none; }
}

/* One composition at a time, and the other is only hidden -- never destroyed --
   so switching back is instant and identical. The colophon is reference prose
   and is true in both modes, so it stays. */
#connect-field .classic-mount { display: none; }
#connect-field[data-mode="classic"] .classic-mount { display: block; }
#connect-field[data-mode="classic"] .main-column > .station { display: none; }

/* Six readings, so three columns land on exactly two rows and the hairline grid
   never shows an empty cell. auto-fit would leave two holes at this width. */
#connect-field .cw .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
  #connect-field .cw .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* An aid that cannot sit beside its table sits under it, in its own band below
   the body's scroll cap, so it is reachable without scrolling the whole table.
   The band scrolls sideways on its own: the plot keeps the 700px it needs to be
   read, and a narrow screen scrolls the aid rather than the page. */
#connect-field .cw__aid--below { padding: .7rem .9rem .9rem; border-top: 1px solid var(--classic-rule); justify-content: flex-start; overflow-x: auto; }
#connect-field .cw__aid--below svg { width: 100%; }

/* The tables sit flush in the scrolling body. The body's inset moves onto the
   cells, so the sticky head meets the head rule with nothing showing through
   above it, and the sticky row header covers the whole left edge instead of
   leaving a padding strip for cells to scroll under. */
#connect-field .cw__body--table { padding: 0 0 .75rem; }
#connect-field .cw__body--table .ct th:first-child, #connect-field .cw__body--table .ct td:first-child { padding-left: .9rem; }
#connect-field .cw__body--table .ct th:last-child, #connect-field .cw__body--table .ct td:last-child { padding-right: .9rem; }
#connect-field .cw__body--table .ct caption { padding: .5rem .9rem 0; }
#connect-field .cw__empty { margin: 0; padding: .85rem .9rem .15rem; font-size: .84rem; line-height: 1.45; color: var(--classic-ink); }

/* A row header keeps enough width to hold a group name on two lines, so a wide
   table squeezes its numeric columns rather than stacking its labels four deep. */
#connect-field .ct tbody th[scope="row"] { min-width: 8rem; }
/* The shared row-header weight (600) outranks the total row's 700 by specificity. */
#connect-field .ct tbody .ct__total > th { font-weight: 700; }
/* Row hover uses the console's own hovered-panel token: the shared surface-2
   vanishes under the state washes this island paints behind whole rows. */
#connect-field .ct tbody tr:hover > th, #connect-field .ct tbody tr:hover > td { background-color: var(--panel-lit); }

/* The queue's row header is its second column (the first is the queue
   position, a number), so both stay put: the position at the left edge, the
   group name beside it, in the head and in every row. */
#connect-field .ct[data-section="connect-queue"] thead th:first-child, #connect-field .ct[data-section="connect-queue"] tbody td:first-child { width: 4.6rem; min-width: 4.6rem; }
#connect-field .ct[data-section="connect-queue"] tbody td:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--classic-surface); }
#connect-field .ct[data-section="connect-queue"] tbody tr:hover > td:first-child { background-color: var(--panel-lit); }
#connect-field .ct[data-section="connect-queue"] thead th:nth-child(2) { position: sticky; z-index: 2; background-color: var(--classic-surface); }
#connect-field .ct[data-section="connect-queue"] thead th:nth-child(2), #connect-field .ct[data-section="connect-queue"] tbody th[scope="row"] { left: 4.6rem; }

/* Quiet tiles read in one line of the eye: the label holds two lines of room
   so every value in a row starts at the same height, whether or not its label
   or its unit wrapped, and the (i) sits with the label's first line. */
#connect-field .kpi-tile__top { align-items: flex-start; }
#connect-field .kpi-tile__top .info-disc { margin-top: -.35rem; }
#connect-field .kpi-tile__label { min-height: 2.6em; }
#connect-field .kpi-tile__reading { margin-top: .1rem; }

/* The signal sparkline carries its reading, so it is an aid and not a flourish. */
#connect-field .cw__aid-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
#connect-field .cw__aid-caption { font-size: .74rem; line-height: 1.35; color: var(--classic-muted); text-align: center; }

/* The station's second axis, where it has one this build cannot compute. It
   sits under the body for the same reason the aid does: a refusal buried under
   three hundred scrolling rows is a refusal nobody reads. */
#connect-field .cw__after { padding: .6rem .9rem .8rem; border-top: 1px solid var(--classic-rule); }
#connect-field .cw__after .cw__unavail { margin: 0; }

/* Two columns carry a sentence rather than a value, and a sentence must wrap:
   nowrap would push the columns after them past the edge of the widget. */
#connect-field .ct[data-section="connect-queue"] td:nth-child(7), #connect-field .ct[data-section="connect-pressure"] td:nth-child(10) { white-space: normal; min-width: 30rem; }

/* The table column of a widget body. Keeps the table shrinkable inside the
   grid so a wide pivot scrolls rather than pushing the aid off the widget. */
#connect-field .cw__stack { min-width: 0; }

/* The pressure plot, as an aid rather than the station. */
#connect-field .classic-plot-aid { width: 100%; height: auto; }
#connect-field .classic-plot-aid .dot.is-dim { display: none; }
/* In Classic the plot's gutter captions read in muted ink, not in a state hue:
   state colours never carry text here (grammar §13). The marks keep their fill. */
#connect-field .classic-plot-aid .gutter-label { fill: var(--classic-muted); }

/* The one link a Classic table carries: the group's attendance page in Connect. */
#connect-field .ct__link { color: var(--classic-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Creative-mode rails. Same control group, same corner on every station head,
   deliberately quieter than in Classic: the Creative reading leads there, and
   the rail is a tool you reach for rather than part of the composition. */
#connect-field .station-head { position: relative; }
#connect-field .station-rail { display: flex; justify-content: flex-end; margin-left: auto; padding-top: .2rem; }
#connect-field .station-rail--inline { display: flex; justify-content: flex-end; margin: .9rem 0 -.3rem; }
/* The full button, not a delta. This rail reuses .xrail__btn, but the only
   complete definition of that class in this sheet is scoped under .classic-mount
   -- so outside Classic these four declarations were landing on a raw UA button
   and the rail rendered as three white slabs. Declare the whole control here. */
#connect-field .station-rail .xrail__btn { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; padding: 0 .45rem; border: 1px solid var(--edge); border-radius: 4px; background: none; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
#connect-field .station-rail .xrail__btn svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
#connect-field .station-rail .xrail__btn:disabled, #connect-field .station-rail .xrail__btn[aria-disabled="true"] { border-style: dashed; color: var(--faint); cursor: not-allowed; }
#connect-field .station-rail .xrail__btn:disabled:hover, #connect-field .station-rail .xrail__btn[aria-disabled="true"]:hover { border-color: var(--edge); background: none; color: var(--faint); }
#connect-field .station-rail .xrail__btn.is-copied, #connect-field .station-rail .xrail__btn.is-done { border-color: var(--accent); color: var(--accent); }
#connect-field .station-rail .xrail__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#connect-field .station-rail .xrail__btn:hover { color: var(--ink); border-color: var(--edge-lit); background: var(--panel-lit); }
@media (min-width: 60rem) {
  #connect-field .station-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 1.2rem; }
  #connect-field .station-head .station-note { grid-column: 1; }
  #connect-field .station-rail { grid-column: 2; grid-row: 1; }
}

/* Masthead tools: the copy prompt and the one package control, in the
   masthead's upper-right column beside the stamps (#229). */
#connect-field .masthead__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: .6rem 1.1rem; margin-top: 0; }
#connect-field .masthead__tools .copy-prompt, #connect-field .masthead__tools .package-control { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
#connect-field .masthead__tools .copy-prompt-btn { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: 0 .85rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--ground); font-family: var(--font-body, inherit); font-size: .78rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#connect-field .masthead__tools .copy-prompt-btn svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
#connect-field .masthead__tools .copy-prompt-btn svg.copy-prompt-btn__caret { width: 11px; height: 11px; stroke-width: 2; opacity: .75; margin-left: .1rem; }
#connect-field .masthead__tools .copy-prompt-btn:hover, #connect-field .masthead__tools .copy-prompt-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--ink); color: var(--ground); }
#connect-field .masthead__tools .copy-prompt-btn.is-copied { border-color: var(--accent); background: transparent; color: var(--accent); }
#connect-field .masthead__tools .xrail { display: inline-flex; align-items: center; }
#connect-field .masthead__tools .xrail__btn { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 .85rem; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent); font-family: var(--font-body, inherit); font-size: .78rem; font-weight: 700; line-height: 1; letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#connect-field .masthead__tools .xrail__btn svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
#connect-field .masthead__tools .xrail__btn:hover { border-color: var(--accent); background: var(--accent); color: var(--ground); }
#connect-field .masthead__tools .xrail__btn:active { background: var(--ink); border-color: var(--ink); color: var(--ground); }
#connect-field .masthead__tools .xrail__btn.is-copied, #connect-field .masthead__tools .xrail__btn.is-done { border-color: var(--accent); color: var(--accent); background: transparent; }
#connect-field .masthead__tools .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 14%, transparent); margin-left: .25rem; }
#connect-field .masthead__tools .copy-prompt-popover { position: absolute; z-index: 50; top: calc(2.25rem + 6px); right: 0; left: auto; display: grid; gap: .25rem; min-width: 20rem; max-width: min(26rem, calc(100vw - 2rem)); padding: .4rem; background: var(--surface); border: 1px solid var(--edge-strong); border-radius: 8px; box-shadow: 0 12px 36px color-mix(in srgb, var(--shadow-ink, #000) 45%, transparent); }
#connect-field .masthead__tools .copy-prompt-popover[hidden] { display: none; }
#connect-field .masthead__tools .copy-prompt-option { display: flex; align-items: flex-start; gap: .75rem; width: 100%; min-height: 2.75rem; padding: .6rem .75rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font-family: var(--font-body, inherit); text-align: left; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
#connect-field .masthead__tools .copy-prompt-option svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); }
#connect-field .masthead__tools .copy-prompt-option:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--edge-strong); }
#connect-field .masthead__tools .copy-prompt-option__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
#connect-field .masthead__tools .copy-prompt-option__label { font-size: .82rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
#connect-field .masthead__tools .copy-prompt-option__hint { font-size: .73rem; line-height: 1.35; color: var(--muted); white-space: normal; }
#connect-field .masthead__tools .copy-prompt-error { margin: 0; padding: .45rem .65rem; border: 1px solid var(--rule); border-radius: 4px; background-color: var(--surface); color: var(--ink); font-size: .76rem; line-height: 1.4; }
#connect-field .masthead__tools .copy-prompt-error:empty { display: none; }
#connect-field .masthead__tools .ai-guidelines-tip, #connect-field .masthead__tools .how-to-tip { margin: 0; font-size: .7rem; line-height: 1.35; color: var(--muted); max-width: 15rem; text-align: right; }
#connect-field .masthead__tools .ai-guidelines-tip__link, #connect-field .masthead__tools .how-to-tip__link { position: relative; color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
#connect-field .masthead__tools .ai-guidelines-tip__link:hover, #connect-field .masthead__tools .how-to-tip__link:hover { color: var(--accent); }
#connect-field .masthead__tools .ai-guidelines-tip__mark { width: 1em; height: 1em; margin-left: .2em; vertical-align: -.12em; flex: none; }
#connect-field .masthead__tools .copy-prompt-btn:focus-visible, #connect-field .masthead__tools .xrail__btn:focus-visible, #connect-field .masthead__tools .copy-prompt-option:focus-visible, #connect-field .masthead__tools .ai-guidelines-tip__link:focus-visible, #connect-field .masthead__tools .how-to-tip__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Print: the Creative stations are chrome for a Classic print run, and the
   rails and tools are controls rather than content. Browsers drop backgrounds
   by default, and cream ink on white paper is no reading at all, so a Classic
   print run remaps the console's materials to a light sheet: the same tokens,
   the same tables, rules in ink. The filter console is a control, not content. */
@media print {
  #connect-field .station-rail, #connect-field .masthead__tools { display: none; }
  #connect-field .classic-mount { display: block; }
  #connect-field[data-mode="classic"] {
    --ground: #ffffff; --panel: #ffffff; --panel-2: #f1f1f4; --panel-lit: #e9e9ee;
    --edge: #b9bcc8; --edge-lit: #8a8e9e; --edge-strong: #6a6e80;
    --ink: #121411; --muted: #4b4e5c; --faint: #6a6e80;
    --connect-300: #4036d2; --classic-shadow: none;
    background: #ffffff; color: #121411;
  }
  #connect-field[data-mode="classic"] .filter-sidebar, #connect-field[data-mode="classic"] .sidebar-toggle-bar, #connect-field[data-mode="classic"] .scopebar-reset { display: none; }
  #connect-field[data-mode="classic"] .dashboard-layout { display: block; }
  #connect-field .cw__aid--below { overflow: visible; }
  #connect-field .classic-plot-aid { min-width: 0; }
  /* On paper every column shares the page: sentence columns wrap to fit and
     nothing is pinned, because there is no scroll to pin against. */
  #connect-field .ct[data-section="connect-queue"] td:nth-child(7), #connect-field .ct[data-section="connect-pressure"] td:nth-child(10) { min-width: 0; }
  #connect-field .ct tbody th[scope="row"] { min-width: 0; }
  #connect-field .ct[data-section="connect-queue"] tbody td:first-child, #connect-field .ct[data-section="connect-queue"] thead th:nth-child(2) { position: static; }
  #connect-field .cw__body--table { padding-bottom: .4rem; }
}

/* ----------------------------------------------------------------------------
   BEGIN merged Markup block (apps/shared/markup-base.css)
   Source: apps/shared/markup-base.css (canonical; never edit the copy below by hand).
   Scope: #connect-field -- produced by tools/scope_island_css.py scope_css().
   Guard: tests/test_island_delivery.py MergedMarkupBlockTest.
   Executive Markup V2 (#598): the pen beside the palette and the island's frozen state;
   the drawing surface itself ships in apps/markup-app (markup-app.css) outside this scope.
   ---------------------------------------------------------------------------- */
#connect-field .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);
}
#connect-field .markup-pen:hover, #connect-field .markup-pen:focus-within { opacity: 1; border-color: var(--edge-strong, currentColor); }
#connect-field .markup-pen:active { transform: translateY(1px); }
#connect-field .markup-pen:focus-visible { outline: 2px solid var(--focus, #f45500); outline-offset: 3px; }
#connect-field .markup-pen[aria-pressed="true"] { opacity: 1; background: var(--ink, #121411); color: var(--invert-ink, var(--background, #fef1e8)); border-color: var(--ink, #121411); }
#connect-field .markup-pen[aria-busy="true"] { cursor: progress; }
#connect-field .markup-pen[aria-busy="true"] .markup-pen__icon { animation: markup-pen-tap 900ms ease-in-out infinite; }
#connect-field .markup-pen__icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* Animated hover tooltip: explains that it freezes current dashboard view */
#connect-field .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;
}
#connect-field .markup-pen:hover .markup-pen__tooltip, #connect-field .markup-pen:focus-visible .markup-pen__tooltip {
  opacity: 1; transform: translateY(0);
}
#connect-field .markup-pen__label {
  font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--ink, #121411);
}
#connect-field .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) {
  #connect-field .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);
  }
  #connect-field .markup-pen__tooltip { display: none; }
}

/* Instant veil -- mounted at 0ms upon pen button click for immediate user feedback */
#connect-field .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;
}
#connect-field .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;
}
#connect-field .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;
}
#connect-field .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. */
#connect-field [data-markup="canvas"], #connect-field [data-markup="saving"], #connect-field [data-markup="viewing"] { user-select: none; }
#connect-field [data-markup="paused"] .markup-pen { border-color: var(--warn, #b8860b); }

@media (prefers-reduced-motion: reduce) {
  #connect-field .markup-pen { transition: none; }
  #connect-field .markup-pen__tooltip { transition: none; }
  #connect-field .markup-pen[aria-busy="true"] .markup-pen__icon { animation: none; }
  #connect-field .fm-instant-veil .fm-progress-bar__fill--animated { animation: none; width: 60%; }
}

/* ----------------------------------------------------------------------------
   END merged Markup block (apps/shared/markup-base.css)
   ---------------------------------------------------------------------------- */

/* ---------- weekly logging station: grouped line graph & table disclosure (#295) ---------- */
#connect-field .logging-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .8rem;
}
#connect-field .logging-chart-caption {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}
#connect-field .logging-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .74rem;
  color: var(--muted);
}
#connect-field .logging-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
#connect-field .logging-legend-icon {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
#connect-field .logging-legend-icon line {
  stroke-width: 2;
}
#connect-field .logging-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
#connect-field .logging-chart-svg .gridline {
  stroke: var(--edge);
  stroke-width: 1;
}
#connect-field .logging-chart-svg .gridline-x {
  stroke: var(--edge);
  stroke-dasharray: 2 3;
  opacity: .5;
}
#connect-field .logging-chart-svg .axis {
  stroke: var(--edge-lit);
  stroke-width: 1;
}
#connect-field .logging-chart-svg .axis-tick {
  stroke: var(--edge-lit);
  stroke-width: 1;
}
#connect-field .logging-chart-svg .tick-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  fill: var(--muted);
}
#connect-field .logging-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#connect-field .logging-marker {
  stroke-width: 1;
}

/* Four series: semantic hues, dashes, markers */
#connect-field .series-recorded {
  stroke: var(--healthy);
  fill: var(--healthy);
}
#connect-field path.series-recorded, #connect-field .logging-legend-icon.series-recorded line {
  stroke-dasharray: none;
}

#connect-field .series-did-not-occur {
  stroke: var(--muted);
  fill: var(--muted);
}
#connect-field path.series-did-not-occur, #connect-field .logging-legend-icon.series-did-not-occur line {
  stroke-dasharray: 6 3;
}

#connect-field .series-not-logged {
  stroke: var(--critical);
  fill: var(--critical);
}
#connect-field path.series-not-logged, #connect-field .logging-legend-icon.series-not-logged line {
  stroke-dasharray: 2 3;
}

#connect-field .series-no-record {
  stroke: var(--faint);
  fill: var(--faint);
}
#connect-field path.series-no-record, #connect-field .logging-legend-icon.series-no-record line {
  stroke-dasharray: 8 3 2 3;
}

#connect-field .logging-table-details {
  margin-top: 1rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}
#connect-field .logging-table-summary {
  padding: .65rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
#connect-field .logging-table-summary::-webkit-details-marker {
  display: none;
}
#connect-field .logging-table-summary:hover {
  color: var(--ink);
}
#connect-field .logging-table-summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#connect-field .logging-table-details[open] > .logging-table-summary {
  border-bottom: 1px solid var(--edge);
}
#connect-field .logging-table-details .tablewrap {
  margin-top: 0;
  max-height: 28rem;
  overflow-y: auto;
}
#connect-field .logging-table-details thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}

/* ---------- provenance flag empty state (#295 Ask C) ---------- */
#connect-field .flag-provenance:empty {
  display: none;
}

/* ---------- why now tooltip trigger (#295 Ask F) ---------- */
#connect-field .why-trigger {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .45rem;
  border: 1px solid var(--edge-lit);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
#connect-field .why-trigger:hover, #connect-field .why-trigger:focus-visible {
  border-color: var(--connect-300);
  background: var(--panel-lit);
  color: var(--connect-200);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
#connect-field .queue-why .why-trigger {
  margin-right: .45rem;
  margin-bottom: .2rem;
}
#connect-field .why-trigger-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  border-radius: 50%;
}
#connect-field .why-trigger-disc svg {
  width: 14px;
  height: 14px;
  display: block;
}
#connect-field .why-trigger-disc svg circle, #connect-field .why-trigger-disc svg line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.4;
}
#connect-field .why-trigger-disc svg .dotcap {
  fill: var(--muted);
  stroke: none;
  r: 1.1px;
}
#connect-field .why-trigger-disc:hover, #connect-field .why-trigger-disc:focus-visible {
  border-color: var(--connect-300);
  background: var(--panel-lit);
  color: var(--connect-300);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
#connect-field .why-trigger-disc:hover svg circle, #connect-field .why-trigger-disc:hover svg line, #connect-field .why-trigger-disc:focus-visible svg circle, #connect-field .why-trigger-disc:focus-visible svg line {
  stroke: var(--connect-300);
}
#connect-field .why-trigger-disc:hover svg .dotcap, #connect-field .why-trigger-disc:focus-visible svg .dotcap {
  fill: var(--connect-300);
}
#connect-field .gc-why strong {
  display: inline-block;
  margin-right: .3rem;
  vertical-align: middle;
}
#connect-field .queue-why .occ-strip {
  display: block;
  margin-top: 4px;
}





/* BEGIN merged Breadcrumbs block (apps/shared/breadcrumbs-base.css) */
#connect-field .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;
}
#connect-field .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%); }
#connect-field .suite-breadcrumbs__trail::-webkit-scrollbar { display: none; }
#connect-field .suite-breadcrumbs[data-draggable="true"] .suite-breadcrumbs__trail, #connect-field .suite-breadcrumbs__trail.is-draggable { cursor: grab; }
#connect-field .suite-breadcrumbs[data-dragging="true"] .suite-breadcrumbs__trail, #connect-field .suite-breadcrumbs__trail.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-behavior: auto; }
#connect-field .suite-breadcrumbs[data-dragging="true"] .suite-breadcrumbs__link, #connect-field .suite-breadcrumbs__trail.is-dragging .suite-breadcrumbs__link { pointer-events: none; }
#connect-field .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;
}
#connect-field .suite-breadcrumbs__item { display: inline-flex; align-items: baseline; min-width: 0; flex: 0 0 auto; }
#connect-field .suite-breadcrumbs__item--root { flex-shrink: 0; }
#connect-field .suite-breadcrumbs__peers { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .25rem .35rem; }
#connect-field .suite-breadcrumbs__root-link, #connect-field .suite-breadcrumbs__link { color: var(--ink); text-decoration: none; transition: color 120ms ease; white-space: nowrap; }
#connect-field .suite-breadcrumbs__prefix { color: var(--muted-ink); font-weight: 400; }
#connect-field .suite-breadcrumbs__link { color: var(--muted-ink); padding: 4px 6px; margin: -4px -2px; }
#connect-field .suite-breadcrumbs__root-link:hover, #connect-field .suite-breadcrumbs__link:hover { color: var(--accent); }
#connect-field .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; }
#connect-field .suite-breadcrumbs__divider, #connect-field .suite-breadcrumbs__sep { color: var(--rule); user-select: none; flex-shrink: 0; }
#connect-field .suite-breadcrumbs__root-link:focus-visible, #connect-field .suite-breadcrumbs__link:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 768px) {
  #connect-field .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) {
  #connect-field .suite-breadcrumbs__root-link, #connect-field .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. */
#connect-field .suite-breadcrumbs__nest { position: relative; display: inline-block; }
#connect-field .suite-breadcrumbs__nest.is-open .suite-breadcrumbs__sub, #connect-field .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. */
#connect-field .suite-breadcrumbs__trail.has-open-nest, #connect-field .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest.is-open), #connect-field .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest[aria-expanded="true"]), #connect-field .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest:hover), #connect-field .suite-breadcrumbs__trail:has(.suite-breadcrumbs__nest:focus-within) {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
#connect-field .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. */
#connect-field .suite-breadcrumbs__sub::before { content: ""; position: absolute; inset: -.5rem 0 100%; }
@media (hover: hover) and (pointer: fine) {
  #connect-field .suite-breadcrumbs__nest:hover .suite-breadcrumbs__sub, #connect-field .suite-breadcrumbs__nest:focus-within .suite-breadcrumbs__sub { display: block; }
}
#connect-field .suite-breadcrumbs__tab {
  display: block;
  padding: .4rem .55rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
#connect-field .suite-breadcrumbs__tab:hover { background: var(--hover-wash, color-mix(in srgb, var(--accent) 10%, transparent)); }
#connect-field .suite-breadcrumbs__tab:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: -2px; }
#connect-field .suite-breadcrumbs__tab-label { display: block; font-weight: 700; font-size: .82rem; }
#connect-field .suite-breadcrumbs__tab-question { display: block; font-size: .72rem; color: var(--muted-ink); }

/* END merged Breadcrumbs block (apps/shared/breadcrumbs-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
   "#connect-field" 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 and tests/test_island_delivery.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. */
#connect-field {
  --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) {
  #connect-field {
    --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. */
#connect-field .mode-switch__btn, #connect-field .xrail__btn, #connect-field .cw__expand, #connect-field .ct__sort, #connect-field .copy-prompt-btn, #connect-field .copy-prompt-option, #connect-field .copy-prompt-opt, #connect-field .toggle-btn, #connect-field .sidebar-back-btn, #connect-field .reset-btn, #connect-field .scopebar-reset, #connect-field .theme-swatch__btn, #connect-field .mk-toggle, #connect-field .mk-rail__btn, #connect-field .opt-btn, #connect-field .acronym-btn, #connect-field .gender-btn, #connect-field .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;
}
#connect-field .mode-switch__btn:active, #connect-field .xrail__btn:active:not([disabled]), #connect-field .cw__expand:active, #connect-field .ct__sort:active, #connect-field .copy-prompt-btn:active, #connect-field .copy-prompt-option:active, #connect-field .copy-prompt-opt:active, #connect-field .toggle-btn:active, #connect-field .sidebar-back-btn:active, #connect-field .reset-btn:active, #connect-field .scopebar-reset:active, #connect-field .theme-swatch__btn:active, #connect-field .mk-toggle:active, #connect-field .mk-rail__btn:active, #connect-field .opt-btn:active, #connect-field .acronym-btn:active, #connect-field .gender-btn:active, #connect-field .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. */
#connect-field .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);
}
#connect-field .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);
}
#connect-field .ux-status__text { min-width: 0; overflow-wrap: anywhere; }
#connect-field .ux-status__mark {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}
#connect-field .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. */
#connect-field .ux-status[data-kind="done"] .ux-status__mark { color: var(--state-healthy, var(--classic-healthy, #2f9a52)); }
#connect-field .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. */
#connect-field .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. */
#connect-field .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));
}
#connect-field .ux-status[data-kind="fail"] .ux-status__mark { color: var(--state-critical, var(--classic-critical, #b3261e)); }
#connect-field .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;
}
#connect-field .ux-status__btn::after { content: ""; position: absolute; inset: -.45rem -.3rem; }
#connect-field .ux-status__btn:hover { background: var(--hover-wash, rgba(127, 127, 127, .14)); }
#connect-field .ux-status__btn:active { transform: translateY(1px); }
#connect-field .ux-status__btn:focus-visible { outline: 2px solid var(--classic-focus, var(--focus, #005eb8)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #connect-field .ux-status[data-kind="busy"] .ux-status__mark { animation: none; }
  #connect-field .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. */
#connect-field .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. */
#connect-field .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". */
#connect-field .ux-busy { position: relative; cursor: progress; }
#connect-field .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) {
  #connect-field .filter-sidebar:is([data-console="open"] *) { animation: favor-ux-sheet-in var(--motion-layout) var(--motion-ease) 1 both; }
  #connect-field .sidebar-toggle-bar, #connect-field .console-toggle-bar { transition: bottom var(--motion-layout) var(--motion-ease); }
  #connect-field .sidebar-toggle-bar:is([data-console="closed"] *), #connect-field .console-toggle-bar:is([data-console="closed"] *) { transition-duration: var(--motion-state); transition-timing-function: var(--motion-ease-exit); }
  #connect-field .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. */
#connect-field .palette-slot .theme-swatch { position: relative; }
#connect-field .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. */
#connect-field .theme-swatch__trigger { position: relative; }
#connect-field .theme-swatch__trigger[aria-expanded="true"] { z-index: 41; }
#connect-field .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);
}
#connect-field .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. */
#connect-field .theme-swatch__menu::after { content: ""; position: absolute; inset: 100% 0 -.5rem; }
#connect-field .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;
}
#connect-field .theme-swatch__shuffle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#connect-field .theme-swatch__shuffle:hover { color: var(--ink); background: var(--hover-wash, color-mix(in srgb, var(--accent) 12%, transparent)); }
#connect-field .theme-swatch__shuffle:focus-visible { outline: 2px solid var(--focus, #005eb8); outline-offset: 2px; }
/* Pinned reads as held open rather than as hovered. */
#connect-field .theme-swatch[data-pinned="true"] /* The trigger is the current palette: a disc, #connect-field and nothing else at rest. It keeps each island's
   own disc chrome by also carrying .theme-swatch__btn. */
.theme-swatch__trigger { position: relative; }
#connect-field .theme-swatch__trigger[aria-expanded="true"] { z-index: 41; }
#connect-field .theme-swatch__menu { border-color: var(--edge-strong, var(--ink)); }

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