/* ==========================================================================
 * Joy — page-local styles.
 *
 * Everything structural (nav, hero, eyebrows, section heads, persona card,
 * rail, buttons, footer, reveal motion) comes from the vendored
 * zimac-landing.css, scoped under `.agent-landing` and themed by
 * `data-agent="joy"`. This sheet holds ONLY Joy's bespoke figures:
 *   - the human-forum emblem (Joy's public mark)
 *   - the relationship-context cards (profile + 1:1 prep)
 *   - the voice-aware draft window
 *   - the talent evidence matrix
 *   - the forum-mark artwork
 * Colors read from the shared theme tokens (--l-*); rose is Joy's one
 * bespoke flavor color.
 * ==========================================================================*/

* { box-sizing: border-box; }
body { margin: 0; background: #0b0710; }

/* Keep the human forum legible while preserving the dark copy field. The
   shared negative layers remain explicit here so future local overrides cannot
   place either artwork layer above the hero content. */
.ln-hero-art { z-index: -3; object-position: 58% center; }
.ln-hero-shade { z-index: -2; }

/* ---------- the public mark: three people around an open table ---------- */

.forum-mark { display: block; flex: 0 0 auto; overflow: visible; color: var(--l-accent-2); }
.forum-mark-sm { width: 34px; height: 34px; }
.forum-mark-lg { width: 88px; height: 88px; }
.forum-mark-xl { width: 74px; height: 74px; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--l-accent) 42%, transparent)); }
.ln-persona-mark .forum-mark { width: 28px; height: 28px; }

/* ---------- relationship context: profile + 1:1 prep cards -------------- */

.context-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: var(--l-grid-gap); }

.profile-card, .prep-card, .draft-window, .matrix {
  margin: 0;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.026), transparent 54%), var(--l-surface);
  box-shadow: 0 28px 80px -52px rgba(0, 0, 0, 0.96);
}

.profile-card, .prep-card { padding: 27px; }

.profile-top { display: grid; grid-template-columns: 54px 1fr auto; gap: 13px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--l-border-soft); }
.avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: var(--l-ink); background: linear-gradient(145deg, var(--l-accent-2), #fb7185); font-weight: 800; }
.profile-top > div:nth-child(2) { display: grid; line-height: 1.3; }
.profile-top b { font-size: 15px; }
.profile-top span { color: var(--l-muted); font-size: 12px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--l-ok); box-shadow: 0 0 10px var(--l-ok); }

.profile-note { margin-top: 18px; padding: 17px; border: 1px solid color-mix(in srgb, var(--l-ok) 17%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--l-ok) 5%, transparent); }
.profile-note > span { color: var(--l-ok); font: 800 10px/1.6 var(--l-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.profile-note p { margin-top: 6px; font-size: 14px; line-height: 1.5; }
.profile-note small { display: block; margin-top: 9px; color: var(--l-faint); font-size: 11px; }
.profile-note.is-inferred { border-color: color-mix(in srgb, var(--l-accent) 22%, transparent); background: color-mix(in srgb, var(--l-accent) 6%, transparent); }
.profile-note.is-inferred > span { color: var(--l-accent-2); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chips span { padding: 7px 10px; border: 1px solid var(--l-border); border-radius: 999px; color: var(--l-muted); background: rgba(255, 255, 255, 0.02); font-size: 11px; }

.mini-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--l-border-soft); }
.mini-head span { color: var(--l-accent); font: 800 10px/1.6 var(--l-mono); letter-spacing: 0.14em; }
.mini-head b { font-size: 18px; }

.prep-block { padding: 18px 0; border-bottom: 1px solid var(--l-border-soft); }
.prep-block small { color: var(--l-faint); font: 700 10px/1.6 var(--l-mono); letter-spacing: 0.1em; }
.prep-block p { margin-top: 6px; color: var(--l-muted-bright); font-size: 14px; line-height: 1.55; }
.prep-block i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 10px rgba(251, 113, 133, 0.7); }

.source-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 18px; }
.source-line span { color: var(--l-faint); font-size: 10px; }
.source-line span + span::before { content: "/"; margin-right: 9px; color: var(--l-border2); }
.source-line b { margin-left: auto; color: var(--l-ok); font: 700 10px/1.6 var(--l-mono); text-transform: uppercase; }

/* ---------- the voice-aware draft window -------------------------------- */

