/* Shared surfaces and state colors for both pages. */
#signOutAccount {
  background: #ffffff;
  color: #18232e;
  border: 2px solid #526273;
  font-weight: 700;
  opacity: 1;
}
#signOutAccount:hover {
  background: #e5efe8;
}
html[data-theme="dark"] #signOutAccount {
  background: #22313b;
  color: #ffffff;
  border-color: #a9b9c8;
}
html[data-theme="dark"] #signOutAccount:hover {
  background: #304638;
}
#signOutAccount:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
#signOutAccount:disabled {
  cursor: wait;
}
:root {
  --surface: #ffffff;
  --surface-soft: #f3f6f5;
  --surface-hover: #e5efe8;
  --selection: #226d63;
  --on-selection: #ffffff;
  --range: #e2eee9;
  --error: #9b4231;
}
.theme-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 20px 0;
}
.theme-control label {
  cursor: pointer;
  font-weight: 600;
}
.theme-control input {
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 26px;
  padding: 3px;
  background: #64748b;
  border: 0;
  border-radius: 20px;
  flex-shrink: 0;
}
.theme-control input::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.theme-control input:checked {
  background: #226d63;
}
.theme-control input:checked::before {
  transform: translateX(18px);
}
.theme-control input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
html[data-theme="dark"] {
  --ink: #e6edf4;
  --muted: #a9b9c8;
  --paper: #101820;
  --line: #334351;
  --teal: #89d2bb;
  --amber: #f0c181;
  --surface: #1a2631;
  --surface-soft: #22313b;
  --surface-hover: #304638;
  --selection: #89d2bb;
  --on-selection: #101820;
  --range: #263e37;
  --error: #ffb4a5;
  color-scheme: dark;
}
html[data-theme="dark"]
  :is(
    .topbar,
    .panel,
    .stat,
    .location,
    .empty,
    .source,
    .origin-panel,
    .address-suggestions,
    .suggestion,
    .service-strip,
    .map-panel,
    .venue-card,
    .connection-card,
    .lot-permit-card,
    .preview,
    .map-label,
    dialog,
    .btn.secondary,
    .close,
    .refresh-button,
    .google-button,
    .auth-tabs button[aria-pressed="true"],
    select,
    textarea,
    input:not([type="checkbox"]):not([type="range"])
  ) {
  background: #1a2631;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .scenario,
    .radius-box,
    .detailgrid > div,
    .detail-signals > div,
    .evidence-pill,
    .location-map-links a,
    .preview-tag,
    .planner-summary,
    #trafficDetail,
    .lot-permit-card[open],
    .permit-selected-location,
    .callout,
    .badge,
    .map-legend,
    .service-strip label span
  ) {
  background: #263831;
  color: #c3e5d5;
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    h1,
    h2,
    h3,
    h4,
    .wordmark,
    .preview-bottom strong,
    .venue-title,
    .close-dialog,
    .textbtn,
    .quiet-link
  ) {
  color: var(--ink);
}
html[data-theme="dark"]
  :is(
    input[readonly],
    #planner input[readonly],
    #planner .planner-summary,
    #planner #trafficDetail
  ) {
  background: #22313b;
  color: var(--ink);
}
html[data-theme="dark"] :is(.button, .btn:not(.secondary):not(.outline)) {
  color: #101820;
}
html[data-theme="dark"] :is(.btn.dark, .btn.outline) {
  color: var(--ink);
}
html[data-theme="dark"] :is(.sidebar .brand, .closing h2) {
  color: #e6edf4;
}
html[data-theme="dark"] .badge.blue {
  background: #253750;
  color: #c3d9f2;
}
html[data-theme="dark"] .badge.amber {
  background: #453420;
  color: #f0c181;
}
html[data-theme="dark"] .evidence-pill.unknown {
  background: #29333d;
  color: var(--muted);
}
html[data-theme="dark"]
  :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a) {
  background: #1a2631;
  color: #e6edf4;
}
html[data-theme="dark"] .leaflet-popup-content {
  color: #e6edf4;
}
html[data-theme="dark"] dialog::backdrop {
  background: #02070dc9;
}
@media (prefers-reduced-motion: reduce) {
  .theme-control input::before {
    transition: none;
  }
}

html[data-theme="dark"] :is(label, .venue-why, .google-attribution) {
  color: var(--muted);
}
html[data-theme="dark"] :is(.venue-source a, .profile-avatar) {
  color: var(--teal);
}
html[data-theme="dark"]
  :is(
    .suggestions,
    .map-fallback,
    .map-provider,
    .eventdate,
    .budgetbar,
    .progress,
    .factor > div,
    .discovery-map,
    .leaflet-control-attribution,
    #profileInitial,
    .skip
  ) {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.gps-button, .venue-rank, .location-distance) {
  background: var(--range);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .suggestion:hover,
    .suggestion.selected,
    .location-map-links a:hover,
    select:hover:not(:disabled)
  ) {
  background-color: var(--surface-hover);
  color: var(--ink);
  border-color: var(--teal);
}
html[data-theme="dark"] :is(.preview-arrow, .closing .button) {
  color: #152137;
}
html[data-theme="dark"] .button:hover {
  background: #a4e0cb;
  color: #101820;
}
html[data-theme="dark"]
  :is(.origin-status.error, input:user-invalid, select:user-invalid) {
  color: var(--error);
}
html[data-theme="dark"]
  :is(.budgetrow, .venue-source, .steps article, .promise-strip) {
  border-color: var(--line);
}
html[data-theme="dark"] :focus-visible {
  outline-color: var(--teal);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
/* Keep the dropdown arrow when changing the dark control's background. */
html[data-theme="dark"] select {
  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='%2389d2bb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
@supports (appearance: base-select) {
  html[data-theme="dark"] select {
    background-image: none;
  }
  html[data-theme="dark"] select::picker(select) {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }
  html[data-theme="dark"] select option:is(:hover, :focus-visible, :checked) {
    background: var(--surface-hover);
    color: var(--ink);
  }
}
/* Outline buttons on light panels need dark text; the sidebar stays navy. */
html[data-theme="light"] .main .btn.outline {
  color: var(--ink);
}

html[data-theme="dark"] .leaflet-control-attribution a {
  color: var(--teal);
}
html[data-theme="dark"] .leaflet-popup-content button {
  color: #152137;
}
html[data-theme="light"] .evidence-pill.unknown {
  color: #5e685f;
}