/* X35 part 4 — the athlete's own page. Composes the shared tokens
   (screens/shared/ro-tokens.css) and invents no colour: every one is a token.
   Mobile first: it is read on a phone in a loud hall, so one column, large
   type for what to do, and nothing wider than the screen at 320px. The words
   carry every state (the chip and the lines); no colour or dot is the only
   signal of anything. */
*{box-sizing:border-box}
[hidden]{display:none !important}
/* the font is the tokens' own body rule (Mont), as on the front door */
body{margin:0;background:var(--ro-paper);color:var(--ro-ink);font-size:var(--fs-0);line-height:1.4;overflow-wrap:anywhere}
.ap-wrap{max-width:640px;margin:0 auto;padding:0 var(--s2)}

/* the red bar: the White wordmark (sized by wordmark.css), the event's name in
   type beside it, and the chip, which says in words what the page knows */
.ap-bar{background:var(--ro-red);color:var(--ro-paper);padding:var(--s1) 0}
.ap-bar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2)}
.ap-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin:0;
  font-size:var(--fs-1);font-weight:900;line-height:1.1}
.ap-chip{margin:0;font-size:14px;font-weight:700}

/* what the page says first: the case it is in */
.ap-lead{padding:var(--s3) 0 0}
.ap-lead__line{margin:0 0 var(--s2);font-size:var(--fs-1);font-weight:700;line-height:1.3}

/* who */
.ap-who{padding:var(--s2) 0 0}
.ap-who__name{margin:0;font-size:var(--fs-2);font-weight:900;line-height:1.15}
.ap-who__club{margin:4px 0 0;color:var(--ro-dim);font-weight:700}

/* ---- R43 (13 Oct): what the athlete came for, within the first screen. Tokens only. ---- */
/* "Your race now" (A3): under the name while live, the event and its line's own sentence. The red bar only when that
   line is called or seated, as on the card below (as well as the words, never in place of them): a line that is next
   or racing has none there, so none here (athlete.js renderRaceNow sets data-state) */
.ap-now{margin:var(--s2) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-neutral)}
.ap-now[data-state="called"],.ap-now[data-state="seated"]{border-left:6px solid var(--ro-red)}
.ap-now p{margin:0}
.ap-now__event{font-weight:700}
.ap-now__status{margin-top:4px !important;font-size:var(--fs-1);font-weight:900;line-height:1.25}
/* R206 (28 Oct): the staging countdown, under "Your race now": the box looks like it (tokens only), the first line is the
   clock and the lines after it (the feed is paused, waves can start early) are quieter. The red bar, as on a called card, only
   when it is time to go (data-kind "now": the words carry it, the bar never in place of them). The ticking digits keep a
   steady width. athlete.js makes the box (stagingPlaces, aria-hidden: a screen reader has #staging-sr instead) and writes the
   lines and data-kind (renderStaging) */
