/* Noom Sound Set prototype. Loads after colors_and_type.css, same look as /learn/. Mobile first. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif)}
a{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
.st-th{display:none}
body.show-theory .st-th{display:block;font-family:var(--mono);font-size:12px;color:var(--clay);margin:4px 0 0}

/* Header */
.st-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:rgba(244,236,223,0.97);border-bottom:1px solid var(--ink-faint)}
.st-brand{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;border-bottom:0}
.st-noom{font-style:italic;font-size:22px;letter-spacing:0.04em}
.st-sub{font-family:var(--sans);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute)}
.st-nav{display:flex;gap:2px}
.st-nav a{font-family:var(--sans);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;padding:9px 8px;border-bottom:1px solid transparent}
.st-nav a[aria-current]{color:var(--clay);border-bottom-color:var(--clay)}
@media (max-width:560px){
  .st-head{flex-wrap:wrap;padding-bottom:0}
  .st-nav{width:100%;justify-content:space-between;margin:0 -8px}
  .st-nav a{flex:1;text-align:center;padding:10px 4px 11px;font-size:10.5px;letter-spacing:0.1em}
}
.st-bar{max-width:860px;margin:0 auto;padding:10px 16px 0;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.st-split{display:inline-flex;border:1px solid var(--ink-faint);border-radius:var(--r-pill);padding:3px}
.st-split a{font-family:var(--sans);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;padding:7px 12px;border-radius:var(--r-pill);border-bottom:0}
.st-split a[aria-current]{background:var(--ink);color:var(--cream)}
.st-split a{white-space:nowrap}
@media (max-width:480px){.st-split a{padding:7px 9px;font-size:10.5px;letter-spacing:0.06em}}
.st-beta{font-family:var(--sans);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;background:var(--sand);color:var(--ink);padding:4px 9px;border-radius:var(--r-pill)}
.st-foot-links a{color:var(--ink-mute)}
.st-acct{font-family:var(--sans);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-faint);padding:2px 0}
.st-unlock{margin-top:10px}
.st-seg{display:inline-flex;align-items:center;border:1px dashed var(--ink-faint);border-radius:var(--r-pill);padding:3px}
.st-seg-l{font-family:var(--sans);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);padding:0 8px 0 10px}
.st-seg button,.st-seg2 button{all:unset;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill)}
.st-seg button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.st-switch,.st-check{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;color:var(--ink-soft);cursor:pointer}
.st-switch input,.st-check input{width:18px;height:18px;accent-color:var(--clay);margin:0}

.st-main{max-width:860px;margin:0 auto;padding:4px 16px 48px;outline:none}
.st-small{font-family:var(--sans);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 4px}
.st-muted{font-style:italic;color:var(--ink-mute);font-size:16.5px;line-height:1.5;margin:4px 0 10px}
.st-note{background:var(--cream-soft);border-left:3px solid var(--sand);padding:10px 14px;font-size:16.5px;line-height:1.5;color:var(--ink-soft);margin:12px 0}
.st-hint{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-mute);margin:8px 0 0}
.st-crumb{font-family:var(--sans);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;margin:18px 0 0}
.st-crumb a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid var(--ink-faint)}
.st-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.st-row.end{justify-content:flex-end;margin-top:22px}
.st-warn{color:#9a4f2c!important}

/* Hero */
.st-hero{padding:24px 0 6px}
.st-hero.small{padding-top:16px}
.st-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--clay);margin:0 0 8px}
.st-hero h1{font-weight:400;font-size:clamp(36px,8vw,58px);line-height:1.04;margin:0 0 12px}
.st-hero.small h1{font-size:clamp(32px,6vw,46px)}
.st-hero h1 em{font-style:italic;font-weight:300}
.st-lede{font-style:italic;font-weight:300;font-size:clamp(18px,2.6vw,21px);line-height:1.5;color:var(--ink-soft);margin:0 0 12px;max-width:48ch}

