/* The phone lane of /transactions. Above 820px this file only hides the phone
   chrome; below it the map becomes the stage, the ledger becomes a sheet over
   it, and the site's four doors become a tab bar. Desktop rules live in
   transactions.css and are untouched. */

/* Phone variables and the tab bar live in phone-chrome.css. */

@media (max-width: 820px) {
  /* ---- the stage ------------------------------------------------------- */
  .transactions-page { position: fixed; inset: 0; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
  .transactions-header { display: none; }
  .transactions-shell { display: block; height: 100%; min-height: 0; overflow: visible; }
  .map-pane { position: fixed; inset: 0; z-index: 0; min-height: 0; }
  /* The page no longer scrolls, so the map takes every gesture back. */
  .map-pane .leaflet-container { touch-action: none; }
  .map-summary, .map-toolbar, .map-expand, .transaction-map-zoom { display: none; }
  .transactions-page svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* ---- top chrome ------------------------------------------------------- */
  .phone-top { position: fixed; z-index: 700; top: 0; left: 0; right: 0; display: block; padding: calc(var(--phone-safe-top) + 10px) 12px 0; pointer-events: none; }
  .phone-top > * { pointer-events: auto; }
  .phone-top__brand { display: flex; justify-content: center; width: fit-content; margin: 0 auto 8px; padding: 6px 11px; border: 1px solid var(--phone-glass-line); border-radius: 999px; background: var(--phone-glass); backdrop-filter: blur(16px) saturate(1.15); color: var(--copper-light); font-size: 10px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
  .phone-top__brand b { color: var(--text); font-weight: 750; }
  .phone-top__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; }
  /* Until the filters screen ships, the row is search and layers only. */
  .phone-top.no-filters .phone-top__row { grid-template-columns: minmax(0, 1fr) 46px; }
  .phone-top.no-filters #phone-filters-open { display: none; }
  .phone-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--phone-glass-line); border-radius: 14px; background: var(--phone-glass); backdrop-filter: blur(16px) saturate(1.15); color: var(--text); cursor: pointer; }
  .phone-icon svg { width: 22px; height: 22px; }
  .phone-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--copper); color: var(--ink-deep); font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; }
  .phone-badge[hidden] { display: none; }
  .phone-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 14px; border: 1px solid var(--phone-glass-line); border-radius: 14px; background: var(--phone-glass); backdrop-filter: blur(16px) saturate(1.15); color: var(--text); }
  .phone-search > svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
  .phone-search input { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 500; outline: 0; -webkit-user-select: text; user-select: text; }
  .phone-search input::placeholder { color: var(--text-dim); }
  .phone-search input:focus { box-shadow: none; }
  .phone-chips { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
  .phone-chips::-webkit-scrollbar { display: none; }
  .phone-chips:empty { display: none; }
  .phone-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 12px; border: 0; border-radius: 999px; background: var(--phone-cream); color: var(--ink-deep); font-size: 12px; font-weight: 750; cursor: pointer; }
  .phone-chip svg { width: 14px; height: 14px; stroke-width: 2.2; }

  /* ---- floating map actions ride the sheet's top edge -------------------- */
  .phone-fabs { position: fixed; z-index: 650; right: 12px; bottom: calc(var(--phone-tab-h) + var(--phone-safe-bottom) + 108px); display: flex; flex-direction: column; gap: 8px; transition: bottom 380ms var(--phone-ease), opacity 200ms ease-out; }
  .phone-fabs.is-hidden { opacity: 0; pointer-events: none; }
  .phone-fab { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--phone-glass-line); border-radius: 14px; background: var(--phone-glass); backdrop-filter: blur(16px) saturate(1.15); color: var(--text); cursor: pointer; }
  .phone-fab svg { width: 20px; height: 20px; }

  /* ---- price pins --------------------------------------------------------- */
  .price-pin-wrap { background: transparent; border: 0; }
  .price-pin { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 27px; padding: 0 9px; border-radius: 999px; background: var(--phone-cream); color: #1e1913; font: 750 12px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.28); transition: transform 160ms ease-out, background-color 160ms ease-out; }
  .price-pin::after { position: absolute; left: 50%; bottom: -4px; z-index: -1; width: 10px; height: 10px; border-radius: 2px; background: inherit; content: ""; transform: translateX(-50%) rotate(45deg); }
  .price-pin.is-active { background: var(--copper); color: var(--ink-deep); transform: scale(1.12); }
  .price-pin.is-group { border: 1px solid var(--phone-cream); background: rgba(18, 17, 15, 0.92); color: var(--phone-cream); }
  .price-pin.is-group::after { background: rgba(18, 17, 15, 0.92); }
  .leaflet-marker-icon.is-active { z-index: 1000 !important; }

  /* ---- the ledger is the sheet --------------------------------------------- */
  .ledger-pane { position: fixed; z-index: 800; top: 0; left: 0; right: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; border: 0; border-top: 1px solid rgba(255, 247, 230, 0.14); border-radius: 18px 18px 0 0; background: var(--ink-deep); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); transform: translate3d(0, var(--sheet-y, 70vh), 0); transition: transform 380ms var(--phone-ease); will-change: transform; }
  .ledger-pane.is-dragging { transition: none; }
  .ledger-header { flex: none; display: flex; flex-direction: column; padding: 8px 16px 12px; border-bottom: 0; touch-action: none; cursor: grab; }
  .sheet-handle { order: 0; display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: rgba(255, 247, 230, 0.32); }
  .ledger-status { order: 1; min-height: 0; align-items: center; gap: 12px; padding: 0; color: var(--text); font: 400 17px/1.2 var(--serif); letter-spacing: -0.02em; text-transform: none; }
  #record-clear { display: none; }
  /* .ledger-status button in transactions.css strips borders and inherits the
     serif; the selector below outranks it so the pill keeps its shape. */
  .ledger-status .phone-sort { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-soft); font: 700 12px/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
  .ledger-status .phone-sort svg { width: 15px; height: 15px; }
  .ledger-heading-row { order: 2; align-items: baseline; gap: 6px; margin-top: 4px; }
  .ledger-heading-row > div { display: none; }
  .ledger-volume { display: flex; align-items: baseline; gap: 5px; margin: 0; text-align: left; }
  .ledger-volume strong, .ledger-volume span { display: inline; margin: 0; color: var(--text-dim); font: 700 11px/1.2 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; }
  .ledger-search, .ledger-filters { display: none; }
  #record-list { flex: 1; min-height: 0; padding: 2px 12px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
  #record-list::-webkit-scrollbar { display: none; }
  .ledger-pane[data-detent="peek"] #record-list { overflow: hidden; }
  .ledger-attribution { flex: none; margin: 0; padding: 8px 16px calc(var(--phone-tab-h) + var(--phone-safe-bottom) + 8px); }
  .record-empty { padding: 30px 8px; font-size: 21px; }

  /* ---- cards ---------------------------------------------------------------- */
  .deal-card { margin: 0 0 12px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--panel); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
  .deal-card.is-active { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper); }
  .deal-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel-raised); }
  .deal-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .deal-card__nophoto { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, oklch(26% 0.014 68), oklch(15% 0.008 68)); color: var(--text-dim); }
  .deal-card__nophoto svg { width: 44px; height: 44px; opacity: 0.75; stroke-width: 1.2; }
  .deal-card__badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
  .deal-card__badge { padding: 5px 9px; border-radius: 999px; background: rgba(18, 17, 15, 0.86); color: var(--phone-cream); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
  .deal-card__body { padding: 12px 14px 14px; }
  .deal-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .deal-card__price strong { color: var(--text); font: 400 24px/1 var(--serif); letter-spacing: -0.045em; }
  .deal-card__price span { color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
  .deal-card__facts { margin: 8px 0 0; color: var(--text-soft); font-size: 14px; font-weight: 550; }
  .deal-card__name { margin: 8px 0 0; color: var(--text); font: 400 18px/1.15 var(--serif); letter-spacing: -0.025em; }
  .deal-card__addr { margin: 5px 0 0; color: var(--text-soft); font-size: 14px; font-weight: 500; }
  .deal-card__summary { margin: 8px 0 0; color: var(--text-dim); font: 400 14px/1.4 var(--serif); }
  .deal-card__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .deal-card__cta button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
  .deal-card__cta button svg { width: 16px; height: 16px; }
  .deal-card__cta button.is-primary { border-color: var(--phone-cream); background: var(--phone-cream); color: var(--ink-deep); }

  /* ---- filters screen --------------------------------------------------------- */
  .phone-filters { position: fixed; z-index: 1100; inset: 0; display: flex; flex-direction: column; background: var(--ink-deep); transform: translate3d(100%, 0, 0); transition: transform 320ms var(--phone-ease); }
  .phone-filters.is-open { transform: none; }
  .phone-filters__head { flex: none; display: grid; grid-template-columns: 46px 1fr 70px; align-items: center; padding: calc(var(--phone-safe-top) + 8px) 12px 10px; border-bottom: 1px solid var(--line-soft); }
  .phone-filters__head h2 { margin: 0; color: var(--text); font: 400 19px/1 var(--serif); text-align: center; }
  .phone-filters__reset { justify-self: end; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-soft); font: 700 12px/1 var(--sans); cursor: pointer; }
  .phone-filters__body { flex: 1; min-height: 0; padding: 4px 16px calc(var(--phone-safe-bottom) + 100px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .phone-fsec { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
  .phone-fsec h3 { margin: 0 0 14px; color: var(--text); font: 400 18px/1 var(--serif); letter-spacing: -0.02em; }
  .phone-fsec h3 small { margin-left: 8px; color: var(--text-dim); font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
  .phone-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 12px; background: var(--panel); }
  .phone-seg button { height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); font: 700 13px/1 var(--sans); cursor: pointer; }
  .phone-seg button[aria-pressed="true"] { background: var(--phone-cream); color: var(--ink-deep); }
  .phone-hist { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin: 6px 2px 0; }
  .phone-hist i { display: block; flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: rgba(231, 216, 189, 0.22); transition: background-color 160ms ease-out; }
  .phone-hist i.in { background: var(--phone-cream); }
  .phone-range { position: relative; height: 44px; margin-top: -2px; }
  .phone-range__track { position: absolute; top: 20px; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: rgba(255, 247, 230, 0.22); }
  .phone-range__fill { position: absolute; top: 20px; height: 3px; border-radius: 2px; background: var(--phone-cream); }
  .phone-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
  .phone-range input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: transparent; }
  .phone-range input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); pointer-events: auto; -webkit-appearance: none; appearance: none; }
  .phone-range input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; pointer-events: auto; }
  .phone-range__labels { display: flex; justify-content: space-between; color: var(--text-soft); font-size: 13px; font-weight: 700; }
  .phone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .phone-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 84px; padding: 0 6px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--text); font: 700 12px/1.2 var(--sans); text-align: center; cursor: pointer; }
  .phone-tile svg { width: 24px; height: 24px; }
  .phone-tile[aria-pressed="true"] { border-color: var(--phone-cream); background: var(--phone-cream); color: var(--ink-deep); }
  .phone-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
  .phone-chiprow button { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 650 13px/1 var(--sans); cursor: pointer; }
  .phone-chiprow button[aria-pressed="true"] { border-color: var(--phone-cream); background: var(--phone-cream); color: var(--ink-deep); }
  .phone-filters__cta { position: absolute; left: 16px; right: 16px; bottom: calc(var(--phone-safe-bottom) + 16px); height: 54px; border: 0; border-radius: 999px; background: var(--phone-cream); color: var(--ink-deep); font: 750 16px/1 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); cursor: pointer; }

  /* The record dialog must sit above the sheet, the tab bar and the filters. */
  .record-dialog { z-index: 1200; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .ledger-pane, .phone-fabs, .price-pin, .deal-card { transition: none; }
}