/* Reference sheets page (Sep 19) — every rule under .rs / .rs- ; colours only through tokens.css variables, so both themes work.
   It stands on the studio's own pieces (.card, .btn, .badge, .count, .switch, .chip, .mm-stepper, .mm-drop, .mm-prog, .thinking, .tip) and only adds layout.
   Step 2 ≥ 1000 px: the list on the left, the look + the approve switch + the price on the right (they stay in view).
   Steps 3–5 ≥ 1000 px: the newest sheet big on the left, the wall of sheets on the right. Under 1000 px everything is one column;
   under 640 px the price card is a bar at the bottom, the wall is two columns and every button is a full thumb wide.
   A sheet is never cropped: every picture box is 4:5 with object-fit: contain (a sheet's labels live at its edges). */
.rs { min-width: 0; }
.rs .help { font-size: 12px; color: var(--text-muted); }
.rs-card { padding: 16px 18px; }
.rs-card + .rs-card, .rs-list-main > .rs-card + .rs-card, .rs-list-side > * + * { margin-top: 16px; }
.rs-card-h { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.rs-lbl { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rs-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--text-muted); overflow-wrap: anywhere; background: none; padding: 0; }
.rs-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rs-link:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; border-radius: 4px; }
.rs-wide { width: 100%; white-space: normal; }
.rs-lookin { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: var(--radius-small); background: var(--warn-tint); color: var(--text); }
.rs-amber { margin-top: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); border-left: 3px solid var(--warn); border-radius: var(--radius-small); background: var(--warn-soft); font-size: 13px; line-height: 1.45; }
.rs-amber p { margin: 0 0 6px; }
.rs-amber p:last-child { margin-bottom: 0; }
.rs-amber ul { margin: 4px 0 0; padding-left: 18px; }
.rs-amber .btn { text-decoration: none; }
.rs-notice { border-left: 3px solid var(--brand-cyan); margin-bottom: 16px; }
.rs-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); border-left: 3px solid var(--danger); }
.rs-error p { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; }
.rs-stopped { border-left: 3px solid var(--warn); }
.rs-stopped .btn { margin-top: 10px; }
.rs-gone, .rs-empty { text-align: center; padding: 28px; }
.rs-empty .row { justify-content: center; margin-top: 12px; }

/* ---- the three tools in order (the same words as the menu) ---- */
.rs-pipe-box { margin-bottom: 14px; }
.rs-pipe-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.rs-pipe { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 22px; flex-wrap: wrap; }
.rs-pipe-step { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rs-pipe-step + .rs-pipe-step::before { content: "→"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 400; }
.rs-pipe-go { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 4px 2px 0; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; text-align: left; }
.rs-pipe-go:hover .rs-pipe-l, .rs-pipe-go:focus-visible .rs-pipe-l { color: var(--accent-text); }
.rs-pipe-go:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.rs-pipe-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); color: var(--text-muted); background: var(--surface); }
.rs-pipe-l { display: flex; flex-direction: column; line-height: 1.2; }
.rs-pipe-l small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.rs-pipe-step.now { color: var(--accent-text); }
.rs-pipe-step.now .rs-pipe-n { background: var(--brand-blue-solid); border-color: var(--brand-blue-solid); color: var(--surface); }
.rs-pipe-step.done { color: var(--success); }
.rs-pipe-step.done .rs-pipe-n { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.rs-pipe-step.next .rs-pipe-n { border-color: var(--brand-cyan); color: var(--accent-text); }
.rs-pipe-say { margin: 8px 0 0; }

/* ---- the start page ---- */
.rs-start { padding: 22px; }   /* Oct 30: a plain card — the cyan wash behind its top was decoration */
.rs-start-h { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.rs-intro { margin: 0 0 10px; }
.rs-car { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-small); background: var(--info-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; }
.rs .mm-drop[aria-disabled="true"] { opacity: .55; cursor: default; }
.rs-drop-row { justify-content: center; margin-top: 8px; }
.rs-choose { cursor: pointer; }
.rs-filelist { margin-top: 6px; min-height: 4px; }
.rs-paste { margin-top: 10px; font-size: 13px; }
.rs-paste summary, .rs-add summary, .rs-zip summary, .rs-none summary { cursor: pointer; font-weight: 500; color: var(--accent-text); }
.rs-paste textarea.input { width: 100%; min-height: 130px; margin-top: 8px; resize: vertical; }
.rs-look { margin-top: 14px; }
.rs-look-hint { margin: 6px 0 0; min-height: 18px; }
.rs-start-row { margin-top: 14px; }
.rs-start-row .input { flex: 1 1 200px; min-width: 0; }
.rs-lint { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-small); border: 1px solid var(--border); border-left: 3px solid var(--success); background: var(--success-soft); font-size: 13px; line-height: 1.45; }
.rs-lint.is-amber { border-left-color: var(--warn); background: var(--warn-soft); }
.rs-lint p { margin: 4px 0 0; }
.rs-lint ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.rs-autostart { margin-top: 14px; }
.rs-one { margin: 10px 0 0; }
.rs-kit > summary { list-style: none; cursor: default; }
.rs-kit > summary::-webkit-details-marker { display: none; }
.rs-kit-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.rs-kit-btns .btn { text-decoration: none; }
.rs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rs-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 34px 12px 14px; background: var(--surface); cursor: pointer; }
.rs-item:hover { border-color: var(--brand-cyan); box-shadow: var(--shadow-card); }
.rs-item:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; box-shadow: var(--glow-focus); }
.rs-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rs-item-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rs-item-x { position: absolute; top: 8px; right: 8px; opacity: .55; font-size: 12px; }
.rs-item-x:hover, .rs-item-x:focus-visible { opacity: 1; color: var(--danger); background: var(--danger-soft); outline: none; }
.rs-shared-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rs-shared-row:last-child { border-bottom: 0; }
.rs-shared-l { flex: 1; min-width: 0; font-size: 13px; }
.rs-guide { max-height: 60vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; line-height: 1.55; margin: 8px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }

