/* Phones and small screens. Breakpoints mirror web/mobile.js:
     compact top bar   (max-width: 999px), (max-height: 500px)  "Licht" as an icon menu
     bottom sheet      (max-width: 699px) and (orientation: portrait)  (web/sidebar.css)
     landscape phone   (max-height: 500px)  compact side panel
     touch             (pointer: coarse)  44 px touch targets
   Safe-area insets (notch, home indicator) need viewport-fit=cover (index.html). */

/* ---- page: no page zoom / scroll / rubber band; no text selection on the chrome ---- */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#light-control, #focus-bar, #map-tools, #unit-panel .unit-head, #unit-panel .unit-furnish,
#unit-panel .unit-handle, #rotate-hint {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#light-control button, #focus-bar button, #map-tools button, #unit-panel button, #rotate-hint button,
#sun-panel input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---- safe areas ---- */
#light-control { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
#focus-bar { top: calc(12px + env(safe-area-inset-top)); }
#map-tools { left: calc(10px + env(safe-area-inset-left));
             /* above the Mapbox logo, or just above the reveal's bottom sheet (--sheet-h, web/app.js) */
             bottom: max(calc(36px + env(safe-area-inset-bottom)), calc(var(--sheet-h, 0px) + 12px)); }
.mapboxgl-ctrl-bottom-left { padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); }
.mapboxgl-ctrl-bottom-right { padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }

/* one line always (it wrapped to two lines on mid-size screens) */
#focus-bar .focus-back { white-space: nowrap; }

/* ---- "Licht": icon toggle (compact screens only) ---- */
#light-control .light-toggle { display: none; }
@media (max-width: 999px), (max-height: 500px) {
  #light-control { padding: 0; gap: 0; border-radius: 50%; }
  #light-control > span { display: none; }
  #light-control .light-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
                                 border-radius: 50%; color: #2b2b2b; }
  #light-control .light-toggle[aria-expanded="true"] { background: #2b2b2b; color: #fff; }
  #light-control .light-icon { display: none; }
  #light-control[data-preset="day"] .light-icon-day, #light-control[data-preset="dusk"] .light-icon-dusk,
  #light-control[data-preset="night"] .light-icon-night, #light-control:not([data-preset]) .light-icon-day {
    display: block; }
  #light-control .buttons { display: none; position: absolute; top: calc(100% + 8px); right: 0;
                            flex-direction: column; gap: 2px; min-width: 150px; padding: 5px; border-radius: 12px;
                            background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); }
  #light-control.is-open .buttons { display: flex; animation: mobile-pop-in 160ms ease-out both; }
  #light-control .buttons button { min-height: 44px; padding: 0 14px; font-size: 15px; text-align: left;
                                   border-radius: 8px; }

  /* the pill keeps clear of the Licht icon on either side (it is centred) */
  #focus-bar { width: max-content;
               max-width: calc(100vw - 128px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  #focus-bar .pill { max-width: 100%; box-sizing: border-box; min-width: 0; }
  #focus-bar .focus-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #focus-bar .focus-card { max-width: 100%; box-sizing: border-box; }
}
@keyframes mobile-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- phones in portrait: bottom sheet (web/sidebar.css); the reveal pill is just the way back ---- */
@media (max-width: 699px) and (orientation: portrait) {
  #focus-bar[data-mode="reveal"] .focus-name { display: none; }
  #focus-bar[data-mode="reveal"] .pill { padding-right: 4px; }
  #unit-panel .unit-other { font-size: 13px; }
  /* the sun card beside the tool stack, as wide as the screen allows */
  #sun-panel { width: calc(100vw - 76px - env(safe-area-inset-left) - env(safe-area-inset-right));
               max-width: 360px; padding: 10px 12px 10px; }
}

