/*
 * EMS Link · Arrivals — phone landscape (2026-10-01)
 *
 * Why: every layout rule in arrivals.css / transcript-popup.css is keyed on
 * width only. A phone on its side is 667–932 px wide, so it got the tablet
 * layout squeezed into ~320–430 px of height.
 *
 * Load LAST: after arrivals.css, transcript-popup.css, tour.css (and demo.css
 * on the demo page). Selectors match the existing specificity, so source order
 * makes these win. Nothing here applies at desktop/tablet sizes or in portrait.
 *
 * Verified on the demo board at 932×430, 844×390 and 667×375: board, transcript
 * popup + player, Vitals/Demographics editor, notes drawer, settings drawer,
 * activation details, live radio popover, account menu.
 */

@media (orientation: landscape) and (max-height: 500px) {

  /* Demo strip (demo page only) */
  .demo-strip { padding-top: 4px; padding-bottom: 4px; }
  .demo-strip-detail { display: none; }

  /* ---------- Top bar: one compact row that scrolls away ---------- */
  #ems-light-themes .ab-bar {
    position: static;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: clip;     /* the radio sonar otherwise makes the page scroll sideways */
    overflow-y: visible;
  }
  #ems-light-themes .ab-bar > * { flex-shrink: 0; }
  #ems-light-themes .ab-brand .brand-lockup { display: none; }
  #ems-light-themes .ab-dept { flex-shrink: 1; min-width: 0; max-width: 200px; }
  #ems-light-themes .ab-dept select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  #ems-light-themes #live-label { display: none; }          /* icon + LIVE badge stay */
  #ems-light-themes .ab-spacer { flex: 1 0 0; }

  /* ---------- Board ---------- */
  #ems-light-themes .ab-main { padding: 8px 12px 12px; }
  #ems-light-themes .ab-title { margin-bottom: 6px; row-gap: 6px; }
  #ems-light-themes .ab-title h1 { font-size: 20px; line-height: 1.2; }

  /* Toolbar: one row that scrolls sideways instead of wrapping to two */
  #ems-light-themes .ab-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #ems-light-themes .ab-toolbar::-webkit-scrollbar { display: none; }
  #ems-light-themes .ab-toolbar > * { flex-shrink: 0; }

  /* The 30-minute timeline needs ~170 px; same choice as the ≤720 px layout */
  #ems-light-themes .ab-timeline { display: none; }

  /* 2 columns at 844–932 px, 1 column at 667–740 px */
  #ems-light-themes .patient-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
  }

  /* ---------- Activation alert ---------- */
  #ems-light-themes .ab-alert {
    top: auto;
    bottom: 8px;
    right: 8px;
    left: auto;
    width: min(400px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow: auto;
  }
  #ems-light-themes .ab-alert-replay { bottom: 8px; right: 8px; }

  /* ---------- Popovers (live radio, account menu) ---------- */
  #ems-light-themes .ab-popover {
    top: 52px;                          /* under the 48 px bar, not the old 64 px one */
    max-height: calc(100dvh - 60px);
    overflow: auto;
  }

  /* ---------- Editors and drawers ---------- */
  #ems-light-themes .v2-dialog:not(#medic-transcript) {
    max-height: calc(100dvh - 12px);
    overflow: auto;
  }
  #ems-light-themes .ab-drawer { height: 100dvh; max-height: 100dvh; }
  #ems-light-themes .v2-dialog .modal-head { padding: 10px 16px; flex-shrink: 0; }
  #ems-light-themes .v2-dialog .ab-head-icon { display: none; }
  #ems-light-themes .v2-dialog .editor-form { padding: 10px 16px 8px; }
  #ems-light-themes .v2-dialog .editor-actions { padding: 8px 16px; flex-shrink: 0; }
  #ems-light-themes .ab-drawer textarea { flex: 0 0 auto; height: 96px; min-height: 72px; }
  #ems-light-themes #activation-dialog .modal-head { padding: 8px 16px; flex-shrink: 0; }
  #ems-light-themes #activation-dialog .activation-heading-icon { display: none; }
  #ems-light-themes #activation-dialog .modal-body { padding: 12px 16px; }

  /* ---------- Medic transcript popup ---------- */
  /* One scrolling sheet: sticky header (close button), sticky player. */
  #ems-light-themes #medic-transcript {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #ems-light-themes #medic-transcript .mt-window {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto 1fr auto;
    overflow: visible;
    border-radius: 0;
  }

  /* Header */
  #ems-light-themes #medic-transcript .mt-head {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 52px;
    padding: 6px 12px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  #ems-light-themes #medic-transcript .mt-esi { width: 36px; height: 36px; }
  #ems-light-themes #medic-transcript .mt-eyebrow,
  #ems-light-themes #medic-transcript .mt-pipeline { display: none; }
  #ems-light-themes #medic-transcript .mt-heading { min-width: 0; }
  #ems-light-themes #medic-transcript .mt-heading h2 { font-size: 17px; line-height: 1.2; }
  #ems-light-themes #medic-transcript .mt-heading p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ems-light-themes #medic-transcript .mt-close { margin-left: auto; flex-shrink: 0; width: 40px; height: 40px; }

  /* Timeline: the evenly spaced rail from phone.css (it scrolls sideways and pads
     itself clear of the sensor housing), compact so the conversation gets the room */
  #ems-light-themes #medic-transcript .mt-timeline { padding: 4px 0 2px; }
  #ems-light-themes #medic-transcript .mt-timeline-heading { display: none; }
  #ems-light-themes #medic-transcript .mt-timeline-track { overflow-x: auto; overflow-y: hidden; }

  /* Transcript (normal flow) + snapshot (sticks beside it) */
  #ems-light-themes #medic-transcript .mt-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    align-items: start;
    overflow: visible;
  }
  #ems-light-themes #medic-transcript .mt-conversation,
  #ems-light-themes #medic-transcript .mt-conversation-scroll {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  /* Topic tags move under each paragraph so the text uses the full width */
  #ems-light-themes #medic-transcript .mt-line-body { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  #ems-light-themes #medic-transcript .mt-line-tags {
    grid-area: auto;
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
  }
  #ems-light-themes #medic-transcript .mt-snapshot {
    position: sticky;
    top: 52px;
    max-height: calc(100dvh - 104px);
    overflow: auto;
    padding: 10px;
  }
  #ems-light-themes #medic-transcript .mt-chief { padding: 8px; margin-bottom: 8px; }
  #ems-light-themes #medic-transcript .mt-snapshot-note,
  #ems-light-themes #medic-transcript .mt-transcript-note,
  #ems-light-themes #medic-transcript .mt-player-label,
  #ems-light-themes #medic-transcript .mt-player-note { display: none; }

  /* Player: compact, pinned to the bottom */
  #ems-light-themes #medic-transcript .mt-player {
    position: sticky;
    bottom: 0;
    z-index: 3;
    min-height: 52px;
    padding: 6px 12px;
    gap: 8px;
  }
  #ems-light-themes #medic-transcript .mt-scrub { flex: 1 1 auto; min-width: 0; }
  #ems-light-themes #medic-transcript .mt-scrub input { min-width: 60px; width: 100%; }
}

