/* ==========================================================================
   ScoutEdge design system
   Tokens → base → components → layouts (app, auth). landing.css builds on it.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* Pro-sports light theme: bright pitch by day, electric-green accent. */
:root {
  --bg: #f6f8f7;
  --bg-2: #eef2f0;
  --surface: #ffffff;
  --surface-2: #f1f5f3;
  --surface-3: #e4ebe7;
  --text: #0e1914;
  --muted: #5a6b63;
  --border: #e2e8e5;
  --border-strong: #cdd8d2;
  --accent: #1fe07a;
  --accent-hover: #15c56a;
  --accent-soft: rgba(31, 224, 122, 0.14);
  --accent-text: #04150b;
  --accent-strong: #0a7d44;
  --volt: #d4ff3a;
  --pitch-deep: #0a6a3c;
  --danger: #c62828;
  --danger-bg: rgba(198, 40, 40, 0.1);
  --warn: #946200;
  --warn-bg: rgba(255, 197, 61, 0.16);
  --info: #2b6cb0;
  --info-bg: rgba(43, 108, 176, 0.1);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 25, 20, 0.06), 0 1px 1px rgba(16, 25, 20, 0.04);
  --shadow: 0 1px 2px rgba(16, 25, 20, 0.06), 0 12px 28px -16px rgba(16, 25, 20, 0.22);
  --glow: 0 0 0 1px rgba(31, 224, 122, 0.45), 0 8px 28px -10px rgba(31, 224, 122, 0.35);
  --focus: 0 0 0 3px rgba(31, 224, 122, 0.45);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(31, 224, 122, 0.06), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 16px 0 6px; }
p { margin: 0 0 12px; }
code { font-family: var(--mono); font-size: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: 0.9rem; }
.hint { color: var(--muted); margin: 4px 0 12px; }
.fine { color: var(--muted); font-size: 0.82rem; margin: -4px 0 0; }
.subtitle { color: var(--muted); margin: 6px 0 20px; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
body[data-state="loading"] main { opacity: 0.55; pointer-events: none; transition: opacity 0.2s; }

/* ---------- Logo ---------- */
.logo, .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); text-decoration: none; }
.logo:hover, .brand:hover { text-decoration: none; }
.logo-light { color: #fff; }
/* Full-colour wordmark logo (media/logo.png, transparent bg, aspect ~5.2:1).
   It already contains the brand name, so adjacent text is hidden and the
   flex gap on the link is removed so nothing reserves empty space. */
.logo-mark { width: 150px; height: 29px; flex: none; background: url("/media/logo.png") left center / contain no-repeat; }
.logo .logo-text, .brand .logo-text { display: none; }
/* The auth pages place a bare "ScoutEdge" text node directly inside .logo
   (no .logo-text wrapper); collapse the gap and clip that text visually. */
.logo { gap: 0; font-size: 0; }

/* ---------- Buttons ---------- */
.btn, button.primary, button.secondary, a.button, button.small {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--radius-sm);
  font: 600 0.95rem/1 var(--font); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover, a.button:hover { text-decoration: none; }
.btn-primary, button.primary, a.button.primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover, button.primary:hover, a.button.primary:hover { background: var(--accent-hover); }
.btn-outline, button.secondary, a.button.secondary, button.small { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover, button.secondary:hover, a.button.secondary:hover, button.small:hover { background: var(--surface-2); }
button.small { min-height: 34px; padding: 0 12px; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn:disabled, button:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-link, button.link {
  background: none; border: 0; padding: 4px 0; font: 600 0.9rem var(--font);
  color: var(--accent-strong); cursor: pointer;
}
.btn-link:hover, button.link:hover { text-decoration: underline; }
button.link.danger { color: var(--danger); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-icon { display: inline-flex; }

/* ---------- Forms ---------- */
.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text); margin: 0; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row a { font-weight: 500; font-size: 0.85rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 400 0.95rem var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.code-input { font: 700 1.4rem var(--mono); letter-spacing: 0.4em; text-align: center; }
.field-error { color: var(--danger); font-size: 0.8rem; font-weight: 500; }
.field-error:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; padding: 0; }

/* Alerts */
.alert, .message { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; margin: 0 0 14px; border: 1px solid transparent; }
.alert[data-kind="error"], .message { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert[data-kind="info"], .message[data-kind="info"] { background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Divider + segmented control */
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.segmented { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.segmented button { min-height: 36px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 0.9rem var(--font); cursor: pointer; }
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Role cards */
.role-cards { display: grid; gap: 10px; margin: 20px 0; }
.role-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.role-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.role-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.role-card input { margin-top: 3px; }
.role-body { display: grid; gap: 2px; font-weight: 400; }
.role-body strong { font-size: 0.98rem; }
.role-body span { color: var(--muted); font-size: 0.88rem; }

/* Steps indicator */
.steps-indicator { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; counter-reset: s; }
.steps-indicator li { counter-increment: s; flex: 1; font-size: 0.78rem; font-weight: 600; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--border); }
.steps-indicator li::before { content: counter(s) ". "; }
.steps-indicator li[aria-current] { color: var(--accent-strong); border-top-color: var(--accent); }

/* ---------- Auth layout ---------- */
body.auth { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); min-height: 100vh; }
.auth-aside {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px; color: #e9f5ee;
  background:
    radial-gradient(circle at 85% 30%, transparent 150px, rgba(255, 255, 255, 0.18) 151px, rgba(255, 255, 255, 0.18) 153px, transparent 154px),
    linear-gradient(90deg, transparent calc(85% - 1px), rgba(255, 255, 255, 0.18) calc(85% - 1px), rgba(255, 255, 255, 0.18) calc(85% + 1px), transparent calc(85% + 1px)),
    repeating-linear-gradient(90deg, #0a6a3c 0 80px, #0b733f 80px 160px);
}
.auth-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 36, 22, 0.15), rgba(4, 36, 22, 0.75)); }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside-body { max-width: 26em; }
.auth-aside h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 14px; }
.auth-aside p { color: #c9e3d4; font-size: 1.05rem; }
.aside-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.aside-points li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.aside-points li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: 0.75rem; }
.aside-foot { color: #a9cbb8; font-size: 0.85rem; margin: 0; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 20px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.75rem; }
.auth-sub { color: var(--muted); margin: 8px 0 22px; }
.auth-foot { margin: 20px 0 0; text-align: center; font-size: 0.9rem; }
.auth-legal { max-width: 420px; color: var(--muted); font-size: 0.78rem; text-align: center; margin: 0; }
.auth-mobile-logo { display: none; }
.auth-card .btn-link.back { margin-bottom: 12px; }
.auth-card > .btn-link { display: block; margin: 16px auto 0; }
body.auth-single { grid-template-columns: 1fr; }
body.auth-single .auth-main { justify-content: flex-start; padding-top: 48px; }
body.auth-single .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); max-width: 480px; }

/* ---------- App layout ---------- */
body.app { display: block; }
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topbar-inner { max-width: 1080px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 24px; }
.topbar nav { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-links { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
.user-menu { position: relative; margin-left: auto; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--border); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--surface-2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--pitch-deep)); }
.user-name { font-size: 0.88rem; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: grid; }
.menu-head { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: grid; }
.menu a, .menu button { text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; background: none; color: var(--text); font: 500 0.9rem var(--font); cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface-2); text-decoration: none; }

