/* Glass on the phone Map ("Outside" tab).
 *
 * Glass sits on data-theme="dark", so the map's own sheets fell through to
 * their dark palette: mobile-map-pins.css's --mmp-* tokens under
 * html[data-theme*="dark"], the control sheet's --mapctl-* tokens under
 * [data-theme="dark"] #map-style-menu, and solid fills with
 * backdrop-filter: none !important. This restates them with the Glass tokens
 * from mobile-glass.css (--gl-sheet / --gl-fill / --gl-rim / --gl-blur /
 * --gl-cta). The search pill and its suggestions carry inline !important
 * styles, so mobile-virtual-map.js (protectSearchStyles) paints those.
 *
 * Floating controls sit over bright map tiles, so they take the darker
 * --gl-sheet fill rather than the white --gl-bg. Buttons never get a
 * backdrop-filter (it ghosts their labels on iOS); the sheets under them
 * carry the blur. Light and Dark are untouched: every rule is under
 * html[data-appearance="glass"].
 */

html[data-appearance="glass"]:root {
  --mmp-bg: var(--gl-sheet);
  --mmp-ink: #ffffff;
  --mmp-dim: rgba(255, 255, 255, 0.74);
  --mmp-faint: rgba(255, 255, 255, 0.55);
  --mmp-line: var(--gl-rim);
  --mmp-field: var(--gl-fill);
  --mmp-field-ink: #ffffff;
  --mmp-good: #86efac;
  --mmp-bad: #fda4af;
  --mmp-shadow: var(--gl-shadow);
  --mmp-gold-soft: rgba(212, 161, 6, 0.2);
}

/* ------------------------------------------------ chips + locate (buttons) */
html[data-appearance="glass"] body #mmp-chips#mmp-chips .mmp-chip,
html[data-appearance="glass"] body #mmp-locate#mmp-locate {
  background: var(--gl-sheet) !important;
  border: 1px solid var(--gl-rim) !important;
  box-shadow: var(--gl-shadow) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-appearance="glass"] body #mmp-chips#mmp-chips .mmp-chip:is([aria-pressed="true"], .mmp-chip--add, .mmp-chip--add.is-on) {
  background: var(--gl-cta) !important; border-color: var(--gl-rim-strong) !important;
  color: var(--gl-cta-ink) !important; -webkit-text-fill-color: var(--gl-cta-ink) !important;
}
html[data-appearance="glass"] body #mmp-locate#mmp-locate svg { stroke: currentColor !important; color: inherit !important; }
html[data-appearance="glass"] body #mmp-locate#mmp-locate.is-on { color: #93c5fd !important; -webkit-text-fill-color: #93c5fd !important; }

/* ------------------------------------------------ pin card, new/edit pin, list */
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list).mmp-sheet {
  background: var(--gl-sheet) !important;
  border: 1px solid var(--gl-rim) !important;
  box-shadow: var(--gl-shadow) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-grip::after { background: var(--gl-rim-strong) !important; }
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) :is(.mmp-hero, .mmp-note, .mmp-manage) { border-color: var(--gl-rim) !important; }
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) :is(.mmp-go, .mmp-save, .mmp-sponsor__go) {
  background: var(--gl-cta) !important; border: 0 !important;
  color: var(--gl-cta-ink) !important; -webkit-text-fill-color: var(--gl-cta-ink) !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) :is(.mmp-go, .mmp-save, .mmp-sponsor__go) * {
  color: var(--gl-cta-ink) !important; -webkit-text-fill-color: var(--gl-cta-ink) !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) :is(.mmp-ghost, .mmp-round-x, .mmp-emoji) {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-hi) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-ghost.is-on { background: var(--gl-fill-strong) !important; border-color: var(--gl-rim-strong) !important; }
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-emoji[aria-pressed="true"] {
  background: var(--gl-fill-strong) !important; border-color: var(--gl-rim-strong) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) !important;
}
html[data-appearance="glass"] body #mmp-card#mmp-card .mmp-manage .mmp-del {
  border-color: rgba(251, 113, 133, 0.6) !important; background: rgba(225, 29, 72, 0.22) !important;
  color: #fecdd3 !important; -webkit-text-fill-color: #fecdd3 !important;
}
html[data-appearance="glass"] body #mmp-card#mmp-card .mmp-manage .mmp-del.is-armed {
  background: #e11d48 !important; border-color: #e11d48 !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
