/* ==========================================================================
   Player detail page — /pros/{slug}
   Loaded only by pros/view.php via $extraHead.

   Design note: the page is a datasheet, so its structural devices are datasheet
   devices — field labels, rules, tabular figures — not decoration. The one bold
   element is the stringbed diagram, drawn from the real string_pattern /
   strings / tension columns. Everything else stays quiet.

   Colour rule (CLAUDE.md): --theme-* tokens only. The two page-local accents
   below exist because "mains vs crosses" needs two hues that carry meaning;
   both are redefined for light mode rather than hardcoded per rule.
   ========================================================================== */

:root {
  /* Mains vs crosses need two hues that carry meaning. They are the site's info
     accent and its brand accent, so both follow the theme automatically and the
     [data-theme="light"] block this pair used to need is gone. */
  --pp-mains:   var(--theme-accent-blue);
  --pp-crosses: var(--theme-accent-solid);
  --pp-display: "Barlow Condensed", "Archivo", system-ui, sans-serif;
}

/* ---------- masthead ---------- */
.pp-mast { padding: 8px 0 28px; border-bottom: 1px solid var(--theme-border-default); }

.pp-page .pp-eyebrow {
  font-family: var(--pp-display);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--theme-text-muted); margin: 0 0 10px;
}

.pp-name {
  font-family: var(--pp-display);
  font-size: clamp(42px, 9vw, 88px);
  font-weight: 700; line-height: .92; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--theme-text); margin: 0; display: block;
}
/* The H1 carries the whole query phrase; only the name is set large. */
.pp-name-qualifier {
  display: block; margin-top: 12px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--theme-text-muted);
}

/* Sized in rem, not em: the flag sits inside .pp-name, whose font-size runs up to
   88px, so an em-based flag would render as a ~130px block next to the name. */
.pp-flag {
  width: 2.4rem; height: 1.7rem; border-radius: 3px;
  vertical-align: baseline; margin-right: .5rem;
}

.pp-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; align-items: center; }
.pp-fact {
  font-family: var(--pp-display);
  font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--theme-text-muted); font-variant-numeric: tabular-nums;
}
.pp-fact b { color: var(--theme-text); font-weight: 700; }

/* ---------- confidence chip ---------- */
.pp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pp-display);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid currentColor; border-radius: 3px; line-height: 1.3;
}
.pp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pp-chip--verified  { color: var(--theme-accent-green); }
.pp-chip--stock     { color: var(--theme-accent-blue); }
.pp-chip--estimated { color: var(--theme-text-muted); }

/* ---------- section scaffolding ---------- */
.pp-section { padding: 40px 0 0; }
.pp-section-label {
  font-family: var(--pp-display);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--theme-text-muted);
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

/* ---------- the stringbed ---------- */
.pp-bed {
  background: var(--theme-surface-1); border: 1px solid var(--theme-border-subtle);
  border-radius: 10px; padding: 26px 22px 20px; height: 100%;
}
/* --pp-len seeds the stringing animation's dash length. 230 clears the longest
   line drawn (a main, 2 x ry = 220), so every string completes its stroke. */
.pp-bed-svg { display: block; width: 100%; max-width: 236px; height: auto; margin: 0 auto; --pp-len: 230; }
.pp-bed-frame { fill: none; stroke: var(--theme-border-strong); stroke-width: 2; }
.pp-bed-main  { stroke: var(--pp-mains);   stroke-width: 1.6; stroke-linecap: round; }
.pp-bed-cross { stroke: var(--pp-crosses); stroke-width: 1.6; stroke-linecap: round; }

.pp-bed-legend { display: grid; gap: 12px; margin-top: 22px; }
.pp-bed-row { display: flex; align-items: baseline; gap: 10px; }
.pp-swatch { width: 12px; height: 3px; border-radius: 2px; flex: none; transform: translateY(-3px); }
.pp-swatch--mains   { background: var(--pp-mains); }
.pp-swatch--crosses { background: var(--pp-crosses); }
.pp-bed-role {
  font-family: var(--pp-display); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--theme-text-muted);
  flex: none; width: 58px;
}
.pp-bed-val { color: var(--theme-text); font-size: 14px; line-height: 1.45; }
.pp-bed-val a { color: var(--theme-link); text-decoration: none; border-bottom: 1px solid transparent; }
.pp-bed-val a:hover, .pp-bed-val a:focus-visible { color: var(--theme-link-hover); border-bottom-color: currentColor; }
.pp-bed-tension { font-family: var(--pp-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--theme-text); }

