/* Drive Winthrop — phone layout. Loaded last; owns everything under 700px wide.
   Two older sheets (style.css, cockpit.css) each carried their own phone rules and
   fought; this file replaces both below the breakpoint. Desktop is untouched. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 460px) {
  :root { --map-size: 84px; --strip: calc(96px + env(safe-area-inset-bottom)); } /* --strip = height of the bottom action strip */
  html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
  button { min-height: 40px; }

  /* ---- header: brand on the left, one or two compact actions on the right ---- */
  header, body.immersive header, body.driving header {
    inset: 0 0 auto 0; height: 52px; padding: 0 8px; gap: 6px; border: 0;
    background: linear-gradient(#0b1a22e6, #0b1a2200);
  }
  .brand { font-size: 13px; letter-spacing: .12em; }
  .brand span { display: none; }
  header button { font-size: 12px; padding: 6px 10px; min-height: 40px; min-width: 0; border-radius: 8px; white-space: nowrap; }
  header #driveCurrent, header #exploreTown { font-size: 12px; padding: 6px 12px; }
  header #fullscreen { display: none; }
  header #info { display: inline-flex; align-items: center; }
  dialog { padding: 22px; }
  dialog h2 { font-size: 22px; }
  #reviewToggle { display: none; }
  body.driving header #driveCurrent { display: none; }

  /* ---- explore mode: the panel becomes a bottom sheet, the map stays on top ---- */
  aside.places, body:not(.driving) aside.places {
    position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-height: 38dvh !important; padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; border: 1px solid #ffffff1f; border-bottom: 0; background: #0f232cf2;
    overflow: auto; z-index: 20; font-size: 13px;
  }
  /* checkbox rows are 40px tap targets, not 19px text */
  aside.places .layers label, aside.places .coverage-switch { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; }
  aside.places .layers { gap: 2px; }
  aside.places input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; }
  aside.places h1 { font-size: 15px; margin: 0 0 4px; }
  .explore-help { display: none; }
  #coverageMap { width: 100%; height: auto; max-height: 150px; }
  .camera { top: auto !important; bottom: calc(38dvh + 10px) !important; right: 8px !important; left: auto !important; transform: none !important; flex-direction: row; gap: 4px; }
  .camera button { font-size: 11px; padding: 6px 8px; min-height: 30px; }
  #notice, footer, .help { display: none; }
  #spotActions { top: 60px; bottom: auto; left: 8px; right: 8px; width: auto; max-width: none; transform: none; }
  #inspector { position: fixed; inset: auto 8px calc(38dvh + 8px) 8px; width: auto; max-height: 40dvh; }
  #tourOverlay, .touring #tourOverlay { top: 60px; bottom: auto; }

  /* ---- driving: everything lives in three bands, nothing overlaps ----
       top:    road card (left) + speed (right)
       middle: the road, untouched (the touch layer; minimap and R sit on the strip)
       bottom: the action strip, two rows of 40px buttons (--strip is its height) */
  body.driving aside.places, body.driving .camera { display: none; }
  body.driving .driveheading {
    top: 56px; left: 8px; right: 104px; max-width: none; padding: 7px 10px; border-radius: 10px;
  }
  body.driving .driveheading strong { font-size: 13px; letter-spacing: .04em; }
  body.driving .driveheading span { font-size: 11px; }
  body.driving .speedometer {
    top: 56px; right: 8px; left: auto; bottom: auto; width: 88px; padding: 6px 8px; border-radius: 10px; text-align: center;
  }
  body.driving .speedometer b { font-size: 26px; line-height: 1; display: block; }
  body.driving .speedometer > span { font-size: 9px; letter-spacing: .1em; }
  body.driving .speedometer small { display: block; font-size: 10px; }
  body.driving .speedometer #assistValue { display: none; }
  body.driving #minimap {
    top: auto; bottom: calc(var(--strip) + 8px); left: 8px; right: auto; width: 84px; height: 84px; border-radius: 10px; opacity: .92;
  }
  body.driving .look-controls { display: none; }
  body.driving #audioPanel {
    top: 158px; bottom: auto; left: 8px; right: auto; width: calc(100vw - 16px); max-height: calc(100dvh - 166px - var(--strip)); z-index: 30;
  }
  /* phone-only garage: "Minimal HUD" duplicates Hide panels, "Show driving buttons" has no pedals to show */
  .garageExtras #hudToggle, .garageExtras > button:not([id]) { display: none; }
  body.driving .drivehelp, body.driving #notice { display: none; }
  body.driving #roadWarning { top: 158px !important; width: calc(100vw - 16px); max-width: none; padding: 12px 12px 12px; }
  body.driving #roadWarning.dismissed { display: none !important; }
  body.driving #roadWarning strong { font-size: 15px; }

  /* the touch layer is the steering wheel; the pedal buttons are gone on phones */
  body.driving .pedals { display: none !important; }
  /* z-index 1 = same layer as the 3D view, appended after it: above the canvas, under every button */
  #touchDrive { display: none; position: fixed; inset: 0; z-index: 1; touch-action: none; -webkit-user-select: none; user-select: none; }
  body.driving #roadWarning { z-index: 20; }
  body.driving header { z-index: 10; }
  body.driving #touchDrive { display: block; }
  #touchDrive .hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 12px; border-radius: 999px; background: #0b1a22cc; border: 1px solid #ffffff2e; color: #dfe9ee; font-size: 12px; letter-spacing: .02em; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
  body.touched #touchDrive .hint { opacity: 0; }
  /* pedals (kept for tablets with a mouse): full-width, two rows, thumbs at the bottom of the screen */
  body.driving .pedals {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; left: 100px; right: 8px; bottom: 76px; top: auto; width: auto; transform: none; padding: 0; background: none; border: 0;
    z-index: 14;
  }
  body.driving .pedals > div { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  body.driving .pedals button { min-height: 46px; font-size: 14px; padding: 8px 4px; border-radius: 10px; }
  body.driving .pedals button.primary { min-height: 46px; }

  /* the action strip: one scrollable row along the bottom edge */
  body.driving .driveactions, body.driving.minimal-hud .driveactions {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); overflow: hidden;
    background: #0b1a22ee; border-top: 1px solid #ffffff1c; border-radius: 0; z-index: 15;
  }
  body.driving .driveactions button, body.driving .driveactions button.primary, body.driving .driveactions #driveMode {
    display: block; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 40px !important;
    font-size: 12px !important; padding: 6px 4px !important; border-radius: 9px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;
  }
  body.driving .driveactions button { background: #ffffff12; border: 1px solid #ffffff1c; }
  body.driving .driveactions button::before { display: none !important; content: none !important; } /* cockpit icons would make each button 57px; text only on phones */
  body.driving .driveactions #driveMode { grid-column: span 2; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; }
  body.driving .driveactions #driveMode button { min-height: 40px !important; font-size: 12px !important; padding: 6px 4px !important; }
  body.driving .driveactions #eveningDrive { grid-column: auto; } /* style.css gives it a full row */
  body.driving.minimal-hud .driveactions { grid-template-columns: 1fr 1fr; }
  body.driving.minimal-hud .speedometer { top: 56px; bottom: auto; }

  /* put-away controls (phone.js) */
  #sheetToggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; padding: 8px 4px; margin: 0 0 6px; background: none; border: 0; font-size: 15px; font-weight: 600; color: inherit; }
  #sheetToggle b { font-size: 14px; opacity: .8; }
  aside.places.collapsed, body:not(.driving) aside.places.collapsed { max-height: calc(58px + env(safe-area-inset-bottom)) !important; overflow: hidden !important; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  aside.places.collapsed #sheetToggle { margin-bottom: 0; }
  aside.places.collapsed > *:not(#sheetToggle) { visibility: hidden; }
  .camera { transition: bottom .25s; }
  body:has(aside.places.collapsed) .camera { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  #roadWarning .closeWarn { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; padding: 0; min-height: 0; border: 0; background: none; font-size: 24px; line-height: 1; color: #fff; }
  #touchReverse { display: none; }
  body.driving #touchReverse { display: block; position: fixed; right: 8px; bottom: calc(var(--strip) + 8px); z-index: 12; width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; font-weight: 700; background: #0b1a22cc; border: 1px solid #ffffff3a; color: #dfe9ee; }
  body.driving #touchReverse.held { background: #edb567; color: #102b36; }
  body.driving.minimal-hud .driveheading, body.driving.minimal-hud .speedometer, body.driving.minimal-hud #touchDrive .hint { display: none !important; }
  body.driving.minimal-hud #touchReverse { bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.driving.minimal-hud .driveactions button, body.driving.minimal-hud #garageToggle { display: none !important; }
  #phoneHud::before, #phoneHud::after { display: none !important; content: none !important; }
  #phoneHud { display: inline-flex; align-items: center; justify-content: center; }
  body.driving.minimal-hud .driveactions #phoneHud, body.driving.minimal-hud .driveactions #exitDrive { display: inline-flex !important; align-items: center; justify-content: center; }
  body.driving.minimal-hud #touchDrive { display: block; }
  /* the flyover and checklist panels fit the screen */
  #houseChecklist { left: 8px; right: 8px; top: 60px; width: auto; max-height: calc(100dvh - 76px); padding: 12px; }
}

/* landscape phones (844x390): the strip is one row, the edge controls sit inside the notch insets */
@media (max-width: 950px) and (max-height: 460px) {
  :root { --strip: calc(48px + env(safe-area-inset-bottom)); }
  header, body.immersive header, body.driving header { padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left)); }
  body.driving .driveheading { right: auto; max-width: 27vw; left: calc(8px + env(safe-area-inset-left)); }
  body.driving .speedometer { right: calc(8px + env(safe-area-inset-right)); }
  body.driving .driveactions, body.driving.minimal-hud .driveactions {
    display: flex; flex-wrap: nowrap; padding: 4px calc(8px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }
  body.driving .driveactions button, body.driving .driveactions #driveMode { flex: 1 1 0; }
  body.driving .driveactions #driveMode { flex: 2 1 0; display: grid; }
  body.driving #minimap { width: 64px; height: 64px; left: calc(8px + env(safe-area-inset-left)); }
  body.driving #touchReverse, body.driving.minimal-hud #touchReverse { bottom: calc(var(--strip) + 8px); right: calc(8px + env(safe-area-inset-right)); }
  body.driving #audioPanel { top: 56px; left: 50%; right: auto; transform: translateX(-50%); width: min(440px, 76vw); max-height: calc(100dvh - 64px - var(--strip)); }
  body.driving:has(#audioPanel[open]) .driveheading, body.driving:has(#audioPanel[open]) .speedometer { visibility: hidden; }
  body.driving #roadWarning { top: 56px !important; width: min(360px, 46vw); }
  aside.places, body:not(.driving) aside.places { max-height: 62dvh !important; }
  .camera { bottom: calc(62dvh + 10px) !important; }
  #inspector { bottom: calc(62dvh + 8px); max-height: 30dvh; }
}

/* Touch screens: no blue tap flash, no text selection, no long-press callout. Holding R or the road is a control, not a selection. */
@media (pointer: coarse) {
  html, body, header, aside, button, label, summary, #touchDrive, #touchReverse, #drivehud, .driveactions, .pedals, #maplabels, #houseAddressLabels, canvas {
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  button, summary, label { touch-action: manipulation; }
  input, textarea { -webkit-user-select: text; user-select: text; }
  ::selection { background: transparent; }
}