/* member-portal.css — Athlete / player portal in the Broadcast language.
   Ported from the Claude Design handoff (MemberPortal.html). Two layouts share
   one responsive component: .lk (The Locker, wide) and .gd (Game Day, narrow/phone).

   Integration note: the handoff shipped its own token set (--panel/--rule/--text/…)
   and .theme-dark/.theme-light palette blocks. Those are NOT reproduced here. Instead
   .mp-root ALIASES the handoff's names onto design-tokens.css, so the portal tracks the
   app's [data-theme] palette and per-club --accent with zero extra wiring. The app's
   top bar / sidebar provide the chrome, so the handoff's .mp-top is dropped.
   Fonts (Anton · Barlow Condensed · JetBrains Mono) are loaded in App.razor. */

/* ── Responsive portal wrapper: Locker (wide) vs Game Day (narrow/phone) ── */
.mp-portal { width: 100%; container-type: inline-size; }
.mp-portal-narrow { display: none; }
@container (max-width: 720px) {
  .mp-portal-wide { display: none; }
  .mp-portal-narrow { display: block; }
}

.mp-root {
  /* Alias the handoff's token names onto the app's design-tokens.css. --bg and
     --accent already exist on the app; everything below maps 1:1. */
  --panel: var(--surface);
  --panel-2: var(--surface-raised);
  --panel-hi: var(--surface-raised);
  --rule: var(--hairline);
  --rule-hi: var(--hairline-strong);
  --text: var(--fg);
  --muted: var(--fg-muted);
  --dim: var(--fg-dim);
  --accent-ink: var(--accent-fg);
  --ok: var(--semantic-success);
  --warn: var(--semantic-warning);
  --danger: var(--semantic-danger);

  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  width: 100%;
  letter-spacing: 0.005em;
  container-type: inline-size;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.mp-root, .mp-root * { box-sizing: border-box; }

.mp-display {
  font-family: 'Anton', 'Oswald', sans-serif;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.mp-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Shared atoms: sport badge, rsvp chip, status pill ────────── */
.mp-sport {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--text);
}
.mp-sport[data-s="VB"] { background: #e2522b; color: #fff; }
.mp-sport[data-s="SC"] { background: #2f8a4e; color: #fff; }
.mp-sport[data-s="BB"] { background: #d4882a; color: #1a160e; }
.mp-sport[data-s="AD"] { background: var(--dim); color: var(--bg); }

.mp-rsvp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--rule);
}
.mp-rsvp .d { width: 6px; height: 6px; border-radius: 50%; }
.mp-rsvp.going { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); }
.mp-rsvp.going .d { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.mp-rsvp.pending { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, transparent); }
.mp-rsvp.pending .d { background: var(--warn); }
.mp-rsvp.out { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.mp-rsvp.out .d { background: var(--danger); }

.mp-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.mp-pill.home { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.mp-pill.away { color: var(--muted); }
.mp-pill.tourney { color: var(--text); background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

.mp-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
}
.mp-status.outstanding { color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
.mp-status.paid { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.mp-status.upcoming { color: var(--muted); border: 1px solid var(--rule); }

.mp-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--panel-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.mp-btn:hover { border-color: var(--rule-hi); }
.mp-btn.accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.mp-btn.accent:hover { filter: brightness(1.08); }
.mp-btn.ghost { background: transparent; }

/* Section heading shared */
.mp-shead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mp-shead h3 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mp-shead .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.mp-shead .meta em { color: var(--accent); font-style: normal; }
.mp-shead-r { display: flex; align-items: baseline; gap: 16px; }

/* "See all →" link that jumps to a dedicated page */
.mp-see {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mp-see:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-see svg { width: 12px; height: 12px; }

/* =================================================================
   GAME DAY  (full-width scoreboard hero) — phone layout
   ================================================================= */
.gd-body { padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 26px; }

.gd-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  align-items: stretch;
}
.gd-id { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.gd-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
}
.gd-name { font-size: 92px; }
.gd-name .alt { color: var(--accent); }
.gd-idsub {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--muted);
  flex-wrap: wrap;
}
.gd-idsub .jersey {
  font-family: 'Anton', sans-serif;
  color: var(--accent);
  font-size: 17px;
}
.gd-idsub .sep { color: var(--dim); }
.gd-statline {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
  width: fit-content;
  margin-top: 4px;
}
.gd-stat {
  padding: 8px 16px 7px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gd-stat:last-child { border-right: 0; }
.gd-stat .v { font-family: 'Anton', sans-serif; font-size: 26px; line-height: 0.9; }
.gd-stat .v small { font-size: 13px; color: var(--muted); }
.gd-stat .v .fire { color: var(--accent); }
.gd-stat .l { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }

/* Scoreboard card */
.gd-board {
  background: var(--panel);
  border: 1px solid var(--rule-hi);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gd-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
}
.gd-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--rule);
}
.gd-board-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.gd-board-tag .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 2px 7px;
  font-weight: 700;
}
.gd-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.gd-count .num { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--text); }
.gd-count .lab { font-size: 9px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }

.gd-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 18px;
  gap: 10px;
}
.gd-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gd-side .crest {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.gd-side.home .crest { background: var(--accent); color: var(--accent-ink); }
.gd-side.away .crest { background: var(--panel-2); border: 1px solid var(--rule-hi); color: var(--text); }
.gd-side .nm { font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.02em; }
.gd-side .rec { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.gd-vs {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  color: var(--dim);
}
.gd-board-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--rule);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.gd-board-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-board-where .v { font-size: 15px; }
.gd-board-where .t { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.gd-board-cta { display: flex; align-items: center; gap: 8px; flex: none; }

/* Game Day grid */
.gd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 18px;
}
.gd-panel {
  border: 1px solid var(--rule);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.gd-panel.alert { border-color: color-mix(in oklab, var(--danger) 45%, var(--rule)); }
.gd-phead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.gd-phead h3 { margin: 0; font-family: 'Anton', sans-serif; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; }
.gd-phead .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); }
.gd-phead .meta em { color: var(--danger); font-style: normal; }
.gd-pbody { padding: 2px 0; flex: 1; }
.gd-pfoot {
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.gd-pfoot a { color: var(--accent); text-decoration: none; }

/* dues rows */
.gd-due {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.gd-due:first-child { border-top: 0; }
.gd-due-name { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.gd-due-desc { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); grid-column: 1; letter-spacing: 0.02em; }
.gd-due-amt { font-family: 'Anton', sans-serif; font-size: 22px; text-align: right; }
.gd-due-amt.muted { color: var(--dim); }
.gd-due-act { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; }

/* schedule rows */
.gd-ev {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
}
.gd-ev:first-child { border-top: 0; }
.gd-ev-date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gd-ev-date .dow { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); letter-spacing: 0.1em; }
.gd-ev-date .dt { font-family: 'Anton', sans-serif; font-size: 14px; margin-top: 3px; }
.gd-ev.is-game .gd-ev-date .dt { color: var(--accent); }
.gd-ev-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-ev-title { font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.gd-ev-title .marker { color: var(--accent); }
.gd-ev-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gd-ev-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; }
.gd-ev-time .mp-rsvp { margin-top: 4px; }

/* announcements */
.gd-ann { display: flex; flex-direction: column; }
.gd-ann-row { padding: 13px 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.gd-ann-row:first-child { border-top: 0; }
.gd-ann-row.pinned { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.gd-ann-hd { display: flex; align-items: center; gap: 9px; }
.gd-ann-av {
  width: 26px; height: 26px; flex: none;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted);
}
.gd-ann-who { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.gd-ann-who b { font-size: 13px; font-weight: 600; }
.gd-ann-who span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.gd-ann-t { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); align-self: flex-start; }
.gd-ann-pin { color: var(--accent); }
.gd-ann-title { font-size: 14.5px; font-weight: 500; }
.gd-ann-text { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* =================================================================
   THE LOCKER  (identity rail + main) — desktop layout
   ================================================================= */
.lk-wrap { display: grid; grid-template-columns: 320px 1fr; }

.lk-rail {
  border-right: 1px solid var(--rule);
  background: var(--panel);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.lk-jersey-bg {
  position: absolute;
  top: -28px;
  right: -14px;
  font-family: 'Anton', sans-serif;
  font-size: 200px;
  line-height: 1;
  color: var(--text);
  opacity: 0.05;
  pointer-events: none;
}
.lk-id { display: flex; flex-direction: column; gap: 12px; position: relative; }
.lk-av {
  width: 72px; height: 72px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 30px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}
.lk-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
.lk-name { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 0.9; text-transform: uppercase; }
.lk-role { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.lk-role .jersey { font-family: 'Anton', sans-serif; color: var(--accent); font-size: 16px; }
.lk-email { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--dim); }

.lk-ring-wrap { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; }
.lk-ring {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--panel) 70%, transparent 71%),
    conic-gradient(var(--accent) var(--p, 96%), var(--rule) 0);
  display: flex; align-items: center; justify-content: center;
}
.lk-ring .v { font-family: 'Anton', sans-serif; font-size: 20px; }
.lk-ring .v small { font-size: 11px; color: var(--muted); }
.lk-ring-meta { display: flex; flex-direction: column; gap: 4px; }
.lk-ring-meta .big { font-family: 'Anton', sans-serif; font-size: 24px; line-height: 0.9; }
.lk-ring-meta .big.rec { font-size: 16px; margin-top: 6px; }
.lk-ring-meta .big .fire { color: var(--accent); }
.lk-ring-meta .lab { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; }

.lk-rail-block { display: flex; flex-direction: column; gap: 10px; position: relative; }
.lk-rail-lab { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lk-rail-lab .mp-see { font-size: 9.5px; letter-spacing: 0.08em; }
.lk-rail-lab .mp-see svg { width: 11px; height: 11px; }
.lk-due-mini {
  border: 1px solid color-mix(in oklab, var(--danger) 45%, var(--rule));
  padding: 12px 13px;
  display: flex; flex-direction: column; gap: 9px;
  background: color-mix(in oklab, var(--danger) 8%, transparent);
}
.lk-due-mini .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lk-due-mini .nm { font-size: 14px; }
.lk-due-mini .amt { font-family: 'Anton', sans-serif; font-size: 22px; }
.lk-due-mini .desc { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); }
.lk-due-mini .mp-btn { justify-content: center; }

.lk-club { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--rule); }
.lk-club:last-of-type { border-bottom: 1px solid var(--rule); }
.lk-club .nm { font-size: 14px; display: flex; align-items: center; gap: 7px; }
.lk-club .nm .star { color: var(--accent); }
.lk-club .tier { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }

.lk-main { padding: 26px 30px 34px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* locker next-event ticket */
.lk-ticket {
  border: 1px solid var(--rule-hi);
  background: var(--panel);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
}
.lk-ticket-stub {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 116px;
}
.lk-ticket-stub .dow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; }
.lk-ticket-stub .day { font-family: 'Anton', sans-serif; font-size: 48px; line-height: 0.85; }
.lk-ticket-stub .mo { font-family: 'Anton', sans-serif; font-size: 18px; }
.lk-ticket-mid { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-left: 1px dashed var(--rule-hi); min-width: 0; }
.lk-ticket-kick { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--accent); }
.lk-ticket-title { font-family: 'Anton', sans-serif; font-size: 26px; line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase; }
.lk-ticket-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lk-ticket-right {
  padding: 16px 20px;
  border-left: 1px dashed var(--rule-hi);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px;
  text-align: right;
}
.lk-ticket-count { display: flex; flex-direction: column; align-items: flex-end; }
.lk-ticket-count .num { font-family: 'Anton', sans-serif; font-size: 34px; line-height: 0.9; }
.lk-ticket-count .lab { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }

