/* ─────────────────────────────────────────────────────────────────────
   VIBE DUNGEON · persona-detail chrome
   Shared by every /personas/<slug>/ detail page. Consumes tokens and
   the .portrait identity from site.css; defines layout + slot shapes
   specific to a persona-profile surface. The marketing page does not
   load this file.

   [LAW:one-type-per-behavior] Every persona detail page is the same
   structural type — same DOM scaffolding, same section ordering, same
   a11y patterns, same audio slot. Per-persona variability lives in
   *content* and in the .portrait.pN palette class. Anything beyond
   that is a leak from data into structure; fix the constraint, do
   not branch the CSS.

   [LAW:locality-or-seam] Adding a new persona is a data-fill against
   this archetype: copy the reference page, swap content, ship.
   Nothing here scales with N personas — adding a 12th persona is the
   same edit as adding the 7th.

   Wine restraint: ONE accent placement per detail page (the "Join the
   waitlist" CTA via the global .btn-accent). No new wine surfaces
   introduced here.
   ───────────────────────────────────────────────────────────────────── */

/* ── Nav ──────────────────────────────────────────────────────────── */
.persona-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.persona-nav .links { display: flex; gap: var(--s-4); align-items: center; }
/* Bare nav-link anchors only — .btn variants own their own contrast and
   must not inherit the muted nav-link color (Lighthouse a11y caught
   .btn-primary picking up #a39787 here, dropping contrast to 2.26). */
.persona-nav .links a:not(.btn) { color: var(--ink-muted); font-size: var(--t-small);
  font-weight: 500; transition: color .15s ease; }
.persona-nav .links a:not(.btn):hover { color: var(--ink); }
.persona-nav .age { font-size: var(--t-tiny); color: var(--ink-muted);
  border: 1px solid var(--ring); border-radius: var(--r-pill);
  padding: .2em .6em; letter-spacing: 0.05em; font-weight: 500; }

/* ── Page wrapper ─────────────────────────────────────────────────── */
.persona-detail { padding-block: var(--s-5) var(--s-7); }

.persona-detail .back {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--ink-muted); font-size: var(--t-small);
  margin-bottom: var(--s-5);
  transition: color .15s ease;
}
.persona-detail .back:hover { color: var(--ink); }
.persona-detail .back .arrow { transition: transform .2s ease; }
.persona-detail .back:hover .arrow { transform: translateX(-3px); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.persona-detail .hero {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-6); align-items: stretch;
  padding-block: var(--s-4) var(--s-7);
}
.persona-detail .hero .portrait {
  aspect-ratio: 4/5;
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-lift);
}
.persona-detail .hero .meta {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-3);
}
/* [LAW:single-enforcer] Role-label contrast matches the homepage
   persona card — --ink-muted, never --accent-soft. WCAG 1.4.3
   compliance is enforced at the token; do not override here. */
.persona-detail .hero .role {
  color: var(--ink-muted); font-size: var(--t-tiny);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
}
.persona-detail .hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.02; letter-spacing: -0.015em;
  margin: 0;
}
.persona-detail .hero h1 em { font-style: italic; color: var(--accent-soft); }
.persona-detail .hero .stats {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-tiny);
  color: var(--on-surface-dim);
  padding-block: var(--s-2); margin-top: var(--s-2);
  border-block: 1px solid var(--ring);
}
.persona-detail .hero .stats .diff { color: var(--on-surface-muted); }
/* [LAW:single-enforcer] Same brutal-difficulty rule as homepage:
   weight + cream, never wine. Color-only meaning would fail WCAG
   1.4.1; ink + 600 carries the seriousness without leaning on the
   accent token. */
.persona-detail .hero .stats .diff.brutal { color: var(--ink); font-weight: 600; }
/* [LAW:dataflow-not-control-flow] The diff chip is the same shape whether
   it's a <span> (no rubric link) or an <a> (links into /personas/rubric/).
   The link variant suppresses the browser-default underline and carries a
   soft hover affordance. Color rules above still win on specificity, so
   the link picks up moderate/brutal colors unchanged. */
