/* Stanzai dev styles 08/14 — workshop, recommended card, artwork, composition strip, chapter header, generated style-prompt screen — extracted VERBATIM from index.html <style> block lines 3071-3543 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* WORKSHOP */
.ws-action-btn:active{opacity:0.8}
.ws-path-btn:active{opacity:0.85}

/* RECOMMENDED CARD */
.card.sf-recommended{border-color:rgba(200,160,80,0.18)}
.sf-rec-label .sf-brand-mark{width:10px;height:10px;opacity:0.6}
.sf-rec-card{padding:12px 16px;border-radius:var(--radius-md);background:rgba(200,160,80,0.04);border:1px solid rgba(200,160,80,0.12);margin:0 0 12px}
.sf-rec-kicker{font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:0.08em;margin-bottom:8px;opacity:0.8}
.sf-rec-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:500;color:var(--t1);line-height:1.5;margin-bottom:6px}
.sf-rec-why{font-family:'Outfit',sans-serif;font-size:13px;color:var(--t2);line-height:1.65}
.sf-rec-enter{animation:sfRecIn 220ms cubic-bezier(0.34,1.25,0.64,1) both}
@keyframes sfRecIn{from{opacity:0;transform:translateY(6px) scale(0.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ARTWORK */
.arttoggle.on{background:rgba(196,104,120,0.1);border-color:rgba(196,104,120,0.35);color:var(--rose)}
.artmode{flex:1;padding:9px;border-radius:var(--radius-sm);font-size:15px;color:var(--t3);cursor:pointer;text-align:center;transition:all 0.15s}
.artmode.on{background:var(--s4);color:var(--t1)}
.artpills{display:flex;flex-wrap:wrap;gap:7px}
.artpill{padding:8px 13px;border-radius:20px;border:1px solid var(--b2);background:var(--s2);font-size:13px;color:var(--t2);cursor:pointer;transition:all 0.15s}
.artpill.on{border-color:rgba(196,104,120,0.4);background:rgba(196,104,120,0.08);color:var(--rose)}
.arttextarea::placeholder{color:var(--t4)}
.arttextarea:focus{border-color:rgba(196,104,120,0.35)}
.arttextinput::placeholder{color:var(--t4)}
.arttextinput:focus{border-color:rgba(196,104,120,0.35)}
.platpill.on{border-color:rgba(196,104,120,0.4);background:rgba(196,104,120,0.1);color:var(--rose)}
.aidecide-row{display:flex;justify-content:flex-end}
.aidecide{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:1px dashed var(--b3);background:transparent;color:var(--t3);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.1em;cursor:pointer;transition:all 0.15s}
.aidecide:active{transform:scale(0.97)}
.aidecide.on{border-color:rgba(200,160,80,0.5);background:rgba(200,160,80,0.08);color:var(--gold)}
.aidecide-icon{font-size:13px}
.flowlabel{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.2em;text-transform:uppercase;color:var(--t3);margin-bottom:12px;padding:0 4px}
.flowlabel-hint{font-family:'Outfit',sans-serif;font-size:12px;font-weight:300;text-transform:none;letter-spacing:0;color:var(--t4);margin-left:4px}
.flowstep{margin-bottom:28px}

/* ════════════════════════════════════════════════════════════════
   V210 — DNA PICKER REVAMP (Phase 1 + 2)
   Composition strip: five-tile dimension row at top of picker.
   Chapter headers: Roman numeral + DM Mono label + Cormorant italic question.
   Spec: stanzai-dna-picker-revamp.md · Companion mockup: stanzai-dna-picker-refined.html
   Scope: view-layer only. No new state fields. No brain/routing changes.
   ════════════════════════════════════════════════════════════════ */

/* ── COMPOSITION STRIP ── */
.dna-comp {
  margin: 0 0 14px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.04), rgba(var(--gold-rgb), 0.008));
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: 18px;
  position: relative; overflow: hidden;
}
.dna-comp::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(180px 80px at 0% 0%, rgba(var(--gold-rgb), 0.08), transparent 70%);
}
.dna-comp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; position: relative; z-index: 1;
}
.dna-comp-head .lbl {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}
.dna-comp-head .cnt {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--t3);
}
.dna-comp-head .cnt em { color: var(--gold); font-style: normal; }

