/* X96 item 1b - the public schedule page. C5 (4 Nov, ruling 109): this stylesheet is also the front door's Schedule section's, so what is
   the PAGE's own (its body, its bar, its title) is scoped to .sp-page / .sp-bar / .sp-wrap and nothing here restyles an element bare.
   Composes the shared tokens (screens/shared/ro-tokens.css) and invents no colour: every
   one is a token. Mobile first (375 px), one column at any width down to 320px, no fixed width, no horizontal scroll: a lane is
   its number, then the name and the club under it, and long names wrap. Words carry every state; no colour is the only signal. */
/* the sticky box above is up to about 105 px tall on a phone; a control that keyboard focus scrolls to the top stops below it */
html{scroll-padding-top:8rem}
[hidden]{display:none !important}
/* the standalone page's own body (index.html has class="sp-page"); the front door keeps its own */
.sp-page{margin:0;background:var(--ro-paper);color:var(--ro-ink);font-size:var(--fs-0);line-height:1.4;overflow-wrap:anywhere}
.sp-wrap{max-width:720px;margin:0 auto;padding:0 var(--s2)}

/* the red bar: the White wordmark (R19, sized by wordmark.css) and the event's name in type */
.sp-bar{background:var(--ro-red);color:var(--ro-paper);padding:var(--s1) 0}
.sp-bar__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.sp-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}

/* NEXT ON THE ERGS: sticky at the top of the screen while the page scrolls. The lines are next-start.js's; the first is the large one.
   Tabular figures, so a ticking count does not shift the line each second */
.sp-next{position:sticky;top:0;z-index:2;padding:var(--s1) max(var(--s2), calc((100% - 720px) / 2));background:var(--ro-neutral);
  border-bottom:2px solid var(--ro-ink);border-left:6px solid var(--ro-red)}
.sp-next__line{margin:4px 0 0;color:var(--ro-dim);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.sp-next__line:first-child{margin-top:0;color:var(--ro-ink);font-size:var(--fs-0);font-weight:900;line-height:1.25}

.sp-title{margin:var(--s3) 0 0;font-size:var(--fs-3);font-weight:900;line-height:1.1}
.sp-lead{padding:var(--s2) 0 0}
.sp-lead__line{margin:0 0 var(--s1);font-weight:700}
.sp-rehearsal{padding:4px var(--s2);background:var(--ro-yellow);color:var(--ro-ink);font-weight:900}
.sp-updated{margin:0 0 var(--s2);color:var(--ro-dim);font-size:14px;font-weight:700}

/* the search: a labelled box and a clear button, each a 44 px touch target; the count is a polite status under them */
.sp-search{margin:0 0 var(--s2)}
.sp-search__label{display:block;margin:0 0 4px;font-weight:900}
.sp-search__row{display:flex;gap:var(--s1);align-items:stretch}
.sp-search__box{flex:1 1 0;min-width:0;min-height:44px;padding:0 var(--s2);border:2px solid var(--ro-ink);border-radius:var(--radius-sm);
  background:var(--ro-paper);color:var(--ro-ink);font:inherit}
.sp-search__box:focus{outline:3px solid var(--ro-blue);outline-offset:2px}
.sp-search__clear{flex:0 0 auto;min-height:44px;padding:0 var(--s2);border:0;border-radius:var(--radius-sm);background:var(--ro-neutral);
  color:var(--ro-red);font:inherit;font-weight:900;cursor:pointer}
.sp-found{margin:4px 0 0;min-height:1.4em;color:var(--ro-dim);font-size:14px;font-weight:700}

/* the list: one block per event (a bar with its name and how many waves, from when), then its waves. Long names wrap on either page */
.sp-waves{padding:0 0 var(--s5);overflow-wrap:anywhere}
/* the jump buttons: one per event, each a 44 px touch target; a jump lands below the sticky "next" box */
.sp-jump{display:flex;flex-wrap:wrap;gap:var(--s1);margin:0 0 var(--s3);padding:0;list-style:none}
.sp-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border:2px solid var(--ro-ink);border-radius:var(--radius-sm);
  color:var(--ro-ink);text-decoration:none;font-weight:900;font-variant-numeric:tabular-nums}
.sp-jump a:focus-visible{outline:3px solid var(--ro-blue);outline-offset:2px}
.sp-event{margin:var(--s4) 0 0;scroll-margin-top:9rem}
.sp-event:first-child{margin-top:0}
.sp-event__head{padding:var(--s1) var(--s2);background:var(--ro-ink);color:var(--ro-paper)}
.sp-event__title{margin:0;font-size:var(--fs-2);font-weight:900;line-height:1.15}
.sp-event__sub{margin:0;font-size:14px;font-weight:700}

/* one section per wave: its time and its label on one line (the time first, as a regatta's schedule sets them), then the lanes */
.sp-wave{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2);align-items:baseline;padding:var(--s2) 0;border-top:2px solid var(--ro-ink)}
.sp-event__head + .sp-wave{border-top:0}
.sp-wave__time{grid-column:1;grid-row:1;margin:0;font-size:var(--fs-1);font-weight:900;font-variant-numeric:tabular-nums}
.sp-wave__title{grid-column:2;grid-row:1;margin:0;font-size:var(--fs-1);font-weight:900;line-height:1.15}
.sp-wave__title:first-child{grid-column:1 / -1}
.sp-wave__planned{color:var(--ro-dim);font-size:14px;font-weight:700}
.sp-wave__note,.sp-rows{grid-column:1 / -1}
.sp-wave__note{margin:var(--s1) 0 0;color:var(--ro-dim);font-weight:700}
.sp-rows{margin:var(--s1) 0 0}

/* the lanes: never numbered by the list itself. A row is a grid: the lane number's own column, then the name and club, which can
   shrink so a long name wraps and never runs off the screen */
.sp-lanes{margin:0;padding:0;list-style:none}
.sp-lane{display:grid;grid-template-columns:3ch minmax(0,1fr);align-items:start;gap:var(--s1) var(--s2);margin:0;padding:var(--s1) 0;
  border-bottom:1px solid var(--ro-line)}
.sp-lane__no{font-size:var(--fs-1);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-lane__who{min-width:0}
.sp-lane__who p{margin:0;max-width:none}
.sp-lane__name{font-weight:900}
.sp-lane__club{color:var(--ro-dim);font-weight:700}

/* a draw sheet on a wider screen: the front row (lanes 1 to 6) and the back row (7 and up) side by side, and in each row the lane, the
   athlete and the club in three columns. A phone is one column: the lane, then the name with the club under it. A row with nobody
   in it is not drawn, so a wave with only one row keeps the left half */
@media (min-width:640px){
  .sp-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s4);align-items:start}
  .sp-lane{grid-template-columns:4ch minmax(0,1fr)}
  .sp-lane__who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
}