/* MOBILE — same app, adapted layout (not a different app).
   Customize stacks (preview on top), Calendar nav becomes a bottom bar, Archive is one column. */

@media (max-width: 860px) {
  :root { --gap: 12px; --radius: 22px; }

  /* customize: preview on top, settings below */
  .cz { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; padding: 10px; gap: 10px; }
  .cz__preview { order: -1; }
  .cz__panel { min-height: 0; }
  .cz__save { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cz__name { flex: 1 1 140px; }
  .cz__save .btn--hero { width: auto; flex: 0 0 auto; font-size: 18px; min-width: 0; padding: .7em 1.3em; }
  .cz__minor { width: 100%; }
  .cz-section__title { font-size: 19px; padding: 12px 4px; }

  /* calendar: canvas fills, nav = bottom bar */
  .cal { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 8px; gap: 8px; }
  .cal__nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: env(safe-area-inset-bottom); scrollbar-width: none; }
  .cal__nav::-webkit-scrollbar { display: none; }
  .btn--nav { width: auto; flex: 0 0 auto; font-size: 15px; padding: .65em .9em; border-radius: 14px; }
  .cal__bottom { flex-direction: column; align-items: stretch; }
  .cal__focus { max-width: none; }
  .cal__focus-day { font-size: 18px; }
  .cal__tools { justify-content: flex-end; flex-wrap: wrap; }
  .tool { height: 36px; min-width: 36px; }

  /* questionnaire */
  .q-wrap { padding: 20px 12px; justify-content: flex-start; }
  .q-card { min-height: 60vh; padding: 24px 22px 26px; }
  .q-step { left: 22px; top: 22px; }
  .q-progress { left: 92px; right: 22px; top: 30px; }
  .q-tiles { grid-template-columns: repeat(2, 1fr); }
  .q-tile__canvas { height: 90px; }

  /* sheet becomes a bottom sheet */
  .scrim { align-items: flex-end; }
  .sheet { height: 88vh; border-radius: 22px 22px 0 0; width: 100%; }
  @keyframes slide-in { from { transform: translateY(40px); opacity: 0; } }

  .arc__grid { grid-template-columns: 1fr; }
  .home__copy { left: 18px; top: 18px; right: 18px; }
  .home__title { font-size: 40px; }
  .home__lede { font-size: 13px; }
  .home__caption { left: 18px; right: 18px; bottom: calc(3vh + 128px); max-width: none; font-size: 13px; text-align: center; }
  .home__hint { display: none; }
  .home__actions { bottom: 3vh; }
}