.dna-dims {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  position: relative; z-index: 1;
}
.dna-dim {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 2px 4px; border-radius: 10px; cursor: pointer;
  transition: all 0.18s ease;
  background: none; border: none; color: inherit;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dna-dim:active { transform: scale(0.97); }
.dna-dim .glyph {
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: grid; place-items: center;
  color: var(--t4);
  transition: all 0.18s ease;
}
.dna-dim .glyph svg { width: 16px; height: 16px; }
.dna-dim .dlabel {
  font-family: 'DM Mono', monospace; font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--t4);
  transition: color 0.18s ease;
}
.dna-dim .dvalue {
  font-size: 10.5px; color: var(--t4); font-family: 'DM Mono', monospace;
  font-weight: 300; letter-spacing: 0.05em;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 12px;
}
.dna-dim.filled .glyph {
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.18), rgba(var(--gold-rgb), 0.04));
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  color: var(--gold);
}
.dna-dim.filled .dlabel { color: rgba(var(--gold-rgb), 0.55); }
.dna-dim.filled .dvalue {
  color: var(--t1); font-family: 'Outfit', sans-serif; font-weight: 400;
  letter-spacing: -0.005em;
}
.dna-dim.current .glyph {
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.24), rgba(var(--gold-rgb), 0.06));
  border: 1px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px -3px rgba(var(--gold-rgb), 0.38);
}
.dna-dim.current .dlabel { color: var(--gold); }

/* ── CHAPTER HEADER (Phase 2) ──
   Applied as a sibling pattern to .flowlabel when the section opts in.
   Using new class .fs-head so legacy .flowlabel remains available for any
   section that doesn't upgrade in this ship. */
.fs-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
.fs-num {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: 15px; color: var(--gold);
  letter-spacing: 0.01em; flex-shrink: 0;
}
.fs-name {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  flex-shrink: 0;
}
.fs-optional {
  margin-left: auto;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--t4);
  font-weight: 300;
}
.fs-question {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 23px; color: var(--t1); line-height: 1.16;
  letter-spacing: -0.008em;
  margin: 6px 0 18px;
}
@media (max-width: 360px) {
  .fs-question { font-size: 20px; }
  .dna-dim .glyph { width: 30px; height: 30px; }
  .dna-dim .dvalue { font-size: 9.5px; }
}
/* V149 — Start with Intent tab bar */
.swi-tabbar{display:flex;margin:16px var(--sp-page) 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.swi-tab{flex:1;background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--t3);padding:14px 4px;position:relative;transition:color 0.3s cubic-bezier(0.2,0.8,0.2,1);-webkit-tap-highlight-color:transparent}
.swi-tab:hover{color:var(--t1)}
.swi-tab.active{color:var(--gold)}
.swi-tab.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:var(--gold);border-radius:2px}
.swi-tab-pane{width:100%}
/* GENERATED PROMPT SCREEN */
.bigcopybtn:active{transform:scale(0.98)}
.bigcopybtn.done{background:var(--teal)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ani{animation:fadein 0.32s ease both}
.ani:nth-child(1){animation-delay:0.04s}
.ani:nth-child(2){animation-delay:0.09s}
.ani:nth-child(3){animation-delay:0.15s}
.ani:nth-child(4){animation-delay:0.19s}
.ani:nth-child(5){animation-delay:0.24s}
.ani:nth-child(6){animation-delay:0.29s}

/* ════════════════════════════════════════════════════════════════
   V211 — DNA PICKER PHASE 3: COLLAPSIBLE SECTIONS
   Each .flowstep with [data-fs] can be collapsed to a summary row.
   Spec: only Mood is expanded by default. Tapping a different section
   header, chevron, or composition tile switches expansion.
   ════════════════════════════════════════════════════════════════ */

/* Collapsed state — section body hidden, only summary row visible */
#s-manual .flowstep[data-fs].fs-collapsed {
  margin-bottom: 10px;
  animation: none;
}
#s-manual .flowstep[data-fs].fs-collapsed .fs-question,
#s-manual .flowstep[data-fs].fs-collapsed .moodgrid,
#s-manual .flowstep[data-fs].fs-collapsed .genrerow,
#s-manual .flowstep[data-fs].fs-collapsed .genre-explorer,
#s-manual .flowstep[data-fs].fs-collapsed .optcard,
#s-manual .flowstep[data-fs].fs-collapsed .soundchip,
#s-manual .flowstep[data-fs].fs-collapsed > *:not(.fs-head):not(.fs-collapsed-summary) {
  display: none !important;
}

