/* ==========================================================================
   pages/person.css: one collected record (/collection/:id)
   Owner: the collection lane. Scoped under .pg-person, drawn from public/ds/tokens.css.
   ========================================================================== */

.pg-person .pr { padding-top: var(--s-6); padding-bottom: var(--s-9); }
.pg-person .pr-back { display: inline-flex; margin-bottom: var(--s-4); }
.pg-person .pr-back .i { width: 14px; height: 14px; margin-right: 6px; }

/* ---- hero ---------------------------------------------------------------- */
.pg-person .pr-hero, .pg-person .pr-locked {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6);
  padding: var(--s-6); overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--mode-rgb), .16) 0%, transparent 60%), var(--surface);
  border: 1px solid var(--mode-line, var(--border));
}
.pg-person .pr-pic {
  position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  background: #0C0D10; box-shadow: 0 0 0 1px rgba(var(--mode-rgb), .45), 0 0 40px -8px rgba(var(--mode-rgb), .55);
}
.pg-person .pr-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); display: block; }
.pg-person .pr-mono {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: hsl(var(--h) 30% 20%); color: var(--text);
  font: 700 64px/1 var(--font-display); letter-spacing: .02em;
}
.pg-person .pr-no {
  position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 6px;
  background: rgba(0,0,0,.7); color: var(--text); font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-caps);
}
.pg-person .pr-credit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); font-size: 10px; line-height: 1.3; color: var(--text-2);
}
.pg-person .pr-credit a { color: inherit; }
.pg-person .pr-id { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); justify-content: center; }
.pg-person .pr-id .eyebrow { margin: 0; }
.pg-person .pr-name {
  margin: 0; font: 600 clamp(34px, 5.5vw, 52px)/1.02 var(--font-serif); letter-spacing: -.01em; color: var(--text);
  overflow-wrap: anywhere;
}
.pg-person .pr-who { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text); opacity: .9; max-width: 56ch; }
.pg-person .pr-span, .pg-person .pr-aka, .pg-person .pr-rar-line { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.pg-person .pr-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
.pg-person .pr-rar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-2);
  font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.pg-person .pr-rar .i { width: 13px; height: 13px; }
.pg-person .pr-rar[data-tone="gold"] { color: var(--gold); border-color: var(--gold-line); background: var(--gold-bg); }
.pg-person .pr-rar[data-tone="violet"] { color: #C4B5FD; border-color: #4C3A8A; background: #1C1433; }
.pg-person .pr-rar[data-tone="green"] { color: var(--green-soft); border-color: var(--green-line); background: var(--green-bg); }

/* ---- sections ------------------------------------------------------------ */
.pg-person .pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
.pg-person .pr-col { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pg-person .pr-sec { margin-top: var(--s-6); min-width: 0; }
.pg-person .pr-grid .pr-sec { margin-top: 0; }
.pg-person .pr-sec .section-title { margin: 0 0 var(--s-3); }
.pg-person .pr-sec .section-head .section-title { margin: 0; }
.pg-person .pr-sec .section-head { margin-bottom: var(--s-3); }
.pg-person .pr-note { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pg-person .pr-count { color: var(--text-2); font: 500 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ---- key stats: the reward ---------------------------------------------- */
.pg-person .pr-stats { padding: var(--s-5); border-color: var(--gold-line); box-shadow: var(--glow-gold); }
.pg-person .pr-unlock {
  display: inline-flex; align-items: center; gap: 6px; color: var(--gold);
  font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.pg-person .pr-unlock .i { width: 13px; height: 13px; }
.pg-person .pr-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pg-person .pr-bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 36px; align-items: center; column-gap: var(--s-3); row-gap: 2px; }
.pg-person .pr-bar-k { font: 600 var(--fs-sm)/1.2 var(--font-label); letter-spacing: .04em; color: var(--text); }
.pg-person .pr-bar-track { position: relative; height: 10px; border-radius: 999px; background: #0C0D10; border: 1px solid var(--border); overflow: hidden; }
.pg-person .pr-bar-track i {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--mode-gradient);
  box-shadow: 0 0 12px rgba(var(--mode-rgb), .5);
  transform-origin: left; animation: pr-fill .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.pg-person .pr-bar:first-child .pr-bar-track i { background: linear-gradient(90deg, var(--gold-strong), var(--gold)); box-shadow: 0 0 14px rgba(245,181,61,.55); }
.pg-person .pr-bar-v { text-align: right; font: 700 var(--fs-md)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text); }
.pg-person .pr-bar-line { grid-column: 2 / 4; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.3; }
@keyframes pr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- known for, facts ---------------------------------------------------- */
.pg-person .pr-work { margin: 0 0 var(--s-3); color: var(--text); }
.pg-person .pr-known { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-person .pr-known li {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--mode-primary); border-radius: var(--r-sm);
}
.pg-person .pr-known b { font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mode-highlight); }
.pg-person .pr-known span { color: var(--text); font-size: var(--fs-sm); }
.pg-person .pr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pg-person .pr-facts li {
  position: relative; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 18px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.pg-person .pr-facts li::before {
  content: ''; position: absolute; left: var(--s-4); top: 1.35em; width: 6px; height: 6px; border-radius: 50%; background: var(--mode-primary);
}

/* ---- history, sets ------------------------------------------------------- */
.pg-person .pr-firsts { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-person .pr-first { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--text); font-size: var(--fs-sm); }
.pg-person .pr-boards { list-style: none; margin: 0; padding: 0; }
.pg-person .pr-boards .list-row { text-decoration: none; color: inherit; }
.pg-person .pr-boards .lr-title, .pg-person .pr-boards .lr-meta { display: block; }
.pg-person .pr-sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.pg-person .pr-set {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.pg-person .pr-set.is-done { border-color: var(--green-line); }
.pg-person .pr-set-t { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.pg-person .pr-set-t b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pg-person .pr-set-t span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-person .pr-set-bar { height: 6px; border-radius: 999px; background: #0C0D10; overflow: hidden; }
.pg-person .pr-set-bar i { display: block; height: 100%; background: var(--mode-gradient); }
.pg-person .pr-set.is-done .pr-set-bar i { background: var(--green, #22C55E); }
.pg-person .pr-set-line { color: var(--text-2); font-size: var(--fs-xs); }

/* ---- locked -------------------------------------------------------------- */
.pg-person .pr-silo, .pr-silo {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 220px;
  border-radius: var(--r-md); background: #0C0D10; border: 1px dashed var(--border);
}
.pr-silo-fig { width: 70%; height: 70%; fill: #24252B; }
.pr-silo-lock {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.pr-silo-lock .i { width: 16px; height: 16px; }
.pg-person .pr-locked .btn { align-self: flex-start; margin-top: var(--s-3); }

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 720px) {
  .pg-person .pr-hero, .pg-person .pr-locked { grid-template-columns: 1fr; padding: var(--s-4); gap: var(--s-4); }
  .pg-person .pr-pic { max-width: 240px; width: 100%; justify-self: center; }
  .pg-person .pr-silo { justify-self: center; max-width: 180px; }
  .pg-person .pr-grid { grid-template-columns: 1fr; }
  .pg-person .pr-bar { grid-template-columns: 92px minmax(0, 1fr) 30px; }
  .pg-person .pr-locked .btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-person .pr-bar-track i { animation: none; }
}