/* ============================================================================
   PROFILE TABS — the player-profile tab component, shared by the editor
   (/app/player/profile.html) and the public page (/players/_player.html).

   One rule drives the whole file: nothing is loose text on a bare background.
   The tab strip is a floating glass rail; every pane is a frosted card with a
   brass hairline; every list item inside a pane is a tinted row that recedes
   INTO the card rather than stacking another white card on top of it.

   Behaviour lives in /assets/js/profile-tabs.js — the two pages author an
   empty <nav class="pf-tabs" data-tabs> plus [data-tab-pane] sections and let
   the module build the strip, so the editor and the public page can never
   drift apart again.
   ========================================================================== */

/* ── Ambient bed ───────────────────────────────────────────────────────────
   Glass needs something to refract. Without this wash the frosted panels sit
   on flat #f5f7f5 and read as plain white boxes. */
.pf-bed { position: relative; isolation: isolate; }
.pf-bed::before {
  content: "";
  position: absolute;
  /* Top edge stays at 0. The bed is a positioned element, so any negative
     top would paint this haze over the dark hero above it. */
  inset: 0 calc(var(--space-8) * -1) 0;
  z-index: -1;
  pointer-events: none;
  /* Same optic as --app-wash in app.css: brass off the top-right, forest at
     the top-left, the far corners carrying the weight down. */
  background:
    radial-gradient(760px 520px at 96% -6%, rgb(199 164 108 / 0.22), transparent 64%),
    radial-gradient(820px 560px at 6%  -4%, rgb(13 77 58 / 0.14),    transparent 62%),
    radial-gradient(700px 480px at 90% 102%, rgb(13 77 58 / 0.09),   transparent 66%),
    radial-gradient(660px 460px at 8%  98%, rgb(199 164 108 / 0.14), transparent 66%);
  /* The blobs are wider than the bed, so every edge would otherwise end on a
     hard rectangle. Fade all four out instead. Browsers without mask-composite
     union the two masks, which is the same as no mask at all — the old,
     slightly harder edge, never a wrong one. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ── The rail ──────────────────────────────────────────────────────────────
   Sized to its labels, not to the column, so it reads as an object floating
   over the page rather than a full-width bar of text. Centred over the pane
   card below it — left-aligned it read as the start of a row of text. */
.pf-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(142deg, rgb(255 255 255 / 0.86) 0%, rgb(255 255 255 / 0.58) 52%, rgb(246 249 246 / 0.66) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
          backdrop-filter: blur(24px) saturate(155%);
  border: 1px solid rgb(255 255 255 / 0.72);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.9),
    0 1px 2px 0 rgb(13 31 26 / 0.05),
    0 10px 26px -10px rgb(13 77 58 / 0.28);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }

.pf-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 18px;
  border: 0;
  background: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
  color: var(--color-ink-500);
  cursor: pointer;
  transition:
    color var(--duration-base) var(--ease-spring),
    transform var(--duration-fast) var(--ease-spring);
}

/* Active fill. Crossfaded on opacity rather than slid on width, so the pill
   never has to animate a geometry the border-radius would distort. */
.pf-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(148deg, #145c43 0%, var(--color-primary) 46%, #072e22 100%);
  box-shadow:
    inset 0 1px 0 0 rgb(199 164 108 / 0.32),
    0 1px 2px 0 rgb(13 31 26 / 0.18),
    0 8px 18px -8px rgb(13 77 58 / 0.55);
  transition: opacity var(--duration-base) var(--ease-spring);
}
/* Hover tint, one layer further back so it can sit under the active fill. */
.pf-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  opacity: 0;
  background: rgb(13 77 58 / 0.07);
  transition: opacity var(--duration-fast) var(--ease-spring);
}

.pf-tab:not(.on):hover { color: var(--color-ink-900); }
.pf-tab:not(.on):hover::after { opacity: 1; }
.pf-tab:active { transform: scale(0.975); }
.pf-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.pf-tab.on { color: #fff; }
.pf-tab.on::before { opacity: 1; }

/* Brass tick on the live tab — the one mark that survives at a glance. */
.pf-tab__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity var(--duration-base) var(--ease-spring),
    transform var(--duration-base) var(--ease-spring);
}
.pf-tab.on .pf-tab__dot { opacity: 1; transform: scale(1); }

/* Tier badge ("Starter") rides inside a tab on the editor. */
.pf-tab .starter-badge { margin-left: 2px; }
.pf-tab.on .starter-badge {
  background: rgb(199 164 108 / 0.22);
  border-color: rgb(199 164 108 / 0.4);
}

/* Stat tiles whose value is words, not a figure. Intended major and high school
   are full names; at the numeric 1.625rem they wrap to three lines. The base
   .stat-tile rules stay in each page's own <style> block, which the browser
   reads after this file, so the modifier needs the extra .v to outrank it. */
.stat-tile .v.v--sm {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-top: 9px;
}

