/* Hallprint LAB — Instrument page (instrument.js): the notes, the alignment and the A/B keys on the left, the views
   over the table of figures on the right, in the language of styles.css and compare.css — two plates on the 940 × 504
   page, numbered section titles (01 NOTES, 02 ALIGN, 03 LISTEN, 04 VIEW, 05 FIGURES), mono figures, hairline frames
   with corner ticks, square keys. The series colour of a note is set on its swatch as --ins-colour by instrument.js. */

/* ------------------------------------------------------------------ the side plate */
.ins-side {
  position: absolute; left: 0; top: 0; width: 250px; height: 504px;
  padding: 10px 14px; display: flex; flex-direction: column;
}
.ins-side > .section-title { flex: 0 0 auto; margin: 0 0 5px; }
.ins-side > .section-title ~ .section-title { margin-top: 9px; }
.ins-count { font-weight: 400; font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); }

.ins-list {
  position: relative; flex: 1 1 auto; min-height: 96px;
  overflow-x: hidden; overflow-y: auto; padding: 3px 0;
  background: var(--field); box-shadow: var(--readout-shadow);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ins-list::-webkit-scrollbar { width: 8px; }
.ins-list::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--field); }
.ins-item { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 8px; }
.ins-item:hover { background: rgba(var(--accent-rgb), 0.06); }
.ins-item.is-current { background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 2px 0 0 var(--accent); }
.ins-check { flex: 0 0 auto; height: 34px; gap: 0; }
.ins-check .box { flex: 0 0 12px; width: 12px; height: 12px; }
.ins-check input:checked + .box::after { left: 0; top: 0; }
.ins-swatch { flex: 0 0 8px; width: 8px; height: 8px; background: var(--ins-colour, transparent); box-shadow: 0 0 0 1px var(--panel-edge); visibility: hidden; }
.ins-swatch.is-set { visibility: visible; }
.ins-text {
  flex: 1 1 auto; min-width: 0; height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit;
}
.ins-text:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.ins-name { font: 400 10.5px/14px var(--font-mono); letter-spacing: 0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-sub { font: 400 9px/12px var(--font-mono); letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-sub:empty { display: none; }
.ins-sub.is-error { color: var(--alert); }
.ins-ref {
  flex: 0 0 auto; height: 16px; padding: 0 4px 0 calc(4px + 0.1em); box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--line-strong); background: none; border-radius: 0;
  font: 500 8.5px/14px var(--font-label); letter-spacing: 0.1em; color: var(--text-dim);
}
.ins-ref:hover { border-color: var(--accent); color: var(--text); }
.ins-ref.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ins-empty { margin: 8px; font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--text-dim); }

.ins-keys { flex: 0 0 auto; display: flex; gap: 6px; margin-top: 6px; }
.ins-keys .btn { flex: 1 1 0; min-width: 0; height: 26px; padding: 0 4px 0 calc(4px + 0.1em); font-size: 9.5px; letter-spacing: 0.1em; }

