/* The guides layer (/guides/): source, copied to public/guides/guides.css by
   scripts/guides.py with a content-hash ?v=, only once a guide is live.

   It sits on top of the Yardage Book (yb/tokens.css, yb/yardage.css) and the
   site's own layer (site.css), and borrows their document layout: .yb-doc,
   .yb-doc-grid, the "On this page" index (.yb-toc, built by site.js) and
   .yb-article. Only what an editorial guide needs beyond a legal page lives
   here.

   Owner taste (2026-10-01), kept on purpose: no translucent pills with status
   dots, no green eyebrow labels, no glow, no grids of identical cards, no
   checkmark rows, no CSS phone mockups. Green (#17C97F, --yb-accent) is an
   accent on data marks and one hairline only; text green is --yb-accent-text. */

/* ----------------------------------------------------------- head */

.guide-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--yb-space-s); margin: 0 0 var(--yb-space-l); padding: 0; list-style: none; }
.guide-crumbs li { font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); color: var(--yb-note); }
.guide-crumbs li + li::before { content: "/"; margin-right: var(--yb-space-s); color: var(--yb-rule-strong); }
.guide-crumbs a { color: var(--yb-note); text-decoration: none; }
.guide-crumbs a:hover { color: var(--yb-text); text-decoration: underline; text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); text-underline-offset: 0.3em; }
.guide-head .yb-title1 { max-width: 20ch; text-wrap: balance; }
.guide-head .yb-lead { max-width: 38rem; margin-top: var(--yb-space-l); color: var(--yb-text-secondary); text-wrap: pretty; }
.guide-byline { margin-top: var(--yb-space-xl); color: var(--yb-note); }
.guide-byline a { color: var(--yb-text); text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.2em; }
.guide-byline a:hover { text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); }
.guide-byline .guide-dot { margin: 0 var(--yb-space-xs); color: var(--yb-rule-strong); }

/* ----------------------------------------------------------- body */

.guide-body { max-width: 40rem; }
.guide-body p, .guide-body li { text-wrap: pretty; }
.guide-body code { font: normal 400 0.92em/1 var(--yb-font-mono); }

/* The short answer: the first thing under the head, set as a lead paragraph
   with one green hairline. No label above it. */
.guide-answer { margin: 0 0 var(--yb-space-x3); padding: var(--yb-space-xs) 0 var(--yb-space-xs) var(--yb-space-xl); border-left: var(--yb-line-heavy) solid var(--yb-accent); }
.guide-answer p { font: normal 400 var(--yb-type-lead-size)/var(--yb-type-lead-line) var(--yb-font-sans); color: var(--yb-text); }
.guide-answer p + p { margin-top: var(--yb-space-m); }

.guide-body blockquote { margin: var(--yb-space-l) 0; padding-left: var(--yb-space-xl); border-left: var(--yb-line-thin) solid var(--yb-rule-strong); }
.guide-body blockquote p { font: italic 400 var(--yb-type-title3-size)/1.45 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-text-secondary); }

/* A Striped measurement: double rule on top (the scorecard's), the table in
   mono figures, the caption names the label and the source. */
.guide-data { margin: var(--yb-space-x3) 0; padding-top: var(--yb-space-m); border-top: 3px double var(--yb-rule-strong); }
.guide-data table { margin: var(--yb-space-s) 0 0; font-variant-numeric: tabular-nums; }
.guide-data td { font: normal 400 var(--yb-type-numeral-xs-size)/var(--yb-type-numeral-xs-line) var(--yb-font-mono); }
.guide-data td:first-child { font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans); }
.guide-data figcaption { margin-top: var(--yb-space-m); font: normal 400 var(--yb-type-note-small-size)/var(--yb-type-note-small-line) var(--yb-font-sans); color: var(--yb-note); }
.guide-data .guide-data-label { font-family: var(--yb-font-mono); color: var(--yb-text); }
.guide-data figcaption a { color: inherit; }

/* The strip: one dot per session on a ruled scale, the reference value as a
   dashed line. Drawn as SVG by scripts/guides.py from the lab facts. */
