/* NEXUS AUTOMATIC THEMES
 * Color-only layer. No dimensions, typography, layout, animation names, transform,
 * animation-play-state, or board event handlers are changed by a theme switch.
 * Tune the semantic tokens below rather than adding component-specific hex colors.
 * Brand gradients, provider artwork, the founder, and warm task/confetti colors
 * intentionally retain their identity in both themes.
 */
@property --headline-blue { syntax: '<color>'; inherits: true; initial-value: #0085e6; }
@property --headline-cobalt { syntax: '<color>'; inherits: true; initial-value: #1757ff; }
@property --headline-purple { syntax: '<color>'; inherits: true; initial-value: #a93dff; }
@property --page-bg { syntax: '<color>'; inherits: true; initial-value: #fbfdff; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #090c32; }
@property --body { syntax: '<color>'; inherits: true; initial-value: #37456d; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #596a8c; }
@property --ui-ink { syntax: '<color>'; inherits: true; initial-value: #16254a; }
@property --ui-body { syntax: '<color>'; inherits: true; initial-value: #46597f; }
@property --ui-muted { syntax: '<color>'; inherits: true; initial-value: #5b6f96; }
@property --link { syntax: '<color>'; inherits: true; initial-value: #0757d1; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --surface-alt { syntax: '<color>'; inherits: true; initial-value: #f8faff; }
@property --surface-subtle { syntax: '<color>'; inherits: true; initial-value: #f1f5fc; }
@property --surface-raised { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --border { syntax: '<color>'; inherits: true; initial-value: #e0e8f7; }
@property --panel-a { syntax: '<color>'; inherits: true; initial-value: rgb(255 255 255 / 91%); }
@property --panel-b { syntax: '<color>'; inherits: true; initial-value: rgb(255 255 255 / 79%); }
@property --glass-border { syntax: '<color>'; inherits: true; initial-value: rgb(227 235 255 / 82%); }
@property --speech-a { syntax: '<color>'; inherits: true; initial-value: #f8fbff; }
@property --speech-b { syntax: '<color>'; inherits: true; initial-value: #f2f5ff; }
@property --speech-edge { syntax: '<color>'; inherits: true; initial-value: rgb(255 255 255 / 93%); }
@property --chat-bubble { syntax: '<color>'; inherits: true; initial-value: #e6f0ff; }
@property --chat-bubble-text { syntax: '<color>'; inherits: true; initial-value: #45628e; }
@property --column-a { syntax: '<color>'; inherits: true; initial-value: #f4f6fc; }
@property --column-b { syntax: '<color>'; inherits: true; initial-value: #f5f7fd; }
@property --progress-a { syntax: '<color>'; inherits: true; initial-value: #eff5ff; }
@property --progress-b { syntax: '<color>'; inherits: true; initial-value: #f6f8fd; }
@property --done-a { syntax: '<color>'; inherits: true; initial-value: #f1f9f6; }
@property --done-b { syntax: '<color>'; inherits: true; initial-value: #f6f9fc; }
@property --popular-a { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --popular-b { syntax: '<color>'; inherits: true; initial-value: #f5f1ff; }
@property --hero-tag-a { syntax: '<color>'; inherits: true; initial-value: #deefff; }
@property --hero-tag-b { syntax: '<color>'; inherits: true; initial-value: #e6ecff; }
@property --eyebrow-a { syntax: '<color>'; inherits: true; initial-value: #dbedff; }
@property --eyebrow-b { syntax: '<color>'; inherits: true; initial-value: #ede5ff; }
@property --eyebrow-text { syntax: '<color>'; inherits: true; initial-value: #0957d5; }
@property --active-bg { syntax: '<color>'; inherits: true; initial-value: #dce9ff; }
@property --hover-bg { syntax: '<color>'; inherits: true; initial-value: #edf4ff; }
@property --wash-blue { syntax: '<color>'; inherits: true; initial-value: #f0fbff; }
@property --wash-purple { syntax: '<color>'; inherits: true; initial-value: #eae5ff; }
@property --wash-cyan { syntax: '<color>'; inherits: true; initial-value: #e2f6ff; }
@property --wash-indigo { syntax: '<color>'; inherits: true; initial-value: #edf2ff; }
@property --wash-lilac { syntax: '<color>'; inherits: true; initial-value: #f4edff; }
@property --wash-violet { syntax: '<color>'; inherits: true; initial-value: #f0eaff; }
@property --wash-mint { syntax: '<color>'; inherits: true; initial-value: #eafaff; }
@property --wash-sky { syntax: '<color>'; inherits: true; initial-value: #f0f9ff; }

:root {
  --headline-blue: #0085e6;
  --headline-cobalt: #1757ff;
  --headline-purple: #a93dff;
  --gradient: linear-gradient(108deg, var(--headline-blue) 0%, var(--headline-cobalt) 46%, var(--headline-purple) 100%);
  --check-disc: #008754;
  color-scheme: light;
  --page-bg: #fbfdff;
  --ink: #090c32;
  --body: #37456d;
  --muted: #596a8c;
  --ui-ink: #16254a;
  --ui-body: #46597f;
  --ui-muted: #5b6f96;
  --link: #0757d1;
  --focus: #6650d9;
  --surface: #ffffff;
  --surface-alt: #f8faff;
  --surface-raised: #ffffff;
  --surface-subtle: #f1f5fc;
  --border: #e0e8f7;
  --control-border: #8294b6;
  --hover-bg: #edf4ff;
  --active-bg: #dce9ff;
  --panel-a: rgb(255 255 255 / 91%);
  --panel-b: rgb(255 255 255 / 79%);
  --glass-border: rgb(227 235 255 / 82%);
  --popular-a: #ffffff;
  --popular-b: #f5f1ff;
  --popular-border: #8d79ff;
  --billing-slider-a: #3460ff;
  --billing-slider-b: #0072ec;
  --billing-slider-shadow: rgb(0 133 255 / 24%);
  --billing-slider-gloss: rgb(255 255 255 / 30%);
  --eyebrow-a: #dbedff;
  --eyebrow-b: #ede5ff;
  --eyebrow-text: #0957d5;
  --hero-tag-a: #deefff;
  --hero-tag-b: #e6ecff;
  --speech-a: #f8fbff;
  --speech-b: #f2f5ff;
  --speech-edge: rgb(255 255 255 / 93%);
  --chat-bubble: #e6f0ff;
  --chat-bubble-text: #45628e;
  --column-a: #f4f6fc;
  --column-b: #f5f7fd;
  --progress-a: #eff5ff;
  --progress-b: #f6f8fd;
  --done-a: #f1f9f6;
  --done-b: #f6f9fc;
  --count-bg: #e8edf7;
  --progress-count: #e3edff;
  --done-count: #e3f0ea;
  --success-text: #087546;
  --success-bg: #e1f9ec;
  --tag-design-bg: #f3edff;
  --tag-design-text: #684496;
  --tag-build-bg: #e9f2ff;
  --tag-build-text: #356098;
  --tag-qa-bg: #e5f6ed;
  --tag-qa-text: #2f6e4d;
  --tag-task-bg: #f0f3f9;
  --tag-task-text: #4c607e;
  --avatar-ring: #ffffff;
  --avatar-bg: #e5edfe;
  --slot-bg: #eaf0ff;
  --slot-border: #9baefa;
  --slot-progress-bg: #fff6df;
  --slot-progress-border: #e9bd55;
  --slot-done-bg: #e8f6ef;
  --slot-done-border: #98d7b7;
  --scrollbar: #99acce;
  --blue-icon-bg: #d3e9ff;
  --blue-icon: #0874ff;
  --purple-icon-bg: #f0e7ff;
  --purple-icon: #9742f6;
  --green-icon-bg: #e0faec;
  --green-icon: #00a65e;
  --orange-icon-bg: #fff0df;
  --orange-icon: #f68b2b;
  --indigo-icon-bg: #e9edff;
  --indigo-icon: #2361ff;
  --cyan-icon-bg: #d5efff;
  --cyan-icon: #008bc3;
  --wash-blue: #f0fbff;
  --wash-purple: #eae5ff;
  --wash-cyan: #e2f6ff;
  --wash-indigo: #edf2ff;
  --wash-lilac: #f4edff;
  --wash-violet: #f0eaff;
  --wash-mint: #eafaff;
  --wash-sky: #f0f9ff;
  --scene-blue-a: rgb(194 235 255 / 65%);
  --scene-blue-b: rgb(200 223 255 / 38%);
  --scene-purple-a: rgb(228 197 255 / 62%);
  --scene-purple-b: rgb(192 210 255 / 53%);
  --backdrop: rgb(20 27 66 / 35%);
  --shadow-color: rgb(68 108 203 / 4%);
  --workspace-shadow: rgb(97 137 211 / 10%);
  --flight-shadow: #41599335;
  --selection-bg: #dfddff;
  --selection-text: #161144;
  --shadow: 0 5px 24px var(--shadow-color);
}

:root[data-theme="dark"] {
  --headline-blue: #30aaff; --headline-cobalt: #5882ff; --headline-purple: #c178ff;
  color-scheme: dark;
  --page-bg: #0b1020;
  --ink: #eff3ff;
  --body: #c3cee6;
  --muted: #a6b4d0;
  --ui-ink: #e3ebff;
  --ui-body: #c3cee6;
  --ui-muted: #aab9d6;
  --link: #8bb6ff;
  --focus: #b4a2ff;
  --surface: #172138;
  --surface-alt: #121b2f;
  --surface-raised: #1d2943;
  --surface-subtle: #111a2d;
  --border: #303d57;
  --control-border: #667fa8;
  --hover-bg: #25395b;
  --active-bg: #253e66;
  --panel-a: rgb(26 36 61 / 95%);
  --panel-b: rgb(20 29 49 / 94%);
  --glass-border: #303d5b;
  --popular-a: #20263f;
  --popular-b: #2b254b;
  --popular-border: #a28bff;
  --billing-slider-a: #3a63ff;
  --billing-slider-b: #0067d6;
  --billing-slider-shadow: rgb(0 0 0 / 40%);
  --billing-slider-gloss: rgb(255 255 255 / 18%);
  --eyebrow-a: #203454;
  --eyebrow-b: #342950;
  --eyebrow-text: #a3c6ff;
  --hero-tag-a: #1c3352;
  --hero-tag-b: #293452;
  --speech-a: #1b2946;
  --speech-b: #202d49;
  --speech-edge: #364366;
  --chat-bubble: #223c62;
  --chat-bubble-text: #d6e6ff;
  --column-a: #111a2c;
  --column-b: #141f34;
  --progress-a: #162338;
  --progress-b: #192339;
  --done-a: #132930;
  --done-b: #152432;
  --count-bg: #2d3951;
  --progress-count: #2b4062;
  --done-count: #20483e;
  --success-text: #75e2b5;
  --success-bg: #163e32;
  --tag-design-bg: #392f54;
  --tag-design-text: #d2b4ff;
  --tag-build-bg: #203855;
  --tag-build-text: #a6cdff;
  --tag-qa-bg: #1d3d36;
  --tag-qa-text: #90dfb9;
  --tag-task-bg: #303b50;
  --tag-task-text: #c1cfea;
  --avatar-ring: #788ba9;
  --avatar-bg: #394a67;
  --slot-bg: #213453;
  --slot-border: #6c91cf;
  --slot-progress-bg: #3d3020;
  --slot-progress-border: #d9ae4f;
  --slot-done-bg: #1b3c33;
  --slot-done-border: #61ba90;
  --scrollbar: #5a6c8e;
  --blue-icon-bg: #233f65;
  --blue-icon: #6fbcff;
  --purple-icon-bg: #372a53;
  --purple-icon: #be95ff;
  --green-icon-bg: #183f34;
  --green-icon: #56db9f;
  --orange-icon-bg: #473123;
  --orange-icon: #ffb660;
  --indigo-icon-bg: #2a345e;
  --indigo-icon: #9bacff;
  --cyan-icon-bg: #1b3f52;
  --cyan-icon: #60d5ff;
  --wash-blue: #11273c;
  --wash-purple: #252044;
  --wash-cyan: #102e3d;
  --wash-indigo: #182442;
  --wash-lilac: #291e3b;
  --wash-violet: #251c40;
  --wash-mint: #102736;
  --wash-sky: #142438;
  --scene-blue-a: rgb(24 76 124 / 50%);
  --scene-blue-b: rgb(28 66 122 / 40%);
  --scene-purple-a: rgb(97 51 140 / 45%);
  --scene-purple-b: rgb(65 79 159 / 35%);
  --backdrop: rgb(2 6 18 / 72%);
  --shadow-color: rgb(0 0 0 / 18%);
  --workspace-shadow: rgb(0 0 0 / 28%);
  --flight-shadow: #00000075;
  --selection-bg: #413a6a;
  --selection-text: #f5f2ff;
}

/* JavaScript disabled: at least follow the OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --headline-blue: #30aaff; --headline-cobalt: #5882ff; --headline-purple: #c178ff;
    color-scheme: dark;
    --page-bg: #0b1020;
    --ink: #eff3ff;
    --body: #c3cee6;
    --muted: #a6b4d0;
    --ui-ink: #e3ebff;
    --ui-body: #c3cee6;
    --ui-muted: #aab9d6;
    --link: #8bb6ff;
    --focus: #b4a2ff;
    --surface: #172138;
    --surface-alt: #121b2f;
    --surface-raised: #1d2943;
    --surface-subtle: #111a2d;
    --border: #303d57;
    --control-border: #667fa8;
    --hover-bg: #25395b;
    --active-bg: #253e66;
    --panel-a: rgb(26 36 61 / 95%);
    --panel-b: rgb(20 29 49 / 94%);
    --glass-border: #303d5b;
    --popular-a: #20263f;
    --popular-b: #2b254b;
    --popular-border: #a28bff;
  --billing-slider-a: #3a63ff;
  --billing-slider-b: #0067d6;
  --billing-slider-shadow: rgb(0 0 0 / 40%);
  --billing-slider-gloss: rgb(255 255 255 / 18%);
    --eyebrow-a: #203454;
    --eyebrow-b: #342950;
    --eyebrow-text: #a3c6ff;
    --hero-tag-a: #1c3352;
    --hero-tag-b: #293452;
    --speech-a: #1b2946;
    --speech-b: #202d49;
    --speech-edge: #364366;
    --chat-bubble: #223c62;
    --chat-bubble-text: #d6e6ff;
    --column-a: #111a2c;
    --column-b: #141f34;
    --progress-a: #162338;
    --progress-b: #192339;
    --done-a: #132930;
    --done-b: #152432;
    --count-bg: #2d3951;
    --progress-count: #2b4062;
    --done-count: #20483e;
    --success-text: #75e2b5;
    --success-bg: #163e32;
    --tag-design-bg: #392f54;
    --tag-design-text: #d2b4ff;
    --tag-build-bg: #203855;
    --tag-build-text: #a6cdff;
    --tag-qa-bg: #1d3d36;
    --tag-qa-text: #90dfb9;
    --tag-task-bg: #303b50;
    --tag-task-text: #c1cfea;
    --avatar-ring: #788ba9;
    --avatar-bg: #394a67;
    --slot-bg: #213453;
    --slot-border: #6c91cf;
    --slot-progress-bg: #3d3020;
    --slot-progress-border: #d9ae4f;
    --slot-done-bg: #1b3c33;
    --slot-done-border: #61ba90;
    --scrollbar: #5a6c8e;
    --blue-icon-bg: #233f65;
    --blue-icon: #6fbcff;
    --purple-icon-bg: #372a53;
    --purple-icon: #be95ff;
    --green-icon-bg: #183f34;
    --green-icon: #56db9f;
    --orange-icon-bg: #473123;
    --orange-icon: #ffb660;
    --indigo-icon-bg: #2a345e;
    --indigo-icon: #9bacff;
    --cyan-icon-bg: #1b3f52;
    --cyan-icon: #60d5ff;
    --wash-blue: #11273c;
    --wash-purple: #252044;
    --wash-cyan: #102e3d;
    --wash-indigo: #182442;
    --wash-lilac: #291e3b;
    --wash-violet: #251c40;
    --wash-mint: #102736;
    --wash-sky: #142438;
    --scene-blue-a: rgb(24 76 124 / 50%);
    --scene-blue-b: rgb(28 66 122 / 40%);
    --scene-purple-a: rgb(97 51 140 / 45%);
    --scene-purple-b: rgb(65 79 159 / 35%);
    --backdrop: rgb(2 6 18 / 72%);
    --shadow-color: rgb(0 0 0 / 18%);
    --workspace-shadow: rgb(0 0 0 / 28%);
    --flight-shadow: #00000075;
    --selection-bg: #413a6a;
    --selection-text: #f5f2ff;
  }
}

/* Shared page, navigation and accessible controls. */
:root, :root[data-theme], body { background-color: var(--page-bg); color: var(--ink); }
.brand-logo { display: block; max-width: 100%; }
body { background-image: none; }
::selection { background: var(--selection-bg); color: var(--selection-text); }
:focus-visible { outline-color: var(--focus); }
.workspace-window :focus-visible { outline-color: var(--focus); }
.page-wash { background:
  radial-gradient(ellipse 48% 26% at 14% 9%, var(--wash-blue), transparent),
  radial-gradient(ellipse 44% 23% at 83% 8%, var(--wash-purple), transparent),
  radial-gradient(ellipse 61% 22% at 61% 27%, var(--wash-cyan), transparent),
  radial-gradient(ellipse 53% 16% at 8% 46%, var(--wash-indigo), transparent),
  radial-gradient(ellipse 50% 26% at 99% 54%, var(--wash-lilac), transparent),
  radial-gradient(ellipse 47% 19% at 53% 67%, var(--wash-violet), transparent),
  radial-gradient(ellipse 75% 23% at 37% 77%, var(--wash-mint), transparent),
  radial-gradient(ellipse 50% 20% at 89% 82%, var(--wash-sky), transparent); }
.glass-panel { background: linear-gradient(115deg, var(--panel-a), var(--panel-b)); border-color: var(--glass-border); }
.eyebrow { background: linear-gradient(110deg,var(--eyebrow-a),var(--eyebrow-b)); color: var(--eyebrow-text); }
.hero .hero-tagline { background: linear-gradient(110deg,var(--hero-tag-a),var(--hero-tag-b)); color: var(--eyebrow-text); }
.button-outline { background: var(--surface); border-color: var(--control-border); color: var(--link); box-shadow: none; }
.button-outline:hover { background: var(--hover-bg); border-color: var(--link); }
.button-login { color: var(--ink); border-color: var(--control-border); background: var(--surface); }
.hero .button-dashboard { color: var(--ink); }
.hero .button-dashboard small { color: var(--link); }
.mobile-menu-toggle, .mobile-nav { background: var(--surface-alt); border-color: var(--control-border); }
.mobile-nav a:hover, .mobile-nav button:hover { background: var(--hover-bg); color: var(--link); }
blockquote { color: var(--body); }
.icon-blue { background: var(--blue-icon-bg); color: var(--blue-icon); }
.icon-purple { background: var(--purple-icon-bg); color: var(--purple-icon); }
.icon-green { background: var(--green-icon-bg); color: var(--green-icon); }
.icon-orange { background: var(--orange-icon-bg); color: var(--orange-icon); }
.icon-indigo { background: var(--indigo-icon-bg); color: var(--indigo-icon); }
.icon-cyan { background: var(--cyan-icon-bg); color: var(--cyan-icon); }

/* Hero illustration remains separate from the live text and bubbles. */
.scene-wash-blue { background: linear-gradient(135deg,var(--scene-blue-a),var(--scene-blue-b),transparent); }
.scene-wash-purple { background: linear-gradient(145deg,var(--scene-purple-a),var(--scene-purple-b),transparent); }
.speech-bubble, .speech-reply { color: var(--body); border-color: var(--speech-edge); background: linear-gradient(140deg,var(--speech-a),var(--speech-b)); }
.speech-bubble strong { color: var(--ink); }
.speech-bubble::after { background: var(--speech-edge); }
.kayden-name { color: var(--ink); background: var(--surface); }
.hero-handnote, .showcase-note span { color: var(--ink); }
.scene-arrow, .scene-rays, .showcase-note svg { stroke: var(--link); }
.subscription-panel { border-color: var(--glass-border); background: linear-gradient(145deg,var(--surface),var(--surface-alt)); }
.subscription-eyebrow { color: var(--muted); }
.subscription-panel h2 { color: var(--ink); }
.subscription-providers li { color: var(--body); }
/* Provider discs deliberately retain light brand-safe backgrounds and black marks. */
.provider-disc { color-scheme: light; }

/* Workspace chrome, navigation and the board. All remain the SAME DOM nodes. */
.workspace-window { --ui-ink: var(--ink); --ui-muted: var(--muted); background: var(--surface); color: var(--ui-ink); border-color: var(--border); box-shadow: 0 16px 37px var(--workspace-shadow); }
.workspace-chrome { background: linear-gradient(110deg,var(--surface),var(--surface-alt)); border-bottom-color: var(--border); }
.chrome-label, .preview-badge { color: var(--muted); }
.workspace-sidebar { background: linear-gradient(150deg,var(--surface-alt),var(--surface-subtle)); border-color: var(--border); }
.workspace-brand { color: var(--ink); }
.workspace-nav-item { color: var(--ui-muted); }
.workspace-nav-item:hover { color: var(--link); background: var(--hover-bg); }
.workspace-nav-item.is-current { color: var(--link); background: var(--active-bg); }
.workspace-nav-item.add-project { border-color: var(--control-border); color: var(--link); background: var(--surface-alt); }
.workspace-nav-item.add-project:hover { color: var(--link); border-color: var(--link); background: var(--hover-bg); }
.workspace-nav-item.is-pending { background: var(--hover-bg); border-color: var(--control-border); }
.workspace-sidebar-footer, .workspace-sidebar-footer small { color: var(--muted); }
.workspace-main { background: linear-gradient(150deg,var(--surface),var(--surface-alt)); }
.on-track { background: var(--success-bg); color: var(--success-text); }
.board-summary, .board-summary strong, .board-scroll-hint { color: var(--ui-muted); }
.project-progress { background: var(--count-bg); }
.kanban-column { background: linear-gradient(140deg,var(--column-a),var(--column-b)); }
.column-progress { background: linear-gradient(140deg,var(--progress-a),var(--progress-b)); }
.column-done { background: linear-gradient(140deg,var(--done-a),var(--done-b)); }
.column-progress h4 { color: var(--link); }
.column-done h4 { color: var(--success-text); }
.column-count { background: var(--count-bg); color: var(--ui-muted); }
.column-progress .column-count { background: var(--progress-count); color: var(--link); }
.column-done .column-count { background: var(--done-count); color: var(--success-text); }
.column-dots { color: var(--muted); }
.task-card { background: var(--surface-raised); border-color: var(--border); color: var(--ui-body); }
.task-card:hover { border-color: var(--control-border); }
.task-check-disc, .agent-checklist .icon { background: var(--check-disc); }
.task-card[data-task-status="progress"] {
  /* ONLY the card fill changes. The original gold orbit and timeline are intact. */
  border-color: transparent;
  background: linear-gradient(var(--surface-raised),var(--surface-raised)) padding-box,
    conic-gradient(from var(--task-border-angle), #ffecad 0%, #ffecad 36%, #ffd43b 51%, #dba515 65%, #fa8b22 78%, #ffe169 92%, #ffecad 100%) border-box;
}
.task-card[data-task-status="progress"]:hover { border-color: transparent; }
.task-flight .task-flight-card { box-shadow: 0 calc(var(--lift-shadow,1) * 11px) calc(var(--lift-shadow,1) * 23px) var(--flight-shadow), 0 2px 5px var(--shadow-color); }
.tag-design { background: var(--tag-design-bg); color: var(--tag-design-text); }
.tag-build { background: var(--tag-build-bg); color: var(--tag-build-text); }
.tag-qa { background: var(--tag-qa-bg); color: var(--tag-qa-text); }
.tag-task { background: var(--tag-task-bg); color: var(--tag-task-text); }
.task-avatar { border-color: var(--avatar-ring); }
.task-flight-avatar.is-carrying { border-color: #fff8df; }
.column-empty { border-color: var(--control-border); color: var(--ui-muted); }
.is-flight-source::after, .destination-slot::after { border-color: var(--slot-border); background: var(--slot-bg); }
.receiving-task { border-color: var(--slot-border); }
.column-progress.receiving-task, .column-progress .destination-slot::after { border-color: var(--slot-progress-border); }
.column-progress .destination-slot::after { background: var(--slot-progress-bg); }
.column-done.receiving-task, .column-done .destination-slot::after { border-color: var(--slot-done-border); }
.column-done .destination-slot::after { background: var(--slot-done-bg); }
.playback-status { color: var(--ui-muted); }
.playback-dot { box-shadow: 0 0 0 3px var(--count-bg); }
.board-motion-paused .playback-dot { box-shadow: 0 0 0 3px var(--count-bg); }

/* Kayden chat, the matched character portrait, inputs and checklist. */
.workspace-chat { border-color: var(--border); background: linear-gradient(130deg,var(--surface-alt),var(--surface-subtle)); }
.chat-online { box-shadow: 0 0 0 3px var(--success-bg); }
.chat-stream, .task-list, .board-columns { scrollbar-color: var(--scrollbar) transparent; }
.chat-user-avatar, .workspace-user { background: var(--avatar-bg); border-color: var(--avatar-ring); }
.message-user > p { background: var(--chat-bubble); color: var(--chat-bubble-text); }
.message-agent { background: var(--surface); border-color: var(--border); }
.agent-message-content > p, .agent-checklist li { color: var(--ui-muted); }
.chat-composer { background: var(--surface-raised); border-color: var(--control-border); box-shadow: 0 0 0 2px var(--surface-subtle); }
.chat-composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--active-bg); }
.chat-composer input { color: var(--ui-ink); caret-color: var(--link); }
.chat-composer input::placeholder { color: var(--ui-muted); }

/* Pricing, dialogs and footer. */
.billing-toggle { background: var(--surface-subtle); }
.savings-note { color: var(--link); }
.pricing-card:hover { border-color: var(--control-border); }
.pricing-card-popular { background: linear-gradient(145deg,var(--popular-a) 30%,var(--popular-b)); border-color: var(--popular-border); }
.pricing-card-popular:hover { border-color: var(--popular-border); }
.plan-features .icon { color: var(--success-text); }
.site-dialog { background: linear-gradient(150deg,var(--surface) 35%,var(--surface-alt)); border-color: var(--border); color: var(--ink); }
.site-dialog::backdrop { background: var(--backdrop); }
.dialog-close { background: var(--surface-subtle); color: var(--ink); }
.dialog-close:hover { background: var(--hover-bg); }
.faq-list details { border-color: var(--border); }
.faq-list summary .icon { color: var(--link); }
.site-dialog .preview-notice { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); }
.task-dialog input, .task-dialog select { border-color: var(--control-border); background: var(--surface-raised); color: var(--ui-ink); caret-color: var(--link); }
.task-dialog .task-editor-note { color: var(--muted); }
.footer-links a:hover, .footer-links button:hover, .footer-social a:hover { color: var(--link); }
.footer-note .icon { color: var(--focus); }

/* No theme change ever writes animation/transform styles onto a task. Modern
 * browsers interpolate just these inherited colors. Older browsers switch cleanly. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme-ready="true"] {
    transition: --headline-blue 220ms ease, --headline-cobalt 220ms ease, --headline-purple 220ms ease, --page-bg 220ms ease,
      --ink 220ms ease,
      --body 220ms ease,
      --muted 220ms ease,
      --ui-ink 220ms ease,
      --ui-body 220ms ease,
      --ui-muted 220ms ease,
      --link 220ms ease,
      --surface 220ms ease,
      --surface-alt 220ms ease,
      --surface-subtle 220ms ease,
      --surface-raised 220ms ease,
      --border 220ms ease,
      --panel-a 220ms ease,
      --panel-b 220ms ease,
      --glass-border 220ms ease,
      --speech-a 220ms ease,
      --speech-b 220ms ease,
      --speech-edge 220ms ease,
      --chat-bubble 220ms ease,
      --chat-bubble-text 220ms ease,
      --column-a 220ms ease,
      --column-b 220ms ease,
      --progress-a 220ms ease,
      --progress-b 220ms ease,
      --done-a 220ms ease,
      --done-b 220ms ease,
      --popular-a 220ms ease,
      --popular-b 220ms ease,
      --hero-tag-a 220ms ease,
      --hero-tag-b 220ms ease,
      --eyebrow-a 220ms ease,
      --eyebrow-b 220ms ease,
      --eyebrow-text 220ms ease,
      --active-bg 220ms ease,
      --hover-bg 220ms ease,
      --wash-blue 220ms ease,
      --wash-purple 220ms ease,
      --wash-cyan 220ms ease,
      --wash-indigo 220ms ease,
      --wash-lilac 220ms ease,
      --wash-violet 220ms ease,
      --wash-mint 220ms ease,
      --wash-sky 220ms ease;
  }
}
@media (prefers-reduced-motion: reduce) { :root { transition: none !important; } }

/* Paper stays light regardless of the automatic screen theme. */
@media print {
  :root, :root[data-theme="dark"] {
    --headline-blue: #0085e6; --headline-cobalt: #1757ff; --headline-purple: #a93dff;
    color-scheme: light !important; transition: none !important;
    --page-bg: #fbfdff;
    --ink: #090c32;
    --body: #37456d;
    --muted: #596a8c;
    --ui-ink: #16254a;
    --ui-body: #46597f;
    --ui-muted: #5b6f96;
    --link: #0757d1;
    --focus: #6650d9;
    --surface: #ffffff;
    --surface-alt: #f8faff;
    --surface-raised: #ffffff;
    --surface-subtle: #f1f5fc;
    --border: #e0e8f7;
    --control-border: #8294b6;
    --hover-bg: #edf4ff;
    --active-bg: #dce9ff;
    --panel-a: rgb(255 255 255 / 91%);
    --panel-b: rgb(255 255 255 / 79%);
    --glass-border: rgb(227 235 255 / 82%);
    --popular-a: #ffffff;
    --popular-b: #f5f1ff;
    --popular-border: #8d79ff;
  --billing-slider-a: #3460ff;
  --billing-slider-b: #0072ec;
  --billing-slider-shadow: rgb(0 133 255 / 24%);
  --billing-slider-gloss: rgb(255 255 255 / 30%);
    --eyebrow-a: #dbedff;
    --eyebrow-b: #ede5ff;
    --eyebrow-text: #0957d5;
    --hero-tag-a: #deefff;
    --hero-tag-b: #e6ecff;
    --speech-a: #f8fbff;
    --speech-b: #f2f5ff;
    --speech-edge: rgb(255 255 255 / 93%);
    --chat-bubble: #e6f0ff;
    --chat-bubble-text: #45628e;
    --column-a: #f4f6fc;
    --column-b: #f5f7fd;
    --progress-a: #eff5ff;
    --progress-b: #f6f8fd;
    --done-a: #f1f9f6;
    --done-b: #f6f9fc;
    --count-bg: #e8edf7;
    --progress-count: #e3edff;
    --done-count: #e3f0ea;
    --success-text: #087546;
    --success-bg: #e1f9ec;
    --tag-design-bg: #f3edff;
    --tag-design-text: #684496;
    --tag-build-bg: #e9f2ff;
    --tag-build-text: #356098;
    --tag-qa-bg: #e5f6ed;
    --tag-qa-text: #2f6e4d;
    --tag-task-bg: #f0f3f9;
    --tag-task-text: #4c607e;
    --avatar-ring: #ffffff;
    --avatar-bg: #e5edfe;
    --slot-bg: #eaf0ff;
    --slot-border: #9baefa;
    --slot-progress-bg: #fff6df;
    --slot-progress-border: #e9bd55;
    --slot-done-bg: #e8f6ef;
    --slot-done-border: #98d7b7;
    --scrollbar: #99acce;
    --blue-icon-bg: #d3e9ff;
    --blue-icon: #0874ff;
    --purple-icon-bg: #f0e7ff;
    --purple-icon: #9742f6;
    --green-icon-bg: #e0faec;
    --green-icon: #00a65e;
    --orange-icon-bg: #fff0df;
    --orange-icon: #f68b2b;
    --indigo-icon-bg: #e9edff;
    --indigo-icon: #2361ff;
    --cyan-icon-bg: #d5efff;
    --cyan-icon: #008bc3;
    --wash-blue: #f0fbff;
    --wash-purple: #eae5ff;
    --wash-cyan: #e2f6ff;
    --wash-indigo: #edf2ff;
    --wash-lilac: #f4edff;
    --wash-violet: #f0eaff;
    --wash-mint: #eafaff;
    --wash-sky: #f0f9ff;
    --scene-blue-a: rgb(194 235 255 / 65%);
    --scene-blue-b: rgb(200 223 255 / 38%);
    --scene-purple-a: rgb(228 197 255 / 62%);
    --scene-purple-b: rgb(192 210 255 / 53%);
    --backdrop: rgb(20 27 66 / 35%);
    --shadow-color: rgb(68 108 203 / 4%);
    --workspace-shadow: rgb(97 137 211 / 10%);
    --flight-shadow: #41599335;
    --selection-bg: #dfddff;
    --selection-text: #161144;
  }
}