/* ── Pane card ─────────────────────────────────────────────────────────────
   The frosted panel every tab's content now lives inside. */
.pf-card {
  position: relative;
  margin-top: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  border: 1px solid rgb(255 255 255 / 0.8);
  background: linear-gradient(158deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.87) 50%, rgb(246 250 247 / 0.88) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
          backdrop-filter: blur(26px) saturate(155%);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.95),
    0 2px 4px -1px rgb(13 31 26 / 0.06),
    0 12px 28px -12px rgb(13 77 58 / 0.2),
    0 32px 64px -28px rgb(13 42 34 / 0.28);
  overflow: hidden;
}
/* Brass hairline across the top edge. */
.pf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(199 164 108 / 0.5) 18%,
    rgb(199 164 108 / 0.85) 50%,
    rgb(199 164 108 / 0.5) 82%,
    transparent 100%);
}
/* Brass bloom in the top-right corner — the tint the flat panel was missing. */
.pf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(112% 82% at 100% 0%, rgb(199 164 108 / 0.11), transparent 56%);
}
.pf-card > * { position: relative; z-index: 1; }

/* Card head — the rule bleeds to the panel edge, same convention as .modal--framed. */
.pf-card__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 calc(var(--space-8) * -1) var(--space-6);
  padding: 0 var(--space-8) var(--space-5);
  border-bottom: 1px solid rgb(13 31 26 / 0.09);
}
.pf-card__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 7px;
}
.pf-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink-900);
  margin: 0;
}
.pf-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Body prose — the bio. */
.pf-prose {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-ink-700);
  white-space: pre-line;
  max-width: 68ch;
}
.pf-prose i { color: var(--color-ink-400); }

/* ── Pane enter ────────────────────────────────────────────────────────────
   One staggered reveal per switch. transform + opacity only. */
@keyframes pf-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.pf-pane--in .pf-card { animation: pf-rise 380ms var(--ease-spring) both; }
.pf-pane--in .pf-card__head { animation: pf-rise 380ms var(--ease-spring) 60ms both; }
.pf-pane--in .pf-stack > *,
.pf-pane--in .pf-grid > * { animation: pf-rise 420ms var(--ease-spring) both; }
.pf-pane--in .pf-stack > :nth-child(1), .pf-pane--in .pf-grid > :nth-child(1) { animation-delay: 90ms; }
.pf-pane--in .pf-stack > :nth-child(2), .pf-pane--in .pf-grid > :nth-child(2) { animation-delay: 140ms; }
.pf-pane--in .pf-stack > :nth-child(3), .pf-pane--in .pf-grid > :nth-child(3) { animation-delay: 190ms; }
.pf-pane--in .pf-stack > :nth-child(4), .pf-pane--in .pf-grid > :nth-child(4) { animation-delay: 240ms; }
.pf-pane--in .pf-stack > :nth-child(n+5), .pf-pane--in .pf-grid > :nth-child(n+5) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .pf-pane--in .pf-card,
  .pf-pane--in .pf-card__head,
  .pf-pane--in .pf-stack > *,
  .pf-pane--in .pf-grid > * { animation: none; }
}

/* ── Rows ──────────────────────────────────────────────────────────────────
   Tinted, not white. A white card inside a white glass card reads as two
   stacked sheets; a green-tinted row reads as a recess in one sheet. */
.pf-stack { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pf-stack > li { list-style: none; }
/* Two up on wide screens. Contact and accolades are short one-liners; run in a
   single column they leave a 900px void to the right of every row. */
@media (min-width: 900px) { .pf-stack--2 { grid-template-columns: 1fr 1fr; } }
.pf-stack--2 .pf-empty { grid-column: 1 / -1; }

.pf-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 13px var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(13 31 26 / 0.075);
  background: linear-gradient(140deg, rgb(13 77 58 / 0.075) 0%, rgb(13 77 58 / 0.03) 58%, rgb(199 164 108 / 0.05) 100%);
  text-decoration: none;
  color: inherit;
}
a.pf-row, button.pf-row {
  cursor: pointer;
  transition:
    transform var(--duration-base) var(--ease-spring),
    box-shadow var(--duration-base) var(--ease-spring),
    border-color var(--duration-base) var(--ease-spring);
}
a.pf-row:hover, button.pf-row:hover {
  transform: translateY(-1px);
  border-color: rgb(199 164 108 / 0.45);
  box-shadow: var(--shadow-md);
}
a.pf-row:active, button.pf-row:active { transform: translateY(0); }
a.pf-row:focus-visible, button.pf-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.pf-row__body { flex: 1; min-width: 0; }
/* Both are spans so a row can be an <a> without nesting block elements in a
   link — they have to be told to stack. */
.pf-row__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-900);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.pf-row__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin-top: 4px;
}
.pf-row__go { flex-shrink: 0; color: var(--color-ink-300); transition: transform var(--duration-base) var(--ease-spring), color var(--duration-base) var(--ease-spring); }
a.pf-row:hover .pf-row__go { color: var(--color-accent-deep); transform: translateX(2px); }

