/* W2 item 3 - the "I'm racing" page. Loaded after the welcome page's stylesheet, which gives the red block, the sections, the red link
   buttons and the footer, so the two pages read as one site. Composes the shared tokens and invents no value: colour, type sizes and
   spacing are all token steps (or the 44 px every control keeps, R43). Nothing fixes a width, so the page reflows at 320 px. */
.rd-page{overflow-wrap:break-word}

/* a plain link that is a control: at least 44 px tall and 44 px wide (R43; PART 4: "More" was 42 px wide at 320 px), red as every link on
   the site, underlined so it reads as one */
.rd-a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ro-red);text-decoration:underline}
.rd-a:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}
/* the event's name in the red block links back to the welcome page: white on red, like the rest of the block */
.fd-flood .rd-home{color:var(--ro-paper);font-weight:700}
.fd-flood .rd-home:focus-visible{outline-color:var(--ro-paper)}

/* the contents: the section names, one under the other */
.rd-toc{padding:var(--s5) 0 0}
.rd-toc h2{font-size:var(--fs-1);margin:0 0 var(--s1)}
.rd-toc ol{margin:0;padding:0 0 0 var(--s3)}
.rd-toc li{margin:0}

/* a section's own headings, under its h2 */
.fd-section h3{font-size:var(--fs-1);margin:var(--s4) 0 var(--s1)}
.fd-section h2 + h3{margin-top:var(--s2)}

/* the six steps: the step's name in bold, its line under it, at the body size */
.rd-steps{margin:0 0 var(--s4);padding:0 0 0 var(--s3);font-size:var(--fs-1);font-weight:700}
.rd-steps li{padding:var(--s1) 0;margin:0}
.rd-steps b{display:block}
.rd-steps span{display:block;max-width:60ch;font-size:var(--fs-0);font-weight:400;margin-top:4px}

.rd-list{max-width:60ch;margin:0 0 var(--s3)}
.rd-list li{margin:var(--s1) 0}

/* an email address on a line of its own, so its link is a full-height control */
.fd-section .rd-mail{margin:0 0 var(--s3)}
.fd-section .rd-ask{margin:var(--s3) 0 0}
/* W2 item 8 (the page check's spacing points): a link on a line of its own sits just under the sentence that leads to it ("...,
   email:"), with no paragraph gap between them: the link's own 44 px height gives the room on one line, and the 4 px keeps a link
   that wraps to two lines (at 320 px) off the sentence */
.fd-section p:has(+ .rd-mail){margin-bottom:4px}

/* the entry line: a neutral box inside the section, shown by the script while entries are open; no display is set on it, so the hidden
   attribute wins */
.rd-entry{background:var(--ro-neutral);padding:var(--s3) var(--s2);border-radius:var(--radius-sm)}
.rd-entry p{font-weight:700}
.rd-entry .fd-link{display:inline-block}

/* the order of the day: what, then when; one column on a phone, two from 577 px. W2 item 8 (the page check's spacing points): a rule
   between rows only, so the last row's rule never stands just above the section's own; and room under the list when a line follows */
.rd-day{display:grid;gap:var(--s2);grid-template-columns:1fr;max-width:60ch;margin:0}
.rd-day:not(:last-child){margin-bottom:var(--s3)}
.rd-day div{display:grid;gap:4px;grid-template-columns:1fr;padding:0 0 var(--s1);border-bottom:1px solid var(--ro-line)}
.rd-day div:last-child{padding-bottom:0;border-bottom:0}
@media (min-width:577px){.rd-day div{grid-template-columns:1fr 1fr;gap:var(--s2)}}
.rd-day dt{font-weight:700;margin:0}
.rd-day dd{margin:0}

/* the link buttons under a section */
.fd-section .fd-links{margin-top:var(--s3)}

/* the venue map (5 Nov), in "On the day": the inline drawing at its own size (420 by its height, one unit a pixel, as drawn) and never
   wider, scaled down to the column on a phone with its shape kept; then its text version, at the body size. Every colour in the drawing
   is a token here (rdm- is the map's own prefix), and its type is the page's */
.rd-map{max-width:420px;margin:0 0 var(--s3)}
.rd-map svg{display:block;max-width:100%;height:auto}
.rdm-bg{fill:var(--ro-paper)}
.rdm-t{fill:var(--ro-ink)}
.rdm-dim{fill:var(--ro-dim)}
.rdm-hall{fill:var(--ro-paper);stroke:var(--ro-ink);stroke-width:2.5}
.rdm-zone{fill:var(--ro-neutral);stroke:var(--ro-ink);stroke-width:2.5}
.rdm-other{fill:var(--ro-paper);stroke:var(--ro-dim);stroke-width:1.5}
.rdm-screen,.rdm-monitor{fill:var(--ro-ink)}
.rdm-erg{fill:var(--ro-paper);stroke:var(--ro-ink);stroke-width:1.5}
.rdm-hair{stroke:var(--ro-line);stroke-width:1.5}
.rdm-route{fill:none;stroke:var(--ro-blue);stroke-width:5;stroke-linecap:round}
.rdm-ah{fill:var(--ro-blue)}
.rdm-badge circle{fill:var(--ro-blue)}
.rdm-badge text{fill:var(--ro-paper)}
.rd-map-text{max-width:60ch;margin:0 0 var(--s3)}
.rd-map-text h4{font-size:var(--fs-0);font-weight:700;margin:var(--s3) 0 var(--s1)}
.rd-areas{margin:0}
.rd-areas dt{font-weight:700;margin:var(--s2) 0 0}
.rd-areas dd{margin:0}
.rd-path{margin:0;padding:0 0 0 var(--s3)}
.rd-path li{margin:var(--s1) 0}