.draft-window { padding: 22px; transform: rotate(1.25deg); }
.window-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--l-border-soft); }
.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--l-border2); }
.window-bar i:first-child { background: #fb7185; }
.window-bar i:nth-child(2) { background: #fbbf24; }
.window-bar i:nth-child(3) { background: var(--l-ok); }
.window-bar span { margin-left: auto; color: var(--l-faint); font-size: 11px; }
.draft-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.draft-meta span { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--l-accent) 24%, transparent); border-radius: 7px; color: var(--l-accent-2); background: color-mix(in srgb, var(--l-accent) 6%, transparent); font-size: 10px; }
.draft-window > p { margin-top: 14px; color: var(--l-muted-bright); font-size: 15px; line-height: 1.65; }
.voice-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 25px; }
.voice-meter span { color: var(--l-faint); font-size: 10px; }
.voice-meter i { height: 4px; border-radius: 99px; background: var(--l-border); overflow: hidden; }
.voice-meter b { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--l-accent-deep), var(--l-accent-2)); }
.draft-window > small { display: block; margin-top: 17px; color: var(--l-faint); font-size: 10px; }

/* ---------- talent: the evidence matrix --------------------------------- */

.talent-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 44px); align-items: center; }
.matrix { padding: 26px; }
.matrix-row { display: grid; grid-template-columns: 1.4fr 0.75fr 0.8fr; gap: 14px; align-items: center; min-height: 58px; padding: 0 5px; border-bottom: 1px solid var(--l-border-soft); font-size: 12px; }
.matrix-row.head { min-height: 46px; color: var(--l-faint); font: 800 9px/1.6 var(--l-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.matrix-row b { width: max-content; padding: 5px 8px; border-radius: 6px; font-size: 10px; }
.matrix-row .found { color: var(--l-ok); background: color-mix(in srgb, var(--l-ok) 8%, transparent); }
.matrix-row .unclear { color: var(--l-alert); background: color-mix(in srgb, var(--l-alert) 8%, transparent); }
.matrix-row .absent { color: #fda4af; background: rgba(251, 113, 133, 0.08); }
.matrix-row small { color: var(--l-muted); }
.matrix-foot { padding-top: 17px; color: var(--l-faint); font-size: 10px; }

/* ---------- the forum mark ---------------------------------------------- */

.marks-art { min-height: 340px; display: flex; align-items: center; justify-content: center; }
.mark-card { position: relative; width: 170px; height: 190px; display: grid; place-items: center; align-content: center; gap: 25px; border: 1px solid var(--l-border); border-radius: 22px; background: linear-gradient(145deg, var(--l-surface2), var(--l-bg2)); box-shadow: 0 26px 60px -42px color-mix(in srgb, var(--l-accent) 90%, transparent); }
.mark-card > .forum-mark { color: var(--l-accent-2); }
.mark-card small { color: var(--l-faint); font: 800 8px/1.6 var(--l-mono); letter-spacing: 0.13em; }
.forum-card { width: 210px; transform: rotate(2deg); }

/* ---------- closing glue -------------------------------------------------- */

.joy-finale-mark { margin-bottom: 24px; }
.joy-finale-eyebrow { margin-bottom: 16px; }
.joy-finale-note { margin: 14px auto 0; color: var(--l-faint); font-size: 12px; }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 900px) {
  .ln-hero-art { object-position: 70% center; }
  .context-grid, .talent-grid { grid-template-columns: 1fr; }
  .draft-window { transform: none; }
  .marks-art { min-height: 300px; }
}

@media (max-width: 640px) {
  .ln-hero {
    background:
      linear-gradient(180deg, rgba(5, 3, 8, 0.5), rgba(5, 3, 8, 0.66) 62%, rgba(5, 3, 8, 0.96) 100%),
      url("./joy-human-forum-hero-v5.webp") 82% center / auto 100% no-repeat;
  }
  .ln-hero-art, .ln-hero-shade { display: none; }
  .profile-card, .prep-card, .draft-window, .matrix { padding: 20px; border-radius: 16px; }
  .profile-top { grid-template-columns: 48px 1fr; }
  .profile-top .status-dot { grid-column: 2; }
  .source-line b { width: 100%; margin: 6px 0 0; }
  .matrix { overflow-x: auto; }
  .matrix-row { min-width: 510px; }
  .marks-art { min-height: 260px; }
  .mark-card { width: 128px; height: 158px; }
  .forum-card { width: 168px; }
  .forum-mark-lg { width: 68px; height: 68px; }
}