/* style-stem.css — Stemパネル(JS/player-stem.js)。行/スイッチ/スライダーは style-settings.css の .qn-set-row/.qn-set-switch/.qn-set-range を再利用。SP幅はアイコンごと非表示(PC専用) */
.qn-stem { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 24px; }
.qn-stem-track { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qn-stem-track small { font-size: var(--fs-micro); color: var(--icon-muted); }
.qn-stem-track span { font-size: var(--fs-body); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn-stem-note { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--icon-muted); }
.qn-stem-err { margin: 0; font-size: var(--fs-small, 12px); color: #ff7a7a; word-break: break-word; }
.qn-stem-label { font-size: var(--fs-body); color: var(--text-bright); }
.qn-stem-bar { height: 6px; border-radius: 3px; background: var(--bg-2a2a34); overflow: hidden; }
.qn-stem-bar i { display: block; height: 100%; background: var(--accent-primary); transition: width 200ms linear; }
.qn-stem-btn {
  align-self: flex-start; min-height: 36px; padding: 0 16px; border-radius: var(--radius-popup, 8px);
  background: var(--bg-1b1b23); border: 1px solid var(--border-subtle); color: var(--text-bright);
  font-size: var(--fs-body); cursor: pointer;
}
.qn-stem-btn.is-primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.qn-stem-mix { display: flex; flex-direction: column; gap: 6px; transition: opacity 120ms ease; }
.qn-stem-mix.is-off { opacity: 0.4; pointer-events: none; }
.qn-stem-partbox { display: flex; flex-direction: column; gap: 2px; }
.qn-stem-partbox.is-muted .qn-stem-wave { opacity: 0.35; }
.qn-stem-part { display: grid; grid-template-columns: 64px 30px 30px 1fr 30px; align-items: center; gap: 8px; min-height: 36px; }
.qn-stem-part > .qn-stem-name { grid-column: 1; grid-row: 1; }
.qn-stem-part > .qn-stem-ms:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.qn-stem-part > .qn-stem-ms:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.qn-stem-part > .qn-set-range { grid-column: 4; grid-row: 1; width: 100%; min-width: 0; height: 18px; margin: 0; }
.qn-stem-part > .qn-stem-vol { grid-column: 5; grid-row: 1; }
.qn-stem-vol { font-style: normal; font-size: var(--fs-micro); text-align: right; color: var(--icon-muted); font-variant-numeric: tabular-nums; }
.qn-stem-wave { position: relative; height: 28px; margin-bottom: 6px; border-radius: 4px; background: var(--bg-0e0e13); cursor: pointer; overflow: hidden; pointer-events: auto; }
.qn-stem-wave canvas { display: block; width: 100%; height: 100%; }
.qn-stem-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--text-bright, var(--bg-ffffff)); pointer-events: none; }
.qn-stem-name { font-size: var(--fs-body); color: var(--text-bright); }
.qn-stem-ms {
  width: 30px; height: 30px; padding: 0; border-radius: 6px; background: var(--bg-1b1b23); border: 1px solid var(--border-subtle);
  color: var(--icon-muted); font-size: var(--fs-micro); font-weight: 700; cursor: pointer;
}
.qn-stem-ms.is-on { background: #6b2b2b; border-color: #a04040; color: #fff; }
.qn-stem-ms.is-solo { background: var(--accent-primary); border-color: var(--accent-primary); }
.qn-stem-seg { display: flex; gap: 4px; padding: 3px; align-self: flex-start; background: var(--bg-0e0e13); border: 1px solid var(--border-subtle); border-radius: var(--radius-popup, 8px); }
.qn-stem-segbtn { min-height: 28px; padding: 0 14px; border: none; border-radius: 6px; background: transparent; color: var(--icon-muted); font-size: var(--fs-body); cursor: pointer; }
.qn-stem-segbtn.is-on { background: var(--accent-primary); color: #fff; }
.qn-rec { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-popup, 8px); background: var(--bg-0e0e13); }
.qn-rec.is-rec { border-color: #a04040; }
.qn-rec-top { display: flex; align-items: center; gap: 8px; }
.qn-rec-top .qn-stem-name { flex: 1; }
.qn-rec-time { font-size: var(--fs-micro); color: #ff7a7a; font-variant-numeric: tabular-nums; }
.qn-rec-btn { min-height: 30px; padding: 0 12px; align-self: auto; }
.qn-rec-btn.is-stop { background: #a04040; border-color: #a04040; color: #fff; }
.qn-rec-btn:disabled { opacity: 0.4; cursor: default; }
.qn-rec-name { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.qn-rec-name.is-on { color: var(--accent-primary); }
.qn-rec-wsw { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: var(--fs-small); color: var(--icon-muted); }
.qn-rec-wsw > span { margin-right: auto; }
.qn-rec-wbtn { min-width: 34px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: none; color: var(--text-bright); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.qn-rec-wbtn.is-empty { color: var(--icon-muted); }
.qn-rec-wbtn.is-on { background: var(--accent-primary); border-color: transparent; color: #fff; }
.qn-rec-strip { position: relative; height: 18px; border-radius: 4px; background: var(--bg-hover-subtle); overflow: hidden; }
.qn-rec-clip { position: absolute; top: 2px; bottom: 2px; min-width: 4px; padding: 0; border: 0; border-radius: 3px; background: var(--accent-primary); opacity: 0.55; cursor: pointer; }
.qn-rec-clip.is-on { opacity: 1; box-shadow: 0 0 0 1px var(--text-bright); }
.qn-rec-clipbar { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--icon-muted); }
.qn-rec-clipbar > span { margin-right: auto; font-variant-numeric: tabular-nums; }
.qn-rec-nudge { width: auto; min-width: 0; padding: 0 10px; }
.qn-rec-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: var(--fs-small); color: var(--icon-muted); }
.qn-rec-foot > span { margin-right: auto; font-variant-numeric: tabular-nums; }
.qn-rec-line { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--icon-muted); }
.qn-rec-line .qn-set-range { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: 18px; margin: 0; }
.qn-rec-line > span { grid-column: 1; grid-row: 1; }
.qn-rec-line em { grid-column: 3; grid-row: 1; }
.qn-rec-line em { font-style: normal; min-width: 52px; text-align: right; color: var(--text-bright); }
@media (max-width: 900px) { .pcv2-icon-item[data-panel-id="stem"] { display: none !important; } }