/* THE TOURS AND THE GUIDE'S CHAPTERS — the website's pages built by tools/tours.py (the Tours page
   and each tour, from Tours/) and tools/learn.py (Learn and the Guide's chapters, from Guide/, whose
   own pictures are in learn/learn.css). Laid out after a Classroom in a Book chapter (Brandon,
   2026-10-08): a big chapter number, numbered steps in the rubric's red, tips and notes, "About"
   boxes, and the app's own pictures, each lit as its tour lights it (the lettered callouts were
   dropped: "I didn't like how you did the callouts", 2026-10-12). In the site's own type and colours. */

/* The column itself is in style.css: Support shares it. */

/* WHICH DEVICE: only the reader's words and pictures are shown. */
html[data-device="iphone"] [data-only]:not([data-only~="iphone"]),
html[data-device="ipad"] [data-only]:not([data-only~="ipad"]),
html[data-device="mac"] [data-only]:not([data-only~="mac"]),
html[data-device="vision"] [data-only]:not([data-only~="vision"]),
html[data-device="tv"] [data-only]:not([data-only~="tv"]) { display: none !important; }

.guide .devices { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  gap: 2px; padding: 4px; margin: 0 0 24px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  position: sticky; top: calc(61px + 12px); z-index: 5; }
/* Stuck below the site's header (60 points and its line, sticky above it), not behind it. */
.devices button { font: 500 .8125rem/1 var(--sans); color: var(--quiet); background: none; border: 0;
  padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: none; }
