/* MWeekPager (js/m-weekpager.js). Three pages side by side; the track moves, the host clips.
   touch-action pan-y leaves vertical scroll to the page and hands sideways drags to the pager. */
.m-wp { overflow: hidden; touch-action: pan-y; }
.m-wp-track { display: flex; transform: translateX(-100%); will-change: transform; }
.m-wp-page { flex: 0 0 100%; min-width: 0; }
.m-wp-page .m-list { margin: 0; }
/* A neighbour week whose data has not loaded yet: real date tiles, grey text. */
.m-dayrow.sk .m-row-t, .m-dayrow.sk .m-row-d { color: transparent; background: var(--tf-ink-100); border-radius: 6px; width: 96px; }
.m-dayrow.sk .m-row-d { width: 140px; }
.m-dayrow.sk .m-row-chev { opacity: .4; }
/* A week that just landed fades in over its skeleton instead of popping. No looping animation: it made the drag jitter. */
@keyframes m-wp-in { from { opacity: .35; } to { opacity: 1; } }
.m-wp-enter { animation: m-wp-in 300ms ease-out; }
@media (prefers-reduced-motion: reduce) { .m-wp-enter { animation: none; } }

/* Schedule on a phone: the header carries one thing, the week. Swiping pages the weeks, so the arrows go in Week view
   (Day and Month still step with them). The "Week of" kicker and the blue Today strip repeated the screen title and the
   rows below, so they go too. */
@media (max-width: 860px) {
  #panel-schedule .dispatch-today-strip { display: none; }
  #panel-schedule .dispatch-week-of { display: none; }
  #panel-schedule .dispatch-topbar-left > .dispatch-nav-btn { display: none; }
  #panel-schedule .dispatch-board.is-week .dispatch-week-label { text-align: left; }
  #panel-schedule .dispatch-board.is-week .dispatch-week-range { font-size: var(--fs-md); }
}

/* Schedule header on a phone is ONE row: Tech, Today, more. The screen title and date are the app header above; the
   date range is a caption on the week itself; the tech chip no longer has a row of its own. */
@media (max-width: 860px) {
  #panel-schedule .dispatch-tech-bar { display: none; }
  #panel-schedule .dispatch-week-label { display: none; }
  #panel-schedule .dispatch-topbar .dispatch-tech-chip { flex: none; }
  #panel-schedule .dispatch-topbar-left { justify-content: flex-end; }
  .sp-wkcap { padding: 10px 2px 2px; font: 700 .75rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
}

/* Phone search is a real bottom sheet (07-shell-nav.js moves the box in on open): the same input and result list. */
@media (max-width: 860px) {
  .m-sheet .tb-search { display: flex; position: static; width: auto; border: 1px solid var(--tf-ink-200); border-radius: 12px; padding: 0 12px; min-height: 48px; }
  .m-sheet .tb-search input { flex: 1; min-width: 0; font-size: 16px; min-height: 46px; border: 0; outline: 0; background: transparent; }
  .m-sheet .tb-search-close { display: none; }
  .m-sheet .tb-search-results { position: static; width: auto; max-height: none; margin-top: 8px; box-shadow: none; border: 0; }
}

/* Phone day view: the week strip (PoolCrew's pattern, in the light theme). Replaces the arrows row. */
.dispatch-daystrip { display: none; }
@media (max-width: 860px) {
  #panel-schedule .dispatch-daynav { display: none; }
  #panel-schedule .dispatch-daystrip:not([hidden]) { display: block; background: var(--tf-white); border-bottom: 1px solid var(--tf-ink-100); padding: 6px 4px; }
  .ds-page { display: flex; position: relative; }
  .ds-pill { position: absolute; left: calc(100% / 7 * 3); top: 0; bottom: 0; width: calc(100% / 7); border-radius: 10px; background: var(--tf-ocean-800); pointer-events: none; }
  .ds-day { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; z-index: 1; border: 0; background: none; border-radius: 10px; font-family: var(--font-sans); color: var(--text-muted); }
  .ds-day small { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ds-day b { font-size: 1.0625rem; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .ds-day.today small { color: var(--tf-ocean-800); }
  .ds-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
  .ds-dot.on { background: var(--tf-ocean-800); }
  .ds-day.selected small, .ds-day.selected b { color: var(--tf-white); }
  .ds-day.selected .ds-dot.on { background: var(--tf-white); }
}

/* Re-optimize sits on the tech's own header in the day list (it only means something there), not behind a menu. */
@media (max-width: 860px) {
  #panel-schedule .dispatch-tech-col-name { display: flex; align-items: center; gap: 8px; }
  #panel-schedule .dispatch-optimize-btn { display: inline-flex; align-items: center; margin-left: auto; flex: none; }
}

/* Phone header: Tech chip, the Day / Week / Month switch, and a Today link that only exists when you are not on today.
   Each does one thing. Desktop keeps its plain Today button and its Day/Week/Month buttons. */
.dispatch-viewseg, .dispatch-today-link { display: none; }
@media (max-width: 860px) {
  #dispatch-today-btn { display: none; }
  .dispatch-viewseg { display: inline-flex; }
  .dispatch-viewseg button { min-height: 40px; padding: 0 11px; font-size: .8125rem; }
  .m-seg.dispatch-viewseg button[aria-pressed="true"] { background: var(--tf-aqua-050); color: var(--tf-ocean-800); box-shadow: none; }
  .dispatch-today-link:not([hidden]) { display: inline-flex; align-items: center; flex: none; }
  #panel-schedule .dispatch-topbar-left { flex: 1; }
}

/* The day header under the list repeated the date the selected row, the header crumb and the strip already say. */
@media (max-width: 860px) {
  #panel-schedule .dispatch-detail-hdr { display: none; }
}