/* RiconTop menu and switches (theme.js adds the icons, the sliding pill and the curved line).
   Light, phone:     white bar, red pill slides to the tab you pick, its label turns white.
   Light, computer:  red bar, a lighter pill and a white dot under the tab you pick.
   Dark (both):      black bar, a glowing red line along the bottom bends up under the tab you pick.
   The AFL / AFLW switches use the same style. Loaded last, so it wins over the older menu styles. */
:root { --rt-red: #d7192b; --rt-red2: #b80f22; --rt-glow: #ef3340; }

/* ---------- the bar ---------- */
html body .topnav.tabbar.tabbar { display: flex; align-items: stretch; gap: 0 !important; padding: 5px !important;
  border-radius: 999px !important; border: 0 !important; isolation: isolate;
  --tab-style: pill; --tb-bg: #ffffff; --tb-ink: #6b7280; --tb-on: #ffffff; --tb-pill: linear-gradient(180deg, #e11d2e, #c8102e);
  --tb-pillshadow: 0 6px 14px rgba(200,16,46,.4);
  background: var(--tb-bg) !important; box-shadow: 0 12px 28px -10px rgba(15,23,42,.3) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .topnav.tabbar.tabbar > a { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px !important; font-size: .9rem !important; font-weight: 600; color: var(--tb-ink) !important;
  background: transparent !important; box-shadow: none !important; border-radius: 999px; white-space: nowrap; transition: color .25s; }
html body .topnav.tabbar.tabbar > a .ti { width: 18px; height: 18px; flex: none; display: block !important; }
html body .topnav.tabbar.tabbar > a .tl { display: inline !important; }
html body .topnav.tabbar.tabbar > a.lit { color: var(--tb-on) !important; }
html body .topnav.tabbar.tabbar .modebtn { color: var(--tb-ink); align-self: center; margin: 0 4px 0 2px; }
html body .topnav.tabbar.tabbar > .pill { background: var(--tb-pill) !important; box-shadow: var(--tb-pillshadow) !important; z-index: 0; }

/* computers, light: red bar */
@media (min-width: 701px) {
  html:not(.dark) body .topnav.tabbar.tabbar { --tb-bg: linear-gradient(180deg, var(--rt-red), var(--rt-red2)); --tb-ink: rgba(255,255,255,.88); --tb-on: #fff;
    --tb-pill: rgba(255,255,255,.22); --tb-pillshadow: inset 0 1px 0 rgba(255,255,255,.35); box-shadow: 0 12px 28px -10px rgba(200,16,46,.55) !important; }
  html:not(.dark) body .topnav.tabbar.tabbar > a.lit::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: #fff; }
  html:not(.dark) body .topnav.tabbar.tabbar > a { position: relative; }
  html:not(.dark) body .topnav.tabbar.tabbar .modebtn { color: #fff; }
}
/* phones: icon above the label */
@media (max-width: 700px) {
  html body .topnav.tabbar.tabbar > a { flex-direction: column; gap: 3px; padding: 7px 10px 6px !important; font-size: .68rem !important; flex: 1 1 0; min-width: 0; }
  html body .topnav.tabbar.tabbar > a .ti { width: 21px; height: 21px; }
  html body .topnav.tabbar.tabbar { border-radius: 26px !important; }
  html:not(.glass) body header .topnav.tabbar.tabbar { width: 100%; margin: 4px 0 0 !important; }
  html.glass body > .topnav.tabbar.tabbar { width: calc(100% - 24px); max-width: 460px; }
}
@media (max-width: 370px) { html body .topnav.tabbar.tabbar > a { padding: 7px 4px 6px !important; font-size: .62rem !important; } }

/* dark (phones and computers): black bar with the glowing red curve */
html.dark body .topnav.tabbar.tabbar { --tab-style: notch; --tb-bg: #161616; --tb-ink: #e5e7eb; --tb-on: var(--rt-glow);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.05) !important; padding: 5px 14px 9px !important; border-radius: 18px !important; }
html.dark body .topnav.tabbar.tabbar > a.lit::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--rt-glow); box-shadow: 0 0 8px var(--rt-glow); }
html.dark body .topnav.tabbar.tabbar > a { position: relative; }

/* the curved line (dark) */
.glide > svg.notch { position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; width: 100%; height: calc(100% - 4px); pointer-events: none; z-index: 0; opacity: 0; transition: opacity .25s; overflow: visible; }
.glide.notched > svg.notch { opacity: 1; }
.glide > svg.notch path { fill: none; stroke: var(--rt-glow); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(239,51,64,.85)); }
.glide.notched > .pill { opacity: 0 !important; }

/* ---------- AFL / AFLW switches (Fixture, Players, Captain Picks, the score banner) ---------- */
html body .comptabs.glide.glide, html body .comp .seg.glide.glide { --tab-style: pill; background: #fff !important; border: 0 !important;
  box-shadow: 0 6px 16px -6px rgba(15,23,42,.25) !important; }
html body .comptabs.glide.glide.glide.glide > a, html body .comp .seg.glide.glide.glide.glide > a { color: #6b7280 !important; background: transparent !important; box-shadow: none !important; }
html body .comptabs.glide.glide.glide.glide > a.lit, html body .comp .seg.glide.glide.glide.glide > a.lit { color: #fff !important; }
html body .comptabs.glide.glide > .pill, html body .comp .seg.glide.glide > .pill { background: linear-gradient(180deg, #e11d2e, #c8102e) !important; box-shadow: 0 5px 12px rgba(200,16,46,.4) !important; }
@media (min-width: 701px) {
  html:not(.dark) body .comptabs.glide.glide { background: linear-gradient(180deg, var(--rt-red), var(--rt-red2)) !important; box-shadow: 0 8px 18px -8px rgba(200,16,46,.55) !important; }
  html:not(.dark) body .comptabs.glide.glide.glide.glide > a { color: rgba(255,255,255,.88) !important; }
  html:not(.dark) body .comptabs.glide.glide > .pill { background: rgba(255,255,255,.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important; }
}
html.dark body .comptabs.glide.glide, html.dark body .comp .seg.glide.glide { --tab-style: notch; background: #161616 !important; padding: 4px 14px 8px !important; border-radius: 14px !important;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05) !important; }
html.dark body .comptabs.glide.glide.glide.glide > a, html.dark body .comp .seg.glide.glide.glide.glide > a { color: #e5e7eb !important; }
html.dark body .comptabs.glide.glide.glide.glide > a.lit, html.dark body .comp .seg.glide.glide.glide.glide > a.lit { color: var(--rt-glow) !important; }
/* the banner's switch is stacked (AFL above AFLW), so in dark mode it keeps a pill: an outlined red one */
html.dark body .comp .seg.glide.glide { padding: 3px !important; border-radius: 12px !important; }
html.dark body .comp .seg.glide.glide > .pill { background: rgba(239,51,64,.12) !important; box-shadow: inset 0 0 0 1.5px var(--rt-glow), 0 0 12px rgba(239,51,64,.45) !important; }

@media (prefers-reduced-motion: reduce) { .glide > svg.notch { transition: none; } }
@media (max-width: 700px) { html body .topnav.tabbar.tabbar > .pill { border-radius: 20px !important; } }