/* Header clearance and collapsible cards shared by both language versions. */
.compass-collapsible>.card-head{align-items:center;flex-wrap:wrap}
.compass-collapse-toggle{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);font:700 23px/1 system-ui,sans-serif;cursor:pointer}
.compass-collapse-toggle:hover{border-color:var(--gold)}
.compass-collapse-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dictionary .eyebrow{display:flex;align-items:center;gap:8px}
.compass-help-button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--gold);border-radius:8px;background:var(--soft);color:var(--gold);font:700 16px/1 system-ui,sans-serif;cursor:pointer}
.compass-help-button:hover{background:var(--night2);color:var(--gold2)}
.compass-help-popup{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);font-family:inherit}
.compass-help-popup::backdrop{background:rgba(0,0,0,.25)}
.compass-help-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.compass-help-heading h2{margin:0;font-size:1rem;line-height:1.5}
.compass-help-close{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);font-size:22px;cursor:pointer}
.compass-help-popup .dict-intro{padding:0;margin-bottom:12px;font-size:.85rem;line-height:1.7}
.compass-help-popup .harmony-nuance{margin:0;padding:12px;font-size:.85rem;line-height:1.7}
.compass-collapsible.compass-collapsed>:not(.card-head){display:none!important}
.compass-collapsible.compass-collapsed{min-height:0}
.top-actions{margin-inline-end:58px}
.tone-control{position:absolute;top:18px;left:clamp(18px,4vw,56px);z-index:30}
html[dir="ltr"] .tone-control{left:auto;right:clamp(18px,4vw,56px)}
.tone-pop{left:0;right:auto}
html[dir="ltr"] .tone-pop{left:auto;right:0}
@media(min-width:1000px) and (min-height:560px){
  .topbar{height:58px;min-height:58px;padding:8px 20px;position:relative;gap:12px}
  .brand h1{font-size:1rem}.brand p{font-size:.7rem}.brand-mark,.icon-action{width:34px;height:34px;flex-basis:34px}.ghost{padding:7px 10px;font-size:.8rem}
  .tone-control{top:12px;left:20px}html[dir="ltr"] .tone-control{left:auto;right:20px}
  main{height:calc(100dvh - 58px);max-width:1800px;padding:10px 18px 8px;display:flex;flex-direction:column;gap:9px}
  .control-strip{gap:8px;margin:0;flex:none;grid-template-columns:minmax(135px,.7fr) minmax(410px,2fr) minmax(220px,1fr)}
  .control{min-height:52px;padding:6px 10px;gap:8px;border-radius:10px}.control label{font-size:.68rem;margin-bottom:2px}.control-icon{width:28px;height:28px}.control select{min-height:29px;padding:3px 6px;font-size:.8rem}.mode-picker{min-width:140px}.scale-actions{gap:5px;flex-wrap:nowrap}.scale-play,.scale-world-link,.midi-button{padding:7px 8px;font-size:.72rem}.midi-status{font-size:.7rem}
  .workspace{flex:1;min-height:0;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;align-items:stretch}
  .stack{display:flex;flex-direction:column;gap:9px;min-height:0}.stack>.card{display:flex;flex-direction:column;flex:1;min-height:0}.stack>.card:first-child{flex:1.05}.stack>.card:last-child{flex:1.15}.stack>.card[hidden]{display:none}.stack>.card.compass-collapsed{flex:none}
  .card{border-radius:12px}.compass-collapsible>.card-head{flex-wrap:nowrap;gap:8px;padding:9px 10px 6px;flex:none}.card-head>div:first-child{min-width:0}.card h2{font-size:.94rem;line-height:1.3;margin-top:2px}.eyebrow{font-size:.6rem}.sub{font-size:.68rem;line-height:1.4;margin-top:2px}.compass-collapse-toggle{width:26px;height:26px;font-size:19px;border-radius:7px}.count{font-size:.65rem;padding:4px 7px}.progress-meta{gap:6px;flex-wrap:nowrap}.steps-picker{font-size:.64rem;gap:2px}.steps-picker select{min-width:76px;min-height:27px;padding:3px 5px;font-size:.75rem}
  .progression{flex:1;min-height:0;display:flex;flex-direction:column;padding:3px 10px 9px;gap:6px}.slots{flex:1;min-height:0;gap:5px;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}.slot{min-height:0;padding:5px;border-radius:8px}.slot-num{font-size:.6rem}.slot-chord{font-size:1rem}.slot-feel{font-size:.6rem}.empty-mark{font-size:1.1rem}.progress-actions{flex:none;flex-wrap:nowrap;gap:5px;margin-top:0}.small-ghost,.play-all{font-size:.7rem;padding:6px 8px;border-radius:7px}.lab-link-label{font-size:.65rem}
  .suggestions{flex:1;min-height:0;gap:7px;padding:3px 10px 9px}.suggestion{min-height:0;padding:9px;border-radius:9px;display:flex;flex-direction:column}.sug-chord{font-size:1.15rem}.sug-degree{font-size:.65rem}.sug-title{font-size:.76rem;margin:5px 0 3px}.sug-desc{font-size:.65rem;line-height:1.4}.add-chip{margin-top:auto;padding:5px 6px;font-size:.65rem}
  .piano-wrap{flex:1;min-height:0;padding:3px 10px 10px;display:flex;flex-direction:column}.piano-shell{flex:1;min-height:0;padding:9px 10px 8px;display:flex;flex-direction:column;border-radius:10px}.piano-toolbar{flex:none;font-size:.65rem;line-height:1.4;gap:6px;margin-bottom:6px}.piano-scroll{flex:1;min-height:0}.piano{height:100%;min-height:0}.black-key{height:62%}.white-key{padding-bottom:6px;font-size:.6rem}
  .dictionary{max-height:none;min-height:0;display:flex;flex-direction:column;overflow:visible}.dictionary>.card-head{padding-bottom:8px}.dictionary .eyebrow{gap:6px}.compass-help-button{width:22px;height:22px;font-size:14px}.dictionary>.card-head>.count{display:none}
  .dict-list{flex:1;min-height:0;padding:0 8px 8px;gap:5px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--dictionary-rows,8),minmax(0,1fr))}.dict-row{min-width:0;min-height:0;padding:6px;gap:6px;grid-template-columns:28px minmax(0,1fr) auto;border:1px solid var(--line);border-radius:8px}.degree-badge{width:28px;height:28px;font-size:.65rem;border-radius:7px}.dict-title{font-size:.73rem;line-height:1.25}.dict-desc{font-size:.65rem;margin-top:3px;line-height:1.35}.dict-symbol{font-size:.82rem}
  .footer-note{flex:none;padding:0;font-size:.64rem;line-height:1.4}
}
@media(min-width:1000px) and (min-height:560px) and (max-height:800px){
  .stack .card-head .eyebrow,.stack .card-head .sub,.suggestion .sug-desc{display:none}
  .stack>.card:nth-child(2){flex:1.15}
  .suggestion{padding:7px}.sug-title{margin:5px 0;font-size:.72rem;line-height:1.25}.add-chip{padding:4px;font-size:.62rem;line-height:1.2}
  .dict-row{position:relative}.dict-title{font-size:.8rem}.dict-symbol{font-size:.9rem}
  .dict-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
  .steps-picker{display:flex;align-items:center;gap:5px}
  .slot{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;justify-content:normal;padding:2px 5px;line-height:1.1}.slot-chord{font-size:.8rem}.slot-feel,.slot>span:empty{display:none}.empty-mark{font-size:.85rem}.slot-actions{top:1px;left:1px}.slot-actions .tiny{width:18px;height:18px;font-size:12px}
}
@media(max-width:820px){
  .topbar{position:relative!important;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .brand-wrap{width:100%;padding-left:52px}
  html[dir="ltr"] .brand-wrap{padding-left:0;padding-right:52px}
  .top-actions{width:100%;margin-inline:0;justify-content:space-between;flex-wrap:wrap}
  .tone-control{position:absolute;top:14px;left:14px;z-index:30}
  html[dir="ltr"] .tone-control{left:auto;right:14px}
}
.compass-fullscreen-button{flex:none;min-height:50px;padding:10px 16px;border:2px solid #63c9ef;border-radius:13px;background:#17415e;color:#f1fbff;font:800 16px/1.25 system-ui;box-shadow:0 0 0 4px #38bdf821,0 4px 12px #0003;cursor:pointer;white-space:nowrap}
.compass-fullscreen-button:hover{background:#205578;border-color:#a3eaff}
.compass-fullscreen-button:focus-visible{outline:3px solid #b3efff;outline-offset:4px}
.progress-actions{flex-wrap:wrap!important}
.progress-actions .compass-random-button{border-color:#ad91cf;background:#49375f;color:#f0e2ff;white-space:nowrap}
html.compass-fullscreen{position:fixed;inset:0;overflow:auto;background:var(--night,#101722);z-index:9999}
@media(max-width:820px){.compass-fullscreen-button{min-height:44px;padding:8px 12px;font-size:14px}.topbar .top-actions{align-items:center}}

/* Keep the studio name and its P mark in the same order in both languages. */
.compass-studio-brand{display:flex;align-items:center;gap:8px;direction:ltr;white-space:nowrap;font:800 17px/1.2 system-ui,sans-serif;color:#eef4fc;margin-bottom:3px}
.compass-studio-brand img{display:block;width:30px;height:30px;flex:none}
@media(max-width:820px){.compass-studio-brand{font-size:15px}.compass-studio-brand img{width:26px;height:26px}}

/* Let the three title lines determine the header height instead of clipping them. */
.topbar:has(.compass-studio-brand){height:auto;min-height:94px;flex-shrink:0;padding-top:12px;padding-bottom:12px}
.topbar .brand-wrap:has(.compass-studio-brand){gap:16px;align-items:center}
.topbar .brand:has(.compass-studio-brand){min-width:0}
.topbar .brand:has(.compass-studio-brand) h1{margin:4px 0 0;line-height:1.4}
.topbar .brand:has(.compass-studio-brand) p{margin:4px 0 0;line-height:1.4}

/* A single compact title row preserves space for the workspace. */
.topbar:has(.compass-studio-brand){min-height:58px;padding-top:8px;padding-bottom:8px}
.topbar .brand:has(.compass-studio-brand)>div{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.topbar .compass-studio-brand{margin:0;flex:none}
.topbar .brand:has(.compass-studio-brand) h1{margin:0;white-space:nowrap}
.topbar .brand:has(.compass-studio-brand) p{display:none}
@media(max-width:820px){.topbar .brand-wrap:has(.compass-studio-brand){padding-left:0;padding-right:0;gap:8px}.topbar .brand:has(.compass-studio-brand)>div{gap:8px}.topbar .compass-studio-brand{font-size:13px;gap:5px}.topbar .compass-studio-brand img{width:24px;height:24px}.topbar .brand:has(.compass-studio-brand) h1{font-size:.8rem}}

/* Allocate the remaining viewport after the actual toolbar height. */
@media(min-width:1000px) and (min-height:560px){
 html{height:100%}
 body{height:100dvh;min-height:0;display:flex;flex-direction:column}
 body>main{height:auto;flex:1;min-height:0;width:100%;box-sizing:border-box}
 .topbar:has(.compass-studio-brand){flex:none}
 .progress-actions .compass-fullscreen-button{min-height:30px;padding:5px 10px;font-size:13px;box-shadow:none}
}