/* ---------- gear cards — the pages that can earn ---------- */
.pp-gear { display: grid; gap: 14px; }
.pp-card {
  display: block; text-decoration: none;
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border-subtle); border-radius: 10px;
  padding: 20px 22px; transition: border-color .15s ease, transform .15s ease;
}
a.pp-card:hover, a.pp-card:focus-visible {
  border-color: var(--theme-border-strong); transform: translateY(-2px);
}
.pp-page .pp-card-role {
  font-family: var(--pp-display); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--theme-text-muted);
  margin: 0 0 8px;
}
.pp-page .pp-card-name {
  font-family: var(--pp-display); font-size: clamp(24px, 3.6vw, 34px); font-weight: 700;
  line-height: 1.05; letter-spacing: -.005em; color: var(--theme-text); margin: 0;
}
.pp-card-brand {
  display: block; font-size: 14px; font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; color: var(--theme-text-muted); font-family: var(--pp-display);
}
.pp-card-more { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--theme-link); font-weight: 500; }
a.pp-card:hover .pp-card-more { color: var(--theme-link-hover); }
.pp-page .pp-card-note { margin: 10px 0 0; font-size: 13px; color: var(--theme-text-muted); }

/* ---------- specifications grid ---------- */
.pp-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--theme-border-subtle);
  border: 1px solid var(--theme-border-subtle); border-radius: 10px; overflow: hidden;
}
.pp-spec { background: var(--theme-bg); padding: 16px 18px; }
.pp-page .pp-spec-label {
  font-family: var(--pp-display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--theme-text-muted);
  margin: 0 0 6px;
}
.pp-page .pp-spec-value {
  font-family: var(--pp-display); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--theme-text); font-variant-numeric: tabular-nums; margin: 0;
}
.pp-page .pp-spec-value small { font-size: 14px; font-weight: 600; color: var(--theme-text-muted); margin-left: 3px; }
.pp-page .pp-spec-value.is-empty {
  color: var(--theme-text-muted); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- provenance ---------- */
.pp-source {
  background: var(--theme-surface-1); border: 1px solid var(--theme-border-subtle);
  border-radius: 10px; padding: 22px 24px;
}
.pp-page .pp-source p { margin: 0 0 10px; color: var(--theme-text-muted); font-size: 14px; line-height: 1.6; }
.pp-page .pp-source p:last-child { margin-bottom: 0; }
.pp-source a { color: var(--theme-link); word-break: break-word; }
.pp-source a:hover { color: var(--theme-link-hover); }

/* ---------- other players on this frame ---------- */
.pp-peers { display: flex; flex-wrap: wrap; gap: 10px; }
/* Scoped to .pp-page (0,2,0) so the token beats body.ri-dark-canvas a (0,1,2) and
   [data-theme="light"] body a (0,1,2). body.ri-dark-canvas sits on <body> in BOTH themes,
   so a bare .pp-peer (0,1,0) rendered link-blue in dark AND light — there was no theme in
   which the intended colour won, and the hover rule had nothing to transition from. */
.pp-page .pp-peer {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--theme-surface-1); border: 1px solid var(--theme-border-subtle);
  border-radius: 999px; padding: 8px 16px 8px 12px;
  color: var(--theme-text); font-size: 14px; font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.pp-page .pp-peer:hover, .pp-page .pp-peer:focus-visible {
  border-color: var(--theme-border-strong); background: var(--theme-surface-2); color: var(--theme-text);
}

/* ---------- stringing animation: mains, then crosses ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pp-bed-main, .pp-bed-cross {
    stroke-dasharray: var(--pp-len); stroke-dashoffset: var(--pp-len);
    animation: pp-string .5s ease-out forwards;
  }
  .pp-bed-cross { animation-delay: .34s; }
}
@keyframes pp-string { to { stroke-dashoffset: 0; } }

@media (max-width: 575.98px) {
  .pp-specs { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .pp-page .pp-spec-value { font-size: 22px; }
}