/* Buttons */
.st-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;border:1px solid var(--ink);text-decoration:none;text-align:center}
.st-btn.ink,.st-btn:hover{background:var(--ink);color:var(--cream)}
.st-btn.quiet{border-color:var(--ink-faint)}
.st-btn.quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.st-btn.small{min-height:38px;padding:0 14px;font-size:10.5px}
.st-btn:disabled{opacity:.4;cursor:not-allowed}
.st-btn:focus-visible,.st-play:focus-visible,.st-link:focus-visible,.st-nb:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.st-link{all:unset;cursor:pointer;font-style:italic;font-size:16.5px;border-bottom:1px solid var(--ink-faint);line-height:1.3}
.st-link:hover{color:var(--clay)}
.st-play{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px 0 12px;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--ink-faint);border-radius:var(--r-pill);background:var(--paper);white-space:nowrap}
.st-play::before{content:"";border-left:8px solid var(--clay);border-top:5px solid transparent;border-bottom:5px solid transparent}
.st-play:hover{border-color:var(--ink)}
.st-play.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* Set bar and instrument cards */
.st-setbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin:10px 0 4px;padding:14px 0;border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint)}
.st-grid{display:grid;gap:12px;margin:16px 0 0}
@media (min-width:640px){.st-grid{grid-template-columns:1fr 1fr}}
.st-inst{background:var(--paper);border:1px solid var(--shell);border-top:4px solid var(--sc);padding:14px 16px 16px}
.st-inst.off{opacity:.45}
.st-inst-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.st-inst h3{font-weight:400;font-size:25px;line-height:1.1;margin:0 0 6px}
.st-inst .st-link{font-size:15px}
.st-offnote{font-family:var(--sans);font-size:12px;color:var(--ink-mute);margin:10px 0 0}
.st-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.st-badge{font-family:var(--sans);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;background:var(--cream-deep);color:var(--ink-soft);padding:4px 9px;border-radius:var(--r-pill)}
.st-badge.quiet{background:var(--cream-soft);color:var(--ink-mute)}
.st-badge.warn{background:#F1DCCB;color:#8a4526}
.st-notes{display:flex;flex-wrap:wrap;gap:6px}
.st-nb{all:unset;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.st-nb i{font-family:var(--sans);font-style:normal;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute)}
.st-nb:active .st-n{transform:scale(0.92)}
.st-n{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--sc);background:var(--paper);display:inline-flex;align-items:baseline;justify-content:center;padding-top:9px;font-family:var(--mono);font-size:14px;line-height:1;transition:transform 120ms;flex:0 0 auto}
.st-n small{font-size:9px;color:var(--ink-mute);margin-left:1px}
.st-n.home{background:var(--sc);color:var(--cream)}
.st-n.home small{color:var(--cream)}
.st-addrow{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.st-empty{background:var(--paper);border:1px dashed var(--ink-faint);padding:22px 18px;margin:16px 0 0}
.st-empty p{margin:0 0 6px;font-size:20px}
.st-lock{background:var(--cream-soft);border:1px solid var(--shell);border-left:4px solid var(--clay);padding:14px 16px;margin:16px 0 0;width:100%}
.st-lock.warn{border-left-color:#9a4f2c}
.st-lock p{font-size:16.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
.st-lock p:last-child{margin:0}
.st-lock b{font-weight:500;color:var(--ink)}

/* Lists */
.st-sec{padding:22px 0 8px;border-top:1px solid var(--ink-faint);margin-top:22px}
.st-sec h2{font-weight:400;font-size:clamp(25px,4.6vw,31px);line-height:1.15;margin:0 0 6px}
.st-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--ink-faint)}
.st-list>li{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;padding:12px 2px;border-bottom:1px solid var(--ink-faint)}
.st-list>li>span:first-child small,.st-list.combo>li>span:nth-child(2) small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-mute);margin-top:3px}
.st-list b{font-weight:500}
.st-list.combo>li{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.st-list.combo>li>span:nth-child(2){font-size:17px;line-height:1.35;min-width:0}
.st-list.tight{border-top:0}
.st-pair{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}
.st-arrow{font-family:var(--sans);color:var(--ink-mute);font-size:14px;padding:0 2px}
.st-plain{font-style:italic;color:var(--ink-soft)}
@media (max-width:480px){
  .st-list.combo>li{grid-template-columns:1fr auto;grid-template-areas:"n p" "t t"}
  .st-list.combo>li>span:first-child{grid-area:n}
  .st-list.combo>li>span:nth-child(2){grid-area:t}
  .st-list.combo>li>.st-play{grid-area:p}
}
.st-cat{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);vertical-align:2px}
.st-cat.calm{background:#DCE3EA;color:#3E5266}
.st-cat.warm{background:#F0E0C4;color:#7A5A22}
.st-cat.tension{background:#F1D3C4;color:#8a4526}
.st-legend{font-size:15px}

/* Home card */
.st-home{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;background:var(--paper);border:1px solid var(--shell);border-left:4px solid var(--sand);padding:16px 18px;margin:12px 0 0}
.st-big{font-size:68px;line-height:0.9;margin:0;font-weight:400}
.st-home-t p{margin:0 0 6px;font-size:19px}
.st-home-t .st-muted{font-size:15.5px}
.st-home .st-row{margin-top:10px}
@media (max-width:480px){.st-home{grid-template-columns:1fr}.st-big{font-size:56px}}

/* Filters */
.st-filters{display:flex;flex-direction:column;gap:12px;margin:10px 0 6px}
.st-seg2{display:inline-flex;border:1px solid var(--ink-faint);border-radius:var(--r-pill);padding:3px;align-self:flex-start;flex-wrap:wrap}
.st-seg2 button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-fc{all:unset;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-pill);border:1px solid var(--ink-faint);background:var(--paper)}
.st-fc small{color:var(--ink-mute);margin-left:3px}
.st-fc[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.st-fc[aria-pressed=true] small{color:var(--cream)}

/* Forms */
.st-form{margin:12px 0 0;max-width:620px}
.st-field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.st-field>span{font-family:var(--sans);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute)}
.st-field>span i{font-style:normal;letter-spacing:0.04em;text-transform:none}
.st-field.inline{margin:0;flex:1 1 220px}
.st-field input,.st-field select,.st-field textarea,.st-rows select,.st-hz input{font-size:18px;background:var(--paper);border:0;border-bottom:1px solid var(--ink-faint);border-radius:0;padding:10px 12px;width:100%}
.st-field textarea{font-size:16px;resize:vertical}
.st-field input:focus,.st-field select:focus,.st-field textarea:focus,.st-rows select:focus,.st-hz input:focus{outline:none;border-bottom-color:var(--ink)}
.st-types{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.st-types legend{margin-bottom:8px}
.st-types label{cursor:pointer}
.st-types input{position:absolute;opacity:0}
.st-types span{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:0.06em;padding:9px 13px;border:1px solid var(--ink-faint);border-left:4px solid var(--sc);background:var(--paper)}
.st-types input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink);border-left-color:var(--sc)}
.st-types input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.st-rows{list-style:none;margin:0 0 10px;padding:0}
.st-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 0;border-bottom:1px solid var(--shell)}
.st-rows select{width:auto;min-width:72px;padding:8px 10px}
.st-hz{display:inline-flex;align-items:center;gap:6px}
.st-hz input{width:120px}
.st-hz span{font-family:var(--sans);font-size:12px;color:var(--ink-mute)}
.st-ding{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:12px;color:var(--ink-mute)}
.st-read{font-family:var(--mono);font-size:12px;color:var(--clay);flex:1 1 120px}
.st-x{all:unset;cursor:pointer;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink-mute)}
.st-x:hover{color:var(--ink)}