.guide-strip { display: block; width: 100%; max-width: 34rem; height: auto; margin-top: var(--yb-space-s); overflow: visible; }
.guide-strip .s-axis { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); }
.guide-strip .s-tick { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); }
.guide-strip .s-tick-label { fill: var(--yb-note); font: normal 400 12px/1 var(--yb-font-mono); }
.guide-strip .s-ref { stroke: var(--yb-text); stroke-width: var(--yb-line-thin); stroke-dasharray: var(--yb-dash-target); }
.guide-strip .s-ref-label { fill: var(--yb-text); font: normal 400 12px/1 var(--yb-font-mono); }
.guide-strip .s-dot { fill: var(--yb-accent); stroke: var(--yb-ground); stroke-width: 1px; }
.guide-strip .s-mid { stroke: var(--yb-text); stroke-width: var(--yb-line-heavy); }
.guide-strip .s-mid-label { fill: var(--yb-text); font: normal 500 11px/1 var(--yb-font-mono); }

/* Steps in the app: the home page's step numbers, stacked. */
.yb-article ol.guide-steps { list-style: none; padding: 0; margin: var(--yb-space-l) 0 0; display: grid; counter-reset: guide-step; }
.guide-steps > li { counter-increment: guide-step; display: grid; grid-template-columns: var(--yb-space-x4) minmax(0, 1fr); gap: 0 var(--yb-space-m); padding: var(--yb-space-l) 0 !important; border-top: var(--yb-line-thin) solid var(--yb-rule); }
.guide-steps > li:last-child { border-bottom: var(--yb-line-thin) solid var(--yb-rule); }
.guide-steps > li::before { content: counter(guide-step) !important; position: static !important; font: italic 400 var(--yb-type-title3-size)/1.3 var(--yb-font-serif) !important; font-variation-settings: var(--yb-serif-axes); color: var(--yb-text) !important; }
.guide-steps > li > * { grid-column: 2; }

.guide-body aside.guide-note { border-style: dashed; }


/* Sources: small, numbered, plain links, under a rule like every section. */
.guide-sources { margin-top: var(--yb-space-x5); padding-top: var(--yb-space-l); border-top: var(--yb-line-thin) solid var(--yb-rule-strong); }
.guide-sources h2 { margin-bottom: var(--yb-space-m); }
.guide-sources ol { font-size: var(--yb-type-footnote-size); }
.guide-sources li { font: normal 400 var(--yb-type-footnote-size)/var(--yb-type-footnote-line) var(--yb-font-sans) !important; color: var(--yb-text-secondary) !important; overflow-wrap: anywhere; }

/* ---------------------------------------------------- related list */

/* A ruled list, not a grid of cards: title, one line, the hub. */
.guide-related { margin-top: var(--yb-space-x5); max-width: 40rem; }
.guide-related h2 { font: italic 480 var(--yb-type-title2-size)/var(--yb-type-title2-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); }
.guide-list { list-style: none; margin: var(--yb-space-l) 0 0; padding: 0; }
.guide-list li { border-top: var(--yb-line-thin) solid var(--yb-rule); }
.guide-list li:last-child { border-bottom: var(--yb-line-thin) solid var(--yb-rule); }
.guide-list a { display: grid; gap: var(--yb-space-xs); padding: var(--yb-space-l) 0; text-decoration: none; color: inherit; }
.guide-list .guide-list-title { font: normal 500 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.01em; color: var(--yb-text); }
.guide-list a:hover .guide-list-title { text-decoration: underline; text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); text-underline-offset: 0.2em; }
.guide-list .guide-list-dek { font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans); color: var(--yb-text-secondary); }
.guide-list .guide-list-meta { font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); color: var(--yb-note); }

/* ------------------------------------------------------- the index */

.guide-hub { margin-top: var(--yb-space-x5); max-width: 44rem; }
.guide-hub:first-of-type { margin-top: var(--yb-space-x3); }
.guide-hub h2 { font: italic 480 var(--yb-type-title2-size)/var(--yb-type-title2-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); scroll-margin-top: calc(var(--yb-header-height) + var(--yb-space-l)); }
.guide-hub > p { margin-top: var(--yb-space-s); color: var(--yb-text-secondary); max-width: 36rem; }
.guide-index-feed { margin-top: var(--yb-space-x5); color: var(--yb-note); }
.guide-index-feed a { color: var(--yb-text); }

