/* Stanzai dev styles 06/14 — session nav, topnav, cards, prompt box, phase hero, route bar, option cards, mood grid, genre/sound chips — extracted VERBATIM from index.html <style> block lines 2089-2456 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── V147 — COLLAPSIBLE SESSION NAV (Component 2) ──
   Chevron handle visible only inside an active session screen (body.in-session).
   Collapse swaps --tab-h via body.tabbar-collapsed.in-session — every element that
   uses var(--tab-h) for spacing (.screen padding-bottom, .v9-input-area bottom,
   toasts, pickers) reflows automatically. Tab buttons fade out when collapsed.
   Persistence handled in JS go()/back()/switchTab(): in-session is set when on
   s-session, removed otherwise; tabbar-collapsed is removed only on return to home. */
.tabbar{transition:height 0.32s cubic-bezier(0.4,0,0.2,1)}
.screen{transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.34s ease,padding-bottom 0.32s cubic-bezier(0.4,0,0.2,1)}
.v9-input-area{transition:bottom 0.32s cubic-bezier(0.4,0,0.2,1)}
.tab-chev{
  display:none;
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  width:56px;
  height:14px;
  background:transparent;
  border:none;
  border-radius:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:401;
  padding:10px 0;
  margin-top:-10px;
  transition:none;
}
.tab-chev svg{
  width:14px;height:14px;
  stroke:var(--gold);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1),opacity 0.2s ease;
  opacity:0.55;
}
.tab-chev:hover{background:transparent;border-color:transparent}
.tab-chev:hover svg{opacity:0.85}
.tab-chev:active svg{transform:scale(0.9);opacity:0.95}
body.in-session .tab-chev{display:flex}
body.tabbar-collapsed.in-session{--tab-h:22px}
body.tabbar-collapsed.in-session .tab{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease;
}
body.tabbar-collapsed.in-session .tab-chev svg{transform:rotate(180deg)}
body.tabbar-collapsed.in-session .tab-chev:active svg{transform:rotate(180deg) scale(0.92)}
@media (prefers-reduced-motion:reduce){
  .tabbar,.screen,.v9-input-area,.tab-chev svg{transition-duration:0.01ms !important}
}
/* TOPNAV */
.topnav{display:flex;align-items:center;padding:8px 20px 12px;gap:12px;position:sticky;top:0;background:rgba(10,10,9,0.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:100}
/* V178: .backbtn token-ized. Universal back nav button. */
.backbtn{
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--s3);
  border:none;
  color:var(--t2);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.backbtn:hover{background:var(--s4);color:var(--gold)}
.backbtn:active{background:var(--s4);transform:scale(var(--press-scale))}
.backbtn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.navtitle{font-size:16px;font-weight:500;flex:1;color:var(--t1)}
/* SECTION LABEL */
/* CARDS */
.card{background:var(--s2);border:1px solid var(--b1);border-radius:14px;margin-bottom:8px;overflow:hidden;transition:border-color var(--state-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard)}
.card:hover{border-color:var(--b3)}
.card.open{border-color:var(--b3)}
.cardhead:active{background:rgba(255,255,255,0.02)}
.card.open .cardhead{background:rgba(255,255,255,0.018);border-bottom:1px solid var(--b2)}
.cardbody{display:none;padding:0 16px 16px}
.card.open .cardbody{display:block}
.ptag{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.08em;padding:3px 8px;border-radius:8px;border:1px solid;white-space:nowrap;align-self:flex-start;margin-top:2px}
/* PROMPT BOX */
.pbox{background:var(--s1);border:1px solid var(--b2);border-radius:10px;padding:13px 14px 48px;font-family:'DM Mono',monospace;font-size:13px;line-height:1.8;color:#d0ccc2;white-space:pre-wrap;word-break:break-word;position:relative;margin-top:10px}
/* V178: .copybtn token-ized. Floating copy button on lyric cards.
   Default neutral, .done teal terminal. Active state preserves the gold flash. */
.copybtn{
  position:absolute;
  bottom:10px;
  right:10px;
  background:var(--s4);
  border:1px solid var(--b3);
  color:var(--t2);
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  padding:7px 14px;
  border-radius:8px;
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  gap:5px;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.copybtn:hover{background:rgba(var(--gold-rgb), 0.10);border-color:rgba(var(--gold-rgb), 0.30);color:var(--gold)}
.copybtn:active{background:var(--gold);color:#000;border-color:var(--gold);transform:scale(var(--press-scale))}
.copybtn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.copybtn.done{background:var(--teal);color:#000;border-color:var(--teal)}
.pnote b{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.14em;display:block;margin-bottom:3px;color:var(--t3);text-transform:uppercase;font-weight:400}
/* PHASE HERO */
.herotitle em{font-style:italic}
/* PROMPT LIST */
/* ROUTE BAR — redesigned as named phase chips */
.routebar::-webkit-scrollbar{display:none}
.rphase-chip.done{background:rgba(110,158,120,0.08);border-color:rgba(110,158,120,0.25);color:var(--sage)}
.rphase-chip.now{background:rgba(200,160,80,0.1);border-color:rgba(200,160,80,0.35);color:var(--gold)}
.rphase-chip:active{transform:scale(0.96)}
/* NEXT BTN */
/* V212: Editorial gold surface — gradient + inner highlight + ambient glow.
   Replaces the V178 flat-gold treatment. Matches the Nocturne aesthetic: the
   button now reads as a physical gold plate catching light from above, not a
   flat color swatch. */
.nextbtn{
  position:relative;
  width:100%;
  padding:16px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #e4c37d 0%, #c8a050 55%, #b08a3e 100%);
  border:none;
  color:#1a0f00;
  font-family:'Outfit',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:0.01em;
  margin-top:4px;
  -webkit-tap-highlight-color:transparent;
  /* Inner highlight (top edge) + ambient outer glow (under surface). The outer
     shadow is always on at low intensity so the button reads as elevated even
     at rest. Hover intensifies. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.4),
    0 8px 24px -8px rgba(var(--gold-rgb), 0.35);
  transition:
    background-color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard),
    box-shadow var(--state-dur) var(--easing-standard),
    filter var(--state-dur) var(--easing-standard);
  overflow:hidden;
}
/* Subtle noise dither prevents gradient banding on iOS Safari — same pattern
   used on the Nocturne home surface. Sub-pixel variation breaks banding
   without being visible as texture. */
.nextbtn::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:150px 150px;
  border-radius:inherit;
}
.nextbtn:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.4),
    0 12px 32px -8px rgba(var(--gold-rgb), 0.55);
}
.nextbtn:active{
  transform:scale(var(--press-scale));
  filter:brightness(0.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.5),
    0 4px 12px -4px rgba(var(--gold-rgb), 0.25);
}
.nextbtn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.nextbtn:disabled{opacity:0.4;pointer-events:none;filter:saturate(0.7)}
/* Reduced motion — keep static visual, skip transitions */
@media (prefers-reduced-motion: reduce){
  .nextbtn{transition:none}
  .nextbtn:hover{filter:none}
}

/* ════════════════════════════════════════════════════════════════
   V212 — BEGIN BUTTON (editorial CTA)
   Warm dark transparent surface with a thin gold border. Cormorant
   italic accent word + Outfit sans phrase + arrow. Soft ambient gold
   glow. Used for the picker's commit button and anywhere a decision
   wants editorial weight instead of the filled-gold .nextbtn lozenge.
   ════════════════════════════════════════════════════════════════ */
.begin-btn {
  position: relative;
  width: 100%;
  padding: 18px 22px;
  border-radius: 14px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(var(--gold-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(28, 20, 8, 0.85), rgba(18, 13, 6, 0.95));
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400;
  color: var(--t1); letter-spacing: 0.005em;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(var(--gold-rgb), 0.08),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 6px 20px -10px rgba(var(--gold-rgb), 0.22);
  transition:
    background-color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard),
    box-shadow var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard);
  margin-top: 4px;
}
.begin-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 150px 150px;
  border-radius: inherit;
}
.begin-btn .bb-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 20px; color: var(--gold);
  letter-spacing: 0.01em;
}
.begin-btn .bb-phrase {
  color: var(--t1);
  font-weight: 500;
}
.begin-btn .bb-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  color: var(--gold);
  transition: transform var(--state-dur) var(--easing-standard);
}
.begin-btn .bb-arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.begin-btn:hover {
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(var(--gold-rgb), 0.14),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 28px -10px rgba(var(--gold-rgb), 0.38);
}
.begin-btn:hover .bb-arrow { transform: translateX(3px); }
.begin-btn:active {
  transform: scale(var(--press-scale));
  box-shadow:
    inset 0 1px 0 rgba(var(--gold-rgb), 0.05),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 14px -6px rgba(var(--gold-rgb), 0.30);
}
.begin-btn:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo); }
.begin-btn:disabled { opacity: 0.4; pointer-events: none; filter: saturate(0.7); }
@media (prefers-reduced-motion: reduce) {
  .begin-btn { transition: none; }
  .begin-btn:hover { filter: none; }
  .begin-btn:hover .bb-arrow { transform: none; }
}
/* V178: .secbtn token-ized. Secondary full-width neutral button. */
.secbtn{
  width:100%;
  padding:14px;
  border-radius:14px;
  background:var(--s3);
  border:1px solid var(--b3);
  color:var(--t1);
  font-family:'Outfit',sans-serif;
  font-size:14px;
  cursor:pointer;
  margin-top:8px;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.secbtn:hover{background:var(--s4);border-color:rgba(255,255,255,0.16)}
.secbtn:active{transform:scale(var(--press-scale));background:var(--s4)}
.secbtn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
/* OPTION CARDS */
.optcard{padding:14px 16px;border-radius:12px;border:1px solid var(--b2);background:var(--s2);cursor:pointer;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.optcard:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}
.optcard:active{background:var(--s3)}
.optcard.sel{border-color:rgba(var(--gold-rgb),0.45);background:rgba(var(--gold-rgb),0.08);animation:szChipSpring 240ms cubic-bezier(0.34,1.56,0.64,1) both}
.optcard.sel:hover{border-color:rgba(var(--gold-rgb),0.60);background:rgba(var(--gold-rgb),0.12)}
.optcard:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.opticon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;color:rgba(255,255,255,0.5)}
.opticon svg{width:20px;height:20px}
.optcard.sel .opticon{color:var(--gold)}
.opttxt{flex:1}
.opttitle{font-size:15px;font-weight:500;color:var(--t1);margin-bottom:2px}
.optdesc{font-size:13px;color:var(--t2);line-height:1.5}
.optcheck{font-size:15px;color:var(--gold);opacity:0;transition:opacity 0.15s}
.optcard.sel .optcheck{opacity:1}
/* MOOD GRID */
.moodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.moodpill{padding:10px 6px;border-radius:12px;border:1px solid var(--b2);background:var(--s2);cursor:pointer;text-align:center;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);display:flex;flex-direction:column;align-items:center;gap:4px}
.moodpill:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}
.moodpill:active{transform:scale(var(--press-scale))}
.moodpill.sel{border-color:rgba(var(--gold-rgb),0.45);background:rgba(var(--gold-rgb),0.10);animation:szChipSpring 240ms cubic-bezier(0.34,1.56,0.64,1) both}
.moodpill.sel:hover{border-color:rgba(var(--gold-rgb),0.60);background:rgba(var(--gold-rgb),0.14)}
.moodpill.sel .moodemoji{color:var(--gold)}
.moodpill.sel .moodlabel{color:var(--gold)}
.moodpill:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.moodemoji{width:22px;height:22px;color:rgba(255,255,255,0.45)}
.moodemoji svg{width:100%;height:100%;display:block}
.moodlabel{font-size:13px;color:var(--t2)}
/* GENRE CHIPS */
.genrerow{display:flex;flex-wrap:wrap;gap:8px}
.gchip{padding:8px 14px;border-radius:20px;border:1px solid var(--b2);background:var(--s2);font-size:15px;color:var(--t2);cursor:pointer;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard)}
.gchip:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.gchip:active{transform:scale(var(--press-scale))}
/* V169 — Genre chips use TEAL selection (semantic: genre is utility/categorical, not creative emotion which is reserved for gold) */
.gchip.sel{border-color:rgba(var(--teal-rgb),0.45);background:rgba(var(--teal-rgb),0.10);color:var(--teal)}
.gchip.sel:hover{border-color:rgba(var(--teal-rgb),0.60);background:rgba(var(--teal-rgb),0.14)}
/* V169 — Exclude state softened: outlined rose, no fill, no strikethrough weight */
.gchip.exclude{border-color:rgba(var(--rose-rgb),0.35);background:transparent;color:rgba(var(--rose-rgb),0.85);text-decoration:line-through;text-decoration-color:rgba(var(--rose-rgb),0.35);text-decoration-thickness:1px}
.gchip.exclude:hover{border-color:rgba(var(--rose-rgb),0.50);color:var(--rose)}
.gchip:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
/* SOUND CHIPS */
.soundchip{padding:10px 6px;border-radius:var(--radius-md);border:1px solid var(--b2);background:var(--s2);cursor:pointer;text-align:center;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);display:flex;flex-direction:column;align-items:center;color:rgba(255,255,255,0.45)}
.soundchip:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t2)}
.soundchip:active{transform:scale(var(--press-scale))}
.soundchip svg{width:20px;height:20px}
/* V169: Selection plays a one-time spring overshoot animation, then settles to scale(1).
   Earlier static transform:scale(1.03) was permanent state — caused jarring 6% jump
   when a selected chip was pressed (sel:1.03 → active:0.97 → sel:1.03).
   Animation-based feedback gives the spring gesture without breaking :active. */