/* Planner */
.st-durs{margin:6px 0 14px}
.st-durs .st-btn{flex:1 1 70px;padding:0 10px}
.st-planhead{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:flex-end;justify-content:space-between;margin:12px 0}
.st-planhead .st-muted{margin:0}
.st-timeline,.st-ghost{display:flex;gap:2px;height:30px;margin:6px 0 14px}
.st-timeline span,.st-ghost span{background:var(--sc);display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.st-timeline small{font-family:var(--mono);font-size:11px;color:var(--cream)}
.st-ghost span{font-family:var(--sans);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--cream);opacity:.55}
.st-phases{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.st-phase{background:var(--paper);border:1px solid var(--shell);border-left:5px solid var(--sc);padding:14px 16px 16px;break-inside:avoid}
.st-phase-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.st-phase h3{font-weight:400;font-size:28px;line-height:1.05;margin:0}
.st-min{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--sans);font-size:12px;color:var(--ink-mute)}
.st-min input{width:58px;font-family:var(--mono);font-size:18px;text-align:center;background:var(--cream);border:1px solid var(--shell);padding:6px 4px}
.st-idea{font-size:18px;line-height:1.5;margin:8px 0 6px}
.st-hints{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 12px}
.st-hints div{min-width:120px}
.st-hints dt{font-family:var(--sans);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
.st-hints dd{margin:2px 0 0;font-style:italic;font-size:16px;color:var(--ink-soft)}
.st-phase .st-field{margin:0 0 8px}
.st-locked{background:var(--paper);border:1px solid var(--shell);padding:18px;margin:10px 0 0}
.st-locked p{font-size:17.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 12px}
.st-locked b{font-weight:500;color:var(--ink)}

.st-foot{border-top:1px solid var(--ink-faint);padding:18px 16px 30px;text-align:center;font-family:var(--sans);font-size:12px;color:var(--ink-mute)}
.st-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--cream);font-size:16px;padding:10px 16px;max-width:calc(100% - 32px);transition:opacity 200ms,transform 200ms;z-index:40}
.st-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Print: the plan only, black on white. */
@media print{
  body{background:#fff}
  .st-head,.st-bar,.st-foot,.st-durs,.noprint,.st-play,.st-link,.st-hero .st-lede,.st-toast{display:none!important}
  .st-main{max-width:none;padding:0}
  .st-phase{border:1px solid #bbb;border-left:5px solid var(--sc);background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .st-timeline span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .st-phase textarea{border:0;padding:0;background:#fff}
  .st-phase textarea:placeholder-shown{display:none}
  .st-min input{border:0;background:#fff}
}