/* The author page */
.guide-author-bio { max-width: 36rem; margin-top: var(--yb-space-l); }

@media (min-width: 960px) {
  .guide-related, .guide-hubs { grid-column: 2; }
  .guide-related { grid-row: 3; }
}

/* A date never breaks across lines. */
.guide-byline time, .guide-byline a, .guide-list-meta { white-space: nowrap; }

/* ---------------------------------------------------- the call to action */

/* Under the byline (owner, 2026-10-25): the home page's own waitlist form
   (yardage.css .yb-join), or Apple's badge once APP_STORE_URL is set. One
   hairline above it, so it reads as part of the head, not as an ad. */
.guide-cta { margin-top: var(--yb-space-xl); padding-top: var(--yb-space-l); border-top: var(--yb-line-hair) solid var(--yb-rule); max-width: 30rem; }
.guide-cta .yb-join-line, .guide-cta-line { margin: 0 0 var(--yb-space-s); font: italic 400 var(--yb-type-title3-size)/1.3 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-text-secondary); }
.guide-cta-badge { display: inline-block; line-height: 0; border-radius: var(--yb-radius-control); }
.guide-cta-badge img { width: 132px; height: 44px; }   /* Apple: at least 40 px tall, never altered */
/* The closing CTA is an <aside>, which site.css draws as a dashed note box: here it
   is the scorecard's double rule instead, so it never reads like the Rule 4.3 note. */
.yb-article aside.guide-cta-end { margin: var(--yb-space-x4) 0 0; padding: var(--yb-space-l) 0 0; border: 0; border-top: 3px double var(--yb-rule-strong); color: var(--yb-text); }
.guide-cta-end p:first-child { font: italic 400 var(--yb-type-title3-size)/1.35 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); }
.guide-cta-end p { margin-top: 0; }
.guide-cta-end p + p, .guide-cta-end p + .guide-cta-badge { margin-top: var(--yb-space-m); }

/* ------------------------------------------------------------ graphics */

/* Original diagrams (scripts/guide_graphics.py): inline SVG, every mark a class
   coloured from the tokens, so night pages need no second copy. The viewBox is
   420 wide; the cap keeps its 12-13 px text near body size on a desktop. */
.guide-figure { margin: var(--yb-space-x3) 0; padding-top: var(--yb-space-m); border-top: var(--yb-line-thin) solid var(--yb-rule-strong); }
.guide-graphic { display: block; width: 100%; max-width: 34rem; height: auto; margin: var(--yb-space-s) 0 0; overflow: visible; }
.guide-figure figcaption { margin-top: var(--yb-space-m); font: normal 400 var(--yb-type-note-small-size)/var(--yb-type-note-small-line) var(--yb-font-sans); color: var(--yb-note); }
.guide-figure .guide-data-label { font-family: var(--yb-font-mono); color: var(--yb-text); }

.guide-graphic text { font: normal 400 13px/1 var(--yb-font-mono); fill: var(--yb-text-secondary); }
.guide-graphic .g-label-strong { fill: var(--yb-text); }
.guide-graphic .g-note, .guide-graphic .g-tick-label { font-size: 12px; fill: var(--yb-note); }
.guide-graphic .g-num { font-weight: 500; fill: var(--yb-text); }
.guide-graphic .g-ref-label { font-size: 12px; fill: var(--yb-text); }

.guide-graphic .g-axis, .guide-graphic .g-tick, .guide-graphic .g-ground { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); fill: none; }
.guide-graphic .g-guide { stroke: var(--yb-rule); stroke-width: var(--yb-line-thin); stroke-dasharray: var(--yb-dash-leader); fill: none; }
.guide-graphic .g-ref, .guide-graphic .g-plane { stroke: var(--yb-text); stroke-width: var(--yb-line-thin); stroke-dasharray: var(--yb-dash-target); fill: none; }
.guide-graphic .g-bracket { stroke: var(--yb-note); stroke-width: var(--yb-line-thin); fill: none; }
.guide-graphic .g-top { stroke: var(--yb-text); stroke-width: var(--yb-line-heavy); }
.guide-graphic .g-arrowhead { fill: var(--yb-text-secondary); stroke: none; }

