/* The visitor pages: one page for each kind of visitor (/pomodoro-timer/, /study-timer/, /hiit-timer/,
   /meditation-timer/, /apple-watch-focus-timer/, /mac-focus-timer/, /ipad-focus-timer/). Loaded after zen-timer.css, whose pieces these
   pages are built from; only what differs is here. Tokens only: no new colour values. Class names start with vp-.
   Spec: docs/DESIGN-SYSTEM.md */

/* ---------- 1. First screen: no sub-navigation above it, and a breadcrumb over the words ---------- */
.vp-hero { --zt-bar: 0px; }
:is(.film-prep, .film-on) .film-reel:has(> .vp-hero) { margin-top: 0; }
.vp-hero .breadcrumb { margin-bottom: -12px; color: var(--text); }

/* Orbilla beside an Apple Watch, a Mac or an iPad, instead of beside an iPhone. */
.vp-pair-watch > .dev { width: 30%; right: 9%; bottom: 14%; }
/* Orbilla stands beside the Mac and the iPad, not in front; the orbit passes behind the device, not across its screen (S20, October 18, 2026). */
.vp-pair-mac { aspect-ratio: 1 / .56; }
.vp-pair-mac > .dev { width: 68%; right: 0; top: 0; bottom: auto; }
.vp-pair-mac > .lit { width: 32%; left: 0; top: auto; bottom: 0; }
.vp-pair-mac > .orbit-path { left: 4%; right: 8%; top: 44%; height: 48%; }
.vp-pair-tablet > .dev { width: 50%; right: 2%; top: 0; bottom: auto; }
.vp-pair-tablet > .lit { width: 44%; left: 0; top: auto; bottom: 2%; }
.vp-pair-tablet > .orbit-path { left: 2%; right: 10%; top: 52%; height: 36%; }

/* A visitor page is a reading page (S19, October 18, 2026): its places take the reading rhythm, its chapters (Free and Zen
   Plus, the questions) a third of it, and no two sections in a row open alike. */
.film-reel:has(> .vp-hero) > section { --space: clamp(88px, 10vw, 144px); }
.film-reel:has(> .vp-hero) > section.chapter { --space: var(--space-s); }
.film-on .film-read:has(> .vp-hero) > section:not([data-film-open]) { --ft: clamp(32px, 4vw, 56px); }
.film-on .film-read:has(> .vp-hero) > section.chapter:not([data-film-open]) { --ft: clamp(24px, 3vw, 48px); }
@media (min-width: 901px) { .vp-flip > .stack { order: 2; } }   /* the pictures first, the words beside them */

/* ---------- 2. Rows of watches and of Macs ---------- */
.vp-row-watch .zt-card > .dev { width: min(170px, 100%); }
.vp-row-watch .zt-card-copy { justify-items: center; text-align: center; }
.vp-row-mac .zt-card > .dev { width: 100%; }
.vp-row-tablet .zt-card > .dev { width: min(300px, 100%); }

/* ---------- 3. The iPad's keyboard shortcuts, set as keys ---------- */
.vp-keys { grid-template-columns: repeat(4, 1fr); }
.vp-keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vp-keys dt span { font: 500 15px/1 var(--sans); color: var(--muted); }
.vp-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--rule); border-bottom-width: 3px; background: var(--surface); font: 600 17px/1 var(--sans); color: var(--text); }
.vp-keys dd { font-size: 17px; }

/* ---------- 4. Free and Zen Plus, as motion (S36, D042): the same words as chips, Free's arriving first, then what Zen
   Plus adds in the accent (motion.js, 'free'). Two columns, one on a phone. ---------- */
.vp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); align-items: start; }
.vp-chips > div { display: grid; gap: 14px; align-content: start; }
.vp-chips-h { font: 500 clamp(22px, 2vw, 26px)/1.15 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.mg-plus .vp-chips-h { color: var(--accent); }
.vp-chips .mg-replay { grid-column: 1 / -1; }
.vp-plans { display: grid; gap: 10px; justify-items: start; margin-top: clamp(20px, 2.4vw, 32px); }
.vp-plans .fine { max-width: 74ch; }

/* ---------- 5. Keep exploring, under the questions: one line of type ---------- */
.vp-more { margin-top: clamp(40px, 5vw, 72px); }

@media (max-width: 999px) {
  .zt-row.rail.vp-row-mac .zt-card { width: min(420px, 84%); }
  .zt-row.rail.vp-row-tablet .zt-card { width: min(280px, 72%); }
  .vp-keys { grid-template-columns: repeat(2, 1fr); }
  .zt-row.rail.vp-row-watch .zt-card { width: min(190px, 52%); }
}
@media (max-width: 699px) {
  .vp-chips { grid-template-columns: minmax(0, 1fr); }
  .vp-more { margin-top: 48px; }
  .vp-pair-watch > .dev { width: 32%; right: 6%; }
  .vp-keys > div { padding: 16px 14px 18px; }
  .vp-keys dt { gap: 5px; }
  .vp-keys kbd { min-width: 30px; height: 36px; padding: 0 8px; font-size: 16px; }
}

/* The Mac and iPad pages show the garden itself, given back to the air, not two iPhones (S15, C-7). */
.vp-garden { margin: 0; width: 100%; }
@media (min-width: 901px) { .zt-place:has(> .vp-garden) { grid-template-columns: 7fr 5fr; } }   /* the garden takes the wide column */