/* ============================================================================
   FieldSync — Competition Run THEME ("run-theme.css")
   A presenter-styled visual refresh for the Competition Run page. This is a
   pure theme LAYER: it only overrides CSS custom properties + adds cosmetic
   flourishes (glow backdrop, gradient accents, smoother transitions). It makes
   NO structural or logic changes, so the live-scoring flow is untouched.
   Scoped entirely to body[data-page="run"].
   ========================================================================== */

body[data-page="run"]{
  /* Presenter palette — everything downstream reads these variables. */
  --bg:      #0a0b10;
  --card:    #161a24;
  --bd:      rgba(148,163,184,.16);
  --text:    #f1f5f9;
  --muted:   #93a1b8;
  --accent:  #a78bfa;
  --accent2: #7c3aed;
  --shadow:  0 12px 34px rgba(0,0,0,.42);
  --radius:  16px;
  color:var(--text);
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(20,24,35,0) 42%, #0a0b10 100%),
    linear-gradient(180deg,#0f1117 0%,#0a0b10 100%) !important;
  min-height:100vh;
}

/* Soft drifting glow behind everything (matches the wizard + athlete display) */
body[data-page="run"]::before,
body[data-page="run"]::after{
  content:""; position:fixed; border-radius:50%; filter:blur(90px);
  z-index:0; pointer-events:none; opacity:.32;
}
body[data-page="run"]::before{
  width:52vw;height:52vw;left:-12vw;top:-16vw;
  background:radial-gradient(circle,#7c3aed 0%,rgba(124,58,237,0) 68%);
  animation:runGlowA 16s cubic-bezier(.22,.61,.36,1) infinite alternate;
}
body[data-page="run"]::after{
  width:46vw;height:46vw;right:-14vw;bottom:-20vw;
  background:radial-gradient(circle,#4c1d95 0%,rgba(76,29,149,0) 70%);
  animation:runGlowB 19s cubic-bezier(.22,.61,.36,1) infinite alternate;
}
@keyframes runGlowA{ 0%{ transform:translate3d(0,0,0) scale(1); } 33%{ transform:translate3d(15vw,10vh,0) scale(1.22); } 66%{ transform:translate3d(7vw,-8vh,0) scale(1.1); } 100%{ transform:translate3d(-4vw,5vh,0) scale(1.16); } }
@keyframes runGlowB{ 0%{ transform:translate3d(0,0,0) scale(1); } 33%{ transform:translate3d(-14vw,-9vh,0) scale(1.24); } 66%{ transform:translate3d(-6vw,7vh,0) scale(1.12); } 100%{ transform:translate3d(6vw,-5vh,0) scale(1.18); } }
@media (prefers-reduced-motion: reduce){
  body[data-page="run"] .tbl tbody tr{ transition:none; }
}
body[data-page="run"] .wrap{ position:relative; z-index:1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
body[data-page="run"] .topbar h1{
  background:linear-gradient(90deg,#fff 0%,#cbb6ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.02em;
}
body[data-page="run"] .topbar .sub{ color:var(--muted); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
body[data-page="run"] .card{
  background:linear-gradient(180deg,#161a24,#1b2030) !important;
  border:1px solid var(--bd) !important;
  box-shadow:var(--shadow) !important;
  border-radius:var(--radius) !important;
}
body[data-page="run"] .cardHd{ border-bottom:1px solid var(--bd) !important; }
body[data-page="run"] .cardTitle{ color:var(--text); }
body[data-page="run"] .muted{ color:var(--muted) !important; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
body[data-page="run"] input,
body[data-page="run"] select,
body[data-page="run"] textarea{
  background:#0f131c !important; color:var(--text) !important;
  border:1px solid rgba(148,163,184,.26) !important; border-radius:10px !important;
  transition:border-color .15s, box-shadow .15s;
}
body[data-page="run"] input:focus,
body[data-page="run"] select:focus,
body[data-page="run"] textarea:focus{
  border-color:rgba(167,139,250,.6) !important;
  box-shadow:0 0 0 3px rgba(124,58,237,.22) !important; outline:none;
}
body[data-page="run"] input::placeholder,
body[data-page="run"] textarea::placeholder{ color:#64748b; }
body[data-page="run"] label{ color:var(--muted); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
body[data-page="run"] .btn,
body[data-page="run"] .btnSmall,
body[data-page="run"] .resultBtn{
  background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid rgba(148,163,184,.26);
  transition:transform .1s, border-color .15s, background .15s, box-shadow .15s;
}
body[data-page="run"] .btn:hover,
body[data-page="run"] .btnSmall:hover,
body[data-page="run"] .resultBtn:hover{
  border-color:rgba(167,139,250,.5); background:rgba(124,58,237,.12); transform:translateY(-1px);
}
body[data-page="run"] .btn.primary,
body[data-page="run"] .btnSmall.primary{
  background:linear-gradient(135deg,#7c3aed,#a78bfa) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 4px 14px rgba(124,58,237,.4);
}
body[data-page="run"] .btn.primary:hover,
body[data-page="run"] .btnSmall.primary:hover{
  box-shadow:0 8px 22px rgba(124,58,237,.55);
}
body[data-page="run"] .btn.danger,
body[data-page="run"] .btnSmall.danger{
  color:#fca5a5; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08);
}
body[data-page="run"] a.btn{ text-decoration:none; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
/* Let wide tables scroll horizontally instead of clipping the right column
   (e.g. the Edit button) on smaller/zoomed screens. */
body[data-page="run"] .tableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
body[data-page="run"] .tableWrap .tbl{ min-width:640px; }
body[data-page="run"] .tbl th{
  color:var(--muted); border-bottom-color:var(--bd) !important;
  text-transform:uppercase; font-size:11px; letter-spacing:.03em;
}
body[data-page="run"] .tbl td{ color:var(--text); border-bottom-color:var(--bd) !important; }
body[data-page="run"] .tbl tbody tr{ transition:background .12s; }
body[data-page="run"] .tbl tbody tr:hover td{ background:rgba(124,58,237,.08); }
body[data-page="run"] .tbl td:last-child, body[data-page="run"] .tbl th:last-child{ padding-right:14px; }

/* ── Pills / status ─────────────────────────────────────────────────────── */
body[data-page="run"] .pill,
body[data-page="run"] .authPill,
body[data-page="run"] .meetSwitcherBtn{
  background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.26); color:var(--text);
}
body[data-page="run"] .meetSwitcherDrop{
  background:#161a24; border:1px solid rgba(148,163,184,.26);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
body[data-page="run"] .meetSwitcherItem:hover{ background:rgba(124,58,237,.14); }

/* ── Segmented toggles ──────────────────────────────────────────────────── */
body[data-page="run"] .segToggle{ background:#1b2030; border-color:rgba(148,163,184,.26); }
body[data-page="run"] .segBtn{ color:var(--muted); }
body[data-page="run"] .segBtn.active,
body[data-page="run"] .segBtn[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(124,58,237,.85),rgba(167,139,250,.85));
  color:#fff;
}

/* ── Toggle switches ────────────────────────────────────────────────────── */
body[data-page="run"] .toggleTrack{ background:#0f131c; border-color:rgba(148,163,184,.26); }

/* ── Modals / overlays ──────────────────────────────────────────────────── */
body[data-page="run"] .modalCard,
body[data-page="run"] .modal .card,
body[data-page="run"] .sheet{
  background:linear-gradient(180deg,#161a24,#1b2030) !important;
  border:1px solid var(--bd) !important;
}
body[data-page="run"] .badge{ background:#1b2030; border-color:rgba(148,163,184,.26); color:var(--text); }

/* Gentle entrance for the main scoring views */
body[data-page="run"] .page > .card{ animation:runCardIn .3s cubic-bezier(.22,.61,.36,1); }
@keyframes runCardIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
  body[data-page="run"] .page > .card{ animation:none; }
}

/* ============================================================================
   Competition Run � MEET SELECTION overlay (run-select.js)
   Presenter-styled screen that opens the Run page, matching the Meet Manager
   welcome (search, filters, status badges, dates).
   ========================================================================== */
:root{
  --rs-accent:#7c3aed; --rs-accent2:#a78bfa; --rs-accent3:#c4b5fd;
  --rs-card:#161a24; --rs-card2:#1b2030; --rs-line:rgba(148,163,184,.16);
  --rs-line2:rgba(148,163,184,.26); --rs-text:#f1f5f9; --rs-muted:#93a1b8; --rs-dim:#64748b;
  --rs-ease:cubic-bezier(.22,.61,.36,1);
}
body.rsOn{ overflow:hidden; }
.rsStage{
  position:fixed; inset:0; z-index:3000; display:none; flex-direction:column;
  color:var(--rs-text); font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(120% 90% at 50% -8%, rgba(20,24,35,0) 42%, #0a0b10 100%), linear-gradient(180deg,#0f1117 0%,#0a0b10 100%);
  -webkit-font-smoothing:antialiased;
}
.rsStage.rsBusy{ opacity:.6; pointer-events:none; }
.rsBackdrop{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.rsGlow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; }
.rsGlowA{ width:55vw;height:55vw;left:-12vw;top:-18vw; background:radial-gradient(circle,#7c3aed 0%,#7c3aed00 68%); animation:rsDriftA 15s var(--rs-ease) infinite alternate; }
.rsGlowB{ width:48vw;height:48vw;right:-14vw;bottom:-20vw; background:radial-gradient(circle,#4c1d95 0%,#4c1d9500 70%); animation:rsDriftB 18s var(--rs-ease) infinite alternate; }
@keyframes rsDriftA{ 0%{ transform:translate3d(0,0,0) scale(1); } 33%{ transform:translate3d(16vw,11vh,0) scale(1.24); } 66%{ transform:translate3d(8vw,-9vh,0) scale(1.12); } 100%{ transform:translate3d(-4vw,5vh,0) scale(1.18); } }
@keyframes rsDriftB{ 0%{ transform:translate3d(0,0,0) scale(1); } 33%{ transform:translate3d(-15vw,-10vh,0) scale(1.26); } 66%{ transform:translate3d(-6vw,8vh,0) scale(1.14); } 100%{ transform:translate3d(6vw,-5vh,0) scale(1.2); } }
@media (prefers-reduced-motion: reduce){ .rsMeetPub .rsPubDot{ animation:none; } }

.rsTop{ position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(14px,2.2vh,22px) clamp(18px,3vw,42px); }
.rsBrand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.rsBrandName{ font-size:16px; background:linear-gradient(90deg,#fff,#cbb6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rsBrandSub{ font-size:13px; color:var(--rs-muted); font-weight:600; }
.rsGhostBtn{ text-decoration:none; border:1px solid var(--rs-line2); background:rgba(255,255,255,.03); color:var(--rs-text); border-radius:10px; padding:8px 13px; font-size:12.5px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s; }
.rsGhostBtn:hover{ border-color:rgba(167,139,250,.5); background:rgba(124,58,237,.12); }

.rsBody{ position:relative; z-index:5; flex:1 1 auto; overflow-y:auto; padding:clamp(8px,2vh,24px) clamp(16px,4vw,48px) 60px; }
.rsInner{ max-width:1040px; margin:0 auto; }
.rsHero{ text-align:center; padding:clamp(16px,4vh,48px) 0 20px; }
.rsHeadline{ font-size:clamp(28px,5vh,50px); font-weight:800; letter-spacing:-.02em; line-height:1.1; background:linear-gradient(90deg,#fff 0%,#cbb6ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rsSubhead{ margin:10px auto 0; color:var(--rs-muted); font-size:15px; max-width:620px; line-height:1.55; }

.rsToolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; position:relative; }
.rsSearchWrap{ position:relative; flex:1 1 260px; min-width:200px; }
.rsSearchIcon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6; pointer-events:none; }
#rsSearch{ width:100%; background:#0f131c; color:var(--rs-text); border:1px solid var(--rs-line2); border-radius:12px; padding:13px 14px 13px 40px; font-size:15px; transition:border-color .15s, box-shadow .15s; }
#rsSearch:focus{ outline:none; border-color:rgba(167,139,250,.6); box-shadow:0 0 0 3px rgba(124,58,237,.22); }
#rsSearch::placeholder{ color:var(--rs-dim); }
.rsToolbarBtns{ display:flex; align-items:center; gap:10px; }
.rsSortSel{ background:#0f131c; color:var(--rs-text); border:1px solid var(--rs-line2); border-radius:12px; padding:12px; font-size:13px; font-weight:600; cursor:pointer; }
.rsSortSel:focus{ outline:none; border-color:rgba(167,139,250,.6); }
.rsFilterBtn{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); color:var(--rs-text); border:1px solid var(--rs-line2); border-radius:12px; padding:12px 16px; font-size:13px; font-weight:800; cursor:pointer; transition:border-color .15s, background .15s; }
.rsFilterBtn:hover{ border-color:rgba(167,139,250,.5); background:rgba(124,58,237,.12); }
.rsFilterCount{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(135deg,#7c3aed,#a78bfa); border-radius:999px; }

.rsFilterPanel{ position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:min(560px,92vw); background:#12151f; border:1px solid var(--rs-line2); border-radius:16px; padding:18px; box-shadow:0 22px 60px rgba(0,0,0,.55); }
.rsFilterGroup{ margin-bottom:16px; }
.rsFilterRow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .rsFilterRow{ grid-template-columns:1fr; } }
.rsFilterLabel{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--rs-accent3); margin-bottom:8px; }
.rsChipRow{ display:flex; flex-wrap:wrap; gap:7px; }
.rsChip{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--rs-muted); background:rgba(255,255,255,.03); border:1px solid var(--rs-line2); border-radius:999px; padding:6px 13px; transition:all .14s var(--rs-ease); }
.rsChip:hover{ border-color:rgba(167,139,250,.5); color:var(--rs-text); }
.rsChip.on{ background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(167,139,250,.9)); border-color:transparent; color:#fff; }
.rsFilterFoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--rs-line); }
.rsDoneBtn{ background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; border:none; border-radius:10px; padding:9px 18px; font-weight:800; font-size:13px; cursor:pointer; }

.rsGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.rsNoResults{ grid-column:1/-1; text-align:center; color:var(--rs-muted); font-size:14px; padding:34px 20px; background:rgba(255,255,255,.02); border:1px dashed var(--rs-line2); border-radius:16px; }
.rsMeetCard{ position:relative; cursor:pointer; text-align:left; background:linear-gradient(180deg,var(--rs-card),var(--rs-card2)); border:1px solid var(--rs-line); border-radius:16px; padding:20px; transition:transform .16s var(--rs-ease), border-color .16s, box-shadow .16s; }
.rsMeetCard:hover{ transform:translateY(-3px); border-color:rgba(167,139,250,.5); box-shadow:0 14px 40px rgba(124,58,237,.22); }
.rsMeetCard .rsMeetName{ font-size:17px; font-weight:800; margin-bottom:4px; padding-right:96px; }
.rsMeetCard .rsMeetDates{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--rs-accent3); margin:4px 0 6px; }
.rsMeetCard .rsMeetDatesIcon{ font-size:12px; opacity:.85; }
.rsMeetCard .rsMeetDates.rsMeetNoDate{ color:var(--rs-dim); font-weight:600; }
.rsMeetCard .rsMeetMeta{ font-size:12.5px; color:var(--rs-muted); }
.rsMeetCard .rsMeetArrow{ margin-top:16px; font-size:13px; font-weight:800; color:var(--rs-accent2); }
.rsMeetPub{ position:absolute; top:16px; right:16px; font-size:10px; font-weight:900; letter-spacing:.05em; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; text-transform:uppercase; }
.rsMeetPub .rsPubDot{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:rsPulse 1.8s ease-out infinite; }
@keyframes rsPulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.5);} 70%{ box-shadow:0 0 0 6px rgba(74,222,128,0);} 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0);} }
@media (prefers-reduced-motion: reduce){ .rsMeetPub .rsPubDot{ animation:none; } }
.rsMeetPub.live{ background:rgba(34,197,94,.16); color:#4ade80; border:1px solid rgba(34,197,94,.4); }
.rsMeetPub.upcoming{ background:rgba(56,189,248,.14); color:#7dd3fc; border:1px solid rgba(56,189,248,.38); }
.rsMeetPub.ready{ background:rgba(45,212,191,.14); color:#5eead4; border:1px solid rgba(45,212,191,.38); }
.rsMeetPub.completed{ background:rgba(148,163,184,.16); color:#cbd5e1; border:1px solid rgba(148,163,184,.34); }
.rsMeetPub.incomplete{ background:rgba(245,158,11,.16); color:#fcd34d; border:1px solid rgba(245,158,11,.44); }
.rsMeetPub.draft{ background:rgba(148,163,184,.12); color:var(--rs-muted); border:1px solid var(--rs-line2); }