/* ---- a small picture of a sheet (rows, the reading card): the whole sheet, never cropped ---- */
.rs-pic { width: 44px; height: 55px; flex: none; border-radius: 8px; background: var(--surface-subtle); border: 1px solid var(--border); object-fit: contain; display: block; }
.rs-glyph { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }

/* ---- one job: head + the five steps ---- */
.rs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rs-head .rs-title { flex: 1 1 220px; min-width: 0; max-width: 460px; font-weight: 600; font-size: 16px; }
.rs-head-file { margin-left: auto; }
.rs-stepper.mm-stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rs-stepper .mm-step-sub { min-height: 14px; }

/* ---- reading: a list that ticks itself, and the rows that land ---- */
.rs-ticks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.rs-ticks li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.rs-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.rs-ticks li.done { color: var(--text); }
.rs-ticks li.done .rs-tick { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.rs-ticks li.now { color: var(--accent-text); font-weight: 600; }
.rs-ticks li.now .rs-tick { border-color: var(--brand-cyan); }
.rs-landed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rs-group-h { margin: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rs-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rs-mini { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); font-size: 13px; }
.rs-mini.is-have { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: var(--surface); }
.rs-mini-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- step 2: what I found ---- */
.rs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.rs-main { min-width: 0; }
.rs-side { position: sticky; top: 0; display: grid; gap: 16px; }
.rs-side > .rs-card + .rs-card { margin-top: 0; }
.rs-und { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-cyan) 6%, var(--surface)), var(--surface) 90px); }
.rs-und-sum { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; }
.rs-und-notes { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.rs-unsure { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.rs-unsure li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rs-unsure-why { color: var(--text-muted); }
.rs-unsure-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rs-none { margin-top: 12px; font-size: 13px; }
.rs-none ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.rs-listcard .rs-group-h:first-of-type { margin-top: 0; }
.rs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rs-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.rs-row.is-off { background: var(--surface-subtle); }
.rs-row.is-off .rs-row-main, .rs-row.is-off .rs-row-pic { opacity: .5; }
.rs-row.is-added { border-color: color-mix(in srgb, var(--brand-blue) 50%, var(--border)); }
.rs-row-pic { border: 0; background: none; padding: 0; display: block; cursor: default; }
button.rs-row-pic { cursor: zoom-in; border-radius: 8px; }
button.rs-row-pic:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.rs-row-l { font-size: 14px; line-height: 1.4; }
.rs-kin { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; white-space: nowrap; }   /* the family, quietly: "Jim's mother" */
.rs-row-f { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.rs-pen { font-size: 13px; min-width: 28px; min-height: 28px; }
.rs-rename { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.rs-rename .input { flex: 1 1 260px; min-width: 0; color: var(--text); }
.rs-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rs-row-b { display: inline-flex; align-items: center; gap: 2px; }
.rs-add { margin-top: 14px; font-size: 13px; }
.rs-add-form { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-top: 10px; }
.rs-add-form .rs-lbl { margin: 0; font-weight: 500; }
.rs-add-form .btn { grid-column: 2; justify-self: start; }
.rs-auto { margin-top: 14px; }
.rs-auto .switch { display: inline-flex; align-items: center; gap: 8px; }
.rs-auto .help { margin: 4px 0 0; }
.rs-pay { border-color: color-mix(in srgb, var(--brand-cyan) 45%, var(--border)); }
.rs-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-price-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-price .help { flex-basis: 100%; }
.rs-time { margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.rs-over { color: var(--danger); }
.rs-pay .btn { margin: 4px 0 6px; }
.rs-pay .help { margin: 2px 0 0; }
.rs-limit.is-full { color: var(--warn); }

/* ---- steps 3, 4, 5: the band, the spotlight, the wall ---- */
.rs-top:empty { display: none; }
.rs-top > .rs-card { margin-bottom: 16px; }
.rs-band { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 14px 18px; margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.rs-band > * { grid-column: 1 / -1; min-width: 0; }
.rs-band-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rs-band-h { font-size: 16px; }
.rs-band-h:empty { display: none; }
.rs-band-facts { margin-left: auto; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rs-band .rs-prog { margin-top: 8px; }
.rs-prog.is-empty { opacity: .5; }
.rs-stage { margin: 8px 0 0; font-size: 14px; font-weight: 500; min-height: 20px; }
.rs-stage:empty, .rs-band-heal:empty, .rs-band-help:empty, .rs-band-ask:empty, .rs-band-ctl:empty, .rs-band-check:empty, .rs-check-b:empty, .rs-check-x:empty, .rs-check-list:empty, .rs-check-btns:empty { display: none; }
.rs-band.is-paused { border-left: 3px solid var(--warn); }
.rs-band.is-done { display: none; }   /* Done says it all in its own card; the band keeps its place in the page so nothing jumps */
.rs-band-heal { margin: 4px 0 0; }
.rs-band-ask p { margin: 8px 0 6px; font-size: 14px; font-weight: 500; }
.rs-band-ctl { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.rs-band-ctl .rs-auto { margin-top: 6px; flex: 1 1 300px; }
.rs-band-ctl .btn { margin-top: 6px; }
.rs-band-help { margin: 6px 0 0; }
.rs-check { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-small); border: 1px solid var(--border); border-left: 3px solid var(--brand-cyan); background: var(--info-soft); }
.rs-check.is-good { border-left-color: var(--success); background: var(--success-soft); }
.rs-check.is-amber { border-left-color: var(--warn); background: var(--warn-soft); }
.rs-check-h { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; }
.rs-check-b, .rs-check-x { margin: 4px 0 0; }
.rs-check-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.rs-check-btns { margin-top: 8px; }
.rs-live { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rs-spot { position: sticky; top: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 12px; display: grid; gap: 4px; min-width: 0; }
.rs-spot-pic { border: 0; padding: 0; background: var(--surface-subtle); border-radius: var(--radius-control); aspect-ratio: 4 / 5; max-height: 46vh; width: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; }
.rs-spot-pic:disabled { cursor: default; }
.rs-spot-pic:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.rs-spot-pic .rs-glyph { font-size: 54px; opacity: .45; }
.rs-spot-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-spot-h { font-weight: 600; font-size: 14px; margin-top: 6px; min-height: 20px; }
.rs-spot-wait { font-size: 13px; font-weight: 500; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.rs-spot-wait:empty, .rs-spot-words:empty, .rs-spot-u:empty, .rs-spot-f:empty { display: none; }
.rs-spot-words { font-size: 12px; line-height: 1.7; }
.rs-spot-words .rs-mono { padding: 1px 5px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.rs-wallbox { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 14px 16px; }
.rs-wall-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.rs-wall-h-r { margin-left: auto; }
.rs-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; }
.rs-tile { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-tile-pic { position: relative; border: 1.5px solid var(--border); border-radius: var(--radius-control); background: var(--surface-subtle); padding: 0; aspect-ratio: 4 / 5; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.rs-tile-pic:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.rs-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-tile-pic .rs-glyph { font-size: 30px; opacity: .35; }
.rs-tile-badge { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px); padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--brand-blue-solid); color: var(--surface); }
.rs-tile-badge:empty { display: none; }
.rs-tile-tick { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--success); color: var(--surface); }
.rs-bars { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: none; gap: 3px; align-items: flex-end; height: 14px; }
.rs-bars i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--brand-cyan); }
.rs-tile-l { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tile-f { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; overflow-wrap: normal; }
.rs-tile-s { font-size: 12px; line-height: 1.35; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 16px; }
.rs-tile-a { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.rs-tile-a .btn { flex: 1 1 100%; white-space: normal; font-size: 12px; min-height: 32px; padding: 4px 8px; }
.rs-tile.is-have .rs-tile-tick, .rs-tile.is-approved .rs-tile-tick { display: inline-flex; }
.rs-tile.is-have .rs-tile-s, .rs-tile.is-approved .rs-tile-s { color: var(--success); }
.rs-tile.is-wait .rs-tile-pic, .rs-tile.is-parked .rs-tile-pic, .rs-tile.is-left_out .rs-tile-pic { opacity: .55; }
.rs-tile.is-left_out .rs-tile-l { text-decoration: line-through; color: var(--text-muted); }
.rs-tile.is-making .rs-tile-pic, .rs-tile.is-fixing .rs-tile-pic { border-color: var(--brand-cyan); }
.rs-tile.is-making .rs-bars, .rs-tile.is-fixing .rs-bars { display: inline-flex; }
.rs-tile.is-making .rs-tile-s, .rs-tile.is-fixing .rs-tile-s { color: var(--accent-text); }
.rs-tile.is-fixing .rs-img { opacity: .45; }
.rs-tile.is-ready .rs-tile-pic, .rs-tile.is-amber .rs-tile-pic { border-color: var(--warn); }
.rs-tile.is-ready .rs-tile-s, .rs-tile.is-amber .rs-tile-s, .rs-tile.is-paused .rs-tile-s { color: var(--warn); }
.rs-tile.is-failed .rs-tile-pic { border-color: var(--danger); background: var(--danger-soft); }
.rs-tile.is-failed .rs-tile-pic .rs-glyph { opacity: .8; }
.rs-tile.is-failed .rs-tile-s { color: var(--danger); }
.rs-tile.is-pick .rs-tile-pic { box-shadow: 0 0 0 2px var(--brand-blue); }
.rs-more { position: relative; }
.rs-more > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 26px; cursor: pointer; }
.rs-more > summary::-webkit-details-marker { display: none; }
.rs-more-in { display: grid; gap: 4px; margin-top: 4px; }

/* ---- done ---- */
.rs-done-h { font-weight: 600; font-size: 18px; color: var(--success); }
.rs-done-say { margin: 4px 0 14px; }
.rs-done-say .rs-check { margin-top: 8px; }
.rs-done-say:empty { display: none; }
.rs-done-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
/* the Model choice before the send (Oct 17): Wan 3.0 Prime · Seedance 2.5, the server's label chip beside it */
.rs-engine { margin: 4px 0 12px; }
.rs-engine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-engine-label { font-weight: 600; white-space: normal; }
.rs-big { min-height: 52px; font-size: 16px; white-space: normal; text-align: center; text-decoration: none; }
/* the quiet "Send only" link under the one money button (Sep 20) */
.rs-send-only { margin: 8px 0 0; }
.rs-linkish { background: none; border: 0; padding: 0; margin: 0; color: var(--text-muted); font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.rs-linkish:hover, .rs-linkish:focus-visible { color: var(--accent-text); outline: none; }
.rs-done .rs-pipe-box { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.rs-zip { margin-top: 12px; font-size: 13px; }
.rs-tree { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); display: grid; gap: 2px; color: var(--text); }
.rs-tree .rs-mono { display: block; color: var(--text); }
.rs-tree .in1 { padding-left: 14px; }
.rs-tree .in2 { padding-left: 28px; }
.rs-tree .in3 { padding-left: 42px; }
.rs-receipt { margin: 12px 0 8px; }
.rs-done-more { margin-bottom: 8px; }

/* ---- motion, only when it is welcome ---- */
@media (prefers-reduced-motion: no-preference) {
  .rs-item { transition: border-color .15s, box-shadow .15s, transform .15s; }
  .rs-item:hover { transform: translateY(-1px); }
  .rs-tile-pic { transition: border-color .2s, box-shadow .3s, opacity .2s; }
  .rs-tile.is-making .rs-tile-pic::after, .rs-tile.is-fixing .rs-tile-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand-cyan) 22%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: rs-sweep 1.8s linear infinite; }
  .rs-bars i { animation: rs-bar 1s ease-in-out infinite; }
  .rs-bars i:nth-child(2) { animation-delay: .15s; }
  .rs-bars i:nth-child(3) { animation-delay: .3s; }
  .rs-tile.is-new .rs-tile-pic { animation: rs-land 2s ease-out 1; }
  .rs-stage.is-live::after { content: "…"; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: rs-dots 1.4s steps(4, end) infinite; }
  .rs-ticks li.now .rs-tick { animation: rs-pulse 1.4s ease-in-out infinite; }
  .rs-spot-img { animation: rs-fade .35s ease-out 1; }
}
@keyframes rs-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes rs-bar { 0%, 100% { height: 5px; } 50% { height: 14px; } }
@keyframes rs-land { 0% { box-shadow: 0 0 0 3px var(--brand-cyan), 0 0 22px color-mix(in srgb, var(--brand-cyan) 65%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes rs-dots { from { width: 0; } to { width: 1.2em; } }
@keyframes rs-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-cyan) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes rs-fade { from { opacity: .3; } to { opacity: 1; } }

/* ---- narrow screens ---- */
@media (max-width: 1000px) {
  .rs-cols, .rs-live { grid-template-columns: minmax(0, 1fr); }
  .rs-side { display: contents; }
  .rs-choices { order: 1; }
  .rs-main { order: 2; }
  .rs-pay { order: 3; position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); }
  .rs-spot { position: static; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 2px 14px; align-items: start; }
  .rs-spot-pic { grid-row: 1 / span 6; }
  .rs-head-file { margin-left: 0; }
}
@media (max-width: 900px) {
  /* one column: the kit moves right under the start card, the jobs come after it */
  .rs-list .rs-list-main, .rs-list .rs-list-side { display: contents; }
  .rs-list .rs-card { margin-top: 0; }
  .rs-list .rs-start { order: 0; }
  .rs-list .rs-kit { order: 1; }
  .rs-list .rs-jobs { order: 2; }
  .rs-list .rs-list-side > .rs-card:not(.rs-kit) { order: 3; }
}
@media (max-width: 640px) {
  .rs-card, .rs-start { padding: 14px; }
  .rs-band, .rs-wallbox { padding: 12px; }
  .rs-pipe { flex-direction: column; gap: 6px; }
  .rs-pipe-step + .rs-pipe-step::before { content: none; }
  .rs-kit > summary { cursor: pointer; list-style: revert; }
  .rs-start-row .btn, .rs-done-more .btn, .rs-band-ask .btn, .rs-check-btns .btn, .rs-empty .btn, .rs-error .btn, .rs-stopped .btn { flex: 1 1 100%; }
  .rs-head .rs-title { flex-basis: 100%; max-width: none; }
  /* a phone: the five steps become one row of numbered dots, and only the step you are on keeps its words */
  .rs-stepper.mm-stepper { display: flex; align-items: center; gap: 6px; }
  .rs-stepper .mm-step { padding: 6px; flex: 0 0 auto; }
  .rs-stepper .mm-step.now { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; }
  .rs-stepper.is-alldone .mm-step:last-child { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; }
  .rs-stepper:not(.is-alldone) .mm-step:not(.now) .mm-step-l, .rs-stepper .mm-step:not(.now) .mm-step-sub, .rs-stepper.is-alldone .mm-step:not(:last-child) .mm-step-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rs-row { grid-template-columns: 44px minmax(0, 1fr); }
  .rs-row-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .rs-listcard { padding-bottom: 20px; }
  .rs-add-form { grid-template-columns: minmax(0, 1fr); }
  .rs-add-form .btn { grid-column: 1; justify-self: stretch; }
  .rs-pay { border-radius: var(--radius-card) var(--radius-card) 0 0; padding: 10px 14px 12px; }
  .rs-pay .rs-price { margin-bottom: 2px; }
  .rs-pay .rs-time, .rs-pay .rs-price .help { display: none; }
  .rs-spot { grid-template-columns: minmax(0, 1fr); }
  .rs-spot-pic { grid-row: auto; max-height: 46vh; }
  .rs-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .rs-tile-a .btn { min-height: 44px; }
  .rs-more > summary { min-width: 44px; min-height: 44px; }
  .rs-band-facts { margin-left: 0; flex-basis: 100%; }
  .rs-done-btns { grid-template-columns: minmax(0, 1fr); }
  .rs-items, .rs-minis { grid-template-columns: minmax(0, 1fr); }
  .rs-unsure-btns .btn { flex: 1 1 auto; }
}

/* Sep 19 live run: what the TOOL left out is one folded line, never a tile with a button; what it decided is a quiet line on Done */
.rs-notneeded { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
.rs-notneeded summary { cursor: pointer; list-style: none; }
.rs-notneeded summary::-webkit-details-marker { display: none; }
.rs-notneeded-list { margin: 8px 0 0; padding-left: 18px; }
.rs-notneeded-list li { margin: 2px 0; }
.rs-quiet { margin: 10px 0 0; }
.rs-quiet .help { margin: 2px 0; }