/* FIP Radar — Danish-scene signup tracker. Dark-mode, tokens from components.css. */

/* The editorial t-header (t-eyebrow/t-title/t-sub) reads its accent colors from
   the .om-page token family, which is scoped per-tab in rankings.css. The radar
   panel isn't a .t-page, so define the same tokens here or the headline accent
   and hairline silently fall back to nothing. */
.tab-panel[data-tab="fip-radar"]{
  --om-blue:#52e1fe;
  --om-amber:var(--accent);
  --om-hair:rgba(255,255,255,0.06);
}

/* Shared FIP switcher — styled as the page eyebrow/kicker (matches om-eyebrow),
   not a heavy pill row. Active tab gets the blinking dot + cyan; the other is a
   dim, clickable sibling. Used by both FIP Radar and FIP Rangliste. */
.fip-eyebrow{font-family:var(--font-mono),monospace;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;display:inline-flex;align-items:center;
  gap:10px;margin:0 0 14px;}
.fip-eyebrow-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);
  text-decoration:none;transition:color .15s;}
.fip-eyebrow-link:hover{color:var(--om-blue,#52e1fe);}
.fip-eyebrow-link.active{color:var(--om-blue,#52e1fe);}
.fip-eyebrow-link .om-eyebrow-dot{width:6px;height:6px;border-radius:50%;
  background:var(--om-blue,#52e1fe);box-shadow:0 0 10px var(--om-blue,#52e1fe);
  animation:om-blink 1.6s ease-in-out infinite;}
.fip-eyebrow-sep{color:var(--text-dim);}


.radar-card{background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 14px;box-shadow:var(--card-inset);}
.radar-card--live{border-color:rgba(255,107,107,.4);}
/* --- Champion: a tracked pair that won the title. Sits inline in the card
   header next to the status chip. Gold is the app's reserved medal colour. --- */
.radar-champ{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
}
/* Gently breathing trophy glow. */
.radar-champ-trophy{
  font-size:13px;line-height:1;flex-shrink:0;
  animation:champ-glow 2.6s ease-in-out infinite;
}
@keyframes champ-glow{
  0%,100%{filter:drop-shadow(0 0 1px rgba(255,205,130,.5));}
  50%{filter:drop-shadow(0 0 4px rgba(255,195,115,.95)) drop-shadow(0 0 9px rgba(255,165,70,.55));}
}
@media (prefers-reduced-motion:reduce){.radar-champ-trophy{animation:none;}}
.radar-champ-names{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;line-height:1.2;color:var(--gold);
  text-shadow:0 1px 3px rgba(6,10,18,.7);
}
.radar-champ-names .radar-player{color:inherit;}
.radar-champ-names a{color:inherit;text-decoration:none;}
.radar-champ-names a:hover{text-decoration:underline;text-underline-offset:2px;}
.radar-champ-and{font-weight:500;color:var(--gold);opacity:.72;}
.radar-champ-sep2{color:rgba(255,184,106,.55);margin:0 2px;}
@media (max-width:520px){
  .radar-champ{position:static;max-width:none;margin:2px 0 10px;}
}
.radar-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.radar-cat{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-sm);color:#0a1020;}
.radar-cat--bronze{background:linear-gradient(135deg,#cd7f32,#e6a463);}
.radar-cat--silver{background:linear-gradient(135deg,#9aa6bc,var(--silver));}
.radar-cat--gold{background:linear-gradient(135deg,#e0a23a,var(--gold));}
.radar-cat--platinum{background:linear-gradient(135deg,#b8c4d6,#e8eef7);}
.radar-cat--premier{background:linear-gradient(135deg,#7b5cff,#a98bff);color:#fff;}
.radar-cat--promises,.radar-cat--na{background:var(--bg-raised);color:var(--text-muted);}

/* ── Premier Padel — these events sit outside the FIP-Tour ladder (Bronze→
   Platinum) and carry their own identity. The official logo is black+gold on
   white, so it gets its own white brand chip (a seam-free extension of the
   logo's own background) with the tour tier (Major / P1 / P2) alongside. */
.radar-pp{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;
  border-radius:var(--radius-sm);line-height:1;background:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 3px rgba(0,0,0,.35);}
.radar-pp-logo{height:15px;width:auto;display:block;}
/* Tier label (Major / P1 / P2 / Finals) — neutral for now; the official brand
   has no published per-tier colour palette, so we keep one understated pill. */
.radar-pp-tier{font-family:var(--font-mono),monospace;font-weight:800;font-size:.6rem;
  letter-spacing:.04em;color:#0d1016;padding:2px 7px;border-radius:5px;
  background:rgba(13,16,22,.09);text-transform:uppercase;}
/* ── Status signal — a leading state dot + uppercase micro-label; no chip
   (dropped the fill/border/pill to match the "Om x dage" kicker language).
   "Åben" breathes (green ping ring), "Lukket" is a muted hollow lock-ring,
   "Live" shares the ping in red. The ping reuses --rd-ping-c per state so one
   keyframe drives every colour. ── */
.radar-status{display:inline-flex;align-items:center;gap:6px;line-height:1;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);}
.radar-status::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;}
.radar-status--registration_open{color:#34d27b;--rd-ping-c:rgba(52,210,123,.55);}
.radar-status--registration_open::before{animation:rd-ping 2.4s cubic-bezier(.36,0,.2,1) infinite;}
.radar-status--registration_closed{color:var(--text-dim);}
.radar-status--registration_closed::before{background:transparent;
  border:1.5px solid currentColor;width:7px;height:7px;}
/* live: the bare spinning padel ball IS the signal (see .rd-live) */
.radar-status--live{color:#ff6b6b;}
.radar-status--live::before{display:none;}

/* ── Live "rally": a padel ball crosses the net, back and forth ── */
.rd-rally{--rd-travel:21px;position:relative;width:32px;height:13px;flex-shrink:0;align-self:center;}
.rd-rally .rd-net{position:absolute;left:50%;top:1px;bottom:1px;width:1.5px;margin-left:-.75px;
  background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px);opacity:.4;}
.rd-rally .rd-ball{position:absolute;top:1px;left:0;
  animation:rd-rally 1.3s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes rd-rally{0%{left:0;}45%,50%{left:var(--rd-travel);}95%,100%{left:0;}}

/* the padel ball — specular highlight, inset shading for volume, curved double seam */
.rd-ball{width:11px;height:11px;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 33% 27%,#f6ff9c 0%,#daf64a 38%,#aad400 78%,#88b400 100%);
  box-shadow:inset -1.6px -1.6px 2.5px rgba(20,50,0,.32),
             inset 1.4px 1.4px 1.6px rgba(255,255,255,.6),
             0 0 5px rgba(200,240,42,.4);}
.rd-ball::before,.rd-ball::after{content:"";position:absolute;width:15px;height:15px;
  border-radius:50%;border:1.3px solid rgba(255,255,255,.92);}
.rd-ball::before{top:-9.5px;left:-4px;}
.rd-ball::after{bottom:-9.5px;right:-4px;}

/* ── Header live signal — a padel ball spinning in place under a fixed light,
   marking the tournament as tracked & ongoing right now. Unlike the match-row
   rally (whole ball darts across a net) only the SEAM rotates: the shaded
   sphere + highlight stay put so it reads as a clean spin, not a tumble. A soft
   red "on-air" glow ties it to the live state without a pill or hard ring. ── */
.rd-live{position:relative;width:13px;height:13px;flex-shrink:0;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;}
/* the sphere — fixed light + volume, plus the live-red tally glow (option A) */
.rd-live-ball{width:11px;height:11px;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 33% 27%,#f6ff9c 0%,#daf64a 38%,#aad400 78%,#88b400 100%);
  box-shadow:inset -1.6px -1.6px 2.5px rgba(20,50,0,.32),
             inset 1.4px 1.4px 1.6px rgba(255,255,255,.6),
             0 0 6px 1px rgba(255,107,107,.6);
  animation:rd-live-glow 2.2s ease-in-out infinite;}
/* the rotating seam — two arcs sweeping around the ball centre, clipped by it */
.rd-live-seam{position:absolute;inset:0;animation:rd-live-spin 2s linear infinite;}
.rd-live-seam::before,.rd-live-seam::after{content:"";position:absolute;width:15px;height:15px;
  border-radius:50%;border:1.3px solid rgba(255,255,255,.92);}
.rd-live-seam::before{top:-9.5px;left:-4px;}
.rd-live-seam::after{bottom:-9.5px;right:-4px;}
@keyframes rd-live-spin{to{transform:rotate(360deg);}}
@keyframes rd-live-glow{0%,100%{box-shadow:inset -1.6px -1.6px 2.5px rgba(20,50,0,.32),inset 1.4px 1.4px 1.6px rgba(255,255,255,.6),0 0 5px 0 rgba(255,107,107,.45);}50%{box-shadow:inset -1.6px -1.6px 2.5px rgba(20,50,0,.32),inset 1.4px 1.4px 1.6px rgba(255,255,255,.6),0 0 8px 2px rgba(255,107,107,.75);}}

/* compact variant for the match-row outcome cell (28px wide) */
.rd-rally--sm{--rd-travel:15px;width:24px;height:11px;}
.rd-rally--sm .rd-ball{width:8px;height:8px;top:1.5px;}
.rd-rally--sm .rd-ball::before,.rd-rally--sm .rd-ball::after{width:11px;height:11px;border-width:1.1px;}
.rd-rally--sm .rd-ball::before{top:-7px;left:-3px;}
.rd-rally--sm .rd-ball::after{bottom:-7px;right:-3px;}

@media (prefers-reduced-motion:reduce){
  .rd-rally .rd-ball{animation:none;left:calc(var(--rd-travel) / 2);}
  .rd-live-seam,.rd-live-ball{animation:none;}}
@keyframes rd-ping{
  0%{box-shadow:0 0 0 0 var(--rd-ping-c,rgba(52,210,123,.55));}
  70%{box-shadow:0 0 0 7px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

/* ── Live countdown ticker — shared by the start countdown (card head) and the
   registration-deadline row. Monospace, tabular-nums so digits don't jitter. ── */
/* Start countdown — kicker stack: a tiny "STARTER OM" label over the digits,
   right-aligned, no chip (mirrors the signup-card "Om x dage" treatment). */
.radar-card-head .rd-cd{margin-left:auto;}
.rd-cd{display:inline-flex;flex-direction:column;align-items:flex-end;
  text-align:right;line-height:1.15;white-space:nowrap;}
.rd-cd-k{font-family:var(--font-mono),monospace;font-size:8px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;}
/* once the countdown collapses to the matchday badge, the kicker is redundant */
.rd-cd:has(.rd-timer[data-state="now"]) .rd-cd-k{display:none;}
.rd-timer{display:inline-flex;align-items:center;gap:7px;line-height:1;
  font-family:var(--font-mono),monospace;font-variant-numeric:tabular-nums;}
.rd-seg{display:inline-flex;align-items:baseline;gap:2px;}
.rd-num{font-size:.92rem;font-weight:700;color:var(--accent);letter-spacing:.01em;}
.rd-u{font-size:.6rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;}
.rd-timer-fallback{font-size:.8rem;font-weight:600;color:var(--accent);}
/* First-match line — FIP's order of play, which REPLACES the countdown whenever a
   real match time is known. Same slot, same voice as the countdown's own text. */
.rd-oop{font-family:var(--font-mono),monospace;font-size:.8rem;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;}
/* matchday: the start countdown collapses to a single glowing badge */
.rd-now{display:inline-flex;align-items:center;gap:6px;line-height:1;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;color:#0a1020;
  background:linear-gradient(135deg,var(--accent),#ffd27a);
  box-shadow:0 0 14px rgba(255,181,71,.35);animation:rd-now-glow 2.4s ease-in-out infinite;}
@keyframes rd-now-glow{0%,100%{box-shadow:0 0 11px rgba(255,181,71,.28);}
  50%{box-shadow:0 0 22px rgba(255,181,71,.6);}}
.rd-now--closed{background:var(--bg-raised);color:var(--text-dim);box-shadow:none;animation:none;}
/* Editorial title: the anchor of the header now the tier badge is gone —
   bolder, tighter, display-font. Applies to every card, poster or not. */
.radar-card-title{font-family:var(--font-display);font-size:1.24rem;font-weight:700;
  letter-spacing:-.01em;line-height:1.15;color:var(--text);margin-bottom:8px;}
.radar-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:var(--text-muted);font-size:.88rem;margin-bottom:12px;}
.radar-card-meta .flag{border-radius:3px;}
.radar-meta-sep{color:var(--text-dim);opacity:.7;}
/* ── Distance-map widget (event geocoding) ── */
.radar-card-top{display:flex;gap:16px;align-items:center;margin-bottom:14px;}
.radar-card-topmain{flex:1;min-width:0;}
/* ── Event poster as a crisp portrait thumbnail in the header [TEST]. Replaces the
   old full-bleed background wash, which on this ultra-wide/short card zoomed the
   poster into an extreme face close-up. Scoped to .radar-card--poster so non-poster
   cards stay unchanged; object-fit:cover on a ~0.71 poster-aspect box shows the
   whole poster with minimal crop, and the thumb drives the header height. */
.radar-card-poster{flex:0 0 88px;width:88px;height:124px;object-fit:cover;
  object-position:center;display:block;border-radius:10px;
  border:1px solid var(--card-border);align-self:center;background:var(--card);
  box-shadow:0 4px 14px rgba(0,0,0,.35);}
/* Give the thumbnail a little air top/bottom so it floats in the header rather than
   filling it edge-to-edge — the height is earned by the poster, not blank padding. */
.radar-card--poster .radar-card-top{min-height:140px;}
/* Header type optimized for the taller poster card: a bolder, larger title that holds
   its own against the poster thumbnail, plus a clear meta hierarchy — the city reads
   bright/semibold, the ISO date range stays muted. */
.radar-card--poster .radar-card-title{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;}
.radar-card--poster .radar-card-meta{font-size:.95rem;}
.radar-card--poster .radar-where{color:var(--text);font-weight:600;}
.radar-map{flex:0 0 200px;width:200px;position:relative;align-self:center;}
.radar-map svg{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--card-border);}
.radar-map-ocean{fill:rgba(82,225,254,0.03);}
.radar-map-land{fill:rgba(147,166,188,0.10);stroke:none;}
/* The event location pulses blue at its spot on the world map. */
.radar-map-evt-ring{fill:none;stroke:var(--om-blue,#52e1fe);stroke-width:1.3;opacity:.7;
  transform-box:fill-box;transform-origin:center;animation:radar-map-ping 2.4s ease-out infinite;}
@keyframes radar-map-ping{0%{transform:scale(1);opacity:.7;}70%{transform:scale(3);opacity:0;}100%{opacity:0;}}
.radar-map-evt{fill:var(--om-blue,#52e1fe);filter:drop-shadow(0 0 5px var(--om-blue,#52e1fe));}
@media (max-width:600px){
  /* Stack + stretch: without align-items:stretch the column keeps the
     row layout's align-items:center, which shrinks .radar-card-topmain to
     its widest row and centres it — visible on live/finished cards whose
     title is narrower than the card (upcoming cards hide it behind a wide
     countdown row). */
  .radar-card-top{flex-direction:column;align-items:stretch;}
  .radar-map{display:none;}  /* hide the distance map on mobile */
  /* Poster cards keep a compact side-by-side (thumb + title) on mobile instead of
     stacking — the map is hidden, so the thumbnail becomes the header's left anchor.
     Smaller thumb + title so it fits a narrow column cleanly. */
  .radar-card--poster .radar-card-top{flex-direction:row;align-items:center;gap:12px;min-height:0;}
  .radar-card-poster{flex-basis:64px;width:64px;height:90px;box-shadow:0 3px 10px rgba(0,0,0,.32);}
  .radar-card--poster .radar-card-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;}
}
@media (prefers-reduced-motion:reduce){
  .radar-map-evt-ring{animation:none;opacity:0;}
}
/* ── Registration-deadline countdown — a de-boxed footer row (no chip, no left
   rule) split from the card body by the same hairline the signup cards use.
   A leading dot + the digits carry the urgency ramp: green → amber → red. ── */
.rd-deadline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.82rem;color:var(--text-muted);margin:0 0 12px;
  padding:11px 0 0;border-top:1px solid var(--divider);transition:color .3s;}
.rd-deadline-lbl{display:inline-flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);}
.rd-deadline-lbl::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);flex-shrink:0;transition:background .3s;}
.rd-deadline-abs{margin-left:auto;font-family:var(--font-mono),monospace;
  font-size:.72rem;letter-spacing:.02em;color:var(--text-dim);}
.rd-deadline[data-urgency="far"] .rd-deadline-lbl::before{background:#34d27b;}
.rd-deadline[data-urgency="far"] .rd-num{color:#34d27b;}
.rd-deadline[data-urgency="soon"] .rd-deadline-lbl::before{background:var(--accent);}
.rd-deadline[data-urgency="soon"] .rd-num{color:var(--accent);}
.rd-deadline[data-urgency="urgent"] .rd-deadline-lbl::before{background:#ff6b6b;}
.rd-deadline[data-urgency="urgent"] .rd-deadline-lbl,
.rd-deadline[data-urgency="urgent"] .rd-num{color:#ff6b6b;}

@media (prefers-reduced-motion:reduce){
  .radar-status::before,.rd-now,.rd-deadline{animation:none!important;}
}
.radar-link{color:var(--accent);text-decoration:none;font-weight:600;}
.radar-link:hover{text-decoration:underline;}

/* Card action row — primary "Startfelt" (amber) + ghost external link */
.radar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--divider);}
.radar-act{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  padding:8px 15px;border-radius:var(--radius-sm);border:1px solid var(--card-border);
  background:transparent;color:var(--text-muted);cursor:pointer;text-decoration:none;line-height:1;
  transition:border-color .15s,color .15s,background .15s;}
.radar-act svg{flex-shrink:0;opacity:.9;}
.radar-act--field{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim);}
.radar-act--field:hover{background:rgba(255,181,71,0.22);border-color:var(--accent);}
.radar-act--ext{color:var(--text-muted);}
.radar-act--ext:hover{color:var(--accent);border-color:var(--accent-border);}
/* No harvested bracket (e.g. FIP Promises PDF-only draws) → greyed, not clickable. */
.radar-act--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* ── "Se tilmeldinger" overlay (inner content; chrome reuses .lab-ms-*) ── */
.lab-ms-sched{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.04em;
  color:var(--text-dim);margin-top:8px;}
/* Gender toggle — monospace/amber to match the sheet's kicker + rail vocabulary */
.fipreg-toggle{display:inline-flex;gap:2px;background:rgba(255,255,255,0.02);
  border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:3px;margin:6px 0 20px;}
.fipreg-tab{background:none;border:0;cursor:pointer;font-family:var(--font-mono),monospace;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);padding:8px 16px;border-radius:6px;transition:color .15s,background .15s;}
.fipreg-tab:hover{color:var(--text-muted);}
.fipreg-tab.is-active{color:var(--accent);background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px var(--accent-border);}
.fipreg-onegender{font-family:var(--font-mono),monospace;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:6px 0 16px;}
.fipreg-list{display:flex;flex-direction:column;}
.fipreg-row{display:grid;grid-template-columns:30px 1fr auto 16px;align-items:center;gap:12px;
  padding:9px 10px;border-radius:var(--radius-sm);border-bottom:1px solid var(--divider,var(--card-border));
  cursor:pointer;transition:background .15s,border-color .15s;}
.fipreg-row:last-child{border-bottom:0;}
.fipreg-row:hover{background:rgba(255,255,255,.04);}
.fipreg-row:focus-visible{outline:2px solid var(--accent-border);outline-offset:-2px;}
.fipreg-row.is-open{background:var(--accent-dim);}
.fipreg-row--tracked{background:rgba(255,181,71,.07);border:1px solid var(--accent-border);
  border-radius:var(--radius-sm);}
.fipreg-row--tracked:hover{background:rgba(255,181,71,.12);}
.fipreg-row--tracked.is-open{background:rgba(255,181,71,.14);}
.fipreg-chev{width:7px;height:7px;border-right:2px solid var(--text-dim);
  border-bottom:2px solid var(--text-dim);transform:rotate(45deg);position:relative;top:-2px;
  justify-self:center;transition:transform .2s ease,border-color .2s;}
.fipreg-row:hover .fipreg-chev{border-color:var(--text-muted);}
.fipreg-row.is-open .fipreg-chev{transform:rotate(-135deg);top:1px;border-color:var(--accent);}
.fipreg-seed{font-family:var(--font-mono),monospace;font-size:.82rem;font-weight:800;
  color:var(--text-dim);text-align:center;}
.fipreg-row--tracked .fipreg-seed{color:var(--accent);}
.fipreg-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.fipreg-pl{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;font-size:.92rem;}
.fipreg-pl a{color:inherit;text-decoration:none;}
.fipreg-pl a:hover{color:var(--accent);}
.fipreg-rank{color:var(--text-dim);font-size:.74rem;font-family:var(--font-mono),monospace;}
.fipreg-sep{color:var(--text-dim);}
.fipreg-pts{font-family:var(--font-mono),monospace;font-size:.82rem;font-weight:700;
  color:var(--text-muted);white-space:nowrap;}
.fipreg-empty{color:var(--text-dim);font-size:.9rem;padding:24px 4px;text-align:center;}
.fipreg-loading{display:flex;flex-direction:column;gap:10px;padding-top:8px;}

.radar-pairs{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--card-border);padding-top:12px;}
.radar-gengroup{display:flex;flex-direction:column;gap:6px;}
.radar-genh{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.radar-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.radar-player{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;}
.radar-player a{color:inherit;text-decoration:none;}
.radar-player a:hover{color:var(--accent);}
.radar-player--partner{color:var(--text-muted);font-weight:500;}
.flag--xs{width:18px;height:auto;border-radius:2px;}
.radar-pair-sep{color:var(--text-dim);}
/* Junior age-category heading (U12-U18), once per contiguous run of same-category
   pairs (fip_radar._pairs sorts age-first so a run is always contiguous) — replaces
   the old per-row kicker the moment a card has more than one category. Still an
   uppercase kicker, NOT a chip — this card is deliberately pill-free (status /
   countdown / deadline all read as kickers), so a badge here would fight the
   established language. Absent for seniors (no heading, no empty element).
   ⚠️ NAMED .radar-agehead, not .radar-cat — .radar-cat is already the event TIER badge
   (Bronze/Silver/Gold/Promises) declared near the top of this file; reusing it silently
   overrode that badge's colour on every card.
   Smaller than .radar-genh (the gender header above it) so it reads as subordinate,
   with its own top margin to separate one age group from the previous one's rows.
   --text-muted, not --text-dim: dim fails AA on --card at this size (same note as
   .rd-* below) — the first cut used dim at .62rem and was invisible in practice. */
.radar-agehead{margin-top:6px;font-family:var(--font-mono),monospace;font-size:.64rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.radar-agehead:first-child{margin-top:0;}
/* Journey-band reuse (.radar-band__head, above the pair title): that container
   is already `display:flex;flex-direction:column;gap:4px` (see the
   .radar-band__head rule near the top of the signal-feed band section), so
   the flex gap handles separation and the entrants-list margin-top would
   just double it up. */
.radar-band__head .radar-agehead{margin-top:0;}
/* Finished event, entrant with no matches: never played (withdrew / no show). */
.radar-pair--dnp{opacity:.5;}
.radar-dnp{display:inline-flex;align-items:center;font-size:.68rem;font-weight:600;
  color:var(--text-dim);background:var(--bg-raised);border-radius:999px;
  padding:2px 8px;margin-left:2px;letter-spacing:.02em;}

.radar-past{margin-top:20px;}
.radar-past>summary{cursor:pointer;color:var(--text-muted);font-weight:600;padding:10px 0;
  list-style:none;}
.radar-past>summary::-webkit-details-marker{display:none;}
.radar-past>summary::before{content:"▸ ";color:var(--accent);}
.radar-past[open]>summary::before{content:"▾ ";}

/* current FIP rank beside a name */
.radar-rank{font-size:.74rem;font-weight:700;color:var(--text-dim);
  font-family:var(--font-mono),monospace;}

/* result chip: in / out / champion */
.radar-result{display:inline-flex;align-items:center;font-size:.74rem;font-weight:700;
  padding:2px 9px;border-radius:999px;margin-left:2px;letter-spacing:.01em;}
.radar-result--in{color:#4ade80;background:rgba(74,222,128,.12);}
.radar-result--out{color:var(--text-muted);background:var(--bg-raised);}
.radar-result--pending{color:var(--text-dim);background:var(--bg-raised);}

/* ── Full-width feed ── */
/* No max-width: the tabs + event cards fill the content column to the right
   edge, matching the full-bleed "Seneste tilmeldinger" carousel above them
   (previously capped at 860px, which left dead space on the right). */
.radar-feed--full{max-width:none;}
.radar-sec-lbl{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:4px 0 12px;}
.radar-sec-lbl:not(:first-child){margin-top:24px;}
.radar-sec-lbl--live{color:#ff6b6b;}

/* ── Expandable pair (inline match list) ── */
.radar-pair-x{border-radius:var(--radius-sm);}
.radar-pair-x>summary{cursor:pointer;list-style:none;}
.radar-pair-x>summary::-webkit-details-marker{display:none;}
.radar-pair-x>summary:hover{color:var(--text);}
.radar-pair-x>summary .radar-expand{margin-left:auto;color:var(--text-dim);font-size:.78rem;
  transition:transform .15s;}
.radar-pair-x[open]>summary .radar-expand{transform:rotate(180deg);}
/* ── Round-grouped matches: one header per round, pairs stacked beneath ── */
.rd-rgroup{display:flex;flex-direction:column;}
.rd-rgroup>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:5px 0;color:var(--text-muted);}
.rd-rgroup>summary::-webkit-details-marker{display:none;}
.rd-rgroup>summary:hover{color:var(--text);}
.rd-rgh-lbl{font-size:.74rem;font-weight:700;letter-spacing:.03em;}
.rd-rgroup>summary .radar-expand{margin-left:auto;color:var(--text-dim);font-size:.78rem;
  transition:transform .15s;}
.rd-rgroup[open]>summary .radar-expand{transform:rotate(180deg);}
.rd-rgmatches{display:flex;flex-direction:column;gap:10px;margin:2px 0 6px;
  padding:6px 0 4px 12px;border-left:2px solid var(--card-border);}

/* ── Match scoreboard: broadcast-style two-row result inside a round group.
   Tracked pair on top, opponent below, per-set columns on the right. A green/
   red left edge (win/loss from our perspective) plus a lifted winner row carry
   the outcome; each won set is highlighted. Live matches drop the edge/lift and
   run the rally ball in a left lane instead. ── */
.sb{position:relative;display:flex;flex-direction:column;gap:1px;padding-left:11px;
  border-radius:9px;}
.sb::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;}
.sb--win::before{background:#4ade80;}
.sb--loss::before{background:#ff6b6b;}
.sb--live{padding-left:38px;}
.sb--live::before{display:none;}
.sb-live-lane{position:absolute;left:4px;top:0;bottom:0;display:flex;align-items:center;}
/* Rotate the rally 90° so the ball travels up/down (between the two team rows)
   instead of left↔right — reads as a vertical rally in the score column. */
.sb-live-lane .rd-rally{transform:rotate(90deg);}

.sb-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:6px 8px 6px 10px;border-radius:7px;}
.sb-row--winner{background:rgba(255,255,255,.04);}

/* Schedule "when" line — same secondary-metadata voice as the #rank chips
   (var(--text-dim), 600) so it reads as a sibling of the scoreboard text, not
   a foreign pale label. Sans (prose), centered between the two team rows. */
.sb-mid{
  text-align:center;
  padding:2px 0 3px;
  font-size:0.72rem;line-height:1.2;
  font-weight:600;letter-spacing:.01em;
  color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-mid:empty{display:none;}   /* no schedule text resolved → no stray gap */

.sb-team{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;
  font-size:.9rem;line-height:1.3;}
.sb-team .flag--xs{flex:none;}
.sb-nm{color:var(--text);font-weight:600;text-decoration:none;}
a.sb-nm:hover{color:var(--accent);}
.sb-nm--partner{color:var(--text-muted);font-weight:500;}
.sb-sep{color:var(--text-dim);}
.sb-rk{color:var(--text-dim);font-size:.74rem;font-weight:600;font-family:var(--font-mono),monospace;}
.sb-row--loser .sb-nm{color:var(--text-muted);font-weight:500;}
.sb-row--loser .sb-nm--partner{color:var(--text-dim);}

.sb-sets{display:flex;gap:4px;flex:none;}
.sb-set{display:flex;align-items:center;justify-content:center;min-width:24px;height:26px;
  border-radius:5px;font-family:var(--font-mono),monospace;font-weight:700;font-size:.94rem;
  font-variant-numeric:tabular-nums;color:var(--text-muted);}
.sb-set--won{color:var(--text);background:rgba(255,255,255,.07);}
.sb-row--winner .sb-set--won{color:#0a1020;background:#4ade80;}
.sb-row--loser .sb-set{color:var(--text-dim);}
.sb-set--live{color:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(255,181,71,.5);}
/* Walkover chip — shown in place of the set grid when a match was a walkover. */
.sb-set--wo{min-width:auto;padding:0 8px;font-size:.72rem;letter-spacing:.03em;
  color:var(--text-dim);background:rgba(255,255,255,.06);}
.sb-row--winner .sb-set--wo{color:var(--text);}
/* Tiebreak points as a raised superscript (7-6³). The parent .sb-set is a flex
   container, so vertical-align is INERT here (it never applies to flex items) —
   the raise has to come from a transform, sized in the tb's own em so it scales
   with the score. Mirrors .fipdraw-tb's look in the bracket/H2H views. */
.sb-tb{font-size:.58em;font-weight:700;line-height:1;color:var(--text-dim);margin-left:1px;
  align-self:center;transform:translateY(-.62em);}
.sb-row--winner .sb-set--won .sb-tb{color:rgba(10,16,32,.6);}

/* ── Player breakdown (expand a row in the Startfelt overlay) ── */
.fipbd-name{display:inline-flex;align-items:center;gap:6px;color:var(--text);
  font-weight:600;font-size:.92rem;}
.fipbd-name__t{white-space:nowrap;}

/* Segmented player switch — one chip per pair member; echoes .fipreg-toggle. */
.fipbd-switch{display:inline-flex;gap:3px;margin:0 0 14px;padding:3px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--card-border);}
.fipbd-switch__b{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.84rem;font-weight:600;color:var(--text-muted);padding:6px 12px;border-radius:6px;
  transition:color .15s,background .15s,box-shadow .15s;}
.fipbd-switch__b:hover{color:var(--text);}
.fipbd-switch__b.is-active{color:var(--accent);background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px var(--accent-border);}
.fipbd-switch__n{white-space:nowrap;}
.fipbd-switch__r{font-family:var(--font-mono),monospace;font-size:.72rem;color:var(--text-dim);}
.fipbd-switch__b.is-active .fipbd-switch__r{color:var(--accent);}

.fipbd-content{transition:opacity .14s ease;}
.fipbd-content.is-swapping{opacity:0;}

.fipbd-panel{margin:6px 0 10px;padding:12px 14px;border-left:2px solid var(--accent-border);
  background:rgba(255,181,71,0.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease;}
.fipbd-panel.is-open{opacity:1;transform:none;}
.fipbd-panel.is-closing{opacity:0;transform:translateY(-4px);}
@media (prefers-reduced-motion:reduce){
  .fipreg-row,.fipreg-chev,.fipbd-content,.fipbd-panel{transition:none;}
  .fipbd-panel{opacity:1;transform:none;}
}
.fipbd-summary{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.04em;
  color:var(--text-muted);margin-bottom:10px;}
.fipbd-summary b{color:var(--text);font-weight:800;}
.fipbd-dot{margin:0 7px;color:var(--text-dim);}
.fipbd-sub{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono),monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);
  font-weight:700;margin:12px 0 5px;}
.fipbd-sub__vt{color:var(--text-muted);}
.fipbd-sub:first-child{margin-top:0;}
.fipbd-list + .fipbd-sub{margin-top:12px;}
.fipbd-list{display:flex;flex-direction:column;}
.fipbd-item{border-bottom:1px solid var(--divider);}
.fipbd-item:last-child{border-bottom:0;}
.fipbd-ev{display:grid;grid-template-columns:108px 1fr auto 13px;align-items:baseline;
  column-gap:12px;padding:5px 0;font-size:.86rem;border-radius:6px;
  transition:background .15s ease;}
.fipbd-ev--expandable{cursor:pointer;margin:0 -8px;padding:5px 8px;}
.fipbd-ev--expandable:hover{background:var(--surface-2,rgba(255,255,255,.04));}
/* Fixed track wide enough for the longest label ("Q. 1/16-finale"); ellipsis is a
   safety net so a stray long label can never paint over the event-name column. */
.fipbd-rnd{font-family:var(--font-mono),monospace;font-size:.74rem;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fipbd-evname{color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.fipbd-partner{color:var(--text-dim);font-size:.82rem;}
/* tournament match record (W–L) — the event-level outcome, not a match score */
.fipbd-rec{font-family:var(--font-mono),monospace;font-size:.82rem;font-weight:800;
  white-space:nowrap;letter-spacing:.02em;}
.fipbd-rec b{color:var(--text-dim);}
.fipbd-rec__w{color:#4ade80 !important;}
.fipbd-rec__l{color:#ff6b6b !important;}
.fipbd-rec__d{color:var(--text-dim);margin:0 1px;font-weight:400;}
/* expand chevron */
.fipbd-chev{align-self:center;justify-self:end;width:13px;height:13px;position:relative;
  transition:transform .2s ease;}
.fipbd-chev::after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;
  border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);
  transform:rotate(45deg);}
.fipbd-chev--none::after{display:none;}
.fipbd-ev.is-open .fipbd-chev{transform:rotate(180deg);}
.fipbd-ev--expandable:hover .fipbd-chev::after{border-color:var(--text-muted);}
/* the run — animated open via grid-template-rows 0fr→1fr */
.fipbd-run{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease;}
.fipbd-run.is-open{grid-template-rows:1fr;}
.fipbd-run-inner{overflow:hidden;}
.fipbd-run-list{display:flex;flex-direction:column;gap:3px;
  margin:3px 0 9px 12px;padding-left:13px;border-left:2px solid var(--divider);}
.fipbd-run-m{display:grid;grid-template-columns:108px 1fr auto;align-items:baseline;
  column-gap:12px;font-size:.8rem;}
.fipbd-run-rnd{font-family:var(--font-mono),monospace;font-size:.7rem;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Full event name atop an expanded run — mobile-only recovery for the ellipsised
   collapsed header (see fip-radar.js eventRow). Hidden on desktop, where it's shown
   in full already. Left offset lines up with the run's match rows. */
.fipbd-run-title{display:none;margin:2px 0 6px 12px;padding-left:15px;
  font-size:.82rem;font-weight:600;color:var(--text);line-height:1.3;}
.fipbd-run-title .fipbd-partner{font-weight:400;}
@media (max-width:640px){.fipbd-run-title{display:block;}}
.fipbd-run-opp{color:var(--text-muted);min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.fipbd-run-opp::before{content:"vs ";opacity:.45;}
.fipbd-run-sc{font-family:var(--font-mono),monospace;font-size:.78rem;font-weight:700;
  white-space:nowrap;}
.fipbd-run-m--win .fipbd-run-sc{color:#4ade80;}
.fipbd-run-m--loss .fipbd-run-sc{color:#ff6b6b;}
.fipbd-run-m--loss .fipbd-run-opp{color:var(--text-dim);}
/* Not-yet-played match (winner_side NULL) — pending, not a loss. */
.fipbd-run-m--pending .fipbd-run-rnd{color:#4ade80;}
.fipbd-run-m--pending .fipbd-run-sc::before{content:"afventer";color:#4ade80;
  font-family:var(--font-body),sans-serif;font-weight:600;font-size:.72rem;opacity:.85;}
.fipbd-meta{color:var(--text-muted);font-size:.86rem;margin-bottom:6px;}
.fipbd-empty{color:var(--text-dim);font-size:.86rem;font-style:italic;}
.fipbd-profile{display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none;
  font-weight:600;font-size:.84rem;}
.fipbd-profile:hover{text-decoration:underline;}
.fipbd-loading{padding:6px 0;}

/* ── Segmented bucket control ──
   The pill itself is rounded + has a transparent margin, so when it stuck at the
   top of the scroll, cards slid up through its corners and the gap beneath it.
   An opaque sticky bar wraps it and masks the scrolling content edge-to-edge. */
/* Frosted glass, NOT a solid fill: a flat --bg bar read as a navy box against
   the page's top glow. Blur frosts whatever scrolls behind it (illegible, clean)
   without introducing a colour that mismatches the gradient page background. */
.radar-seg-bar{position:sticky;top:0;z-index:15;
  padding:8px 0 12px;margin:0 0 4px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.radar-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--bg-raised);border:1px solid var(--card-border);border-radius:999px;
  padding:4px;margin:0;}
/* The active pill is absolutely positioned; JS sizes it to the *actual* active
   button. The tab labels are unequal widths ("Igangværende" is the widest), so a
   fixed 1fr-column pill drifted off the shorter tabs. See positionIndicator(). */
.radar-seg-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;z-index:0;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid var(--card-border);box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:transform .32s cubic-bezier(.45,0,.2,1),width .32s cubic-bezier(.45,0,.2,1);
  pointer-events:none;}
.radar-seg-b{grid-row:1;position:relative;z-index:1;appearance:none;background:none;border:0;
  cursor:pointer;color:var(--text-dim);font:inherit;font-size:.82rem;font-weight:700;
  padding:9px 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;white-space:nowrap;transition:color .25s;}
.radar-seg-b:nth-of-type(1){grid-column:1;} /* the indicator shares col 1 */
.radar-seg-b[data-seg="active"]{grid-column:1;}
.radar-seg-b[data-seg="upcoming"]{grid-column:2;}
.radar-seg-b[data-seg="finished"]{grid-column:3;}
.radar-seg-b.is-active{color:var(--text);}
.radar-seg-cnt{font-family:var(--font-mono),monospace;font-size:.7rem;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:var(--text-dim);}
.radar-seg-b.is-active .radar-seg-cnt{background:var(--accent);color:#0a1020;}
.radar-seg-dot{width:7px;height:7px;border-radius:50%;background:#ff6b6b;flex-shrink:0;
  box-shadow:0 0 0 0 #ff6b6b;animation:radar-seg-pulse 1.6s cubic-bezier(.36,0,.2,1) infinite;}
@keyframes radar-seg-pulse{0%{box-shadow:0 0 0 0 rgba(255,107,107,.5);}
  70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

/* ── Panels ── */
.radar-panel{display:none;}
.radar-panel.is-active{display:block;animation:radar-panel-in .34s cubic-bezier(.3,0,.2,1);}
@keyframes radar-panel-in{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.radar-panel.is-active > *{animation:radar-card-in .4s both;}
.radar-panel.is-active > *:nth-child(2){animation-delay:.04s;}
.radar-panel.is-active > *:nth-child(3){animation-delay:.08s;}
.radar-panel.is-active > *:nth-child(4){animation-delay:.12s;}
.radar-panel.is-active > *:nth-child(5){animation-delay:.16s;}
@keyframes radar-card-in{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.radar-empty{color:var(--text-dim);font-size:.88rem;padding:22px;text-align:center;
  background:var(--card);border:1px dashed var(--card-border);border-radius:var(--radius);}

/* ── "Ude" grace card ── */
.radar-card--ude{opacity:.6;}
.radar-status--ude{color:var(--text-dim);}
.radar-move-hint{font-size:.68rem;color:var(--text-muted);font-style:italic;}

/* ── Compact rows (Kommende / Afsluttede) ── */
.radar-row{background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;}
.radar-row-head{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
  padding:11px 13px;}
.radar-row-head:hover{background:rgba(255,255,255,.02);}
.radar-row-main{display:flex;flex-direction:column;min-width:0;}
.radar-row-name{font-weight:600;font-size:.92rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.radar-row-sub{color:var(--text-dim);font-size:.76rem;}
.radar-row-cat{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:rgba(255,181,71,.12);color:var(--accent);flex-shrink:0;}
.radar-row-cat--pp{background:rgba(255,255,255,.06);color:var(--text-dim);}
.radar-row-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-shrink:0;}
.radar-row-cd{font-family:var(--font-mono),monospace;font-size:.8rem;color:var(--accent);font-weight:700;}
.radar-row-res{font-size:.78rem;font-weight:700;color:var(--text-dim);}
.radar-row-res--in{color:#34d27b;}
.radar-row-res--out{color:#ff6b6b;}
.radar-row-chev{color:var(--text-muted);font-size:.7rem;transition:transform .25s;}
.radar-row[data-open] .radar-row-chev{transform:rotate(180deg);}
.radar-row-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.radar-row[data-open] .radar-row-body{grid-template-rows:1fr;}
.radar-row-body-inner{overflow:hidden;}
.radar-row[data-open] .radar-row-body-inner{padding:0 13px 12px;border-top:1px solid var(--card-border);}
.radar-row-ext{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--accent);text-decoration:none;}

@media (prefers-reduced-motion:reduce){
  .radar-seg-ind,.radar-row-body,.radar-row-chev{transition:none;}
  .radar-panel.is-active,.radar-panel.is-active > *{animation:none;}
  .radar-seg-dot{animation:none;}
}

/* ── Scout sync beacon — live count-up since the last harvester push ──────────
   Telemetry-styled status chip in the header. Colour-codes by freshness via
   [data-fresh]; the seconds digit pulses on every tick (JS rebuilds the markup,
   replaying the CSS animation). See fip-radar.js rdPaintBeacon(). */
.sync-beacon{display:inline-flex;align-items:center;gap:10px;margin-top:15px;
  padding:6px 14px 6px 12px;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--card-border);font-family:var(--font-mono),monospace;
  --sb-c:var(--om-blue,#52e1fe);transition:border-color .6s ease;}
/* slow light-sweep across the chip for a faint "scanning" feel */
.sync-beacon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(82,225,254,.06) 50%,transparent 68%);
  background-size:240% 100%;animation:sb-sweep 7s linear infinite;}
@keyframes sb-sweep{from{background-position:130% 0;}to{background-position:-130% 0;}}

/* signal — solid core dot + two expanding ping rings */
.sync-beacon-sig{position:relative;width:9px;height:9px;flex-shrink:0;}
.sync-beacon-sig i{position:absolute;inset:1px;border-radius:50%;background:var(--sb-c);
  box-shadow:0 0 8px var(--sb-c);transition:background .6s ease;}
.sync-beacon-sig::before,.sync-beacon-sig::after{content:"";position:absolute;inset:0;
  border-radius:50%;border:1.5px solid var(--sb-c);
  animation:sb-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;}
.sync-beacon-sig::after{animation-delay:1.3s;}
@keyframes sb-ping{0%{transform:scale(1);opacity:.65;}100%{transform:scale(3.3);opacity:0;}}

.sync-beacon-label{font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);white-space:nowrap;transition:color .6s ease;}
.sync-beacon-clock{display:inline-flex;align-items:baseline;gap:5px;min-width:64px;
  color:var(--sb-c);font-variant-numeric:tabular-nums;
  text-shadow:0 0 11px color-mix(in srgb,var(--sb-c) 38%,transparent);transition:color .6s ease;}
.sync-beacon-clock .rd-seg{display:inline-flex;align-items:baseline;gap:1px;}
.sync-beacon-clock .rd-num{font-size:15px;font-weight:800;line-height:1;}
.sync-beacon-clock .rd-u{font-size:9px;font-weight:700;color:var(--text-muted);margin-right:1px;}
/* the trailing segment is always the seconds — pulse it each tick */
.sync-beacon-clock .rd-seg:last-child .rd-num{display:inline-block;animation:sb-tick .85s ease-out;}
@keyframes sb-tick{0%{transform:translateY(-1px) scale(1.16);}100%{transform:none;}}
.sync-beacon-suffix{font-size:10px;color:var(--text-muted);letter-spacing:.03em;}

/* freshness ramp: live → fresh → cool → stale */
.sync-beacon[data-fresh="live"]{--sb-c:#34d27b;border-color:rgba(52,210,123,.34);}
.sync-beacon[data-fresh="live"] .sync-beacon-label{color:#34d27b;}
.sync-beacon[data-fresh="live"] .sync-beacon-sig::before,
.sync-beacon[data-fresh="live"] .sync-beacon-sig::after{animation-duration:1.6s;}
.sync-beacon[data-fresh="fresh"]{--sb-c:var(--om-blue,#52e1fe);}
.sync-beacon[data-fresh="cool"]{--sb-c:#8fb3c2;}
.sync-beacon[data-fresh="stale"]{--sb-c:var(--accent);border-color:rgba(255,181,71,.30);}
.sync-beacon[data-fresh="stale"] .sync-beacon-label{color:var(--accent);}

@media (prefers-reduced-motion:reduce){
  .sync-beacon::after,.sync-beacon-sig::before,.sync-beacon-sig::after,
  .sync-beacon-clock .rd-seg:last-child .rd-num{animation:none;}
}

/* ── Phone layout ──────────────────────────────────────────────────────────
   On a narrow viewport the 4-column match grid starved the opponent column,
   so two full names wrapped into a tower. Drop to a two-row layout: round +
   outcome + score on top, the opponent names get the full width below. */
@media (max-width:600px){
  /* Card pair: stack the two players on their own lines (the inline "/" dangled
     at the end of a wrapped line, and the status chip got crammed against the
     second name). Status chip drops below; the expand chevron floats top-right. */
  .radar-pair{flex-direction:column;align-items:flex-start;gap:3px;
    position:relative;padding-right:22px;}
  .radar-pair-sep{display:none;}
  .radar-result{margin-left:0;margin-top:4px;}
  .radar-pair-x>summary .radar-expand{position:absolute;top:2px;right:0;margin-left:0;}

  /* Scoreboard: names wrap within their column; tighten the set cells and
     padding so both rows stay compact on a narrow card. */
  .sb-row{gap:8px;padding:6px 4px 6px 8px;}
  .sb-set{min-width:21px;height:24px;font-size:.88rem;}
  .sb--live{padding-left:34px;}

  /* Startfelt breakdown: the pair player-switch is two chips that overflowed
     off-screen with long names. Stack them full-width instead. */
  .fipbd-switch{display:flex;flex-direction:column;gap:4px;width:100%;}
  .fipbd-switch__b{justify-content:flex-start;}
}

/* ── Draw overlay (Lodtrækning) ────────────────────────────────────────────
   The .lab-ms-overlay chrome (backdrop + locked body scroll) is inherited
   from tournament-cards.css. The fipdraw-overlay variant re-centers the
   modal instead of anchoring a right-side sheet.
   ──────────────────────────────────────────────────────────────────────── */

/* Override the sheet's flex-end to center the dialog */
.fipdraw-overlay{
  align-items:center;
  justify-content:center;
}

/* Modal box — elevated above the card surface, constrained width */
.fipdraw-modal{
  position:relative;
  z-index:1;
  width:min(1100px,94vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  /* Same slate surface as the Startfelt & seedning sheet (.lab-ms-sheet). */
  background:linear-gradient(180deg, rgba(28,32,42,0.96), rgba(20,24,32,0.98));
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
  /* Open animation — scale + fade up */
  transform:translateY(16px) scale(0.975);
  opacity:0;
  transition:transform 0.24s cubic-bezier(0.22,0.7,0.18,1),
             opacity 0.24s ease-out;
}
/* Editorial accent: thin amber rail down the left edge — mirrors .lab-ms-sheet::before */
.fipdraw-modal::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--accent) 0%, transparent 40%, transparent 100%);
  opacity:0.7;
  pointer-events:none;
  z-index:2;
}
.lab-ms-overlay.is-open .fipdraw-modal{
  transform:none;
  opacity:1;
}

/* Header — reuses the Startfelt & seedning sheet chrome verbatim: .lab-ms-head
   (border-bottom, padding, positioned close button), .lab-ms-kicker eyebrow +
   blinking dot, and the .lab-ms-sched meta line. No extra wash — it reads as a
   sibling of the entry-list sheet. */
.fipdraw-modal .lab-ms-head{
  flex:0 0 auto;
}

/* Draw-type tab strip — echoes .fipreg-toggle/.fipreg-tab exactly */
.fipdraw-toggle{
  display:inline-flex;gap:2px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  padding:3px;
  margin:14px 20px 0;
  flex-wrap:wrap;
}
.fipdraw-tab{
  background:none;border:0;cursor:pointer;
  font-family:var(--font-mono),monospace;
  font-size:10px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-dim);
  padding:8px 16px;border-radius:6px;
  transition:color 0.15s,background 0.15s,box-shadow 0.15s;
  white-space:nowrap;
}
.fipdraw-tab:hover{color:var(--text-muted);}
.fipdraw-tab.is-active{
  color:var(--accent);
  background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px var(--accent-border);
}

/* Single-draw label (no tab strip) — matches .fipreg-onegender */
.fipdraw-onedraw{
  font-family:var(--font-mono),monospace;
  font-size:10px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);
  padding:14px 20px 0;
}

/* Scrollable panel wrapper */
.fipdraw-panel{
  flex:1 1 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* The board — horizontal row of round columns, scrolls when wide */
.fipdraw-board{
  display:flex;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:auto;
  flex:1 1 auto;
  padding:16px 20px 20px;
  gap:12px;
  /* custom scrollbar — matches .lab-ms-body */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.10) transparent;
}
.fipdraw-board::-webkit-scrollbar{height:6px;width:6px;}
.fipdraw-board::-webkit-scrollbar-track{background:transparent;}
.fipdraw-board::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:3px;}

/* Round column */
.fipdraw-round{
  flex:0 0 230px;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Round heading — monospace kicker style, dim uppercase */
.fipdraw-round-h{
  font-family:var(--font-mono),monospace;
  font-size:9.5px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-dim);
  padding:0 2px 4px;
  border-bottom:1px solid var(--om-hair,rgba(255,255,255,0.06));
  margin-bottom:4px;
}

/* Vertically stacked match cards within a round */
.fipdraw-round-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Match card */
.fipdraw-match{
  /* The card carries NO result colour, and that is the deliberate choice. This
     file already settles how the two jobs divide, up in the .sb scoreboard
     (~line 417): colour — .sb--win/.sb--loss — is reserved for win/loss FROM THE
     VIEWER'S PERSPECTIVE, and "which of these two rows won" is carried by a
     neutral lift, .sb-row--winner. A bracket cell has no viewer perspective: one
     of the two pairs always wins, so a mint card would be spending the win colour
     on the mere fact that the match is over. Worse, tinting the whole box reads as
     the box having won. The score sitting between the two rows already says the
     match is decided; the winner is marked on the winning PAIR (see
     .fipdraw-side.is-win below), never on the container.
     Translucent tile on the slate sheet — same surface system as the entry-list
     rows (rgba white over the gradient), not the darker --card. */
  --fd-edge:var(--card-border);
  --fd-half:none;
  background:var(--fd-half),rgba(255,255,255,0.025);
  border:1px solid var(--fd-edge);
  border-radius:var(--radius-sm);
  padding:9px 10px 8px;
  transition:border-color 0.18s;
}
.fipdraw-match:hover{
  --fd-edge:rgba(255,255,255,0.14);
}
/* --fd-half fades each pair's own outcome across THEIR half of the card: mint off
   the winner's outer edge, rose off the loser's, both dying out before they meet in
   the middle. This is the one way hue works on a card with no tracked pair — the
   colour describes the side it sits behind, not the container, so nothing has to
   claim a perspective. (The earlier mint-edge-and-wash version failed precisely
   because a single tint spanning the whole box had to be *about* the box.)
   Rose runs lower alpha than mint because red reads louder at equal opacity —
   matched values would make every loser's half shout. Same ratio as
   .rj-card--win/--loss.
   Which half is which is read structurally, from where the winning side sits
   relative to the centre slot, NOT with :first-child/:last-child — the Premier
   viewer appends a .fipdraw-h2h badge after the second side, which would break
   :last-child. Neither rule matches an undecided cell (no .is-win anywhere), so a
   pending match stays flat — a match nobody has lost yet gets no rose. */
.fipdraw-match:has(> .fipdraw-side.is-win ~ .fipdraw-mid){
  --fd-half:
    linear-gradient(180deg,rgba(74,222,128,0.075),rgba(74,222,128,0) 52%),
    linear-gradient(0deg,rgba(255,107,107,0.055),rgba(255,107,107,0) 52%);
}
.fipdraw-match:has(> .fipdraw-mid ~ .fipdraw-side.is-win){
  --fd-half:
    linear-gradient(0deg,rgba(74,222,128,0.075),rgba(74,222,128,0) 52%),
    linear-gradient(180deg,rgba(255,107,107,0.055),rgba(255,107,107,0) 52%);
}

/* Center slot between the two team rows: score when played, datetime when
   upcoming, a faint hairline gap otherwise (bye / no data). */
.fipdraw-mid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  text-align:center;
}
/* Score and schedule are the SAME slot wearing two hats, so they share their box
   and — deliberately — their font-size. One declaration, not two that have to be
   kept in step: a cell showing a time and the cell beside it showing a result must
   look like the same row of the same card. Only the bracket variant overrides the
   size, and it overrides it for both at once. */
.fipdraw-mid--score,
.fipdraw-mid--oop{
  margin:2px 0;
  padding:4px 0;
  font-size:0.78rem;
  /* One explicit line-height for all three variants, so the hairline band is the
     same height whether the slot holds a score, a time or a sentence. Without it
     the score ran ~3px taller than a schedule line — its .fipdraw-set children are
     inline-blocks, which build a taller line box than bare text — and neighbouring
     cells in a round showed their rules at visibly different heights. */
  line-height:1.5;
  border-top:1px solid var(--om-hair,rgba(255,255,255,0.06));
  border-bottom:1px solid var(--om-hair,rgba(255,255,255,0.06));
}
.fipdraw-mid--score .fipdraw-set,
.fipdraw-mid--when > *{
  line-height:inherit;
}
/* Score: monospace tabular, dim — same type as the old bottom score. */
.fipdraw-mid--score{
  font-family:var(--font-mono),monospace;
  font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:0.03em;
  color:var(--text-muted);
}
/* Schedule prose — the followed_by sentence, or a bare day. One centred line;
   block (not the parent's flex) so text-overflow ellipsis applies, and
   text-align:center from .fipdraw-mid keeps it centered. */
.fipdraw-mid--oop{
  display:block;width:100%;
  color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Lead + clock on ONE row — the variant drawMidHtml emits when the payload IS a
   time (starting / not_before). This slot sits exactly where a played cell's score
   sits, so it has to be a single row at the score's size: two rows made an
   unplayed cell taller-looking and louder than its neighbours.
   It fits with room to spare — the slot is 230px and the longest line any language
   produces ("Tomorrow, not before 17:00", "Tir. 28/7, tidligst kl. 14:00 (lokal
   tid)") measures ~140px at this size. Width was never the problem; an earlier
   revision stacked these two spans in a flex COLUMN, and that is what wrapped.
   Inherits .fipdraw-mid--score's type below, so the two can't drift apart. */
.fipdraw-mid--when{
  display:flex;flex-direction:row;align-items:baseline;justify-content:center;
  gap:5px;
  white-space:nowrap;
}
/* The words: same size as the clock beside them, stepped down a tone so the time
   is what the eye lands on. Sans (inherited) rather than mono — this is a phrase,
   and mono prose in a 230px slot reads like a filename. No uppercasing: at the
   score's size a full caps phrase shouts over the result it sits next to. */
.fipdraw-when-k{
  font-weight:400;letter-spacing:0;
  color:var(--text-dim);
}
/* The clock keeps the score's exact voice — same mono, tabular figures, same tone
   — because it is standing in for a score. */
.fipdraw-when-v{
  font-family:var(--font-mono),monospace;
  font-variant-numeric:tabular-nums;
  font-weight:700;letter-spacing:0.03em;
  color:var(--text-muted);
}
/* Bye/no-data: keep a faint separation between the two teams. */
.fipdraw-mid--empty{
  height:1px;margin:3px 0;
  background:var(--om-hair,rgba(255,255,255,0.06));
}

/* Match side (team row) */
.fipdraw-side{
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 0;
  min-width:0;
  /* Base tone for an undecided cell: neither side has lost yet, so neither is
     faded. The old rule fell straight through to the loser style here (both sides
     of an upcoming match are :not(.is-win)) and greyed BOTH pairs, so a column of
     scheduled cells read as dead rather than as pending. */
  color:var(--text-muted);
}
/* The pair that won. Type only — the half-fade above carries the colour and the
   .fipdraw-v mark carries the letter. This used to also paint a neutral
   rgba(255,255,255,.04) row lift (bled out through the card's padding with a
   negative margin); it drew a hard-edged band around the name row and read as a
   selected table row rather than a result, so it's gone. */
.fipdraw-side.is-win{
  font-weight:700;
  color:var(--text);
}
/* Beaten side — only ever inside a decided cell. The demotion is carried by the
   winner's lift (weight + --text) and by fading the flag, NOT by pushing the name
   itself down a tone: this is the same call .rj-card--loss makes, where the score
   steps down and the flag fades but the names hold at --text-muted. The rule this
   replaced ran --text-dim under opacity 0.72 — about 2:1 on this tile, i.e. a
   player's name, the cell's primary content, rendered below AA on half the
   bracket. --text-muted clears 7:1. */
.fipdraw-match:has(.is-win) .fipdraw-side:not(.is-win) .flag{
  opacity:0.72;
}

/* Player names within a side */
.fipdraw-names{
  display:flex;
  align-items:center;
  gap:3px;
  flex:1 1 0;
  min-width:0;
  flex-wrap:wrap;
  line-height:1.3;
  font-size:0.86rem;
}
.fipdraw-p{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  min-width:0;
}
/* Flag slot — natural width in the column view (collapses to nothing when the
   player has no country); the bracket view gives it a fixed width to align names. */
.fipdraw-flag{display:inline-flex;align-items:center;flex-shrink:0;}
/* Flag images inside the names */
.fipdraw-p .flag{
  border-radius:2px;
  flex-shrink:0;
}
/* FIP rank suffix after a player's name (e.g. "#45") — muted + mono */
.fipdraw-pr{
  margin-left:4px;
  font-family:var(--font-mono),monospace;
  font-size:0.72rem;
  font-weight:600;
  color:var(--text-dim);
  opacity:0.7;
}
/* Slash separator between pair members */
.fipdraw-sep{
  color:var(--text-dim);
  opacity:0.45;
  font-size:0.78rem;
  flex-shrink:0;
}

/* Winner mark — de-pilled to a dot + mono letter, matching .rj-res on the radar
   journey card. The chip drew a bordered box around a single character and then
   competed with the card's own tinted edge to say the same thing; the dot carries
   it at a fraction of the ink. Dot AND letter AND colour, so the state never
   rests on colour alone. Mint #4ade80 is the radar's win colour — the pill used
   #34d27b, a second green doing the same job. */
.fipdraw-v{
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono),monospace;
  font-size:9.5px;font-weight:700;letter-spacing:0.08em;
  line-height:1.5;
  text-transform:uppercase;
  color:#4ade80;
}
.fipdraw-v::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:currentColor;
}

/* One fixed-width slot per set — keeps 2-set and 3-set scores aligned. */
.fipdraw-set{
  display:inline-block;
  min-width:30px;
  text-align:center;
}
/* Tiebreak points as a raised superscript (FIP style: 6⁵-7). line-height:0 keeps
   it from nudging the score row's height. Applies wherever scores render:
   bracket cells, the Premier H2H result block + history rows. */
.fipdraw-tb{
  font-size:0.62em;
  vertical-align:super;
  line-height:0;
  margin-left:1px;
  font-weight:600;
}

/* Empty state */
.fipdraw-empty{
  padding:40px 20px;
  text-align:center;
  font-size:0.88rem;
  color:var(--text-dim);
  font-style:italic;
}

/* Loading skeleton — inherits .lab-ms-skel chrome from tournament-cards.css;
   just give it a container with some breathing room */
.fipdraw-loading{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 20px 20px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .fipdraw-modal{
    transition:none;
    transform:none;
    opacity:1;
  }
  .lab-ms-overlay:not(.is-open) .fipdraw-modal{opacity:0;}
}

/* ── Mobile full-screen (<700px) ───────────────────────────────────────── */
@media (max-width:700px){
  /* Full-screen modal — no border-radius, fills the viewport */
  .fipdraw-modal{
    width:100vw;
    height:100vh;
    height:100dvh;
    max-height:none;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }

  /* Board switches to vertical: rounds become labeled sections that stack */
  .fipdraw-board{
    flex-direction:column;
    overflow-x:visible;
    gap:20px;
    padding:14px 16px 24px;
  }

  /* Rounds expand full-width; no fixed column constraint */
  .fipdraw-round{
    flex:1 1 auto;
    min-width:0;
    width:100%;
  }

  /* Round heading gets a slightly stronger separator for vertical rhythm */
  .fipdraw-round-h{
    font-size:9px;letter-spacing:0.14em;
    padding-bottom:6px;
    margin-bottom:6px;
  }

  /* Match cards: ensure names never overflow and wrap cleanly */
  .fipdraw-match{
    border-radius:var(--radius-sm);
  }

  /* Player names: allow wrapping on mobile without layout break */
  .fipdraw-names{
    flex-wrap:wrap;
    gap:2px 3px;
    font-size:0.84rem;
  }
  .fipdraw-p{
    white-space:normal;
    word-break:break-word;
  }

  /* Tab strip: wrap pills if many draw types */
  .fipdraw-toggle{
    margin:12px 16px 0;
    flex-wrap:wrap;
  }
  .fipdraw-tab{
    padding:7px 13px;
    font-size:9.5px;
  }
  .fipdraw-onedraw{
    padding:12px 16px 0;
  }

  /* Score: allow wrapping on very narrow screens */
  .fipdraw-mid--score{
    white-space:normal;
    word-break:break-all;
  }
}

/* ── Draw overlay — bracket layout (single-elim ladder) ──────────
   Round columns where each match cell spans rows to centre between its two
   feeders; connector stubs are drawn with pseudo-elements (mirrors the Lab
   page bracket). Columns scroll horizontally; rows scroll vertically. */
/* ── Round-jump nav ── sticky rail of round chips above the bracket. It pins to
   the top of whichever element scrolls: the page on the full-page viewer and
   .lab-ms-body in the overlay. Both need the .fipdraw-panel clip lifted for
   sticky to escape it — see the .pp-draw-body (premier-padel.css) and
   .lab-ms-body (below) overrides. Full page keeps the solid strip; the overlay
   blends into the glass modal (below). */
.fipdraw-nav{
  position:sticky;top:0;z-index:5;
  display:flex;gap:6px;align-items:center;
  padding:10px 20px;margin:0;
  background:var(--card);
  border-bottom:1px solid var(--card-border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fipdraw-nav::-webkit-scrollbar{display:none;}
.fipdraw-navchip{
  flex:0 0 auto;
  background:none;border:0;cursor:pointer;
  font-family:var(--font-mono),monospace;
  font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-dim);
  padding:6px 12px;border-radius:999px;
  transition:color .15s,background .15s;
}
.fipdraw-navchip:hover{color:var(--text-muted);}
.fipdraw-navchip.is-active{color:var(--accent);background:var(--accent-dim);}

/* Overlay (Lodtrækning modal): keep the rail visible while .lab-ms-body scrolls
   (lift the panel clip), and blend it into the glass modal instead of the
   full-page's solid slate strip (which reads as a clashing navy bar here). */
.lab-ms-body .fipdraw-panel{overflow:visible;}
.lab-ms-body .fipdraw-nav{
  /* Match the modal's own grey slate surface (its gradient is ~rgba(28,32,42)
     near the top, where the rail pins) so the sticky rail blends seamlessly
     instead of reading as a darker navy band. */
  background:rgba(28,32,42,0.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* Overlay: ONE scroller owns both axes ──────────────────────────────────────
   The bracket pane used to grow to its content, so .lab-ms-body owned the
   vertical axis while .fipdraw-bracket-scroll (overflow:auto on BOTH axes, but
   with zero vertical range) owned the horizontal one. Chrome latches a wheel
   gesture to the innermost scroller that can consume ANY of it — the bracket,
   via the gesture's horizontal component — and then discards the vertical
   component instead of chaining it up to the ancestor. A trackpad swipe is
   never perfectly vertical, so the modal stalled and lurched: a 4px sideways
   drift was enough to stop it dead, and severity scaled with how far the
   bracket could pan. (Touch pans axis-lock, which is why mobile felt fine.)
   Bounding the pane's height hands the bracket both axes, so there is exactly
   one scroller and nothing to latch away. Scoped to .fipdraw-modal because the
   .lab-ms-* chrome is shared with the "Startfelt & seedning" sheet. */
.fipdraw-modal .lab-ms-body{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
/* The tab strip is inline-flex in normal flow; as a column flex item it would
   otherwise stretch to the full modal width. */
.fipdraw-modal .fipdraw-toggle{align-self:flex-start;}
.fipdraw-modal .lab-ms-body .fipdraw-panel{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
/* The rail must not shrink: it is itself an overflow-x scroller, so its
   automatic minimum size is 0 rather than its content height. */
.fipdraw-modal .fipdraw-nav{flex:0 0 auto;}
/* Both panel bodies — the bracket ladder and the round-column board — become
   the single dual-axis scroller. */
.fipdraw-modal .fipdraw-bracket-scroll,
.fipdraw-modal .fipdraw-board{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

.fipdraw-bracket-scroll{
  flex:1 1 auto;
  overflow:auto;
  padding:16px 20px 22px;
  -webkit-overflow-scrolling:touch;
}
.fipdraw-bracket{
  display:grid;
  gap:0 22px;
  min-width:min-content;
}
.fipdraw-blabel{
  grid-row:1;
  font-family:var(--font-mono),monospace;
  font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--text-dim);
  text-align:center;
  padding:0 0 10px;
}
.fipdraw-bcell{
  display:flex;align-items:center;
  position:relative;
  padding:4px 0;
}
.fipdraw-bcell .fipdraw-match{
  width:100%;
  position:relative;
}
/* vertical line linking the two feeder centres (left of a receiving cell) */
.fipdraw-bcell.has-input::before{
  content:'';position:absolute;
  left:-11px;top:25%;height:50%;width:1px;
  background:rgba(255,255,255,0.28);
  pointer-events:none;
}
/* horizontal stub from that line into the match's left edge */
.fipdraw-bcell.has-input .fipdraw-match::before{
  content:'';position:absolute;
  left:-11px;top:50%;width:11px;height:1px;
  background:rgba(255,255,255,0.28);
  pointer-events:none;
}
/* horizontal stub out of the match's right edge toward the next column */
.fipdraw-bcell.has-output .fipdraw-match::after{
  content:'';position:absolute;
  right:-11px;top:50%;width:11px;height:1px;
  background:rgba(255,255,255,0.28);
  pointer-events:none;
}
/* Compact bracket match cards: stack each pair's players on their own line so
   card height is predictable (no wrapping overflow) and both names stay legible. */
.fipdraw-bcell .fipdraw-match{
  overflow:hidden;
  font-size:0.86rem;
  padding:9px 12px 8px;
  /* Uniform box height across the whole bracket. Sized for the common case
     (~90% of cards) with headroom for one wrapped name. Names area absorbs
     any overflow (clips) so a rare extra-long name never pushes the card
     out of shape — boxes stay the same size and never overlap. The three
     rows (team / center / team) are centred as a group within the box. */
  height:164px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.fipdraw-bcell .fipdraw-side{
  align-items:flex-start;
  padding:1px 0;
  min-height:0;
  overflow:hidden;
}
/* Center slot inside the bracket: tighter type/padding than the board view (the
   bracket card is already the compact, narrow layout). Score and schedule are
   stepped down together, in one selector, so a time and a result in neighbouring
   cells of the same round can never render at different sizes. */
.fipdraw-bcell .fipdraw-mid--score,
.fipdraw-bcell .fipdraw-mid--oop{
  font-size:0.68rem;
  margin:2px 0;
  padding:3px 0;
  max-width:100%;
}
.fipdraw-bcell .fipdraw-mid--empty{
  margin:3px 0;
}
.fipdraw-bcell .fipdraw-names{
  flex-direction:column;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:1px;
  width:100%;
  min-width:0;
}
.fipdraw-bcell .fipdraw-sep{display:none;}
/* Each player on its own row: fixed flag slot keeps names left-aligned whether
   or not the player has a country flag; the name ellipsises if too long. */
.fipdraw-bcell .fipdraw-p{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
  max-width:100%;
  min-width:0;
  line-height:1.2;
}
.fipdraw-bcell .fipdraw-flag{
  flex:0 0 18px;
  justify-content:flex-start;
}
.fipdraw-bcell .fipdraw-pn{
  flex:1 1 auto;
  min-width:0;
  /* Wrap long names to a second line instead of truncating with an ellipsis. */
  white-space:normal;
  overflow-wrap:anywhere;
}
.fipdraw-bcell .fipdraw-v{align-self:center;}

/* TBD (unplayed) slot */
.fipdraw-tbd{
  color:var(--text-dim);
  font-style:italic;
  letter-spacing:0.5px;
}
/* Center the TBD placeholder within its side (real names stay left-aligned). */
.fipdraw-side.is-tbd .fipdraw-names{
  justify-content:center;
  align-items:center;
  text-align:center;
}
.fipdraw-bracket-scroll::-webkit-scrollbar{height:8px;width:8px;}
.fipdraw-bracket-scroll::-webkit-scrollbar-track{background:transparent;}
.fipdraw-bracket-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:4px;}

@media (max-width:700px){
  .fipdraw-bracket{gap:0 16px;}
  .fipdraw-bracket-scroll{padding:12px 14px 18px;}
  .fipdraw-nav{padding:8px 14px;}
}

/* ══ Signal-feed band — latest tracked signups, full-width horizontal
   carousel below the hero (mirrors Premier's .pp-band--now). Visible at all
   widths, including mobile. ══════════════════════════════════════════════ */
.radar-layout{display:block;}

.radar-band{margin:0 0 26px;}
.radar-band__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;}
.radar-band__head{display:flex;flex-direction:column;gap:4px;min-width:0;}
.radar-band__title{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0;}
.radar-band__sub{font-family:var(--font-mono),monospace;font-size:10.5px;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;}
.radar-band__sub b{color:var(--text-muted);font-weight:500;}
.radar-band__nav{display:flex;gap:8px;flex-shrink:0;}
.radar-band__arrow{width:32px;height:32px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;padding-bottom:2px;
  color:var(--text-muted);background:var(--card);border:1px solid var(--card-border);
  transition:color .15s ease, border-color .15s ease, opacity .15s ease;}
.radar-band__arrow:hover:not(:disabled){color:#52e1fe;border-color:rgba(82,225,254,.45);}
.radar-band__arrow:disabled{opacity:.35;cursor:default;}

/* horizontal scroll-snap rail — native swipe on touch, ‹ › paging on desktop */
.radar-band__rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 0 10px;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.radar-band__rail::-webkit-scrollbar{display:none;}
/* ~4 cards per view, matching the Premier carousel's math. */
.radar-band__rail .rr-sig{flex:0 0 calc((100% - 42px) / 4);min-width:270px;scroll-snap-align:start;}

/* Touch / narrow viewports: hide the arrows, native swipe takes over. */
@media (hover:none),(max-width:640px){
  .radar-band__nav{display:none !important;}
}

/* signal card */
.rr-sig{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:14px;
  padding:12px 13px 11px;transition:border-color .18s, transform .18s;
  display:flex;flex-direction:column;}
.rr-sig:hover{border-color:rgba(82,225,254,.34);transform:translateY(-1px);}
/* Faded event poster as full-card texture (mirrors the radar-card header
   poster). Scoped to .rr-sig--poster so poster-less signals stay unchanged;
   a dark gradient over it keeps the player/tournament text legible. */
.rr-sig--poster{overflow:hidden;}
.rr-sig__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--rr-poster) center 15%/cover no-repeat;opacity:.16;}
.rr-sig__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(10,14,22,.82) 0%,rgba(10,14,22,.5) 55%,rgba(10,14,22,.12) 100%);}
.rr-sig--poster>*:not(.rr-sig__bg){position:relative;z-index:1;}
.rr-sig.is-new{border-color:rgba(82,225,254,.4);box-shadow:0 0 0 1px rgba(82,225,254,.14);}
.rr-top{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.rr-age{font-family:var(--font-mono),monospace;font-size:10px;color:var(--text-dim);}
/* Junior age category on a ticker card, same kicker language as .radar-cat. */
.rr-cat{font-family:var(--font-mono),monospace;font-size:10px;font-weight:700;
  letter-spacing:.12em;color:var(--text-muted);margin-left:auto;}
.rr-ny{display:none;font-family:var(--font-mono),monospace;font-size:8.5px;font-weight:700;letter-spacing:.14em;
  color:#04121a;background:var(--om-blue,#52e1fe);padding:2px 6px;border-radius:4px;}
.rr-sig.is-new .rr-ny{display:inline-block;}
.rr-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.rr-dot--registration_open{background:#34d27b;box-shadow:0 0 8px rgba(52,210,123,.7);}
.rr-dot--registration_closed{background:transparent;border:1.5px solid var(--text-dim);width:7px;height:7px;}
.rr-dot--live{background:#ff6b6b;box-shadow:0 0 8px rgba(255,107,107,.7);}

/* status-dot legend — hover/focus popover in the rail header */
.rr-legend{position:relative;display:inline-flex;align-items:center;cursor:help;}
.rr-legend-q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border-radius:50%;border:1px solid var(--card-border);color:var(--text-dim);
  font-size:9px;font-weight:700;line-height:1;}
.rr-legend:hover .rr-legend-q,.rr-legend:focus-visible .rr-legend-q{color:var(--text-muted);border-color:rgba(82,225,254,.4);}
.rr-legend-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:20;
  display:none;flex-direction:column;gap:8px;white-space:nowrap;
  background:rgba(12,19,33,.98);border:1px solid var(--card-border);border-radius:10px;
  padding:10px 12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  color:var(--text-muted);font-size:11px;letter-spacing:0;pointer-events:none;}
.rr-legend:hover .rr-legend-pop,.rr-legend:focus-within .rr-legend-pop{display:flex;}
.rr-legend-row{display:flex;align-items:center;gap:8px;}
.rr-pair{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.rr-pl{display:flex;align-items:center;gap:8px;font-size:13.5px;}
.rr-pl .nm{font-weight:600;color:var(--text);}
.rr-pl .rk{margin-left:auto;font-family:var(--font-mono),monospace;font-size:10px;color:var(--text-dim);}
.rr-pl.mate{opacity:.62;font-size:12.5px;}
.rr-pl.mate .nm{font-weight:500;color:var(--text-muted);}
.rr-join{display:inline-block;width:14px;text-align:center;color:var(--text-dim);font-family:var(--font-mono),monospace;font-size:11px;}
/* Pin the footer to the card's bottom (cards stretch to equal height in the
   rail, so margin-top:auto lines every footer up) and bottom-align its row, so
   the countdown always sits in the same bottom-right spot across every signup
   card instead of drifting with the 1–2-line tournament name. */
.rr-foot{margin-top:auto;display:flex;align-items:flex-end;gap:8px;padding-top:9px;border-top:1px solid var(--card-border);}
.rr-tour{min-width:0;}
.rr-tn{font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  line-height:1.2;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rr-tc{display:flex;align-items:center;gap:6px;margin-top:3px;
  font-family:var(--font-mono),monospace;font-size:10px;color:var(--text-dim);}
.rr-tc .flag{border-radius:2px;flex-shrink:0;}
/* Countdown — kicker stack: a tiny "om" label over the value, right-aligned.
   No chip (stopped competing with the blue NY badge); bottom-aligned in .rr-foot. */
.rr-cd{margin-left:auto;flex-shrink:0;text-align:right;white-space:nowrap;line-height:1.15;}
.rr-cd-k{display:block;font-family:var(--font-mono),monospace;font-size:8px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);}
.rr-cd-v{font-family:var(--font-mono),monospace;font-size:12.5px;font-weight:700;color:var(--om-blue,#52e1fe);}
.rr-empty{padding:40px 20px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6;}
.rr-empty strong{color:var(--text-muted);}

/* ══ Per-couple journey bands (2026-07-19) — one .radar-band carousel per
   tracked couple on a populated draw, matches newest round leftmost. Reuses
   the .radar-band/__bar/__head/__nav/__rail chrome verbatim (see the signal-
   feed band above); .rj-card mirrors .rr-sig's fixed-width scroll-snap sizing
   but stays compact (a match card carries far less than a signup card). ══ */
.radar-band--journey{margin:0 0 14px;}
.radar-band--journey .radar-band__title--sm{font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.radar-band--journey .radar-band__sub{margin-top:1px;}
.rj-state{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono),monospace;font-size:10.5px;color:var(--text-dim);}
.rj-state--in,.rj-state--pending{color:var(--text-dim);}
.rj-state--champion{color:#ffb547;font-weight:700;}
.rj-state--out{color:var(--text-dim);}

.radar-band__rail .rj-card{flex:0 0 158px;min-width:158px;scroll-snap-align:start;}

/* Result signalling (2026-07-25) — replaces the flat green/red left rail, which
   read as a traffic light on an otherwise editorial card. Now: the card's own
   edge + a whisper of wash off the top edge carry the state (mint win / amber
   live / rose loss), score contrast carries emphasis, and a mono V/T kicker
   carries the fact — so colour never works alone. Nothing is flat-saturated;
   the rose runs lower-alpha than the mint because red reads louder at equal
   opacity, so matched values would make every loss shout. */
.rj-card{position:relative;--rj-edge:var(--card-border);--rj-wash:transparent;
  background:linear-gradient(180deg,var(--rj-wash),rgba(255,255,255,0) 54%),var(--card);
  border:1px solid var(--rj-edge);
  border-radius:12px;padding:10px 11px 9px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .18s, transform .18s;}
.rj-card:hover{--rj-edge:rgba(82,225,254,.34);transform:translateY(-1px);}
.rj-card--win{--rj-edge:rgba(74,222,128,.22);--rj-wash:rgba(74,222,128,.07);}
.rj-card--live{--rj-edge:rgba(255,181,71,.26);--rj-wash:rgba(255,181,71,.07);}
.rj-card--loss{--rj-edge:rgba(255,107,107,.19);--rj-wash:rgba(255,107,107,.055);}
.rj-card--win .sb-set{color:var(--text);}
/* Loss: step the score down one tone instead of fading the whole card (a blanket
   opacity muddied the flags and the round label too). --text-muted, not
   --text-dim: dim fails AA on --card at this size, muted clears 7:1. */
.rj-card--loss .sb-set{color:var(--text-muted);}
.rj-card--loss .flag{opacity:.72;}
.rj-res{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono),monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;}
.rj-res::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;}
.rj-res--win{color:#4ade80;}
.rj-res--loss{color:rgba(255,107,107,.68);}
.rj-round{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.rj-round-lbl{font-family:var(--font-mono),monospace;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);}
.rj-opp{display:flex;flex-direction:column;gap:3px;}
.rj-opp-pl{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);min-width:0;}
.rj-opp-pl .flag--xs{flex:none;}
.rj-opp-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rj-opp-rk{margin-left:auto;flex-shrink:0;font-family:var(--font-mono),monospace;font-size:9.5px;color:var(--text-dim);}
.rj-score{display:flex;gap:4px;flex-wrap:wrap;}
/* margin-top:auto pins the last row to the card's bottom edge. Rail cards
   stretch to the tallest card, so this makes the bottom row line up across the
   rail *structurally* — a kick-off time lands on the same line as a neighbour's
   score, and a 3-set score that wraps can't knock the row out of alignment. */
.rj-score,
.rj-card .sb-mid{margin-top:auto;}
/* Schedule line, journey-card variant: left-aligned (not centred like the
   two-row scoreboard it inherits from) and free to wrap — ellipsis in a 158px
   card turned "Tidligst kl." into "TIDLI…". */
.rj-card .sb-mid{padding:0;text-align:left;white-space:normal;}
/* --when = qualifier kicker stacked over the clock, which is set in the score's
   own mono so the two read as one format. */
.rj-card .sb-mid--when{display:flex;flex-direction:column;align-items:flex-start;}
.rj-card .sb-when-k{white-space:normal;overflow:visible;text-overflow:clip;
  font-family:var(--font-mono),monospace;font-size:9.5px;font-weight:700;line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
/* line-height (not height) carries the 26px slot: it makes the clock's row
   exactly as tall as a .sb-set chip and puts its baseline where the score's
   baseline sits — so bottom-pinned rows share a baseline, not just an edge. */
.rj-card .sb-when-v{font-family:var(--font-mono),monospace;font-size:.94rem;
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:26px;
  color:var(--text-muted);}
@media (max-width:640px){   /* match .sb-set's 24px / .88rem mobile chip */
  .rj-card .sb-when-v{font-size:.88rem;line-height:24px;}
}

@media (hover:none),(max-width:640px){
  .radar-band--journey .radar-band__nav{display:none !important;}
}

/* Dot pagination — the mobile counterpart to the ‹ › arrows: one dot per match,
   active dot follows scroll. Hidden by default so a desktop rail never carries
   both affordances; the media query reveals it exactly where the arrows go away.
   Indicator only (aria-hidden) — the rail itself is the control, and 5px dots
   would be a mis-tap trap in a card this dense. No transitions: a dot that
   eases between states reads as lag, not polish. */
.rj-dots{display:none;}
@media (hover:none),(max-width:640px){
  .radar-band--journey .rj-dots{display:flex;justify-content:center;gap:6px;margin-top:9px;}
}
.rj-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);}
.rj-dot.is-on{background:var(--om-blue,#52e1fe);}

/* ── Editorial banner hero — mirrors Premier .pp-hero, radar-scoped.
   The cinematic FIP Radar banner fades into the navy so the eyebrow/title/
   lede/stat-row read on top; the sub-nav stays above the box. Palette:
   navy #0a1020, cyan #52e1fe, amber #ffb547. */
.radar-t-header{border-bottom:none;padding-bottom:0;margin-bottom:26px;}
.radar-hero{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background:#0a1020;
  margin:14px 0 0;padding:clamp(22px,4vw,46px);
  min-height:clamp(200px,26vw,320px);
  display:flex;flex-direction:column;justify-content:center;
}
.radar-hero__visual{
  position:absolute;inset:0;z-index:-1;
  background:var(--radar-banner) center / cover no-repeat;
  opacity:.30;
}
.radar-hero__visual::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(10,16,32,.86) 0%, rgba(10,16,32,.42) 62%, rgba(10,16,32,.12) 100%),
    linear-gradient(0deg, rgba(10,16,32,.5) 0%, transparent 46%);
}
.radar-hero__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:640px;}
.radar-hero .t-title{font-size:clamp(30px,5vw,52px);margin:0 0 12px;}
.radar-hero .t-sub{margin:0 0 20px;}
/* Editorial tile variant of the sync beacon — drops the pill and renders as a
   stat tile matching .radar-numbers: mono label (with a soft live dot) over the
   big freshness-coloured clock over a "siden" caption. JS still owns .clock. */
.radar-hero .sync-beacon{
  display:inline-flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding:0;border:none;border-radius:0;background:none;overflow:visible;
}
.radar-hero .sync-beacon::after{display:none;}            /* kill scanning sweep */
.radar-hero .sync-beacon-top{display:inline-flex;align-items:center;gap:7px;}
.radar-hero .sync-beacon-sig{width:6px;height:6px;}
.radar-hero .sync-beacon-sig i{inset:0;animation:om-blink 1.6s ease-in-out infinite;}
.radar-hero .sync-beacon-sig::before,
.radar-hero .sync-beacon-sig::after{display:none;}        /* drop expanding rings */
.radar-hero .sync-beacon-label{font-size:9px;letter-spacing:.2em;color:#5d6a82;}
.radar-hero .sync-beacon[data-fresh="fresh"] .sync-beacon-label,
.radar-hero .sync-beacon[data-fresh="cool"] .sync-beacon-label{color:#5d6a82;}
.radar-hero .sync-beacon-val{display:inline-flex;align-items:baseline;gap:7px;}
.radar-hero .sync-beacon-clock{gap:6px;min-width:0;}
.radar-hero .sync-beacon-clock .rd-num{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.radar-hero .sync-beacon-clock .rd-u{font-size:9px;}
.radar-hero .sync-beacon-suffix{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#5d6a82;}
@media (prefers-reduced-motion:reduce){
  .radar-hero .sync-beacon-sig i{animation:none;}
}

.radar-numbers{
  display:grid;grid-template-columns:repeat(3,auto);margin:4px 0 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.radar-numbers > div{
  padding:12px 20px;display:flex;flex-direction:column;gap:4px;
  border-left:1px solid rgba(255,255,255,.08);
}
.radar-numbers > div:first-child{border-left:none;padding-left:0;}
.radar-numbers dt{font-family:var(--font-mono),monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#5d6a82;order:1;}
.radar-numbers dd{font-family:var(--font-mono),monospace;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#52e1fe;line-height:1;margin:0;order:2;}
.radar-numbers > div:nth-child(2) dd{color:#f3f6fb;}
.radar-numbers > div:nth-child(3) dd{color:#ffb547;}
.radar-numbers span{font-family:var(--font-mono),monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#5d6a82;order:3;}

@media (max-width:560px){
  .radar-numbers > div{padding:10px 12px;}
  .radar-numbers dd{font-size:19px;}
}