/* ---- landscape phone: little height - compact side panel, compact sun card ---- */
@media (max-height: 500px) {
  /* the side panel names the bouwnummer: the pill is just the way back */
  #focus-bar[data-mode="reveal"] .focus-name { display: none; }
  #focus-bar[data-mode="reveal"] .pill { padding-right: 4px; }
  #unit-panel { top: calc(64px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
                width: min(300px, 42vw);
                max-height: calc(100% - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                padding: 11px 14px 12px; }
  #unit-panel .unit-title { font-size: 16px; }
  #unit-panel .unit-furnish { margin-top: 8px; }
  #unit-panel .unit-rooms { margin-top: 8px; }
  #unit-panel .unit-others { margin-top: 10px; padding-top: 10px; }
  #focus-bar .focus-card { padding: 6px 12px; }
  #sun-panel { padding: 8px 12px 9px; }
  #sun-panel .sun-desc { margin: 0 0 4px; }
  #sun-panel .sun-row { margin-top: 2px; }
}

/* ---- touch: 44 px targets ---- */
@media (pointer: coarse) {
  #light-control button { min-height: 44px; }
  #focus-bar .focus-back { min-height: 44px; padding: 0 16px; font-size: 14px; }
  #focus-bar .pill { padding-top: 3px; padding-bottom: 3px; }
  #focus-bar .focus-card a { padding: 10px 0; margin-top: 0; }
  #unit-panel .unit-close { width: 44px; height: 44px; margin: -10px -12px -6px 0; font-size: 24px; }
  #unit-panel .unit-furnish { min-height: 44px; }
  #unit-panel .unit-switch { width: 40px; height: 24px; }
  #unit-panel .unit-switch::after { width: 20px; height: 20px; left: 18px; }
  #unit-panel .unit-furnish[aria-checked="false"] .unit-switch::after { left: 2px; }
  #unit-panel .unit-other { min-height: 44px; padding: 0 14px; }
  #sun-panel .sun-off { min-height: 44px; padding: 0 14px; font-size: 13px; }
  #sun-panel .sun-now { min-height: 44px; padding: 0 18px; }
  #sun-panel .sun-slider { height: 44px; }
  #sun-panel .sun-slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; }
  #sun-panel .sun-slider::-moz-range-thumb { width: 26px; height: 26px; }
  .lot-popup .mapboxgl-popup-content { padding-right: 40px; }
  .lot-popup .mapboxgl-popup-close-button { width: 40px; height: 40px; font-size: 22px; }
  .lot-popup .placeholder-popup a { padding: 10px 0 4px; margin-top: 0; }
}
/* no hover on touch screens: no pointer tooltip */
@media (hover: none) {
  .hover-tip { display: none; }
}

/* ---- "Draai je telefoon" hint (web/mobile.js): above the tool stack, non-blocking ---- */
#rotate-hint { position: absolute; z-index: 4; left: 50%; bottom: calc(148px + env(safe-area-inset-bottom));
               width: min(340px, calc(100vw - 32px)); box-sizing: border-box; transform: translateX(-50%);
               display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 14px;
               color: #1f1f1f; background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
               font-size: 14px; line-height: 1.3; }
#rotate-hint[hidden] { display: none; }
#rotate-hint.is-visible { animation: rotate-hint-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#rotate-hint .rotate-hint-icon { flex: none; color: #2b2b2b; overflow: visible; }
#rotate-hint .rotate-hint-phone { transform-box: fill-box; transform-origin: 50% 50%;
                                  animation: rotate-hint-turn 2.6s cubic-bezier(0.45, 0, 0.25, 1) 400ms infinite; }
#rotate-hint .rotate-hint-arrow { color: #2f7bff; stroke: #2f7bff; }
#rotate-hint .rotate-hint-text { flex: 1; margin: 0; font-weight: 600; }
#rotate-hint .rotate-hint-ok { flex: none; min-width: 64px; min-height: 44px; padding: 0 16px; border: none;
                               border-radius: 10px; background: #2b2b2b; color: #fff; font: inherit;
                               font-weight: 600; cursor: pointer; }
#rotate-hint .rotate-hint-ok:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
@keyframes rotate-hint-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rotate-hint-turn {
  0%, 18% { transform: rotate(0deg); }
  45%, 72% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  #rotate-hint.is-visible, #light-control.is-open .buttons { animation: none; }
  /* no animation: the phone drawn turned, the arrow says which way */
  #rotate-hint .rotate-hint-phone { animation: none; transform: rotate(-90deg); }
}