/* Smallest landscape phones (iPhone SE / mini, 667–760 px wide) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  #ems-light-themes .ab-clock { display: none; }
  #ems-light-themes #medic-transcript .mt-main { grid-template-columns: minmax(0, 1fr) 180px; }
  #ems-light-themes #medic-transcript .mt-skip { display: none; }
}

/* Notch and home indicator (2026-10-02). The dashboard sets viewport-fit=cover,
   so on its side the page runs under the sensor housing and the home indicator.
   Keep controls and text inside the safe area; env() is 0 everywhere else. */
@media (orientation: landscape) and (max-height: 500px) {
  .demo-strip {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  #ems-light-themes .ab-bar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #ems-light-themes .ab-main {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  #ems-light-themes .ab-alert,
  #ems-light-themes .ab-alert-replay {
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #ems-light-themes .ab-toast {
    left: max(24px, env(safe-area-inset-left));
    bottom: max(24px, calc(8px + env(safe-area-inset-bottom)));
  }
  #ems-light-themes .ab-menu { right: max(16px, env(safe-area-inset-right)); }
  /* live-radio.js pins the panel 12 px from the right edge at every phone width; anchor it
     there in CSS so it can also clear the sensor housing */
  #ems-light-themes .ab-live-panel { left: auto !important; right: max(12px, env(safe-area-inset-right)); }
  #ems-light-themes #activation-dialog { width: min(800px, calc(100vw - 2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right)))); }
  #ems-light-themes .ab-drawer .modal-head,
  #ems-light-themes .ab-drawer .editor-actions { padding-right: max(16px, env(safe-area-inset-right)); }
  #ems-light-themes .ab-drawer .ab-drawer-body { padding-right: max(20px, env(safe-area-inset-right)); }
  #ems-light-themes .ab-drawer .editor-actions { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #ems-light-themes #medic-transcript .mt-head,
  #ems-light-themes #medic-transcript .mt-player {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #ems-light-themes #medic-transcript .mt-player { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  #ems-light-themes #medic-transcript .mt-main {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Form controls at 16 px so iOS does not zoom the page when one is focused, and
   44 px buttons in sheets, alerts and the tour (2026-10-02). */
@media (orientation: landscape) and (max-height: 500px) {
  #ems-light-themes .ab-dept select,
  #ems-light-themes .ab-sort select,
  #ems-light-themes .lp-feed select,
  #ems-light-themes .editor-form input,
  #ems-light-themes .editor-form select,
  #ems-light-themes .ab-drawer textarea,
  #ems-light-themes .ab-set-grid select,
  #ems-light-themes .ab-inline select { font-size: 16px; }
  #ems-light-themes .editor-actions .ab-btn,
  #ems-light-themes .ab-act-foot .ab-btn,
  #ems-light-themes .aa-actions .ab-btn,
  #ems-light-themes .tour-actions .ab-btn { height: 44px; }
  #ems-light-themes .aa-actions .ab-btn-icon { width: 44px; }
  #ems-light-themes .v2-dialog:not(#medic-transcript):not(#activation-dialog) .modal-close,
  #ems-light-themes #activation-dialog .modal-close,
  #ems-light-themes #medic-transcript .mt-close { width: 44px; height: 44px; }
  #ems-light-themes #activation-dialog .modal-close { font-size: 24px; line-height: 1; }
  #ems-light-themes .tour-skip { min-height: 44px; }

  /* Top bar: 44 px controls in a 56 px bar (it scrolls away with the page) */
  #ems-light-themes .ab-bar { height: 56px; min-height: 56px; }
  #ems-light-themes .ab-brand { min-width: 44px; height: 44px; justify-content: center; }
  #ems-light-themes .ab-dept,
  #ems-light-themes .ab-live,
  #ems-light-themes .ab-account { height: 44px; }
  #ems-light-themes .ab-dept select { height: calc(100% + 2px); margin: -1px 0; }  /* over the 1 px border */
  #ems-light-themes .ab-icon { width: 44px; height: 44px; }
  #ems-light-themes .ab-account > span { width: 36px; height: 36px; }
  #ems-light-themes .ab-popover { top: 60px; max-height: calc(100dvh - 68px); }

  /* Toolbar and card controls */
  #ems-light-themes .ab-range .time-btn,
  #ems-light-themes .ab-sort select,
  #ems-light-themes .ab-tool,
  #ems-light-themes .ab-toolbar .ab-seg button,
  #ems-light-themes .ab-range-thumb { height: 44px; }
  #ems-light-themes .p-strip { height: auto; min-height: 44px; }
  #ems-light-themes .p-strip .medic-activation-symbol,
  #ems-light-themes .hide-patient { height: 36px; }
  #ems-light-themes .hide-patient { width: 44px; }
  /* Small controls keep their look; an invisible edge makes the touch area 44 px tall */
  #ems-light-themes :is(.ab-chip, .complaint-more, .hide-patient, .medic-activation-symbol, .medic-clip),
  .demo-strip nav a { position: relative; }
  #ems-light-themes :is(.ab-chip, .complaint-more, .hide-patient, .medic-activation-symbol, .medic-clip)::after,
  .demo-strip nav a::after { content: ""; position: absolute; inset: -8px -2px; }

  /* Sheets: 44 px fields and buttons */
  #ems-light-themes .editor-form input,
  #ems-light-themes .editor-form select,
  #ems-light-themes .ab-set-grid select,
  #ems-light-themes .ab-inline select { height: 44px; }
  #ems-light-themes .lp-close,
  #ems-light-themes .lp-mute { width: 44px; height: 44px; }

  /* Transcript player: thumb-sized controls; the scrubber keeps its 6 px track inside a 44 px touch area */
  #ems-light-themes #medic-transcript .mt-skip { height: 44px; }
  #ems-light-themes #medic-transcript .mt-speed { min-width: 44px; height: 44px; }
  #ems-light-themes #medic-transcript .mt-scrub input {
    height: 44px;
    background-size: 100% 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  #ems-light-themes #medic-transcript .mt-scrub input::-webkit-slider-thumb { width: 18px; height: 18px; }
  #ems-light-themes #medic-transcript .mt-scrub input::-moz-range-thumb { width: 18px; height: 18px; }

  /* Menu rows, the alert replay chip, toast buttons and settings rows: 44 px */
  #ems-light-themes .ab-menu-items > * { height: 44px; }
  #ems-light-themes .ab-alert-replay { height: 44px; }
  #ems-light-themes .ab-toast button { height: 44px; }
  #ems-light-themes .ab-toast #toast-close { width: 44px; }
  #ems-light-themes .ab-set-row .ab-btn { height: 44px; }
  /* Quick notes, the medic line, switches: same look, 44 px touch area */
  #ems-light-themes .ab-quick button,
  #ems-light-themes .medic-copy { position: relative; }
  #ems-light-themes .ab-quick button { height: 40px; }
  #ems-light-themes .ab-quick button::after { content: ""; position: absolute; inset: -3px 0; }
  #ems-light-themes .medic-copy::after { content: ""; position: absolute; inset: -4px 0; }
  #ems-light-themes .ab-switch::before { content: ""; position: absolute; inset: -8px -2px; }
}