/* Come and Try (15 Oct, R55 to R62; R95) - the invite page, /try/. Composes the
   shared tokens and invents no colour: every one is a token. Phone first: one
   column at the athlete page's measure, nothing wider than the screen at
   320 px, and every button and link at least 44 px tall, for a thumb. No font
   is set here: the tokens' own body rule sets Mont. */
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--ro-paper);color:var(--ro-ink);font-size:var(--fs-0);line-height:1.4;overflow-wrap:anywhere}
.tr-wrap{max-width:640px;margin:0 auto;padding:0 var(--s2)}

/* the red bar: the White wordmark (sized by wordmark.css) and the event's name in type, one link home */
.tr-bar{background:var(--ro-red);color:var(--ro-paper);padding:var(--s1) 0}
.tr-bar__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.tr-home{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);min-height:44px;color:var(--ro-paper);text-decoration:none;
  font-size:var(--fs-1);font-weight:900;line-height:1.1}

main.tr-wrap{padding-bottom:var(--s5)}
.tr-title{margin:var(--s3) 0 var(--s1);font-size:var(--fs-3);font-weight:900;line-height:1.1}
.tr-lead{margin:0 0 var(--s2);font-size:var(--fs-1);font-weight:700;line-height:1.3}
/* the facts as label and value side by side, the labels one column wide: four lines fewer above the first button */
.tr-facts{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--s1) var(--s2);margin:0 0 var(--s2)}
.tr-facts div{display:contents}
.tr-facts dt{margin:0;color:var(--ro-dim);font-size:14px;font-weight:700}
.tr-facts dd{margin:0;font-weight:700}

.tr-section{padding:var(--s2) 0;border-top:1px solid var(--ro-line)}
.tr-section h2{margin:0 0 var(--s1);font-size:var(--fs-2);font-weight:900;line-height:1.15}
.tr-section p,.tr-over p{margin:0 0 var(--s1)}
.tr-list{margin:0;padding-left:var(--s3)}
.tr-list li{margin:0 0 4px}

/* one of RCA's two waiver forms (R93): one full-width red button to it on RCA's site, its label saying when it suits
   (red means a link, as on the front door), with a small line under the label saying where it goes; or, once its
   time is over, a line saying to use the form below. .tr-session is the same block on a page a phone kept from before
   R95 (copy.js FORMER), so its two buttons do not run together */
.tr-waiver,.tr-session{margin:var(--s2) 0}
.tr-btn{display:block;min-height:44px;padding:10px var(--s2);border-radius:var(--radius-sm);background:var(--ro-red);color:var(--ro-paper);
  text-align:center;text-decoration:none;font-weight:900}
.tr-btn small{display:block;margin-top:2px;font-size:14px;font-weight:700}
.tr-btn:hover{background:var(--ro-red-2)}
.tr-ended{font-weight:700}
.tr-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ro-red);font-weight:700}
.tr-btn:focus-visible,.tr-link:focus-visible,.tr-home:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}

.tr-foot{border-top:1px solid var(--ro-line);padding:var(--s3) 0 var(--s5);color:var(--ro-dim);font-size:14px}
.tr-foot p{margin:0 0 4px}

/* Booking (R90, R91; the booking spec 5.2): the status lines, the grid of 10-minute blocks, the confirm step, the
   confirmation and Your bookings. A status line with nothing to say takes no room. Every button is a thumb's height */
.tr-note{font-weight:700}
.tr-note:empty{display:none}
.tr-hour{margin:var(--s2) 0 0}
.tr-hour-h{margin:0 0 var(--s1);font-size:var(--fs-1);font-weight:900}
/* F12: three columns at 375 and 360 px, two at 320 px; a block's time never breaks, as body's overflow-wrap would let it */
.tr-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--s1)}
.tr-slot{min-height:56px;padding:6px 4px;border:2px solid var(--ro-red);border-radius:var(--radius-sm);background:var(--ro-paper);color:var(--ro-ink);
  font:inherit;font-size:var(--fs-0);font-weight:900;line-height:1.2;white-space:nowrap;overflow-wrap:normal;cursor:pointer}
.tr-slot small{display:block;font-size:14px;font-weight:700}
.tr-slot:disabled{border-color:var(--ro-line);color:var(--ro-dim);cursor:default}
.tr-slot[aria-pressed="true"]{background:var(--ro-red);color:var(--ro-paper)}
.tr-panel{margin:var(--s2) 0 0;padding:var(--s2);border:2px solid var(--ro-ink);border-radius:var(--radius-sm)}
.tr-panel h3,#done h3{margin:0 0 var(--s1);font-size:var(--fs-2);font-weight:900;line-height:1.15}
#done{padding-top:var(--s1)}
#done p{margin:0 0 var(--s1)}
/* the confirmation's one RCA button (#done-btn) with room under it, as the waiver block's buttons have (.tr-waiver) */
#done .tr-btn{margin:0 0 var(--s1)}
.tr-ask{font-weight:900}
.tr-acts{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s1) 0}
.tr-act,.tr-go{min-height:44px;padding:10px var(--s2);border:2px solid var(--ro-red);border-radius:var(--radius-sm);background:var(--ro-paper);
  color:var(--ro-red);font:inherit;font-weight:900;cursor:pointer}
.tr-go{background:var(--ro-red);color:var(--ro-paper)}
.tr-act:disabled,.tr-go:disabled{border-color:var(--ro-line);background:var(--ro-paper);color:var(--ro-dim);cursor:default}
/* F12: the code on one line at 320 px, large enough to read off a screenshot. 7.5vw, not the spec's 8.5vw: measured
   at 320 px, the widest code (W and M in every place) is 309 px at 8.5vw, wider than the 288 px column, and 272 px at
   7.5vw; at 360 and 375 px it still fits with room */
.tr-code{font-size:clamp(22px,7.5vw,var(--fs-3));font-weight:900;letter-spacing:.04em;white-space:nowrap;overflow-wrap:normal}
.tr-mine{margin:0 0 var(--s1);padding:0;list-style:none}
.tr-row{padding:var(--s1) 0;border-bottom:1px solid var(--ro-line)}
.tr-row .tr-when{font-weight:900;margin:0 var(--s1) 0 0}
.tr-mine-code{font-weight:900;letter-spacing:.04em;white-space:nowrap;overflow-wrap:normal}
.tr-started{display:inline-flex;align-items:center;min-height:44px;color:var(--ro-dim);font-weight:700}
.tr-slot:focus-visible,.tr-act:focus-visible,.tr-go:focus-visible,.tr-input:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}

/* /try/host: one box and its button */
.tr-check{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin:var(--s2) 0}
.tr-label{flex-basis:100%;font-weight:700}
.tr-input{flex:1 1 12rem;min-height:44px;padding:8px var(--s1);border:2px solid var(--ro-ink);border-radius:var(--radius-sm);font:inherit;
  font-size:var(--fs-1);font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.tr-answer p{margin:0 0 var(--s1);font-weight:700}