/* Site race (BRAND.md 6.27). Dark section. The form and the results share one grid cell and
   the track has a fixed height, so nothing below moves when the state changes (CLS 0).
   One red mark at most while racing: the "Poor" verdict on a lane. */
:root:not(.js) section:has(> .ws-wrap > .ws-race){ display:none; }

/* Long domain names break or get an ellipsis; they never widen the page. */
.ws-race{ display:grid; gap:var(--ws-space-5); overflow-wrap:anywhere; }
.ws-race *{ min-width:0; }
.ws-race__body{ display:grid; gap:var(--ws-space-4); align-items:start; }
@media (min-width:992px){ .ws-race__body{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--ws-space-6); } }

/* Form and results in the same cell; the hidden one keeps its height. */
.ws-race__panel{ display:grid; }
.ws-race__panel > *{ grid-area:1 / 1; min-width:0; }
.ws-race[data-state="done"] .ws-race__form,
.ws-race:not([data-state="done"]) :is(.ws-race__results,.ws-race__after){ visibility:hidden; }
/* Reserved for the tallest result (long domains, mixed sources, the read form). */
.ws-race__panel{ min-height:920px; }
@media (max-width:359.98px){ .ws-race__panel{ min-height:1060px; } }
@media (min-width:768px){ .ws-race__panel{ min-height:800px; } }
@media (min-width:992px){ .ws-race__panel{ min-height:900px; } }
@media (min-width:1200px){ .ws-race__panel{ min-height:840px; } }

.ws-race__form{ display:grid; align-content:start; gap:var(--ws-space-3); }
.ws-race__error{ min-height:2lh; font-size:var(--ws-fs-small); font-weight:600; color:var(--ws-accent-text); }
.ws-race__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ws-space-2) var(--ws-space-3); }
.ws-race__toggle{ text-transform:none; letter-spacing:0; font-size:var(--ws-fs-small); font-weight:500; color:var(--ws-fg-muted); text-align:left; }
/* While loading and racing the button goes neutral: the only red then is a "Poor" verdict. */
.ws-race:is([data-state="loading"],[data-state="racing"]) .ws-race__form [type="submit"]{
  background:none;
  border-color:var(--ws-fg-dim);
  color:var(--ws-fg-dim);
  pointer-events:none;
}

.ws-race__results{ display:grid; align-content:start; gap:var(--ws-space-3); }
.ws-race__verdict{ min-height:2lh; font-size:var(--ws-fs-h3); }
.ws-race__verdict:focus{ outline:none; }
.ws-race__verdict:focus-visible{ outline:2px solid var(--ws-focus); outline-offset:4px; }
.ws-race__table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:var(--ws-fs-small); }
.ws-race__table :is(th,td){ padding:10px 12px 10px 0; border-bottom:1px solid var(--ws-line); text-align:left; vertical-align:top; }
/* Domain names stay on one line (cut with an ellipsis, full text kept for screen readers). */
.ws-race__table thead th{ overflow:hidden; font-weight:600; color:var(--ws-fg); white-space:nowrap; text-overflow:ellipsis; }
.ws-race__table tbody th{ font-weight:500; color:var(--ws-fg-muted); }
.ws-race__source{ min-height:2lh; color:var(--ws-fg-dim); }
.ws-race__read{ gap:var(--ws-space-3); }
.ws-race__note{ color:var(--ws-fg-dim); }
.ws-race__after{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ws-space-3); }

/* Track: fixed height in every state. Under 992px it comes first, above the form. */
.ws-race__track{
  display:grid;
  gap:var(--ws-space-3);
  padding:var(--ws-space-4) var(--ws-space-3);
  border:1px solid var(--ws-line);
}
@media (max-width:991.98px){ .ws-race__track{ order:-1; } }
@media (min-width:768px){ .ws-race__track{ padding:var(--ws-space-5) var(--ws-space-4); } }
.ws-race__clock{
  font-family:var(--ws-font-display);
  font-size:var(--ws-fs-stat);
  line-height:.9;
  font-variant-numeric:tabular-nums;
}
/* Room for three steps with long domain names, so the lanes never move. */
.ws-race__steps{ height:8lh; overflow:hidden; display:grid; align-content:start; gap:4px; padding:0; list-style:none; font-size:var(--ws-fs-small); color:var(--ws-fg-muted); }
@media (min-width:768px){ .ws-race__steps{ height:6lh; } }
.ws-race__steps li{ padding-left:20px; text-indent:-20px; }
.ws-race__steps li::before{ content:"·" / ""; display:inline-block; width:20px; text-indent:0; color:var(--ws-fg-dim); }
.ws-race__steps li.is-done::before{ content:"✓" / ""; color:var(--ws-fg); }

.ws-race__lanes{ position:relative; display:grid; gap:var(--ws-space-3); }
.ws-race__lane{ --p:0; display:grid; gap:8px; }
.ws-race__lane-head{ display:flex; justify-content:space-between; gap:var(--ws-space-2); font-size:var(--ws-fs-small); font-weight:600; }
.ws-race__lane-head > :first-child{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ws-race__lane-head > :last-child{ white-space:nowrap; color:var(--ws-fg-muted); }
.ws-race__lane.is-poor .ws-race__lane-head > :last-child{ color:var(--ws-accent-text); }
.ws-race__bar{ position:relative; height:12px; background:var(--ws-line); }
.ws-race__fill{ position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 100%); background:var(--ws-fg); }
/* The first lane home stays white; the others go on in grey. */
.ws-race.has-winner .ws-race__lane:not(.is-first) .ws-race__fill{ background:var(--ws-fg-dim); }
.ws-race__lane.is-ghost .ws-race__bar{ background:none; outline:1px dashed var(--ws-line); }
.ws-race .ws-race__lane.is-ghost .ws-race__fill{ background:none; box-shadow:inset 0 0 0 1px var(--ws-fg-muted); }
.ws-race__axis{ display:flex; justify-content:space-between; font-size:12px; color:var(--ws-fg-dim); font-variant-numeric:tabular-nums; }

/* While waiting, one thin line sweeps the empty track: the only motion before the race. */
.ws-race[data-state="loading"] .ws-race__lanes::after{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:20%;
  height:1px;
  background:var(--ws-fg-muted);
  animation:ws-race-sweep 1.4s linear infinite;
}
@keyframes ws-race-sweep{ from{ transform:translateX(0); } to{ transform:translateX(400%); } }
@media (prefers-reduced-motion:reduce){
  .ws-race[data-state="loading"] .ws-race__lanes::after{ animation:none; width:100%; opacity:.4; }
}