/* css/narrow.css
 *
 * Narrow screens. LAST on purpose: these override the layout above by
 * source order, so moving this file earlier silently breaks the collapse.
 */

/* ======================================================================
 * Narrow screens
 *
 * LAST in the file on purpose: a media query adds no specificity, so these
 * rules only beat the desktop ones above by source order. Moving this block
 * up (it was up, next to `.app`) let a later `.side { display: flex }` win
 * and the sidebar survived the collapse as a 24px strip.
 * ==================================================================== */
@media (max-width: 1100px) {
  /* One column: the sidebar goes away and the digest stacks under the day.
     Neither may push the page into horizontal scroll — that is the whole
     point of collapsing them rather than letting the three rails shrink. */
  .app, body:not(.view-day) .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  /* With the sidebar gone this is the only navigation left, so the toolbar's
     view picker comes back. `:not(.hidden)` because `paintViewChrome` hides
     controls by adding that class, and a bare `display: flex` here would beat
     it — the picker would reappear in the states that deliberately hide it. */
  #viewbar:not(.hidden) { display: flex; }
  /* Two rows so the day keeps the flexible height and the rail takes what it
     needs — without this the digest is squeezed to nothing by the day above. */
  body.view-day .app { grid-template-rows: minmax(0, 1fr) auto; }
  .digest {
    border-left: 0; border-top: .5px solid var(--sep);
    max-height: 46vh; padding: 12px 14px;
  }
  /* Two across rather than one tall column, so the stacked rail costs less
     vertical room than the day it sits under. */
  .digest { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
  .digest .d-title { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .calscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calscroll .mgrid, .calscroll .mhead { min-width: 660px; }
  .calscroll .wgrid { min-width: 700px; }
  /* The toolbar drops to two lines rather than pushing the window wider:
     period + steppers first, then the pickers and search. */
  .appbar { padding: 8px 12px; }
  .appbar .segmented { margin-left: 0; }
  .appbar .searchbox { flex: 1 1 120px; }
  .mainscroll { padding: 14px 14px 16px; }
  .dayhead { margin: -14px -14px 0; padding: 13px 14px 10px; }
  .addbar { padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); }
}