/* ============================================================================
   mobile.css — phone and tablet layout for the builder page (index.html)
   ----------------------------------------------------------------------------
   Loaded only by index.html. live.html keeps its own responsive rules inside
   live.css, so nothing here has to guess which page it is on.

   Every breakpoint below is written as `@media screen and (...)` on purpose.
   A plain `(max-width: …)` query also matches PRINT — portrait Letter is only
   about 750 CSS px wide — which would silently push the phone layout onto
   paper. Narrowing to `screen` keeps print.css the only thing that describes
   the printed page.

   For the same reason index.html tags this file `data-print-skip`, so the
   Print Setup preview never attaches it: the preview lays its iframe out at
   paper width, and a small paper size would otherwise trip these queries and
   show a phone layout where a printed page belongs.
============================================================================ */

/* Desktop default for the two mobile-only controls added to index.html.
   These two rules sit outside any query so the controls stay hidden on wide
   screens (and in print, which print.css also enforces). */
.m-menu-btn,
.m-jump { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   TABLET AND BELOW — stack the two columns
   The reference sidebar is a sticky, resizable, JS-width-controlled panel on
   desktop. Below 900px it becomes a normal block that follows the timeline,
   which is why width/min/max all need !important: app.js writes an inline
   pixel width when the user drags the resize handle.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {
  .main-layout { flex-direction: column; align-items: stretch; }

  .timeline-section {
    padding: 18px 14px 28px;
    border-right: none;
  }

  .ref-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 20px 14px calc(40px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }

  /* Pointer-only affordances: a drag-to-resize strip and a width readout are
     meaningless without a mouse, and the handle would swallow taps. */
  .ref-resize-handle,
  .ref-size-ctrl { display: none !important; }

  /* --time-w is deliberately left at its 88px default here. Narrowing it to
     68px clipped the "11:30 AM" chip and the CUTOFF PASSED pill, which are
     sized by their own text and do not shrink with the column. Below 620px the
     time column becomes a full-width row instead, so it needs no squeezing. */
}


/* ══════════════════════════════════════════════════════════════════════════
   HEADER — collapse the toolbar into a Menu sheet
   The header carries 14 controls. Rather than a cramped scroll strip, below
   860px it becomes: row 1 brand + Menu, row 2 the cutoff line, and the whole
   toolbar drops down as a full-width sheet.

   --hdr-h stays a fixed pixel value (never `auto`): several layout rules do
   calc(100vh - var(--hdr-h)), which would break on a keyword.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 860px) {
  :root { --hdr-h: 96px; }

  .site-header { height: var(--hdr-h); }
  .header-inner {
    flex-wrap: wrap;
    align-content: center;
    padding: 0 12px;
    gap: 6px 10px;
  }

  .header-brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand-logo { width: 28px; height: 28px; }
  .brand-text { min-width: 0; }
  .site-title {
    font-size: 14.5px;
    /* The title is user text and can be long; clip it instead of letting it
       shove the Menu button off the screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .site-subtitle { font-size: 9.5px; letter-spacing: .4px; }

  /* Cutoff moves to its own full-width row so it can show its whole sentence
     instead of being ellipsised to a sliver. */
  .header-meta { order: 3; flex: 1 1 100%; min-width: 0; }
  .cutoff-pill { max-width: 100%; width: 100%; font-size: 12px; padding: 4px 12px; }

  /* ── The Menu button ── */
  .m-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    order: 2;
    flex: none;
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--border-2);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-1);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-menu-btn:active { background: var(--accent-lo); }
  .m-menu-btn svg { flex: none; }
  html.m-menu-open .m-menu-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  /* The two bars morph into an X while the sheet is open. */
  html.m-menu-open .m-menu-btn .m-bar-top    { transform: translateY(5px) rotate(45deg); }
  html.m-menu-open .m-menu-btn .m-bar-bottom { transform: translateY(-5px) rotate(-45deg); }
  .m-menu-btn .m-bar-top,
  .m-menu-btn .m-bar-bottom {
    transition: transform .18s ease;
    transform-origin: center;
  }

  /* ── The toolbar as a drop-down sheet ──
     .site-header is sticky, which makes it a containing block, so top:100%
     lands the sheet immediately under the header at any scroll position. */
  .header-actions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-bottom: 1px solid var(--border-2);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .18);
    max-height: calc(100vh - var(--hdr-h) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 120;
  }
  html.m-menu-open .header-actions { display: flex; }

  /* Two per row, full-height taps. Anything that needs a whole row says so
     below. */
  .header-actions > .pill-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: flex-start;
    height: 44px;
    padding: 0 12px;
    font-size: 13.5px;
  }
  .header-actions > .btn-group {
    flex: 1 1 100%;
    justify-content: center;
    padding: 4px;
  }
  .header-actions > .btn-group .icon-btn { flex: 1 1 auto; height: 38px; }

  /* Options lives in its own wrapper so the fixed dropdown has an anchor; the
     wrapper needs the same 2-up sizing the bare pills get, or the button
     inside it keeps its 34px desktop height. */
  .header-actions > .btn-pdf-wrap {
    flex: 1 1 calc(50% - 4px);
    display: flex;
  }
  .btn-pdf-wrap > .pill-btn {
    flex: 1 1 auto;
    justify-content: flex-start;
    height: 44px;
    padding: 0 12px;
    font-size: 13.5px;
  }

  .header-actions > #searchWrap {
    flex: 1 1 100%;
    height: 44px;
    border-radius: 10px;
    padding: 0 12px;
  }
  /* The wrapper is the visible 44px field; stretching the input to fill it
     means a tap anywhere in the row focuses the search box. */
  .search-input { width: 100% !important; height: 100%; font-size: 16px; }

  .header-actions > .sched-lib-wrap { flex: 1 1 100%; }
  .sched-select { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 14px; }
  .sched-lib-btn { width: 40px; height: 40px; }

  .header-actions > .backup-wrap {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .backup-wrap > .pill-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: flex-start;
    height: 44px;
    font-size: 13.5px;
  }

  .header-actions > #themeBtn {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
  }
  .header-actions > .save-indicator { flex: 1 1 100%; text-align: center; }

  /* The Options menu is position:fixed and anchored by app.js, so it escapes
     the sheet's scroll box; it only needs to stop being 300px wide on a 360px
     phone. */
  .export-dropdown {
    width: min(340px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - var(--hdr-h) - 20px);
  }
  .exp-opt { min-height: 34px; }
  .exp-print-btn { min-height: 40px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PHONE — stack the timeline rows, cards go fluid
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 620px) {

  .timeline-row,
  .weekend-mode .timeline-row.has-weekend,
  .weekday-mode .timeline-row.has-weekday {
    grid-template-columns: 1fr !important;
  }

  .timeline-row::before {
    display: none;
  }

  .timeline-spine {
    display: none;
  }

  .cards-col {
    width: 100%;
    min-width: 0;
    padding-left: 0;
  }
}

  /* Cards are given inline width/height by the desktop resize handles and the
     auto-fit buttons; on a phone those pixel values are wrong, so the cards
     become fluid and grow to fit their own text. Two per row on a 390px
     screen, one on a 320px screen. */
  .cards-col > .card,
  .free-board > .card {
    flex: 1 1 148px;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .card-resize-handle { display: none; }

  /* Quick Reference becomes one tap-sized card per facility. A two-column
     table at 360px leaves ~150px for a facility name, which wraps to three
     lines and is harder to read than a stacked pair. */
  .ref-table thead { display: none; }
  .ref-table,
  .ref-table tbody,
  .ref-table tr,
  .ref-table td {
    display: block;
    width: auto !important;
  }
  .ref-table tbody tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
    background: var(--surface);
  }
  .ref-table tbody tr:nth-child(even) { background: var(--surface-2); }
  .ref-table td {
    padding: 0 !important;
    text-align: left !important;
    border: none;
  }
  .ref-table td.ref-td-name { font-size: 14px; font-weight: 600; }
  .ref-table td.ref-td-times {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-2);
  }
  .ref-name { font-size: 14px; }
  .ref-times { font-size: 13px; }

  /* ── Overlays become full-screen sheets ── */
  .builder-modal,
  .route-print-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    max-height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  /* The builder is a wide data table; let it scroll sideways inside the sheet
     rather than squeezing six columns into 360px. */
  .builder-table-wrap { padding: 12px; -webkit-overflow-scrolling: touch; }
  .builder-table { min-width: 720px; }
  .builder-header { flex-wrap: wrap; gap: 8px; }
  .builder-header-actions { flex-wrap: wrap; }

  .cl-panel { width: 100%; border-left: none; }

  /* Print Setup: controls above, preview below, both scrollable. */
  .ps-overlay { padding: 0; }
  .ps-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .ps-controls { max-height: 46vh; overflow-y: auto; }
  .ps-opt { min-height: 32px; }

  /* The rich-text bubble is dragged into place with a mouse on desktop. On a
     phone it is pinned across the bottom, above the home indicator, so it can
     never sit under the on-screen keyboard's caret. */
  .rte-toolbar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    justify-content: center;
    flex-wrap: wrap;
  }
  .rte-drag-handle { display: none; }

  .edit-banner { padding: 8px 12px; font-size: 12px; }
}


