/* Personal bests, raced. Shared by /athletics/ and /athletics/swimming/. */
.sw-board { border: 1px solid rgba(201, 164, 76, 0.45); background: #030303; }
.sw-board__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 2.4vw, 1.6rem); border-bottom: 1px solid rgba(201, 164, 76, 0.25); font: 600 0.64rem/1.3 var(--font-tech); letter-spacing: 0.2em; text-transform: uppercase; color: #C9A44C; }
.sw-board__clock { font: 700 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--font-tech); letter-spacing: 0.02em; color: #FAF8F2; font-variant-numeric: tabular-nums; }
.sw-board__again { justify-self: end; padding: 0.55rem 0.8rem; background: transparent; border: 1px solid rgba(201, 164, 76, 0.5); color: #FAF8F2; font: 600 0.6rem/1 var(--font-tech); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 250ms, color 250ms; }
.sw-board__again:hover, .sw-board__again:focus-visible { background: #C9A44C; color: #000; outline: none; }
.sw-lanes { list-style: none; margin: 0; padding: 0; }
.sw-lane { display: grid; grid-template-columns: 2.4rem 8.5rem minmax(0, 1fr) 6.5rem; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.2rem); padding: 0.75rem clamp(1rem, 2.4vw, 1.6rem); border-bottom: 1px dashed rgba(201, 164, 76, 0.28); }
.sw-lane:last-child { border-bottom: 0; }
.sw-lane__no { font: 600 0.8rem/1 var(--font-tech); color: #C9A44C; }
.sw-lane__name { font: 600 0.74rem/1.2 var(--font-tech); letter-spacing: 0.14em; text-transform: uppercase; color: #FAF8F2; }
.sw-lane__water { position: relative; display: block; height: 30px; background: #000; border: 1px solid rgba(201, 164, 76, 0.2); }
.sw-lane__water::after { content: "50m"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font: 600 0.54rem/1 var(--font-tech); letter-spacing: 0.14em; color: #FAF8F2; }
.sw-lane__swim { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(201, 164, 76, 0.35), #E0BE67); box-shadow: 2px 0 14px rgba(224, 190, 103, 0.7); }
.sw-lane__time { font: 700 clamp(1.3rem, 2.4vw, 1.9rem)/1 var(--font-tech); letter-spacing: -0.01em; text-align: right; color: #FAF8F2; opacity: 0; transition: opacity 300ms ease, color 300ms ease; }
.sw-lane.is-done .sw-lane__time { opacity: 1; }
.sw-lane:first-child.is-done .sw-lane__time { color: #C9A44C; }
@media (max-width: 560px) {
  .sw-lane { grid-template-columns: 1.4rem minmax(0, 1fr) auto; }
  .sw-lane__water { grid-column: 1 / -1; grid-row: 2; }
  .sw-board__top { grid-template-columns: 1fr auto; }
  .sw-board__clock { grid-row: 1; grid-column: 2; }
  .sw-board__top > span:first-child { grid-column: 1; }
  .sw-board__again { grid-column: 1 / -1; justify-self: start; }
}