/* tab maker: string lines are drawn through each cell; the grid scrolls sideways inside its own box */
#tab-maker .tm-wide { flex: 1 1 200px; min-width: 0; display: flex; }
#tab-maker .tm-wide input { flex: 1; min-width: 0; }
#tab-maker .tm-grid { margin: 14px 0 8px; display: flex; flex-direction: column; gap: 14px; }
#tab-maker .tm-sys { display: flex; align-items: stretch; min-width: 0; }
#tab-maker .tm-labels { display: flex; flex-direction: column; flex: none; width: 30px; }
#tab-maker .tm-labels span { height: 34px; font: 600 13px/34px var(--sans); color: var(--muted); text-align: right; padding-right: 6px; }
#tab-maker .tm-scroll { overflow-x: auto; overscroll-behavior-x: contain; flex: 1; min-width: 0; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
#tab-maker .tm-row { display: flex; width: max-content; min-width: 100%; }
#tab-maker .tm-col { display: flex; flex-direction: column; flex: none; }
#tab-maker .tm-col.bar { width: 10px; background: linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; }
#tab-maker .tm-col.play { background: var(--strong); }
#tab-maker .tm-cell { position: relative; width: 38px; height: 34px; padding: 0; border: 0; margin: 0; cursor: pointer; color: var(--ink);
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#tab-maker .tm-col.bar .tm-cell { width: 10px; cursor: default; }
#tab-maker .tm-cell span { background: var(--card); padding: 0 2px; position: relative; }
#tab-maker .tm-col.play .tm-cell span { background: var(--strong); }
#tab-maker .tm-cell.on { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 6px; }
#tab-maker .tm-cell:hover { background-color: var(--strong); }
#tab-maker .tm-keypad { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 8px 0 12px; }
#tab-maker .tm-key { min-height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 600 16px var(--sans); cursor: pointer; }
#tab-maker .tm-key.alt { background: var(--strong); border-color: transparent; }
#tab-maker .tm-key:hover { border-color: var(--ink); }
#tab-maker .tm-bpm { min-width: 2.2em; display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
#tab-maker-out .tm-text { margin: 12px 0; padding: 14px; background: var(--strong); color: var(--ink); border-radius: 12px; overflow-x: auto; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.tab-maker-printbox { display: none; }
@media print {
  html.tab-maker-print, html.tab-maker-print body { background: #fff; margin: 0; padding: 0; }
  html.tab-maker-print body > *:not(.tab-maker-printbox) { display: none !important; }
  html.tab-maker-print .tab-maker-printbox { display: block; }
  .tab-maker-printbox svg { display: block; }
  .tab-maker-pre { font: 10pt/1.4 Menlo, Consolas, monospace; color: #000; white-space: pre; margin: 0; }
}
#tab-maker label.field, #tab-maker-out label.field { max-width: 100%; min-width: 0; }
#tab-maker select { max-width: 100%; min-width: 0; }
@media (max-width: 480px) { #tab-maker [data-tuning] { max-width: calc(100vw - 120px); } }
#tab-maker .tm-cell { display: block; flex: none; }