/* fix/polish: groove dialog, hardware check, responsive header / device panel overflow */

/* ---- Apply groove dialog */
.groove-dialog { display: flex; flex-direction: column; gap: 10px; }
.groove-dialog .hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.groove-sketch-host { background: var(--bg-2, #15171c); border-radius: 6px; padding: 6px; }
.groove-sketch { position: relative; height: 44px; margin: 0 4px; }
.groove-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.groove-hit { position: absolute; bottom: 0; width: 4px; margin-left: -1px; border-radius: 2px 2px 0 0; background: var(--accent); }

/* ---- Priority+ overflow (src/ui/overflow.js): header transport + device panel header row */
.ovf-hidden { display: none !important; }
.hgroup:not(:has(> :not(.ovf-hidden))) { display: none; }
.ovf-more { flex-shrink: 0; }
.ovf-more.hidden { display: none; }
.ovf-pop { position: fixed; z-index: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: min(520px, calc(100vw - 16px));
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.ovf-pop .hgroup { border-left: 0; padding: 0; }
.ovf-pop .hfield { display: flex; flex-direction: column; align-items: flex-start; }
.ovf-pop .hfield select { max-width: 180px; }

/* ---- device panel with nothing selected: header row only */
.device-panel.dv-none .device-body { display: none; }
.device-panel.dv-none .dv-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* ---- Preferences → Hardware check */
.hw-check { display: flex; flex-direction: column; gap: 14px; }
.hw-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--bg-2); }
.hw-head { display: flex; align-items: center; gap: 10px; }
.hw-head h4 { margin: 0; }
.hw-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-4); color: var(--text-2); }
.hw-chip.hw-pass { background: color-mix(in srgb, var(--good) 25%, transparent); color: var(--good); }
.hw-chip.hw-fail { background: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--bad); }
.hw-checks { margin: 8px 0 0; padding-left: 4px; list-style: none; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.hw-checks li.hw-pass b { color: var(--good); } .hw-checks li.hw-fail b { color: var(--bad); } .hw-checks li.hw-pending b { color: var(--text-3); }
.hw-log { height: 180px; overflow: auto; font: 11px/1.45 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 6px; }
.hw-log-row { display: grid; grid-template-columns: 70px minmax(80px, 160px) 110px 1fr auto; gap: 8px; white-space: nowrap; }
.hw-log-row > * { overflow: hidden; text-overflow: ellipsis; }
.hw-log-row code { color: var(--text-3); }
.hw-type { color: var(--accent-2); }
.hw-port { color: var(--text-2); }
.hw-mpe { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; }
.hw-mpe-note { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; min-width: 120px; }
.hw-bar { display: block; position: relative; height: 6px; background: var(--bg-4); border-radius: 3px; overflow: hidden; font-size: 0; }
.hw-bar > i { position: absolute; inset: 0 auto 0 0; background: var(--good); }
.hw-mpe-note .hw-bar { font-size: 10px; height: auto; background: none; } .hw-mpe-note .hw-bar > i { height: 4px; top: auto; }
.hw-meters { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.hw-meter { display: grid; grid-template-columns: 1fr 210px; gap: 8px; align-items: center; font-size: 11px; }
.hw-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hw-ask { font-size: 12px; color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; }
.hw-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.hw-xruns { font-size: 12px; color: var(--text-2); }
.hw-link { font-size: 12px; display: flex; flex-direction: column; gap: 2px; }