/* A single backing decision, using the studio's existing light/dark tokens. */
#dialog.backing-dialog { width: 760px; max-width: calc(100vw - 32px); }
#dialog.backing-dialog .dialog-header { padding: 18px 23px 16px; }
#dialog.backing-dialog .dialog-body { padding: 17px 23px 19px; }
#dialog.backing-dialog .dialog-footer { justify-content: space-between; padding: 13px 23px; }
#dialog.backing-dialog .backing-steps { display: flex; align-items: center; gap: 17px; margin: 0 0 14px; }
#dialog.backing-dialog .backing-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0 7px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.4; }
#dialog.backing-dialog .backing-step[aria-current=step] { border-color: var(--accent); color: var(--ink); font-weight: 650; }
#dialog.backing-dialog .backing-intro { margin: 0 0 14px; max-width: 62ch; color: var(--muted); font-size: 13px; line-height: 1.6; }
#dialog.backing-dialog .backing-intro p { margin: 0; font-size: 13px; line-height: 1.6; }
#dialog.backing-dialog .backing-intro strong { color: var(--ink); font-weight: 600; }
#dialog.backing-dialog .backing-range-row { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(85px,.65fr)); align-items: end; gap: 10px; margin-bottom: 14px; }
#dialog.backing-dialog .backing-range-row .field { margin: 0; min-width: 0; }
#dialog.backing-dialog .backing-range-row label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; }
#dialog.backing-dialog .backing-range-row :is(input,select) { width: 100%; min-width: 0; }

#dialog.backing-dialog .backing-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
#dialog.backing-dialog .backing-preset { display: grid; grid-template-columns: 21px minmax(0,1fr); align-content: start; align-items: center; gap: 7px 8px; min-width: 0; min-height: 102px; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb,var(--surface) 22%,var(--panel)); color: var(--ink); text-align: left; white-space: normal; transition: border-color .12s,background .12s; }
#dialog.backing-dialog .backing-preset > .icon { width: 19px; height: 19px; color: var(--muted); }
#dialog.backing-dialog .backing-preset > strong { font-size: 13px; line-height: 1.4; font-weight: 650; }
#dialog.backing-dialog .backing-preset-note { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.5; }
#dialog.backing-dialog .backing-preset:hover { border-color: var(--line); background: color-mix(in srgb,var(--surface) 55%,var(--panel)); }
#dialog.backing-dialog .backing-preset[aria-pressed=true] { border-color: var(--accent); background: var(--guitar-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); }
#dialog.backing-dialog .backing-preset[aria-pressed=true] > .icon { color: var(--accent); }
#dialog.backing-dialog .backing-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#dialog.backing-dialog .backing-preset:disabled { opacity: .45; }

#dialog.backing-dialog .backing-parts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 13px 0 0; }
#dialog.backing-dialog .backing-parts label { --part-color: var(--accent); --part-bg: var(--guitar-bg); display: grid; grid-template-columns: 17px 23px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 9px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
#dialog.backing-dialog .backing-parts label[data-type=bass] { --part-color: var(--bass); --part-bg: var(--bass-bg); }
#dialog.backing-dialog .backing-parts label[data-type=drums] { --part-color: var(--drums); --part-bg: var(--drums-bg); }
#dialog.backing-dialog .backing-parts input { grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; margin: 0; accent-color: var(--part-color); }
#dialog.backing-dialog .backing-parts .icon { grid-column: 2; grid-row: 1 / 3; color: var(--part-color); width: 20px; height: 20px; }
#dialog.backing-dialog .backing-parts strong { grid-column: 3; font-size: 12px; font-weight: 600; }
#dialog.backing-dialog .backing-parts small { grid-column: 3; color: var(--muted); font-size: 11px; line-height: 1.45; }
#dialog.backing-dialog .backing-parts label:has(input:checked) { border-color: color-mix(in srgb,var(--part-color) 38%,var(--border)); background: color-mix(in srgb,var(--part-bg) 26%,var(--panel)); }
#dialog.backing-dialog .backing-parts label:hover { border-color: var(--line); }
#dialog.backing-dialog .backing-parts label:has(input:focus-visible) { outline: 2px solid var(--part-color); outline-offset: 3px; }
#dialog.backing-dialog .backing-more { margin-top: 12px; color: var(--muted); font-size: 11px; }
#dialog.backing-dialog .backing-more > summary { width: fit-content; cursor: pointer; padding-block: 6px; }
#dialog.backing-dialog .backing-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
#dialog.backing-dialog .backing-more[open] > summary { margin-bottom: 9px; color: var(--ink); }
#dialog.backing-dialog .backing-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; padding-top: 2px; }
#dialog.backing-dialog .backing-options .field { min-width: 0; margin: 0; }
#dialog.backing-dialog .backing-options select { width: 100%; }