/* The close over the photo: a dark glass disc (a button, so no blur). */
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-x {
  background: rgba(28, 28, 32, 0.62) !important; border: 1px solid var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
/* Fields */
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-field :is(input:not([type="file"]), textarea) {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; color-scheme: dark;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-field :is(input, textarea):focus { border-color: var(--gl-rim-strong) !important; }
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-field :is(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.6) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}
html[data-appearance="glass"] body :is(#mmp-card, #mmp-new, #mmp-list) .mmp-field input[type="file"]::file-selector-button {
  background: var(--gl-fill-strong); color: #ffffff; border: 1px solid var(--gl-rim); border-radius: 8px; padding: 4px 10px;
}
/* Address suggestions in the new-pin sheet */
html[data-appearance="glass"] body #mmp-new#mmp-new .mmp-sugs {
  background: rgba(28, 28, 32, 0.86) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
html[data-appearance="glass"] body #mmp-new#mmp-new .mmp-sug {
  background: transparent !important; border-bottom-color: var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
/* Sponsored switch */
html[data-appearance="glass"] body #mmp-new#mmp-new .mmp-spon-form { background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-hi) !important; }
html[data-appearance="glass"] body #mmp-new#mmp-new .mmp-switchrow input { background: var(--gl-fill-strong) !important; box-shadow: inset 0 0 0 1px var(--gl-rim) !important; }
html[data-appearance="glass"] body #mmp-new#mmp-new .mmp-switchrow input:checked { background: var(--mmp-gold) !important; box-shadow: none !important; }
/* Sponsor strip on the card */
html[data-appearance="glass"] body #mmp-card#mmp-card .mmp-sponsor { background: rgba(212, 161, 6, 0.2) !important; border: 1px solid rgba(250, 204, 21, 0.7) !important; }
html[data-appearance="glass"] body #mmp-card#mmp-card .mmp-sponsor__text b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
/* Pins list rows */
html[data-appearance="glass"] body #mmp-list#mmp-list .mmp-row { border-bottom-color: var(--gl-rim) !important; }

/* Search suggestions: the pill's list is painted by mobile-virtual-map.js;
   its rows' hairlines and the Powered by Google footer are inline. */
html[data-appearance="glass"] body #virtual-map-suggestions#virtual-map-suggestions > div:not(.mmap-google-attr) { border-bottom-color: var(--gl-rim) !important; background: transparent !important; }
html[data-appearance="glass"] body .mmap-google-attr.mmap-google-attr {
  background: rgba(28, 28, 32, 0.86) !important; border-top-color: var(--gl-rim) !important;
  color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* ------------------------------------------------------ toast, empty map */
html[data-appearance="glass"] body #mmp-toast#mmp-toast {
  background: var(--gl-sheet) !important; border: 1px solid var(--gl-rim);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
html[data-appearance="glass"] body #mmp-void#mmp-void {
  background: var(--gl-sheet) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
html[data-appearance="glass"] body #mmp-void#mmp-void .nst-es.nst-es { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ------------------------------------------- map control sheet (#map-style-menu) */
html[data-appearance="glass"] body #map-style-menu#map-style-menu {
  --mapctl-bg: var(--gl-sheet);
  --mapctl-surface: var(--gl-fill);
  --mapctl-surface-glass: var(--gl-fill);
  --mapctl-text: #ffffff;
  --mapctl-muted: rgba(255, 255, 255, 0.74);
  --mapctl-border: var(--gl-rim);
  --mapctl-glow: rgba(255, 255, 255, 0.12);
  --mapctl-glow-strong: rgba(255, 255, 255, 0.2);
  background: var(--gl-sheet) !important;
  border: 1px solid var(--gl-rim) !important; border-bottom: 0 !important;
  box-shadow: var(--gl-shadow) !important;
  color: #ffffff !important;
  color-scheme: dark !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
}
/* The header strip drew a second tinted pane; the sheet is the pane. */
html[data-appearance="glass"] body #map-style-menu#map-style-menu > :is(div, .mapctl-header):first-of-type {
  background: transparent !important; border-bottom-color: var(--gl-rim) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Tiles, rows, cards, inputs inside the sheet: fill + rim, no nested blur. */
html[data-appearance="glass"] body #map-style-menu#map-style-menu :is(.mapctl-tile, .mapctl-perm, .mapctl-card, .mapctl-post-row, .mapctl-input, .mapctl-seg) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: var(--gl-rim) !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu .mapctl-seg { background: var(--gl-fill) !important; box-shadow: var(--gl-hi) !important; }
html[data-appearance="glass"] body #map-style-menu#map-style-menu #map-style-tabs button {
  background: transparent !important; color: rgba(255, 255, 255, 0.78) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important; opacity: 1;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu #map-style-tabs button[data-active="true"] {
  background: var(--gl-cta) !important; color: var(--gl-cta-ink) !important; -webkit-text-fill-color: var(--gl-cta-ink) !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu :is(#mapctl-ticker-label, .mapctl-tile, .mapctl-tile-copy strong, .mapctl-post-title) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu :is(#mapctl-sub, #mapctl-ticker-label + div, .mapctl-label, .mapctl-tile-copy small, .mapctl-post-message, .mapctl-post-meta) {
  color: rgba(255, 255, 255, 0.74) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.74) !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu button:is(.mapctl-close-btn, [onclick*="toggleMapStyleMenu"]) {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-hi) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu button:is(.mapctl-close-btn, [onclick*="toggleMapStyleMenu"]) i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html[data-appearance="glass"] body #map-style-menu#map-style-menu :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea, #map-style-location-input) {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu :is(input, textarea, #map-style-location-input)::placeholder {
  color: rgba(255, 255, 255, 0.6) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu option { background: #1c1c20 !important; color: #ffffff !important; }
html[data-appearance="glass"] body #map-style-menu#map-style-menu #map-style-location-suggestions {
  background: rgba(28, 28, 32, 0.86) !important; border: 1px solid var(--gl-rim) !important; border-radius: 14px; overflow: hidden;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu #map-style-location-suggestions :is(button, div) {
  background: transparent !important; border-bottom-color: var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu #map-style-location-suggestions :is(button, div) span span {
  color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
html[data-appearance="glass"] body #map-style-menu#map-style-menu .mapctl-btn-primary {
  background: var(--gl-cta) !important; color: var(--gl-cta-ink) !important; -webkit-text-fill-color: var(--gl-cta-ink) !important; box-shadow: none !important;
}

/* ------------------------------------------------ Pins dashboard (#mmd) */
html[data-appearance="glass"] body #mmd#mmd {
  --mmd-edge: var(--gl-rim);
  --mmd-soft: rgba(255, 255, 255, 0.08);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-appearance="glass"] body #mmd#mmd :is(.mmd-tile, .mmd-card, .mmd-btn, .mmd-feat) {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-hi) !important;
}
html[data-appearance="glass"] body #mmd#mmd :is(.mmd-q, .mmd-sort) {
  background-color: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; color-scheme: dark;
}
html[data-appearance="glass"] body #mmd#mmd .mmd-q::placeholder { color: rgba(255, 255, 255, 0.6) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-sort option { background: #1c1c20 !important; color: #ffffff !important; }
html[data-appearance="glass"] body #mmd#mmd :is(.mmd-tools, .mmd-row, .mmd-foot, .mmd-map, .mmd-sponrow) { border-color: var(--gl-rim) !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-row.is-on { background: var(--gl-fill) !important; box-shadow: inset 3px 0 0 #ffffff !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-row.is-sponsor.is-on { box-shadow: inset 3px 0 0 var(--mmd-gold) !important; }
html[data-appearance="glass"] body #mmd#mmd :is(.mmd-note, .mmd-pill.is-scheduled) { background: rgba(251, 191, 36, 0.16) !important; color: #fcd34d !important; -webkit-text-fill-color: #fcd34d !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-pill.is-live { background: rgba(52, 211, 153, 0.16) !important; color: #86efac !important; -webkit-text-fill-color: #86efac !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-btn--bad { color: #fda4af !important; -webkit-text-fill-color: #fda4af !important; border-color: rgba(251, 113, 133, 0.5) !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-btn--bad.is-armed { background: #e11d48 !important; border-color: #e11d48 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-feat__track { background: var(--gl-fill-strong) !important; }
html[data-appearance="glass"] body #mmd#mmd .mmd-feat[aria-checked="true"] .mmd-feat__track { background: var(--mmd-gold) !important; }

/* --------------------------------- Pin actions sheet (Edit / Delete confirm) */
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet .mobile-map-post-actions-panel {
  background: var(--gl-sheet) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
}
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet .mobile-map-post-actions-panel > div:first-child { background: var(--gl-rim-strong) !important; }
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet .mobile-map-post-actions-panel > div:nth-child(2) { color: rgba(255, 255, 255, 0.74) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.74) !important; }
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet .mobile-map-post-actions-panel > div:nth-child(3) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet [data-map-post-action-choice] {
  background: var(--gl-fill) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-hi) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet [data-map-post-action-choice] * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet [data-map-post-action-choice="delete"] {
  background: rgba(251, 113, 133, 0.12) !important; border-color: rgba(251, 113, 133, 0.5) !important;
  color: #fda4af !important; -webkit-text-fill-color: #fda4af !important;
}
html[data-appearance="glass"] body #mobile-map-post-actions-sheet#mobile-map-post-actions-sheet [data-map-post-action-choice="delete"].is-armed {
  background: #e11d48 !important; border-color: #e11d48 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}