/* W2 item 4 - the example athlete page's own parts, loaded after the athlete page's stylesheet, which draws everything else
   exactly as on an athlete's own page. Tokens only (no colour, size or space of its own but the 44 px every control keeps,
   R43); nothing fixes a width, so the page reflows at 320 px. */

/* the EXAMPLE banner: first on the page and kept at the top of the screen as it scrolls, so every screenful (and every
   screenshot of one) says it; ink on yellow, the rehearsal line's colours */
.ex-banner{position:sticky;top:0;z-index:2;background:var(--ro-yellow);color:var(--ro-ink);padding:var(--s1) 0}
.ex-banner p{margin:0 auto;font-weight:700}
.ex-banner b{font-weight:900;margin-right:var(--s1)}
/* room for the banner wherever the page is moved to something: "See your certificate" (scrollIntoView), focus moving up the
   page, a #link. At 320 px the banner is three lines, about 83 px (measured in Chrome, 22 Oct); 96 px keeps the heading or
   control it lands on clear of it, with a gap (review of W2 item 4) */
html{scroll-padding-top:calc(var(--s6) * 2)}

/* the switch between the two views: two buttons side by side (they wrap on a narrow phone), the shown one filled */
.ex-views{padding-top:var(--s2)}
.ex-views .ap-actions{margin:0}
.ex-views .ap-btn[aria-pressed="true"]{background:var(--ro-ink);color:var(--ro-paper)}
.ex-views .ap-btn:focus-visible{outline:3px solid var(--ro-red);outline-offset:2px}
.ex-note{margin:var(--s1) 0 0;color:var(--ro-dim)}

/* the certificate card says EXAMPLE across its top, above the red band, so the card alone (a screenshot of it) says it too */
.ap-certcard::before{content:"EXAMPLE";display:block;padding:4px var(--s2);background:var(--ro-yellow);color:var(--ro-ink);font-weight:900}

/* the way back: a plain link that is a control at least 44 px tall (R43). W2 item 8 (the page check's spacing points): the athlete
   page ends its <main> with the page's own bottom space (--s5); here the way back follows it, so <main> keeps one step (--s2) and the
   page's bottom space is the footer's, with no tall empty gap above the link */
main.ap-wrap{padding-bottom:var(--s2)}
.ex-foot{padding-bottom:var(--s5)}
.ex-back{display:inline-flex;align-items:center;min-height:44px;color:var(--ro-red);text-decoration:underline;font-weight:700}
.ex-back:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}