/* Soltani Music School website alignment for Quill. Load after style.css. */
:root{--sms-paper:#f3f3f3;--sms-card:#fff;--sms-ink:#111111;--sms-muted:#5a5a5a;--sms-line:#e3e3e3;--sms-red:#990814;--sms-button-ink:#fff;--sms-display:"casablanca-urw","Casablanca URW","Palatino Linotype",Palatino,Georgia,serif}
body{background:var(--sms-paper);color:var(--sms-ink)}
html{-webkit-text-size-adjust:100%}button,a,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#chrome{background:color-mix(in srgb,var(--sms-paper) 95%,transparent);box-shadow:0 1px 0 var(--sms-line)}
#topbar{min-height:78px;padding:12px 24px;background:var(--sms-paper);border-bottom:1px solid var(--sms-line)}
.logo{color:var(--sms-ink);text-transform:uppercase;letter-spacing:.14em;font-size:16px}
.logo b{color:var(--sms-red);letter-spacing:.12em;font-family:var(--sms-display);font-weight:500}.logo .tag{color:var(--sms-muted);font-style:normal;letter-spacing:.08em;text-transform:none}
.floatpanel h1,.floatpanel h2,.floatpanel h3,#help h2,#help h3,#standtitle{font-family:var(--sms-display);font-weight:500}
.filebtns button{background:transparent;color:var(--sms-ink);border:1px solid var(--sms-line);border-radius:3px}.filebtns button:hover{background:var(--sms-card);border-color:#cccccc}
#newbtn,#savebtn{background:var(--sms-red);color:#fff;border-color:var(--sms-red)}
#toolbar,#toolbar2{background:var(--sms-paper);gap:7px}#toolbar2{border-bottom:1px solid var(--sms-line)}
.grp{background:var(--sms-card);border:1px solid var(--sms-line);border-radius:4px}
#toolbar button,#toolbar select,#toolbar input,#toolbar2 button,#toolbar2 select,#toolbar2 input{color:var(--sms-ink);border-radius:2px}
#toolbar button:hover,#toolbar2 button:hover{background:#ececec}
#toolbar button.on,#toolbar2 button.on,#loopbtn.on,#clickbtn.on{background:var(--sms-red);color:#fff}.tempo{color:var(--sms-muted)}
#scorewrap{background:var(--sms-paper)}#sheet{border-radius:2px;box-shadow:0 2px 6px #21181118}
.floatpanel{background:var(--sms-card);color:var(--sms-ink);border:1px solid var(--sms-line);border-radius:4px;box-shadow:0 3px 12px #21181124}
.mxtitle button,.mxrow button,.sprow button{background:#ececec;color:var(--sms-ink);border-radius:2px}
#status{color:#fff;background:#111111e8;border-radius:3px}#toast{border-radius:3px;background:var(--sms-red)}
#help .card{border-radius:4px}#piano{background:#111111;border-top-color:#000}
@media(max-width:760px){#topbar{min-height:calc(66px + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))}.logo{font-size:15px}.filebtns button{border-radius:2px}#toolbar select,#toolbar input,#toolbar2 select,#toolbar2 input{font-size:16px}.grp.modes{background:#111111;border:0}#sheet{border-radius:0}}
@media(prefers-color-scheme:dark){:root{--sms-paper:#0e0e0e;--sms-card:#151515;--sms-ink:#f4f4f4;--sms-muted:#b4b4b4;--sms-line:#2b2b2b;color-scheme:dark}.filebtns button{background:#151515}.filebtns button:hover,#toolbar button:hover,#toolbar2 button:hover,.mxtitle button,.mxrow button,.sprow button{background:#202020}.grp{background:#151515}#chrome{box-shadow:0 1px 0 #2b2b2b}#scorewrap{background:#0e0e0e}}
:root[data-color-mode="light"]{--sms-paper:#f3f3f3;--sms-card:#fff;--sms-ink:#111111;--sms-muted:#5a5a5a;--sms-line:#e3e3e3;color-scheme:light}:root[data-color-mode="dark"]{--sms-paper:#0e0e0e;--sms-card:#151515;--sms-ink:#f4f4f4;--sms-muted:#b4b4b4;--sms-line:#2b2b2b;color-scheme:dark}:root[data-color-mode="dark"] .filebtns button{background:#151515}:root[data-color-mode="dark"] .filebtns button:hover,:root[data-color-mode="dark"] #toolbar button:hover,:root[data-color-mode="dark"] #toolbar2 button:hover,:root[data-color-mode="dark"] .mxtitle button,:root[data-color-mode="dark"] .mxrow button,:root[data-color-mode="dark"] .sprow button{background:#202020}:root[data-color-mode="dark"] .grp{background:#151515}:root[data-color-mode="dark"] #scorewrap{background:#0e0e0e}#themebtn{min-width:50px;font-size:10px;letter-spacing:.08em}

/* Session-only room palettes. These change app chrome, never score data or controls. */
:root[data-room-theme="debussy"]{--sms-paper:#acc7d4;--sms-card:#d6e2e8;--sms-ink:#25323a;--sms-muted:#435762;--sms-line:#7897a6;--sms-red:#325a7d;--sms-button-ink:#fff;color-scheme:light}
:root[data-room-theme="tchaikovsky"]{--sms-paper:#325a7d;--sms-card:#284966;--sms-ink:#fff;--sms-muted:#d2e0eb;--sms-line:#6e89a2;--sms-red:#c9a227;--sms-button-ink:#251f12;color-scheme:dark}
:root[data-room-theme="bach"]{--sms-paper:#734450;--sms-card:#603844;--sms-ink:#fff;--sms-muted:#ead9dd;--sms-line:#a47984;--sms-red:#c9a227;--sms-button-ink:#251f12;color-scheme:dark}
:root[data-room-theme="mozart"]{--sms-paper:#a6443d;--sms-card:#8e3934;--sms-ink:#fff;--sms-muted:#f2d8d5;--sms-line:#cf7770;--sms-red:#c9a227;--sms-button-ink:#251f12;color-scheme:dark}
:root[data-room-theme="beethoven"]{--sms-paper:#e6b271;--sms-card:#f0c993;--sms-ink:#30251d;--sms-muted:#624d3b;--sms-line:#b8824d;--sms-red:#0b6b53;--sms-button-ink:#fff;color-scheme:light}
:root[data-room-theme="beatles"]{--sms-paper:#6b4a31;--sms-card:#583d29;--sms-ink:#fff;--sms-muted:#e6d9ce;--sms-line:#9b7a5e;--sms-red:#a3ac88;--sms-button-ink:#243021;color-scheme:dark}
:root[data-room-theme="gershwin"]{--sms-paper:#eae0c4;--sms-card:#f6f0df;--sms-ink:#282820;--sms-muted:#59594c;--sms-line:#b8ae91;--sms-red:#0b412e;--sms-button-ink:#fff;color-scheme:light}
:root[data-room-theme] .filebtns button,:root[data-room-theme] .grp{background:var(--sms-card);color:var(--sms-ink);border-color:var(--sms-line)}
:root[data-room-theme] #newbtn,:root[data-room-theme] #savebtn,:root[data-room-theme] #toolbar button.on,:root[data-room-theme] #toolbar2 button.on,:root[data-room-theme] #loopbtn.on,:root[data-room-theme] #clickbtn.on{background:var(--sms-red);border-color:var(--sms-red);color:var(--sms-button-ink)}
:root[data-room-theme] #chrome,:root[data-room-theme] #scorewrap{background:var(--sms-paper)}
:root[data-room-theme] .logo b{-webkit-text-fill-color:var(--sms-red);background:none;color:var(--sms-red)}
:root[data-room-theme] #caret{background:var(--sms-red)}
:root[data-room-theme] #lyricbox{border-color:var(--sms-red)}
:root[data-room-theme] body.inkmode #sheet{box-shadow:0 0 0 3px var(--sms-red),0 12px 40px rgba(0,0,0,.5)}
:root[data-room-theme] .mxrow input[type=range],:root[data-room-theme] .pctwrap input[type=range]{accent-color:var(--sms-red)}
:root[data-room-theme] .mxrow button.on,
:root[data-room-theme] #colorbtn.on,
:root[data-room-theme] #namesbtn.on,
:root[data-room-theme] #darkbtn.on,
:root[data-room-theme] #speakbtn.on,
:root[data-room-theme] .wzgo,
:root[data-room-theme] #tournext,
:root[data-room-theme] #standplay,
:root[data-room-theme] #installbtn,
:root[data-room-theme] #installclose,
:root[data-room-theme] #padrow button.on,
:root[data-room-theme] #micgo{
  border-color:var(--sms-red)!important;
  color:var(--sms-button-ink)!important;
  background:var(--sms-red)!important;
}
:root[data-room-theme] .tourglow{box-shadow:0 0 0 3px var(--sms-red),0 0 18px color-mix(in srgb,var(--sms-red) 65%,transparent)!important}
:root[data-room-theme] svg#score .ev.playing text.mus,
:root[data-room-theme] svg#score .ev.playing text.head{fill:var(--sms-red)}
:root[data-room-theme] svg#score .ev.playing{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--sms-red) 75%,transparent))}
:root[data-room-theme] #toast{color:var(--sms-button-ink)}
#roomThemeBtn{display:inline-grid;place-items:center;min-width:38px;padding-inline:9px}
#roomThemeBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.room-theme-menu{position:fixed;z-index:10020;top:max(70px,calc(env(safe-area-inset-top,0px) + 62px));right:max(12px,env(safe-area-inset-right,0px));display:grid;width:184px;padding:7px;background:var(--sms-card);border:1px solid var(--sms-line);border-radius:4px;box-shadow:0 16px 38px #21181138;color:var(--sms-ink)}
.room-theme-menu[hidden]{display:none}.filebtns .room-theme-option{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:9px;min-height:40px;padding:7px 9px;border:0;text-align:left;font:inherit;color:var(--sms-ink);background:transparent}.filebtns .room-theme-option:hover,.filebtns .room-theme-option:focus-visible,.filebtns .room-theme-option[aria-checked="true"]{background:var(--sms-red);color:var(--sms-button-ink)}.room-theme-swatch{width:14px;height:14px;border:1px solid #21181138;border-radius:50%}
@media(max-width:760px){#roomThemeBtn{min-width:38px}.room-theme-menu{top:max(62px,calc(env(safe-area-inset-top,0px) + 54px));right:max(8px,env(safe-area-inset-right,0px));width:176px}.filebtns .room-theme-option{min-height:44px}}

/* Calm, clearly separated tool groups without changing any tool or its order. */
#toolbar,#toolbar2{gap:10px}
#toolbar .grp,#toolbar2 .grp{position:relative;background:transparent;border:0;border-left:1px solid var(--sms-line);border-radius:0;padding-left:10px;box-shadow:none}
#toolbar .grp:first-child,#toolbar2 .grp:first-child{border-left:0;padding-left:0}
#toolbar .grp[data-cap]::before,#toolbar2 .grp[data-cap]::before{color:var(--sms-muted);font-size:8px;font-weight:600;letter-spacing:.12em;opacity:.82}
body,#chrome,#topbar,#toolbar,#toolbar2,#scorewrap,.grp,.filebtns button,.floatpanel,.room-theme-menu{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
@media(prefers-reduced-motion:reduce){body,#chrome,#topbar,#toolbar,#toolbar2,#scorewrap,.grp,.filebtns button,.floatpanel,.room-theme-menu{transition:none}}
@media(max-width:760px){#toolbar .grp,#toolbar2 .grp{padding-left:7px}#toolbar,#toolbar2{gap:7px}}

/* ---- readability repairs -------------------------------------------------
   Two things the theme changed had no matching text colour, so they came out
   invisible on the live site. Verified with a contrast check before and after.

   1. The pop-up sheets (start, add-notes, settings, mic, install) keep their
      own dark surface from style.css, but their text was inheriting the
      page's near-black ink from `body` - black on near-black, 1.09:1.
      They are always dark, whatever palette is picked, so they get a fixed
      light ink rather than a themed one.
   (The Add-notes button looked broken to an automated contrast check, but it
   is fine: its red fill is a gradient, and a gradient is a background IMAGE,
   so background-color correctly reads as transparent.) */
#startsheet .card,#addsheet .card,#setsheet .card,#micsheet .card,#installsheet .card{color:#e8e6df}
#startsheet .card h3,#addsheet .card h3,#setsheet .card h3,#micsheet .card h3,#installsheet .card h3{color:#f4f2ec}


/* Poppins is the school's secondary typeface (Ali, 2026-08-26 - it replaced
   Josefin Sans). Casablanca stays on the logo and panel headings above.
   Music fonts (Leland, Petaluma, Bravura) are untouched - they are notation,
   not UI. */
:root{--sms-body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* UI chrome only. The <svg id="score"> text keeps Leland / Petaluma /
   Bravura from style.css - those are notation glyphs, not UI text. */
body,button,input,select,textarea{font-family:var(--sms-body)}