/* Theme overrides are loaded last. The original light palette stays unchanged. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #d8dccc;
  border-radius: 99px;
  background: #fff;
  color: #514363;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.theme-toggle:hover { background: #eee7fa; border-color: #b9a3d8; }
.theme-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.theme-toggle:focus-visible { outline: 3px solid #9777c4; outline-offset: 4px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf0e7;
  --muted: #b0b8a8;
  --line: #40483b;
  --paper: #171b16;
  --accent: #c7aff4;
  --orange: #d0b9fb;
  --green: #bda1ef;
  --lavender: #332c43;
  --lime: #354127;
  --surface: #23291f;
  --surface-raised: #2c3327;
  --surface-input: #1c221a;
  --purple-line: #635176;
  --purple-text: #d5c1f4;
  --green-line: #5b7045;
  --green-text: #cbdda9;
  --warning-bg: #392d1d;
  --warning-line: #715833;
  --warning-text: #ebc38a;
  --error-bg: #3d2625;
  --error-line: #8c5651;
  --error-text: #ffb9ac;
}
html[data-theme="dark"] body { background: var(--paper); }
html[data-theme="dark"] ::selection { background: #725498; color: #fff; }
html[data-theme="dark"] :is(button, a, summary):focus-visible,
html[data-theme="dark"] :is(input, select, textarea):focus,
html[data-theme="dark"] .rating-option:focus-within {
  outline-color: #c6a5fb;
}
html[data-theme="dark"] :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

/* Navigation, including the fixed mobile navigation. */
html[data-theme="dark"] .topnav { background: #23291f99; border-color: var(--line); }
html[data-theme="dark"] .topnav a:hover { background: var(--surface-raised); color: var(--purple-text); }
html[data-theme="dark"] :is(.theme-toggle, .motion-toggle, .account-nav button) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] :is(.theme-toggle:hover, .motion-toggle[aria-pressed="false"], .account-nav button:first-child) {
  background: var(--lavender);
  border-color: var(--purple-line);
  color: var(--purple-text);
}
html[data-theme="dark"] .account-nav button:hover:not(:disabled) { background: #463655; border-color: #987cba; }
html[data-theme="dark"] .mobile-dock { background: #20261ef5; border-color: var(--line); box-shadow: 0 -4px 24px #0003; }
html[data-theme="dark"] .mobile-dock :is(a, button) { color: var(--purple-text); }
html[data-theme="dark"] .mobile-dock :is(a, button):active { background: var(--surface-raised); }
html[data-theme="dark"] .mobile-dock #mobile-count { background: var(--lavender); color: var(--purple-text); }
html[data-theme="dark"] .skip-link { background: var(--surface); }

/* Keep the lavender, lime and cream bento regions distinct in the dark. */
html[data-theme="dark"] .bento-tile { border-color: var(--line); }
html[data-theme="dark"] .hero-story { background: var(--surface); }
html[data-theme="dark"] .hero-story h1 em { color: #c8a6f4; }
html[data-theme="dark"] .hero-spark { color: #95b66e; }
html[data-theme="dark"] :is(.bento-label, .bento-lead, .hero-actions > span, .story-foot > span, .step-pills span) { color: var(--muted); }
html[data-theme="dark"] .story-foot { border-color: var(--line); }
html[data-theme="dark"] .story-foot strong { color: var(--green-text); }
html[data-theme="dark"] .avatar-stack svg { border-color: var(--surface); }
html[data-theme="dark"] .bento-cta { background: #d7e8ac; color: #25311d; box-shadow: 0 5px 0 #526738; }
html[data-theme="dark"] .bento-cta span { color: #3c5128; }
html[data-theme="dark"] .bento-cta:hover { background: #e3efc4; box-shadow: 0 8px 0 #526738; }
html[data-theme="dark"] .hero-people { border-color: var(--purple-line); }
html[data-theme="dark"] :is(.tile-heading .bento-label, .tile-caption, .hero-person small, .hero-person > b, .hero-empty) { color: var(--purple-text); }
html[data-theme="dark"] .tile-symbol { background: #ffffff14; }
html[data-theme="dark"] .hero-person { background: #ffffff07; border-color: #78658c; }
html[data-theme="dark"] .hero-person:hover { background: #493b59; }
html[data-theme="dark"] .hero-date { background: #322f23; border-color: #5e563d; }
html[data-theme="dark"] :is(.hero-date .bento-label, .date-display > div, .date-display #hero-weekday, .date-controls > span, .calendar-range) { color: #d4c8a7; }
html[data-theme="dark"] .date-controls button { background: #403c2b; border-color: #7b7151; color: #f1e5c5; }
html[data-theme="dark"] .date-controls button:hover:not(:disabled) { background: #554d36; }
html[data-theme="dark"] .date-controls button:disabled { opacity: .45; }
html[data-theme="dark"] .hero-stat { border-color: var(--green-line); }
html[data-theme="dark"] :is(.hero-stat p, .stat-bottom, .stat-flower) { color: var(--green-text); }
html[data-theme="dark"] .stat-bottom { border-color: var(--green-line); }
html[data-theme="dark"] .hero-scenarios { background: #252e20; border-color: var(--line); }
html[data-theme="dark"] .hero-scenarios .bento-label { color: var(--green-text); }
html[data-theme="dark"] .workspace-intro em { color: var(--purple-text); }
html[data-theme="dark"] .step-pills span { border-color: var(--line); }
html[data-theme="dark"] .step-pills b { color: var(--purple-text); }

/* Event brief and native controls. Native date/select popups use color-scheme. */
html[data-theme="dark"] :is(.brief-panel, .contractor, .empty-state) { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.panel-heading, .optional-fields, .card-bottom) { border-color: var(--line); }
html[data-theme="dark"] .step { background: var(--lavender); border-color: var(--purple-line); color: var(--purple-text); }
html[data-theme="dark"] :is(input, select, textarea, #review-text) { background: var(--surface-input); border-color: #65705b; color: var(--ink); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #a3ad99; opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea):hover:not(:disabled) { border-color: #ac93cd; }
html[data-theme="dark"] :is(.optional-fields summary, .brief-footnote, .demo-queries > summary, .method summary) { color: var(--muted); }
html[data-theme="dark"] :is(.budget-presets button, .demo-queries button) { background: var(--surface-raised); border-color: #5c6951; color: var(--ink); }
html[data-theme="dark"] :is(.budget-presets button, .demo-queries button):hover { background: #3d4735; border-color: #90a379; }
html[data-theme="dark"] .budget-presets button[aria-pressed="true"] { background: var(--lavender); border-color: #a28abd; color: var(--purple-text); }
html[data-theme="dark"] .primary-button { background: #8161bd; color: #fff; }
html[data-theme="dark"] .primary-button:hover { background: #7452b0; }
html[data-theme="dark"] .primary-button > span { color: #fff; }
html[data-theme="dark"] .demo-queries { border-color: #637057; }
html[data-theme="dark"] :is(.form-error, .change-hint) { background: var(--error-bg); color: var(--error-text); }
html[data-theme="dark"] .calendar-change { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-text); }

/* Recommendations, source evidence and saved comparisons. */
html[data-theme="dark"] .catalog-tabs { background: #1c2219; border-color: var(--line); }
html[data-theme="dark"] .catalog-tabs button { color: var(--muted); }
html[data-theme="dark"] .catalog-tabs button[aria-selected="true"] { background: var(--lavender); color: var(--purple-text); box-shadow: 0 2px 8px #0002; }
html[data-theme="dark"] :is(.catalog-tabs span, .count-badge) { background: #493858; color: #e2cef9; }
html[data-theme="dark"] .results-heading .eyebrow { color: var(--purple-text); }
html[data-theme="dark"] .selection-tools { background: #293320; border-color: var(--green-line); }
html[data-theme="dark"] .selection-tools p { color: var(--green-text); }
html[data-theme="dark"] .contractor.best { background: linear-gradient(110deg, #23291f 62%, #2e3723); border-color: #697e4e; }
html[data-theme="dark"] .card-kicker > span:first-child { color: var(--muted); }
html[data-theme="dark"] :is(.available, .available > span, .fit-reasons) { color: #c2dca7; }
html[data-theme="dark"] .avatar:not(.portrait-avatar) { background: #3b492e; color: #dbeaca; }
html[data-theme="dark"] .avatar.tone1 { background: #514031; color: #f0d5b7; }
html[data-theme="dark"] .avatar.tone2 { background: #324456; color: #c4d9ed; }
html[data-theme="dark"] :is(.rating-preview, .rating-preview strong) { color: var(--ink); }
html[data-theme="dark"] :is(.rating-mini, .rating-summary > span:first-child, .review-stars) { color: #efbd72; }
html[data-theme="dark"] .evidence-box { background: #1d2519; border-color: #425236; }
html[data-theme="dark"] .evidence-box h4 { color: var(--green-text); }
html[data-theme="dark"] .evidence-box h4 span { color: var(--purple-text); }
html[data-theme="dark"] .evidence-box blockquote { color: #d6dfcd; }
html[data-theme="dark"] :is(.evidence-source, .price-note, .price-note > span, .exclusion-note) { color: var(--muted); }
html[data-theme="dark"] .source-tag { background: #343e2b; color: #c3cdb6; }
html[data-theme="dark"] .source-tag.synthetic { background: var(--lavender); color: var(--purple-text); }
html[data-theme="dark"] .data-warning { background: var(--warning-bg); color: var(--warning-text); }
html[data-theme="dark"] :is(.details-button, .save-button, .shortlist-open) { background: var(--surface-raised); border-color: #647454; color: var(--ink); }
html[data-theme="dark"] :is(.details-button, .save-button, .shortlist-open):hover { background: #39442f; border-color: #a0b287; box-shadow: 0 3px 9px #0003; }
html[data-theme="dark"] .save-button[aria-pressed="true"] { background: var(--lavender); border-color: #a58abc; color: #e0c6fc; }
html[data-theme="dark"] .shortlist-open > span { background: #3b482e; }
html[data-theme="dark"] .method { background: #20271d; border-color: var(--line); }
html[data-theme="dark"] .empty-icon { background: var(--warning-bg); color: var(--warning-text); }
html[data-theme="dark"] :is(.comparison-query, .comparison-table thead th) { background: #303c25; color: var(--ink); }
html[data-theme="dark"] .comparison-table tbody th { background: #242d1e; }
html[data-theme="dark"] .comparison-table button { color: var(--error-text); }
html[data-theme="dark"] .shortlist-empty > span { color: var(--warning-text); }
html[data-theme="dark"] .ux-toast { background: #e0cff5; color: #31223f; box-shadow: 0 12px 36px #0005; }

/* Profile and review dialogs. Sticky headers must match the dialog surface. */
html[data-theme="dark"] dialog { background: var(--surface); border-color: #637056; box-shadow: 0 28px 100px #0008; }
html[data-theme="dark"] dialog::backdrop { background: #0a0c09b8; }
html[data-theme="dark"] .icon-button { background: var(--surface-raised); border-color: #627154; color: var(--ink); }
html[data-theme="dark"] #details-dialog .dialog-header { background: var(--surface); box-shadow: 0 -24px 0 var(--surface); }
html[data-theme="dark"] .review-card { border-color: var(--line); }
html[data-theme="dark"] #dialog-content :is(.review-card p, .review-status) { color: #cedfc0; }
html[data-theme="dark"] #dialog-content .reviews-disclaimer { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-text); }
html[data-theme="dark"] .review-label { background: var(--warning-bg); color: var(--warning-text); }
html[data-theme="dark"] .remove-review { color: var(--error-text); }
html[data-theme="dark"] .own-reviews-title { color: var(--green-text); }
html[data-theme="dark"] .write-review { background: #29242f; border-color: var(--purple-line); }
html[data-theme="dark"] .rating-option { background: var(--surface-input); border-color: #65705b; }
html[data-theme="dark"] .rating-option span { color: #b5bdad; }
html[data-theme="dark"] .rating-option.selected { background: var(--warning-bg); border-color: #c79857; }
html[data-theme="dark"] .rating-option.selected span { color: #efbd72; }

/* Account, sign-in and booking states share the same semantic colors. */
html[data-theme="dark"] :is(.account-heading .bento-label, .account-heading .eyebrow, .account-dialog .dialog-header .eyebrow) { color: var(--purple-text); }
html[data-theme="dark"] .account-tile { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .account-tile--accent { background: var(--lavender); border-color: var(--purple-line); }
html[data-theme="dark"] .account-tile--lime { background: var(--lime); border-color: var(--green-line); }
html[data-theme="dark"] .account-tile--dark { background: #242d1f; border-color: #5b684a; }
html[data-theme="dark"] .account-tile-icon { background: #ffffff0d; border-color: #847093; color: var(--purple-text); }
html[data-theme="dark"] :is(.account-tile--lime .account-tile-icon, .account-tile--dark .account-tile-icon) { border-color: #7b905d; color: var(--green-text); }
html[data-theme="dark"] .account-tile p { color: #d0bfdc; }
html[data-theme="dark"] :is(.account-tile--lime p, .account-tile--dark p) { color: var(--green-text); }
html[data-theme="dark"] :is(.account-action, .order-create-btn, .account-secondary) { background: var(--surface-raised); border-color: #88719d; color: var(--purple-text); }
html[data-theme="dark"] :is(.account-action, .order-create-btn, .account-secondary):hover:not(:disabled) { background: #483858; border-color: #c1a2db; box-shadow: 0 4px 14px #0003; }
html[data-theme="dark"] .account-tile--lime .account-action { background: #ffffff0c; border-color: #80955e; color: #dbeac8; }
html[data-theme="dark"] .account-tile--lime .account-action:hover:not(:disabled) { background: #4a5a35; border-color: #a4bf7c; }
html[data-theme="dark"] .account-tile--dark .account-action { background: #ddebab; border-color: #ddebab; color: #2e3a21; }
html[data-theme="dark"] .account-tile--dark .account-action:hover:not(:disabled) { background: #e8f3c6; border-color: #e8f3c6; }
html[data-theme="dark"] :is(.account-status, .account-status[data-state="development"], .account-message, .order-state) { background: var(--lavender); border-color: var(--purple-line); color: var(--purple-text); }
html[data-theme="dark"] :is(.account-status[data-state="offline"], .order-state[data-status="pending"]) { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-text); }
html[data-theme="dark"] :is(.account-status[data-state="ready"], .account-message[data-kind="success"], .order-state[data-status="accepted"]) { background: #2b3a20; border-color: var(--green-line); color: var(--green-text); }
html[data-theme="dark"] :is(.account-message[data-kind="error"], .order-state[data-status="declined"]) { background: var(--error-bg); border-color: var(--error-line); color: var(--error-text); }
html[data-theme="dark"] .order-state[data-status="cancelled"] { background: #30372a; border-color: #5b6552; color: #c0c8b6; }
html[data-theme="dark"] .account-dialog { background: var(--surface); border-color: var(--purple-line); }
html[data-theme="dark"] .account-dialog .dialog-header .icon-button { background: var(--lavender); border-color: var(--purple-line); color: var(--purple-text); }
html[data-theme="dark"] .account-tabs { background: #1f1c24; border-color: var(--purple-line); }
html[data-theme="dark"] .account-tabs button { color: #c1b2cb; }
html[data-theme="dark"] .account-tabs button[aria-pressed="true"] { background: #49395a; color: #eee2fc; box-shadow: 0 2px 5px #0003; }
html[data-theme="dark"] .account-tabs button:hover:not([aria-pressed="true"]):not(:disabled) { background: #342b3e; }
html[data-theme="dark"] .account-form label { color: #d4ddc9; }
html[data-theme="dark"] :is(.account-form input:not([type="checkbox"]):not([type="radio"]), .account-form select, .account-form textarea) { background: var(--surface-input); border-color: #69785a; color: var(--ink); }
html[data-theme="dark"] :is(.account-form input, .account-form textarea)::placeholder { color: #a3ad99; }
html[data-theme="dark"] :is(.account-form input, .account-form select, .account-form textarea):focus-visible { outline-color: #c6a5fb; border-color: #ba99e1; }
html[data-theme="dark"] .account-form [aria-invalid="true"] { background: var(--error-bg) !important; border-color: #d78c82 !important; }
html[data-theme="dark"] :is(.account-help, .account-order p, .account-order-facts) { color: var(--muted); }
html[data-theme="dark"] .account-help a { color: var(--purple-text); }
html[data-theme="dark"] .account-actions > .account-action { background: #8161bd; border-color: #a98acf; color: #fff; }
html[data-theme="dark"] .account-actions > .account-action:hover:not(:disabled) { background: #7452b0; border-color: #bd9ce2; }
html[data-theme="dark"] .account-checkbox input[type="checkbox"] { accent-color: #b691e9; }
html[data-theme="dark"] .account-order { background: #1f261c; border-color: var(--line); }
html[data-theme="dark"] .account-order-facts strong { color: var(--green-text); }
html[data-theme="dark"] .account-empty { background: #1f271a; border-color: #637553; color: var(--muted); }
html[data-theme="dark"] .account-empty h3 { color: var(--green-text); }
html[data-theme="dark"] .account-provider { background: var(--lavender); border-color: var(--purple-line); }
html[data-theme="dark"] .account-provider-avatar { background: #504060; color: var(--purple-text); }
html[data-theme="dark"] .account-provider small { color: var(--purple-text); }
html[data-theme="dark"] :is(.account-form input, .account-form select, .account-form textarea):disabled { background: #30362c; color: #b5beaa; }

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .bento-tile:hover { border-color: #899b72; box-shadow: 0 14px 34px #0003; }
  html[data-theme="dark"] :is(.contractor, .account-tile):hover { border-color: #a08ab8; box-shadow: 0 10px 30px #0003; }
}

/* Two compact rows keep the theme label visible even on a 320px screen. */
@media (max-width: 700px) {
  .topbar:has(.theme-toggle) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
    row-gap: 12px;
  }
  .topbar:has(.theme-toggle) .brand { grid-column: 1 / 3; grid-row: 1; }
  .topbar .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; padding: 9px 11px; font-size: 10px; }
  .topbar:has(.theme-toggle) .topnav { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; flex-basis: auto; justify-content: flex-start; }
  .topbar:has(.theme-toggle) .motion-toggle { grid-column: 2; grid-row: 2; margin: 0; min-height: 44px; }
  .topbar:has(.theme-toggle) .account-nav { grid-column: 3; grid-row: 2; justify-content: flex-end; flex-basis: auto; margin: 0; padding: 0; }
  .topbar:has(.theme-toggle) .account-nav button { min-height: 44px; padding: 9px 11px; font-size: 11px; }
  html[data-theme="dark"] .topnav { background: none; border: 0; }
}
@media (max-width: 360px) {
  .topbar .theme-toggle { padding: 9px; }
  .topbar:has(.theme-toggle) .motion-toggle { padding: 7px 8px; }
  .topbar:has(.theme-toggle) .account-nav button { padding: 9px; font-size: 10px; }
}