/* Recording: track-header input / takes buttons, monitoring state, recording settings dialog (src/record, arrange-rec.js) */
.arr-th-rec { display: inline-flex; gap: 3px; align-items: center; }
.arr-th-rec .hidden { display: none; }
.arr-th-input, .arr-th-takes {
  height: 18px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text-2);
  font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
}
.arr-th-input:hover, .arr-th-takes:hover { color: var(--text); border-color: var(--text-3); }
.arr-th-input[data-mon="auto"] { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warn) 70%, transparent); }
.arr-th-input[data-mon="on"] { box-shadow: inset 0 -2px 0 var(--warn); }
.arr-th.monitoring .arr-th-input { background: color-mix(in srgb, var(--warn) 35%, var(--bg-3)); color: var(--text); }
.arr-th-takes.on { background: color-mix(in srgb, var(--tc, var(--accent)) 70%, var(--bg-4)); color: #fff; border-color: transparent; }
.arr-th .arr-th-in { cursor: pointer; }
.arr-th.monitoring .arr-th-in, .arr-th-in:has(.arr-th-in-fill.clip) { display: block; }
.arr-heads.tiny .arr-th-input { display: none; }

.rec-panel { display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow: auto; }
.rec-sec h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.rec-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; flex-wrap: wrap; }
.rec-lbl { width: 150px; color: var(--text-2); font-size: 12.5px; }
.rec-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rec-hint { color: var(--text-3); font-size: 11.5px; }
.rec-track { display: flex; align-items: center; gap: 6px; padding: 4px 0; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.rec-tname { min-width: 140px; font-weight: 600; font-size: 12.5px; padding-left: 6px; border-left: 3px solid var(--line); }
.rec-armed { color: var(--bad); font-weight: 600; font-size: 11px; }
.rec-eff { font-size: 12px; color: var(--text); }
@media (max-width: 600px) { .rec-lbl { width: 100%; } .rec-tname { min-width: 0; width: 100%; } }