/* ============================================================================================
   Ohms.Afl Console — design tokens & component classes.
   Ohms brand: void canvas (#05080A) + cyan signal (#00E5FF). Adapted from the WorldCup
   wc-* console (TRACK-011): wc- → afl-, green signal → cyan signal, group/bracket → ladder/finals.
   Trading-terminal density — do NOT air out the spacing.
   ============================================================================================ */

:root {
  --void:#05080A; --bg-page:#05080A; --bg-rail:#080C0F; --bg-card:#0A0F13; --bg-inset:#080C10;
  --bg-chip:#0D161B; --bg-track:#080C0F;
  --border:#1A2730; --border-hairline:#111A20;
  --text-primary:#E7F4F8; --text-secondary:#9DB3BD; --text-muted:#6F8893; --text-faint:#54707C;
  --cyan:#00E5FF; --cyan-mid:#11A6BC; --cyan-deep:#0B5C6B; --cyan-idle:#16323A;
  --gold:#E0B64E; --gold-dim:#A8842F; --gold-text:#C9B677;
  --red:#E5564D; --on-cyan:#03161A;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --michroma:'Michroma',sans-serif;
  --ui:'Barlow',system-ui,sans-serif;
  --sc:'Barlow Semi Condensed',system-ui,sans-serif;
}

