/* Salon: 1200px = 820px stage + 40px gutter + 340px programme.
   Warm, flat surfaces; the record sleeve and programme supply the identity. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Jost:wght@400;500;600&display=swap');
/* The host enforces Unbounded on every descendant; the Salon owns its typography. */
body.music-room-page #listeningRoom[data-visual=classical-salon] *{font-family:Jost,system-ui,sans-serif!important}
body.music-room-page #listeningRoom[data-visual=classical-salon] :is(.atlas-room-brand,.atlas-room-title,.salon-invitation,.salon-panel-title,.atlas-room-queue-head h2,.atlas-room-lyric-line,.now-lyric-current){font-family:'Bodoni Moda',Georgia,serif!important}
html body.music-room-page #listeningRoom[data-visual=classical-salon] .atlas-room-details{background:transparent!important}
html[data-music-palette] body.music-room-page dialog.listening-room[data-visual=classical-salon],
body.music-room-page dialog.listening-room[data-visual=classical-salon]{
  --salon-ground:#171411;--salon-surface:#211d18;--salon-ink:#eee5d5;--salon-muted:#bcb09f;--salon-rule:#514536;--salon-accent:#c7ad7d;
  --atlas-room-muted:var(--salon-muted);--atlas-room-rule:var(--salon-rule);
  background:var(--salon-ground)!important;color:var(--salon-ink);padding:24px 40px 18px;font:400 15px/1.5 Jost,system-ui,sans-serif;overflow:auto;
}
body.music-room-page dialog[data-visual=classical-salon][data-salon-scene=chamber]{--salon-ground:#191311;--salon-surface:#261c19;--salon-rule:#59453d;--salon-accent:#c7a98a}
body.music-room-page dialog[data-visual=classical-salon][data-salon-scene=gallery]{--salon-ground:#171a17;--salon-surface:#20251f;--salon-rule:#485043;--salon-accent:#bac1a2}
dialog[data-visual=classical-salon] :is(button,input,select,textarea){font-family:Jost,system-ui,sans-serif;letter-spacing:normal}
dialog[data-visual=classical-salon] button{font-size:14px;min-height:44px;border-radius:2px;padding:8px 12px}
dialog[data-visual=classical-salon] button:hover{background:var(--salon-surface)}
dialog[data-visual=classical-salon] :is(button,input,select,textarea,a):focus-visible{outline:2px solid var(--salon-accent);outline-offset:4px}
dialog[data-visual=classical-salon] .atlas-room-header{width:100%;max-width:1200px;margin:0 auto;padding:0 0 16px;border-bottom:1px solid var(--salon-rule);flex-wrap:nowrap;gap:16px}
dialog[data-visual=classical-salon] .atlas-room-brand{font:400 28px/1.2 'Bodoni Moda',Georgia,serif;letter-spacing:.04em;text-transform:none}
dialog[data-visual=classical-salon] .atlas-room-header h1{font:400 12px/1.5 Jost,sans-serif;color:var(--salon-muted);margin-top:4px}
html[data-music-palette] body.music-room-page dialog[data-visual=classical-salon] .atlas-room-tools{display:flex;width:auto;flex-wrap:wrap;gap:8px}
dialog[data-visual=classical-salon] .atlas-room-tools button{color:var(--salon-ink);font-size:13px}
dialog[data-visual=classical-salon] .atlas-room-close{border-color:var(--salon-rule)}
dialog[data-visual=classical-salon] .atlas-room-details-toggle{display:none}
dialog[data-visual=classical-salon] .room-appearance-button{border-color:var(--salon-rule)!important;border-radius:2px!important}
.salon-toolbar{display:flex;align-items:center;gap:32px;width:100%;max-width:1200px;margin:22px auto 26px}
.salon-intro{margin-right:auto}.salon-eyebrow{font:500 10px/1.5 Jost,sans-serif;letter-spacing:.17em;color:var(--salon-accent);margin:0 0 5px}
.salon-invitation{font:400 22px/1.45 'Bodoni Moda',Georgia,serif;margin:0;color:var(--salon-ink)}
.salon-scene-field,.salon-timer-field{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--salon-muted)}
dialog[data-visual=classical-salon] select{max-width:100%;background:var(--salon-surface);color:var(--salon-ink);border:1px solid var(--salon-rule);border-radius:2px;min-height:44px;font-size:13px;padding:7px 28px 7px 10px}
.salon-views{display:flex;gap:2px;border-bottom:1px solid var(--salon-rule)}
dialog[data-visual=classical-salon] .salon-views button{border-bottom:2px solid transparent;color:var(--salon-muted);white-space:nowrap}
dialog[data-visual=classical-salon] .salon-views button[aria-pressed=true]{color:var(--salon-ink);border-bottom-color:var(--salon-ink)}
dialog[data-visual=classical-salon] .atlas-room-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;max-width:1200px;min-height:0;flex:1;align-items:stretch;margin:0 auto;width:100%}
dialog[data-visual=classical-salon] .atlas-room-stage{background:transparent!important;border:0;border-radius:0;padding:0!important;max-width:none;width:100%;height:auto!important;min-height:0!important;align-self:stretch;overflow:visible}
dialog[data-visual=classical-salon] .atlas-room-glass{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;isolation:isolate;background:transparent!important;backdrop-filter:none;padding:0 32px!important;border:0;border-radius:0;width:100%;height:auto;min-height:100%;text-align:center;gap:0}
dialog[data-visual=classical-salon] .atlas-room-glass::before,dialog[data-visual=classical-salon] .atlas-room-glass::after{display:none}
.salon-artwork{margin:0 0 16px;width:min(100%,340px,39dvh)}
.salon-art-frame{padding:12px;border:1px solid var(--salon-rule);background:var(--salon-surface)}
.salon-cover{width:100%;aspect-ratio:1;background-size:cover!important;background-position:center!important}
.salon-art-caption{font-size:11px;line-height:1.5;color:var(--salon-muted);margin-top:10px}
.salon-painting{display:none;max-width:100%;margin:0 0 16px;width:min(100%,340px,39dvh)}
.salon-painting img{display:block;width:100%;height:min(34dvh,320px);object-fit:contain;padding:10px;background:var(--salon-surface);border:1px solid var(--salon-rule)}
.salon-painting-credit{margin-top:10px;color:var(--salon-muted);font-size:10px;line-height:1.6}
dialog[data-visual=classical-salon] .salon-painting-credit a{font:inherit;color:inherit;text-decoration:none}.salon-painting-credit span{display:block}
dialog[data-visual=classical-salon][data-salon-scene=gallery][data-salon-mode=artwork] .salon-artwork{display:none}
dialog[data-visual=classical-salon][data-salon-scene=gallery][data-salon-mode=artwork] .salon-painting{display:block}
dialog[data-visual=classical-salon] .atlas-room-context{font:400 11px/1.5 Jost,sans-serif;color:var(--salon-muted);margin:0 0 6px;grid-area:auto}
dialog[data-visual=classical-salon] .atlas-room-title{font:400 clamp(26px,2.5vw,38px)/1.25 'Bodoni Moda',Georgia,serif;letter-spacing:-.02em;color:var(--salon-ink);text-align:center;margin:0 0 6px;grid-area:auto;max-height:none;display:block;overflow:visible;overflow-wrap:anywhere}
dialog[data-visual=classical-salon] .atlas-room-artist{font:400 14px/1.5 Jost,sans-serif;color:var(--salon-muted);text-align:center;margin:0 0 14px;grid-area:auto}
dialog[data-visual=classical-salon] .atlas-room-seek{order:5;grid-area:auto;width:min(100%,480px);max-width:480px;margin:0 auto}
dialog[data-visual=classical-salon] .atlas-room-seek input{accent-color:var(--salon-accent);margin:0;height:26px}
dialog[data-visual=classical-salon] .atlas-room-clock{color:var(--salon-muted);font:400 11px/1.4 Jost,sans-serif}
dialog[data-visual=classical-salon] .atlas-room-transport{order:4;grid-area:auto;display:flex;gap:18px;margin:0 0 10px;opacity:1;align-self:center}
dialog[data-visual=classical-salon] .atlas-room-transport button{width:44px;height:44px;padding:12px;display:grid;place-items:center;border-radius:50%;color:var(--salon-ink)}
dialog[data-visual=classical-salon] .atlas-room-transport button:first-child{display:block;width:auto;min-width:44px;font-size:12px}
html[data-music-palette] body.music-room-page dialog[data-visual=classical-salon] .atlas-room-transport .atlas-room-play,
body.music-room-page dialog[data-visual=classical-salon] .atlas-room-transport .atlas-room-play{background:var(--salon-ink)!important;color:var(--salon-ground)!important;min-width:48px;width:48px;height:48px;border-radius:50%;border:0}
dialog[data-visual=classical-salon] .atlas-room-volume{display:flex!important;order:6;grid-area:auto;gap:12px;margin:8px auto 0;width:240px;max-width:100%;font-size:11px;color:var(--salon-muted)}
dialog[data-visual=classical-salon] .atlas-room-volume input{min-width:0;flex:1;width:100px;accent-color:var(--salon-accent);height:30px}
dialog[data-visual=classical-salon] .atlas-room-health{order:7;grid-area:auto;font-size:12px;color:var(--salon-muted);min-height:0;margin:8px 0 0}
dialog[data-visual=classical-salon] .atlas-room-glass>button{order:8}
html[data-music-palette] body.music-room-page dialog[data-visual=classical-salon] .atlas-room-details,
dialog[data-visual=classical-salon] .atlas-room-details{background:transparent!important;backdrop-filter:none;border:0;border-left:1px solid var(--salon-rule);border-radius:0;max-height:calc(100dvh - 250px);height:auto;padding:0 0 0 24px;display:flex;min-height:280px}
dialog[data-visual=classical-salon] .atlas-room-tabs{gap:18px;margin:0 0 20px;border-color:var(--salon-rule);flex-shrink:0;flex-wrap:wrap}
dialog[data-visual=classical-salon] .atlas-room-tabs button{font-size:12px;padding:10px 0;color:var(--salon-muted);white-space:nowrap}
dialog[data-visual=classical-salon] .atlas-room-tabs button[aria-selected=true]{color:var(--salon-ink);border-bottom-color:var(--salon-ink)}
dialog[data-visual=classical-salon] [role=tabpanel]{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--salon-rule) transparent;padding-right:6px}
dialog[data-visual=classical-salon] .atlas-room-queue-head{display:block;margin:0 0 8px}.atlas-room-queue-head h2{font-family:'Bodoni Moda',Georgia,serif}
dialog[data-visual=classical-salon] .atlas-room-queue-head h2{font-size:24px;font-weight:400;margin:16px 0 3px}.atlas-room-queue-head>span{color:var(--salon-muted)}
dialog[data-visual=classical-salon] .atlas-room-queue-row{border-color:var(--salon-rule);padding:5px 0;gap:2px;flex-wrap:nowrap}
dialog[data-visual=classical-salon] .atlas-room-queue-copy strong{font:400 14px/1.45 Jost,sans-serif;color:var(--salon-ink)}
dialog[data-visual=classical-salon] .atlas-room-queue-copy small{font:400 12px/1.4 Jost,sans-serif;color:var(--salon-muted)}
dialog[data-visual=classical-salon] .atlas-room-queue-edit button{width:28px;min-width:28px;min-height:44px;padding:4px;font-size:16px}
dialog[data-visual=classical-salon] .atlas-room-queue-number{width:24px;color:var(--salon-accent);font-size:10px}
dialog[data-visual=classical-salon] .atlas-room-queue-track{gap:8px;flex-basis:auto}
dialog[data-visual=classical-salon] .atlas-room-footer{max-width:1200px;width:100%;margin:20px auto 0;padding:12px 0 0;border-top:1px solid var(--salon-rule);font:400 12px/1.5 Jost,sans-serif;color:var(--salon-muted);gap:12px;flex-shrink:0}
dialog[data-visual=classical-salon] .atlas-room-footer>span{display:block}.salon-timer-status{min-width:75px}
dialog[data-visual=classical-salon] .atlas-room-glass>.now-surface{display:none}
dialog[data-visual=classical-salon][data-salon-mode=lyrics] .salon-artwork{display:none}
dialog[data-visual=classical-salon][data-salon-mode=lyrics] .atlas-room-glass>.now-surface{display:flex;flex-direction:column;justify-content:center;align-items:center;order:3;gap:16px;min-height:280px;width:100%;margin:0 0 16px}
dialog[data-visual=classical-salon] .now-lyrics{width:100%;max-height:300px;overflow:auto}
dialog[data-visual=classical-salon] .now-lyric-current{font:400 clamp(25px,2.4vw,36px)/1.5 'Bodoni Moda',Georgia,serif;color:var(--salon-ink);letter-spacing:0;text-align:center}
dialog[data-visual=classical-salon] :is(.now-lyric-next,.now-lyric-previous){font:400 14px/1.6 Jost,sans-serif;color:var(--salon-muted);margin:8px 0}
dialog[data-visual=classical-salon] .now-wave{height:36px;width:70%}
dialog[data-visual=classical-salon] .now-lyric-tools{color:var(--salon-muted);font:400 11px/1.5 Jost,sans-serif}
dialog[data-visual=classical-salon] .atlas-room-lyric-line{font:400 25px/1.6 'Bodoni Moda',Georgia,serif;color:var(--salon-muted)}
dialog[data-visual=classical-salon] .atlas-room-lyric-line.active{color:var(--salon-ink)}
.salon-panel-title{font:400 26px/1.3 'Bodoni Moda',Georgia,serif;margin:6px 0 20px}.salon-metadata{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px 12px;font-size:13px;margin:0 0 24px}
.salon-metadata dt{color:var(--salon-muted)}.salon-metadata dd{margin:0;overflow-wrap:anywhere}.salon-note-label{display:block;font-size:13px}
dialog[data-visual=classical-salon] textarea{display:block;resize:vertical;width:100%;min-height:120px;max-height:300px;margin-top:10px;padding:12px;background:var(--salon-surface);color:var(--salon-ink);border:1px solid var(--salon-rule);border-radius:2px;font:400 14px/1.7 Jost,sans-serif}
dialog[data-visual=classical-salon] textarea::placeholder{color:var(--salon-muted)}
.salon-hint{font:400 12px/1.65 Jost,sans-serif;color:var(--salon-muted);margin:12px 0 18px}.salon-signal{font-size:12px;line-height:1.7;color:var(--salon-accent);margin-bottom:24px}
.salon-eq-field{display:grid;grid-template-columns:60px minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:13px}.salon-eq-field input{width:100%;height:40px;accent-color:var(--salon-accent)}.salon-eq-field output{text-align:right;font-size:11px;color:var(--salon-muted)}
.salon-sound-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
dialog[data-visual=classical-salon] .salon-sound-toggles button{border:1px solid var(--salon-rule);font-size:12px}
dialog[data-visual=classical-salon] .salon-sound-toggles button[aria-pressed=true]{background:var(--salon-ink);color:var(--salon-ground)}
dialog[data-visual=classical-salon] .salon-concert{border:1px solid var(--salon-rule);width:100%;margin-top:8px}
.salon-session{border-bottom:1px solid var(--salon-rule);padding-bottom:14px}.salon-session summary{font-size:13px;cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--salon-ink)}
.salon-session-fields{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.salon-session-fields select{flex:1;min-width:100px}
dialog[data-visual=classical-salon] .salon-session-fields button{border:1px solid var(--salon-rule);font-size:12px}.salon-session-preview{max-height:180px;overflow:auto;font-size:12px;color:var(--salon-muted)}.salon-session-preview p{margin:10px 0}
@media(min-width:1500px){.salon-artwork,.salon-painting{width:min(100%,400px,43dvh)}}
@media(max-width:1000px){body.music-room-page dialog.listening-room[data-visual=classical-salon]{padding:20px 24px}.salon-toolbar{gap:16px}.salon-scene-field{display:block}.salon-scene-field select{display:block}dialog[data-visual=classical-salon] .atlas-room-layout{grid-template-columns:minmax(0,1fr) 300px;gap:20px}dialog[data-visual=classical-salon] .atlas-room-glass{padding:0 10px!important}dialog[data-visual=classical-salon] .atlas-room-details{padding-left:18px}.salon-invitation{font-size:20px}dialog[data-visual=classical-salon] .atlas-room-tabs{gap:12px}}
@media(max-width:760px){
  html body.music-room-page #listeningRoom[data-visual=classical-salon]{padding:16px 18px 20px}
  dialog[data-visual=classical-salon] .atlas-room-header{flex-wrap:nowrap;align-items:center;padding-bottom:12px;gap:8px}
  dialog[data-visual=classical-salon] .atlas-room-brand{font-size:24px}
  html[data-music-palette] body.music-room-page dialog[data-visual=classical-salon] .atlas-room-tools{width:auto;gap:3px;flex-wrap:nowrap}
  dialog[data-visual=classical-salon] .atlas-room-tools button{font-size:11px;padding:6px 9px;min-height:44px}
  html body.music-room-page #listeningRoom[data-visual=classical-salon] .atlas-room-tools>button:not(.atlas-room-close):not(.atlas-room-details-toggle){display:none!important}
  dialog[data-visual=classical-salon] .atlas-room-details-toggle{display:block;border:1px solid var(--salon-rule)}
  .salon-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;margin:18px auto 20px}.salon-intro{grid-column:1/-1}.salon-invitation{font-size:21px}.salon-eyebrow{font-size:9px}.salon-scene-field{display:block;font-size:10px}.salon-scene-field select{margin-top:4px}.salon-views{align-self:end}
  dialog[data-visual=classical-salon] .salon-views button{font-size:12px;padding:8px 10px}
  dialog[data-visual=classical-salon] .atlas-room-layout{display:flex;flex-direction:column;flex:none;gap:20px}
  dialog[data-visual=classical-salon] .atlas-room-glass{padding:0!important;min-height:0}
  .salon-artwork,.salon-painting{width:min(58vw,240px);margin-bottom:14px}.salon-art-frame{padding:9px}.salon-painting img{height:240px}.salon-art-caption{font-size:10px}
  dialog[data-visual=classical-salon] .atlas-room-title{font-size:28px}
  dialog[data-visual=classical-salon] .atlas-room-artist{font-size:13px;margin-bottom:12px}
  dialog[data-visual=classical-salon] .atlas-room-context{font-size:10px}
  html[data-music-palette] body.music-room-page dialog[data-visual=classical-salon] .atlas-room-details,dialog[data-visual=classical-salon] .atlas-room-details{display:none;border-left:0;border-top:1px solid var(--salon-rule);padding:14px 0 0;max-height:none;min-height:0;width:100%}
  dialog[data-visual=classical-salon].room-details-open .atlas-room-details{display:flex}
  dialog[data-visual=classical-salon].room-details-open .atlas-room-stage{display:none}
  dialog[data-visual=classical-salon] [role=tabpanel]{max-height:60dvh}
  dialog[data-visual=classical-salon] .atlas-room-tabs{justify-content:space-between;gap:8px}
  dialog[data-visual=classical-salon] .atlas-room-footer{margin-top:18px;gap:10px;font-size:11px;justify-content:start}
  dialog[data-visual=classical-salon] .atlas-room-footer>span{width:100%;margin:0}
  dialog[data-visual=classical-salon][data-salon-mode=lyrics] .atlas-room-glass>.now-surface{min-height:210px}.salon-timer-field{font-size:11px}
}
@media(prefers-reduced-motion:reduce){dialog[data-visual=classical-salon] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}