/* Resolve derived colors on the root, where the original personal palette lives.
   Night-mode overrides on body never overwrite the user's saved colors. */
html.vf-personal-palette {
  --vf-night-personal-canvas: color-mix(in srgb, var(--vf-personal-background) 10%, #090c12);
  --vf-night-personal-card: color-mix(in srgb, var(--vf-personal-card) 14%, #11151d);
  --vf-night-personal-raised: color-mix(in srgb, var(--vf-personal-card) 18%, #171d27);
  --vf-night-personal-border: color-mix(in srgb, var(--vf-personal-border) 30%, #323a48);
  --vf-night-personal-text: color-mix(in srgb, var(--vf-personal-text) 8%, #ffffff);
  --vf-night-personal-muted: color-mix(in srgb, var(--vf-personal-muted) 25%, #ffffff);
  --vf-night-personal-link: color-mix(in srgb, var(--vf-personal-accent) 40%, #ffffff);
}
html.vf-personal-palette body.night-mode:not(.vf-page-admin) {
  --vf-personal-background: var(--vf-night-personal-canvas);
  --vf-personal-card: var(--vf-night-personal-card);
  --vf-personal-border: var(--vf-night-personal-border);
  --vf-personal-text: var(--vf-night-personal-text);
  --vf-personal-muted: var(--vf-night-personal-muted);
  --vf-dark-canvas: var(--vf-night-personal-canvas);
  --vf-dark-surface: var(--vf-night-personal-card);
  --vf-dark-surface-raised: var(--vf-night-personal-raised);
  --vf-dark-line: var(--vf-night-personal-border);
  --vf-dark-line-strong: var(--vf-night-personal-border);
  --vf-dark-text: var(--vf-night-personal-text);
  --vf-dark-muted: var(--vf-night-personal-muted);
  --vf-dark-link: var(--vf-night-personal-link);
  /* Rebind aliases here: root-level aliases otherwise retain daytime values. */
  --link-color: var(--vf-night-personal-link);
  --body-bg-color: var(--vf-personal-background);
  --body-bg-color-dark: var(--vf-personal-background);
  --header-bg-color: var(--vf-personal-card);
  --header-bg-color-dark: var(--vf-personal-card);
  --body-color: var(--vf-personal-text);
  --body-color-dark: var(--vf-personal-text);
  --card-dark-color: var(--vf-personal-card);
  --card-dark-divider: var(--vf-personal-border);
  --card-dark-hover: var(--vf-night-personal-raised);
  --card-dark-input: var(--vf-personal-card);
  --card-dark-input-color: var(--vf-personal-text);
}
html.vf-personal-palette body.night-mode:not(.vf-page-admin) .main-wrapper a:not(.btn):not([class*="danger"]):not(.bg-primary) {
  color: var(--vf-night-personal-link);
}
html.vf-personal-palette body.night-mode:not(.vf-page-admin) .vf-neighborhood-flat-link.is-active {
  background: color-mix(in srgb, var(--vf-personal-accent) 25%, var(--vf-dark-surface)) !important;
  color: var(--vf-dark-text) !important;
}
html.vf-personal-palette body.night-mode:not(.vf-page-admin) .vf-neighborhood-flat-link.is-active > i {
  background: var(--vf-personal-accent) !important;
  color: var(--vf-personal-button-text) !important;
}
/* Clear legacy blue/teal button gradients so the selected accent is visible. */
html.vf-personal-palette body.night-mode:not(.vf-page-admin) .main-wrapper .btn-primary,
html.vf-personal-palette body.night-mode:not(.vf-page-admin) .main-wrapper .bg-primary {
  background: var(--vf-personal-accent) !important;
  border-color: var(--vf-personal-accent) !important;
  color: var(--vf-personal-button-text) !important;
}

/* A peer of notifications/account, with an inline preferences dropdown. */
.main-header .vf-appearance-dropdown {
  width: 292px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  text-align: start;
}
.main-header .vf-header-appearance .vf-appearance-icon {
  color: inherit;
  vertical-align: middle;
}
.main-header .vf-header-appearance > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* Header icon colors must not leak into the settings fields. */
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown {
  background: var(--vf-personal-card, #fff) !important;
  color: var(--vf-personal-text, #172033) !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown :is(h6, label, label > span) {
  color: inherit !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown :is(input, select) {
  background-color: var(--vf-personal-card, #fff) !important;
  color: var(--vf-personal-text, #172033) !important;
  border: 1px solid var(--vf-personal-border, #ccd5e2) !important;
}
html body.night-mode .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown,
html body.night-mode .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown :is(input, select) {
  background-color: var(--vf-dark-surface, #111b28) !important;
  color: var(--vf-dark-text, #edf4ff) !important;
  border-color: var(--vf-dark-line, #46546a) !important;
}
.main-header .vf-header-appearance svg.vf-appearance-icon circle,
.main-header .vf-header-appearance svg.vf-appearance-icon path:not([stroke="none"]) {
  fill: none !important;
  stroke: currentColor !important;
}
.main-header .vf-header-appearance svg.vf-appearance-icon path[stroke="none"] {
  fill: currentColor !important;
  stroke: none !important;
}

/* Appearance dropdown polish: keep header spacing independent of menu width. */
html body .main-wrapper .main-header .navbar-wrapper > ul > li.vf-header-appearance {
  margin-right: 14px !important;
  flex-shrink: 0;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown {
  --vf-appearance-ink: var(--vf-personal-text, #172033);
  --vf-appearance-muted: var(--vf-personal-muted, #65748b);
  --vf-appearance-line: var(--vf-personal-border, #dce3ed);
  --vf-appearance-field: var(--vf-personal-card, #f6f8fc);
  width: 320px;
  padding: 0 !important;
  margin-top: 12px !important;
  border: 1px solid var(--vf-appearance-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgba(16, 32, 60, .18), 0 3px 10px rgba(16, 32, 60, .06) !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown .vf-appearance {
  padding: 22px !important;
  line-height: 1.45;
  text-align: start;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-heading {
  padding-bottom: 17px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--vf-appearance-line);
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-heading h6 {
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  margin: 0 0 5px !important;
  letter-spacing: -.25px;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-heading p,
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-help,
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-storage {
  color: var(--vf-appearance-muted) !important;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.vf-appearance-field { display: block; margin: 0; min-width: 0; }
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-field > span {
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 7px !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown :is(input, select) {
  height: 46px !important;
  min-height: 46px;
  padding: 10px 12px !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 11px !important;
  border-color: var(--vf-appearance-line) !important;
  background-color: var(--vf-appearance-field) !important;
  color: var(--vf-appearance-ink) !important;
  box-shadow: none !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown select {
  appearance: auto !important;
  background-image: none !important;
}
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown :is(input, select):focus-visible {
  outline: 2px solid var(--vf-personal-accent, #497cf1) !important;
  outline-offset: 2px;
}
.vf-appearance-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.vf-appearance-help { display: block; margin-top: 12px !important; }
html body .main-wrapper .main-header .vf-header-appearance .vf-appearance-storage {
  display: block;
  border-top: 1px solid var(--vf-appearance-line);
  padding-top: 15px;
  margin-top: 18px;
}
html body.night-mode .main-wrapper .main-header .vf-header-appearance .vf-appearance-dropdown {
  --vf-appearance-ink: var(--vf-dark-text, #edf4ff);
  --vf-appearance-muted: var(--vf-dark-muted, #a9bbd2);
  --vf-appearance-line: var(--vf-dark-line, #35445a);
  --vf-appearance-field: var(--vf-dark-surface-raised, #1b283a);
}