html, body { margin:0; padding:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--ui); height:100%; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
h1:focus { outline:none; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#1A2730; border-radius:5px; border:2px solid #060A0C; }
::-webkit-scrollbar-track { background:transparent; }
::selection { background:rgba(0,229,255,0.25); }
@keyframes aflPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes aflEq { 0%,100% { transform:scaleY(0.2); } 50% { transform:scaleY(1); } }
input[type="range"] { accent-color:#00E5FF; }

/* ---- Loading / error state ---------------------------------------------------------------- */
.afl-loadstate { display:flex; align-items:center; gap:10px; padding:8px 2px; }
.afl-loadstate-error { flex-direction:column; align-items:flex-start; gap:5px; }
/* Equaliser-bar loader — brand-cyan bars bouncing out of phase (the "live meter" look). */
.afl-eq { display:inline-flex; align-items:flex-end; gap:3px; height:18px; flex:none; }
.afl-eq i { display:block; width:3px; height:100%; border-radius:1.5px; transform-origin:center bottom;
  background:linear-gradient(180deg,#4FF0FF,#11A6BC); box-shadow:0 0 5px rgba(0,229,255,0.25);
  animation:aflEq 1.1s ease-in-out infinite; }
.afl-eq i:nth-child(1) { animation-delay:-0.92s; animation-duration:1.05s; }
.afl-eq i:nth-child(2) { animation-delay:-0.48s; animation-duration:1.32s; }
.afl-eq i:nth-child(3) { animation-delay:-0.21s; animation-duration:0.88s; }
.afl-eq i:nth-child(4) { animation-delay:-0.69s; animation-duration:1.48s; }
.afl-eq i:nth-child(5) { animation-delay:-0.34s; animation-duration:1.12s; }
.afl-eq i:nth-child(6) { animation-delay:-0.61s; animation-duration:0.96s; }
.afl-eq i:nth-child(7) { animation-delay:-0.12s; animation-duration:1.24s; }
@media (prefers-reduced-motion:reduce) {
  .afl-eq i { animation:none; transform:scaleY(0.5); }
  .afl-eq i:nth-child(even) { transform:scaleY(0.85); }
}
.afl-retry { margin-top:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.5px;
  color:var(--cyan); background:rgba(0,229,255,0.08); border:1px solid var(--cyan-deep);
  border-radius:5px; padding:5px 13px; cursor:pointer; }
.afl-retry:hover { background:rgba(0,229,255,0.14); }

/* ---- App shell ---------------------------------------------------------------------------- */
.afl-app { display:flex; width:100%; height:100vh; overflow:hidden; }
.afl-rail { width:214px; min-width:214px; display:flex; flex-direction:column;
  border-right:1px solid var(--border); background:var(--bg-rail); }
.afl-rail-head { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.afl-rail-lockup { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.afl-rail-mark { width:22px; height:22px; color:var(--cyan); flex:none; }
.afl-rail-divider { width:1px; height:16px; background:var(--cyan); opacity:0.35; flex:none; }
.afl-rail-ohms { font-family:var(--michroma); font-size:13px; letter-spacing:0.06em; color:var(--text-primary); line-height:1; }
.afl-brand { font-size:22px; font-weight:800; letter-spacing:0.5px; line-height:1.2; }
.afl-brand-sub { font-size:10.5px; color:var(--text-muted); letter-spacing:0.4px; }
.afl-nav { display:flex; flex-direction:column; gap:2px; padding:10px 8px; }
.afl-nav a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px; }
.afl-nav a:hover { background:rgba(0,229,255,0.06); }
.afl-nav a.active { background:rgba(0,229,255,0.10); }
.afl-nav .dot { width:6px; height:6px; border-radius:2px; background:var(--cyan-idle); }
.afl-nav a.active .dot { background:var(--cyan); }
.afl-nav .label { font-size:13px; font-weight:600; color:var(--text-secondary); flex:1; }
.afl-nav a.active .label { color:var(--text-primary); }
.afl-nav span.disabled { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px; opacity:0.4; cursor:default; }
.afl-nav .route { font-family:var(--mono); font-size:9px; color:var(--text-faint); }
.afl-nav-section { font-family:var(--sc); font-size:9px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-faint); padding:10px 12px 4px; }
.afl-rail-spacer { flex:1; }
.afl-status { margin:10px; padding:10px 12px; border:1px solid var(--border); border-radius:7px;
  background:var(--bg-card); }
.afl-status-row { display:flex; align-items:center; gap:7px; }
.afl-livedot { width:7px; height:7px; border-radius:50%; background:var(--cyan);
  animation:aflPulse 2.2s infinite; }
.afl-rail-foot { padding:0 16px 14px; font-family:var(--mono); font-size:9px; color:var(--text-faint);
  letter-spacing:0.5px; }

.afl-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.afl-topbar { height:52px; min-height:52px; display:flex; align-items:center; gap:12px;
  padding:0 20px; border-bottom:1px solid var(--border); background:var(--bg-rail); }
.afl-topbar .title { font-size:16px; font-weight:700; letter-spacing:0.2px; }
.afl-content { flex:1; overflow:auto; padding:14px 20px 20px; }

/* ---- Cards & sections --------------------------------------------------------------------- */
.afl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:13px 15px; }
.afl-card-prose { padding:18px 20px; }
.afl-card-gold { border-color:rgba(224,182,78,0.3); }
.afl-inset { background:var(--bg-inset); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; }
.afl-sech { font-family:var(--sc); font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--text-secondary); }
.afl-sech.gold { color:var(--gold); }
.afl-sech-note { font-family:var(--mono); font-size:9.5px; color:var(--text-muted); }
.afl-sech-row { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }

/* ---- Chips, mono, bars -------------------------------------------------------------------- */
.afl-mono { font-family:var(--mono); }
.afl-code { font-family:var(--mono); font-size:10.5px; font-weight:600; text-align:center;
  background:var(--bg-chip); border:1px solid var(--border); border-radius:3px; padding:1.5px 6px; }
.afl-chip { font-family:var(--mono); font-size:10.5px; padding:5px 13px; border-radius:5px;
  cursor:pointer; border:1px solid var(--border); color:var(--text-secondary); background:var(--bg-card); }
.afl-chip.active { background:rgba(0,229,255,0.12); border-color:rgba(0,229,255,0.4); color:var(--cyan); }
.afl-typechip { font-family:var(--mono); font-size:8.5px; letter-spacing:0.5px; color:var(--text-secondary);
  border:1px solid var(--border); border-radius:3px; padding:1.5px 6px; }
.afl-track { background:var(--bg-track); border-radius:3px; overflow:hidden; }
.afl-track .fill { height:100%; border-radius:3px; }
.afl-bar-cyan { background:linear-gradient(90deg,#0B5C6B,#00E5FF); }
.afl-bar-gold { background:linear-gradient(90deg,#A8842F,#E0B64E); }

/* Cross-entity drill-down (team references → /team/{code}). A club colour swatch + 3-letter code. */
.afl-teamref { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; cursor:pointer; }
.afl-teamref:hover { color:var(--cyan); }
.afl-teamref:hover .afl-code { color:var(--cyan); border-color:rgba(0,229,255,0.4); }
.afl-swatch { width:13px; height:13px; border-radius:3px; flex:none; border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }

/* ---- Form strip (last-5 W/L/D pips) ------------------------------------------------------- */
.afl-form { display:inline-flex; gap:3px; }
.afl-pip { width:14px; height:14px; border-radius:3px; font-family:var(--mono); font-size:8.5px;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center; color:#04140A; }
.afl-pip.w { background:linear-gradient(180deg,#4FF0FF,#11A6BC); }
.afl-pip.l { background:rgba(229,86,77,0.85); color:#1a0606; }
.afl-pip.d { background:var(--cyan-idle); color:var(--text-secondary); }

/* ---- Edge chip ---------------------------------------------------------------------------- */
.afl-edge { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.4px;
  color:var(--gold); border:1px solid rgba(224,182,78,0.4); background:rgba(224,182,78,0.08);
  border-radius:4px; padding:2px 7px; }
.afl-magic { font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--cyan);
  border:1px solid rgba(0,229,255,0.4); background:rgba(0,229,255,0.08); border-radius:4px; padding:2px 7px; }

/* ---- Tables ------------------------------------------------------------------------------- */
.afl-table { width:100%; border-collapse:collapse; font-size:12px; }
.afl-table th { font-family:var(--sc); font-size:9.5px; font-weight:700; letter-spacing:0.8px;
  text-transform:uppercase; color:var(--text-muted); text-align:right; padding:6px 8px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.afl-table th.l, .afl-table td.l { text-align:left; }
.afl-table td { padding:7px 8px; text-align:right; border-bottom:1px solid var(--border-hairline);
  font-family:var(--mono); color:var(--text-secondary); }
.afl-table tr:hover td { background:rgba(0,229,255,0.03); }
.afl-table tr.top8-line td { border-bottom:2px solid var(--cyan); }
.afl-table td.pos { color:var(--text-primary); font-weight:600; }

/* ---- Fixture cards ------------------------------------------------------------------------ */
.afl-fixture { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:11px 13px; display:flex; flex-direction:column; gap:8px; }
.afl-fixture-row { display:flex; align-items:center; gap:10px; }
.afl-fixture-meta { font-family:var(--mono); font-size:9.5px; color:var(--text-muted); }

/* ---- Buttons ------------------------------------------------------------------------------ */
.afl-btn-cyan { font-family:var(--mono); font-weight:600; color:var(--on-cyan);
  background:linear-gradient(180deg,#4FF0FF,#11A6BC); border:none; border-radius:5px; cursor:pointer; padding:7px 14px; }
.afl-btn-cyan:hover { filter:brightness(1.1); }
.afl-btn-ghost { font-family:var(--mono); font-weight:600; color:var(--text-secondary);
  border:1px solid var(--border); background:transparent; border-radius:4px; cursor:pointer; padding:7px 12px; }
.afl-btn-ghost:hover { color:var(--cyan); border-color:rgba(0,229,255,0.4); }

/* tone helpers */
.t-cyan { color:var(--cyan); } .t-gold { color:var(--gold); } .t-red { color:var(--red); }
.t-muted { color:var(--text-muted); } .t-faint { color:var(--text-faint); } .t-sec { color:var(--text-secondary); }
.t-pri { color:var(--text-primary); }

/* error ui (framework) */
#blazor-error-ui { background:#13160E; color:var(--gold); bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,0.2);
  display:none; left:0; padding:0.6rem 1.25rem 0.7rem; position:fixed; width:100%; z-index:1000;
  font-family:var(--mono); font-size:12px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }
.blazor-error-boundary { background:#b32121; padding:1rem; color:white; }
.blazor-error-boundary::after { content:"An error has occurred."; }

.afl-content svg { max-width:100%; }

/* ---- Pundit value board (TRACK-018) ------------------------------------------------------- */
/* Desktop (>880px): a dense grid row (.afl-pundit-grid) inside a sideways-scroll wrapper. Phone /
   portrait-tablet (≤880px): the grid + header are hidden and each row stacks as a labelled card
   (.afl-pundit-stack) — this board is wider than the app's generic 480px breakpoint, so it switches
   earlier. Attribution chips + the price ladder are shared by both layouts. */
.afl-pundit-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.afl-pundit-inner { min-width:760px; }
.afl-pundit-stack { display:none; }
.afl-pundit-row:hover { background:rgba(0,229,255,0.03); }
.afl-pundit-lbl { font-family:var(--mono); font-size:8px; letter-spacing:1px; color:var(--text-muted); }

@media (max-width:880px) {
  .afl-pundit-scroll { overflow-x:visible; }
  .afl-pundit-inner { min-width:0; }
  .afl-pundit-head { display:none !important; }
  .afl-pundit-grid { display:none !important; }
  .afl-pundit-stack { display:block; }
  .afl-pundit-attr { margin-left:0 !important; }
  .afl-pundit-ladder { margin-left:0 !important; }
}

/* ============================================================================================
   RESPONSIVE — off-canvas drawer ≤960px. Drawer state lives in the Blazor tree (_navOpen), not JS.
   ============================================================================================ */
.afl-hamburger { display:none; }
.afl-nav-overlay { display:none; }
.afl-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (min-width:961px) {
  .afl-app { min-width:1100px; }
}

@media (max-width:960px) {
  .afl-app { min-width:0; }
  .afl-rail {
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:264px; min-width:264px; max-width:84vw;
    transform:translateX(-100%);
    transition:transform 0.22s ease;
    box-shadow:2px 0 18px rgba(0,0,0,0.5);
  }
  .afl-app.afl-nav-open .afl-rail { transform:translateX(0); }
  .afl-main { width:100%; min-width:0; }
  .afl-nav-overlay {
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(4,6,8,0.62);
    opacity:0; visibility:hidden;
    transition:opacity 0.22s ease, visibility 0.22s ease;
  }
  .afl-app.afl-nav-open .afl-nav-overlay { opacity:1; visibility:visible; }
  .afl-hamburger {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:-8px; margin-right:2px;
    flex:none; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--border); border-radius:6px;
    color:var(--text-secondary);
  }
  .afl-hamburger:hover { color:var(--text-primary); border-color:var(--cyan-deep); }
  .afl-hamburger:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
  .afl-hamburger svg { width:20px; height:20px; display:block; }
  .afl-app.afl-nav-open .afl-content { overflow:hidden; }
}

@media (max-width:480px) {
  .afl-topbar { padding:0 12px; gap:8px; }
  .afl-topbar .title { font-size:15px; }
  .afl-content { padding:12px 12px 16px; }
  .afl-card { padding:12px 13px; }
  .afl-nav a { padding:11px 12px; min-height:44px; }
  .afl-chip { padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; }
}

@media (prefers-reduced-motion:reduce) {
  .afl-rail, .afl-nav-overlay { transition:none; }
}

/* ============================================================================
   TRACK-012 — auth: native /login + /signup chrome + "My teams" band controls.
   Re-skinned from the WorldCup login into the AFL void+cyan token system.
   ========================================================================= */

.afl-input {
  font-family:var(--mono); font-size:11px; color:var(--text-primary);
  background:var(--bg-inset); border:1px solid var(--border); border-radius:4px;
  padding:6px 9px; outline:none;
}
.afl-input:focus { border-color:var(--cyan-deep); }
.afl-input::placeholder { color:var(--text-faint); }

.afl-focus-card { padding:11px 12px; }
.afl-myteams { margin-bottom:16px; }

/* ---- login / signup stage ---- */
.afl-login-stage {
  position:fixed; inset:0; overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%, #0A1620 0%, var(--void) 60%);
  display:flex; align-items:center; justify-content:center;
}
.afl-login-grid {
  position:absolute; inset:0; opacity:0.35;
  background-image:
    linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 80%);
}
.afl-login-floods { position:absolute; inset:0; pointer-events:none; }
.afl-flood { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(120px); opacity:0.30; }
.afl-flood.a { top:-180px; left:-120px; background:var(--cyan-mid); }
.afl-flood.b { bottom:-220px; right:-120px; background:var(--cyan-deep); }

.afl-login-panel { position:relative; z-index:2; width:100%; max-width:420px; padding:24px; }
.afl-login-card {
  background:rgba(10,15,19,0.92); border:1px solid var(--border); border-radius:12px;
  padding:30px 30px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
}
.afl-login-brand { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.afl-login-omega { width:34px; height:34px; color:var(--cyan); flex:none; }
.afl-login-brand-name { display:flex; flex-direction:column; line-height:1.2; }
.afl-login-brand-primary { font-weight:800; letter-spacing:1px; font-size:14px; color:var(--text-primary); }
.afl-login-brand-descriptor { font-family:var(--mono); font-size:9.5px; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; }

.afl-login-heading { font-size:22px; font-weight:800; margin:4px 0 4px; color:var(--text-primary); }
.afl-login-subtitle { font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin:0 0 18px; }

.afl-login-form { display:flex; flex-direction:column; gap:14px; }
.afl-login-label { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; color:var(--text-secondary); letter-spacing:0.4px; text-transform:uppercase; }
.afl-login-label input {
  font-size:14px; color:var(--text-primary); background:var(--bg-inset);
  border:1px solid var(--border); border-radius:6px; padding:11px 12px; outline:none;
}
.afl-login-label input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,229,255,0.12); }
.afl-login-label input::placeholder { color:var(--text-faint); }

.afl-login-submit {
  margin-top:6px; padding:12px; border:none; border-radius:6px; cursor:pointer;
  font-size:13px; font-weight:800; letter-spacing:0.5px; color:var(--void);
  background:linear-gradient(180deg, var(--cyan) 0%, var(--cyan-mid) 100%);
}
.afl-login-submit:hover { filter:brightness(1.08); }
.afl-login-submit:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

.afl-login-error, .afl-login-success {
  font-size:12px; padding:9px 12px; border-radius:6px; margin-bottom:14px; line-height:1.4;
}
.afl-login-error { color:#ffd9d9; background:rgba(255,80,80,0.10); border:1px solid rgba(255,80,80,0.35); }
.afl-login-success { color:var(--cyan); background:rgba(0,229,255,0.08); border:1px solid var(--cyan-deep); }

.afl-login-foot { margin-top:16px; font-size:11.5px; }
.afl-login-foot a { color:var(--cyan); text-decoration:none; }
.afl-login-foot a:hover { text-decoration:underline; }
.afl-login-foot-hosted { margin-top:8px; }
.afl-login-foot-hint { display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px; color:var(--text-faint); }

/* ---- first-login favourites wizard (TRACK-012) ---- */
.afl-wizard-scrim {
  position:fixed; inset:0; z-index:50; background:rgba(2,5,7,0.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.afl-wizard {
  width:100%; max-width:460px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:12px; padding:20px 22px;
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}

/* ---- topbar auth pill (TRACK-012) ---- */
.afl-auth-pill { white-space:nowrap; }
.afl-auth-link { text-decoration:none; cursor:pointer; }
.afl-auth-link:hover { color:var(--cyan); border-color:rgba(0,229,255,0.4); }