/* Phone Portrait View — responsive layout for narrow/vertical screens.
   All rules gated by media query — deleting this file reverts to desktop layout.
   See: docs/superpowers/specs/2026-04-15-phone-portrait-view-design.md */

/* Hidden on desktop — only visible inside the @media portrait block */
.phone-button-rows {
  display: none;
}

.phone-time-bar {
  display: none;
}

.phone-sheet-handle {
  display: none;
}

.phone-wind-speed {
  display: none;
}

.phone-close-settings {
  display: none;
}

.monitor-label-phone {
  display: none;
}

@media (max-width: 600px) and (orientation: portrait) {
  /* Phone portrait overrides below */

  /* ── Task 2: Hide desktop layout elements ── */

  /* Hide desktop vertical button columns */
  .action-buttons-left,
  .action-buttons-right {
    display: none !important;
  }

  /* Hide every on-map legend on phone. There is no free corner left in
     portrait: the bottom-right legend stack (detection-age + warning-map) lands
     on top of the phone button rows, and the AQI/fuel panels eat the little map
     area that remains. Desktop keeps all of them. */
  .legend-stack,
  .fuel-legend,
  #smoke-aqi-legend {
    display: none !important;
  }

  /* Hide horizontal time slider */
  .time-slider-container {
    display: none !important;
  }

  /* Hide technical view sidebars (content moves to bottom sheet) */
  .tv-sidebar {
    display: none !important;
  }

  /* Hide the tech-view wrapper entirely on phone */
  .tech-view {
    display: none !important;
  }

  /* Hide WIND SPEED (1st), WIND DIR (2nd), TEMP (3rd), SIMTIME (6th) — keep HUMIDITY (4th) + BURNED AREA (5th) */
  .monitoring-bar .monitor-field:nth-child(1),
  .monitoring-bar .monitor-field:nth-child(2),
  .monitoring-bar .monitor-field:nth-child(3),
  .monitoring-bar .monitor-field:nth-child(6) {
    display: none !important;
  }

  /* ── Task 3: Restyle top bars for phone ── */

  /* ── Monitoring bar: compact for 2 fields ── */
  .monitoring-bar {
    height: 3.5vh;
    align-items: center;
  }

  .monitor-field {
    padding: 0;
  }

  .monitor-label {
    font-size: 2vh;
  }

  .monitor-label-desktop {
    display: none;
  }

  .monitor-label-phone {
    display: inline !important;
    margin-right: 0.5em;
  }

  .monitor-value {
    font-size: 2vh;
  }

  /* ── Coordinates bar: condensed ── */
  .coordinates-bar {
    font-size: 2vh;
    padding: 0;
  }

  .coordinates-left,
  .coordinates-right {
    font-size: 2vh;
  }

  /* Show center coordinates (cyan), hide cursor coordinates */
  .coordinates-left .coordinates-line:not(.coordinates-cyan) {
    display: none;
  }

  /* Hide "Center: " prefix on phone (not needed without cursor coords) */
  .center-label {
    display: none;
  }

  /* Hide the coordinate-system label on phone — wide screens only */
  .coords-sys-label {
    display: none;
  }

  /* Coordinates bar: reflow for phone — stack vertically */
  .coordinates-bar {
    flex-direction: column;
    align-items: center;  /* center children horizontally on phone (column layout) */
    height: auto;
    padding: 0;
  }

  .coordinates-left {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 3.5vh;
    line-height: 3.5vh;
    overflow: hidden;
  }

  .coordinates-left .coordinates-cyan {
    font-size: 2vh;
    line-height: 3.5vh;
  }

  /* Weather run info: shrink-wrap to text width and auto-center.
     All centering properties marked !important so nothing in the cascade
     (desktop .weather-run-info rule from style.css, flex parent quirks,
     or future overrides) can knock it off-center. */
  .weather-run-info {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    position: static !important;
    font-size: 1.5vh !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0.3vh 1vh !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide view toggle on phone (accessible via bottom sheet) */
  .coordinates-right {
    display: none;
  }

  /* ── Task 4: Scale compass and wind dial to 50% ── */

  /* ── Compass rose: 70% scale, flush left, 1vh below header ── */
  .maplibregl-ctrl-compass-pro {
    transform: scale(0.7);
    transform-origin: top left;
    left: 1vw;
    top: 11vh;
  }

  /* ── Wind compass mini: 70% scale, flush right, 1vh below header ── */
  .maplibregl-ctrl-wind-compass {
    transform: scale(0.7);
    transform-origin: top right;
    right: 1vw;
    top: 11vh;
  }

  /* ── Wind compass label: single line on phone to avoid overlapping speed ── */
  .wind-compass-label {
    white-space: nowrap;
    font-size: calc(1.4 * var(--Vd));
    bottom: calc(-2.8 * var(--Vd)) !important;
  }

  .wind-compass-label br {
    display: none;
  }

  /* ── Wind speed under wind dial (phone only) ── */
  .phone-wind-speed {
    display: block !important;
    color: #00ffcc;
    font-family: Arial, sans-serif;
    font-size: calc(2.5 * var(--Vd, 1vh));
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    margin-top: 4.5vh;
  }

  /* ── Phone button rows ── */
  .phone-button-rows {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    bottom: 6vh;
    left: 0;
    right: 0;
    z-index: 25;
    padding: 0.5vh 1vw;
    gap: 0.5vh;
    pointer-events: none;
  }

  .phone-button-row {
    display: flex;
    /* Switched from space-evenly to gap+center so the inter-button distance
       is explicit (~half of what space-evenly distributed across 5 buttons). */
    justify-content: center;
    align-items: center;
    gap: 3vw;
    pointer-events: auto;
  }

  .phone-button-row .action-button {
    /* Slightly bigger thumb-friendly size (12vw → 14vw). */
    width: 14vw;
    height: 14vw;
    min-width: 56px;
    min-height: 56px;
  }

  .phone-button-row .action-button img,
  .phone-button-row .action-button svg {
    /* Proportional icon bump (7vw → 8vw) to keep the same visual ratio. */
    width: 8vw;
    height: 8vw;
  }

  /* ── Phone time control bar ── */
  .phone-time-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 25;
    align-items: center;
  }

  .phone-time-btn {
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-time-btn svg {
    width: 5vh;
    height: 5vh;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
  }

  .phone-time-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }

  .phone-time-center {
    flex: 2;
    height: 100%;
    background: none;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-time-center:active {
    background: rgba(255, 255, 255, 0.1);
  }

  .phone-time-label {
    color: #00ffcc;
    font-family: monospace;
    font-size: 3vh;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 255, 200, 0.5);
  }

  /* ── Bottom sheet handle (left margin) ── */
  .phone-sheet-handle {
    display: flex !important;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    background: orange;
    border-radius: 0 8px 8px 0;
    padding: 2vh 0.8vw;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .phone-sheet-handle-bar {
    width: 4px;
    height: 6vw;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    margin-bottom: 0.5vh;
  }

  .phone-sheet-handle-label {
    color: black;
    font-family: Arial, sans-serif;
    font-size: 1.5vh;
    letter-spacing: 0.1em;
  }

  /* ── Bottom sheet overlay (tech-view as fullscreen sheet) ── */
  body.sheet-open .tech-view {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6vh !important;
    z-index: 100 !important;
    background: rgba(20, 20, 30, 0.95) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }

  body.sheet-open .tv-sidebar {
    display: block !important;
    width: 100% !important;
    min-width: unset !important;
    height: auto !important;
    border: none !important;
    padding-bottom: 1vh !important;
  }

  body.sheet-open .phone-sheet-handle-label {
    color: rgba(255, 100, 100, 0.8);
  }

  /* Close settings button (circular red X) */
  .phone-close-settings {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 4vh;
    height: 4vh;
    border-radius: 50%;
    background: #cc0000;
    color: #fff;
    border: none;
    font-size: 2.5vh;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
  }

  .phone-close-settings:active {
    background: #990000;
  }

  /* Move button row to top of settings screen, hide map slot */
  body.sheet-open .tv-center {
    order: -1;
  }

  body.sheet-open .tv-map-slot {
    display: none !important;
  }

  body.sheet-open .tv-center {
    flex: 0 0 auto !important;
  }

  body.sheet-open .tv-header-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(20, 20, 30, 0.95);
  }

  /* ── Hide advanced settings sections on phone ── */
  #section-data-cursor,
  #section-data-layers,
  #section-historical-weather,
  #section-local-maps,
  #section-finetuning {
    display: none !important;
  }

  /* Force finetuning collapsible open on phone (for sliders) */
  #section-finetuning-content {
    display: flex !important;
  }

  /* Hide non-slider groups inside finetuning (Spotting, Fireline, CFL, Flux, Equation, Perf Audit) */
  #section-finetuning-content > .tv-ctrl-group {
    display: none !important;
  }

  /* Show sliders wrapper and its children */
  #section-sliders {
    display: block !important;
  }
  #section-sliders .tv-ctrl-group {
    display: block !important;
  }

  /* Hide Impact and Get Wind buttons on phone */
  #btn-impact,
  #btn-get-wind {
    display: none !important;
  }

  /* Hide specific right sidebar sections on phone */
  #section-nowcasting,
  #section-triggers,
  #section-duration,
  #section-animate,
  #section-layers {
    display: none !important;
  }

  /* ── Full-width popups on phone ── */
  .affected-popup {
    left: 0 !important;
    width: 100% !important;
    top: 10vh !important;
    bottom: 6vh !important;
  }

  /* ── License overlay: constrain to screen width on phone ── */
  .license-overlay {
    bottom: 22vh !important;
    white-space: normal !important;
    max-width: 90vw;
    text-align: center;
    font-size: 1.3vh;
  }

  .maplibregl-ctrl-bottom-right {
    bottom: 20vh !important;
  }

  /* ── Map container adjustments ── */
  .app-container {
    padding-bottom: 6vh; /* space for fixed time bar */
  }

  .tv-map-slot {
    flex: 1;
    min-height: 0;
  }
}

/* SIMTIME calendar: hide the month/year sidebar on phone/narrow screens so the
   calendar gets the full width (navigate months with the < > arrows). */
@media (max-width: 600px) {
  .simtime-month-sidebar { display: none !important; }
}

@media (max-width: 600px) and (orientation: portrait) {
  /* ── Help mode, phone portrait ────────────────────────────────────
     The box is placed by place_box, which already switches to a
     stacked above/below layout below 720px of viewport width. Here we
     only shrink the type and give the toggle a finger-sized target. */
  .help-toggle-btn {
      width: 5.2vh;
      height: 5.2vh;
      font-size: 3.2vh;
      margin-left: var(--help-license-offset, 36vw);
  }

  .help-box {
      padding: 1.6vh 1.8vh;
      border-radius: 1vh;
  }

  .help-box-name {
      font-size: 2.2vh;
      margin-bottom: 0.9vh;
  }

  .help-box-what,
  .help-box-act {
      font-size: 1.8vh;
  }
}