/* ---------- The app, chapter by chapter ----------
   The earlier homepage's tour ("Rank, save, discover."), ported in structure, copy and
   behavior, drawn with this page's own iPhone and the app's screens.

   No script needed: six radios drive everything through sibling selectors, so with
   no JS, on a phone, or under reduced motion it is a tab strip that shows one chapter
   at a time. tour.js only ADDS the laptop scroll-through: every chapter on the page,
   the phone held still, and the chapter under the middle of the window checking its
   own radio as it passes (the earlier homepage's module 5, the same rules). */
/* No padding of its own: the map above and the questions below already leave one --section each
   side, and the three are all cream, so the tour's own would double both gaps (tour check). */
.tour { padding: 0; }
.tour .copy { max-width: 720px; margin-bottom: 40px; }
.tour__ui { position: relative; }

/* The radios are never seen; the labels are the control. Kept focusable and in the
   accessibility tree so the group is a real radio group: arrow keys move through it. */
.tour__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tour__tabs { display: flex; flex-wrap: nowrap; gap: 5px; padding: 5px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(255, 253, 248, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.tour__tabs::-webkit-scrollbar { display: none; }
.tour__tab { flex: 0 0 auto; padding: 12px 20px; border-radius: 999px; font: 600 1rem/1 var(--text); color: var(--sub); cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color .3s var(--ease), color .3s var(--ease); }
@media (hover: hover) { .tour__tab:hover { color: var(--ink); } }
/* Six labels on one line at every width the page supports (measured on the earlier homepage:
   at 320px they need the narrower padding and type below). */
@media (max-width: 560px) { .tour__tabs { gap: 3px; } .tour__tab { padding: 11px 8px; font-size: .8125rem; } }
@media (max-width: 400px) { .tour__tabs { gap: 2px; padding: 4px; } .tour__tab { padding: 10px 7px; font-size: .75rem; } }
@media (max-width: 340px) { .tour__tabs { gap: 1px; padding: 3px; } .tour__tab { padding: 10px 5px; font-size: .71875rem; } }
/* From 981 to 1219px the phone column is too narrow for the full-size strip, and the pinned strip
   would sit over the chapters beside it; this size fits the column (415px, 27px clear of the text
   at 981), and from 1220 the full size keeps at least 20px clear. */
@media (min-width: 981px) and (max-width: 1219px) { .tour__tab { padding: 11px 12px; font-size: .9375rem; } }

.tour__stage { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.tour__phones { --phone-w: clamp(224px, 25vw, 296px); display: grid; justify-items: center; }
/* All six phones are in the page at once, stacked, so a switch is a 300ms crossfade.
   Visibility is delayed on the way out so the outgoing screen can finish fading, and
   only the showing screen's alt text is in the accessibility tree. */
.tour__shot { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.tour__shot .iphone { --pw: var(--phone-w); }

/* The chapter: the big olive numeral, a hairline that starts just past its digits, the
   headline, one line. (The earlier homepage masked the rule behind the digits with the page
   color; this page's ground is a gradient, so the rule simply starts after them.) */
/* In tab mode all six chapters share one grid cell, the way the phones do, so the column always
   holds the tallest chapter and the strip, numeral, headline and phone stay put when the tab
   changes; only the chosen chapter is visible (and in the accessibility tree). */
.tour__ui:not(.is-scrolly) .tour__texts { display: grid; }
.tour__ui:not(.is-scrolly) .chapter { grid-area: 1 / 1; visibility: hidden; }
.chapter__head { display: flex; align-items: flex-end; gap: .2em; font: 700 clamp(4rem, 8vw, 7rem)/.74 var(--display); }
.chapter__no { font-variation-settings: "opsz" 36; letter-spacing: -.045em; color: var(--olive); }
.chapter__rule { flex: 1; height: 1px; margin-bottom: .16em; background: rgba(26, 26, 46, .22); }
.chapter h3 { margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0; font: 700 clamp(1.75rem, 1rem + 2vw, 2.5rem)/1.08 var(--display); font-variation-settings: "opsz" 36; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.chapter p { margin: 1.1rem 0 0; max-width: 44ch; color: var(--sub); font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.55 var(--text); text-wrap: pretty; }

/* One chapter at a time in tab mode. :not(.is-scrolly) keeps these rules out of the
   scroll-through, where every chapter shows in a row of its own. */
.tour__ui:not(.is-scrolly) #ch-1:checked ~ .tour__stage .chapter[data-ch="1"],
.tour__ui:not(.is-scrolly) #ch-2:checked ~ .tour__stage .chapter[data-ch="2"],
.tour__ui:not(.is-scrolly) #ch-3:checked ~ .tour__stage .chapter[data-ch="3"],
.tour__ui:not(.is-scrolly) #ch-4:checked ~ .tour__stage .chapter[data-ch="4"],
.tour__ui:not(.is-scrolly) #ch-5:checked ~ .tour__stage .chapter[data-ch="5"],
.tour__ui:not(.is-scrolly) #ch-6:checked ~ .tour__stage .chapter[data-ch="6"] { visibility: visible; }
#ch-1:checked ~ .tour__stage .chapter[data-ch="1"],
#ch-2:checked ~ .tour__stage .chapter[data-ch="2"],
#ch-3:checked ~ .tour__stage .chapter[data-ch="3"],
#ch-4:checked ~ .tour__stage .chapter[data-ch="4"],
#ch-5:checked ~ .tour__stage .chapter[data-ch="5"],
#ch-6:checked ~ .tour__stage .chapter[data-ch="6"] { opacity: 1; }
#ch-1:checked ~ .tour__stage .tour__shot[data-ch="1"],
#ch-2:checked ~ .tour__stage .tour__shot[data-ch="2"],
#ch-3:checked ~ .tour__stage .tour__shot[data-ch="3"],
#ch-4:checked ~ .tour__stage .tour__shot[data-ch="4"],
#ch-5:checked ~ .tour__stage .tour__shot[data-ch="5"],
#ch-6:checked ~ .tour__stage .tour__shot[data-ch="6"] { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
#ch-1:checked ~ .tour__tabs [for="ch-1"],
#ch-2:checked ~ .tour__tabs [for="ch-2"],
#ch-3:checked ~ .tour__tabs [for="ch-3"],
#ch-4:checked ~ .tour__tabs [for="ch-4"],
#ch-5:checked ~ .tour__tabs [for="ch-5"],
#ch-6:checked ~ .tour__tabs [for="ch-6"] { background: var(--olive-2); color: var(--c2); }
/* The selected tab is the olive panels' deeper olive (#4E661F): cream on it reads 5.6:1 at the
   strip's small label sizes, where cream on the brand olive is 3.46:1 and fails below large text.
   The download buttons keep the brand olive (locked); this is a selection state, not a button. */
/* the focus ring belongs on the label: the input it names is one pixel */
#ch-1:focus-visible ~ .tour__tabs [for="ch-1"],
#ch-2:focus-visible ~ .tour__tabs [for="ch-2"],
#ch-3:focus-visible ~ .tour__tabs [for="ch-3"],
#ch-4:focus-visible ~ .tour__tabs [for="ch-4"],
#ch-5:focus-visible ~ .tour__tabs [for="ch-5"],
#ch-6:focus-visible ~ .tour__tabs [for="ch-6"],
/* Safari moves the focus with an arrow key but stops reporting it as keyboard focus, so tour.js
   marks the group .kb from the first key until the next press of a pointer */
.kb #ch-1:focus ~ .tour__tabs [for="ch-1"],
.kb #ch-2:focus ~ .tour__tabs [for="ch-2"],
.kb #ch-3:focus ~ .tour__tabs [for="ch-3"],
.kb #ch-4:focus ~ .tour__tabs [for="ch-4"],
.kb #ch-5:focus ~ .tour__tabs [for="ch-5"],
.kb #ch-6:focus ~ .tour__tabs [for="ch-6"] { outline: 3px solid var(--olive); outline-offset: 3px; }
/* and the strip itself, so the focus is visible where the (one-pixel) radio sits too: a screen
   magnifier and the keyboard walk both follow the focused element's own box */
.tour__radio:focus-visible ~ .tour__tabs, .kb .tour__radio:focus ~ .tour__tabs { outline: 2px solid var(--olive); outline-offset: 4px; }

@media (min-width: 981px) { .tour__stage { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); } }
/* on a phone the headline comes first, then the screen it describes */
@media (max-width: 980px) { .tour__texts { order: 1; } .tour__phones { order: 2; } }

/* Laptop scroll-through (tour.js adds .is-scrolly on a wide window when the visitor has
   not asked for less motion): every chapter on the page, the phone column held, the
   chapters you are not reading dimmed (0.45, as far as the dim can go before the lit
   one stops standing out; none at all for visitors who asked for more contrast). */
.is-scrolly .tour__stage { align-items: start; }
.is-scrolly .tour__texts { display: grid; padding-bottom: 12vh; }
.is-scrolly .chapter { display: flex; flex-direction: column; justify-content: center; min-height: 62vh; opacity: .45; transition: opacity .45s var(--ease); }
@media (prefers-contrast: more) { .is-scrolly .chapter { opacity: 1; } }
/* the strip becomes the index: it tracks where you are and jumps you to a chapter */
.is-scrolly .tour__tabs { position: sticky; top: 14px; z-index: 4; background: rgba(253, 250, 242, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-scrolly .tour__phones { position: sticky; top: 92px; align-self: start; }
/* The radios ride in the pinned strip too, so focusing one (Tab back into the group while reading
   chapter 4, an arrow key) never scrolls the page up to the top of the section. They stay ahead of
   the strip in the markup, so every ~ selector above still reaches it; the -1px margin keeps their
   one-pixel boxes from adding height. */
.is-scrolly .tour__radio { display: block; position: sticky; top: 14px; margin: 0 0 -1px; }
/* A laptop window is not 900px tall: the phone shrinks rather than run off the bottom. 2.093 is
   the frame's height over its width (v2.css .iphone), 116px the 92px it is pinned at plus 24px. */
@media (min-width: 981px) and (max-height: 860px) { .tour__phones { --phone-w: min(clamp(200px, 22vw, 244px), calc((100svh - 116px) / 2.093)); } }

@media (prefers-reduced-motion: reduce) { .tour__shot, .tour__tab, .chapter { transition: none; } }
/* Windows High Contrast replaces the fill, so the chosen tab takes the system's selected-item pair.
   forced-color-adjust: none is load-bearing: without it Chromium paints its Canvas backplate behind
   the letters and the label becomes a blank block. */
@media (forced-colors: active) {
  .tour__tabs { border: 1px solid CanvasText; }
  #ch-1:checked ~ .tour__tabs [for="ch-1"],
  #ch-2:checked ~ .tour__tabs [for="ch-2"],
  #ch-3:checked ~ .tour__tabs [for="ch-3"],
  #ch-4:checked ~ .tour__tabs [for="ch-4"],
  #ch-5:checked ~ .tour__tabs [for="ch-5"],
  #ch-6:checked ~ .tour__tabs [for="ch-6"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
}