/* Soundtrack chapter styles, ported from the live v4 page (B4).
   Scoped to .soundtrack so its components keep their exact look without fighting
   app.css over the page shell. Shell rules that were byte-identical to app.css
   are dropped at top level rather than duplicated.
   Inside @media (notably print) global selectors like body and .site-header are
   kept and left UNSCOPED, because hiding the sticky header and clearing the
   background is the entire point of the print styles. */

.soundtrack .btn{font-family:var(--sans);font-size:13.5px;font-weight:700; letter-spacing:.02em;line-height:1;cursor:pointer; border-radius:999px;padding:11px 18px;border:1px solid transparent; display:inline-flex;align-items:center;gap:8px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap;}
.soundtrack .btn svg{width:15px;height:15px;}
.soundtrack .btn-primary{background:var(--teal);color:var(--btn-primary-ink);box-shadow:0 8px 18px -10px rgba(29,116,121,.7);}
.soundtrack .btn-primary:hover{background:#7cc6ca;transform:translateY(-1px);}
.soundtrack .btn-ghost{background:transparent;color:var(--teal-ink);border-color:var(--line);}
.soundtrack .btn-ghost:hover{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-wash);}
.soundtrack .page-head{padding:54px 0 26px;}
.soundtrack .eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--teal-ink); margin:0 0 14px;}
.soundtrack h1{font-family:var(--serif);font-weight:500; font-size:clamp(34px,6vw,50px);line-height:1.04; margin:0;letter-spacing:-.01em;color:var(--ink);}
.soundtrack h1 em{font-style:italic;color:var(--teal-ink);font-weight:500;}
.soundtrack .lede{font-family:var(--serif);font-style:italic; font-size:clamp(16px,2.4vw,19px);color:var(--ink-soft); margin:16px 0 0;max-width:46ch;}
.soundtrack .musicians{background:linear-gradient(180deg,#ffffff, #fcfbf9); border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px;margin:8px 0 38px; display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.soundtrack .musicians .ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px; background:var(--teal-wash);color:var(--teal-ink); display:grid;place-items:center;}
.soundtrack .musicians .ico svg{width:22px;height:22px;}
.soundtrack .musicians .m-body{flex:1 1 280px;min-width:240px;}
.soundtrack .musicians h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 3px;color:var(--ink);}
.soundtrack .musicians p{margin:0;font-size:13.5px;color:var(--ink-soft);}
.soundtrack .section{background:var(--card);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow); padding:26px 26px 24px;margin-bottom:26px; opacity:0;transform:translateY(14px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
.soundtrack .section-head{display:flex;justify-content:space-between;align-items:flex-start; gap:20px;flex-wrap:wrap;margin-bottom:6px;}
.soundtrack .section-title{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1;margin:2px 0 0;color:var(--ink);}
.soundtrack .section-title em{font-style:italic;color:var(--teal-ink);}
.soundtrack .section-desc{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:14.5px;margin:8px 0 0;max-width:52ch;}
.soundtrack .delivery{display:inline-flex;background:var(--teal-wash);border-radius:999px; padding:4px;gap:2px;flex:0 0 auto;border:1px solid var(--teal-wash-2); align-self:center;}
.soundtrack .delivery .pill{border:none;background:transparent;cursor:pointer; font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-soft); padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px; transition:background .18s ease,color .18s ease,box-shadow .18s ease;letter-spacing:.01em;}
.soundtrack .delivery .pill svg{width:14px;height:14px;}
.soundtrack .delivery .pill:hover{color:var(--teal-ink);}
.soundtrack .delivery .pill.active{background:var(--teal);color:#10302f;box-shadow:0 4px 10px -5px rgba(29,116,121,.8);}
.soundtrack .delivery-label{display:none;}
.soundtrack .moments{margin-top:14px;}
.soundtrack .moment{padding:16px 0;border-top:1px solid var(--line-soft);}
.soundtrack .moment:first-child{border-top:none;}
.soundtrack .moment-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.soundtrack .moment-name{font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:10px;}
.soundtrack .moment-name .del{border:none;background:transparent;color:var(--ink-faint);cursor:pointer;font-size:14px; opacity:0;transition:opacity .15s ease;padding:0 2px;line-height:1;}
.soundtrack .moment:hover .moment-name .del{opacity:1;}
.soundtrack .moment-hint{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.soundtrack .songs{margin-top:10px;display:flex;flex-direction:column;gap:7px;}
.soundtrack .song{display:flex;flex-direction:column;gap:7px; background:#fcfbf9;border:1px solid var(--line-soft); border-radius:12px;padding:9px 12px; animation:pop .28s ease;}
@keyframes pop{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.soundtrack .song-main{display:flex;align-items:center;gap:11px;}
.soundtrack .song .note{color:var(--teal-ink);flex:0 0 auto;display:grid;place-items:center;}
.soundtrack .song .note svg{width:15px;height:15px;}
.soundtrack .song .txt{flex:1 1 auto;min-width:0;font-size:14px;}
.soundtrack .song .txt .t{font-weight:700;color:var(--ink);}
.soundtrack .song .txt .a{color:var(--ink-soft);}
.soundtrack .song-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--teal-ink);text-decoration:none;padding:4px 10px;border:1px solid var(--teal-wash-2);border-radius:999px;background:var(--teal-wash);}
.soundtrack .song-link svg{width:13px;height:13px;}
.soundtrack .song-link:hover{background:var(--teal-wash-2);}
.soundtrack .song-note{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--ink-soft);padding-left:26px;line-height:1.45;}
.soundtrack .song-note svg{width:13px;height:13px;flex:0 0 auto;margin-top:3px;color:var(--ink-faint);}
.soundtrack .song .song-remove{border:none;background:transparent;color:var(--ink-faint);cursor:pointer; width:24px;height:24px;border-radius:50%;flex:0 0 auto;font-size:15px;line-height:1;}
.soundtrack .song .song-remove:hover{background:rgba(191,71,59,.10);color:var(--rose-ink);}
.soundtrack .song-tag{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.soundtrack .song-tag.live{background:var(--teal-wash);color:var(--teal-ink);}
.soundtrack .song-tag.speakers{background:var(--speakers-wash);color:var(--speakers-ink);}
.soundtrack .cross-hint{font-size:12px;color:var(--ink-soft);margin-top:10px;display:flex;align-items:center;gap:6px;}
.soundtrack .cross-hint::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block;}
.soundtrack .both-hint{font-size:13.5px;font-style:italic;color:var(--ink-soft);margin:6px 0 4px;}
.soundtrack .pill-count:empty{display:none;}
.soundtrack .pill-count{background:rgba(33,48,47,.12);border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:700;line-height:1.5;}
.soundtrack .add-row{margin-top:11px;}
.soundtrack .add-toggle{border:none;background:transparent;color:var(--teal-ink);cursor:pointer; font-family:var(--sans);font-weight:700;font-size:13.5px; display:inline-flex;align-items:center;gap:7px;padding:4px 0;}
.soundtrack .add-toggle svg{width:15px;height:15px;}
.soundtrack .add-toggle:hover{text-decoration:underline;}
.soundtrack .add-form{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.soundtrack .add-form.open{display:flex;}
.soundtrack .add-form .song-title{flex:1 1 200px;}
.soundtrack .add-form .song-artist{flex:1 1 150px;}
.soundtrack .add-form .song-spotify{flex:1 1 100%;}
.soundtrack .add-form .song-notes{flex:1 1 100%;min-height:58px;resize:vertical;line-height:1.5;}
.soundtrack input[type=text], .soundtrack input[type=email], .soundtrack textarea{font-family:var(--sans);font-size:14px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:10px; padding:10px 13px;outline:none;transition:border-color .15s ease, box-shadow .15s ease;}
.soundtrack input[type=text]::placeholder, .soundtrack input[type=email]::placeholder, .soundtrack textarea::placeholder{color:var(--ink-faint);}
.soundtrack input[type=text]:focus, .soundtrack input[type=email]:focus, .soundtrack textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(110,187,191,.22);}
.soundtrack .btn-sm{font-size:13px;padding:9px 15px;}
.soundtrack .link-btn{border:none;background:transparent;color:var(--ink-soft);cursor:pointer; font-family:var(--sans);font-weight:700;font-size:13px;padding:9px 6px;}
.soundtrack .link-btn:hover{color:var(--ink);}
.soundtrack .section-add{border-top:1px solid var(--line-soft);margin-top:4px;padding:14px 0 8px;}
.soundtrack .who-field{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);max-width:420px;}
.soundtrack .who-field input{font-weight:400;letter-spacing:0;text-transform:none;}
.soundtrack .add-form .dest-pick{flex:1 1 100%;display:inline-flex;align-self:flex-start;background:var(--teal-wash);border-radius:999px;padding:3px;gap:2px;border:1px solid var(--teal-wash-2);width:max-content;}
.soundtrack .dest-pill{border:none;background:transparent;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink-soft);padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;transition:background .15s ease,color .15s ease;}
.soundtrack .dest-pill svg{width:13px;height:13px;}
.soundtrack .dest-pill.active{background:var(--teal);color:#10302f;}
.soundtrack .playlists{margin-top:10px;}
.soundtrack .playlists .songs:empty{display:none;}
.soundtrack .list-text{width:100%;box-sizing:border-box;min-height:118px;margin-top:14px;resize:vertical;line-height:1.6;}
.soundtrack .lists{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.soundtrack .list-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:24px 24px 16px; opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;}
.soundtrack .list-card.never .eyebrow{color:var(--rose-ink);}
.soundtrack .list-card .section-title{font-size:23px;}
.soundtrack .list-card.never .section-title em{color:var(--rose-ink);}
.soundtrack .list-card .section-desc{margin-bottom:6px;}
.soundtrack .couple .couple-fields{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;}
.soundtrack .couple-fields label{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);}
.soundtrack .couple-fields input{font-weight:400;letter-spacing:0;text-transform:none;}
.soundtrack .submit-card{background:linear-gradient(180deg,var(--teal-wash),#ffffff); border:1px solid var(--teal-wash-2);border-radius:var(--radius); box-shadow:var(--shadow);padding:30px 26px;margin-top:30px;text-align:center;}
.soundtrack .submit-card h2{font-family:var(--serif);font-weight:500;font-size:25px;margin:0 0 6px;color:var(--ink);}
.soundtrack .submit-card > p{margin:0 auto;max-width:50ch;color:var(--ink-soft);font-size:14.5px;}
.soundtrack .submit-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 14px;}
.soundtrack .btn-lg{font-size:15px;padding:14px 26px;}
.soundtrack .submit-to{font-size:13px;color:var(--ink-soft);margin:0;}
.soundtrack .submit-to strong{color:var(--teal-ink);}
.soundtrack .hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;}
.soundtrack .btn.is-loading{opacity:.6;pointer-events:none;}
.soundtrack .modal-overlay{position:fixed;inset:0;background:rgba(20,30,29,.5);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:90;overflow:auto;}
.soundtrack .modal-overlay.open{display:flex;}
.soundtrack .modal{background:#fff;border-radius:16px;max-width:720px;width:100%;box-shadow:0 30px 90px -20px rgba(0,0,0,.55);overflow:hidden;animation:rise .35s cubic-bezier(.2,.7,.2,1);}
.soundtrack .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);}
/* The eyebrow sits directly above .modal-sub here, so it drops its 14px base
   margin. This was an inline style="margin:0"; moved into CSS so the site can
   run a strict Content-Security-Policy with no 'unsafe-inline' for styles. */