.persona-detail .hero .stats a.diff {
  text-decoration: none;
  border-bottom: 1px dashed var(--hairline);
  border-radius: 2px;
  transition: border-color .15s ease;
}
.persona-detail .hero .stats a.diff:hover,
.persona-detail .hero .stats a.diff:focus-visible {
  border-bottom-color: var(--ink-muted);
}
.persona-detail .hero .lede {
  color: var(--ink-muted); font-size: var(--t-lead); line-height: 1.5;
  margin-block: var(--s-2);
}
.persona-detail .hero .cta { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }

/* ── Body container ──────────────────────────────────────────────── */
/* Body sections are prose-density; narrower wrapper for line-length
   readability. Mirrors the .doc max-width pattern from legal pages. */
.persona-detail .body { max-width: 760px; margin-inline: auto; }

.persona-detail .body section {
  padding-block: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.persona-detail .body section:first-of-type { border-top: 0; }
.persona-detail .body .head { margin-bottom: var(--s-4); }
.persona-detail .body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em;
  margin-top: var(--s-2);
}
.persona-detail .body h2 em { font-style: italic; }
.persona-detail .body p {
  color: var(--on-surface-muted); font-size: var(--t-body); line-height: 1.65;
  margin-bottom: var(--s-3);
}
.persona-detail .body p:last-child { margin-bottom: 0; }
.persona-detail .body strong { color: var(--ink); font-weight: 500; }

/* ── Style-notes definition list ─────────────────────────────────── */
.style-dl {
  display: grid; gap: var(--s-3);
}
.style-dl .row {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s-3); align-items: baseline;
  padding-block: var(--s-2);
  border-top: 1px solid var(--ring);
}
.style-dl .row:first-child { border-top: 0; }
.style-dl dt {
  font-family: var(--font-sans); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: var(--tracking-tag);
  color: var(--ink-muted); font-weight: 600;
}
.style-dl dd {
  color: var(--on-surface); font-size: var(--t-body-small); line-height: 1.6;
  margin: 0;
}

/* ── Voice-teaser slot ──────────────────────────────────────────────
   The slot is currently a placeholder card; ticket
   vibedungeon-personas-j5v.10 will swap the placeholder contents for a
   real <audio controls preload="none"> element pointing at the R2-
   hosted recording. The card shape, padding, and figcaption styling
   carry over unchanged when that happens — the audio element drops
   into where .placeholder-player currently sits. */
.audio-slot {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, var(--surface-top), var(--surface));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.audio-slot .placeholder-player {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--on-surface-muted);
  font-family: var(--font-mono); font-size: var(--t-small);
}
.audio-slot .placeholder-player .play-glyph {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--ink-muted);
  font-size: 0.8rem; line-height: 1;
}
.audio-slot .placeholder-player .label { color: var(--ink); }
.audio-slot .placeholder-player .pending {
  margin-left: auto;
  font-size: var(--t-tiny); color: var(--ink-dim);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
}
.audio-slot figcaption {
  margin-top: var(--s-3);
  color: var(--ink-muted); font-size: var(--t-tiny);
  letter-spacing: 0.02em;
}

/* ── Before-you-begin list ───────────────────────────────────────── */
.before-list {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-3);
}
.before-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  align-items: baseline;
  color: var(--on-surface); font-size: var(--t-body-small); line-height: 1.6;
}
.before-list li::before {
  content: "·";
  color: var(--ink-muted); font-family: var(--font-mono); font-weight: 700;
}

/* ── Next ─────────────────────────────────────────────────────────── */
.next-up {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-3);
}

/* ── Breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .persona-detail .hero {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-block: var(--s-3) var(--s-6);
  }
  .persona-detail .hero .portrait {
    aspect-ratio: 16/10;
    max-width: 560px; margin-inline: auto;
  }
  .style-dl .row { grid-template-columns: 1fr; gap: var(--s-1); }
}
@media (max-width: 560px) {
  .persona-nav .links { gap: var(--s-3); }
  .persona-nav .links .nav-link { display: none; }
}