/* label left (58 px), the control right: the switches, the nudge, the play length */
.ins-switch, .ins-row { flex: 0 0 auto; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 6px; align-items: center; height: 26px; }
.ins-switch + .ins-switch, .ins-switch + .ins-row { margin-top: 3px; }
.ins-row-label { font: 500 9px/13px var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.ins-switch .segmented { display: flex; width: 100%; box-sizing: border-box; }
.ins-switch .segment { flex: 1 1 0; min-width: 0; height: 24px; padding: 0 2px 0 calc(2px + 0.1em); font-size: 9px; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; }
.ins-row { grid-template-columns: 58px 44px minmax(0, 1fr) 44px; }
.ins-row .btn { height: 24px; padding: 0; font-size: 9.5px; letter-spacing: 0.04em; }
.ins-readout {
  display: block; height: 24px; box-sizing: border-box; padding: 0 6px; text-align: center;
  font: 400 10px/24px var(--font-mono); color: var(--text); background: var(--field); box-shadow: var(--readout-shadow);
  white-space: nowrap; overflow: hidden;
}
.ins-play { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr 1.3fr 36px; gap: 6px; }
.ins-play .btn { height: 26px; padding: 0; font-size: 9.5px; letter-spacing: 0.08em; }
.ins-play + .ins-switch { margin-top: 6px; }
.ins-play .btn.is-on { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ the results: the views over the table */
.ins-results { position: absolute; left: 260px; top: 0; width: 680px; height: 504px; padding: 10px; }
.ins-head { position: relative; height: 22px; margin: 0 0 4px; }
.ins-head > .section-title { margin: 0; }
.ins-head-table { margin-top: 8px; }
.ins-status {
  position: absolute; right: 0; top: 1px; z-index: 1; max-width: 470px; box-sizing: border-box;
  height: 20px; padding: 0 8px; line-height: 20px;
  font: 400 10px/20px var(--font-mono); letter-spacing: 0.02em; color: var(--text-dim);
  background: var(--field); box-shadow: var(--readout-shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ins-status:empty { display: none; }
.ins-status.is-busy { color: var(--amber); }
.ins-status.is-error { color: var(--alert); }
.ins-status.is-error::before { content: "[ERR] "; }
.ins-viewrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; margin: 0 0 6px; }
.ins-viewrow .ins-switch { display: block; height: 24px; }
.ins-views .segment { min-width: 0; width: 76px; flex: 0 0 auto; }
.ins-options .segment { flex: 0 0 auto; width: 64px; }
.ins-options .ins-switch { display: block; }
.ins-canvas-wrap { position: relative; height: 246px; }
.ins-canvas-wrap::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  --tick: var(--accent);
  background:
    linear-gradient(var(--tick), var(--tick)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 7px no-repeat;
}
.ins-canvas-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid var(--line); }
.ins-canvas-wrap canvas { display: block; width: 100%; height: 100%; border-radius: 0; }
.ins-actions { position: absolute; right: 0; top: 0; z-index: 1; display: flex; gap: 6px; }
.ins-actions .btn { width: 56px; height: 22px; padding: 0 4px 0 calc(4px + 0.1em); font-size: 9.5px; letter-spacing: 0.1em; }

.ins-table-scroll { max-height: 140px; overflow-y: auto; overflow-x: hidden; }
.ins-table-scroll::-webkit-scrollbar { width: 8px; }
.ins-table-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--field); }
.ins-table {
  width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.01em; color: var(--text);
}
.ins-table th, .ins-table td {
  height: 19px; padding: 0 4px; box-sizing: border-box; box-shadow: inset 0 -1px 0 var(--line);
  text-align: right; font-weight: 400; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ins-table thead th {
  font: 500 9px/19px var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
  box-shadow: inset 0 -1px 0 var(--line-strong);
}
.ins-table tbody tr { cursor: pointer; }
.ins-table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.05); }
.ins-table tbody tr.is-current td { background: rgba(var(--accent-rgb), 0.1); }
.ins-table .ins-c-swatch { width: 16px; padding: 0 0 0 4px; text-align: left; }
.ins-table .ins-c-swatch span { display: inline-block; width: 8px; height: 8px; vertical-align: -1px; background: var(--ins-colour, transparent); box-shadow: 0 0 0 1px var(--panel-edge); }
.ins-table .ins-c-name { width: 122px; text-align: left; }
.ins-table .ins-c-pitch { width: 70px; }
.ins-table .ins-c-B { width: 60px; }
.ins-table .ins-placeholder td { text-align: left; font-family: var(--font-body); font-size: 10.5px; color: var(--text-dim); white-space: normal; line-height: 1.4; height: 38px; cursor: default; }

/* ------------------------------------------------------------------ the note dialog (EDIT) */
dialog.ins-edit { width: 440px; max-height: 92vh; overflow-y: auto; }
.ins-edit h2 { font-size: 14px; letter-spacing: 0.22em; margin-bottom: 10px; }
.ins-edit-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); column-gap: 8px; align-items: center; margin: 0 0 6px; cursor: default; }
.ins-edit-row > span { font: 500 9.5px/13px var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-align: left; }
.ins-edit-row > input, .ins-edit-row > select {
  height: 24px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--line); border-radius: 0; background: var(--field); color: var(--text);
  font: 11px/22px var(--font-mono);
}
.ins-edit-row > input:focus, .ins-edit-row > select:focus { outline: none; border-color: var(--accent); }
.ins-edit-row > input::placeholder { color: rgba(var(--text-dim-rgb), 0.75); }
.ins-edit-found { margin: 8px 0 8px; font: 10px/1.4 var(--font-mono); color: var(--text-dim); text-align: left; min-height: 14px; }
.ins-edit-found.is-error { color: var(--alert); }
.ins-edit-all { height: auto; margin: 0 0 12px; align-items: flex-start; }
.ins-edit-all .check-text { white-space: normal; font-size: 10px; line-height: 14px; text-align: left; }
.ins-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ins-edit-actions .btn { height: 28px; min-width: 96px; }

/* the sixth mode key: INSTRUMENT is the longest name of the bank */
#tab-instrument { width: 122px; }