.ap-staging{margin:var(--s2) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-neutral)}
.ap-staging[data-kind="now"]{border-left:6px solid var(--ro-red)}
.ap-staging__line{margin:4px 0 0;color:var(--ro-dim);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ap-staging__line:first-child{margin-top:0;color:var(--ro-ink);font-size:var(--fs-1);font-weight:900;line-height:1.25}
/* X96 1c (31 Oct): the countdown lines (the next wave of the day, or "Your wave starts in 3:42."), under the staging box: the same look, no
   red bar (it is not a call to go). athlete.js makes the box (countdownPlaces, aria-hidden: a screen reader has #countdown-sr) and writes
   the lines and data-kind (renderCountdown) */
/* X96 R208: the heat clock, under "Your race now" while the athlete's own wave is racing. The largest line the page has: the figure is the message, tabular so the
   digits do not dance as they tick; the last quarter of an Event 1 or 2 window carries the red bar the staging box's "go now" does; a finished heat is quieter. */
.ap-heatclock{margin:var(--s2) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-neutral)}
.ap-heatclock[data-closing="true"]{border-left:6px solid var(--ro-red)}
.ap-heatclock[data-kind="finished"]{opacity:.8}
/* Event 3's line is the longest ("Stage 11, target 300 W, next step in 0:29"): a size down, so it breaks after the target and not between the figure and its W */
.ap-heatclock[data-kind="stage"] .ap-heatclock__line{font-size:var(--fs-2)}
@media (max-width:346px){ .ap-heatclock[data-kind="stage"] .ap-heatclock__line{font-size:var(--fs-1)} }
.ap-heatclock__line{margin:0;color:var(--ro-ink);font-size:var(--fs-3);font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.ap-countdown{margin:var(--s2) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-neutral)}
.ap-countdown__line{margin:4px 0 0;color:var(--ro-dim);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ap-countdown__line:first-child{margin-top:0;color:var(--ro-ink);font-size:var(--fs-1);font-weight:900;line-height:1.25}
/* "See your certificate" (A4): under the lead lines, a full-width button like the certificate's own */
.ap-tocert{display:flex;flex-direction:column;align-items:stretch;margin:0 0 var(--s1)}
.ap-tocert .ap-btn{text-align:center}
/* R140 (page check, shot 06): on race day while live the lead has no line and is hidden, and the button sat flush against
   the red bar; under a hidden lead it takes the gap the lead's own top padding gives every other page state */
.ap-lead[hidden] + .ap-tocert{margin-top:var(--s3)}

/* one card per event */
/* review (9 Oct): no bottom padding of its own (the next section's rule and padding give the gap; the page's end is
   main's), so there is no 60 px hole before "Your division" */
.ap-events{padding:var(--s2) 0 0}
main.ap-wrap{padding-bottom:var(--s5)}
.ap-event{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
/* review (9 Oct): the events are headed at the size of the sections after them (.ap-section__title) */
.ap-event__title{margin:0;font-size:var(--fs-2);font-weight:900;line-height:1.15}
.ap-event__what{margin:4px 0 var(--s1);color:var(--ro-dim);font-size:14px}
.ap-event__note{margin:var(--s1) 0 0;font-weight:700}
.ap-line{margin:var(--s1) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-neutral)}
.ap-line + .ap-line{margin-top:var(--s1)}
.ap-line p{margin:0}
.ap-line__wave{font-weight:700}
.ap-line__planned{font-variant-numeric:tabular-nums}
.ap-line__status{margin-top:4px !important;font-size:var(--fs-1);font-weight:900;line-height:1.25}
/* what a wave WAS at the last update: quieter, because it is not now */
.ap-line__status--past{font-size:var(--fs-0);font-weight:700;color:var(--ro-dim)}
/* while the feed is live, the two lines that ask the athlete to move get a bar
   as well as their words (never in place of them) */
[data-mode="live"] .ap-line[data-state="called"],[data-mode="live"] .ap-line[data-state="seated"]{border-left:6px solid var(--ro-red)}

/* ---- The athlete's schedule (9 Oct, R30 to R33): the staging time inside each
   event line, and the day around the cards: doors and check-in above them,
   the awards time, the places and what to bring below. Tokens only; one
   column at any width. ---- */
/* the staging time: a plan, so quieter than the live status under it, but bold enough to find at a glance */
.ap-line__staging{margin-top:4px !important;font-weight:700;font-variant-numeric:tabular-nums}
.ap-day{padding:var(--s2) 0 0}
.ap-day__line{margin:0 0 var(--s1);font-weight:700;font-variant-numeric:tabular-nums}
.ap-day--end{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
.ap-day__awards{margin:0 0 var(--s2);font-size:var(--fs-1);font-weight:900;font-variant-numeric:tabular-nums}
.ap-day__sub{margin:0 0 var(--s1);font-size:var(--fs-1);font-weight:900;line-height:1.25}
.ap-day__sub ~ .ap-day__sub{margin-top:var(--s2)}
.ap-places,.ap-bring{margin:0;padding-left:var(--s3)}
.ap-places li,.ap-bring li{margin:0 0 4px}
.ap-places b{font-weight:900}

/* ---- Athlete layer F3 (8 Oct): official results, the division, the
   certificate, its share image and "Your day". Tokens only; no fixed width:
   one column at any width down to 320px. ---- */
.ap-who__division{margin:4px 0 0;color:var(--ro-dim);font-weight:700}
/* an event's official result: the number first, large, its label under it */
.ap-result{margin:var(--s1) 0 0;padding:var(--s1) var(--s2);border-left:6px solid var(--ro-ink);background:var(--ro-paper)}
.ap-result__num{margin:var(--s1) 0 0;font-size:var(--fs-3);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.ap-result__label{margin:0;color:var(--ro-dim);font-size:14px;font-weight:700}
.ap-result__line{margin:4px 0 0}
.ap-result__num + .ap-result__label + .ap-result__line{margin-top:var(--s1)}
/* PB-1105 (5 Nov, the PB ruling): the personal best toggle, right after the result it is about (athlete.js pbToggleEl): a real
   button, 44 px, its pressed state the red of the band; its line plain text, hidden when empty. The toggles' one status
   (ap-pb__say, first in #events, made once and never rebuilt: review finding 7) is for a screen reader, clipped out of sight */
.ap-pb{margin:var(--s1) 0 0}
.ap-pb__toggle{display:inline-flex;align-items:center;min-height:44px;padding:10px var(--s2);border:2px solid var(--ro-ink);border-radius:var(--radius-sm);
  background:var(--ro-paper);color:var(--ro-ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.ap-pb__toggle[aria-pressed="true"]{border-color:var(--ro-red);background:var(--ro-red);color:var(--ro-paper)}
.ap-pb__toggle:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}
.ap-pb__line{margin:4px 0 0;color:var(--ro-dim);font-size:14px;font-weight:700}
.ap-pb__say{position:absolute;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ---- R44 Part 10 (16 Oct): the race report inside each event's card, under its result lines (scope v2 3.8). Tokens
   only. A closed <details> whose summary is its one control (44 px); its charts are core/results/report-charts.js's
   models, drawn as <svg> with no colour of their own: each node's class (rc-*) takes one here. Chart text is 16 units
   in a 360 viewBox, so it is 14 px or more wherever the chart is 315 px wide or wider (the model's minWidthPx): at
   346 px and below the content box is narrower than that, so the chart runs into the side padding, leaving 2 px at
   each edge of the screen (at 320 px it is 316 px wide), and never wider than the screen. ---- */
.ap-report-line{margin:var(--s1) 0 0;font-weight:700}
.ap-report{margin:var(--s1) 0 0;border-top:1px solid var(--ro-line)}
/* a list item, as the come-and-try QR's summary is, so it keeps its open-and-close marker (a flex summary loses it) */
.ap-report__summary{min-height:44px;padding:10px 0;font-weight:700;cursor:pointer}
.ap-report p{margin:var(--s1) 0 0}
.ap-report .ap-report__lead{margin-top:0;color:var(--ro-dim)}
.ap-report .ap-report__num{font-size:var(--fs-2);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.ap-report .ap-report__label{margin-top:0;color:var(--ro-dim);font-size:14px;font-weight:700}
.ap-report .ap-report__head{font-weight:700}
.ap-report__tag{display:inline-block;padding:4px var(--s1);border-radius:var(--radius-sm);background:var(--ro-neutral);font-weight:700}
/* R135: "Placement pending" heads the part right under its summary, and the lead keeps the part's gap below it */
.ap-report .ap-report__tag{margin-top:0}
.ap-report .ap-report__tag + .ap-report__lead{margin-top:var(--s1)}
.ap-report__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s1) var(--s2);margin:var(--s1) 0 0;padding:0;list-style:none}
.ap-report__cards b{display:block;font-size:var(--fs-1);font-weight:900;font-variant-numeric:tabular-nums}
.ap-report__cards span{display:block;color:var(--ro-dim);font-size:14px;font-weight:700}
.ap-report .ap-report__small{color:var(--ro-dim);font-size:14px}
.ap-chart{display:block;width:100%;height:auto;margin:var(--s1) 0 0;overflow:visible}
/* max-width: the tokens cap every svg at 100% (ro-tokens.css img,svg), which would hold the chart to the content box */
@media (max-width:346px){ .ap-chart{width:calc(100% + 2 * var(--s2) - 4px);max-width:none;margin-left:calc(2px - var(--s2))} }
.ap-chart .rc-grid{stroke:var(--ro-line)}
.ap-chart .rc-tick{fill:var(--ro-dim)}
.ap-chart .rc-value,.ap-chart .rc-word{fill:var(--ro-ink)}
.ap-chart .rc-peak,.ap-chart .rc-fill{fill:var(--ro-red)}
/* the average bar beside each surge's highest: light, with an edge, so it is told from the red bar without its colour */
.ap-chart .rc-avg{fill:var(--ro-neutral);stroke:var(--ro-dim);stroke-width:1.5}
.ap-chart path.rc-pace,.ap-chart path.rc-watts,.ap-chart path.rc-force{stroke:var(--ro-red)}
.ap-chart circle.rc-pace,.ap-chart circle.rc-watts{fill:var(--ro-red)}
.ap-chart path.rc-target{stroke:var(--ro-dim)}
.ap-chart circle.rc-target{fill:var(--ro-dim)}
.ap-chart .rc-track{fill:var(--ro-neutral)}
.ap-chart .rc-knob{fill:var(--ro-ink)}
/* the range bar: its number sits on the dark knob, its two ends are quieter than the bars' names */
.ap-chart--range .rc-value{fill:var(--ro-paper)}
.ap-chart--range .rc-word{fill:var(--ro-dim)}

.ap-standing,.ap-cert,.ap-deck{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
.ap-section__title{margin:0 0 var(--s1);font-size:var(--fs-2);font-weight:900;line-height:1.15}
.ap-standing__line{margin:0 0 var(--s1)}
.ap-awards{margin:0;padding-left:var(--s3);font-weight:700}

/* the certificate on screen and on paper: the White wordmark on the red band (R19) */
.ap-certcard{border:1px solid var(--ro-line);border-radius:var(--radius);overflow:hidden;background:var(--ro-paper)}
.ap-certcard__band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);
  background:var(--ro-red);color:var(--ro-paper);font-size:var(--fs-1);font-weight:900}
/* one mark on the page, the header's (8 Oct): the band's mark shows only when the certificate prints alone, which
   hides the header (below). The share images and /c/ draw their own: each is its own surface */
.ap-certcard__band .ap-certcard__mark{display:none}
/* with the mark hidden the band says the whole name, "RowOn" included (review, 9 Oct); printed alone, beside its mark,
   the rest of it */
.ap-certcard__event-beside{display:none}
.ap-certcard__body{padding:var(--s2)}
.ap-certcard__name{margin:0;font-size:var(--fs-3);font-weight:900;line-height:1.1}
.ap-certcard__sub{margin:4px 0 0;color:var(--ro-dim);font-weight:700}
.ap-certcard__headline{margin:var(--s2) 0;color:var(--ro-red);font-size:var(--fs-1);font-weight:900;line-height:1.25}
.ap-certcard__lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s2);margin:0;padding:0;list-style:none}
.ap-certcard__line b{display:block;font-size:var(--fs-2);font-weight:900;font-variant-numeric:tabular-nums}
/* R43 (A2, D6): at 480px and below the three results are one column (at 375px they fell two and one, the second one's
   event wrapping and the third alone); a Letter page is wider than 480px, so the print keeps the grid */
@media (max-width:480px){ .ap-certcard__lines{grid-template-columns:1fr;gap:var(--s1)} }
.ap-certcard__event,.ap-certcard__caption{display:block;color:var(--ro-dim);font-size:14px;font-weight:700}
.ap-certcard__small{margin:var(--s2) 0 0;color:var(--ro-dim);font-size:14px}
/* PB-1105, ruling 147 (5 Nov, "Yes, everywhere"): the banner on a line the certificate's pb flags, on the page's certificate
   card (last on its line, as cloud/c/cert.css .cp-card__pb on /c/) and in "Your day" (under the value in the certificate
   slide's row). Red on paper, as the band; inside #cert, so the print layout keeps it, in colour: print-color-adjust here on
   the banner itself (second recheck, 5 Nov), so a rule nearer it than the print's body cannot turn its red off */
.ap-certcard__pb,.ap-slide__pb{display:table;margin:4px 0 0;padding:2px var(--s1);border-radius:var(--radius-sm);background:var(--ro-red);
  color:var(--ro-paper);font-size:14px;font-weight:900;letter-spacing:.04em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ap-rehearsal{margin:0;padding:4px var(--s2);background:var(--ro-yellow);color:var(--ro-ink);font-weight:900}

/* buttons: large enough to hit with a thumb */
.ap-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0}
/* review (9 Oct): the certificate's buttons are full width, one under another, so their edges line up */
.ap-cert .ap-actions,.ap-share{display:flex;flex-direction:column;align-items:stretch}
.ap-cert .ap-actions .ap-btn,.ap-share .ap-btn{text-align:center}
.ap-btn{display:inline-block;min-height:44px;padding:10px var(--s2);border:2px solid var(--ro-ink);border-radius:var(--radius-sm);
  background:var(--ro-paper);color:var(--ro-ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.ap-btn[disabled]{opacity:.4;cursor:default}
.ap-cert__linkbox{margin:var(--s2) 0 0}
.ap-cert__linkbox p{margin:0}
/* R43 (A1): a control like the buttons around it, at least 44 px tall (it was 22 px, between two 44 px buttons) */
.ap-cert__link{display:flex;align-items:center;min-height:44px;margin:4px 0 0;color:var(--ro-red);font-weight:700}
.ap-cert__status{margin:var(--s1) 0 0 !important;font-weight:700}
/* a share image the phone cannot share from here, shown to save */
.ap-share{padding:var(--s2) 0}
.ap-share p{margin:0 0 var(--s1)}
.ap-share img{display:block;max-width:100%;height:auto;margin:0 0 var(--s1);border:1px solid var(--ro-line)}

/* ---- Come and Try (15 Oct, R55): "Bring someone to try rowing", after the day's places and what to bring. Tokens
   only; full-width buttons one under another, as the certificate's; every control at least 44 px tall; the QR's
   width is its box's, capped so it stays a QR and not a wall. ---- */
.ap-invite{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
.ap-invite__line{margin:0 0 var(--s1)}
.ap-invite .ap-actions{flex-direction:column;align-items:stretch}
.ap-invite .ap-btn{text-align:center}
.ap-invite__status{margin:var(--s1) 0 0;font-weight:700}
.ap-invite__qr{margin:var(--s2) 0 0}
.ap-invite__qr summary{min-height:44px;padding:10px 0;font-weight:700;cursor:pointer}
.ap-invite__qr img{display:block;width:100%;max-width:15rem;height:auto;margin:var(--s1) 0}
/* A-5: which page the QR opens, in the page's large type, right above it */
.ap-invite__qr .ap-invite__qrlabel{margin:var(--s1) 0 0;font-size:var(--fs-1);font-weight:900;line-height:1.25}
.ap-invite__qr p{margin:0 0 var(--s1)}
.ap-invite__open{display:inline-flex;align-items:center;min-height:44px;margin:var(--s1) 0 0;color:var(--ro-red);font-weight:700}
/* W2 item 6: "What to expect on race day", before the day, one link after the come-and-try card (athlete.js renderExpect) */
.ap-expect{padding:var(--s1) 0;border-top:1px solid var(--ro-line)}
.ap-expect__open{display:inline-flex;align-items:center;min-height:44px;color:var(--ro-red);font-weight:700}

/* ---- R45 B7 (16 Oct): "Let someone follow you live", right after the event cards (athlete.js makes #follow while
   index.html has none). As the come-and-try card: tokens only, full-width buttons one under another, every control at
   least 44 px tall, text 16 px (the body's) and nothing under 14 px. The QR is drawn on the phone as an <svg> of 1 x 1
   rects: its paper is the svg's background and its ink the <g>'s fill, both tokens, dark on light as a scanner wants it;
   its width is its box's, capped so it stays a QR and not a wall (the same cap as the come-and-try QR). ---- */
.ap-follow{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
.ap-follow__line{margin:0 0 var(--s1)}
.ap-follow .ap-actions{flex-direction:column;align-items:stretch}
.ap-follow .ap-btn{text-align:center}
.ap-follow__status{margin:var(--s1) 0 0;font-weight:700}
.ap-follow__qr{margin:var(--s2) 0 0}
.ap-follow__qr summary{min-height:44px;padding:10px 0;font-weight:700;cursor:pointer}
/* A-5: which link the QR opens, in the page's large type, right above it */
.ap-follow__qr .ap-follow__qrlabel{margin:var(--s1) 0 0;font-size:var(--fs-1);font-weight:900;line-height:1.25}
.ap-follow__code{display:block;width:100%;max-width:15rem;height:auto;margin:var(--s1) 0;background:var(--ro-paper)}
.ap-follow__dark{fill:var(--ro-ink)}
.ap-follow__qr p{margin:0 0 var(--s1)}
.ap-follow__open{display:inline-flex;align-items:center;min-height:44px;margin:var(--s1) 0 0;color:var(--ro-red);font-weight:700}

/* "Your day": stacked by default (no script, and in print); a slide at a time
   once its script has set data-paged */
.ap-slide{margin:0 0 var(--s2);padding:var(--s2);border-radius:var(--radius);background:var(--ro-neutral)}
[data-paged="yes"] .ap-slide[aria-hidden="true"]{display:none}
.ap-slide__title{margin:0 0 var(--s1);font-size:var(--fs-1);font-weight:900}
.ap-slide__line{margin:0 0 var(--s1)}
.ap-slide .ap-rehearsal{margin:calc(-1 * var(--s2)) calc(-1 * var(--s2)) var(--s2);border-radius:var(--radius) var(--radius) 0 0}
/* review (9 Oct): the table fills the slide's content box, so its rules end the same distance from each edge */
.ap-table{width:100%;border-collapse:collapse;margin:var(--s1) 0 0}
.ap-table th,.ap-table td{padding:4px var(--s1) 4px 0;border-bottom:1px solid var(--ro-line);text-align:left;vertical-align:top}
.ap-table th{color:var(--ro-dim);font-weight:700}
/* the value column wraps like the label (verify, 8 Oct: nowrap squeezed "Event 3: Step Up or Out" to five lines at
   375px and pushed the table into the slide's padding at 320px) */
.ap-table td{font-weight:900;font-variant-numeric:tabular-nums}
.ap-table td:last-child{padding-right:0}
.ap-deck__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s1)}
.ap-deck:not([data-paged="yes"]) .ap-deck__nav{display:none}
.ap-deck__count{font-weight:700}
.ap-deck:focus-visible{outline:3px solid var(--ro-ink);outline-offset:4px}

/* Recognition station (rulings 82-84, 2 Nov) - a moment in the photo view. The station on the bus (the lead's
   screens/recognition) shows ONE card this page draws (athlete.js momentEl), alone, for a photo: it sets
   data-view="photo" on its <html> and loads this file only in that view, and cert.js fitPhoto() sizes the card to the
   screen. Nothing on the athlete's page sets it, so the page is as it was. The card wears the certificate's frame as the
   printed certificate does: the band's wordmark shown (the station's screen has no other mark) beside the rest of the
   name. No link shows in a photo: momentEl draws none. */
[data-view="photo"] .ap-moment{max-width:720px;margin:0 auto}
[data-view="photo"] .ap-moment .ap-certcard__band .ap-certcard__mark{display:block}
[data-view="photo"] .ap-moment .ap-certcard__event-name{display:none}
[data-view="photo"] .ap-moment .ap-certcard__event-beside{display:inline}
[data-view="photo"] .ap-moment .ap-moment__title{margin-top:var(--s2)}

/* PB-1105 (5 Nov, the PB ruling): the large banner on a result moment the record's pb flags (momentEl), right under its title,
   for the photo. Not under data-view: it is the card's own, wherever the card is drawn */
.ap-moment__pb{display:inline-block;margin:var(--s2) 0 0;padding:var(--s1) var(--s2);border-radius:var(--radius-sm);background:var(--ro-red);
  color:var(--ro-paper);font-size:var(--fs-3);font-weight:900;line-height:1.1;letter-spacing:.04em}

/* paper (R17: a PDF to print at home, Letter). The certificate button prints
   the certificate alone (data-print="cert" on the root while it prints);
   printing the page prints everything, "Your day" stacked.
   The page margin is 0 and the 12mm is the body's own padding: with any page
   margin, a desktop browser prints its own header and footer in it, and the
   footer is this page's address, the athlete's private link (verify, 8 Oct,
   Chrome print-to-PDF). With none there is no room for them. */
@page{size:letter landscape;margin:0}
@media print{
  body{padding:12mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* as specific as the screen's full-width rule for the certificate's buttons (.ap-cert .ap-actions), or the buttons
     print (review, 9 Oct: found in the Letter print-to-PDF) */
  .ap-actions,.ap-cert .ap-actions,.ap-cert__linkbox,.ap-share,.ap-deck__nav{display:none}
  /* Come and Try: an invitation with buttons, not part of the athlete's day on paper */
  #invite{display:none}
  /* PB-1105: nor the personal best toggle (a button) */
  .ap-pb{display:none}
  /* W2 item 6: nor the link to the "I'm racing" page (a link, not the athlete's day on paper) */
  #expect{display:none}
  /* X96 item 1b: nor the link to the schedule page (a link, not the athlete's day on paper; athlete.js makes #schedule-link with .ap-expect) */
  #schedule-link{display:none}
  /* R45 B7: nor the follow link's card (a link to share, with buttons) */
  #follow{display:none}
  /* R43: nor a button that moves the page, nor what the athlete must do now (paper is not now) */
  #to-cert,#now{display:none}
  /* R206: nor the staging countdown (paper is not now) */
  #staging,#staging-sr{display:none}
  /* X96 1c: nor the countdown lines */
  #countdown,#countdown-sr{display:none}
  /* X96 R208: nor the heat clock (paper is not now) */
  #heatclock,#heatclock-sr{display:none}
  .ap-slide{display:block !important;break-inside:avoid}
  .ap-certcard,.ap-event{break-inside:avoid}
  [data-print="cert"] .ap-bar,[data-print="cert"] #lead,[data-print="cert"] #who,[data-print="cert"] #day,[data-print="cert"] #events,
  [data-print="cert"] #day-end,
  [data-print="cert"] #standing,[data-print="cert"] #deck,[data-print="cert"] #share-out,[data-print="cert"] .ap-cert > .ap-section__title{display:none}
  /* R44 Part 10: and as hardening, by allow-list, every child of main but the certificate (the race report sits in
     #events, hidden above; scope v2 3.8, the challenge's M1) */
  [data-print="cert"] main > :not(#cert){display:none}
  [data-print="cert"] .ap-cert{border:0;padding:0}
  [data-print="cert"] .ap-certcard__band .ap-certcard__mark{display:block}
  [data-print="cert"] .ap-certcard__event-name{display:none}
  [data-print="cert"] .ap-certcard__event-beside{display:inline}
}