/* Adaptive dialogs own the viewport while open, including the space otherwise
   reserved for the shared mobile navigation. */
body:has(.adaptive-dialog-overlay) .mobile-bottom-nav {
  display: none;
}

/* City construction for adaptive dialog surfaces. Root-scoped under
   :root[data-style="city"] so Classic stays untouched. The `.adaptive-dialog-*`
   hooks come from [AdaptiveDialogOverlay]/[AdaptiveDialogPanel]; City re-tints
   the backdrop and outlines the panels without changing caller markup. */
:root[data-style="city"] .adaptive-dialog-backdrop {
  background: color-mix(in srgb, var(--color-primary) 62%, transparent);
}

:root[data-style="city"] .adaptive-dialog-panel {
  background: var(--color-surface);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--fp-ink) 28%, transparent);
}

/* Bottom-anchored sheets keep the hard shadow on their top edge and square off
   their bottom corners — the sheet sits flush against the viewport edge. */
:root[data-style="city"] .adaptive-dialog-panel--bottomSheetToModal,
:root[data-style="city"] .adaptive-dialog-panel--mobileBottomSheet,
:root[data-style="city"] .adaptive-dialog-panel--bottomSheetToSidePanel {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 -7px 0 color-mix(in srgb, var(--fp-ink) 26%, transparent);
}

:root[data-style="city"] .adaptive-dialog-close {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--radius-md);
  color: var(--color-on-tertiary);
}

:root[data-style="city"] .adaptive-dialog-back {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--fp-ink) 18%, transparent);
  color: var(--color-on-surface);
}

:root[data-style="city"] .marketplace-exit-context {
  background: var(--color-surface-container-low);
}

:root[data-style="city"] .marketplace-exit-context-divider {
  border-top-width: var(--fp-outline-width);
  border-color: var(--fp-ink);
}

:root[data-style="city"] .auth-dialog-field,
:root[data-style="city"] .auth-dialog-note,
:root[data-style="city"] .auth-dialog-preview,
:root[data-style="city"] .phone-picker-search,
:root[data-style="city"] .faq-suggestion-field {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--fp-ink) 16%, transparent);
}

:root[data-style="city"] .auth-dialog-field:focus-within,
:root[data-style="city"] .phone-picker-search:focus-within,
:root[data-style="city"] .faq-suggestion-field:focus {
  border-color: var(--fp-ink);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--fp-ink) 22%, transparent);
  outline: var(--fp-focus-ring-width) solid var(--color-tertiary);
  outline-offset: 3px;
}

:root[data-style="city"] .auth-dialog-state-icon {
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--fp-ink) 20%, transparent);
}

:root[data-style="city"] .comments-drawer [role="tablist"] {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  padding: 3px;
}

:root[data-style="city"] .comments-drawer [role="tab"] {
  border-radius: 3px;
}

:root[data-style="city"] .comments-drawer [role="tab"][aria-selected="true"] {
  background: var(--color-tertiary);
  box-shadow: none;
  color: var(--color-on-tertiary);
}

:root[data-style="city"] .comments-drawer textarea {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
}

:root[data-style="city"] .share-story-preview {
  --share-story-preview-shadow: var(--fp-hard-shadow);
  outline: var(--fp-outline-width) solid var(--fp-ink);
}

:root[data-style="city"] .hero-lightbox-control {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--fp-ink) 24%, transparent);
  color: var(--color-on-tertiary);
}

:root[data-style="city"] .hero-lightbox-control:hover {
  background: color-mix(in srgb, var(--color-tertiary) 84%, var(--color-surface));
}

:root[data-style="city"] .hero-lightbox-image,
:root[data-style="city"] .hero-lightbox-thumbnails {
  border: var(--fp-outline-width) solid var(--fp-ink);
  border-radius: var(--fp-card-radius);
  box-shadow: var(--fp-hard-shadow);
}

:root[data-style="city"] .hero-lightbox-thumbnail[aria-current="true"] {
  outline: var(--fp-outline-width) solid var(--color-tertiary);
  outline-offset: 1px;
}

@media (min-width: 768px) {
  :root[data-style="city"] .adaptive-dialog-panel--bottomSheetToModal {
    border: var(--fp-outline-width) solid var(--fp-ink);
    border-radius: var(--fp-card-radius);
    box-shadow: 7px 8px 0 color-mix(in srgb, var(--fp-ink) 28%, transparent);
  }

  :root[data-style="city"] .adaptive-dialog-panel--bottomSheetToSidePanel {
    border-bottom: var(--fp-outline-width) solid var(--fp-ink);
    border-radius: 0;
    box-shadow: -7px 0 0 color-mix(in srgb, var(--fp-ink) 26%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style="city"] .adaptive-dialog-close {
    transition: none;
  }
}