/* guardian-portal.css — Guardian / Parent (household) portal at /my-athletes.
   Ported from the Claude Design handoff (GuardianPortal.html). Loads AFTER
   member-portal.css and reuses its tokens + atoms: the gp- rules below reference
   --panel / --rule / --text / --accent etc., which member-portal.css aliases onto
   design-tokens.css inside .mp-root (the guardian root is `.mp-root gp`). So it
   tracks the app theme + per-club accent automatically. The per-child drilldown
   reuses .mp-shead / .lk-ticket / .lk-result / .pr-pipe / .pr-clinic / .gd-ev /
   .lk-ann-card from member-portal.css. App chrome supplies the top bar.
   Tone: calmer than the athlete portal — logistics and money read clearly. */

.gp-body { padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 22px; }

/* ── Household header + child switcher (the spine) ────────────── */
.gp-head { display: flex; flex-direction: column; gap: 4px; }
.gp-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }
.gp-title { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
.gp-title .alt { color: var(--accent); }
.gp-subnote { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.gp-switch { display: flex; gap: 12px; flex-wrap: wrap; }
.gp-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px 11px 11px;
  border: 1px solid var(--rule-hi);
  background: var(--panel-hi);
  cursor: pointer;
  position: relative;
  text-align: left;
  min-width: 168px;
}
.gp-chip:hover { border-color: var(--accent); }
.gp-chip.active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, var(--panel)); }
.gp-chip.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.gp-chip-av {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 15px;
  background: var(--accent); color: var(--accent-ink);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}
.gp-chip.is-prospect .gp-chip-av { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--rule-hi); }
.gp-chip-all .gp-chip-av { background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--rule-hi); clip-path: none; border-radius: 2px; font-size: 13px; }
.gp-chip-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gp-chip-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.02em; line-height: 1; color: var(--text); }
.gp-chip-sub { display: flex; align-items: center; gap: 7px; }
.gp-chip-status {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 1px 5px;
}
.gp-chip-status.rostered { color: var(--ok); background: color-mix(in oklab, var(--ok) 16%, transparent); }
.gp-chip-status.prospect { color: var(--accent-ink); background: var(--accent); }
.gp-chip-age { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); }
.gp-chip-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  border-radius: 10px;
}
.gp-chip-all .gp-chip-badge { background: var(--accent); color: var(--accent-ink); }

/* ── Household summary strip (aggregate KPIs) ─────────────────── */
.gp-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-hi); }
.gp-kpi { padding: 16px 20px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; position: relative; }
.gp-kpi:last-child { border-right: 0; }
.gp-kpi.alert { background: color-mix(in oklab, var(--danger) 8%, transparent); }
.gp-kpi .lab { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.gp-kpi .v { font-family: 'Anton', sans-serif; font-size: 36px; line-height: 0.9; }
.gp-kpi.alert .v { color: var(--danger); }
.gp-kpi .sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; }

/* ── Overview content grid ────────────────────────────────────── */
.gp-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.gp-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.gp-panel { border: 1px solid var(--rule); background: var(--panel); display: flex; flex-direction: column; }
.gp-panel.alert { border-color: color-mix(in oklab, var(--danger) 45%, var(--rule)); }
.gp-phead { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.gp-phead h3 { margin: 0; font-family: 'Anton', sans-serif; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; }
.gp-phead .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); }
.gp-phead .meta em { color: var(--danger); font-style: normal; }
.gp-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); }
.gp-pfoot a { color: var(--accent); text-decoration: none; }

/* child tag (used across action items, schedule, fees, messages) */
.gp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px 2px 4px; border: 1px solid var(--rule);
  color: var(--muted); white-space: nowrap;
}
.gp-tag .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 7px; background: var(--accent); color: var(--accent-ink); }
.gp-tag.is-prospect .dot { background: var(--panel-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule-hi); }

/* ── Action items ─────────────────────────────────────────────── */
.gp-action { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--rule); align-items: center; }
.gp-action:first-child { border-top: 0; }
.gp-action-ic {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); color: var(--muted);
}
.gp-action.urgent .gp-action-ic { border-color: color-mix(in oklab, var(--danger) 50%, var(--rule)); color: var(--danger); }
.gp-action-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-action-label { font-size: 14.5px; }
.gp-action-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-action-due { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; }
.gp-action.urgent .gp-action-due { color: var(--danger); }
.gp-action-act { display: flex; align-items: center; }

