/* -------------------------------------------------------------------------- */
/* OpenCB compact landscape shell — "mounted phone" drive layout               */
/*                                                                             */
/* Loaded after layout-shell.css / navigation-mode.css / console-layout.css.    */
/*                                                                             */
/* Problem this solves: in landscape the shell kept its portrait stack — full   */
/* width header, stage, PTT slab, status bar and tab bar all consuming vertical */
/* space. At 844x320 that left the map 160px (50% of the screen) while the      */
/* navigation panel rendered 365px of content into a 74px box, clipping the     */
/* address field and "Choose on map" entirely. The radio faceplate fared worse: */
/* it became a 160px scroll port showing only the top of the S-meter arc.       */
/*                                                                             */
/* Landscape has width to spare and no height, so the chrome moves to the       */
/* edges: tab bar becomes a left rail, PTT becomes a right dock, and the stage  */
/* takes the full remaining height.                                            */
/*                                                                             */
/* Keyed off the media query rather than [data-orientation] so the layout is    */
/* correct on first paint, before layout-shell.js runs syncOrientationAttr().   */
/* -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) and (orientation: landscape) {
  :root {
    --app-rail-w: 60px;
    --app-ptt-w: 104px;
    /* Setup-column width, shared with the Leaflet zoom offset below so the
       control is always pushed exactly clear of the column. */
    --ocb-nav-col-w: min(340px, 45%);
  }

  /*
   * "tabs" spans every row so the rail is a true full-height edge; header,
   * stage, PTT and status live to its right.
   */
  .app-shell {
    grid-template-areas:
      "tabs header header"
      "tabs stage  ptt"
      "tabs status status";
    grid-template-columns:
      calc(var(--app-rail-w) + var(--safe-left))
      minmax(0, 1fr)
      auto;
    grid-template-rows:
      calc(var(--app-header-h) + var(--safe-top))
      minmax(0, 1fr)
      auto;
  }

  /* ---------------------------------------------------------------------- */
  /* Tab bar -> left rail                                                    */
  /* ---------------------------------------------------------------------- */

  .app-tabbar {
    grid-area: tabs;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    /* Base rules pin a horizontal bar's height; release both. */
    width: calc(var(--app-rail-w) + var(--safe-left));
    height: auto;
    min-height: 0;
    padding: var(--safe-top) 0 var(--safe-bottom) var(--safe-left);
    border-top: none;
    border-right: 1px solid #1a1f28;
  }

  .app-tab {
    /* Rail buttons are tall and narrow rather than wide and short. */
    min-height: max(44px, var(--app-touch-min));
    gap: 2px;
  }

  .app-tab__label {
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  /* ---------------------------------------------------------------------- */
  /* PTT -> right dock, compact but always reachable                         */
  /* ---------------------------------------------------------------------- */

  .app-ptt-dock {
    grid-area: ptt;
    display: flex;
    align-items: stretch;
    width: calc(var(--app-ptt-w) + var(--safe-right));
    min-height: 0;
    padding: 6px max(6px, var(--safe-right)) 6px 6px;
    border-top: none;
    border-left: 1px solid var(--app-chrome-border, #1a1f28);
  }

  .app-ptt-dock .cb-ptt-section {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    /* Row direction with align-items:center pinned the button to its 52px
       content height and floated it mid-column; stretch fills the dock. */
    align-items: stretch;
  }

  /*
   * Fills the dock vertically: a mounted phone is gripped at the edges, so a
   * tall thin target on the driver's side is easier to hit than a short wide
   * one. Still well above the 44px HIG minimum in both axes.
   */
  .app-ptt-dock .cb-ptt-button {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    height: auto;
    /* Base mobile rule caps the button at max-height:72px; the landscape
       dock is a full-height edge target, so the cap must go. */
    max-height: none;
    min-height: max(44px, var(--app-touch-min));
    padding: 10px 6px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .app-ptt-dock .cb-ptt-button__icon {
    font-size: 20px;
  }

  .app-ptt-dock .cb-mic-meter {
    display: none;
  }

  /* Readiness status and station location sit above PTT in the narrow right-hand dock. */
  .app-ptt-dock:has(.app-radio-readiness:not([hidden])),
  .app-ptt-dock:has(.cb-station-location:not([hidden])) {
    flex-direction: column;
    gap: 6px;
  }

  .app-ptt-dock .cb-station-location {
    flex: 0 0 auto;
    padding: 4px;
    font-size: 11px;
  }

  .app-ptt-dock .cb-station-location__place,
  .app-ptt-dock .cb-station-location__mode {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-ptt-dock .app-radio-readiness {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 6px;
    white-space: normal;
    text-align: center;
  }

  /* ---------------------------------------------------------------------- */
  /* Status bar                                                              */
  /* ---------------------------------------------------------------------- */

  /*
   * Every other tab keeps it. On Map the height is worth more than the
   * ticker, and the same link/station state is already on the header pill.
   */
  .app-shell[data-active-tab="map"] .app-status-bar {
    display: none;
  }

  /* ---------------------------------------------------------------------- */
  /* Navigation panel -> left column over the map (setup states only)        */
  /* ---------------------------------------------------------------------- */

  /*
   * navigation-mode.css already slims NAV_READY / NAV_ACTIVE / NAV_REROUTING
   * into a top HUD strip, which is the right shape once guidance is running.
   * The setup states (IDLE, DESTINATION_SELECTED, ROUTING, PAUSED, ERROR,
   * STOPPED) had no such treatment and simply overflowed a clipped box, so
   * they become a scrollable column that leaves the map visible beside it.
   */
  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    ) {
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    top: max(6px, env(safe-area-inset-top));
    bottom: max(6px, env(safe-area-inset-bottom));
    width: var(--ocb-nav-col-w);
    max-height: none;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    .navigation-mode {
    width: 100%;
    max-height: 100%;
    /* Was overflow:hidden with a 120px cap — the source of the clipping. */
    overflow-y: auto;
    /* Inner controls round up ~2px past the column and produced a stray
       horizontal scrollbar across the bottom of the panel. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Reordering below needs a flex container; no gap, the children keep
       their own margins. */
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /*
   * The setup-sheet running order (header / error / safety / search / actions)
   * and the un-sticking of .navigation-mode__controls now live in
   * navigation-mode.css under a plain (max-width: 1023.98px) query, because
   * neither defect was orientation-specific. Fixing them here only meant
   * portrait kept the sticky action row covering its address input.
   */

  /* Map chrome must not sit under the rail-side nav column. */
  .app-map-chrome__side {
    max-height: none;
  }

  /*
   * Leaflet renders its zoom control into .leaflet-top.leaflet-left, which is
   * exactly where the setup column sits — hit-testing showed zoom-in returning
   * .navigation-mode__title and zoom-out returning .navigation-mode__safety,
   * so the map could not be zoomed while choosing a destination. Push the
   * control clear of the column instead of moving it to an edge: top-right
   * holds the Traffic Map chip and bottom-right the alert list, so the gap
   * beside the column is the only free space in this layout.
   *
   * Width is shared with the column rule below so the two cannot drift.
   */
  .app-panel--map:has(
      #navigationModeContainer .navigation-mode:not([data-nav-state="NAV_READY"]):not(
          [data-nav-state="NAV_ACTIVE"]
        ):not([data-nav-state="NAV_REROUTING"])
    )
    #radioMap
    .leaflet-top.leaflet-left {
    margin-left: calc(var(--ocb-nav-col-w) + 16px);
    transition: margin-left 160ms ease;
  }

  /* ---------------------------------------------------------------------- */
  /* Radio faceplate -> two-column console                                   */
  /* ---------------------------------------------------------------------- */

  /*
   * Same failure as the pre-console desktop layout: wide viewport, short
   * height, everything in one column, so the faceplate turned into a scroll
   * port showing only the top of the meter arc. Reuse the console split.
   */
  /*
   * Only three rows here, unlike the desktop console. The base faceplate grid
   * declares seven, and CSS Grid still lays a row gap between empty tracks —
   * brand/lamps, ticker, settings and grille have no rendered items, so those
   * four dead tracks were charging ~24px of the 254px budget. The remaining
   * area names are unused by any visible child at this breakpoint.
   */
  .app-panel--radio .cb-faceplate {
    grid-template-areas:
      "channel meter"
      "channel knobs"
      "channel ptt";
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 10px;
    row-gap: 6px;
    align-content: start;
    overflow: hidden;
  }

  /*
   * Landscape gives the faceplate ~254px of usable height. Untuned, the
   * readout column wanted 299px and the instrument column 289px, so both
   * overflowed and clipped the monitor text and the knob row. Everything
   * below is sized to bring each column under that ceiling.
   */
  .app-panel--radio .cb-faceplate {
    --fp-pad: 6px;
    --fp-gap: 6px;
  }

  .app-panel--radio .cb-meter__svg {
    max-width: min(100%, 210px);
  }

  .app-panel--radio .cb-meter {
    padding: 6px 8px 8px;
  }

  .app-panel--radio .cb-preset-btn {
    padding: 6px 6px;
  }

  .app-panel--radio .cb-channel-section {
    gap: 6px;
  }

  .app-panel--radio .cb-channel-display {
    padding: 6px 10px;
    gap: 5px;
  }

  /* 48px floor is portrait sizing; landscape has ~254px total to work with. */
  .app-panel--radio .cb-faceplate[data-monitor-state="empty"] .cb-monitor-window {
    min-height: 42px;
  }

  .app-panel--radio .cb-channel-display__digits {
    font-size: 34px;
    min-width: 58px;
  }

  .app-panel--radio .cb-knob-group {
    gap: 3px;
  }

  .app-panel--radio .cb-meter-section,
  .app-panel--radio .cb-controls {
    align-self: start;
  }

  .app-panel--radio .cb-channel-section {
    min-height: 0;
  }

  .app-panel--radio .cb-channel-display {
    flex: 0 0 auto;
  }

  .app-panel--radio .cb-station-monitor[data-shell-host="radio"] {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Knobs sit under the meter in a narrow column — keep them compact. */
  .app-panel--radio .cb-controls {
    gap: 10px;
    padding: 2px 0 0;
  }

  .app-panel--radio .cb-knob {
    width: 40px;
    height: 40px;
  }

  /* ---------------------------------------------------------------------- */
  /* Stations / settings                                                     */
  /* ---------------------------------------------------------------------- */

  /* Settings is a bottom sheet in compact; in landscape a near-full-height
     sheet leaves nothing behind it, so cap and centre it instead. */
  .app-shell .cb-settings-panel.app-settings-drawer {
    height: min(94dvh, calc(var(--app-vv-height, 100dvh) - 8px));
  }
}

/* -------------------------------------------------------------------------- */
/* Very short landscape (<=300px tall)                                         */
/*                                                                             */
/* Safari's URL bar plus a home indicator can leave a landscape phone under    */
/* 300px of viewport. The sizing above needs ~240px for the faceplate; at      */
/* 276px the stage is only 218px once the header and ticker are paid for, and  */
/* the monitor line and knob row start clipping again. Buy the height back.    */
/* -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 300px) {
  :root {
    --app-header-h: 32px;
  }

  /*
   * At this height the ticker costs more than it reports — link state is on
   * the header pill and station count is in the Stations tab.
   */
  .app-status-bar {
    display: none;
  }

  .app-panel--radio .cb-meter__svg {
    max-width: min(100%, 180px);
  }

  .app-panel--radio .cb-meter {
    padding: 4px 6px 6px;
  }

  .app-panel--radio .cb-knob {
    width: 34px;
    height: 34px;
  }

  .app-panel--radio .cb-controls {
    gap: 8px;
  }

  .app-panel--radio .cb-preset-btn {
    padding: 4px 5px;
  }

  .app-panel--radio .cb-channel-display__digits {
    font-size: 28px;
    min-width: 48px;
  }

  .app-panel--radio .cb-channel-display {
    padding: 4px 8px;
    gap: 4px;
  }

  .app-panel--radio .cb-faceplate[data-monitor-state="empty"] .cb-monitor-window {
    min-height: 38px;
  }
}