/* Shared paper-band controls; cover artwork uses the same canvas renderer. */
.rm-cover-band-controls { margin:0; padding:14px; min-width:0; border:1px solid var(--rm-line); border-radius:8px; color:var(--rm-ink); background:var(--rm-paper); font-family:var(--font-ui); }
.rm-cover-band-controls legend { padding:0 6px; font:650 13px/1.5 var(--font-ui); }
.rm-cover-band-controls .rm-cover-band-switch { display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; font:600 14px/1.5 var(--font-ui); }
.rm-cover-band-controls .rm-cover-band-switch input[type="checkbox"] { width:20px; height:20px; min-height:0; margin:0; padding:0; flex:0 0 20px; accent-color:var(--rm-purple); }
.rm-cover-band-switch strong { margin-left:auto; font:750 12px/1.5 var(--font-ui); color:var(--rm-purple); }
.rm-cover-band-controls .rm-cover-band-text { display:grid; gap:7px; margin-top:13px; font:500 12px/1.5 var(--font-ui); }
.rm-cover-band-text input { box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--rm-line); border-radius:6px; padding:9px 10px; background:var(--rm-paper); color:var(--rm-ink); font:400 14px/1.5 var(--font-ui); }
.rm-cover-band-controls [hidden], [data-cover-dialog-band][hidden] { display:none !important; }
.rm-cover-band-controls :is(input,button):focus-visible { outline:3px solid var(--rm-purple); outline-offset:3px; }
.rm-cover-placement-controls { margin:0; padding:14px; min-width:0; border:1px solid var(--rm-line); border-radius:8px; color:var(--rm-ink); background:var(--rm-paper); font-family:var(--font-ui); }
.rm-cover-placement-controls legend { padding:0 6px; font:650 13px/1.5 var(--font-ui); }
.rm-cover-placement-help { margin:0 0 10px; color:var(--rm-ink); font:400 12px/1.55 var(--font-ui); }
.rm-cover-placement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.rm-cover-placement-controls .rm-cover-placement-option { display:grid; align-items:center; justify-items:center; gap:6px; box-sizing:border-box; min-width:0; min-height:44px; padding:7px 5px; border:1px solid var(--rm-line); border-radius:6px; background:var(--rm-paper); cursor:pointer; font:550 13px/1.35 var(--font-ui); text-align:center; }
.rm-cover-placement-option.is-selected { border-color:var(--rm-purple); background:color-mix(in srgb,var(--rm-purple) 10%,var(--rm-paper)); box-shadow:inset 0 0 0 1px var(--rm-purple); }
.rm-cover-placement-option.is-disabled { opacity:.58; cursor:not-allowed; pointer-events:none; }
.rm-cover-placement-option input[type="radio"] { width:17px; height:17px; min-height:0; margin:0; padding:0; flex:0 0 17px; accent-color:var(--rm-purple); }
.rm-cover-placement-option span { min-width:0; word-break:keep-all; }
.rm-cover-placement-option:focus-within { outline:3px solid var(--rm-purple); outline-offset:2px; }
.rm-cover-placement-restore { margin-top:10px; padding:7px 10px; border:1px solid var(--rm-line); border-radius:6px; color:var(--rm-ink); background:var(--rm-paper); cursor:pointer; font:550 12px/1.4 var(--font-ui); }
.rm-cover-placement-restore:focus-visible { outline:3px solid var(--rm-purple); outline-offset:3px; }
.rm-cover-placement-restore:disabled { opacity:.58; cursor:not-allowed; }
.cs-card-band-placeholder { position:absolute; top:81.38%; left:0; width:100%; height:15.625%; display:flex; align-items:center; gap:7%; box-sizing:border-box; padding:0 5%; color:var(--band-fg,#172126); background:var(--band-bg,#f7f5ef); border-left:3px solid var(--band-accent,#087d79); box-shadow:0 2px 2px #0002; }
.cs-card-band-placeholder b { font:900 6px/1.1 var(--font-ui); letter-spacing:.2px; }
.cs-card-band-placeholder>span { font:750 8px/1.2 var(--font-ui); text-align:left; }
.cs-card-band-placeholder i { width:4%; height:45%; flex:none; background:var(--band-accent,#087d79); }
.cs-card-art img[data-composed="true"] + .cs-card-band-placeholder { display:none; }
.cs-card-preview-label { white-space:nowrap; color:var(--rm-ink); }

/* Keep the live image visible while editing on a small screen. */
@media(max-width:580px) {
  .cs-detail-content { display:flex; flex-direction:column; min-height:0; padding:16px; gap:16px; }
  .cs-detail-art { width:146px; align-self:center; flex:0 0 auto; }
  .cs-detail-copy { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 4px 8px; }
}
@media(max-width:580px) and (max-height:700px) { .cs-detail-art { width:108px; } }