/* Phone (< 640 px): values from docs/design/prototype/src/movil-markup.html */
@media (max-width: 639px) {
  .side { display: none; }
  .map { position: absolute; inset: 0; }
  .map-chrome { display: none; }
  .map-you { width: 36px; height: 36px; }
  .map-you__dot { width: 13px; height: 13px; }
  .bhm-marker { width: 28px; height: 28px; }
  .bhm-marker__emoji { font-size: 14px; }
  .bhm-marker__count { right: -6px; top: -6px; min-width: 16px; height: 16px; font-size: 9.5px; line-height: 13px; }
  /* Dense map at small zoom: dots; full markers come back from COMPACT_ZOOM (js/map.js) or when selected. */
  .map-markers[data-compact="true"] .bhm-marker:not([data-state="selected"]) { width: 14px; height: 14px; }
  .map-markers[data-compact="true"] .bhm-marker:not([data-state="selected"]) > * { display: none; }
  .map-markers[data-compact="true"] .bhm-marker:not([data-state="selected"])::after { content: ''; position: absolute; inset: 1px; border-radius: 50%;
    background: var(--bhm-card); border: 2px solid var(--bhm-ink); box-sizing: border-box; }
  .bhm-marker__tag { bottom: 36px; }
  .bhm-marker[data-hover="true"] .bhm-marker__tag { display: none; }
  .bhm-marker[data-state="selected"] .bhm-marker__tag { display: block; }
  .phone .phone-dim { position: absolute; inset: 0; z-index: 35; background: rgba(246,244,239,0.55); pointer-events: none; }

  .phone { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 45; }
  .phone > * { pointer-events: auto; }
  .pill { position: absolute; left: 16px; right: 16px; top: 52px; z-index: 50; height: 54px; padding: 0 6px 0 8px; display: flex; align-items: center; gap: 8px; border-radius: 27px; background: var(--bhm-card); box-shadow: 0 1px 3px rgba(28,27,24,0.10), 0 8px 24px rgba(28,27,24,0.12); }
  .pill__input { flex-grow: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; outline: none; }
  .pill:focus-within { box-shadow: 0 0 0 2px var(--bhm-ink), 0 8px 24px rgba(28,27,24,0.12); }
  .pill__input::-webkit-search-cancel-button { display: none; }
  .pill__lang { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 22px; background: var(--bhm-tint); font-family: var(--bhm-mono); font-size: 12.5px; font-weight: 500; }
  .phone-chips { position: absolute; left: 0; right: 0; top: 116px; z-index: 50; padding: 0 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .phone-chip { height: 44px; padding: 0 15px; flex-shrink: 0; border-radius: 22px; border: 1px solid var(--bhm-field); background: var(--bhm-card); color: var(--bhm-ink); font-size: 14.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 3px rgba(28,27,24,0.10); }
  .phone-select { position: relative; flex-shrink: 0; }
  .phone-select__control { height: 44px; padding: 0 34px 0 15px; appearance: none; -webkit-appearance: none; border: 1px solid var(--bhm-field); border-radius: 22px; background: var(--bhm-card); font-size: 14.5px; font-weight: 500; box-shadow: 0 1px 3px rgba(28,27,24,0.10); }
  .phone-select__icon { position: absolute; right: 14px; top: 16px; pointer-events: none; stroke: var(--bhm-ink-2); }
  .phone-demo { position: absolute; left: 16px; top: 172px; z-index: 45; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--bhm-r-pill); background: rgba(255,255,255,0.94); font-size: 11.5px; font-weight: 500; color: #3A3833; box-shadow: 0 1px 3px rgba(28,27,24,0.10); }
  .map-demo__dot--small { width: 7px; height: 7px; border-radius: 50%; background: #B8860B; }
  .phone-buttons { position: absolute; right: 16px; top: 172px; z-index: 45; display: flex; flex-direction: column; gap: 8px; }
  .round-button { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--bhm-card); color: var(--bhm-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(28,27,24,0.14); }
  .round-button[aria-pressed="true"] { background: var(--bhm-ink); color: #FFFFFF; }
  .round-button--orient { flex-direction: column; background: rgba(255,255,255,0.94); }
  .orient-sea { margin-top: 1px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: #3A3833; }

  .peek { position: absolute; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 20px 26px; display: flex; flex-direction: column; gap: 12px; background: var(--bhm-card); border-radius: var(--bhm-r-sheet) var(--bhm-r-sheet) 0 0; box-shadow: 0 -8px 30px rgba(28,27,24,0.12); }
  .handle--peek { align-self: center; }
  .peek__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .peek__titles { min-width: 0; }
  .peek__count { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .peek__sort { margin-top: 2px; font-size: 13px; color: var(--bhm-ink-3); }
  .peek__list { height: 44px; padding: 0 16px; flex-shrink: 0; border-radius: 22px; font-size: 14px; }
  .peek__try { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
  .peek__legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #3A3833; }
  .peek__legend span { display: flex; align-items: center; gap: 6px; }
  .peek__other { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bhm-line); border-radius: 14px; background: var(--bhm-card); font-size: 14px; font-weight: 500; text-align: left; }
  .peek__other-label { flex-grow: 1; }
  .peek__other-note { font-size: 12.5px; color: var(--bhm-ink-3); }
  .peek .list__summary { padding: 0; font-size: 16px; font-weight: 600; color: var(--bhm-ink); }
  .peek .skeletons { gap: 10px; }
  .peek .skeleton { padding: 0; }
  .peek .failure { margin: 0; }
  .peek .failure__title { font-size: 16px; }
  .peek .failure__retry { height: 44px; padding: 0 18px; border-radius: 22px; font-size: 14px; }
  .peek .empty, .listview .empty { padding: 0; gap: 10px; }
  .peek .empty__actions, .listview .empty__actions { flex-direction: row; flex-wrap: wrap; align-self: stretch; margin-top: 4px; }
  .peek .empty__actions::after, .listview .empty__actions::after { content: none; }
  .peek .empty__primary, .listview .empty__primary { flex: 1 1 100%; }
  .peek .empty__secondary, .peek .empty__suggest, .listview .empty__secondary, .listview .empty__suggest { flex: 1 1 0; }
  .peek .empty__suggest, .listview .empty__suggest { order: 0; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--bhm-field);
    border-radius: 14px; background: var(--bhm-card); font-size: 14px; text-decoration: none; }
  .peek .empty__primary, .listview .empty__primary { height: 48px; border-radius: 14px; font-size: 15px; }
  .peek .empty__secondary, .listview .empty__secondary { height: 44px; border-radius: 14px; font-size: 14px; }
  .peek .geo-denied { padding: 11px 13px; }

  /* The list is the summary sheet's half and full state (js/sheet.js attachListSheet): laid out once at its full
     size (top 172 px) and moved only with a transform. In peek it waits below the screen, invisible. */
  .listview { --vh: 100vh; --list-y: 0px; position: absolute; left: 0; right: 0; top: 172px; bottom: auto; height: calc(var(--vh) - 172px); z-index: 56;
    display: flex; flex-direction: column; background: var(--bhm-card); border-radius: var(--bhm-r-sheet) var(--bhm-r-sheet) 0 0; box-shadow: 0 -8px 30px rgba(28,27,24,0.12);
    transform: translate3d(0, var(--list-y), 0); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; will-change: transform; touch-action: none; }
  @supports (height: 100dvh) {
    .listview { --vh: 100dvh; }
  }
  .listview[data-snap="half"] { --list-y: calc(var(--vh) * 0.5 - 172px); }
  .listview[data-snap="peek"] { --list-y: calc(var(--vh) - 172px); visibility: hidden; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s; }
  .listview[data-dragging="true"] { visibility: visible; transition: none; }
  .listview__handle { position: absolute; left: 50%; top: 0; width: 80px; height: 14px; padding: 0; transform: translateX(-50%); border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; }
  .peek { touch-action: none; }
  .peek__try { touch-action: pan-x; }
  .peek__handle { align-self: center; width: 80px; height: 14px; margin: -4px 0 -5px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
  .segments { margin: 14px 20px 0; padding: 4px; display: flex; gap: 4px; border-radius: 14px; background: var(--bhm-tint); }
  .segment { flex: 1 1 0; height: 40px; border: 0; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 600; }
  .segment[aria-selected="true"] { background: var(--bhm-card); box-shadow: 0 1px 3px rgba(28,27,24,0.12); }
  .listview__scroll { flex-grow: 1; min-height: 0; overflow: hidden; padding: 12px 12px 96px; }
  .listview[data-snap="full"] .listview__scroll { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
  .listview .list__summary { padding: 0 8px 8px; }
  .listview .row { min-height: 72px; padding: 10px 8px; border: 0; }
  .listview .row__tile { width: 48px; height: 48px; border-radius: 13px; font-size: 22px; }
  .listview .row__name { font-size: 15.5px; }
  .listview .row__org { display: block; text-overflow: ellipsis; }
  .listview .row__logo { display: none; }
  .listview .row__tags { margin-top: 2px; }
  .listview .row__km { font-size: 12px; }
  .listview .others__intro { margin: 2px 8px 12px; }
  .listview .other { padding: 14px; }
  .listview .why svg { display: none; }
  .listview .tag, .listview .why { line-height: 14px; }
  .listview .other__title { line-height: 19.5px; }
  .listview .other__foot { flex-direction: column-reverse; align-items: stretch; }
  .listview .other__web { height: 44px; border-radius: 12px; font-size: 14px; }
  .to-map { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 24px; background: var(--bhm-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(28,27,24,0.28); }

  /* Bottom sheet: laid out once at its full size and moved only with a transform (GPU, no layout while it moves).
     The snap offset is a share of the visible height (dynamic viewport: Safari and Telegram bars). The footer is moved
     back by the same offset, so it always sits above the bottom bar. Snap points in js/sheet.js. */
  .card { --full: calc(64 / 844); --snap: calc(330 / 844); --vh: 100vh; --sheet-y: calc(var(--vh) * (var(--snap) - var(--full)));
    position: fixed; left: 0; right: 0; top: calc(var(--vh) * var(--full)); bottom: auto; height: calc(var(--vh) * (1 - var(--full))); width: auto; z-index: 57;
    border-radius: var(--bhm-r-sheet) var(--bhm-r-sheet) 0 0; box-shadow: 0 -8px 30px rgba(28,27,24,0.16);
    transform: translate3d(0, var(--sheet-y), 0); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; touch-action: none; }
  @supports (height: 100dvh) {
    .card { --vh: 100dvh; }
  }
  .card .card__foot { position: relative; z-index: 1; transform: translate3d(0, calc(-1 * var(--sheet-y)), 0); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
  .card[data-snap="peek"] { --snap: 0.70; }
  .card[data-snap="full"] { --snap: var(--full); }
  .card[data-dragging="true"], .card[data-dragging="true"] .card__foot { transition: none; }
  /* A full sheet covers the map: the search pill and the chips fade out instead of peeking over its edge. */
  .pill, .phone-chips { transition: opacity 0.2s; }
  body[data-card="open"][data-sheet="full"] .pill, body[data-card="open"][data-sheet="full"] .phone-chips { opacity: 0; pointer-events: none; }
  .card[data-snap="full"] .card__body { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
  .card:not([data-snap="full"]) .card__body { overflow: hidden; }
  .card:not([data-snap="full"]) .card__photo-card { display: none; }
  .card:not([data-snap="full"]) .card__photo-strip { display: block; }
  .card__handle { align-self: center; width: 80px; height: 22px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .card__body { padding: 4px 20px 18px; gap: 14px; }
  .card__logo { width: 46px; height: 46px; border-radius: 13px; font-size: 15px; }
  .card__title { font-size: 21px; }
  .card__close { width: 44px; height: 44px; border-radius: 22px; }
  .plaque-row { gap: 8px; }
  .plaque { padding: 10px 13px 9px; }
  .plaque__address { font-size: 20px; }
  .plaque__district { font-size: 10px; }
  .plaque-km { width: 70px; font-size: 12.5px; }
  .switch__item { min-height: 46px; padding: 8px 14px; border-radius: 13px; font-size: 14.5px; }
  .facts { grid-template-columns: 96px minmax(0, 1fr); }
  .review__links { gap: 0; }
  .review__source { min-height: 32px; display: flex; align-items: center; }
  .card__foot { padding: 12px 20px calc(26px + env(safe-area-inset-bottom)); gap: 8px; }
  .card__cta { height: 50px; font-size: 15.5px; }
  .card__more { height: 44px; border-radius: 12px; }
  .card__report { height: 44px; }
}