/* Hallmark · macrostructure: Long Document · theme: Purple Sector · motion: none */
/*
 * THE GUIDES (/guides, /guides/<slug>, /about), ON TOP OF tracks.css.
 *
 * Same register as the circuit pages: paper ground, ink, purple actions, Barlow Condensed over DM
 * Sans, and the app's own dark aubergine for anything that is a picture of the app. Every picture
 * is a real capture (src/pages/home/motion-demo.ts); nothing here draws data. No script, no
 * animation: the text and the figures are all there before anything loads.
 *
 * COMPACT ON PURPOSE. The first version spent a screen on each heading and a wall on each
 * caveat. Now a logger page is a short hero, one two-column sheet (the steps beside the folded
 * limits and questions), a strip of three real screens, and a row of links.
 */

/* ── Rhythm: tighter than the circuit pages, so a guide reads in a screen or two ── */
.guide .block { padding: 26px 0 30px; }
.guide h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; }
.guide .block p, .guide .block li { font-size: 15.5px; line-height: 1.55; }
.guide .block > p { max-width: 62ch; }
.guide .intro { padding: 12px 0 22px; }
.guide .intro h1 { max-width: 22ch; font-size: clamp(32px, 4vw, 46px); }
.guide .intro p { max-width: 62ch; }

/* ── Hero: copy beside one real screen ── */
.guide-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 48px); align-items: center; padding: 8px 0 26px; }
.guide-hero h1 { max-width: 20ch; font-size: clamp(32px, 4vw, 48px); }
.guide-hero .lede { max-width: 50ch; margin: 14px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.5; }
.guide-hero .actions { margin-top: 20px; gap: 10px 22px; }
.guide-hero .cta { min-height: 46px; padding: 10px 18px; }
.byline { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.file-chips li { padding: 1px 10px; border-radius: 6px; background: var(--dark); color: var(--lavender); font: 500 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.shot-panel { padding: 10px 10px 12px; border-radius: 12px; }
.shot-panel .panel-head { padding: 2px 4px 10px; font-size: 12.5px; }
.shot-panel picture, .shot-frame picture { display: block; }
.shot-panel img { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 6px; }
.shot-panel figcaption { margin: 10px 4px 0; color: var(--dim); font-size: 12px; line-height: 1.45; }

/* ── The sheet: steps on the left, folded detail on the right ── */
.guide-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 64px); align-items: start; }
.guide-cols .bring { margin: 12px 0 0; }
.guide-cols .bring b { font-weight: 600; }
.source { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.guide .block .source { font-size: 13.5px; }

.guide-steps { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: gs; }
.guide-steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: gs; }
.guide-steps > li::before { content: counter(gs); display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); font: 600 13px/1 var(--body); }

.good details { border-top: 1px solid var(--rule); }
.good details:last-child { border-bottom: 1px solid var(--rule); }
.good h2 + details { margin-top: 12px; }
.good summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.3; list-style: none; }
.good summary::-webkit-details-marker { display: none; }
.good summary::after { content: '+'; flex: none; color: var(--accent); font-size: 20px; font-weight: 500; line-height: 1; }
.good details[open] summary::after { content: '\2013'; }
.good details > p, .good details > ul { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.good details > ul { padding-left: 18px; }
.good details li { margin: 0 0 6px; font-size: 14.5px; }

/* ── Three real screens ── */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 780px; margin-top: 14px; }
.shot { min-width: 0; margin: 0; }
.shot-frame { padding: 6px; border-radius: 10px; background: var(--dark); }
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 5px; }
.shot figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
/* A tall, narrow app panel (a lap list) keeps its own width instead of stretching to the column (SEO round 9). */
.guide-shot.narrow { max-width: 300px; }

/* ── Links ── */
.guide .links { gap: 8px; margin-top: 12px; }
.guide .links a { white-space: nowrap; min-height: 40px; padding: 0 14px; font-size: 14.5px; }
/* A chip wider than a phone line ("Sydney Motorsport Park Gardner GP, turn by turn" at 375 px) wraps inside itself
   instead of running off the edge; chips that fit stay on one line (SEO round 6 design check, 23 Oct 2026). */
@media (max-width: 480px) { .guide .links a { white-space: normal; padding: 8px 14px; line-height: 1.3; } }

