/* Song It Forward — immersive, one-question-at-a-time form v2. Scoped to create.html. */
.sf-immersive{overflow:hidden;background:#F5EFE6;color:#24364B}
.sf-site-header{height:75px;background:#F5EFE6;border:0}
.sf-site-header .header-inner{min-height:75px;height:75px;padding-top:3px}
.sf-site-header .brand{width:clamp(145px,35vw,195px)}
.sf-site-header .back-link{margin:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#53645E;border:1px solid #DBDCD2;border-radius:99px;width:45px;height:45px;font-size:17px;background:#FCF9F4}
.sf-site-header .sf-close-label{display:none}
.sf-form-page{height:calc(100dvh - 75px);min-height:0;background:radial-gradient(ellipse 75% 80% at 100% 100%,rgba(226,162,127,.07),transparent 80%),#F5EFE6;display:flex;justify-content:center;overflow:hidden}
.sf-experience{width:min(100%,790px);min-height:0;display:flex;flex-direction:column;padding:0 clamp(20px,5.2vw,46px) max(7px,env(safe-area-inset-bottom))}
.sf-progress-track{height:3px;flex:0 0 3px;background:#E2DCD2;border-radius:20px;overflow:hidden}
.sf-progress-track span{display:block;width:10%;height:100%;background:var(--apricot-deep);border-radius:20px;transition:width .38s cubic-bezier(.18,.76,.21,1)}
.sf-progress-top{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:18px 0 8px;gap:14px}
.sf-type{font-size:.65rem;letter-spacing:.19em;font-weight:700;color:#738275;display:flex;align-items:center;gap:8px}
.sf-mini-heart{font:1.35rem/1 Georgia,serif;color:#CA8E6B}
.sf-count{color:#8A8A7E;font-size:.74rem;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-interview{display:flex;min-height:0;flex:1;flex-direction:column}
.sf-question-host{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;overscroll-behavior:contain;scrollbar-color:#D7CFBF transparent;scrollbar-width:thin;position:relative}
.sf-panel{width:100%;max-width:610px;margin:auto;flex:0 0 auto;position:relative;outline:none;padding:22px 1px 25px}
.sf-panel.sf-review{max-width:650px;margin:0 auto;padding-top:32px}
/* Two-phase choreography: the old question must finish leaving the clipped
   viewport before the next is mounted. This prevents text crossing/ghosting. */
.sf-panel.sf-exit-forward{animation:sf-exit-forward .46s cubic-bezier(.56,.04,.88,.57) both;pointer-events:none}
.sf-panel.sf-exit-back{animation:sf-exit-back .46s cubic-bezier(.56,.04,.88,.57) both;pointer-events:none}
.sf-panel.sf-enter-forward{animation:sf-enter-forward .69s cubic-bezier(.18,.72,.17,1) both}
.sf-panel.sf-enter-back{animation:sf-enter-back .69s cubic-bezier(.18,.72,.17,1) both}
.sf-panel.sf-transition-clone{position:absolute;left:0;right:0;margin:0;z-index:2}
@keyframes sf-exit-forward{
  0%{opacity:1;transform:translate3d(0,0,0)}
  100%{opacity:1;transform:translate3d(0,calc(-1 * var(--sf-exit-distance,650px)),0)}
}
@keyframes sf-enter-forward{
  0%{opacity:0;transform:translate3d(0,var(--sf-enter-distance,240px),0)}
  24%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sf-exit-back{
  0%{opacity:1;transform:translate3d(0,0,0)}
  100%{opacity:1;transform:translate3d(0,var(--sf-exit-distance,650px),0)}
}
@keyframes sf-enter-back{
  0%{opacity:0;transform:translate3d(0,calc(-1 * var(--sf-enter-distance,240px)),0)}
  24%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
/* Stagger the actual contents so the heading comes first, then each answer. */
@keyframes sf-piece-rise{
  from{opacity:0;transform:translate3d(0,42px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.sf-panel.sf-enter-forward > .sf-eyebrow,
.sf-panel.sf-enter-back > .sf-eyebrow{animation:sf-piece-rise .38s .07s both}
.sf-panel.sf-enter-forward > .sf-question,
.sf-panel.sf-enter-back > .sf-question{animation:sf-piece-rise .44s .13s both}
.sf-panel.sf-enter-forward > .sf-prompt,
.sf-panel.sf-enter-back > .sf-prompt{animation:sf-piece-rise .44s .19s both}
.sf-panel.sf-enter-forward > .sf-recommend,
.sf-panel.sf-enter-back > .sf-recommend{animation:sf-piece-rise .44s .26s both}
.sf-panel.sf-enter-forward .sf-choice,
.sf-panel.sf-enter-back .sf-choice{
  animation:sf-piece-rise .39s cubic-bezier(.16,.76,.23,1) both;
  animation-delay:var(--sf-stagger,320ms);
}
.sf-panel.sf-enter-forward > .sf-field,
.sf-panel.sf-enter-forward > .sf-soft-toggle,
.sf-panel.sf-enter-forward > .sf-optional,
.sf-panel.sf-enter-forward > .sf-skip,
.sf-panel.sf-enter-forward > .sf-chip-help,
.sf-panel.sf-enter-forward > .sf-style-intro,
.sf-panel.sf-enter-back > .sf-field,
.sf-panel.sf-enter-back > .sf-soft-toggle,
.sf-panel.sf-enter-back > .sf-optional,
.sf-panel.sf-enter-back > .sf-skip,
.sf-panel.sf-enter-back > .sf-chip-help,
.sf-panel.sf-enter-back > .sf-style-intro{animation:sf-piece-rise .42s .34s both}
.sf-eyebrow{display:table;padding:5px 9px;margin:0 0 14px;color:#8B5D48;background:#EED9CD;border-radius:6px;font-size:.65rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;line-height:1.4}
.sf-question{color:#24364B;font:500 clamp(1.9rem,4.9vw,2.75rem)/1.17 var(--serif);letter-spacing:-.045em;margin:0 0 13px;text-wrap:balance}
.sf-prompt{font-size:clamp(.87rem,1.65vw,.96rem);line-height:1.65;color:#75827D;margin:0 0 24px;max-width:570px}
.sf-choices{display:grid;gap:9px;margin-bottom:10px}
.sf-choice{min-height:58px;width:100%;background:rgba(255,252,248,.55);border:1px solid #E5D4C9;border-radius:11px;padding:11px 15px;text-align:left;display:flex;align-items:center;gap:12px;color:#344555;font:500 clamp(.96rem,2vw,1.04rem)/1.38 var(--sans);transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.sf-choice:hover{background:#FFF9F5;border-color:#CD9984;transform:translateY(-1px)}
.sf-choice[aria-pressed=true]{background:#F3DDD0;border-color:#C58265;box-shadow:inset 0 0 0 1px #D39A80}
.sf-choice-key{display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;background:#FFFCF8;border:1px solid #E2CBBB;color:#B47C65;border-radius:5px;font-size:.8rem;line-height:1;font-weight:700}
.sf-choice-label{flex:1}
.sf-choice .sf-choice-icon{font-size:1.05rem;color:#BA8C73;line-height:1}
.sf-choice[aria-pressed=true] .sf-choice-icon{color:#955C43}
.sf-field{margin:18px 0 13px}
.sf-label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.02em;margin:0 0 8px;color:#52655F}
.sf-field input,.sf-field textarea{width:100%;display:block;padding:13px 0 11px;font:500 clamp(1.13rem,3vw,1.4rem)/1.4 var(--serif);color:#24364B;background:transparent;border:0;border-bottom:2px solid #CFADA1;border-radius:0;outline:none;resize:vertical}
.sf-field textarea{font:400 1.02rem/1.55 var(--sans);min-height:96px;padding-top:12px;border:1px solid #E2D3C7;border-radius:10px;background:rgba(255,255,255,.58);padding-left:14px;padding-right:14px}
.sf-field input:focus{border-color:#A7664D}
.sf-field textarea:focus{outline:2px solid #C58F72;outline-offset:2px}
.sf-field input::placeholder,.sf-field textarea::placeholder{color:#A7A49A;font-weight:400}
.sf-hint{display:block;color:#7D857C;font-size:.77rem;line-height:1.5;margin:8px 0 0}
.sf-soft-toggle{border:0;background:none;color:#5C746A;text-decoration:underline;text-underline-offset:3px;padding:11px 1px;text-align:left;font-size:.83rem;font-weight:700}
.sf-optional{padding:12px 16px;margin:13px 0 8px;border:1px solid #E5E6D8;border-radius:12px;background:#EEF0E9}
.sf-optional .sf-field{margin:0}
.sf-optional .sf-field input,.sf-optional .sf-field textarea{background:transparent}
.sf-optional .sf-field textarea{background:rgba(255,255,255,.65)}
.sf-chip-help{margin:9px 0 0;color:#768276;font-size:.78rem}
.sf-skip{border:0;background:transparent;color:#627768;text-decoration:underline;text-underline-offset:3px;font-size:.83rem;font-weight:600;margin:7px 0 0;padding:12px 1px}
.sf-recommend{background:#E7EDE2;border-left:3px solid #94A68E;border-radius:9px;padding:12px 15px;margin:0 0 21px;line-height:1.5}
.sf-recommend strong{display:block;color:#314D49;font-size:.88rem;margin-bottom:3px}
.sf-recommend small{color:#697D71;font-size:.79rem}
.sf-style-intro{font-size:.77rem;line-height:1.5;color:#8A8D80;margin:10px 0}
.sf-error{margin:10px 0 0;font-size:.83rem;font-weight:700;color:#9F402D}
.sf-footer-controls{flex:0 0 auto;display:flex;align-items:center;gap:9px;justify-content:stretch;padding:11px 0 6px;background:linear-gradient(0deg,#F5EFE6 88%,rgba(245,239,230,0));min-height:70px}
.sf-back{width:55px;height:53px;border:1px solid #CDA49B;border-radius:12px;background:#E9D4CA;color:#24364B;font-size:1.3rem;font-weight:600}
.sf-next{flex:1;min-width:0;min-height:53px;border:0;border-radius:12px;background:#DFAB92;color:#24364B;font:700 1rem/1.2 var(--sans);letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:12px}
.sf-next:hover{background:#E8B89D}
.sf-next[hidden]+*,.sf-next:disabled{opacity:.5}
.sf-footer-controls:has(.sf-next[hidden]){min-height:58px}
.sf-footer-controls:has(.sf-next[hidden]) .sf-back{width:55px}
.sf-disclaimer{flex:0 0 auto;font-size:.57rem;line-height:1.35;letter-spacing:.07em;font-weight:700;color:#978C81;text-align:center;margin:6px 0 9px}
.sf-review-heading{margin-bottom:12px}
.sf-review-section{padding:13px 15px;margin-bottom:10px;border-radius:12px;border:1px solid #E0DBD1;background:#FFFCF8}
.sf-review-section>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sf-review-section h3{font:500 1.12rem/1.3 var(--serif);margin:0;color:#24364B}
.sf-review-section p{font-size:.86rem;line-height:1.65;color:#56635B;overflow-wrap:anywhere;white-space:pre-wrap;margin:8px 0 0}
.sf-review-edit{background:none;border:0;color:#607E6B;text-decoration:underline;padding:6px;font-size:.78rem;font-weight:700}
.sf-summary-preview{background:#E7ECE3;border-radius:12px;padding:16px;color:#3D584A;margin:16px 0}
.sf-summary-preview strong{display:block;margin-bottom:6px}
.sf-summary-preview p{margin:0;font-size:.86rem;line-height:1.65}
.sf-preview-end{background:#F0E1D2;border-radius:12px;padding:14px 16px;font-size:.85rem;color:#735D4B;line-height:1.55}
.sf-review-restart{border:0;background:none;color:#607769;text-decoration:underline;font-size:.85rem;padding:17px 0}
@media(max-width:480px){
 .sf-site-header{height:67px}
 .sf-site-header .header-inner{min-height:67px;height:67px}
 .sf-site-header .brand{width:160px}
 .sf-site-header .back-link{width:39px;height:39px}
 .sf-form-page{height:calc(100dvh - 67px)}
 .sf-experience{padding-left:clamp(20px,6.8vw,27px);padding-right:clamp(20px,6.8vw,27px)}
 .sf-progress-top{padding-top:16px;padding-bottom:6px}
 .sf-question{font-size:clamp(1.8rem,8.1vw,2.2rem)}
 .sf-panel{padding-top:20px;padding-bottom:18px}
 .sf-prompt{margin-bottom:21px}
 .sf-choice{padding:10px 12px;min-height:56px}
 .sf-footer-controls{padding-top:8px}
 .sf-disclaimer{font-size:.53rem}
}
@media(max-height:740px){
 .sf-progress-top{padding-top:10px;padding-bottom:3px}
 .sf-panel{padding-top:12px;padding-bottom:12px}
 .sf-choice{min-height:49px;padding-top:7px;padding-bottom:7px}
 .sf-choices{gap:7px}
 .sf-footer-controls{min-height:59px}
 .sf-next,.sf-back{min-height:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
 .sf-panel.sf-exit-forward,.sf-panel.sf-exit-back,.sf-panel.sf-enter-forward,.sf-panel.sf-enter-back{animation:none!important}
 .sf-choice,.sf-progress-track span{transition:none!important}
}