/* ───────────────────────────────────────────────────────────────────
   Sample Plan Tour — mobile responsiveness overlay
   Loaded last, after plan-tour-z1.css + plan-extra.css, so these rules win.
   Kept separate from the vendored design bundle so a re-export of the
   tour doesn't clobber the fixes.

   Fixes the two rows that pushed the page into horizontal scroll on phones:
     • Movement "This week" 7-day strip  (.week-row / .day-cell)
     • Track daily-habit 7-day toggles    (.habit-days)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Movement week: a 7×1fr grid can't shrink below the day labels, so it
     overflowed the viewport. Turn it into a contained horizontal swipe strip:
     fixed-width day cells that scroll inside the card, never the page. */
  .week-row {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--atheal-stone-200) transparent;
  }
  .week-row::-webkit-scrollbar { height: 5px; }
  .week-row::-webkit-scrollbar-thumb { background: var(--atheal-stone-200); border-radius: 999px; }
  .day-cell {
    flex: 0 0 auto;
    width: 64px;
    scroll-snap-align: start;
  }

  /* Daily-habit toggles: 7 fixed 44px buttons overran the row. Let them
     flex-fill the available width instead, staying square and tappable. */
  .habit-days {
    width: 100%;
    gap: 5px;
    justify-content: space-between;
  }
  .habit-days button {
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 46px;
    aspect-ratio: 1 / 1;
  }

  /* Top tabs: show all four without a horizontal scroll. The base style uses
     width:max-content + overflow-x:auto, which scrolls once the tabs + the
     decorative mark exceed the viewport. On phones, drop the mark (the logo is
     already in the topbar) and let the four tabs share the width equally. */
  .report-tabs {
    width: 100%;
    overflow-x: visible;
    gap: 2px;
    padding: 4px;
  }
  .report-mark { display: none; }
  .report-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 4px;
    font-size: 13.5px;
    text-align: center;
  }

  /* Belt-and-braces: nothing should force a horizontal page scroll. */
  body.plans-page { overflow-x: hidden; }
}