#dialog.backing-dialog .backing-pattern { display: block; width: 100%; height: auto; margin: 12px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
#dialog.backing-dialog .backing-pattern text { fill: var(--muted); font: 10px var(--mono); }
#dialog.backing-dialog .backing-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#dialog.backing-dialog .backing-summary > span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; background: color-mix(in srgb,var(--surface) 35%,var(--panel)); }
#dialog.backing-dialog .backing-compare { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
#dialog.backing-dialog .backing-compare button { flex: 1; min-height: 40px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 12px; }
#dialog.backing-dialog .backing-compare button:hover { background: var(--hover); border-color: var(--line); }
#dialog.backing-dialog .backing-compare button.is-playing { background: var(--play); color: var(--play-ink); border-color: var(--play); }
#dialog.backing-dialog .backing-status { min-height: 18px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#dialog.backing-dialog .backing-chords { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; margin: 9px 0 11px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#dialog.backing-dialog .backing-chords > :is(span,div) { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; min-width: 54px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
#dialog.backing-dialog .backing-chords small { color: var(--muted); font-size: 10px; line-height: 1.2; }
#dialog.backing-dialog .backing-chords strong { color: var(--ink); font: 600 12px/1.3 var(--mono); }
#dialog.backing-dialog .backing-changes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
#dialog.backing-dialog .backing-changes > :is(div,section) { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb,var(--surface) 25%,var(--panel)); }
#dialog.backing-dialog .backing-changes :is(h3,strong) { margin: 0; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
#dialog.backing-dialog .backing-changes :is(p,small) { display: block; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
#dialog.backing-dialog :is(.backing-warning,.backing-error) { margin: 11px 0 0; padding: 8px 11px; border-left: 2px solid var(--line); background: color-mix(in srgb,var(--surface) 50%,var(--panel)); border-radius: 0 5px 5px 0; color: var(--ink); font-size: 11px; line-height: 1.6; }
#dialog.backing-dialog .backing-error { border-left-color: var(--danger); font-size: 12px; }
#dialog.backing-dialog :is(.backing-warning,.backing-error):empty { display: none; }

#dialog.backing-dialog .backing-success { padding: 8px 0 6px; text-align: center; }
#dialog.backing-dialog .backing-success > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; color: var(--bass); background: var(--bass-bg); }
#dialog.backing-dialog .backing-success :is(h2,h3) { margin: 12px 0 7px; color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -.35px; }
#dialog.backing-dialog .backing-success p { max-width: 48ch; margin: 8px auto; font-size: 13px; line-height: 1.65; }
#dialog.backing-dialog .backing-next-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#dialog.backing-dialog .backing-next-actions button { min-height: 37px; font-size: 12px; border-radius: 7px; padding: 8px 12px; }

