/* Component applications of the shared palette. Geometry/interaction stays in
   the existing stylesheets. Product and participant colors remain data-driven. */
body { background: var(--bg); color: var(--text); }
body :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
body :is(input, select, textarea) { color: var(--text); }
body :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
body :is(.text-input, .toggle-row, .file-input-shell) { border-color: var(--control-border); }
body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--focus); }
body .primary-button,
body[data-shell="admin"] .primary-button { background: var(--action); color: var(--on-action); box-shadow: none; }
body .primary-button:hover:not(:disabled),
body[data-shell="admin"] .primary-button:hover:not(:disabled) { background: var(--action-hover); }
body .primary-button:active:not(:disabled),
body[data-shell="admin"] .primary-button:active:not(:disabled) { background: var(--action-pressed); }
body .secondary-button { background: var(--surface-elevated); color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--border); }
body .secondary-button:hover:not(:disabled) { background: var(--hover); }
body .secondary-button:active:not(:disabled) { background: var(--pressed); }
body .secondary-button.is-active { background: var(--selection); color: var(--brand-primary); box-shadow: inset 0 0 0 2px var(--focus); }
body :is(.primary-button, .secondary-button):disabled,
body[data-shell="admin"] :is(.primary-button, .secondary-button):disabled {
  background: var(--disabled-bg); color: var(--disabled-text); opacity: 1; cursor: not-allowed; box-shadow: none;
}
body[data-shell="admin"] .admin-tabs .is-active { background: var(--action); color: var(--on-action); }
body[data-shell="admin"] .danger-button { color: var(--danger); background: var(--danger-soft); }
body :is(.manual-route-marker, .session-badge.is-live) { background: var(--brand-accent); color: var(--on-accent); }
.admin-worker-avatar, .menu-back-action-icon { background: var(--action); color: var(--on-action); }
.assignment-toggle { border-color: var(--control-border); }
.worker-menu-settings > .theme-setting { justify-content: space-between; padding-block: 12px; }
body[data-shell="admin"] .ops-mode-switch { align-items: center; }
.worker-shell-header { flex-wrap: wrap; }
.worker-home-theme { margin-top: 12px; }
.sticker-dialog :is(textarea,select), .sticker-admin :is(input,select,textarea) { color: var(--text); border-color: var(--control-border); }
.sticker-dialog textarea, .sticker-dialog select, .sticker-types span { border-color: var(--control-border); }
body[data-shell="worker"] .worker-menu-settings .toggle-row > input { border-color: var(--control-border); }
body[data-shell="worker"] .worker-menu-settings .toggle-row > input::before { background: var(--muted); }
body[data-shell="worker"] .worker-menu-settings .toggle-row > input:checked { background: var(--action); border-color: var(--action); }
body[data-shell="worker"] .worker-menu-settings .toggle-row > input:checked::before { background: var(--on-action); }
.assignment-row.is-selected .assignment-toggle { background: var(--action); border-color: var(--action); }
.assignment-row.is-selected .assignment-toggle::after { border-color: var(--on-action); }
.sticker-toast, .sticker-toast button { color: var(--on-overlay); }
.gps-recovery-panel { border: 1px solid var(--border); }
.gps-recovery-panel button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--text); border-color: var(--control-border); }
.leaflet-tooltip { background: var(--surface); color: var(--text); border-color: var(--border); }
.leaflet-control-attribution { background: var(--surface) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--brand-primary); text-decoration: underline; }
/* A light basemap is intentional. Never invert map tiles or product swatches. */
.house-marker, .flat-marker { color: var(--on-product, #FFFFFF); }
.house-marker.house-marker-complete, .flat-marker.flat-marker-complete {
  background: var(--map-complete); color: var(--on-map-complete); opacity: 1; border-style: dashed;
}
.house-marker-complete .house-marker-label { text-decoration: line-through; }
.house-marker.house-marker-nearest, .flat-marker.flat-marker-nearest { outline: 3px solid var(--map-target-ring); outline-offset: 1px; }
.gps-signal-bar { background: color-mix(in srgb, var(--on-overlay) 35%, transparent); }
.gps-signal-badge[data-signal-strength="1"] .gps-signal-bar:nth-child(1),
.gps-signal-badge[data-signal-strength="2"] .gps-signal-bar:nth-child(-n + 2),
.gps-signal-badge[data-signal-strength="3"] .gps-signal-bar:nth-child(-n + 3),
.gps-signal-badge[data-signal-strength="4"] .gps-signal-bar:nth-child(-n + 4),
.gps-signal-badge[data-gps-state="unavailable"]::before,
.gps-signal-badge[data-gps-state="unavailable"]::after { background: var(--on-overlay); }
.flat-focus-address.is-target, .number-pill.is-target { outline: 2px solid var(--focus); outline-offset: 1px; }
.flat-focus-address.is-complete, .flat-popup-address.is-complete { color: var(--muted); background: var(--surface-elevated); }
.overlay-button.is-active { color: var(--on-accent); }
.admin-status-pill.is-ready, .admin-health-pill:not(.has-warning) { color: var(--success); }
.admin-status-pill.has-warning, .admin-health-pill.has-warning { background: var(--warning-soft); color: var(--warning); }
/* Status colors stay distinct, including on dark surfaces. */
.address-product-warning, .flat-product-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
@media (max-width: 480px) {
  body[data-shell="admin"] #ops-shell > .ops-header { flex-wrap: wrap; }
  body[data-shell="admin"] .ops-mode-switch { justify-content: flex-start; }
}
@media (forced-colors: active) {
  body :is(.primary-button,.secondary-button,.theme-setting select) { border: 1px solid ButtonText; }
}