/* the two halves of a stroke: the backswing ruled in ink, the downswing the accent */
.guide-graphic .g-back { fill: var(--yb-ground-alt); stroke: var(--yb-text); stroke-width: var(--yb-line-thin); }
.guide-graphic .g-down { fill: var(--yb-accent); stroke: var(--yb-text); stroke-width: var(--yb-line-thin); }
.guide-graphic .g-event { fill: var(--yb-ground); stroke: var(--yb-accent); stroke-width: var(--yb-line-heavy); }
.guide-graphic .g-bar { fill: var(--yb-accent); }
.guide-graphic .g-bar-sum { fill: var(--yb-text); }

/* sketches: the golfer in pencil, the path in the accent */
.guide-graphic .g-body { fill: none; stroke: var(--yb-text-secondary); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; }
.guide-graphic .g-club { stroke: var(--yb-text); stroke-width: var(--yb-line-thin); }
.guide-graphic .g-ball { fill: var(--yb-ground); stroke: var(--yb-text); stroke-width: var(--yb-line-thin); }
.guide-graphic .g-path { fill: none; stroke: var(--yb-accent); stroke-width: 2.2px; stroke-linecap: round; }
.guide-graphic .g-path-down { fill: none; stroke: var(--yb-accent); stroke-width: 1.4px; stroke-dasharray: 4 4; stroke-linecap: round; }
.guide-graphic .g-foot { fill: none; stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); }
.guide-graphic .g-pelvis-ghost { fill: none; stroke: var(--yb-text-secondary); stroke-width: var(--yb-line-thin); stroke-dasharray: var(--yb-dash-target); }
.guide-graphic .g-pelvis { fill: none; stroke: var(--yb-accent); stroke-width: 2.2px; }
.guide-graphic .g-sway, .guide-graphic .g-target { fill: none; stroke: var(--yb-text-secondary); stroke-width: var(--yb-line-thin); }

/* -------------------------------------------- author box, cite and embed */

/* About the author (2026-10-27): the byline's person at the foot of the guide,
   one hairline above it, plain text: no card, no avatar placeholder. */
.yb-article aside.guide-author { margin: var(--yb-space-x3) 0 0; padding: var(--yb-space-m) 0 0; border: 0; border-top: var(--yb-line-hair) solid var(--yb-rule); color: var(--yb-text-secondary); }
.guide-author p { margin: 0; }
.guide-author p + p { margin-top: var(--yb-space-xs); }
.guide-author-name { font-family: var(--yb-font-mono); font-size: var(--yb-type-note-small-size); color: var(--yb-text); }
.guide-author-name a { color: var(--yb-text); }

/* Cite or embed: a citation line and copy-ready embed code. The code wraps, so a
   phone never scrolls sideways. */
.guide-cite { margin-top: var(--yb-space-x4); padding-top: var(--yb-space-l); border-top: var(--yb-line-thin) solid var(--yb-rule-strong); }
.guide-cite p { color: var(--yb-text-secondary); }
.guide-cite-ref { color: var(--yb-text); }
.guide-cite summary { cursor: pointer; font-family: var(--yb-font-mono); font-size: var(--yb-type-note-small-size); color: var(--yb-text); margin-top: var(--yb-space-m); }
.guide-cite-title { margin-top: var(--yb-space-m); font-family: var(--yb-font-mono); font-size: var(--yb-type-note-small-size); color: var(--yb-note); }
.guide-cite-code { margin: var(--yb-space-xs) 0 0; padding: var(--yb-space-s) var(--yb-space-m); border: var(--yb-line-hair) solid var(--yb-rule); white-space: pre-wrap; overflow-wrap: anywhere; font: normal 400 12px/1.5 var(--yb-font-mono); color: var(--yb-text-secondary); }

/* The author page: an optional photo (the owner supplies it), the profiles as a plain list. */
.guide-author-photo { display: block; width: 96px; height: auto; margin-top: var(--yb-space-l); border-radius: 50%; }
.guide-author-profiles { margin: var(--yb-space-s) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--yb-space-xs) var(--yb-space-l); }