.soundtrack .modal-head .eyebrow{margin:0;}
.soundtrack .modal-sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
.soundtrack .modal-close{flex:0 0 auto;border:none;background:var(--teal-wash);color:var(--teal-ink);width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;}
.soundtrack .modal-close:hover{background:var(--teal-wash-2);}
.soundtrack .modal-body{max-height:62vh;overflow:auto;}
.soundtrack .modal-foot{display:flex;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);background:#fcfbf9;}
.soundtrack .gmail{font-family:Arial,Helvetica,sans-serif;}
.soundtrack .gmail-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#f1f3f4;border-bottom:1px solid #e3e6e8;}
.soundtrack .gmail-bar .dots{display:flex;gap:6px;}
.soundtrack .gmail-bar .dots i{width:11px;height:11px;border-radius:50%;display:block;}
.soundtrack .gmail-bar .url{flex:1;background:#fff;border:1px solid #e3e6e8;border-radius:999px;padding:5px 12px;font-size:12px;color:#5f6368;}
.soundtrack .gmail-body{padding:20px 22px;}
.soundtrack .gmail-subject{display:flex;align-items:center;gap:10px;font-size:19px;color:#202124;margin-bottom:16px;}
.soundtrack .gmail-subject .label{font-size:11px;background:#e8f0fe;color:#1967d2;border-radius:4px;padding:2px 7px;}
.soundtrack .gmail-sender{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid #f1f3f4;}
.soundtrack .gmail .avatar{width:38px;height:38px;border-radius:50%;background:var(--teal-ink);color:#fff;display:grid;place-items:center;font-weight:500;font-size:17px;flex:0 0 auto;}
.soundtrack .gmail .sender-meta{flex:1;min-width:0;font-size:13.5px;color:#202124;}
.soundtrack .gmail .sender-meta .addr{color:#5f6368;font-weight:400;}
.soundtrack .gmail .sender-meta .line2{color:#5f6368;font-size:12.5px;margin-top:2px;}
.soundtrack .gmail-content{padding:18px 2px 6px;}
.soundtrack .gmail-attach{border-top:1px solid #f1f3f4;padding:16px 2px 4px;}
.soundtrack .attach-head{font-size:13px;color:#5f6368;margin-bottom:10px;}
.soundtrack .attach-card{display:inline-flex;align-items:stretch;border:1px solid #dadce0;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;font-family:inherit;padding:0;text-align:left;}
.soundtrack .attach-card:hover{box-shadow:0 1px 4px rgba(60,64,67,.3);}
.soundtrack .attach-thumb{width:54px;background:#fbe9e7;color:#d93025;display:grid;place-items:center;font-weight:700;font-size:13px;}
.soundtrack .attach-meta{padding:9px 12px;}
.soundtrack .attach-name{display:block;font-size:13px;color:#202124;font-weight:500;}
.soundtrack .attach-size{display:block;font-size:11.5px;color:#5f6368;margin-top:2px;}
.soundtrack .foot button{border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:12.5px;font-family:var(--sans);text-decoration:underline;text-underline-offset:3px;}
.soundtrack .foot button:hover{color:var(--rose-ink);}
.soundtrack .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px); background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px; font-size:13.5px;font-weight:700;box-shadow:0 18px 40px -14px rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:80; display:flex;align-items:center;gap:9px;}
.soundtrack .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.soundtrack .toast svg{width:16px;height:16px;color:var(--teal);}
@media (max-width:680px){
  .wrap{padding:0 18px;}
  .soundtrack .page-head{padding:34px 0 20px;}
  .soundtrack .section{padding:20px 18px 8px;}
  .soundtrack .section-head{gap:14px;}
  .soundtrack .delivery{align-self:flex-start;}
  /* 29px at every width before this, and shrinking further here (padding,
     font-size, icon) rather than compensating. min-height brings it to the
     44px touch target; the pill keeps its own padding/font so the shape does
     not change, it is just taller. */
  .soundtrack .delivery .pill{padding:7px 10px;font-size:12px;min-height:44px;}
  .soundtrack .delivery .pill svg{width:13px;height:13px;}
  .soundtrack .lists{grid-template-columns:1fr;gap:20px;}
  .soundtrack .submit-card{padding:24px 18px;}
  .soundtrack .submit-actions .btn{flex:1 1 100%;justify-content:center;}
}
@media print{
  body::before, body::after{display:none;}
  body{background:#fff;}
  .site-header{position:static;border:none;background:none;}
  .soundtrack .add-row, .soundtrack .add-form, .soundtrack .song-remove, .soundtrack .moment-name .del, .soundtrack .section-add, .soundtrack .foot button, .foot .sep, .soundtrack .toast, .soundtrack .delivery, .soundtrack .both-hint, .soundtrack .cross-hint, .soundtrack .submit-card{display:none !important;}
  .soundtrack .section, .soundtrack .list-card, .soundtrack .musicians{box-shadow:none;border:1px solid #ddd;break-inside:avoid;}
  .soundtrack .couple-fields input{border:none !important;padding:2px 0 !important;background:none !important;box-shadow:none !important;font-weight:700;color:#000;}
  .soundtrack .song-link{border:none;background:none;padding:0;}
  .soundtrack .song-link svg{display:none;}
  .soundtrack .song-link::after{content:" " attr(href);font-weight:400;color:#555;}
  .wrap{max-width:100%;}
  main{padding-bottom:0;}
}