/* Stanzai dev styles 15 — lyrics-ingest capture card: "The Manuscript" (Direction B, FULL mode — approved mockup, Session 2 of the lyrics-ingest lane). Visuals only: the card's logic (verbatim wall, commit path, fix-labels loop) lives in index.html + the lyrics-ingest client module and is untouched. New numbered file appended after 14 per styles/README.md so existing cascade positions never shift. Every color is an existing token; gold appears ONLY in the eyebrow tick, the section-tag stubs, and the primary button (5% rule). No transition:all. No drop shadows — elevation via surface tiers + the inset hairline. */

@keyframes v9IngLandIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes v9IngTickSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The card fades in as ONE fully-formed unit (founder round 2, 2026-06-11:
   no empty-box frame, no per-section pop-in — calm, already written). */
.v9-ing-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:inset 0 1px 0 var(--edge-highlight-weak);
  margin:8px 0;
  scroll-margin-top:72px;
  opacity:0;
  transform:translateY(10px);
  animation:v9IngLandIn 560ms cubic-bezier(0.22,1,0.36,1) 80ms forwards;
}
.v9-ing-head{padding:20px 22px 0}
.v9-ing-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
}
.v9-ing-tick{
  width:14px;height:1px;background:var(--gold);flex-shrink:0;
  transform-origin:left;
  animation:v9IngTickSweep 600ms cubic-bezier(0.22,1,0.36,1) 300ms backwards;
}
.v9-ing-title{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;
  line-height:1.2;color:var(--t1);margin-top:10px;
}
.v9-ing-sub{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:14px;
  line-height:1.6;color:var(--t2);margin-top:6px;
}

/* The page — inset reading surface, one elevation tier above the card body.
   DESKTOP: runs the full length of the lyrics inline. MOBILE: capped at
   roughly a phone screen of lyrics with inner scroll + bottom fade and a
   Show all / Show less toggle (founder round 2 — a wall of text snapping in
   full-length felt chaotic on glass). */
.v9-ing-page{
  margin:18px 16px 0;background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--radius-md);padding:22px 20px 18px;
}
@media (max-width:1023px){
  .v9-ing-page{
    max-height:56vh;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transition:max-height 480ms cubic-bezier(0.22,1,0.36,1);
  }
  .v9-ing-page::after{
    content:'';position:sticky;display:block;bottom:-18px;left:0;right:0;height:34px;
    background:linear-gradient(to bottom,rgba(24,24,22,0),var(--s2));
    margin-top:-34px;pointer-events:none;
  }
  .v9-ing-card.v9-ing-expanded .v9-ing-page{max-height:none}
  .v9-ing-card.v9-ing-expanded .v9-ing-page::after{display:none}
}
/* Show all / Show less — only revealed (by JS) when the page actually
   overflows its mobile cap; never present on desktop. */
.v9-ing-expand{
  display:none;margin:0 16px;padding:12px 0 2px;text-align:center;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--t3);cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--state-dur) var(--easing-standard);
}
.v9-ing-expand:active{color:var(--t1)}
@media (max-width:1023px){
  .v9-ing-expand.on{display:block}
}

.v9-ing-sec + .v9-ing-sec{margin-top:20px}
.v9-ing-sec-tag{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--t3);
}
.v9-ing-stub{width:10px;height:1px;background:var(--gold);opacity:0.7;flex-shrink:0}
/* The lyrics are the only Fraunces on the card */
.v9-ing-lyr{font-family:'Fraunces',serif;font-weight:400;font-size:15px;line-height:1.75;color:var(--t1)}

.v9-ing-actions{display:flex;gap:10px;padding:20px 22px 22px}
.v9-ing-btn{
  flex:1;min-height:48px;border-radius:999px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:
    transform 120ms var(--ease-default),
    opacity 120ms var(--ease-default),
    background-color var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard);
}
.v9-ing-btn:active{transform:scale(0.98)}
.v9-ing-btn:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.v9-ing-btn-ghost{background:none;border:1px solid var(--b2);color:var(--t2)}
.v9-ing-btn-ghost:active{color:var(--t1);border-color:var(--b3)}
.v9-ing-btn-gold{background:var(--gold);border:none;color:#000;font-weight:500}
.v9-ing-btn-gold:active{opacity:0.85}

/* Decided — both buttons dim and stop accepting taps (the chosen one stays
   slightly more present, matching existing decision-card behavior). The page
   content never dims. */
.v9-ing-card.decided .v9-ing-btn{opacity:0.35;pointer-events:none;cursor:default}
.v9-ing-card.decided .v9-ing-btn.chosen{opacity:0.55}

/* Packing the paste — once the card is set up, the songwriter's pasted-lyrics
   bubble folds down to a one-line preview (display-only: the chat history the
   model reads keeps the full paste). JS fixes the height, crossfades the
   contents, then releases the height. */
.v9-user.v9-ing-packing{
  overflow:hidden;
  transition:height 420ms cubic-bezier(0.22,1,0.36,1);
}
.v9-ing-pack-old{transition:opacity 200ms cubic-bezier(0.22,1,0.36,1)}
.v9-ing-packing .v9-ing-pack-old{opacity:0}
.v9-ing-pack-new{opacity:0;transition:opacity 260ms cubic-bezier(0.22,1,0.36,1)}
.v9-ing-pack-new.in{opacity:1}
.v9-ing-paste-line{
  display:block;margin-top:6px;
  font-family:'Fraunces',serif;font-size:13px;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v9-ing-pack-new:first-child .v9-ing-paste-line{margin-top:0}

@media (prefers-reduced-motion: reduce){
  .v9-ing-card{animation:none;opacity:1;transform:none}
  .v9-ing-tick{animation:none}
  .v9-ing-btn:active{transform:none}
  .v9-ing-page{transition:none}
  .v9-user.v9-ing-packing{transition:none}
  .v9-ing-pack-old,.v9-ing-pack-new{transition:none}
}