@media (max-width:600px) {
  #dialog.backing-dialog .dialog-header { padding: 17px 18px 15px; }
  #dialog.backing-dialog .dialog-body { padding: 15px 18px 17px; }
  #dialog.backing-dialog .dialog-footer { padding: 13px 18px; }
  #dialog.backing-dialog .backing-steps { gap: 13px; }
  #dialog.backing-dialog .backing-range-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #dialog.backing-dialog .backing-range-row > :first-child { grid-column: 1 / -1; }
  #dialog.backing-dialog .backing-presets { grid-template-columns: minmax(0,1fr); gap: 8px; }
  #dialog.backing-dialog .backing-preset { min-height: 0; padding: 11px 12px; gap: 4px 9px; }
  #dialog.backing-dialog .backing-preset-note { grid-column: 2; }
  #dialog.backing-dialog .backing-options { grid-template-columns: minmax(0,1fr); }
  #dialog.backing-dialog .backing-parts label { grid-template-columns: 17px minmax(0,1fr); padding: 10px; gap: 3px 7px; }
  #dialog.backing-dialog .backing-parts .icon { display: none; }
  #dialog.backing-dialog .backing-parts :is(strong,small) { grid-column: 2; }
}
@media (max-width:440px) {
  #dialog.backing-dialog .backing-parts, #dialog.backing-dialog .backing-changes { grid-template-columns: minmax(0,1fr); }
  #dialog.backing-dialog .backing-compare button { flex-basis: 100%; }
}
@media (prefers-reduced-motion:reduce) { #dialog.backing-dialog .backing-preset, #dialog.backing-dialog .backing-compare button { transition: none; } }

#dialog.backing-dialog .backing-range-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
#dialog.backing-dialog .backing-source { margin: 0; padding-bottom: 9px; color: var(--muted); font-size: 12px; }
#dialog.backing-dialog .backing-custom-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#dialog.backing-dialog .backing-parts label > span { grid-column: 3; display: flex; flex-direction: column; gap: 3px; }
#dialog.backing-dialog .backing-pattern-wrap > small { display: block; margin-top: -7px; color: var(--muted); font-size: 10px; }
#dialog.backing-dialog .pattern-rule { stroke: var(--border); stroke-width: .7; }
#dialog.backing-dialog .pattern-beat { fill: var(--line); }
#dialog.backing-dialog .pattern-bass { fill: var(--bass); }
#dialog.backing-dialog .pattern-drums { fill: var(--drums); }
#dialog.backing-dialog .backing-changes > div { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 4px 7px; }
#dialog.backing-dialog .backing-changes > div > .icon { grid-column: 1; grid-row: 1 / 3; width: 17px; height: 17px; color: var(--bass); }
#dialog.backing-dialog .backing-changes > div[data-type=drums] > .icon { color: var(--drums); }
#dialog.backing-dialog .backing-changes > div > span { grid-column: 2; font-size: 11px; color: var(--muted); }
#dialog.backing-dialog .backing-fine { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
#dialog.backing-dialog .backing-mix { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
#dialog.backing-dialog .backing-mix input { margin: 0; }
#dialog.backing-dialog .backing-legacy { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
#dialog.backing-dialog .backing-legacy button { font-size: 11px; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:600px) { #dialog.backing-dialog .backing-parts label > span { grid-column: 2; } }

#dialog.backing-dialog .backing-compare button { color: var(--ink); }
#dialog.backing-dialog .backing-compare button.is-playing { color: var(--play-ink); }

/* Style switch on the listening screen: hear Roomy, Steady or Driving without leaving it. */
#dialog.backing-dialog .backing-style { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb,var(--surface) 35%,var(--panel)); }
#dialog.backing-dialog .backing-style button { min-height: 26px; padding: 3px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; }
#dialog.backing-dialog .backing-style button:hover { background: var(--hover); color: var(--ink); }
#dialog.backing-dialog .backing-style button[aria-pressed=true] { background: var(--guitar-bg); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); }
#dialog.backing-dialog .backing-style button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* "Add bass & drums" under a guitar idea. It lives in the canvas footer, so showing or hiding it never moves the music. */
.editor-panel .canvas-footer > .backing-prompt { flex-shrink: 0; gap: 6px; min-height: 28px; padding: 4px 11px; border: 1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); border-radius: 999px; background: color-mix(in srgb,var(--accent) 10%,transparent); color: var(--ink); font-size: 11px; font-weight: 600; }
.editor-panel .canvas-footer > .backing-prompt .icon { width: 13px; height: 13px; color: var(--accent); }
.editor-panel .canvas-footer > .backing-prompt:hover { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 18%,transparent); }
.editor-panel .canvas-footer > .backing-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Beside it the footer hint keeps to two lines, and gives way on mid-width screens, so the footer keeps its height. */
@media (min-width:701px) { .editor-panel .canvas-footer:has(> .backing-prompt) > .hint:not(.context-tip) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; } }
@media (min-width:701px) and (max-width:860px) { .editor-panel .canvas-footer:has(> .backing-prompt) > .hint:not(.context-tip) { display: none; } }

