/* THE LEARN PAGE AND THE GUIDE'S CHAPTERS — built by tools/learn.py from Guide/. The chapter's
   own layout (opener, overview, steps, tips, About boxes) is in tours/tours.css, beside the tours'.

   A PICTURE SHOWS ONE THING, lit as the tour lights it — Brandon, 2026-10-12: "I like Option 1 --
   it's engaging and not busy … I didn't like how you did the callouts", and "Simple, yet engaging,
   especially for the tech illiterate." The tour's own picture of the step, its control ringed in the
   rubric and the rest dimmed; still, where the tour's ring pulses, since nothing here is to be pressed. */
.lit-shot { margin: 22px 0 28px; max-width: 40rem; clear: both; }
.lit-shot .frame { position: relative; overflow: hidden; border: 1px solid var(--rule);
  border-radius: 26px; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
.lit-shot img { display: block; width: 100%; height: auto; }
.lit-shot.device-iphone { max-width: 17rem; }
.lit-shot.device-ipad { max-width: 30rem; }
.lit-shot.device-ipad .frame { border-radius: 16px; }
.lit-shot.device-mac .frame { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.lit-shot .ring { position: absolute; border: 3px solid var(--rubric); border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.lit-shot .ring.round { border-radius: 50%; }
.lit-shot figcaption { font: italic 1rem/1.4 var(--serif); color: var(--quiet); margin: 10px 0 0; }

/* A step's pictures sit under its words, in line with them. */
.step + .lit-shot, .lit-shot + .step { margin-top: 18px; }

/* "TRY IT AS A TOUR": the chapter's tour, offered once, near its head. */
.tour-start.take { margin: 0 0 8px; }

/* THE LEARN PAGE: the tours, then the Guide's chapters. */
.guide h2.tours-head { margin-top: 8px; }
.guide .tour-list + h2 { margin-top: 56px; }
.chapters a:hover .t { color: var(--rubric); }

@media (max-width: 600px) {
  .lit-shot.device-iphone { max-width: 15rem; }
  .lit-shot .frame { border-radius: 22px; }
}

/* TIPS AND NOTES IN THEIR OWN BOXES — Brandon, 2026-10-12: "the Notes and the Tips callouts should
   have background boxes that help separate them from the rest of the page. One color for Notes, one
   color for tips, nice rounded corners (the same corner radius as the screen shots, for consistency)."
   In the text where they belong, never floated into the margin, each tinted its own colour, with the
   corner radius of the reader's device's pictures. */
:root {
  --tip-bg: #FBF1D6; --tip-ink: #7A5600;
  --note-bg: #E3F1E0; --note-ink: #2E6A2A;
  --shot-radius: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tip-bg: #2B2410; --tip-ink: #E8BE4F; --note-bg: #15261A; --note-ink: #7CC477; }
}
:root[data-theme="dark"] { --tip-bg: #2B2410; --tip-ink: #E8BE4F; --note-bg: #15261A; --note-ink: #7CC477; }
html[data-device="ipad"], html[data-device="mac"], html[data-device="vision"], html[data-device="tv"] { --shot-radius: 16px; }
@media (max-width: 600px) { html[data-device="iphone"] { --shot-radius: 22px; } }

.lit-shot.device-iphone .frame, .lit-shot.device-ipad .frame { border-radius: var(--shot-radius); }
.guide .margin, .guide .margin.tip, .guide .margin.note {
  float: none; clear: both; width: auto; max-width: 40rem; margin: 20px 0 24px;
  padding: 16px 20px; border-radius: var(--shot-radius); font: .95rem/1.5 var(--sans); }
.guide .margin.tip { background: var(--tip-bg); }
.guide .margin.note { background: var(--note-bg); }
.guide .margin .label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.guide .margin.tip .label { color: var(--tip-ink); }
.guide .margin.note .label { color: var(--note-ink); }
.guide .margin.tip .label::before { color: var(--tip-ink); }
.guide .margin.note .label::before { color: var(--note-ink); }

/* A PICTURE TO TRY (learn.js): every picture of the run laid in place, one over another, and only
   the current one shown. Each is dimmed by darkening the picture itself, its lit part a window onto
   it undimmed, ringed; the last is unlit. A hidden layer stays painted (opacity, not display), so
   showing it is never a first draw. */
/* A pinch on the picture still zooms the page, for a reader who needs its small words larger. */
.lit-shot.try .frame { container-type: inline-size; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.lit-shot.try img { -webkit-user-drag: none; pointer-events: none; }
.lit-shot.try .sizer { visibility: hidden; }
.lit-shot.try .layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.lit-shot.try .layer.on { opacity: 1; pointer-events: auto; }
.lit-shot.try .layer img { display: block; width: 100%; height: 100%; }
.lit-shot.try .layer img.dimmed { filter: brightness(.55); }
.lit-shot.try .lit, .lit-shot.still .lit { position: absolute; border-radius: 12px; background-repeat: no-repeat; }
/* Only the shown layer's ring takes the pointer: a later layer lies on top, unseen, and without
   inert (an older browser) its ring would take the click and skip the run ahead. */
.lit-shot.try .ring { position: absolute; border: 3px solid var(--rubric); border-radius: 12px; box-shadow: none;
  background: none; padding: 0; cursor: pointer; pointer-events: none; animation: tour-pulse 1.8s ease-in-out infinite; }
.lit-shot.try .layer.on .ring { pointer-events: auto; }
.lit-shot.try .lit.round, .lit-shot.try .ring.round, .lit-shot.still .lit.round, .lit-shot.still .ring.round { border-radius: 50%; }
/* The focus drawn inside the ring: outside it, at the picture's edge, the frame cut it off. */
.lit-shot.try .ring:focus-visible { outline: 3px solid var(--ink); outline-offset: -7px; }
@media (prefers-reduced-motion: reduce) { .lit-shot.try .ring { animation: none; } }
.try-hint { font: .9rem/1.4 var(--sans); color: var(--quiet); margin: 12px 0 0; }
.try-hint b { color: var(--rubric); font-weight: 600; }
.try-hint .again { font: 500 .9rem var(--sans); color: var(--rubric); background: none; border: 0;
  padding: 0 0 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lit-shot.try figcaption { margin-top: 4px; }

/* A STILL PICTURE, LIT (lit: in a chapter): a step that only explains, its control ringed and the
   rest dimmed as the tour shows it, but nothing to tap, so the ring is still and takes no pointer. */
.lit-shot.still .frame { container-type: inline-size; }
.lit-shot.still img.dimmed { filter: brightness(.55); }
.lit-shot.still .ring { border-radius: 12px; box-shadow: none; animation: none; pointer-events: none; }

/* THE OVERVIEW AND ABOUT BOXES, ROUNDED ALIKE — Brandon, 2026-10-12, of "In this chapter": "this gray
   background doesn't look right." Its one sweeping corner, after the book's, read as a shape cut off
   on a phone and in the dark. Now every corner is the pictures' and the tips' (--shot-radius). */
.guide .overview, .guide .about { border-radius: var(--shot-radius); }
@media (max-width: 600px) { .guide .overview, .guide .about { border-radius: var(--shot-radius); } }

/* THE MAC'S WINDOW SET OFF FROM THE PAGE — Brandon, 2026-10-12: "there needs to be more separation
   between the screen and the background". A white window on the white page had no edge. A fine line
   and a soft shadow, as macOS draws round a window, follow the picture's own shape: the window, and
   any pop-up hanging past it. */
.lit-shot.device-mac img { filter: drop-shadow(0 0 .6px rgba(0,0,0,.45)) drop-shadow(0 10px 28px rgba(0,0,0,.22)); }
.lit-shot.device-mac.try .layer img.dimmed, .lit-shot.device-mac.still img.dimmed { filter: brightness(.55) drop-shadow(0 0 .6px rgba(0,0,0,.45)) drop-shadow(0 10px 28px rgba(0,0,0,.22)); }

/* A CHAPTER'S LESSONS — Brandon, 2026-10-12: "each guide is too long … maybe we split it up so there's
   not as much scrolling." The chapter's page lists its lessons; each lesson is its own short page,
   with the way on to the next at its foot. */
.guide .lessons { margin: 8px 0 40px; }
.guide .lessons h2 { font-size: 1.35rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: baseline; }
.guide .lessons .time { display: inline-flex; gap: 8px; align-items: center; font: .9rem var(--sans); color: var(--quiet); }
.guide .lessons .time svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.guide .lessons .actions { margin: 22px 0 0; }
.guide .lessons .button { color: var(--on-rubric); }
.guide h1.lesson-title { font-size: clamp(2rem, 4.4vw, 2.7rem); color: var(--rubric); margin: 0 0 24px; }
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 48px 0 24px; max-width: 40rem; clear: both; }
.lesson-nav a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: var(--shot-radius);
  background: var(--card); color: var(--ink); text-decoration: none; font: 1.05rem/1.3 var(--serif); min-width: 0; }
.lesson-nav a span { font: 600 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.lesson-nav .next-lesson { text-align: right; grid-column: 2; }
.lesson-nav .next-lesson span { color: var(--rubric); }
.lesson-nav a:hover { box-shadow: 0 0 0 2px var(--rubric) inset; }
/* On a phone, one above the other in the order they are read and tabbed to: Previous, then Next. */
@media (max-width: 600px) { .lesson-nav { grid-template-columns: 1fr; } .lesson-nav .next-lesson { grid-column: 1; } }