/* ============================================================================
   Avatar Lab — daylight repaint + one-path-at-a-time layout
   ----------------------------------------------------------------------------
   The Lab was the last dark-only room in a site that had already moved to the
   daylight band, and it showed both Scholars and the custom-face builder stacked
   on one page, which made the (lower-quality) builder read as a second-class
   afterthought under the Scholar art.

   This file does three things:
     1. Repaints the roster/dossier/bond UI for the light band. Those components
        set hard-coded dark literals in JS (#141a33, #0d1126, bronze #C6A88A), so
        they cannot self-heal from the scoped token re-declarations the way
        token-driven markup does — §19 of studio-tokens says as much. Everything
        below is scoped under .light-band so the dark arcade rooms are untouched.
     2. Adds the path chooser: pick a Scholar OR design a face, never both at once.
     3. Lifts the custom builder's presentation to sit next to Scholar-quality art
        instead of under it — real depth, a plinth, and a violet CTA.

   Palette comes from the band's own tokens (--accent #4F49D0 etc.), so this stays
   consistent with the rest of the site rather than inventing a third look. Gold is
   kept ONLY as a thin ring around the medallion art, because that art is navy and
   gold — a violet ring would fight it.
   ============================================================================ */

/* ── 1. PATH CHOOSER ──────────────────────────────────────────────────────── */