/* ── Closing band: one line and the buttons ── */
.cta-band { margin: 8px 0 40px; padding: 22px clamp(20px, 3vw, 32px); border: 0; border-radius: 12px; background: var(--dark); color: var(--light); }
.cta-band h2 { color: var(--light); font-size: 24px; }
.cta-band p { max-width: 70ch; margin: 8px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
.cta-band a { color: var(--lavender); }
.cta-band a:hover { color: var(--light); }

/* ── Other existing guide text: the same measure and rhythm ── */
.guide ul:not(.links):not(.file-chips) { padding-left: 20px; }
.guide .table-scroll { margin-top: 14px; }

@media (max-width: 900px) {
  .guide-hero { grid-template-columns: minmax(0, 1fr); }
  .guide-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .guide .block { padding: 20px 0 22px; }
  .shots { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
}

/* Continuous prose for About; product evidence and export steps keep their guide layouts. */
.guide .intro { padding-block: var(--space-md) var(--space-xl); }
.guide .intro h1 { font-size: clamp(40px, 5vw, 64px); max-width: 22ch; line-height: 1.02; }
.guide .intro > p:not(.byline) { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); margin-top: var(--space-md); }
.guide .block { padding-block: var(--space-lg) var(--space-xl); }
.guide h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.guide .block p, .guide .block li { font-size: 16px; line-height: 1.7; }
.guide .block > p { max-width: 68ch; }
.guide-hero { padding-block: var(--space-md) var(--space-xl); }
.guide-hero h1 { font-size: clamp(40px, 4.5vw, 60px); line-height: 1.02; }
.guide-hero .lede { line-height: 1.65; }
.file-chips li { font-family: var(--mono); }
.guide .byline { font-size: 13px; line-height: 1.6; }
.guide .cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-lg); margin-block: var(--space-md) var(--space-2xl); padding: var(--space-lg); border-radius: var(--radius-surface); }
.cta-band h2 { align-self: center; }
.guide .cta-band > p { grid-column: 1 / -1; max-width: 72ch; font-size: 14px; }
.cta-band > .cta { background: var(--lavender); color: var(--dark); align-self: start; min-height: 44px; }
.cta-band > .cta:hover, .cta-band > .cta:active { background: var(--light); color: var(--dark); }
.about-document article { max-width: 800px; margin-inline: auto; }
.about-document .intro { padding-block: var(--space-lg) var(--space-2xl); }
.about-document .intro h1 { font-size: clamp(56px, 7.5vw, 96px); max-width: 12ch; line-height: .95; }
.about-document .intro > p { max-width: 52ch; font-size: clamp(19px, 2vw, 24px); }
.about-document article > .block { border: 0; padding-block: 0 var(--space-xl); }
.about-document article > .block h2 { margin-bottom: var(--space-sm); }
.about-document article > .block p { margin-block: var(--space-sm) 0; }
.about-document article > .block:last-child { border-top: 1px solid var(--rule); padding-top: var(--space-lg); }
.guide-directory .guide-index { list-style: none; padding: 0 !important; margin: var(--space-lg) 0 0; }
.guide-index > li { padding-block: var(--space-md); border-top: 1px solid var(--rule); }
.guide-index h2 { max-width: 28ch; }
.guide-index h2 a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guide-index p { max-width: 65ch; color: var(--muted); margin-bottom: 0; }
.pricing-document .intro { padding-bottom: var(--space-md); }
/* Pricing reuses the real plan component, but has no homepage showcase above it. */
.pricing-document .home.landing { background: var(--paper); }
@media (max-width: 640px) {
  .guide .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .cta-band > .cta { justify-self: start; }
  .about-document .intro { padding-bottom: var(--space-xl); }
  .guide .block { padding-bottom: var(--space-lg); }
}

/*
 * CIRCUITS TURN BY TURN (SEO round 5, 23 Oct 2026): /guides/<circuit>-corners.
 *
 * A turn table is a table on a wide screen. On a phone the generic card (one label and value per line) made
 * Mount Panorama's 23 turns about 4,000 px of cards before the first word about Turn 1, so each turn is two short
 * lines instead: its number and name, then direction, shape and the distance to the next turn. "From previous
 * turn" is the row above's "to next turn", so the phone leaves it out; an empty name says nothing.
 * Each turn's section then reads as its facts, the drivers' published notes as a short list, and the founder's
 * figures where a guide has them.
 */
.guide .block > h3 { margin-top: var(--space-lg); }
.guide .block > h3 + p { margin-top: 8px; }
.guide .block > h3 ~ ul { max-width: 68ch; margin-top: 10px; }
.guide .block > h3 ~ ul > li + li { margin-top: 6px; }
@media (max-width: 640px) {
  .guide .table-wrap.turn-table tr { display: block; padding: 9px 0; }
  .guide .table-wrap.turn-table tbody th { display: inline; padding: 0; margin-right: 8px; }
  .guide .table-wrap.turn-table tbody td { display: inline; padding: 0; font-size: 14px; }
  .guide .table-wrap.turn-table tbody td::before { content: none; }
  .guide .table-wrap.turn-table tbody td[data-label="Name"] { font-weight: 600; }
  .guide .table-wrap.turn-table tbody td.empty,
  .guide .table-wrap.turn-table tbody td[data-label="From previous turn"] { display: none; }
  /* A line break before the direction: the number and name, then direction · shape · distance on the next line. */
  .guide .table-wrap.turn-table tbody td[data-label="Direction"] { color: var(--muted); }
  .guide .table-wrap.turn-table tbody td[data-label="Direction"]::before { content: "\A"; white-space: pre; }
  .guide .table-wrap.turn-table tbody :is(td[data-label="Shape"], td[data-label="To next turn"]) { color: var(--muted); }
  .guide .table-wrap.turn-table tbody :is(td[data-label="Shape"], td[data-label="To next turn"])::before { content: " · "; }
}

/*
 * SEO ROUND 8 (23 Oct 2026), from the critique of the five new guides.
 * A closed comparison card shows one row's value under the product (`{.compare gist=Runs on}`), so a phone reader can
 * scan the products without opening each one. A comparison table's column heads are product names: they keep their own
 * casing ("Race Studio 3" and "RaceStudio 3 app" are different things) and read as names, not labels. Lists keep the
 * paragraphs' measure.
 */
.compare-card > summary { flex-wrap: wrap; row-gap: 2px; }
.compare-card > summary .gist { order: 3; flex-basis: 100%; color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
.guide .compare-wide thead th { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.guide .block > :is(ul, ol):not(.guide-index, .links) { max-width: 68ch; }