/* Phone layout for the live map: flight and airport panels become bottom
   sheets with a compact "peek" state and a full "more info" state.
   Everything here only applies on narrow screens; desktop is unchanged.
   The sheet state classes (sheet-peek / sheet-full) are set by app.js. */

.sheet-only, .peek-strip, .sheet-grip { display: none; }

@media (max-width: 760px) {
  /* ---------- shared sheet ---------- */
  .flight {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 64%; border-radius: 18px 18px 0 0; border: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .45);
    transition: height .22s ease, max-height .22s ease, border-radius .22s ease;
  }
  .flight.sheet-full { height: 100%; max-height: 100%; border-radius: 0; border-top: 0; }

  .sheet-grip {
    display: grid; place-items: center; position: sticky; top: 0; z-index: 4;
    height: 20px; background: var(--panel); cursor: grab; touch-action: none;
  }
  .sheet-grip::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: #3a4658; }
  .flight .fl-head { padding: 2px 14px 10px; touch-action: none; }
  .flight.sheet-full .fl-head { position: sticky; top: 20px; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); }
  .flight .fl-callsign h1 { font-size: 22px; }
  .ap-name { font-size: 19px; }

  /* ---------- flight: peek ---------- */
  #panel.sheet-peek #p-photo,
  #panel.sheet-peek .fl-tabs,
  #panel.sheet-peek #pane-cockpit,
  #panel.sheet-peek #pane-profile,
  #panel.sheet-peek #pane-overview > :not(.fl-route):not(.peek-strip) { display: none !important; }
  #panel.sheet-peek #pane-overview { display: block !important; }
  #panel.sheet-peek .fl-route { margin: 0 12px; padding: 12px; }
  #panel.sheet-peek .ap-code { font-size: 24px; }

  /* Sheets stack their content so the bottom bar always sits at the bottom. */
  .flight:not([hidden]) { display: flex; flex-direction: column; }
  .flight > * { flex-shrink: 0; }
  .flight .fl-actions, .ap-panel .ap-tabs { margin-top: auto; }

  #panel.sheet-peek .peek-strip {
    display: grid; grid-template-columns: 1fr 1fr 112px; gap: 1px; margin: 8px 12px 12px;
    background: var(--line); border-radius: var(--radius); overflow: hidden;
  }
  .peek-strip > div { background: var(--panel-2); padding: 8px 11px; min-width: 0; }
  .peek-strip span { display: block; color: var(--muted); font-size: 11px; }
  .peek-strip b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .peek-strip .ps-wide { grid-column: 1 / 3; }
  .peek-strip .ps-photo { grid-column: 3; grid-row: 1 / 3; padding: 0; background: var(--chrome); position: relative; }
  .peek-strip .ps-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* ---------- flight: bottom action bar ---------- */
  .flight .fl-actions {
    position: sticky; bottom: 0; z-index: 4;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    background: var(--chrome, #0b1220); border-top: 1px solid var(--line);
  }
  .flight .fl-actions .btn {
    flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 2px;
    border: 0; border-radius: 8px; background: none; color: var(--muted);
    font-size: 11px; font-weight: 600; white-space: nowrap;
  }
  .flight .fl-actions .btn svg { width: 21px; height: 21px; }
  .flight .fl-actions .btn[aria-pressed="true"], .flight .fl-actions .btn[aria-expanded="true"] { background: var(--panel-2); color: var(--accent); }
  .flight .fl-actions .sheet-only { display: inline-flex; }

  /* ---------- airport ---------- */
  .ap-panel .ap-wx { margin: 0 12px; gap: 6px; }
  .ap-panel .wx-card { min-height: 0; padding: 8px 4px; }
  .ap-panel .wx-big { margin-top: 2px; font-size: 22px; }
  .ap-panel .wx-icon, .ap-panel .wx-arrow { width: 24px; height: 24px; }

  .ap-panel.sheet-peek .ap-photo,
  .ap-panel.sheet-peek .ap-metar,
  .ap-panel.sheet-peek .ap-traffic,
  .ap-panel.sheet-peek .ap-note,
  .ap-panel.sheet-peek .grp { display: none !important; }
  .ap-panel.sheet-peek .ap-wx { margin-bottom: 12px; }

  .ap-panel.sheet-full.ap-mode-traffic .ap-photo,
  .ap-panel.sheet-full.ap-mode-traffic .ap-wx,
  .ap-panel.sheet-full.ap-mode-traffic .ap-metar,
  .ap-panel.sheet-full.ap-mode-traffic .grp { display: none !important; }
  .ap-panel.sheet-full.ap-mode-general .ap-traffic,
  .ap-panel.sheet-full.ap-mode-general .ap-note { display: none !important; }
  .ap-panel.sheet-full .ap-wx { margin-top: 12px; }
  .ap-panel .grp { padding-bottom: 12px; }
  .ap-panel .ap-traffic { margin: 6px 8px 0; }

  /* Arrivals / Departures / On ground become a tab bar along the bottom. */
  .ap-panel .ap-tabs {
    position: sticky; bottom: 0; z-index: 4; margin-left: 0; margin-right: 0; margin-bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    background: var(--chrome, #0b1220); border-top: 1px solid var(--line); border-bottom: 0;
  }
  .ap-panel .ap-tabs button {
    flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 2px; margin: 0;
    border: 0; border-radius: 8px; background: none; color: var(--muted);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
  }
  .ap-panel .ap-tabs button::after { display: none; }
  .ap-panel .ap-tabs .sheet-only { display: inline-flex; }
  .ap-panel .ap-tabs .apt-n { font-size: 11px; }
  /* Only the active view is highlighted: General, or one traffic list. */
  .ap-panel.sheet-full.ap-mode-traffic .ap-tabs button[aria-selected="true"],
  .ap-panel.sheet-full.ap-mode-general .ap-tabs #apt-general { background: var(--panel-2); color: var(--accent); }
  .ap-panel .ap-tabs button[aria-selected="true"] { border-bottom: 0; box-shadow: none; }

  /* Map credits move to the top-left so the sheets' button bars stay clear. */
  #map .leaflet-bottom.leaflet-right { top: 0; bottom: auto; left: 0; right: auto; z-index: 700; }
  #map .leaflet-control-attribution { border-radius: 0 0 6px 0; font-size: 10px; }

  /* Map buttons stay out of the way while a sheet is open. */
  .flight:not([hidden]) ~ .widgets { display: none; }
}