.al-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.1rem;
  max-width: 900px;
  margin: 2rem auto 0;
}
.al-path {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line, rgba(20, 27, 54, .1));
  background: var(--surface, #fff);
  border-radius: 1.25rem;
  padding: 1.5rem 1.4rem 1.35rem;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: var(--ink, #141B36);
  box-shadow: var(--arch-shadow-sm, 0 4px 14px rgba(20, 27, 54, .06));
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, border-color .22s ease;
}
.al-path::before {          /* a violet wash that grows on hover, not a flat fill */
  content: '';
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 150%;
  background: radial-gradient(ellipse at 50% 100%, var(--accent-tint, rgba(79, 73, 208, .1)), transparent 68%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.al-path:hover, .al-path:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent, #4F49D0);
  box-shadow: var(--arch-shadow-lg, 0 18px 48px rgba(20, 27, 54, .13));
  outline: none;
}
.al-path:hover::before, .al-path:focus-visible::before { opacity: 1; }
.al-path-eyebrow {
  font-family: Orbitron, Outfit, sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent, #4F49D0);
}
.al-path-h {
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.2;
  margin: .35rem 0 .4rem;
  color: var(--ink, #141B36);
}
.al-path-p {
  font-size: .87rem;
  line-height: 1.55;
  color: var(--ink-2, #3A4463);
  margin: 0;
}
.al-path-meta {
  margin-top: .9rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #5A6584);
}
/* Stacked portrait strip that previews what the path contains. */
.al-path-strip { display: flex; gap: .3rem; margin-top: 1rem; }
.al-path-strip span {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(122, 90, 15, .45);
  background-size: cover; background-position: center top;
  box-shadow: 0 3px 10px rgba(20, 27, 54, .14);
}
.al-path-strip span:nth-child(n+2) { margin-left: -14px; }

/* Segmented switcher, shown once a path is chosen. */
.al-switch {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: 999px;
  background: var(--recessed, #E9ECF6);
  border: 1px solid var(--line, rgba(20, 27, 54, .1));
  margin: 0 auto 1.6rem;
}
.al-switch button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink-2, #3A4463);
  padding: .5rem 1.05rem; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.al-switch button[aria-selected="true"] {
  background: var(--accent, #4F49D0); color: #fff;
  box-shadow: 0 2px 8px rgba(79, 73, 208, .35);
}
.al-switch button:focus-visible { outline: 2px solid var(--accent, #4F49D0); outline-offset: 2px; }

.al-branch[hidden] { display: none !important; }

/* ── 2. ROSTER + DOSSIER, REPAINTED FOR DAYLIGHT ──────────────────────────── */

.light-band #scholar-roster-mount { color: var(--ink, #141B36); }
.light-band .dj-ros-kicker { color: var(--accent, #4F49D0); }
.light-band .dj-ros-title  { color: var(--ink, #141B36); }
.light-band .dj-ros-sub    { color: var(--ink-2, #3A4463); }

.light-band .dj-ros-card {
  background: var(--surface, #fff);
  border-color: var(--line, rgba(20, 27, 54, .1));
  box-shadow: var(--arch-shadow-sm, 0 4px 14px rgba(20, 27, 54, .06));
}
.light-band .dj-ros-card:hover {
  border-color: var(--accent, #4F49D0);
  box-shadow: var(--arch-shadow-lg, 0 18px 48px rgba(20, 27, 54, .13));
}
.light-band .dj-ros-card.eq {
  border-color: var(--accent, #4F49D0);
  box-shadow: 0 0 0 2px var(--accent-tint, rgba(79, 73, 208, .1)), var(--arch-shadow-md, 0 6px 20px rgba(20, 27, 54, .09));
}
/* The medallion art is navy + gold, so keep a warm ring and a soft light well
   behind it — a violet ring would clash with the artwork itself. */
.light-band .dj-ros-medal {
  background: radial-gradient(circle at 34% 28%, #fff, #E9ECF6 76%);
  border-color: rgba(122, 90, 15, .5);
}
.light-band .dj-ros-name { color: var(--ink, #141B36); }
.light-band .dj-ros-role { color: var(--accent, #4F49D0); }
.light-band .dj-ros-lock { color: var(--muted, #5A6584); }
.light-band .dj-ros-prog { background: var(--recessed, #E9ECF6); }
.light-band .dj-ros-prog i { background: linear-gradient(90deg, var(--accent, #4F49D0), #7A5A0F); }
.light-band .dj-ros-badge.eq {
  background: var(--accent-tint, rgba(79, 73, 208, .1));
  color: var(--accent, #4F49D0);
  border-color: rgba(79, 73, 208, .45);
}
.light-band .dj-ros-badge.leg {
  background: rgba(122, 90, 15, .12);
  color: #7A5A0F;
  border-color: rgba(122, 90, 15, .45);
}
.light-band .dj-ros-medal .tease {
  color: rgba(20, 27, 54, .35);
  background: repeating-conic-gradient(rgba(79, 73, 208, .07) 0 15deg, transparent 15deg 30deg);
}

.light-band .dj-pet-chip {
  background: var(--surface, #fff);
  border-color: var(--line, rgba(20, 27, 54, .1));
  box-shadow: var(--arch-shadow-sm, 0 2px 8px rgba(20, 27, 54, .05));
}
.light-band .dj-pet-chip:hover { border-color: var(--accent, #4F49D0); }
.light-band .dj-pet-chip.eq {
  border-color: var(--accent, #4F49D0);
  box-shadow: 0 0 0 1px var(--accent-tint, rgba(79, 73, 208, .1));
}
.light-band .dj-pet-disc {
  background: radial-gradient(circle at 34% 28%, #fff, #E9ECF6 76%);
  border-color: rgba(122, 90, 15, .45);
}
.light-band .dj-pet-name { color: var(--ink, #141B36); }
.light-band .dj-pet-req  { color: var(--muted, #5A6584); }

/* ---------------------------------------------------------------------------
   CONTRAST FIX (2026-07-26). The dossier overlay is appended to <body>, which is
   OUTSIDE #avatar-lab.light-band — so every var(--ink) / var(--accent) below was
   resolving to the site's DARK-theme value from :root, not the daylight one. The
   fallbacks never fired because the variables ARE defined, just light-on-dark.
   Result: near-white text on a white card, exactly as reported.

   Re-declaring the daylight palette on the overlay hook makes every var() in this
   section resolve correctly, in one place, instead of hard-coding literals into
   thirty rules.
   --------------------------------------------------------------------------- */
.al-daylight-doss #dj-doss-overlay {
  --paper:     #F5F6FB;
  --surface:   #FFFFFF;
  --surface-2: #F0F2FA;
  --recessed:  #E9ECF6;
  --ink:       #141B36;   /* 16.9:1 on white */
  --ink-2:     #3A4463;   /* 9.6:1  */
  --muted:     #5A6584;   /* 5.8:1  */
  --line:        rgba(20,27,54,.10);
  --line-strong: rgba(20,27,54,.22);
  --accent:      #4F49D0; /* 6.6:1 as text */
  --gold:        #7A5A0F; /* 5.6:1 */
}

/* Selectors the first pass missed entirely — these kept their dark-theme cream and
   were invisible on the white card. */
.al-daylight-doss .dj-stat-row { color: var(--ink-2); }
.al-daylight-doss .dj-stat-row b { color: var(--ink); }
.al-daylight-doss .dj-doss-full,
.al-daylight-doss .dj-doss-sec { color: var(--ink-2); }
.al-daylight-doss .dj-bond-chip { color: #6B4E0C; background: rgba(122,90,15,.12); border-color: rgba(122,90,15,.5); }

/* The dossier overlay stays a focused reading surface: white card, dim scrim. */
.light-band #dj-doss-overlay, .al-daylight-doss #dj-doss-overlay {
  background: rgba(20, 27, 54, .5);
}
.al-daylight-doss .dj-doss {
  background: linear-gradient(180deg, #fff, #F5F6FB);
  border-color: var(--line-strong, rgba(20, 27, 54, .22));
  color: var(--ink, #141B36);
  box-shadow: 0 30px 80px rgba(20, 27, 54, .28);
}
.al-daylight-doss .dj-doss-close { color: var(--ink-2, #3A4463); }
.al-daylight-doss .dj-doss-kicker { color: var(--accent, #4F49D0); }
.al-daylight-doss .dj-doss-name { color: var(--ink, #141B36); }
.al-daylight-doss .dj-doss-motto { color: var(--ink-2, #3A4463); }
.al-daylight-doss .dj-doss-media {
  background: radial-gradient(circle at 34% 28%, #fff, #E9ECF6 76%);
  border-color: rgba(122, 90, 15, .55);
}
.al-daylight-doss .dj-doss-sec h4 {
  color: var(--accent, #4F49D0);
  border-bottom-color: var(--line, rgba(20, 27, 54, .1));
}
.al-daylight-doss .dj-doss-lore,
.al-daylight-doss .dj-doss-list li,
.al-daylight-doss .dj-ch-goal { color: var(--ink-2, #3A4463); }
.al-daylight-doss .dj-stat-bar { background: var(--recessed, #E9ECF6); }
.al-daylight-doss .dj-stat-bar i { background: linear-gradient(90deg, var(--accent, #4F49D0), #7A5A0F); }
.al-daylight-doss .dj-power,
.al-daylight-doss .dj-ch,
.al-daylight-doss .dj-locked-note {
  background: var(--surface-2, #F0F2FA);
  border-color: var(--line, rgba(20, 27, 54, .1));
  color: var(--ink-2, #3A4463);
}
.al-daylight-doss .dj-ch-t { color: var(--ink, #141B36); }
.al-daylight-doss .dj-ch-reveal { color: var(--accent, #4F49D0); }
.al-daylight-doss .dj-ch-prog { background: var(--recessed, #E9ECF6); }
.al-daylight-doss .dj-ch-prog i { background: var(--accent, #4F49D0); }
.al-daylight-doss .dj-doss-equip {
  background: var(--accent, #4F49D0);
  border-color: var(--accent, #4F49D0);
  color: #fff;
}
.al-daylight-doss .dj-doss-equip:disabled {
  background: var(--recessed, #E9ECF6);
  border-color: var(--line, rgba(20, 27, 54, .1));
  color: var(--muted, #5A6584);
}
.al-daylight-doss .dj-doss-nav {
  background: rgba(255, 255, 255, .94);
  border-color: var(--line-strong, rgba(20, 27, 54, .22));
  color: var(--ink, #141B36);
}
.al-daylight-doss .dj-doss-nav:hover,
.al-daylight-doss .dj-doss-nav:focus-visible {
  border-color: var(--accent, #4F49D0);
  background: #fff;
}
.al-daylight-doss .dj-doss-full img,
.al-daylight-doss .dj-doss-full video {
  border-color: rgba(122, 90, 15, .35);
  box-shadow: 0 16px 44px rgba(20, 27, 54, .18);
}

/* ── 3. THE LAB SHELL + CUSTOM BUILDER, LIFTED ────────────────────────────── */

.light-band .al-back-link { color: var(--accent, #4F49D0); }
.light-band .al-mega-badge {
  background: var(--accent-tint, rgba(79, 73, 208, .1));
  border: 1px solid rgba(79, 73, 208, .35);
  color: var(--accent, #4F49D0);
}
.light-band .al-title { color: var(--ink, #141B36); }
.light-band .al-subtitle { color: var(--ink-2, #3A4463); }
.light-band .al-glow-bar {
  background: linear-gradient(90deg, transparent, var(--accent, #4F49D0), transparent);
  box-shadow: none;
}

.light-band .al-gate,
.light-band .al-builder,
.light-band .al-preview-panel,
.light-band .al-options-panel {
  background: var(--surface, #fff);
  border-color: var(--line, rgba(20, 27, 54, .1));
  color: var(--ink, #141B36);
  box-shadow: var(--arch-shadow-md, 0 6px 20px rgba(20, 27, 54, .09));
}
.light-band .al-gate-title, .light-band .al-group-title { color: var(--ink, #141B36); }
.light-band .al-gate-desc, .light-band .al-cost-note, .light-band .al-save-state { color: var(--ink-2, #3A4463); }

/* Give the custom face the same staged presentation the Scholars get: a real
   plinth, perspective and a light well, so it stops looking like a flat canvas
   sitting in a box. */
.light-band .al-preview-frame {
  position: relative;
  perspective: 900px;
  background: radial-gradient(ellipse at 50% 18%, #fff, #E9ECF6 72%);
  border: 1px solid var(--line, rgba(20, 27, 54, .1));
  border-radius: 1.15rem;
  padding: 1.4rem 1.4rem 2.2rem;
}
.light-band .al-preview-frame::after {   /* the plinth */
  content: '';
  position: absolute;
  left: 50%; bottom: .85rem;
  width: 62%; height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79, 73, 208, .22), transparent 70%);
}
.light-band .al-canvas-wrap {
  transform: rotateX(2deg);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.light-band .al-canvas-wrap:hover { transform: rotateX(0deg) scale(1.02); }
.light-band #al-avatar-canvas {
  border-radius: 50%;
  border: 3px solid rgba(122, 90, 15, .5);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 27, 54, .06), 0 20px 42px rgba(20, 27, 54, .2);
}
.light-band .al-mini-btn {
  background: var(--surface-2, #F0F2FA);
  border: 1px solid var(--line, rgba(20, 27, 54, .1));
  color: var(--ink-2, #3A4463);
}
.light-band .al-mini-btn:hover:not(:disabled) { border-color: var(--accent, #4F49D0); color: var(--accent, #4F49D0); }
.light-band .al-save-btn, .light-band .al-enter-btn:not(.al-btn-locked) {
  background: var(--accent, #4F49D0);
  border: 1px solid var(--accent, #4F49D0);
  color: #fff;
  box-shadow: 0 6px 18px rgba(79, 73, 208, .3);
}
.light-band .al-save-btn:hover, .light-band .al-enter-btn:not(.al-btn-locked):hover { background: #4A44C9; }
.light-band .al-enter-btn.al-btn-locked {
  background: var(--recessed, #E9ECF6);
  border: 1px solid var(--line, rgba(20, 27, 54, .1));
  color: var(--muted, #5A6584);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .al-path, .al-path::before, .light-band .al-canvas-wrap { transition: none; }
  .al-path:hover, .al-path:focus-visible { transform: none; }
  .light-band .al-canvas-wrap:hover { transform: rotateX(2deg); }
}