/* Shared native selects: preserve labels, validation, typeahead, form submission,
   and change events. Supporting browsers also theme the top-layer picker. */
.app, body.welcome {
  --select-bg: #183139;
  --select-ink: #e3eee8;
  --select-line: #47615f;
  --select-accent: #b6d5c8;
  --select-hover: #294b4c;
  --select-selected: #355b55;
  --select-muted: #a6bdb5;
  --select-scheme: dark;
}
.app.theme-ember {
  --select-bg: #352834;
  --select-ink: #f4e8eb;
  --select-line: #725564;
  --select-accent: #e6bcad;
  --select-hover: #4a3645;
  --select-selected: #614652;
  --select-muted: #d1b4c1;
}
.app.theme-grove {
  --select-bg: #20392d;
  --select-ink: #edf2e4;
  --select-line: #4f7059;
  --select-accent: #cbd3a3;
  --select-hover: #304e39;
  --select-selected: #456244;
  --select-muted: #bbcab0;
}
.app.theme-paper {
  --select-bg: #ece9df;
  --select-ink: #35423b;
  --select-line: #b4b9aa;
  --select-accent: #526a57;
  --select-hover: #e1e3d6;
  --select-selected: #d3dcc9;
  --select-muted: #707c6c;
  --select-scheme: light;
}
.app.theme-dusk {
  --select-bg: #282635;
  --select-ink: #f0f1eb;
  --select-line: #514c65;
  --select-accent: #c9c0df;
  --select-hover: #38354d;
  --select-selected: #514c65;
  --select-muted: #b6adcf;
}
.app.theme-tide {
  --select-bg: #21303c;
  --select-ink: #f0f1eb;
  --select-line: #4b6573;
  --select-accent: #bdd8df;
  --select-hover: #2e4657;
  --select-selected: #4b6573;
  --select-muted: #a3c1cf;
}
.app.theme-sage {
  --select-bg: #2b322d;
  --select-ink: #f0f1eb;
  --select-line: #5c6958;
  --select-accent: #d0d9bd;
  --select-hover: #3d4a3e;
  --select-selected: #5c6958;
  --select-muted: #bec9ad;
}
.app.theme-sand {
  --select-bg: #342c28;
  --select-ink: #f0f1eb;
  --select-line: #6a5949;
  --select-accent: #e0cdb2;
  --select-hover: #4b3f35;
  --select-selected: #6a5949;
  --select-muted: #cfbba2;
}
/* Light surfaces retain the atmosphere's accent without inheriting dark ink. */
.app :is(.profile-card, .settings-row, .paper-side, .idea-detail, .sb-form, .sb-card, .ui-page .sky-form) {
  --select-bg: #faf9f2;
  --select-ink: #35463d;
  --select-line: #c8d2c2;
  --select-accent: #52745f;
  --select-hover: #edf0e5;
  --select-selected: #dfe8d6;
  --select-muted: #7b8776;
  --select-scheme: light;
}
.app.theme-ember :is(.profile-card, .settings-row, .paper-side, .idea-detail, .sb-form, .sb-card, .ui-page .sky-form) {
  --select-accent: #87586e; --select-hover: #f1e6ea; --select-selected: #e9d6df; --select-line: #d7c5cd;
}
.app.theme-grove :is(.profile-card, .settings-row, .paper-side, .idea-detail, .sb-form, .sb-card, .ui-page .sky-form) {
  --select-accent: #536b3f; --select-hover: #eaf0df; --select-selected: #dde7cb;
}
.app:is(.theme-dusk, .theme-tide, .theme-sage, .theme-sand) :is(.profile-card, .settings-row, .paper-side, .idea-detail, .sb-form, .sb-card, .ui-page .sky-form) {
  --select-accent: var(--ambient-2);
  --select-line: color-mix(in srgb, var(--ambient-2) 25%, #faf9f2);
  --select-hover: color-mix(in srgb, var(--ambient-2) 8%, #faf9f2);
  --select-selected: color-mix(in srgb, var(--ambient-2) 15%, #faf9f2);
}
body.daybook-admin {
  --select-bg: #fff;
  --select-ink: #3e354e;
  --select-line: #dcd8e4;
  --select-accent: #625083;
  --select-hover: #f4f0f9;
  --select-selected: #eee8f7;
  --select-muted: #857b92;
  --select-scheme: light;
}
body.product-led {
  --select-bg: #fffdf6; --select-ink: #2a4541; --select-line: #cbd0c2;
  --select-accent: #52745f; --select-hover: #eef0e5; --select-selected: #e1e7d8;
  --select-muted: #697970; --select-scheme: light;
}
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]) {
  appearance: none;
  color-scheme: var(--select-scheme, light);
  color: var(--select-ink);
  background-color: var(--select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%238b8796' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--select-line);
  border-radius: 10px;
  min-height: 42px;
  max-width: 100%;
  min-width: 0;
  padding: 10px 38px 10px 13px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]):hover:not(:disabled) {
  border-color: var(--select-accent);
}
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]):focus-visible {
  outline: 2px solid var(--select-accent);
  outline-offset: 3px;
  border-color: var(--select-accent);
}
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]):disabled {
  opacity: .55;
  cursor: not-allowed;
}
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select option,
:is(body .app, body.daybook-admin, body.product-led, body.welcome) select optgroup {
  color: var(--select-ink);
  background: var(--select-bg);
}
@supports (appearance: base-select) {
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]),
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select:not([multiple]):not([size]) {
    background-image: none;
    padding-right: 13px;
    gap: 18px;
    align-items: center;
  }
  select::picker-icon {
    color: var(--select-accent);
    width: 14px;
    font-size: 12px;
    transition: rotate .15s;
  }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    color: var(--select-ink);
    background: var(--select-bg);
    border: 1px solid var(--select-line);
    border-radius: 13px;
    padding: 6px;
    margin-block: 6px;
    box-shadow: 0 14px 38px #17212b26, 0 2px 7px #17212b12;
    font: inherit;
    max-height: min(360px, 60dvh);
    max-width: calc(100vw - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--select-line) var(--select-bg);
  }
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    min-height: 40px;
    border-radius: 7px;
    margin: 2px 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 400;
    cursor: pointer;
  }
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select option:checked {
    color: var(--select-ink);
    background: var(--select-selected);
    font-weight: 700;
  }
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select option:hover:not(:disabled),
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select option:focus-visible {
    background: var(--select-hover);
    outline: 1px solid var(--select-accent);
    outline-offset: -1px;
  }
  select option::checkmark { color: var(--select-accent); order: 1; margin-left: auto; }
  :is(body .app, body.daybook-admin, body.product-led, body.welcome) select option:disabled {
    color: var(--select-muted); opacity: .65; cursor: not-allowed;
  }
  select optgroup { padding: 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  select, select::picker-icon { transition: none !important; }
}
@media (forced-colors: active) {
  select, select::picker(select) { border-color: ButtonText; }
}