/* Expanded state — default, everything visible */
#s-manual .flowstep[data-fs] .fs-collapsed-summary { display: none; }
#s-manual .flowstep[data-fs].fs-collapsed .fs-collapsed-summary { display: flex; }

/* Section head — tappable on collapse */
#s-manual .flowstep[data-fs] .fs-head {
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
  transition: background var(--state-dur, 0.18s) var(--easing-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
#s-manual .flowstep[data-fs] .fs-head:active { background: rgba(var(--gold-rgb), 0.04); }

/* Chevron — only on collapsed sections, rotates when section opens */
#s-manual .flowstep[data-fs] .fs-chev {
  margin-left: auto;
  width: 14px; height: 14px;
  color: var(--t4);
  transition: transform var(--state-dur, 0.18s) var(--easing-standard, ease),
              color var(--state-dur, 0.18s) var(--easing-standard, ease);
  flex-shrink: 0;
}
#s-manual .flowstep[data-fs] .fs-chev svg {
  width: 100%; height: 100%;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
#s-manual .flowstep[data-fs].fs-collapsed .fs-chev { transform: rotate(-90deg); }
#s-manual .flowstep[data-fs]:not(.fs-collapsed) .fs-chev { color: var(--gold); }

/* Collapsed summary row — sits below .fs-head when collapsed */
#s-manual .fs-collapsed-summary {
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.005) 70%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-top: 6px;
  cursor: pointer;
  transition: all var(--state-dur, 0.18s) var(--easing-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
#s-manual .fs-collapsed-summary:active { transform: scale(0.985); }
#s-manual .fs-collapsed-summary.done {
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.05), rgba(var(--gold-rgb), 0.01) 70%);
  border-color: rgba(var(--gold-rgb), 0.22);
}
#s-manual .fs-summary-text {
  flex: 1;
  font-family: 'Outfit', sans-serif; font-weight: 400;
  font-size: 14px; color: var(--t1);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#s-manual .fs-summary-text.empty {
  color: var(--t4); font-style: italic; font-weight: 300;
  font-family: 'Cormorant Garamond', serif; font-size: 13px;
}
#s-manual .fs-summary-pen {
  width: 12px; height: 12px;
  color: rgba(var(--gold-rgb), 0.55);
  flex-shrink: 0;
}
#s-manual .fs-summary-pen svg {
  width: 100%; height: 100%;
  stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* When Sound is collapsed, hide Step 2 collapsible wrapper so it doesn't double up.
   V211 takes over accordion responsibility for Energy/Approach/Sound individually. */
#s-manual .dna-step2-wrap { display: none; }

/* V307: DNA Tab Rail — mobile category tabs matching Sound Designer pattern.
   Desktop keeps the editorial two-column layout untouched. */
