/* Shared theme picker; load after page styles. The wrapped label works without generated IDs. */
[data-theme-control] { display:inline-flex; flex:none; align-items:center; }
.theme-picker { display:inline-flex; align-items:center; gap:7px; margin:0;
  color:var(--muted); font:500 12px/1.2 var(--font); white-space:nowrap; }
.theme-picker .theme-select { width:auto; min-width:82px; min-height:34px; padding:0 8px;
  border:1px solid var(--hair-2); border-radius:var(--r-s); background:var(--surface);
  color:var(--ink); font:500 12px/1.2 var(--font); cursor:pointer; }
.app-header .theme-picker,
[data-theme-inverse] .theme-picker { color:var(--on-dark-muted); }
.app-header .theme-picker .theme-select,
[data-theme-inverse] .theme-picker .theme-select { background:var(--dark); color:var(--on-dark); border-color:#647176; color-scheme:dark; }
.theme-picker .theme-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
.app-header .theme-picker .theme-select:focus-visible,
[data-theme-inverse] .theme-picker .theme-select:focus-visible { outline-color:#8BD7D8; }
@media (max-width:820px), (pointer:coarse) {
  .theme-picker .theme-select { min-height:44px; font-size:16px; }
}

/* Inverse controls need their own foreground; --ink becomes pale in dark mode. */
html[data-theme="dark"] .tab.on,
html[data-theme="dark"] .chip.on,
html[data-theme="dark"] .chip.mark,
html[data-theme="dark"] button.go,
html[data-theme="dark"] .card .marks button.on,
html[data-theme="dark"] .pop .cta {
  background:var(--primary); color:var(--primary-ink); border-color:var(--primary);
}
html[data-theme="dark"] button.go:hover { background:var(--primary-hover); }
html[data-theme="dark"] header .links .tab { background:var(--on-dark); color:var(--dark); }
html[data-theme="dark"] .qp-mode.on,
html[data-theme="dark"] .abubble.on { color:var(--on-accent); }
html[data-theme="dark"] .abubble.on b { color:var(--on-accent); }
html[data-theme="dark"] .back { background:var(--surface); }
html[data-theme="dark"] .opener textarea { background:var(--surface); color:var(--ink); }
html[data-theme="dark"] select.input {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A4B2B5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
html[data-theme="dark"] .map-tools .btn,
html[data-theme="dark"] .marker { border-color:var(--hair-2); }
html[data-theme="dark"] .maplibregl-ctrl-group button:hover { background-color:var(--soft); }
/* Only MapLibre's monochrome control glyphs change. Tiles, photos and canvas stay original. */
html[data-theme="dark"] .maplibregl-ctrl-icon { filter:invert(1); }
html[data-theme="dark"] .maplibregl-ctrl-attrib-button { background-color:transparent; filter:invert(1); }

/* These shared dialogs predate the Atlas tokens. */
html[data-theme="dark"] .property-report-dialog,
html[data-theme="dark"] .property-report-dialog select,
html[data-theme="dark"] .property-report-dialog textarea,
html[data-theme="dark"] .property-report-dialog button,
html[data-theme="dark"] .import-calendar-panel,
html[data-theme="dark"] .import-calendar-panel button {
  background:var(--surface); color:var(--ink); border-color:var(--hair-2);
}
html[data-theme="dark"] .property-report-dialog .report-help,
html[data-theme="dark"] .import-calendar-panel p,
html[data-theme="dark"] #calendar-grid small,
html[data-theme="dark"] .availability-status { color:var(--muted); }
html[data-theme="dark"] .property-report-dialog button.report-submit,
html[data-theme="dark"] #calendar-grid button.selected {
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
html[data-theme="dark"] #calendar-grid button.selected small { color:var(--on-accent); }
html[data-theme="dark"] #calendar-grid button.pending { outline-color:var(--accent); }
html[data-theme="dark"] .availability-status[data-state="available"] { color:var(--good); }
html[data-theme="dark"] .availability-status[data-state="unavailable"] { background:var(--crit-soft); color:var(--crit); }