/* Icon disc — brass-ringed, used by accolades and contact rows. */
.pf-disc {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-accent-deep);
  background: linear-gradient(145deg, rgb(199 164 108 / 0.2), rgb(199 164 108 / 0.07));
  border: 1px solid rgb(199 164 108 / 0.3);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.6);
}
.pf-disc--green {
  color: var(--color-primary);
  background: linear-gradient(145deg, rgb(13 77 58 / 0.12), rgb(13 77 58 / 0.04));
  border-color: rgb(13 77 58 / 0.16);
}

.pf-row__link { color: var(--color-primary-text); font-weight: 500; text-decoration: none; }
.pf-row__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Date chip on a camp row. */
.pf-datechip {
  flex-shrink: 0;
  width: 56px;
  padding: 8px 0;
  border-radius: var(--radius-md);
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  background: linear-gradient(150deg, #14332a, var(--color-canvas-deep));
  box-shadow: inset 0 1px 0 0 rgb(199 164 108 / 0.22), 0 4px 10px -4px rgb(13 42 34 / 0.5);
}
/* Both are spans (the row can be an <a>), so they need telling to stack. */
.pf-datechip .d { display: block; font-size: 1.1875rem; font-weight: 500; line-height: 1; }
.pf-datechip .m { display: block; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; opacity: 0.85; }

/* Small brass pill (e.g. "ID Camp"). */
.pf-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: rgb(199 164 108 / 0.14);
  border: 1px solid rgb(199 164 108 / 0.3);
}

/* ── Sub-panels (About buckets, the film upload form) ─────────────────────── */
.pf-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .pf-grid--2 { grid-template-columns: 1fr 1fr; } }

.pf-subcard {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(13 31 26 / 0.06);
  background: linear-gradient(150deg, rgb(255 255 255 / 0.55), rgb(13 77 58 / 0.06));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.7);
}
.pf-subcard__tag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: var(--space-3);
}
.pf-subcard__tag svg { color: var(--color-accent); flex: none; }
.pf-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  line-height: 1.55;
  color: var(--color-ink-700);
  font-size: 0.9375rem;
}
.pf-item + .pf-item { border-top: 1px solid rgb(13 31 26 / 0.06); }
.pf-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ── Empty state ───────────────────────────────────────────────────────────
   Was italic grey text floating on the page. Now a recessed panel, so an
   empty tab still looks designed. */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed rgb(13 77 58 / 0.16);
  background: linear-gradient(160deg, rgb(13 77 58 / 0.03), rgb(199 164 108 / 0.035));
  text-align: center;
}
.pf-empty svg { color: var(--color-accent); opacity: 0.7; }
.pf-empty p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-700);
}
.pf-empty small { font-size: 0.8125rem; color: var(--color-ink-400); }

/* ── Film ──────────────────────────────────────────────────────────────────
   Clip tiles keep their black video bed but the caption strip is now glass
   tinted to match the card it sits in. */
.pf-clips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pf-clips .pf-empty { grid-column: 1 / -1; }
@media (max-width: 880px) { .pf-clips { grid-template-columns: 1fr; } }

.pf-clip {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid rgb(13 31 26 / 0.08);
  box-shadow: 0 2px 4px -1px rgb(13 31 26 / 0.08), 0 14px 30px -14px rgb(13 42 34 / 0.4);
}
.pf-clip video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.pf-clip__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(140deg, rgb(255 255 255 / 0.9), rgb(245 248 245 / 0.82));
}
.pf-clip__badge {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 3px;
}
.pf-clip__title { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-900); }

/* ── Responsive ────────────────────────────────────────────────────────────
   Below 640 the rail runs edge to edge and scrolls; the card loses its
   generous inset so content is not squeezed into a gutter. */
@media (max-width: 640px) {
  .pf-tabs { width: 100%; border-radius: var(--radius-xl); }
  .pf-tab { padding: 9px 14px; font-size: 0.8125rem; }
  .pf-card { padding: var(--space-5); border-radius: var(--radius-xl); }
  .pf-card__head {
    margin: 0 calc(var(--space-5) * -1) var(--space-5);
    padding: 0 var(--space-5) var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .pf-card__title { font-size: 1.25rem; }
  .pf-row { flex-wrap: wrap; padding: var(--space-3); }
  .pf-row .pf-tag { order: 3; }
}

/* ── No-backdrop-filter fallback ───────────────────────────────────────────
   Without the blur the translucent fills would show raw page behind them, so
   go near-opaque and keep the tint in the gradient. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pf-tabs { background: linear-gradient(142deg, #ffffff, #f2f6f2); }
  .pf-card { background: linear-gradient(158deg, #ffffff 0%, #fbfcfb 46%, #f4f7f4 100%); }
  .pf-clip__meta { background: linear-gradient(140deg, #ffffff, #f4f7f4); }
}