.dna-tabbar { display: none; }
@media (max-width: 1023px) {
  .dna-tabbar {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scrollbar-width: none;
    padding: 10px var(--sp-page) 0;
    margin: 0 calc(var(--sp-page) * -1);
    border-bottom: 1px solid var(--b1);
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
  }
  .dna-tabbar::-webkit-scrollbar { display: none; }
  .dna-tabbtn {
    padding: 10px 13px 11px;
    border-radius: 10px 10px 0 0;
    background: transparent;
    border: none;
    color: var(--t3);
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    transition: color var(--state-dur) var(--easing-standard);
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .dna-tabbtn:active { opacity: 0.7; }
  .dna-tabbtn.on { color: var(--gold); }
  .dna-tabbtn.on::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    bottom: -1px;
    height: 1px;
    background: var(--gold);
  }
  .dna-tab-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: transparent;
    transition: background var(--state-dur);
    flex-shrink: 0;
  }
  .dna-tabbtn.has .dna-tab-dot {
    background: var(--gold);
    box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.6);
  }
  /* Hide accordion headers — tabs replace them */
  #s-manual .flowstep[data-fs] .fs-head { display: none; }
  #s-manual .flowstep[data-fs] .fs-collapsed-summary { display: none !important; }
  /* Sliding panel track — viewport clips, strip translates */
  #dna-track { overflow: hidden; touch-action: pan-y; transition: height 320ms ease; }
  #dna-strip {
    display: flex;
    align-items: flex-start;
    transition: transform 320ms ease;
  }
  #dna-strip .flowstep[data-fs] {
    flex: 0 0 100%;
    min-width: 0;
    display: block;
    padding-bottom: 28px;
  }
  #dna-strip .flowstep[data-fs="sound"] { padding-bottom: 64px; }
  /* Force all panel content visible — fs-collapsed state is irrelevant on mobile */
  #dna-strip .flowstep[data-fs] .fs-question { display: block !important; }
  #dna-strip .flowstep[data-fs] .moodgrid { display: grid !important; }
  #dna-strip .flowstep[data-fs] .genrerow { display: flex !important; }
  #dna-strip .flowstep[data-fs] .optcard { display: flex !important; }
  #dna-strip .flowstep[data-fs] .soundchip { display: flex !important; }
  #dna-strip.dna-strip-nudge { animation: dnaStripNudge 500ms ease both; }
}
@keyframes dnaStripNudge {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(-56px); }
  100% { transform: translateX(0); }
}


/* V307: Segmented controls for Vocals/Key — distinct from chip walls */
.dna-seg {
  display: flex;
  border: 1px solid var(--b2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--s2);
}
.dna-seg .soundchip {
  flex: 1;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--b1);
  padding: 9px 6px;
  margin: 0;
  background: transparent;
  justify-content: center;
  min-height: auto;
}
.dna-seg .soundchip:last-child { border-right: none; }
.dna-seg .soundchip.sel {
  background: rgba(var(--gold-rgb), 0.1);
}
/* V307: Instrument More toggle */
.dna-inst-extra { display: none; }
.dna-inst-extra.show { display: flex; }
.dna-inst-toggle { border-style: dashed !important; color: var(--t3) !important; }

/* V307: Commit button — gold gradient border with dark interior, shimmer on hover.
   Uses background double-layer trick (padding-box + border-box) so border-radius works. */

/* V307: DNA picker chip restyle — quieter default state, premium feel.
   Scoped to #s-manual so Sound Designer chips stay untouched. */
#s-manual .gchip {
  border-color: rgba(255,255,255,0.06);
  background: transparent;
  color: var(--t3);
}
#s-manual .gchip:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--t2);
}
#s-manual .gchip.sel {
  border-color: rgba(var(--teal-rgb),0.35);
  background: rgba(var(--teal-rgb),0.06);
}
#s-manual .gchip.exclude {
  border-color: rgba(var(--rose-rgb),0.25);
  background: transparent;
}
#s-manual .moodpill {
  border-color: rgba(255,255,255,0.06);
  background: transparent;
  color: var(--t3);
}
#s-manual .moodpill:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
}
#s-manual .moodpill.sel {
  border-color: rgba(var(--gold-rgb),0.35);
  background: rgba(var(--gold-rgb),0.06);
}
#s-manual .optcard {
  border-color: rgba(255,255,255,0.06);
  background: transparent;
}
#s-manual .optcard:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
}
#s-manual .optcard.sel {
  border-color: rgba(var(--gold-rgb),0.35);
  background: rgba(var(--gold-rgb),0.06);
}
.btn-commit {
  border: 2px solid transparent !important;
  color: var(--gold) !important;
  background:
    linear-gradient(var(--s1), var(--s1)) padding-box,
    linear-gradient(to right, #77530a, #C8A050, #77530a, #77530a, #C8A050, #77530a) border-box !important;
  background-size: 100% 100%, 250% 100% !important;
  background-position: center, left !important;
  transition: background-position 1s ease, transform var(--press-dur) var(--easing-standard) !important;
  box-shadow: 0 4px 20px -8px rgba(var(--gold-rgb), 0.25) !important;
}
.btn-commit:hover {
  background-position: center, right !important;
  box-shadow: 0 6px 28px -8px rgba(var(--gold-rgb), 0.4) !important;
}
.btn-commit:active {
  transform: scale(var(--press-scale));
}
.btn-commit:disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: saturate(0.5);
}

/* ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   stanzai V9 — CHAT-FIRST SESSION
   ═══════════════════════════════════════════════════ */

/* Chat screen background */
.v9-chat-bg{background:radial-gradient(ellipse at 50% 30%,#161210,var(--bg) 70%)}


/* ════════════════════════════════════════════════════════════════
   TODAY'S ROTATION - rotating mood suggestion chips (Mood tab,
   Start with intent picker). Full-bleed band on the Well tier sitting
   between the mood grid and the custom mood input. Chips are shortcuts
   into the custom input: no selected state, no icons, no gold.
   ════════════════════════════════════════════════════════════════ */
.mood-rotation {
  background: var(--dt-well);
  border-top: 1px solid var(--dt-edge);
  border-bottom: 1px solid var(--dt-edge);
  margin: 18px 0 6px;
  padding: 14px 0 16px;
}
.mood-rotation-head {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 0 var(--sp-page);
  margin-bottom: 11px;
}
.mood-rotation-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  padding: 1px var(--sp-page);
  /* 28px edge fades: the mask reveals the band background, which is the Well color */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.mood-rotation-row::-webkit-scrollbar { display: none; }
.mood-rot-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--dt-surface);
  color: var(--t2);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press-dur) var(--easing-standard);
}
.mood-rot-chip:active { transform: scale(var(--press-scale)); }

/* Desktop: keep the compact pills exactly as on mobile, centered in the band
   (founder call). Auto margins on the end chips center the row when it has
   free space and degrade safely to a normal scroll row if a long label set
   ever overflows (justify-content: center would clip the leading chips). */
@media (min-width: 1024px) {
  .dtpk-main .mood-rot-chip:first-child { margin-left: auto; }
  .dtpk-main .mood-rot-chip:last-child { margin-right: auto; }
}

/* Chip tap feedback: brief soft-gold flash on the custom mood input border.
   Keyframe animation outranks the input's inline border style without !important. */
#moodCustomManual.mood-rot-flash {
  animation: moodRotInputFlash 600ms var(--easing-standard) both;
}
@keyframes moodRotInputFlash {
  0% { border-color: var(--b2); }
  20% { border-color: rgba(var(--gold-rgb), 0.45); }
  65% { border-color: rgba(var(--gold-rgb), 0.45); }
  100% { border-color: var(--b2); }
}

@media (max-width: 1023px) {
  /* Full-bleed plumbing: #dna-track clips at its own box (overflow hidden for
     the sliding strip), so the track goes edge to edge and each panel re-adds
     the page padding. Net content position is unchanged on every tab; the
     rotation band can now bleed to the viewport edges. */
  #dna-track {
    margin-left: calc(var(--sp-page) * -1);
    margin-right: calc(var(--sp-page) * -1);
  }
  #dna-strip .flowstep[data-fs] {
    padding-left: var(--sp-page);
    padding-right: var(--sp-page);
  }
  #dna-strip .flowstep[data-fs] .mood-rotation {
    display: block !important;
    margin-left: calc(var(--sp-page) * -1);
    margin-right: calc(var(--sp-page) * -1);
  }
}