/* 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}   /* tuner and drone (batch 5) */
/* the shell's two button styles (_shell.php, the race card's .pl-go and .pl-link) and its chips (.pl-levels):
   one primary per screen, secondary actions as text links, choices as radiogroup tiles. Press feedback is a
   transform only, 180 ms, off under reduced motion. */
.mt-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:0 24px;border:0;border-radius:18px;background:var(--study-btn);color:var(--on-study-btn,#fff);font:800 19px var(--f-body);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .mt-go{color:var(--on-study-btn,#fff)}
.mt-go:hover{background:var(--study-btn-hover);color:var(--on-study-btn,#fff);text-decoration:none}
.mt-go:active{transform:scale(.97);background:var(--study-btn-press)}
.mt-go:disabled,.mt-go[aria-disabled="true"]{background:var(--sunk);color:var(--ink-3);cursor:default;transform:none}
:root[data-theme="dark"] :is(.mt-go:disabled,.mt-go[aria-disabled="true"]){background:#1a2c44;color:var(--ink-3)}   /* a raised tile, never a hole in the card */
.mt-go:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
@media (min-width:600px){.mt-go{width:auto;min-width:220px}}
.mt-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border:0;background:none;color:var(--study-ink);font:700 16px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.mt-link:hover{color:var(--ink)}
.mt-link:active{transform:scale(.97)}
.mt-link:disabled{color:var(--ink-3);text-decoration:none;cursor:default;transform:none}
.mt-link:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px;border-radius:8px}
.mt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 0}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px}
.mt-chips button,.mt-chip{min-height:44px;min-width:44px;padding:0 12px;border:2px solid transparent;border-radius:12px;background:var(--sunk);color:var(--ink-2);font:700 15px var(--f-body);cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .mt-chips button,:root[data-theme="dark"] .mt-chip{background:#1a2c44}
.mt-chips button:hover,.mt-chip:hover{color:var(--ink);border-color:var(--rule-2)}
.mt-chips button:active,.mt-chip:active{transform:scale(.97)}
.mt-chips button:is([aria-checked="true"],[aria-pressed="true"]),:root[data-theme="dark"] .mt-chips button:is([aria-checked="true"],[aria-pressed="true"]){background:var(--surface);border-color:var(--study);color:var(--study-ink);box-shadow:var(--shadow)}
.mt-chips button:focus-visible,.mt-chip: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}
/* a black key keeps a piano's width (about 0.62 of a white key) but its button is at least 44 px wide: 7 px of
   transparent border each side (and below) are part of the hit area, the key is drawn in the padding box. Each white
   key still has its whole lower part, 44 px wide and 64 px tall, to itself. */
.mtk-key.blk{position:absolute;top:0;z-index:2;height:calc(62% + 7px);width:max(44px,calc(100% / var(--whites) * .62 + 14px));left:calc(100% / var(--whites) * var(--at) - max(22px,calc(100% / var(--whites) * .31 + 7px)));
  background:#1d2a3c;background-clip:padding-box;border:7px solid transparent;border-top:0;border-radius:0 0 15px 15px;box-shadow:inset 0 0 0 1.5px #0e1622}
.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);background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--study-ink)}
/* a marked key (in the scale, the drone's note): a fill and a full outline, never an edge bar */
.mtk-key.wht.in{background:var(--study-tint);box-shadow:inset 0 0 0 2px var(--study)}
.mtk-key.blk.in{background:var(--study);background-clip:padding-box;box-shadow:inset 0 0 0 2px 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}
/* the computer key that plays each piano key (keyHints): shown only while the pointer is over the keyboard */
.mtk-kh{position:absolute;left:0;right:0;bottom:26px;text-align:center;font:600 12px var(--f-mono,ui-monospace,Menlo,monospace);color:var(--ink-3);opacity:0;transition:opacity .16s cubic-bezier(.22,1,.36,1);pointer-events:none}
.mtk-key.blk .mtk-kh{bottom:13px;color:#c9d6e6}
.mtk-kb:hover .mtk-kh,.mtk-kb:focus-within .mtk-kh{opacity:1}
.mtk-kb-scroll{direction:ltr}
: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,.mtk-kh,.mt-go,.mt-link,.mt-chips button,.mt-chip{transition:none}.mt-go:active,.mt-link:active,.mt-chips button:active,.mt-chip:active{transform:none}}