/* Phone exploration keeps the approved paper, ink, imagery and complete copy.
 * Enqueue after the theme's editorial layers. Desktop rules remain untouched. */
.mobile-province-profile-link { display: none; }

/* The gesture listener is attached to the complete map shell, including
 * transparent sea, labels and SVG children. Keep native one-finger vertical
 * page scrolling, but reserve two-finger movement for the map instead of the
 * browser's visual-viewport pinch zoom. This also covers tablet widths. */
#explore :is(.map-shell, #vietnam-map, .map-shell *) {
  touch-action: pan-y;
}

@media (max-width: 1024px) {
  #explore :is(#province-overview, #foods, #local-sound, #province-stories) {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 600px;
  }
}

@media (max-width: 700px) {
  #explore,
  #explore .explore-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #explore .atlas-intro {
    min-width: 0;
    padding: 20px 16px 16px;
  }

  #explore .atlas-intro h1 { line-height: 1.12; }
  #explore .intro-note { font-size: 1rem; line-height: 1.6; }
  #explore .atlas-intro .search input { font-size: 1rem; }

  #explore .region-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  #explore .filter-chip {
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: .875rem;
    line-height: 1.4;
    white-space: normal;
  }

  #explore .province-quick-select { font-size: .875rem; line-height: 1.5; }
  #explore #province-quick-select-label,
  .home .pagination-info { color: var(--ink); }
  #explore .province-quick-select select { min-width: 0; max-width: 100%; font-size: 1rem; }
  #explore .province-music-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  #explore .province-music-controls p { margin: 0; font-size: .875rem; line-height: 1.6; }

  #explore .mobile-province-profile-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--lacquer);
    border-radius: 8px;
    color: var(--lacquer);
    background: var(--paper-light);
    font: 600 1rem/1.5 var(--font-body);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  #explore .map-column { min-width: 0; padding: 0 16px 24px; }
  /* style.css forces this ornament to flex with !important, overriding the
     original phone hide rule and leaking it below the province drawer. */
  #explore .map-cartography { display: none !important; }
  #explore .map-stage { height: auto; min-height: 0; }
  #explore .map-heading {
    position: static;
    width: 100%;
    min-height: 0;
    margin: 0 0 12px;
  }
  #explore .map-heading-actions { width: 100%; min-width: 0; gap: 8px; }
  #explore .map-zoom-widget { flex: 1; min-width: 0; gap: 4px; padding: 2px 4px; }
  #explore .zoom-btn,
  #explore #reset-map { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
  #explore .zoom-slider { flex: 1; min-width: 32px; width: 100%; height: 44px; background: linear-gradient(var(--paper-deep), var(--paper-deep)) center / 100% 4px no-repeat; }
  #explore .zoom-level-badge { min-width: 36px; font-size: .75rem; }

  #explore .map-shell { width: 100%; height: auto; min-height: 0; aspect-ratio: 620 / 760; }
  #explore #vietnam-map { width: 100%; height: 100%; min-height: 0; position: absolute; inset: 0; }
  #explore .map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: .8125rem;
    line-height: 1.5;
  }
  #explore .map-legend .map-source { display: inline !important; flex-basis: 100%; }
  #explore .accessible-list { display: block; margin-top: 16px; color: var(--ink-strong); }
  #explore .accessible-list summary { min-height: 44px; padding-block: 12px; color: inherit; font-size: .9375rem; }
  #explore .province-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #explore .province-list button {
    min-width: 0;
    min-height: 48px;
    padding: 10px 8px;
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  #explore .province-list button[aria-pressed="true"] {
    border: 2px solid var(--lacquer);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  /* A real two-state sheet: drag only its handle; read in one inner scroller. */
  #explore #detail-panel {
    --sheet-peek-height: calc(100px + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 100;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: min(88dvh, calc(100dvh - var(--header-height, 72px) - 12px));
    max-height: none;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--paper-light);
    box-shadow: 0 -8px 32px rgba(16, 42, 73, .18);
    transform: translate3d(0, var(--sheet-offset, calc(100% - var(--sheet-peek-height))), 0) !important;
  }
  #explore #detail-panel.is-open {
    transform: translate3d(0, var(--sheet-offset, 0px), 0) !important;
    transition-duration: 260ms;
  }
  #explore #detail-content {
    flex: 1;
    height: 0;
    max-height: none;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    scroll-padding-top: 8rem;
  }
  #explore #detail-panel:not(.is-open) #detail-content { visibility: hidden !important; }
  #explore .sheet-grabber {
    position: relative;
    top: auto;
    display: grid;
    flex: 0 0 44px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    touch-action: none;
  }
  #explore .sheet-grabber > span[aria-hidden="true"] { background: var(--ink-muted); }
  #explore .sheet-summary {
    position: static;
    display: grid;
    flex: 0 0 calc(56px + env(safe-area-inset-bottom));
    min-height: calc(56px + env(safe-area-inset-bottom));
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    padding: 0 16px calc(8px + env(safe-area-inset-bottom));
    cursor: pointer;
    touch-action: manipulation;
  }
  #explore .sheet-summary > img { width: 40px; height: 40px; }
  #explore .sheet-summary .sheet-summary__copy > strong { font-size: 1.125rem; line-height: 1.3; }
  #explore .sheet-summary .sheet-summary__copy > :is(span, small) { display: none; }
  #explore #detail-panel.is-open .sheet-summary { display: none; }
  #explore .panel-close { display: inline-grid; min-width: 44px; min-height: 44px; }
  #explore #mobile-backdrop {
    display: block !important;
    position: fixed;
    z-index: 99;
    inset: 0;
    pointer-events: none;
    visibility: hidden;
  }
  #explore #mobile-backdrop.is-visible { visibility: visible; pointer-events: auto; }
  html.ttv-sheet-open { overflow: hidden !important; overflow-anchor: none !important; }
  .ttv-menu-ready body.sheet-open { overflow: hidden !important; }
  .home { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  #explore #profile-nav {
    position: sticky;
    /* The legacy global .profile-nav uses !important; override only here. */
    top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-inline: 0;
    overflow: visible !important;
    background: var(--paper-light);
  }
  #explore #profile-nav button { min-width: 0 !important; min-height: 44px !important; padding: 10px 8px !important; font-size: .875rem !important; line-height: 1.4; white-space: normal; }
  #explore #province-title { font-size: clamp(2rem, 9vw, 2.625rem); line-height: 1.2; overflow-wrap: anywhere; }
  #explore .province-heading { min-width: 0; gap: 12px; }
  #explore .province-heading > div { min-width: 0; }
  #explore .province-load-status:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
  #explore .province-load-status p { flex: 1 1 12rem; margin: 0; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
  #explore .province-load-status button { min-height: 44px; padding: 10px; font-size: 1rem; line-height: 1.5; white-space: normal; }
  #explore #detail-content.is-loading-province > :is(
    .province-profile-facts,
    .profile-nav,
    .province-overview,
    #archipelago-detail,
    #foods,
    #local-sound,
    #province-stories,
    .province-comments,
    .province-sources
  ) { display: none !important; }
  #explore .save-button { flex-shrink: 0; min-height: 44px; }
  #explore .province-description { font-size: 1.0625rem; line-height: 1.75; }
  #explore .province-stories,
  #explore .province-comments,
  #explore .province-sources { min-width: 0; overflow-wrap: anywhere; }
  #explore .province-sources:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); }
  #explore .province-source-links a { max-width: 100%; min-height: 44px; overflow-wrap: anywhere; }
  #explore .province-cta { display: flex; min-height: 48px; font-size: 1rem; line-height: 1.5; }
  #explore .specialty-name { font-size: 1rem; line-height: 1.4; }
  #explore .specialty-meta { font-size: .875rem; line-height: 1.5; }
  #explore .province-story-card { min-width: 0; }
  #explore .province-story-card .story-card__summary { font-size: 1rem; line-height: 1.65; }
  #explore :is(input, textarea, select) { font-size: 1rem; }
  #explore :is(#province-title, #province-overview, #foods, #local-sound, #province-stories) { scroll-margin-top: calc(var(--header-height, 62px) + 8rem); }

  /* Keep dismissal reachable during long home-modal reading/form journeys. */
  .home :is(.dish-dialog__header, .contribution-dialog__header) {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Own the former 26px scrollport inset so text cannot scroll above us. */
    padding-block: 38px 12px;
    background: var(--paper-light);
    border-bottom: 1px solid var(--line);
  }
  .home :is(.dish-dialog__header, .contribution-dialog__header) > div { min-width: 0; }
  .home :is(.dish-dialog__header, .contribution-dialog__header) h2 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.2; overflow-wrap: anywhere; }
  .home .dialog-close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
  .home :is(.dish-dialog__panel, .contribution-dialog__scroll) { padding-top: 0; overscroll-behavior: contain; scroll-padding-block: 6rem 2rem; }
  .home :is(#dish-dialog, #contribution-dialog, #report-dialog) :is(input, textarea, select) { font-size: 1rem; }
  #explore :focus-visible,
  .home :is(#dish-dialog, #contribution-dialog, #report-dialog) :focus-visible { outline: 3px solid var(--lacquer); outline-offset: 3px; }
}

@media (min-width: 360px) and (max-width: 700px) {
  #explore .region-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tablet/compact-desktop readers also need reachable dismissal after deep
 * scrolling. Keep their approved heading sizes and normal desktop >1024px. */
@media (min-width: 701px) and (max-width: 1024px) {
  .home :is(.dish-dialog__header, .contribution-dialog__header) {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-block: 26px 12px;
    background: var(--paper-light);
    border-bottom: 1px solid var(--line);
  }
  .home :is(.dish-dialog__panel, .contribution-dialog__scroll) {
    padding-top: 0;
    overscroll-behavior: contain;
    scroll-padding-block: 6rem 2rem;
  }
  .home .dialog-close { min-width: 44px; min-height: 44px; }
}