.soundchip.sel{border-color:rgba(var(--gold-rgb),0.50);background:rgba(var(--gold-rgb),0.10);color:var(--gold);animation:szChipSpring 240ms cubic-bezier(0.34,1.56,0.64,1) both}
.soundchip.sel:hover{border-color:rgba(var(--gold-rgb),0.65);background:rgba(var(--gold-rgb),0.14)}
.soundchip-lbl{font-size:13px;color:var(--t2);font-weight:400}
.soundchip.sel .soundchip-lbl{color:var(--gold);font-weight:500}
.soundchip:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
@keyframes szChipSpring{0%{transform:scale(1)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.moodpill.sel,.soundchip.sel,.optcard.sel,.vrange-chip.sel{animation:none}}
.vrange-chip{padding:6px 13px;border-radius:18px;border:1px solid var(--b2);background:var(--s2);font-size:13px;color:var(--t2);cursor:pointer;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard)}
.vrange-chip:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.vrange-chip:active{transform:scale(var(--press-scale))}
.vrange-chip.sel{border-color:rgba(var(--gold-rgb),0.50);background:rgba(var(--gold-rgb),0.10);color:var(--gold);animation:szChipSpring 240ms cubic-bezier(0.34,1.56,0.64,1) both}
.vrange-chip.sel:hover{border-color:rgba(var(--gold-rgb),0.65);background:rgba(var(--gold-rgb),0.14)}
.vrange-chip:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}