/* Facility lists can be set to 2, 3 or 4 columns per card. At 366px a
   3-column card leaves about 110px per name, which wraps every entry onto two
   or three lines. Cap the count by screen width instead. */
@media screen and (max-width: 620px) {
  .card[data-cols="3"] .card-list,
  .card[data-cols="4"] .card-list { column-count: 2; }
}
@media screen and (max-width: 430px) {
  .card[data-cols="2"] .card-list,
  .card[data-cols="3"] .card-list,
  .card[data-cols="4"] .card-list { column-count: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   JUMP BAR — a fixed two-way switch between the timeline and the reference
   On a phone the timeline is several screens tall, so the Quick Reference
   below it would otherwise be a long scroll away.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {
  .m-jump {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90;
    gap: 3px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
  }
  .m-jump button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-jump button.active { background: var(--accent); color: #fff; }

  /* The launcher pill and the jump bar both live bottom-centre-ish; move the
     launcher up so they never overlap. */
  .live-launcher { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }

  /* Nothing should sit under the jump bar at the end of either section. */
  .ref-section { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* While the toolbar sheet is open it owns the screen. */
  html.m-menu-open .m-jump { display: none; }
  /* Set by app.js when the Quick Reference panel is switched off, so the bar
     never offers a jump to something that isn't on the page. */
  .m-jump.m-jump-off { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TOUCH AND SMALL-SCREEN HYGIENE
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {
  /* Stops iOS Safari from inflating text after a rotation to landscape. */
  html { -webkit-text-size-adjust: 100%; }

  /* Inputs below 16px make iOS zoom the whole page on focus. */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  textarea { font-size: 16px; }

  /* Hover styling sticks after a tap on touch devices; only pointer devices
     get the lift. */
  .card:hover { transform: none; }

  /* Icon buttons are 32px on desktop, under the 44px touch guideline. */
  .icon-btn { min-width: 38px; min-height: 38px; }
}

@media screen and (max-width: 380px) {
  .site-title { font-size: 13.5px; }
  .site-subtitle { display: none; }
  .m-menu-btn { padding: 0 11px; }
  .m-menu-btn .m-menu-label { display: none; }
  /* One card per row: two 148px cards plus a gap no longer fit. */
  .cards-col > .card,
  .free-board > .card { flex: 1 1 100%; }
}