.devices button[aria-pressed="true"] { background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* THE WAY BACK, NOT A SECOND LABEL — Brandon, 2026-10-09: "Tours" and "A tour" above the title were
   not "differentiated enough". The crumb is the way back, with its chevron, in the quiet grey; the
   red eyebrow below it says which tour this is. */
.crumbs { font: 500 .9375rem/1 var(--sans); margin: 0 0 24px; }
.crumbs a { color: var(--quiet); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* THE OPENER: the chapter's number, large, and its title in the rubric. */
.opener { display: flex; align-items: flex-start; gap: 22px; margin: 4px 0 28px; }
.opener .number { font: 400 6.5rem/.8 var(--serif); color: var(--ink); margin: 0; }
.opener h1 { font: 500 2.4rem/1.1 var(--serif); color: var(--rubric); margin: 6px 0 0;
  font-variant: small-caps; letter-spacing: .02em; }

.overview { background: var(--card); border-radius: 0 0 0 120px; padding: 26px 32px 30px;
  margin: 0 0 32px; max-width: 40rem; }
.guide .overview h2 { font: 600 1.15rem/1.2 var(--sans); margin: 0 0 8px; }
.overview p { margin: 0 0 6px; }
.overview ul { margin: 0 0 16px; padding-left: 1.1em; }
.overview li::marker { color: var(--rubric); }
.overview .time { display: flex; gap: 12px; align-items: center; color: var(--quiet);
  font-size: .95rem; margin: 0; }
.overview .time svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }

.cover { margin: 0 0 18px; }
.guide .lede { margin-bottom: 32px; }

.guide h2 { font-size: 1.85rem; margin: 52px 0 14px; }
.guide h3 { font-size: 1.3rem; margin: 34px 0 10px; }

/* STEPS: the number in the rubric, the action, then what you see. */
.step { display: grid; grid-template-columns: 1.6rem 1fr; gap: 6px; margin: 0 0 12px; max-width: 40rem; }
.step .n { color: var(--rubric); font: 600 1.05rem/1.55 var(--sans); }
.step p { margin: 0; }
.step p.after { margin-top: 8px; color: var(--ink); }
.step ul { margin: 8px 0 0; padding-left: 1.1em; }
kbd { font: .85em/1 var(--sans); border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 6px; background: var(--card); white-space: nowrap; }

/* TIPS AND NOTES: in the margin on a wide screen, beside the text they belong to. */
.margin { font: .875rem/1.5 var(--sans); color: var(--ink); margin: 18px 0; padding: 14px 18px;
  background: var(--card); border-radius: 12px; max-width: 40rem; }
.margin p { margin: 0 0 6px; }
.margin p:last-child { margin-bottom: 0; }
.margin .label { font-weight: 700; display: inline; margin-right: 4px; }
.margin .label + p { display: inline; }
.margin.tip .label::before { content: "▶"; color: #D3A62A; font-size: .8em; margin-right: 5px; }
.margin.note .label::before { content: "●"; color: #5E9A55; margin-right: 5px; }
@media (min-width: 1080px) {
  .margin { float: right; clear: right; width: 14rem; margin: 4px -17rem 12px 0;
    background: none; padding: 0; border-radius: 0; }
}

/* "ABOUT" BOXES: background worth knowing, set apart. */
.about { background: var(--card); border-radius: 0 90px 0 0; padding: 26px 32px 22px; margin: 34px 0;
  max-width: 40rem; clear: both; }
.about h3 { color: var(--rubric); font-size: 1.5rem; margin: 0 0 10px; }
.about p { font-size: 1rem; }


.next { margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); font: 500 1rem var(--sans); }
.next a { color: var(--rubric); text-decoration: none; }

/* THE GUIDE'S FRONT PAGE: its chapters. */
.chapters { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.chapters li { border-bottom: 1px solid var(--rule); }
.chapters a, .chapters li.soon { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline;
  padding: 16px 0; text-decoration: none; color: var(--ink); }
.chapters .n { font: 1.6rem var(--serif); color: var(--rubric); }
.chapters .t { font: 1.25rem var(--serif); }
.chapters .m { font: .85rem var(--sans); color: var(--quiet); }
.chapters li.soon .t, .chapters li.soon .n { color: var(--quiet); }

@media (max-width: 600px) {
  .opener .number { font-size: 4.6rem; }
  .opener h1 { font-size: 1.85rem; }
  .overview { padding: 22px 22px 24px; border-radius: 0 0 0 70px; }
  .about { padding: 22px; border-radius: 0 60px 0 0; }
}

/* THE TOUR: the app's picture of each step, dimmed but for the control to use, beside its card. */
.tour-start { display: flex; gap: 16px; align-items: center; max-width: 40rem; margin: 0 0 34px;
  padding: 18px 20px; background: var(--card); border-radius: 16px; text-decoration: none;
  color: var(--ink); font: .95rem/1.45 var(--sans); }
.tour-start b { font: 500 1.25rem/1.3 var(--serif); }
.tour-start-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--rubric);
  color: var(--on-rubric); display: grid; place-items: center; font-size: 1.3rem; }
.tour-devices { margin-bottom: 24px; }
.tour { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; max-width: none !important; }
.tour-screen { position: relative; flex: none; width: min(100%, 22rem); border-radius: 30px; overflow: hidden;
  border: 1px solid var(--rule); box-shadow: 0 10px 40px rgba(0,0,0,.12); }
html[data-device="ipad"] .tour-screen { width: min(100%, 34rem); border-radius: 20px; }
html[data-device="mac"] .tour-screen { width: min(100%, 40rem); border-radius: 0; border: 0; box-shadow: none; }
/* The dimming and the light, on their own layer: on the Mac it alone is masked to the windows. */
.tour-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.tour-light .tour-spot { pointer-events: auto; }
.tour-shot { display: block; width: 100%; }
.tour-dim { position: absolute; inset: 0; pointer-events: none; transition: background .25s; }
.tour-spot { position: absolute; border: 3px solid var(--rubric); background: none; padding: 0; cursor: pointer;
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); animation: tour-pulse 1.8s ease-in-out infinite; }
.tour-spot.round { border-radius: 50%; }
.tour-spot[hidden] { display: none; }
.tour-spot:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@keyframes tour-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tour-spot { animation: none; } }
.tour-card { flex: 1 1 18rem; max-width: 26rem; background: var(--card); border-radius: 20px; padding: 22px 24px; }
.tour-count { font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rubric); margin: 0 0 12px; }
.tour-text { font-size: 1.15rem; line-height: 1.5; min-height: 6.5em; }
.tour-text p { margin: 0; }
.tour-buttons { display: flex; justify-content: space-between; margin-top: 18px; }
.tour-buttons button { font: 500 1rem var(--sans); border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer;
  background: none; color: var(--quiet); }
.tour-buttons .tour-next { background: var(--rubric); color: var(--on-rubric); }
.tour-buttons button[hidden] { visibility: hidden; display: inline-block !important; }
.tour-hint { font: .85rem var(--sans); color: var(--quiet); margin: 10px 0 0; }
/* The tour takes the margin column too: the card stands beside the screen, not under it. */
@media (min-width: 1080px) { .guide .tour { margin-right: calc(-17rem - 24px); } }
.tour-buttons .tour-next.quiet { background: none; color: var(--quiet); }

