/* Hallprint LAB — Compare page (compare.js): the hall picker on the left, the overlay plot and the octave-band table on
   the right, in the language of styles.css — two plates on the 940 × 504 page, numbered section titles (01 HALLS,
   02 DECAY OVERLAY, 03 OCTAVE-BAND FIGURES), mono figures in boxed read-outs, hairline frames with corner ticks,
   square keys. The series colour of a chosen hall is set on its swatch as --cmp-colour by compare.js. */

/* ------------------------------------------------------------------ the picker: a list with real checkboxes, two switches, Clear */
.cmp-picker {
  position: absolute; left: 0; top: 0; width: 250px; height: 504px;
  padding: 10px 14px; display: flex; flex-direction: column;
}
.cmp-picker > .section-title { flex: 0 0 auto; margin: 0 0 6px; }
.cmp-count { font-weight: 400; font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); }
.cmp-list {
  position: relative; flex: 1 1 auto; min-height: 0;
  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;
}
.cmp-list::-webkit-scrollbar { width: 8px; }
.cmp-list::-webkit-scrollbar-track { background: transparent; }
.cmp-list::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--field); }
.cmp-list::-webkit-scrollbar-thumb:hover { background: var(--tick); }
.cmp-item { position: relative; height: 34px; padding: 0 8px; gap: 7px; }     /* on top of .check (styles.css) */
.cmp-item:hover { background: rgba(var(--accent-rgb), 0.06); }
.cmp-item.is-disabled:hover { background: none; }
.cmp-item .box { flex: 0 0 12px; width: 12px; height: 12px; }
.cmp-item input:checked + .box::after { left: 0; top: 0; }
.cmp-swatch { flex: 0 0 8px; width: 8px; height: 8px; background: var(--cmp-colour, transparent); box-shadow: 0 0 0 1px var(--panel-edge); visibility: hidden; }
.cmp-swatch.is-set { visibility: visible; }
.cmp-name { flex: 1 1 auto; min-width: 0; font: 400 10.5px/26px var(--font-mono); letter-spacing: 0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-tag {
  flex: 0 0 auto; height: 14px; line-height: 14px; padding: 0 4px 0 calc(4px + 0.1em); box-sizing: border-box;
  border: 1px solid var(--line-strong);
  font: 500 8.5px/12px var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.cmp-tag.is-virtual { border-color: var(--accent-dark); color: var(--accent); }
.cmp-tag.is-etude { border-color: rgba(var(--amber-rgb), 0.55); color: var(--amber); }
.cmp-empty { margin: 8px; font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--text-dim); }

.cmp-controls { flex: 0 0 auto; margin-top: 4px; }
.cmp-switch { margin-top: 8px; }
.cmp-switch-label {
  display: block; height: 13px; margin-bottom: 3px; line-height: 13px;
  font: 500 9px/13px var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.cmp-switch .segmented { display: flex; width: 100%; box-sizing: border-box; }
.cmp-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.1em; overflow: hidden; text-overflow: ellipsis; }
.cmp-clear { width: 100%; height: 26px; margin-top: 10px; font-size: 10px; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------ the results: the plot over the table */
.cmp-results { position: absolute; left: 260px; top: 0; width: 680px; height: 504px; padding: 10px; }
.cmp-head { position: relative; height: 22px; margin: 0 0 4px; }
.cmp-head > .section-title { margin: 0; }
.cmp-head-table { margin-top: 8px; }
/* the status read-out sits on the right end of the title's rule: amber while a hall is analysed, red when one failed */
.cmp-status {
  position: absolute; right: 0; top: 1px; z-index: 1; max-width: 380px; 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;
}
.cmp-status:empty { display: none; }
.cmp-status.is-busy { color: var(--amber); }
.cmp-status.is-error { color: var(--alert); }
.cmp-status.is-error::before { content: "[ERR] "; }
.cmp-canvas-wrap { position: relative; height: 290px; }
.cmp-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;
}
.cmp-canvas-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid var(--line); }
.cmp-canvas-wrap canvas { display: block; width: 100%; height: 100%; border-radius: 0; }
.cmp-actions { position: absolute; right: 0; top: 0; z-index: 1; display: flex; gap: 6px; }
.cmp-actions .btn { width: 56px; height: 22px; padding: 0 4px 0 calc(4px + 0.1em); font-size: 9.5px; letter-spacing: 0.1em; }

/* the table: a row per hall, 19 px like the figures of the Design page; the swatch, the name, the type, nine figures */
.cmp-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);
}
.cmp-table th, .cmp-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;
}
.cmp-table thead th {
  font: 500 9px/19px var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  box-shadow: inset 0 -1px 0 var(--line-strong);
}
.cmp-table thead th.cmp-col-lead { text-align: left; color: var(--accent-dark); }
/* the columns: 16 + 148 + 62 for the swatch, the name and the type; the nine figures share the remaining 434 px */
.cmp-table col.cmp-c-swatch { width: 16px; }
.cmp-table col.cmp-c-name { width: 148px; }
.cmp-table col.cmp-c-type { width: 62px; }
.cmp-table .cmp-swatch-cell { padding: 0 0 0 4px; text-align: left; }
.cmp-table .cmp-swatch-cell span { display: inline-block; width: 8px; height: 8px; vertical-align: -1px; background: var(--cmp-colour, transparent); box-shadow: 0 0 0 1px var(--panel-edge); }
.cmp-table .cmp-name-cell { text-align: left; }
.cmp-table .cmp-type-cell { text-align: left; font: 500 8.5px/19px var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.cmp-table td.cmp-val.is-dim { color: var(--text-dim); }
.cmp-table .cmp-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; }

/* name over position · file, twelve halls, a scrolling table */
.cmp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cmp-text .cmp-name { flex: 0 0 auto; font: 400 10.5px/14px var(--font-mono); }
.cmp-sub { font: 400 9px/12px var(--font-mono); letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-sub:empty { display: none; }
.cmp-pos { color: var(--text-dim); font-size: 9px; }
.cmp-table-scroll { max-height: 152px; overflow-y: auto; overflow-x: hidden; }
.cmp-table-scroll::-webkit-scrollbar { width: 8px; }
.cmp-table-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--field); }