/* ── This week (combined schedule) + conflict ─────────────────── */
.gp-conflict {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 16px; border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--danger) 9%, transparent);
}
.gp-conflict .ic { width: 8px; align-self: stretch; background: var(--danger); flex: none; }
.gp-conflict .body { display: flex; flex-direction: column; gap: 3px; }
.gp-conflict .t1 { font-size: 13.5px; line-height: 1.3; }
.gp-conflict .t1 b { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--danger); margin-right: 9px; }
.gp-conflict .t1 .cd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.gp-conflict .t2 { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.01em; line-height: 1.4; }

.gp-week { display: flex; flex-direction: column; }
.gp-wk { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--rule); }
.gp-wk:first-child { border-top: 0; }
.gp-wk.conflict { background: color-mix(in oklab, var(--danger) 5%, transparent); }
.gp-wk-date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gp-wk-date .dow { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); letter-spacing: 0.1em; }
.gp-wk-date .dt { font-family: 'Anton', sans-serif; font-size: 14px; margin-top: 3px; }
.gp-wk.is-game .gp-wk-date .dt { color: var(--accent); }
.gp-wk-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gp-wk-title { font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.gp-wk-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; }
.gp-wk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.gp-wk-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); }

/* ── Fees grouped by child / club (single-club checkout) ──────── */
.gp-feegrp { border-top: 1px solid var(--rule); padding: 13px 16px; display: flex; flex-direction: column; gap: 10px; }
.gp-feegrp:first-child { border-top: 0; }
.gp-feegrp-hd { display: flex; align-items: center; gap: 9px; }
.gp-feegrp-hd .club { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
.gp-feegrp-hd .sep { color: var(--dim); }
.gp-feeitem { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.gp-feeitem .nm { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.gp-feeitem .amt { font-family: 'Anton', sans-serif; font-size: 19px; text-align: right; }
.gp-feeitem .desc { grid-column: 1; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }
.gp-feegrp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.gp-feegrp-foot .subtotal { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.gp-feegrp-foot .subtotal b { font-family: 'Anton', sans-serif; font-size: 17px; color: var(--text); margin-left: 6px; letter-spacing: 0.02em; }
.gp-checkout-note { padding: 11px 16px; border-top: 1px solid var(--rule); font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); letter-spacing: 0.02em; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.gp-checkout-note svg { flex: none; margin-top: 1px; color: var(--muted); }

/* ── Per-child drilldown ──────────────────────────────────────── */
.gp-drill { display: flex; flex-direction: column; gap: 22px; }
.gp-drill-id {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 18px; border: 1px solid var(--rule-hi); background: var(--panel);
}
.gp-drill-av {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 21px;
  background: var(--accent); color: var(--accent-ink);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}
.gp-drill-id.is-prospect .gp-drill-av { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--rule-hi); }
.gp-drill-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-drill-name { font-family: 'Anton', sans-serif; font-size: 26px; line-height: 0.9; text-transform: uppercase; }
.gp-drill-sub { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.gp-drill-open { margin-left: auto; align-self: center; }

.gp-drill-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gp-drill-cols .full { grid-column: 1 / -1; }

/* the condensed-section heading reuses .mp-shead */
.gp-panel .lk-ann-grid { padding: 14px 16px; }
.gp-msg-tag { margin-top: 2px; }
.gp-drill-sub .age { color: var(--dim); }
.gp-drill-name .alt { color: var(--accent); }
/* A neutral note under a drilldown section — placeholder pipeline, empty schedule, etc. */
.gp-drill-note {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--rule-hi); background: var(--panel-hi);
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}

/* ── Responsive ───────────────────────────────────────────────── */
@container (max-width: 720px) {
  .gp-body { padding: 18px 16px 26px; gap: 18px; }
  .gp-title { font-size: 30px; }
  .gp-switch { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .gp-chip { flex: none; min-width: 170px; }
  .gp-summary { grid-template-columns: 1fr; }
  .gp-kpi { border-right: 0; border-bottom: 1px solid var(--rule); }
  .gp-kpi:last-child { border-bottom: 0; }
  .gp-kpi .v { font-size: 30px; }
  .gp-grid { grid-template-columns: 1fr; }
  .gp-drill-cols { grid-template-columns: 1fr; }
  .gp-drill-id { flex-wrap: wrap; }
  .gp-drill-open { margin-left: 0; width: 100%; }
  .gp-drill-open .mp-btn { width: 100%; justify-content: center; }
}