/* Listening remains in reach while the builder scrolls, including short phones. */
#dialog.backing-dialog[open] { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); overflow:hidden; }
#dialog.backing-dialog :is(.dialog-header,.dialog-footer) { flex-shrink:0; }
#dialog.backing-dialog .dialog-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
#dialog.backing-dialog .dialog-footer button { min-height:44px; white-space:normal; }
#dialog.backing-dialog .backing-listen { position:sticky; top:-17px; z-index:3; padding:9px 0 6px; margin-top:-9px; margin-bottom:13px; border-bottom:1px solid var(--border); background:var(--panel); }
#dialog.backing-dialog .backing-compare { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
#dialog.backing-dialog .backing-compare button { min-width:0; min-height:44px; padding:8px 9px; gap:6px; white-space:normal; }
#dialog.backing-dialog .backing-compare button > .icon { flex-shrink:0; width:15px; height:15px; }
#dialog.backing-dialog .backing-status { margin:5px 0 0; }
#dialog.backing-dialog .backing-parts { grid-template-columns:repeat(3,minmax(0,1fr)); }
#dialog.backing-dialog .backing-parts label { min-height:64px; padding:9px; gap:2px 6px; }
#dialog.backing-dialog .backing-parts label[data-type=harmony] { --part-color:var(--piano,var(--accent)); --part-bg:var(--piano-bg,var(--guitar-bg)); }
#dialog.backing-dialog .backing-sounds { margin:14px 0 10px; }
#dialog.backing-dialog .backing-isolate { display:flex; flex-wrap:wrap; gap:7px; }
#dialog.backing-dialog .backing-isolate button { flex:1; min-width:0; min-height:44px; padding:7px; border:1px solid var(--border); color:var(--ink); font-size:11px; white-space:normal; }
#dialog.backing-dialog .backing-isolate button.is-playing { background:var(--play); border-color:var(--play); color:var(--play-ink); }
#dialog.backing-dialog :is(.backing-compare,.backing-isolate) button:disabled { opacity:.45; }
#dialog.backing-dialog .backing-harmony { min-width:0; margin-top:17px; }
#dialog.backing-dialog .backing-harmony h3 { margin:0; font-size:13px; font-weight:650; }
#dialog.backing-dialog .backing-chord-editor { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
#dialog.backing-dialog .backing-chord-editor .field { min-width:0; margin:0; }
#dialog.backing-dialog .backing-chord-editor :is(label,select) { min-width:0; width:100%; font-size:11px; }
#dialog.backing-dialog .backing-chord-editor select { min-height:44px; padding:8px 20px 8px 8px; }
#dialog.backing-dialog .backing-options select { min-height:44px; }
#dialog.backing-dialog .backing-more > summary { display:flex; align-items:center; min-height:44px; }
#dialog.backing-dialog .backing-more > summary::before { content:'›'; margin-right:7px; }
#dialog.backing-dialog .backing-more[open] > summary::before { transform:rotate(90deg); }
#dialog.backing-dialog .backing-changes > div[data-type=piano] > .icon { color:var(--piano,var(--accent)); }
#dialog.backing-dialog .pattern-piano { fill:var(--piano,var(--accent)); }
@media(max-width:600px) {
  #dialog.backing-dialog .backing-listen { top:-15px; }
  #dialog.backing-dialog .backing-compare button { font-size:11px; padding:8px 5px; gap:4px; }
  #dialog.backing-dialog .backing-parts { grid-template-columns:minmax(0,1fr); gap:7px; }
  #dialog.backing-dialog .backing-parts label { min-height:51px; }
  #dialog.backing-dialog .backing-parts label > span { flex-direction:row; align-items:center; flex-wrap:wrap; gap:3px 9px; }
  #dialog.backing-dialog .backing-chord-editor { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dialog.backing-dialog .backing-sounds { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #dialog.backing-dialog .backing-sounds select { font-size:11px; }
}
@media(max-height:500px) and (min-width:560px) {
  #dialog.backing-dialog[open] { max-height:calc(100dvh - 12px); }
  #dialog.backing-dialog .dialog-header { padding:8px 16px; }
  #dialog.backing-dialog .dialog-header h2 { font-size:18px; }
  #dialog.backing-dialog .dialog-body { padding:10px 16px; }
  #dialog.backing-dialog .dialog-footer { padding:7px 16px; }
  #dialog.backing-dialog .backing-listen { top:-10px; }
  #dialog.backing-dialog .backing-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #dialog.backing-dialog .backing-preset { min-height:0; padding:9px; }
  #dialog.backing-dialog .backing-parts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.backing-mute-notice{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:4px 0}.backing-mute-notice>span{flex:1}.backing-mute-notice>button{min-height:44px}.backing-mute-notice>.icon{width:16px;height:16px}

#dialog.backing-dialog .dialog-body{scroll-padding-block:96px 20px}
#dialog.backing-dialog:has(.backing-mute-notice) .dialog-body{scroll-padding-top:152px}
#dialog.backing-dialog .backing-chord-editor select{scroll-margin-block:8px}

/* Keep listening and mute feedback on one row on short landscape screens. */
@media(max-height:500px) and (min-width:560px) {
  #dialog.backing-dialog .backing-listen { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; }
  #dialog.backing-dialog .backing-compare { grid-column:1; grid-row:1; }
  #dialog.backing-dialog .backing-listen:not(:has(.backing-mute-notice)) .backing-compare { grid-column:1 / -1; }
  #dialog.backing-dialog .backing-mute-notice { grid-column:2; grid-row:1; padding:0; gap:6px; }
  #dialog.backing-dialog .backing-mute-notice > span { max-width:55px; font-size:10px; line-height:1.4; }
  #dialog.backing-dialog .backing-status { grid-column:1 / -1; }
  #dialog.backing-dialog:has(.backing-mute-notice) .dialog-body { scroll-padding-top:96px; }
}

#dialog.backing-dialog .backing-custom-range > .backing-error { grid-column:1 / -1; margin:0; }
#dialog.backing-dialog .backing-custom-range input[aria-invalid=true] { border-color:var(--danger); }
#dialog.backing-dialog .dialog-body :is(.backing-range-row select,.backing-custom-range input[type=number],.backing-legacy button,.backing-reset,.backing-mix) { min-height:44px; }
@media(max-width:600px) { #dialog.backing-dialog .backing-range-row > .field { grid-column:1 / -1; } }