/* mtk.css - shared styles for the music tools (assets/music/tools/mtk.js). Site tokens only (brainlag.css): light and
   dark come from the tokens. Every control is at least 44 px. */
.mt-panel{padding:22px 24px 24px}
@media (max-width:600px){.mt-panel{padding:16px 14px 18px}}
.mt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 36px}
@media (min-width:900px){.mt-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.mt-h2{font-size:17px;margin:0 0 10px}
.mt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.mt-row label{margin:0;font-size:14.5px;font-weight:600}
.mt-row select,.mt-row input[type="number"],.mt-row input[type="text"]{min-height:44px}
.mt-row input[type="number"]{width:7ch;flex:none;text-align:center}
.mt-row select{width:auto;max-width:100%;background-color:var(--surface);border:2px solid var(--rule-2);border-radius:var(--r1);padding-block:9px;padding-inline-start:14px;color:var(--ink)}   /* the site's .select look */
.mt-row select:focus{border-color:var(--blue)}
.mt-note{margin:8px 0 0;font-size:14px;color:var(--ink-3)}
.mt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-big{font:700 clamp(56px,14vw,96px)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:center}
.mt-sub{text-align:center;font:600 18px var(--f-display);color:var(--study-ink);min-height:1.3em;margin:6px 0 0}
.mt-btn{min-height:52px;font-size:17px;border-radius:14px}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px}
.mt-chips button{min-height:44px;min-width:44px;padding:0 12px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--ink);font:600 15px var(--f-body);cursor:pointer}
.mt-chips button:hover{border-color:var(--blue)}
.mt-chips button[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint)}
.mt-chips button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
/* the keyboard: real buttons; it scrolls sideways on a narrow screen so no key is under 44 px */
.mtk-kb-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.mtk-kb{position:relative;display:grid;grid-template-columns:repeat(var(--whites),minmax(44px,1fr));height:168px;min-width:calc(var(--whites) * 44px)}
.mtk-key{border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font:inherit}
.mtk-key.wht{grid-row:1;grid-column:calc(var(--i) + 1);background:#fff;border:1.5px solid #9fb0c4;border-radius:0 0 10px 10px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;color:#5b6b80}
.mtk-key.blk{position:absolute;top:0;z-index:2;height:62%;width:calc(100% / var(--whites) * .62);min-width:28px;left:calc(100% / var(--whites) * var(--at) - (100% / var(--whites) * .31));background:#1d2a3c;border-radius:0 0 8px 8px;border:1.5px solid #0e1622}
@media (max-width:520px){.mtk-key.blk{min-width:30px}}
.mtk-key.wht.on,.mtk-key.wht.hit{background:var(--study-tint);border-color:var(--study)}
.mtk-key.blk.on,.mtk-key.blk.hit{background:var(--study);border-color:var(--study-ink)}
.mtk-key.wht.in{box-shadow:inset 0 -6px 0 var(--study)}
.mtk-key.blk.in{box-shadow:inset 0 -6px 0 var(--study-tint)}
.mtk-key:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:3}
.mtk-c{font:700 12px var(--f-body);pointer-events:none}
:root[data-theme="dark"] .mtk-key.wht{background:#e9eef5;border-color:#3d4f68}
/* stave sheets: white paper with ink in both themes (as music pages) */
.mt-sheet{background:#fff;border-radius:14px;padding:6px 8px;min-height:120px;color:#14243a}
@media (prefers-reduced-motion:reduce){.mtk-key{transition:none}}