.tour-screen { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tour-shot { -webkit-user-drag: none; pointer-events: none; }

/* The light and the words fade between steps, as the app's tour does. */
.tour-spot, .tour-text, .tour-count { transition: opacity .2s ease; }
.tour.changing .tour-spot, .tour.changing .tour-text, .tour.changing .tour-count { opacity: 0; }
.tour-shot { transition: opacity .2s ease; }
.tour.changing .tour-shot { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-text, .tour-count, .tour-shot { transition: none; } }
.guide h2.tours-head { margin-top: 0; }
.tours-lede { color: var(--quiet); }
.tour-start { margin-bottom: 12px; }
.tour-right { display: flex; gap: 6px; align-items: center; }
.tour-buttons .tour-again { color: var(--quiet); }
.tour-buttons .tour-again[hidden] { display: none !important; }

/* ON A PHONE, THE SCREEN AND ITS DIRECTIONS IN ONE VIEW — Brandon, 2026-10-08: "I need to be able to
   show the screen and the directions box in one screen." The picture is sized by tours.js to the
   height left under the site's header and the card, and the tour scrolls to the top as it moves on. */
@media (max-width: 700px) {
  .tour { flex-direction: column; align-items: center; gap: 12px; }
  .tour-screen { border-radius: 22px; }
  html[data-device="ipad"] .tour-screen { border-radius: 14px; }
  .tour-card { flex: none; width: 100%; max-width: none; padding: 14px 18px 12px; }
  .tour-text { font-size: 1.05rem; line-height: 1.45; min-height: 0; }
  .tour-buttons { margin-top: 10px; }
  .tour-hint { margin-top: 6px; }
}
@media (max-width: 700px) {
  .tour.overlay { display: block; position: relative; }
  .tour.overlay .tour-screen { margin: 0 auto; }
  .tour.overlay .tour-card { position: absolute; left: 0; right: 0; z-index: 3;
    box-shadow: 0 10px 34px rgba(0,0,0,.4), 0 0 0 1px var(--rule); }
}
.tour-list > :last-child { margin-bottom: 0; }

/* THE MAC'S TOUR, AS LARGE AS THE PAGE ALLOWS — Brandon, 2026-10-09: "the Mac tour on the web needs to
   be bigger … There's a ton of space on the right that is going unused", then "now that's too big —
   the card is outside the margins set by the header." A Mac window is wide, so at the column's 40rem
   its card fell under it. The tour now runs from the column's left edge to the header's right one,
   with the card beside the screen. The column starts at 50vw - 28.5rem (the centred .guide-wrap,
   57rem + 48px wide, plus its 24px padding); the header's words end at 50vw + 34rem - 24px (its
   68rem .wrap, less 24px padding), or 24px short of a narrower window. */
@media (min-width: 701px) { html[data-device="mac"] .tour-screen { width: 100%; } }
@media (min-width: 1080px) {
  html[data-device="mac"] .guide .tour { width: min(62.5rem - 24px, 50vw + 28.5rem - 24px); margin-right: 0;
    flex-wrap: nowrap; gap: 24px; }
  html[data-device="mac"] .tour-screen { flex: 1 1 0; width: auto; min-width: 0; }
  /* Held to its width on every step: the last step's three buttons (Back, Start Again, Finish) widened
     it by 24px, and the screen narrowed to make room (the Mac audit, 2026-10-09). */
  html[data-device="mac"] .tour-card { flex: 0 0 16.5rem; min-width: 0; padding: 20px 20px; }
  html[data-device="mac"] .tour-buttons button { padding: 9px 9px; white-space: nowrap; }
  html[data-device="mac"] .tour-right { gap: 0; }
}

/* A DEVICE SWITCHED: no frame of the old device's picture in the new device's layout. */
.tour-screen { transition: opacity .16s ease; }
.tour.switching .tour-screen { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .tour-screen { transition: none; } }

/* The Mac's window set off from the page, as in the Guide (Brandon, 2026-10-12: "more separation
   between the screen and the background"): a fine line and a soft shadow, following its shape. */
html[data-device="mac"] .tour-shot { filter: drop-shadow(0 0 .6px rgba(0,0,0,.45)) drop-shadow(0 10px 28px rgba(0,0,0,.22)); }
html[data-device="mac"] .tour-screen { overflow: visible; }