/* locker schedule list */
.lk-sched { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.lk-sched .gd-ev { padding-left: 0; padding-right: 4px; }

/* locker — last result / box score */
.lk-result { border: 1px solid var(--rule); background: var(--panel); }
.lk-result-top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.lk-result-l { display: flex; align-items: center; gap: 14px; }
.lk-result-badge {
  width: 50px; height: 50px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 26px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
.lk-result-badge.win { background: var(--accent); color: var(--accent-ink); }
.lk-result-badge.loss { background: var(--panel-2); border: 1px solid var(--rule-hi); color: var(--muted); }
.lk-result-score .big { font-family: 'Anton', sans-serif; font-size: 28px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; }
.lk-result-score .big .sep { color: var(--dim); }
.lk-result-score .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lk-result-sets { display: flex; border: 1px solid var(--rule); }
.lk-result-sets .set {
  padding: 7px 13px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.lk-result-sets .set:last-child { border-right: 0; }
.lk-result-sets .set.won { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.lk-result-sets .sn { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em; color: var(--dim); }
.lk-result-sets .sv { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.lk-result-sets .set.won .sv { color: var(--text); }

.lk-result-stats { padding: 14px 18px 16px; }
.lk-result-stats-lab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  color: var(--dim); text-transform: uppercase; margin-bottom: 10px;
}
.lk-form { display: flex; align-items: center; gap: 5px; }
.lk-form .flab { color: var(--dim); margin-right: 2px; }
.lk-form .fd {
  width: 17px; height: 17px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
}
.lk-form .fd.w { background: color-mix(in oklab, var(--ok) 20%, transparent); color: var(--ok); }
.lk-form .fd.l { background: color-mix(in oklab, var(--danger) 18%, transparent); color: var(--danger); }
.lk-statgrid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rule); }
.lk-statcell {
  padding: 10px 12px 11px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px;
}
.lk-statcell:last-child { border-right: 0; }
.lk-statcell.hi { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.lk-statcell .v { font-family: 'Anton', sans-serif; font-size: 30px; line-height: 0.85; }
.lk-statcell.hi .v { color: var(--accent); }
.lk-statcell .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.lk-statcell .k em { color: var(--accent); font-style: normal; }

/* locker announcements (cards) */
.lk-ann-grid { display: flex; flex-direction: column; gap: 12px; }
.lk-ann-card {
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 15px 17px;
  display: flex; flex-direction: column; gap: 8px;
}
.lk-ann-card.pinned { border-left: 3px solid var(--accent); }
.lk-ann-card .hd { display: flex; align-items: center; gap: 10px; }
.lk-ann-card .av {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
}
.lk-ann-card .who { display: flex; flex-direction: column; line-height: 1.15; }
.lk-ann-card .who b { font-size: 13.5px; }
.lk-ann-card .who span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.lk-ann-card .t { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); }
.lk-ann-card .t .pin { color: var(--accent); }
.lk-ann-card .title { font-size: 15px; font-weight: 500; }
.lk-ann-card .text { font-size: 13px; color: var(--muted); line-height: 1.45; white-space: pre-line; }

/* =================================================================
   RESPONSIVE — container queries (phone reflow)
   ================================================================= */
@container (max-width: 720px) {
  .gd-body { padding: 18px 16px 26px; gap: 20px; }
  .gd-hero { grid-template-columns: 1fr; gap: 18px; }
  .gd-name { font-size: 56px; }
  .gd-grid { grid-template-columns: 1fr; }

  .lk-wrap { grid-template-columns: 1fr; }
  .lk-rail { border-right: 0; border-bottom: 1px solid var(--rule); }
  .lk-main { padding: 18px 16px 26px; }
  .lk-ticket { grid-template-columns: auto 1fr; }
  .lk-ticket-right { grid-column: 1 / 3; border-left: 0; border-top: 1px dashed var(--rule-hi); flex-direction: row; align-items: center; justify-content: space-between; }

  /* Last result reflow */
  .lk-result-top { flex-direction: column; align-items: stretch; gap: 14px; }
  .lk-result-sets { width: 100%; }
  .lk-result-sets .set { flex: 1; }
  .lk-result-stats-lab { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lk-statgrid { grid-template-columns: repeat(3, 1fr); }
  .lk-statcell:nth-child(3) { border-right: 0; }
  .lk-statcell:nth-child(4), .lk-statcell:nth-child(5) { border-top: 1px solid var(--rule); }
  .lk-statcell .v { font-size: 26px; }
}

@container (max-width: 440px) {
  .lk-name { font-size: 34px; }
  .lk-ticket-title { font-size: 22px; }
  .lk-ticket-stub { min-width: 92px; padding: 14px 14px; }
  .lk-ticket-stub .day { font-size: 38px; }
  .mp-shead-r { flex-direction: column; align-items: flex-end; gap: 3px; }
  .lk-result-score .big { font-size: 24px; }
}

/* =================================================================
   PROSPECT PORTAL — reuses .lk-wrap / .lk-rail / .lk-main / .lk-ticket
   / .lk-ring / .gd-ev / .lk-ann-card. These pr- classes add the
   prospect-only pieces: pipeline tracker, what-to-bring, profile
   checklist, clinic register cards.
   ================================================================= */
.lk-role .age { color: var(--dim); }
.lk-ring-meta .big.sm { font-size: 18px; }
.lk-ring-meta .mp-btn { margin-top: 8px; justify-content: center; }

/* status eyebrow chip in the rail */
.pr-statuschip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 3px 8px; width: fit-content;
}

/* applying-to block */
.pr-apply { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border: 1px solid var(--rule); background: var(--panel-2); }
.pr-apply .lab { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.pr-apply .nm { font-size: 16px; display: flex; align-items: center; gap: 7px; }
.pr-apply .nm .star { color: var(--accent); }
.pr-apply .tier { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

/* profile completion checklist (rail) */
.pr-todo { display: flex; flex-direction: column; }
.pr-todo .item { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.pr-todo .item:first-child { border-top: 0; }
.pr-todo .box { width: 16px; height: 16px; flex: none; border: 1px solid var(--rule-hi); display: flex; align-items: center; justify-content: center; }
.pr-todo .item.done .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pr-todo .item.done .lbl { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.pr-todo .item.todo .lbl { color: var(--text); }
.pr-todo .item .lbl { flex: 1; }
.pr-todo .item.todo .go { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; }

/* ── Pipeline tracker (the journey) ───────────────────────────── */
.pr-pipe {
  display: flex;
  border: 1px solid var(--rule-hi);
  background: var(--panel);
  padding: 24px 14px 18px;
}
.pr-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  position: relative;
  text-align: center;
}
.pr-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--rule);
  z-index: 0;
}
.pr-step.done:not(:last-child)::after { background: var(--accent); }
.pr-node {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  font-family: 'Anton', sans-serif; font-size: 15px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--panel-2); border: 0; color: var(--dim);
  box-shadow: inset 0 0 0 1.5px var(--rule-hi);
}
.pr-step.done .pr-node { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.pr-step.current .pr-node {
  background: var(--panel); color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}
.pr-step .pr-slabel { display: flex; flex-direction: column; gap: 2px; }
.pr-step .pr-sname { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pr-step.done .pr-sname { color: var(--text); }
.pr-step.current .pr-sname { color: var(--accent); }
.pr-step .pr-ssub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--dim); }
.pr-step .pr-now { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin-top: 1px; }

/* ── What to bring (under the eval ticket) ────────────────────── */
.pr-bring {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--rule); background: var(--panel-2);
  grid-column: 1 / -1;
}
.pr-bring .lab { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.pr-bring-items { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-bring-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text);
  border: 1px solid var(--rule); padding: 5px 9px;
}
.pr-bring-item svg { color: var(--accent); width: 12px; height: 12px; flex: none; }

/* ── Clinic register cards ────────────────────────────────────── */
.pr-clinic {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px;
  align-items: center; padding: 13px 16px; border-top: 1px solid var(--rule);
}
.pr-clinic:first-child { border-top: 0; }
.pr-clinic-name { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pr-clinic-meta { grid-column: 1; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pr-clinic-meta .spots { color: var(--accent); }
.pr-clinic-price { font-family: 'Anton', sans-serif; font-size: 20px; text-align: right; }
.pr-clinic-price.free { color: var(--ok); font-size: 16px; }
.pr-clinic-act { grid-row: 1 / 3; grid-column: 3; display: flex; align-items: center; }

/* ── Prospect responsive — vertical pipeline + stacked clinic rows ── */
@container (max-width: 720px) {
  .pr-pipe { flex-direction: column; padding: 16px 16px; gap: 0; }
  .pr-step { flex-direction: row; align-items: flex-start; gap: 13px; text-align: left; padding-bottom: 16px; }
  .pr-step:last-child { padding-bottom: 0; }
  .pr-step:not(:last-child)::after {
    top: 38px; bottom: -0px; left: 18px; right: auto;
    width: 2px; height: auto;
  }
  .pr-step .pr-slabel { padding-top: 7px; }
  .pr-clinic { grid-template-columns: 1fr auto; }
  .pr-clinic-act { grid-row: auto; grid-column: 1 / 3; margin-top: 8px; }
  .pr-clinic-act .mp-btn { width: 100%; justify-content: center; }
}