.page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; display: grid; gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
#records, .stack-lg { display: grid; gap: 20px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.card.wide { width: 100%; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h1 { font-size: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 16px; margin-bottom: 18px; }
.grid .field:has(textarea), .grid .field:has(label.check) { grid-column: 1 / -1; }
.field > label { display: grid; gap: 6px; font-weight: 600; font-size: 0.88rem; }
.details { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px 20px; margin: 0; }
.details dt { color: var(--muted); font-size: 0.9rem; }
.details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.next-steps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Badges & pills */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font: 700 0.8rem/1.2 var(--mono); white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill[data-status="published"], .status-pill[data-status="registered"] { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.status-pill[data-status="draft"] { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.status-pill[data-status="closed"] { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* Record lists */
.records { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.records li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.records li:hover { border-color: var(--border-strong); }
.record-body { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.record-body strong { font-size: 0.98rem; }
.record-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.record-form { margin-top: 16px; padding: 20px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.record-form h3 { margin-top: 0; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Filters, position picker */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; margin-top: 16px; }
.filters label.check { min-height: 44px; }
fieldset.positions { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px 14px; margin: 0 0 18px; }
fieldset.positions legend { padding: 0 6px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label.check { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.88rem; }
.chips label.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
details > summary { cursor: pointer; font-weight: 600; color: var(--accent-strong); margin: 4px 0 14px; }

/* ---------- Pro-sports theme refinements ---------- */
.btn-primary, button.primary, a.button.primary { background: var(--accent); color: var(--accent-text); font-weight: 700; box-shadow: 0 8px 24px -10px rgba(31, 224, 122, 0.7); }
.btn-primary:hover, button.primary:hover, a.button.primary:hover { background: var(--accent-hover); box-shadow: var(--glow); }
.btn-outline, button.secondary, a.button.secondary, button.small { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover, button.secondary:hover, a.button.secondary:hover, button.small:hover { background: var(--surface-2); border-color: var(--accent); }
input, select, textarea { background: var(--bg-2); border-color: var(--border-strong); }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--text); }
.field, legend { color: var(--text); }
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface) 140px); border-color: var(--border); box-shadow: var(--shadow); }
.records li { background: var(--bg-2); }
.records li:hover { border-color: var(--accent); }
.record-form { background: var(--bg-2); }
.topbar { background: rgba(255, 255, 255, 0.82); border-bottom-color: var(--border); }
.nav-links a { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 700; }
.nav-links a[aria-current="page"] { color: var(--accent-text); background: var(--accent); }
.menu { background: var(--surface-2); }
.badge { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.status-pill { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.segmented { background: var(--bg-2); }
.segmented button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }
.role-card { background: var(--bg-2); }
.role-card:has(input:checked) { box-shadow: var(--glow); }
.steps-indicator li[aria-current] { color: var(--accent-strong); }
.details dt { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 700; padding-top: 2px; }
.section-head h1 { font-size: 1.9rem; }
.auth-card h1 { font-size: 2.3rem; }
.auth-aside {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(212, 255, 58, 0.18), transparent 70%),
    radial-gradient(circle at 50% 62%, transparent 110px, rgba(255, 255, 255, 0.12) 111px, rgba(255, 255, 255, 0.12) 113px, transparent 114px),
    linear-gradient(0deg, transparent calc(62% - 1px), rgba(255, 255, 255, 0.12) calc(62% - 1px), rgba(255, 255, 255, 0.12) calc(62% + 1px), transparent calc(62% + 1px)),
    repeating-linear-gradient(0deg, #073b24 0 70px, #08452a 70px 140px);
}
.auth-aside h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 0.95; }
.aside-points li::before { background: var(--accent); color: var(--accent-text); font-weight: 800; }
body.auth-single .auth-card { background: var(--surface); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.page-title .eyebrow, .eyebrow { display: block; color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 16px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); }
.kpi b { display: block; font: 800 2rem/1 var(--display); color: var(--text); }
.kpi span { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.tabs-bar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs-bar a, .tabs-bar button { padding: 10px 14px; border: 0; background: none; color: var(--muted); font: 700 0.8rem var(--font); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; }
.tabs-bar a[aria-current="page"], .tabs-bar button[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.empty { text-align: center; padding: 28px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-mobile-logo { display: inline-flex; margin-bottom: 8px; }
  .auth-main { justify-content: flex-start; padding-top: 40px; }
}
@media (max-width: 640px) {
  .page { padding: 20px 16px 48px; }
  .card { padding: 18px; border-radius: var(--radius); }
  .field-row { grid-template-columns: 1fr; }
  .records li { flex-direction: column; }
  .user-name { display: none; }
  .topbar-inner { gap: 12px; padding: 0 16px; }
  .nav-links a { padding: 8px; font-size: 0.85rem; }
  .topbar .logo .logo-text { display: none; }
  body.auth-single .auth-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Trial-day pass (athlete QR) ---------- */
.pass { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 16px 0; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(212, 255, 58, 0.35); background: linear-gradient(135deg, rgba(212, 255, 58, 0.08), rgba(31, 224, 122, 0.06)); }
.pass-qr { width: 168px; height: 168px; padding: 8px; background: #fff; border-radius: 10px; flex: none; display: grid; place-items: center; color: #111; font-size: 0.8rem; }
.pass-qr svg { width: 100%; height: 100%; }
.pass-info { flex: 1; min-width: 200px; }
.pass-info p { color: var(--muted); margin: 6px 0 10px; }
.pass-label { display: block; color: var(--accent-strong); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.pass-code { font: 700 1.6rem/1 var(--mono); letter-spacing: 0.12em; color: var(--text); }
.pass-done { flex-direction: column; align-items: flex-start; gap: 4px; }
.pass-bib { font: 800 3rem/1 var(--display); color: var(--accent-strong); }

/* ---------- Trial day & ScoutEdge Live ---------- */
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.inline-form input, .inline-form select { flex: 1 1 180px; width: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-weight: 700; font-size: 0.85rem; background: var(--bg-2); }
.chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 999px; }
.chip-x:hover { color: var(--danger); background: var(--danger-bg); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: left; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table select { min-height: 36px; padding: 4px 8px; min-width: 150px; }
.audit { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 0.88rem; }
.audit code { color: var(--accent-strong); }

.bib { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font: 800 1.25rem/1 var(--display); flex: none; }
.bib-lg { min-width: 64px; height: 64px; font-size: 2rem; border-radius: 14px; }
.live-tabs { position: sticky; top: 60px; z-index: 5; background: var(--bg); margin-bottom: 12px; }
.live-tabs button { flex: 1; font-size: 0.85rem; }
.player-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.player-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.player-row:hover, .player-row:focus-visible { border-color: var(--accent); }
.player-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.player-main strong { font-size: 1.02rem; }
.obs-count { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.card-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-nav > div { display: flex; gap: 6px; }
.player-card-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.quick-note { display: grid; gap: 10px; }
.quick-note textarea { min-height: 110px; font-size: 1rem; }
.obs-title { margin-top: 22px; font-size: 1.1rem; }
.obs-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.obs-list li { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.obs-list p { margin: 0 0 4px; }
.scanner-video { width: 100%; max-height: 60vh; border-radius: 14px; background: #000; object-fit: cover; border: 2px solid var(--accent); }
.checkin-flash { display: grid; gap: 2px; padding: 16px; border-radius: 12px; border: 1px solid; }
.checkin-flash strong { font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; }
.checkin-ok { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.checkin-ok strong { color: var(--accent-strong); }
.checkin-warn { background: var(--warn-bg); border-color: var(--warn); }
.checkin-warn strong { color: var(--warn); }
.checkin-error { background: var(--danger-bg); border-color: var(--danger); }
.checkin-error strong { color: var(--danger); }
.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: var(--shadow); background: var(--accent); color: var(--accent-text); animation: toast-in 0.2s ease-out; }
.toast-error { background: var(--danger); color: #1a0000; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 640px) {
  .live-tabs { top: 60px; }
  .player-card-head h1 { font-size: 1.6rem; }
}

/* ---------- Evaluation & decisions ---------- */
.eval-grid { display: grid; gap: 10px; }
.eval-row { display: grid; grid-template-columns: minmax(160px, 1fr) auto 110px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.eval-attr { display: grid; gap: 2px; min-width: 0; }
.eval-attr .muted { font-size: 0.78rem; }
.rate-group { display: flex; gap: 4px; }
.rate { min-width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 800 1rem var(--display); cursor: pointer; }
.rate:hover { border-color: var(--accent); }
.rate[aria-pressed="true"] { color: #02150b; border-color: transparent; }
.rate[data-v="5"][aria-pressed="true"], .rating-pill[data-v="5"] { background: #1fe07a; color: #02150b; }
.rate[data-v="4"][aria-pressed="true"], .rating-pill[data-v="4"] { background: #7ee06b; color: #0c1a02; }
.rate[data-v="3"][aria-pressed="true"], .rating-pill[data-v="3"] { background: #d4ff3a; color: #1a2400; }
.rate[data-v="2"][aria-pressed="true"], .rating-pill[data-v="2"] { background: #ffc53d; color: #2a1c00; }
.rate[data-v="1"][aria-pressed="true"], .rating-pill[data-v="1"] { background: #ff8a5b; color: #2a0c00; }
.rate[data-v="NO"] { font-size: 0.78rem; }
.rate[data-v="NO"][aria-pressed="true"], .rating-pill[data-v="NO"] { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.conf { min-height: 40px; }
.rating-pill { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 7px; font: 800 0.95rem var(--display); }
.ratings-table td, .ratings-table th { text-align: center; }
.ratings-table td:first-child, .ratings-table th:first-child { text-align: left; }
.interp { color: var(--muted); font-style: italic; }
.decision-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.decision-who { flex: 1; display: grid; gap: 2px; min-width: 0; }
.decision-who strong { font-size: 1.1rem; }
.decision-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.decision-fields { display: grid; grid-template-columns: 190px 1fr 1fr auto; gap: 8px; }
.outcome-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap; }
.outcome-pill[data-outcome="shortlisted"] { color: var(--accent-strong); border-color: rgba(212, 255, 58, 0.45); background: rgba(212, 255, 58, 0.08); }
.outcome-pill[data-outcome="further_assessment"] { color: var(--info); border-color: rgba(108, 182, 255, 0.4); background: var(--info-bg); }
.outcome-pill[data-outcome="selected"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.outcome-pill[data-outcome="not_selected"] { color: var(--muted); background: var(--surface-3); }
.obs-details, .history { margin-top: 12px; }
.timeline { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 12px; }
@media (max-width: 760px) {
  .eval-row { grid-template-columns: 1fr; }
  .rate-group { flex-wrap: wrap; }
  .rate { flex: 1 0 44px; height: 46px; }
  .decision-fields { grid-template-columns: 1fr; }
}
em.optional { font-style: normal; font-weight: 600; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; }
.optional-phone { margin-bottom: 6px; }
.optional-phone + .fine { margin: 0 0 16px; }

/* ---------- Profile hero (photo + completeness ring) ---------- */
.profile-hero { padding: 28px; }
.hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.avatar-wrap { position: relative; }
.avatar-button { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.avatar-button:disabled { cursor: default; }
.avatar-ring {
  --size: 168px; --pct: 0;
  width: var(--size); height: var(--size); border-radius: 50%; padding: 6px; position: relative;
  background: conic-gradient(from -90deg, var(--accent) 0, var(--volt) calc(var(--pct) * 1%), var(--surface-3) calc(var(--pct) * 1%) 100%);
  transition: background 0.4s;
}
.avatar-ring.uploading { animation: ring-pulse 1s ease-in-out infinite alternate; }
@keyframes ring-pulse { to { filter: brightness(1.35); } }
.avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 5px solid var(--surface); background: var(--bg-2); display: grid; place-items: center; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-img.is-uploading { opacity: 0.6; }
.avatar-initials { font: 800 3.4rem/1 var(--display); color: var(--muted); }
.ring-pct { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: 800 0.85rem/1.2 var(--display); letter-spacing: 0.04em; box-shadow: 0 0 0 3px var(--surface); }
.avatar-cam { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--surface); font-size: 1.05rem; box-shadow: var(--shadow-sm); }
.avatar-button:hover .avatar-cam, .avatar-button:focus-visible .avatar-cam { background: var(--accent); }
.photo-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 10; min-width: 180px; display: grid; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.photo-menu button { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 0.92rem var(--font); cursor: pointer; }
.photo-menu button:hover { background: var(--surface-3); }
.photo-menu button.danger { color: var(--danger); }
.hero-info { display: grid; gap: 10px; min-width: 0; }
.hero-name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-name h1 { font-size: 2.4rem; line-height: 1; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-chips .chip { padding: 4px 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.chip-strong { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.hero-info p { margin: 0; }
.hero-bio { color: var(--text); max-width: 60ch; }
.hero-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-stat { display: grid; justify-items: start; padding: 8px 16px 8px 0; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; }
.hero-stat b { font: 800 1.7rem/1 var(--display); }
.hero-stat span { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.hero-stat:hover b { color: var(--accent-strong); }
.private-note { align-self: center; }
.completeness { margin-top: 24px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); display: grid; gap: 10px; }
.completeness.done { color: var(--accent-strong); }
.completeness-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.completeness-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.completeness-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--volt)); border-radius: inherit; }
.next-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.next-chip { padding: 7px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); background: none; color: var(--text); font: 600 0.85rem var(--font); cursor: pointer; }
.next-chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent-strong); }
.profile-tabs { position: sticky; top: 60px; z-index: 5; background: var(--bg); margin-bottom: 0; overflow-x: auto; flex-wrap: nowrap; }
.profile-tabs button { white-space: nowrap; }
/* Header avatar photo */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- My registrations ---------- */
.reg-card { align-items: center !important; }
.reg-date { flex: none; width: 56px; height: 60px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; align-content: center; line-height: 1; }
.reg-date span { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--accent-strong); letter-spacing: 0.08em; }
.reg-date b { font: 800 1.7rem/1 var(--display); }
.reg-list li { gap: 14px; }
.reg-state { font-size: 0.82rem; font-weight: 700; color: var(--accent-strong); }
.reg-state.reg-in { color: var(--accent-strong); }

@media (max-width: 700px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .hero-info { justify-items: center; }
  .hero-name, .hero-chips, .hero-stats, .hero-info .row-actions { justify-content: center; }
  .avatar-ring { --size: 140px; }
  .hero-name h1 { font-size: 2rem; }
  .reg-card { flex-direction: row !important; flex-wrap: wrap; }
}

/* ---------- Find trials ---------- */
.trial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trial-card { position: relative; display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s; }
.trial-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.trial-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.trial-card-link:focus-visible { box-shadow: var(--focus); }
.trial-title { font: 800 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.trial-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.trial-tags .chip { padding: 3px 10px; font-size: 0.75rem; }
.trial-side { flex-direction: column; align-items: flex-end !important; gap: 6px !important; }
#results[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s; }
.draft-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 0.85rem; font-weight: 600; }
.draft-callout button { position: relative; z-index: 2; }
@media (max-width: 640px) {
  .trial-card { flex-wrap: wrap; }
  .trial-side { flex-direction: row; align-items: center !important; width: 100%; justify-content: space-between; }
}

/* ---- Football-CV import ---- */
.cv-idle { display: flex; gap: 18px; align-items: flex-start; }
.cv-icon { flex: none; width: 56px; height: 68px; border-radius: 8px; display: grid; place-items: center; font: 800 0.85rem/1 var(--mono); color: var(--accent-text); background: linear-gradient(160deg, var(--accent), var(--volt)); box-shadow: var(--glow); }
.cv-copy h2 { margin: 0 0 6px; }
.cv-copy p { margin: 0 0 12px; }
.cv-copy small { display: block; margin-top: 10px; }
.cv-reading { display: flex; gap: 14px; align-items: center; }
.cv-reading .spinner { width: 22px; height: 22px; color: var(--accent-strong); }
.cv-reading p { margin: 2px 0 0; }
.cv-review-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cv-review-head h2 { margin: 0 0 4px; }
.cv-method { padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; background: var(--info-bg); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); white-space: nowrap; }
.cv-method-ocr, .cv-method-ai { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.cv-warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.cv-rows { display: grid; gap: 8px; margin: 12px 0 18px; }
.cv-row, .cv-item { display: flex; gap: 12px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.cv-row.cv-missing { border-style: dashed; }
.cv-tick { padding-top: 30px; }
.cv-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
.cv-main { flex: 1; min-width: 0; }
.cv-main .field { margin: 0; }
.cv-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }
.cv-source { color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.cv-flag { color: var(--warn); font-weight: 600; }
.cv-items { margin: 0 0 18px; }
.cv-items h3 { margin: 0 0 10px; }
.cv-item { flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cv-item-tick { font-weight: 600; }
.cv-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--surface) 30%); }
@media (max-width: 560px) {
  .cv-idle { flex-direction: column; }
  .cv-tick { padding-top: 28px; }
}

/* ---- Header menu: on phones the nav links live in the account menu ---- */
/* .topbar .user-menu prefix: outranks the generic `.topbar nav { display: flex }` rule. */
.topbar .user-menu .menu-nav, .menu-burger, .menu-label { display: none; }
.menu a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
@media (max-width: 640px) {
  .topbar .nav-links { display: none; }
  .user-menu { margin-left: auto; }
  .user-menu summary { padding: 4px 12px 4px 4px; gap: 10px; min-height: 44px; }
  .menu-burger { display: grid; gap: 4px; width: 18px; }
  .menu-burger i { display: block; height: 2px; border-radius: 2px; background: var(--text); }
  .menu-label { display: inline; font-weight: 700; font-size: 0.85rem; }
  .user-menu[open] .menu-burger i:nth-child(2) { opacity: 0; }
  .menu {
    position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0;
    max-height: calc(100dvh - 80px); overflow-y: auto;
  }
  .topbar .user-menu .menu-nav { display: grid; flex: none; gap: 0; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
  .menu a, .menu button { min-height: 44px; display: flex; align-items: center; font-size: 1rem; }
}

/* ---- Responsive layout fixes (audit P1: no sideways scrolling at 390px) ----
 * Root cause: .page is a grid whose implicit column sized to its widest content,
 * so a wide table or a long unbroken title widened the whole page. Pin the
 * column to the viewport and let long headings wrap; tables below either scroll
 * inside .table-wrap or, with .stack-mobile, become label/value lists on phones. */
.page { grid-template-columns: minmax(0, 1fr); }
.page > *, .card, .section-head > *, .page-title > *, .decision-who { min-width: 0; }
.page h1, .page h2, .section-head h1, .hero-name h1 { overflow-wrap: anywhere; }
.section-head { flex-wrap: wrap; }
@media (max-width: 640px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .page-title .row-actions { width: 100%; }
  .page-title .row-actions > * { flex: 1 1 auto; justify-content: center; }
  .table.stack-mobile, .table.stack-mobile tbody { display: block; }
  .table.stack-mobile thead { display: none; }
  .table.stack-mobile tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .table.stack-mobile td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0; border: 0; text-align: right; grid-column: 1 / -1; }
  .table.stack-mobile td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; font-weight: 600; text-align: left; }
  .table.stack-mobile td.stack-title { justify-content: flex-start; text-align: left; font-weight: 700; display: block; }
  .table.stack-mobile td.stack-bib { grid-column: 1; grid-row: 1; }
  .table.stack-mobile td.stack-bib + td.stack-title { grid-column: 2; grid-row: 1; }
  .table.stack-mobile select { min-width: 0; max-width: 60%; }
}
@media (max-width: 640px) {
  /* Profile tabs: all five visible (wrap to two rows) instead of a sideways strip. */
  .profile-tabs { flex-wrap: wrap; overflow-x: visible; justify-content: center; }
  .profile-tabs button { padding: 10px 10px; }
}

/* Public athlete profile (/player/<id>): same hero as /profile, without editing controls. */
.public-hero .hero-stat { cursor: default; }
.public-hero .hero-stat:hover b { color: var(--text); }
.public-note { text-align: center; font-size: 0.88rem; margin: 8px 0 0; }
/* Record lists (dashboard trials, registrations, history…): same root cause as .page —
 * an unbounded grid column plus a non-wrapping action row widened the page on phones. */
.records { grid-template-columns: minmax(0, 1fr); }
.record-actions { flex-wrap: wrap; }

/* =====================================================================
   Forms: builder (/dashboard/forms/…), shared field renderer, public form
   ===================================================================== */
.form-row-title { font-weight: 700; color: var(--text); font-size: 1rem; }
.forms-empty blockquote { margin: 8px 0 12px; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--muted); }

/* Builder: start */
.fb-start h2 { margin-top: 0; }
.fb-prompt { display: grid; gap: 12px; margin-top: 12px; }
.fb-prompt textarea { width: 100%; font-size: 1rem; line-height: 1.5; min-height: 120px; }
.fb-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fb-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.fb-example { padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text); font: 600 0.85rem var(--font); cursor: pointer; }
.fb-example:hover { border-color: var(--accent); color: var(--accent-strong); }
.fb-regenerate summary { cursor: pointer; font-weight: 700; color: var(--accent-strong); }
.fb-regenerate .fb-prompt textarea { min-height: 80px; }
.fb-note { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }

/* Builder: layout */
.fb-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; align-items: start; }
.fb-edit-col { display: grid; gap: 14px; min-width: 0; }
.fb-preview-col { position: sticky; top: 80px; min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; }
.fb-preview-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }
.fb-switch { display: none; }
.fb-meta { display: grid; gap: 6px; }
.fb-small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fb-title { font: 700 1.15rem var(--font); }
.fb-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fb-field { padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); display: grid; gap: 10px; min-width: 0; }
.fb-field:focus-within { border-color: var(--accent); }
.fb-field-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fb-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font: 800 0.85rem var(--display); }
.fb-label { flex: 1; min-width: 0; font-weight: 600; }
.fb-tools { display: flex; gap: 4px; flex: none; }
.fb-icon { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 0.95rem; }
.fb-icon:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
.fb-icon:disabled { opacity: 0.35; cursor: default; }
.fb-field-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fb-type { min-width: 0; flex: 1 1 180px; }
.fb-required { margin: 0; }
.fb-help { font-size: 0.9rem; }
.fb-options-wrap { display: grid; gap: 6px; }
.fb-preset { justify-self: start; font-size: 0.85rem; }
.fb-addbar { display: flex; }
.fb-add { flex: 1; border-style: dashed; font-weight: 700; cursor: pointer; }
.fb-error { margin: 0; color: var(--danger); font-size: 0.85rem; }
.fb-error:empty { display: none; }

/* Shared field renderer (preview + public form) */
.ff-form { display: grid; gap: 18px; }
.ff-field { display: grid; gap: 6px; min-width: 0; }
.ff-label { font-weight: 700; color: var(--text); }
.ff-req { color: var(--accent-strong); }
.ff-help { margin: 0; color: var(--muted); font-size: 0.88rem; }
.ff-field input, .ff-field textarea, .ff-field select { width: 100%; }
.ff-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-choice { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; font-weight: 600; }
.ff-choice input { width: auto; margin: 0; accent-color: var(--accent); }
.ff-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ff-error { margin: 0; color: var(--danger); font-size: 0.85rem; }
.ff-error:empty { display: none; }
.ff-field.has-error input, .ff-field.has-error textarea, .ff-field.has-error select, .ff-field.has-error .ff-choice { border-color: var(--danger); }
.ff-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-desc { color: var(--text); margin: 4px 0 18px; }
.form-submit { width: 100%; min-height: 50px; font-size: 1rem; }

/* Public form page */
.form-page { max-width: 720px; }
.form-card h1 { margin: 6px 0 4px; overflow-wrap: anywhere; }
.form-card .eyebrow { display: block; color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.form-done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font: 800 1.6rem var(--display); }
.form-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 0 16px 40px; }
.form-footer a { color: var(--muted); }

/* Share link */
.share-card h2 { margin-top: 0; }
.share-new { border-color: var(--accent); box-shadow: var(--glow); }
.share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-url { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: 0.9rem; }

@media (max-width: 900px) {
  .fb-layout { grid-template-columns: minmax(0, 1fr); }
  .fb-switch { display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: 60px; z-index: 4; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; }
  .fb-switch button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 0.9rem var(--font); cursor: pointer; }
  .fb-switch button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }
  .fb-layout[data-view="edit"] .fb-preview-col, .fb-layout[data-view="preview"] .fb-edit-col { display: none; }
  .fb-preview-col { position: static; max-height: none; overflow: visible; }
  .fb-preview-label { display: none; }
}
@media (max-width: 640px) {
  .fb-field-top { flex-wrap: wrap; }
  .fb-label { flex-basis: calc(100% - 38px); }
  .fb-tools { width: 100%; justify-content: flex-end; }
  .fb-icon { width: 40px; height: 40px; }
}
/* Duplicate icon drawn in CSS (the ⧉ glyph is missing from many fonts) */
.fb-dup { position: relative; display: inline-block; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; margin: 3px 0 0 3px; }
.fb-dup::before { content: ""; position: absolute; left: -5px; top: -5px; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; border-right-color: transparent; border-bottom-color: transparent; }
@media (min-width: 641px) {
  .responses-table th, .responses-table td { min-width: 120px; }
  .responses-table td:first-child { white-space: nowrap; }
}

/* =====================================================================
   Scouts: organisation scout cards, Live player cards, Observation Copilot
   ===================================================================== */
.scout-card { align-items: center !important; }
.scout-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font: 800 1rem var(--display); }
.add-scout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.add-scout h3 { margin: 0 0 4px; }
.add-scout input[name=scout_id] { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.scout-found { margin-top: 12px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent-soft); display: grid; gap: 6px; }
.scout-found p { margin: 0; }
.scout-id-pill { display: grid; justify-items: end; gap: 2px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.scout-id-pill span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.scout-id-pill strong { font: 700 1rem var(--mono); color: var(--accent-strong); }

/* Live: player cards */
.live-players { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.live-player { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.live-player-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 0; font: inherit; }
.live-photo { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font: 800 1.2rem var(--display); }
.live-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.live-photo-lg { width: 76px; height: 76px; font-size: 1.5rem; }
.live-bib { position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 26px; padding: 0 5px; font-size: 0.8rem; }
.live-info { display: grid; gap: 2px; min-width: 0; }
.live-info strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.live-id { font: 600 0.8rem var(--mono); color: var(--accent-strong); }
.live-status { font-size: 0.8rem; color: var(--accent-strong); font-weight: 600; }
.live-observe { flex: none; min-height: 48px; padding: 0 20px; }

/* Observation composer + Copilot draft */
.obs-card h2 { margin-top: 0; }
.obs-input { font-size: 1.05rem; line-height: 1.5; min-height: 130px; }
.obs-meaning { margin: 4px 0 10px; }
.obs-meaning summary { cursor: pointer; color: var(--accent-strong); font-weight: 600; font-size: 0.9rem; }
.obs-meaning textarea { margin-top: 8px; width: 100%; }
.obs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.obs-actions button { min-height: 52px; font-size: 1rem; }
.copilot-banner { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.copilot-banner strong { color: var(--warn); }
.copilot-banner span { font-size: 0.88rem; color: var(--text); }
.copilot-original { margin-bottom: 12px; }
.copilot-original summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.copilot-original p { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--border-strong); color: var(--muted); font-size: 0.92rem; }
.obs-card .field textarea, .obs-card .field select { width: 100%; }
.obs-item { display: grid; gap: 6px; }
.obs-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.obs-badges .chip { padding: 2px 10px; font-size: 0.75rem; }
.obs-text { margin: 0; }
.obs-part { display: grid; gap: 2px; }
.obs-part ul { margin: 0; padding-left: 18px; font-size: 0.92rem; color: var(--muted); }
.obs-label, .obs-line .muted { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.obs-line { margin: 0; font-size: 0.92rem; }

/* Athlete outcome */
.reg-outcome { font-weight: 700; }
.reg-selected { color: var(--accent-strong); }
.reg-further_assessment, .reg-shortlisted { color: var(--accent-strong); }
.reg-not_selected { color: var(--muted); }
.trial-outcome { display: grid; gap: 4px; margin: 12px 0; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); }
.trial-outcome strong { font: 800 1.6rem var(--display); text-transform: uppercase; }

@media (max-width: 640px) {
  .live-player { flex-direction: column; align-items: stretch; }
  .live-observe { width: 100%; }
  .obs-actions { grid-template-columns: 1fr; }
  .scout-id-pill { justify-items: start; }
}
@media (max-width: 640px) {
  /* Text-style actions in record rows are real buttons on phones: 40px+ tap targets. */
  .record-actions button.link, .record-actions a:not(.button), .record-actions .btn-link {
    min-height: 40px; display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 8px;
  }
}

/* ---------- Profile identity & verification (read-only) ---------- */
.identity-block { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.identity-block h2 { margin: 0 0 12px; }
.identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 0 0 10px; }
.identity-row { display: grid; gap: 2px; }
.identity-row dt { color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.identity-row dd { margin: 0; font-weight: 600; }
.verify-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; border: 1px solid transparent; }
.verify-pill.verify-yes { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.verify-pill.verify-no { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ---------- Profile QR modal ---------- */
.qr-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(14, 25, 20, 0.55); }
.qr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; width: min(360px, 100%); display: grid; gap: 10px; text-align: center; box-shadow: var(--shadow); }
.qr-panel h2 { margin: 0; }
.qr-img { display: grid; place-items: center; min-height: 220px; }
.qr-img svg { width: 220px; height: 220px; }
.qr-url { word-break: break-all; margin: 0; }

/* ==========================================================================
   Profile redesign (Screenshot-2 style): modern header, navy hero, overview
   cards, edit/CV modals. Builds on the existing tokens — no theme changes.
   ========================================================================== */

/* ---------- Inline SVG icons (professional line set) ---------- */
.svg-ic { display: inline-flex; align-items: center; justify-content: center; }
.svg-ic svg { width: 1.1em; height: 1.1em; display: block; }
.hero-btn .svg-ic svg { width: 18px; height: 18px; }
.more-menu .svg-ic svg { width: 17px; height: 17px; }
.more-menu a, .more-menu button { display: flex; align-items: center; gap: 10px; }

/* ---------- Header: nav + notifications ---------- */
.topbar nav { gap: 16px; }
.topbar nav .nav-links { flex: 1 1 auto; }
.topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* ---------- Videos & highlights (Overview) ---------- */
.ov-videos .section-head .small { gap: 8px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.video-card { display: grid; gap: 8px; }
.video-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: #0d1b2a; border: 1px solid var(--border);
}
.video-el { width: 100%; height: 100%; display: block; background: #000; object-fit: cover; }
.video-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.video-title { font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
.video-actions { display: flex; gap: 10px; flex: none; }
.video-progress { margin: 0; font-size: 0.85rem; }
.video-form { margin: 0; background: none; border: 0; padding: 0; display: grid; gap: 14px; }
.video-form input[type="file"] { padding: 8px; }
.video-modal .modal-panel { width: min(480px, 100%); }

/* Celebration modal after creating a profile */
.celebrate-overlay { place-items: center; }
.celebrate-panel { width: min(440px, 100%); max-height: none; text-align: center; padding: 32px 28px; align-items: center; gap: 6px; }
.celebrate-panel h2 { font-size: 1.8rem; margin-top: 10px; }
.celebrate-panel p { margin: 8px 0 20px; }
.celebrate-panel .btn-block { width: 100%; }
.celebrate-badge { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); margin: 0 auto; animation: celebrate-pop 0.3s ease-out; }
.celebrate-badge svg { width: 36px; height: 36px; }
@keyframes celebrate-pop { from { transform: scale(0.6); opacity: 0; } }

/* Role switcher group in the account dropdown (multi-role accounts) */
.menu-switch { display: grid; gap: 2px; padding: 6px 0; margin: 4px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.menu-switch-label { padding: 4px 12px; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

/* "My Profile" entry in the account dropdown */
.menu a.menu-profile { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.menu a.menu-profile .menu-ic { display: inline-grid; place-items: center; color: var(--accent-strong); }
.menu a.menu-profile .menu-ic svg { width: 18px; height: 18px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1.05rem; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.topbar-bell { position: relative; }

/* ---------- Profile page layout ---------- */
.profile-page { gap: 16px; }
.profile-tabs { position: sticky; top: 60px; z-index: 6; background: var(--bg); padding-top: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.profile-tabs button { white-space: nowrap; }

/* ---------- Navy hero banner ---------- */
.profile-hero { padding: 0; }
.hero-banner {
  position: relative; border-radius: var(--radius-lg);
  padding: 48px 44px; min-height: 340px; display: flex; align-items: center; color: #eaf2f7;
  background:
    radial-gradient(1000px 420px at 85% -30%, rgba(31, 224, 122, 0.24), transparent 70%),
    linear-gradient(135deg, #0b1b2b 0%, #10263b 55%, #143049 100%);
  box-shadow: var(--shadow);
}
.hero-banner .hero-grid { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
/* Bigger photo in the hero. */
.hero-banner .avatar-ring { --size: 220px; }
.hero-banner .avatar-inner { border-color: rgba(255, 255, 255, 0.9); border-width: 6px; }
.hero-banner .avatar-cam { width: 46px; height: 46px; background: rgba(255, 255, 255, 0.95); border-color: transparent; color: #0b1b2b; }
.avatar-cam .svg-ic svg { width: 20px; height: 20px; }
.hero-banner .ring-pct { font-size: 0.95rem; padding: 4px 12px; }
.hero-banner .avatar-wrap { z-index: 2; }
.hero-banner .photo-menu { z-index: 20; }
.hero-info { display: grid; gap: 14px; min-width: 0; align-content: center; }
.hero-info h1 { color: #fff; font-size: 3.2rem; line-height: 1; }
.hero-info .eyebrow { color: var(--volt); }
.verified-badge {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: #d7ffe9;
  background: rgba(31, 224, 122, 0.16); border: 1px solid rgba(31, 224, 122, 0.5);
}
.verified-badge .vb-check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 0.65rem; }
.hero-id .badge { background: rgba(255, 255, 255, 0.1); color: #d7e6f0; border-color: rgba(255, 255, 255, 0.22); }
.hero-tagline { color: #b9ccd9; font-size: 1rem; max-width: 60ch; margin: 0; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips .chip { padding: 5px 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255, 255, 255, 0.08); color: #e4eef4; border-color: rgba(255, 255, 255, 0.18); }
.hero-chips .chip-strong { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 4px 0 2px; }
.hero-meta-item { display: flex; align-items: center; gap: 10px; }
.hero-meta-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(--volt); }
.hero-meta-ic svg { width: 19px; height: 19px; }
.hero-meta-item b { display: block; color: #fff; font: 800 1.1rem/1.1 var(--display); }
.hero-meta-item span { color: #9fb6c4; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--radius-sm);
  font: 700 0.9rem/1 var(--font); cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.hero-btn:hover { background: rgba(255, 255, 255, 0.18); }
.hero-btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); box-shadow: 0 8px 24px -10px rgba(31, 224, 122, 0.7); }
.hero-btn.primary:hover { background: var(--accent-hover); }
.hero-btn.ghost { width: 42px; padding: 0; font-size: 1.2rem; }
.more-wrap { position: relative; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 12; min-width: 200px;
  display: grid; padding: 6px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.more-menu a, .more-menu button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 0.9rem var(--font); cursor: pointer; }
.more-menu a:hover, .more-menu button:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Overview grid ---------- */
.overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.overview-grid[hidden] { display: none; }
.ov-main { display: grid; gap: 16px; min-width: 0; }
.ov-side { display: grid; gap: 16px; min-width: 0; }
.ov-bio { margin: 0; white-space: pre-wrap; }
.empty-inline { display: grid; gap: 10px; justify-items: start; color: var(--muted); }
.empty-inline p { margin: 0; }

.ov-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.ov-detail { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 0 12px; align-items: center; }
.ov-detail-ic { grid-row: 1 / 3; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); }
.ov-detail-ic svg { width: 18px; height: 18px; }
.ov-detail-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ov-detail-value { font-weight: 600; overflow-wrap: anywhere; }

.ov-pct { display: flex; align-items: baseline; gap: 8px; margin: 10px 0; }
.ov-pct strong { font: 800 2rem/1 var(--display); }
.ov-complete-copy { grid-column: 1 / -1; }

.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 12px; }
.perf-stat { padding: 16px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); text-align: center; }
.perf-stat b { display: block; font: 800 2rem/1 var(--display); color: var(--text); }
.perf-stat span { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.ov-ach-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ov-ach-list li { display: flex; gap: 12px; align-items: center; }
.ov-ach-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); flex: none; }
.ov-ach-ic svg { width: 20px; height: 20px; }
.ov-ach-list strong { display: block; }

/* Timeline (overview + reuse) */
.ov-history .timeline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.ov-history .timeline li { position: relative; padding-left: 20px; display: grid; gap: 2px; }
.ov-history .timeline li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ov-history .timeline li::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: -16px; width: 1px; background: var(--border); }
.ov-history .timeline li:last-child::after { display: none; }
.tl-when { color: var(--accent-strong); font-size: 0.78rem; font-weight: 700; }

/* ---------- Modal / slide-over ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 60; display: grid; background: rgba(10, 20, 15, 0.5); backdrop-filter: blur(3px); padding: 24px; animation: modal-fade 0.15s ease-out; }
@keyframes modal-fade { from { opacity: 0; } }
.modal-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); width: min(680px, 100%); max-height: calc(100vh - 48px);
  margin: auto; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 1.3rem; }
.modal-close { width: 34px; height: 34px; font-size: 0.9rem; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-intro { margin: 0 0 16px; }
/* On wide screens the edit form slides over from the right. */
@media (min-width: 760px) {
  .edit-modal { justify-items: end; padding: 0; }
  .edit-modal .modal-panel { height: 100vh; max-height: 100vh; border-radius: var(--radius-lg) 0 0 var(--radius-lg); margin: 0; width: min(560px, 100%); animation: slide-in 0.2s ease-out; }
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero-banner { padding: 28px 22px; min-height: 0; }
  .hero-banner .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .hero-banner .avatar-ring { --size: 180px; }
  .hero-info { justify-items: center; }
  .hero-chips, .hero-meta, .hero-actions { justify-content: center; }
  .hero-info h1 { font-size: 2.4rem; }
  .hero-meta { gap: 10px 20px; }
  .more-menu { right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .profile-tabs { top: 60px; }
  .hero-actions .hero-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Role dashboards — shared shell + athlete theme (Athlete = light/green).
   Organisation (navy) and Scout (charcoal/amber) themes build on this.
   ========================================================================== */

/* Athlete dashboard */
.dash-welcome { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dash-avatar { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: none; background: var(--bg-2); border: 1px solid var(--border); display: grid; place-items: center; }
.dash-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-avatar-initials { font: 800 2.2rem/1 var(--display); color: var(--muted); }
.dash-welcome-body { display: grid; gap: 10px; min-width: 0; }
.dash-welcome-body h1 { font-size: 2rem; }
.dash-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.dash-stat-link { color: inherit; }
.dash-stat-link:hover { text-decoration: none; }
.dash-stat-link:hover .dash-stat { border-color: var(--accent); }
.dash-stat {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: border-color 0.15s;
}
.dash-stat-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.dash-stat-ic svg { width: 22px; height: 22px; }
.dash-stat b { display: block; font: 800 1.7rem/1 var(--display); }
.dash-stat span { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 20px; min-width: 0; }
.dash-viewall { display: inline-flex; align-items: center; gap: 6px; }
.dash-viewall svg { width: 16px; height: 16px; }
.dash-trials { gap: 10px; }
.dash-trials .reg-date { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); flex: none; line-height: 1; }
.dash-trials .reg-date span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.dash-trials .reg-date b { font: 800 1.3rem/1 var(--display); }
.dash-trials li { display: flex; align-items: center; gap: 14px; }

.dash-journey.timeline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.dash-journey li { position: relative; padding-left: 20px; display: grid; gap: 2px; }
.dash-journey li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dash-journey li.tl-trophy::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }

.dash-video-grid { display: grid; gap: 10px; margin-top: 12px; }
.dash-video { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); color: var(--text); }
.dash-video:hover { border-color: var(--accent); text-decoration: none; }
.dash-video-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #0d1b2a; color: #fff; flex: none; }
.dash-video-ic svg { width: 18px; height: 18px; }
.dash-video-title { overflow-wrap: anywhere; font-weight: 600; font-size: 0.92rem; }
.dash-complete .ov-pct { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.dash-complete .ov-pct strong { font: 800 2rem/1 var(--display); }
.dash-complete .btn-block { margin-top: 12px; }
.dash-empty { max-width: 520px; margin: 40px auto; }

@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dash-welcome { gap: 16px; }
  .dash-avatar { width: 72px; height: 72px; }
  .dash-welcome-body h1 { font-size: 1.6rem; }
}

/* ==========================================================================
   Organisation theme (navy, operational) — body.theme-org
   Navy top bar + navy hero; white operational content cards; green accent.
   ========================================================================== */
.theme-org .topbar { background: #0b1b2b; border-bottom-color: rgba(255,255,255,0.08); }
.theme-org .topbar .logo, .theme-org .topbar .logo .logo-text { color: #fff; }
.theme-org .nav-links a { color: #9fb6c4; }
.theme-org .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.theme-org .nav-links a[aria-current="page"] { color: var(--accent-text); background: var(--accent); }
.theme-org .user-menu summary { border-color: rgba(255,255,255,0.18); color: #fff; }
.theme-org .user-menu summary:hover { background: rgba(255,255,255,0.08); }
.theme-org .user-name { color: #e4eef4; }
.theme-org .icon-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }

/* Operational hero */
.op-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: var(--radius-lg); color: #eaf2f7;
  background: radial-gradient(900px 360px at 90% -40%, rgba(31,224,122,0.18), transparent 70%), linear-gradient(135deg, #0b1b2b, #12263a 60%, #15324b);
  box-shadow: var(--shadow);
}
.op-hero .eyebrow { color: var(--volt); }
.op-hero h1 { color: #fff; font-size: 2.1rem; }
.op-hero-sub { color: #b9ccd9; margin: 6px 0 0; }

/* Operational stat strip */
.op-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.op-stat { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.op-stat-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #0b1b2b; color: var(--volt); flex: none; }
.op-stat-ic svg { width: 22px; height: 22px; }
.op-stat b { display: block; font: 800 1.7rem/1 var(--display); }
.op-stat span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }

/* Per-trial registration/attendance counts on org trial cards */
.trial-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.count-pill { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); }
.count-pill b { font: 800 0.95rem/1 var(--display); color: var(--text); }

/* Coming-soon placeholders (Teams / Recruitment needs) */
.op-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.op-soon-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.op-soon-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.op-soon-ic svg { width: 20px; height: 20px; }
.op-soon-head h2 { font-size: 1.15rem; margin-bottom: 6px; }

@media (max-width: 640px) {
  .op-hero { padding: 22px; }
  .op-hero h1 { font-size: 1.7rem; }
}

/* ==========================================================================
   Scout theme (charcoal + amber, analytical) — body.theme-scout
   Dark charcoal top bar + hero; white content cards; amber for evaluation
   states, green for verified/positive.
   ========================================================================== */
.theme-scout { --scout-bg: #11161d; --scout-bg-2: #1a222d; --amber: #f6a823; --amber-soft: rgba(246,168,35,0.16); }
.theme-scout .topbar { background: var(--scout-bg); border-bottom-color: rgba(255,255,255,0.08); }
.theme-scout .topbar .logo, .theme-scout .topbar .logo .logo-text { color: #fff; }
.theme-scout .nav-links a { color: #9aa6b2; }
.theme-scout .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.theme-scout .nav-links a[aria-current="page"] { color: var(--scout-bg); background: var(--amber); }
.theme-scout .user-menu summary { border-color: rgba(255,255,255,0.18); color: #fff; }
.theme-scout .user-menu summary:hover { background: rgba(255,255,255,0.08); }
.theme-scout .user-name { color: #e4eaf0; }
.theme-scout .icon-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }

/* Scout hero */
.sc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: var(--radius-lg); color: #eef2f6;
  background: radial-gradient(800px 320px at 88% -40%, rgba(246,168,35,0.16), transparent 70%), linear-gradient(135deg, #11161d, #1a222d 60%, #222c38);
  box-shadow: var(--shadow);
}
.sc-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sc-avatar { width: 60px; height: 60px; border-radius: 50%; font-size: 1.2rem; flex: none; }
.sc-hero h1 { color: #fff; font-size: 1.9rem; }
.sc-hero-sub { color: #9aa6b2; margin: 4px 0 0; font-size: 0.9rem; }
.sc-verified { color: #d7ffe9; background: rgba(31,224,122,0.16); border-color: rgba(31,224,122,0.5); }
.sc-hero .scout-id-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; }
.sc-hero .scout-id-pill:hover { background: rgba(255,255,255,0.12); }
.sc-hero .scout-id-pill span { color: #9aa6b2; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.sc-hero .scout-id-pill strong { color: #fff; font: 700 0.95rem/1 var(--mono); letter-spacing: 0.04em; }
.sc-hero .scout-id-pill .svg-ic svg { width: 16px; height: 16px; }

/* Scout summary stats */
.sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 16px; }
.sc-stat { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sc-stat-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--amber-soft); color: #a66b00; flex: none; }
.sc-stat-ic svg { width: 20px; height: 20px; }
.sc-stat b { display: block; font: 800 1.6rem/1 var(--display); }
.sc-stat span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }

@media (max-width: 640px) {
  .sc-hero { padding: 20px; }
  .sc-hero h1 { font-size: 1.6rem; }
}

/* ==========================================================================
   Scout / Evaluator profile — reuses the athlete profile system (.hero-banner,
   .hero-chips, .hero-meta, .card, .overview-grid, .identity-grid, .records,
   .tabs-bar, .svg-ic). Only the scout-specific additions live here.
   ========================================================================== */
.theme-scout .avatar-ring.sc-avatar-ring { background: linear-gradient(135deg, var(--amber, #f6a823), var(--accent)); }
.sc-verified { color: #d7ffe9; background: rgba(31,224,122,0.16); border-color: rgba(31,224,122,0.5); }
.sc-unverified { color: #ffe3b0; background: rgba(246,168,35,0.16); border: 1px solid rgba(246,168,35,0.5); }

/* Prominent, copyable Scout ID in the hero (organisations use it to connect) */
.sc-id-row { margin: 2px 0; }
.sc-id-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(246,168,35,0.5); background: rgba(246,168,35,0.12); color: #fff; cursor: pointer; font: inherit; }
.sc-id-pill:hover { background: rgba(246,168,35,0.22); }
.sc-id-pill span { color: #e8c583; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.sc-id-pill strong { font: 700 1.05rem/1 var(--mono); letter-spacing: 0.06em; color: #fff; }
.sc-id-pill .svg-ic svg { width: 16px; height: 16px; color: #f6a823; }

/* Scout stat strip (shares .sc-stat / .sc-stat-ic from the scout dashboard) */
.sc-stats-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Stacked single-column sections used by Expertise / Coverage tabs */
.sc-sections { display: grid; gap: 20px; }

/* Taxonomy chip sets (expertise, positions, age groups, levels) */
.sc-taxonomy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sc-tax-chip { opacity: 0.85; }

/* Coverage tiles */
.sc-coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; }
.sc-cov-tile { display: grid; justify-items: center; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); text-align: center; }
.sc-cov-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--amber-soft, rgba(246,168,35,0.16)); color: #a66b00; }
.sc-cov-ic svg { width: 20px; height: 20px; }
.sc-cov-tile span { font-weight: 700; font-size: 0.9rem; }

.sc-quals dt { min-width: 170px; }
.sc-exp.timeline { margin-top: 12px; }
.sc-players .record-body strong { font-size: 0.98rem; }

/* Evaluations read-only note lock icon aligns with text */
.fine .svg-ic { vertical-align: -3px; }
.fine .svg-ic svg { width: 14px; height: 14px; }

/* ==========================================================================
   Athlete theme — dark-green header + animated nav hover
   Scoped to body.theme-athlete so other roles keep their own header.
   ========================================================================== */
.theme-athlete .topbar {
  background: linear-gradient(180deg, #0b3f25 0%, #0a3620 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  box-shadow: 0 10px 28px -18px rgba(4, 24, 14, 0.55);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.theme-athlete .topbar.is-stuck { box-shadow: 0 14px 34px -16px rgba(4, 24, 14, 0.7); }
/* Brand goes white on the dark bar */
.theme-athlete .topbar .logo,
.theme-athlete .topbar .logo .logo-text { color: #fff; }
.theme-athlete .topbar .logo .logo-mark { filter: drop-shadow(0 0 6px rgba(31,224,122,0.4)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.theme-athlete .topbar .logo:hover .logo-mark { transform: scale(1.04); }

/* ---- Animated nav hover ---- */
.theme-athlete .nav-links a {
  position: relative; color: #cfe7d9; isolation: isolate;
  transition: color 0.22s ease;
}
/* sliding highlight pill that grows from the centre */
.theme-athlete .nav-links a::before {
  content: ""; position: absolute; inset: 2px 2px; z-index: -1; border-radius: 8px;
  background: linear-gradient(135deg, rgba(31,224,122,0.9), rgba(212,255,58,0.85));
  transform: scale(0.6); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
/* animated underline sweeping in from the left */
.theme-athlete .nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--volt); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-athlete .nav-links a:hover,
.theme-athlete .nav-links a:focus-visible { color: #04150b; }
.theme-athlete .nav-links a:hover::before { transform: scale(1); opacity: 1; }
.theme-athlete .nav-links a:hover::after { transform: scaleX(0); }      /* pill replaces underline on hover */
.theme-athlete .nav-links a[aria-current="page"] { color: #04150b; }
.theme-athlete .nav-links a[aria-current="page"]::before { transform: scale(1); opacity: 1; background: var(--accent); }

/* Account menu + bell adapt to the dark bar */
.theme-athlete .user-menu summary { border-color: rgba(255,255,255,0.22); }
.theme-athlete .user-menu summary:hover { background: rgba(255,255,255,0.1); }
.theme-athlete .user-name { color: #eaf5ee; }
.theme-athlete .menu-burger i { background: #eaf5ee; }
.theme-athlete .icon-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #fff; }
.theme-athlete .icon-btn:hover { background: rgba(255,255,255,0.18); }

/* ==========================================================================
   GLOBAL NAV THEME — one dark-green nav bar across every page.
   Applies to the app top bar (all signed-in pages, all role themes) and the
   landing/info site header. Promotes the athlete dark-green treatment to the
   whole product and overrides the per-role (navy/charcoal) header colors.
   ========================================================================== */
:root { --nav-bg-1: #0b3f25; --nav-bg-2: #0a3620; }

/* ---- App top bar (overrides theme-org / theme-scout headers too) ---- */
body.app .topbar,
body.app.theme-org .topbar,
body.app.theme-scout .topbar,
body.app.theme-athlete .topbar {
  background: linear-gradient(180deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  box-shadow: 0 10px 28px -18px rgba(4, 24, 14, 0.55);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
body.app .topbar.is-stuck { box-shadow: 0 14px 34px -16px rgba(4, 24, 14, 0.7); }
body.app .topbar .logo,
body.app .topbar .logo .logo-text { color: #fff; }
body.app .topbar .logo .logo-mark { filter: drop-shadow(0 0 6px rgba(31,224,122,0.4)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
body.app .topbar .logo:hover .logo-mark { transform: scale(1.04); }

/* Animated nav hover — sliding neon pill + sweep underline (one system) */
body.app .nav-links a {
  position: relative; color: #cfe7d9; isolation: isolate; background: none;
  transition: color 0.22s ease;
}
body.app .nav-links a::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 8px;
  background: linear-gradient(135deg, rgba(31,224,122,0.92), rgba(212,255,58,0.85));
  transform: scale(0.6); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
body.app .nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--volt); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
body.app .nav-links a:hover,
body.app .nav-links a:focus-visible { color: #04150b; background: none; }
body.app .nav-links a:hover::before { transform: scale(1); opacity: 1; }
body.app .nav-links a:hover::after { transform: scaleX(0); }
body.app .nav-links a[aria-current="page"] { color: #04150b; background: none; }
body.app .nav-links a[aria-current="page"]::before { transform: scale(1); opacity: 1; background: var(--accent); }

/* Account menu + tools adapt to the dark bar on every role */
body.app .user-menu summary { border-color: rgba(255,255,255,0.22); color: #fff; }
body.app .user-menu summary:hover { background: rgba(255,255,255,0.1); }
body.app .user-name { color: #eaf5ee; }
body.app .menu-burger i { background: #eaf5ee; }
body.app .icon-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #fff; }
body.app .icon-btn:hover { background: rgba(255,255,255,0.18); }

/* ---- Landing / info site header: same dark-green bar ---- */
body.landing .site-header {
  background: linear-gradient(180deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}
body.landing .site-header.is-stuck { box-shadow: 0 12px 30px -18px rgba(4, 24, 14, 0.6); border-bottom-color: transparent; }
body.landing .site-header .logo,
body.landing .site-header .logo .logo-text { color: #fff; }
body.landing .site-header .logo .logo-mark { filter: drop-shadow(0 0 6px rgba(31,224,122,0.4)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
body.landing .site-header .logo:hover .logo-mark { transform: scale(1.04); }
body.landing .site-nav a { position: relative; color: #cfe7d9; }
body.landing .site-nav a::after { background: var(--volt); }
body.landing .site-nav a:hover { color: #fff; background: none; }
body.landing .site-nav a[aria-current="page"] { color: #fff; }
body.landing .site-cta .l-link { color: #eaf5ee; }
body.landing .site-cta .l-link:hover { color: var(--volt); }
body.landing .site-menu summary { border-color: rgba(255,255,255,0.3); }
body.landing .site-menu summary span, body.landing .site-menu summary span::before, body.landing .site-menu summary span::after { background: #fff; }