/* ============================================================
   USONIA HOUSE · RENDER STUDIO · STYLES
   Uses the dashboard's existing tokens only. Nothing new is
   invented: --paper, --ink, --accent, --tech, --s1..--s5, phi.
   ============================================================ */

/* ---------- mode selector ---------------------------------- */
.rs-modes{
  display:flex;gap:0;border:2px solid var(--ink);margin-bottom:var(--s3);
}
.rs-modes button{
  flex:1 1 0;padding:14px 10px;background:transparent;color:var(--ink-2);
  font-family:var(--tech);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;transition:.16s;border-right:1px solid var(--rule-soft);min-height:var(--tap);
}
.rs-modes button:last-child{border-right:none}
.rs-modes button:hover{color:var(--ink);background:var(--bg-sink)}
.rs-modes button[aria-selected="true"]{background:var(--ink);color:var(--bg-raise)}

/* ---------- layout ----------------------------------------- */
.rs-split{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s3);align-items:start}
@media (max-width:900px){ .rs-split{grid-template-columns:1fr} }

/* ---------- dropzone --------------------------------------- */
.rs-drop{
  border:2px dashed var(--rule);padding:var(--s4) var(--s3);text-align:center;
  cursor:pointer;transition:.16s;background:var(--bg-sink);position:relative;
}
.rs-drop:hover,.rs-drop.over{border-color:var(--accent);background:var(--bg-raise)}
.rs-drop.has-file{padding:0;border-style:solid;border-color:var(--ink);background:transparent}
.rs-drop img{width:100%;display:block}
.rs-drop .rs-dz-icon{
  width:38px;height:38px;margin:0 auto var(--s2);display:block;fill:none;
  stroke:var(--ink-3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.rs-drop .rs-dz-title{
  font-family:var(--tech);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-txt);font-weight:700;margin-bottom:6px;
}
.rs-drop .rs-dz-sub{font-size:13px;color:var(--ink-3);font-style:italic;line-height:1.6}
.rs-drop input[type=file]{display:none}
.rs-swap{
  position:absolute;top:8px;right:8px;background:var(--bg-sink);border:1px solid var(--ink);
  padding:5px 10px;font-family:var(--tech);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);opacity:.9;
}

/* ---------- generated form --------------------------------- */
.rs-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.rs-fields .rs-full{grid-column:1 / -1}
@media (max-width:560px){ .rs-fields{grid-template-columns:1fr} }

/* colour swatch picker */
.rs-swatches{display:flex;flex-wrap:wrap;gap:7px}
.rs-swatch{
  width:34px;height:34px;border:2px solid var(--rule-soft);position:relative;
  transition:.14s;flex:0 0 auto;
}
.rs-swatch:hover{transform:translateY(-2px);border-color:var(--ink-2)}
.rs-swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg-raise) inset}
.rs-swatch[aria-pressed="true"]::after{
  content:"";position:absolute;inset:auto 0 -6px 0;height:2px;background:var(--accent);
}
.rs-swatch-name{
  font-size:12px;color:var(--ink-2);margin-top:8px;font-style:italic;min-height:1.3em;
}

/* proven badge on an option that has earned keeps */
.rs-proven{
  display:inline-block;margin-left:7px;padding:1px 6px;font-family:var(--tech);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent-txt);vertical-align:1px;
}

/* ---------- prompt preview --------------------------------- */
.rs-prompt{
  border:1px solid var(--rule-soft);background:var(--bg-sink);margin-top:var(--s2);
}
.rs-prompt summary{
  padding:11px 14px;cursor:pointer;font-family:var(--tech);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);list-style:none;
  display:flex;align-items:center;gap:8px;
}
.rs-prompt summary::-webkit-details-marker{display:none}
.rs-prompt summary::before{content:"▸";color:var(--accent-txt);transition:.16s}
.rs-prompt[open] summary::before{transform:rotate(90deg)}
.rs-prompt summary:hover{color:var(--ink)}
.rs-prompt .rs-prompt-body{
  padding:0 14px 14px;font-size:12px;line-height:1.7;color:var(--ink-2);
  max-height:320px;overflow-y:auto;white-space:pre-wrap;
}
.rs-prompt .rs-blk{margin-bottom:12px;padding-left:11px;border-left:2px solid var(--rule-soft)}
.rs-prompt .rs-blk[data-key="geometry"],
.rs-prompt .rs-blk[data-key="geometry-restate"]{border-left-color:var(--accent)}
.rs-prompt .rs-blk b{
  display:block;font-family:var(--tech);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;font-weight:700;
}

/* ---------- run bar ---------------------------------------- */
.rs-run{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.rs-run .spacer{flex:1 1 auto}
.rs-cost{font-family:var(--tech);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- working state ---------------------------------- */
.rs-working{
  border:1px solid var(--rule-soft);padding:var(--s4) var(--s3);text-align:center;
  background:var(--bg-sink);
}
.rs-working .rs-bar{height:2px;background:var(--rule-soft);overflow:hidden;margin:var(--s3) auto 0;max-width:280px}
.rs-working .rs-bar i{display:block;height:100%;width:34%;background:var(--accent);animation:rs-slide 1.5s ease-in-out infinite}
@keyframes rs-slide{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
.rs-working .rs-step{
  font-family:var(--tech);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-txt);
}
.rs-working .rs-elapsed{font-size:12px;color:var(--ink-3);font-style:italic;margin-top:8px}

/* ---------- compare ---------------------------------------- */
.rs-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media (max-width:760px){ .rs-compare{grid-template-columns:1fr} }
.rs-pane{border:1px solid var(--rule-soft);background:var(--bg-sink)}
.rs-pane h5{
  margin:0;padding:9px 12px;font-family:var(--tech);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule-soft);font-weight:700;
}
.rs-pane img{width:100%;display:block;cursor:zoom-in}
.rs-verdict{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3);flex-wrap:wrap}
.rs-verdict .spacer{flex:1 1 auto}
.rs-stars{display:flex;gap:3px}
.rs-stars button{width:26px;height:26px;color:var(--ink-3);transition:.12s}
.rs-stars button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.rs-stars button.on{color:var(--accent-txt)}
.rs-stars button.on svg{fill:currentColor}

/* ---------- gallery ---------------------------------------- */
.rs-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s2)}
.rs-card{border:1px solid var(--rule-soft);background:var(--bg-sink);transition:.16s;position:relative}
.rs-card:hover{border-color:var(--ink-2);transform:translateY(-2px)}
.rs-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;cursor:zoom-in}
.rs-card .rs-cap{padding:9px 11px}
.rs-card .rs-cap b{
  display:block;font-size:13px;color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rs-card .rs-cap span{
  display:block;font-family:var(--tech);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px;
}
.rs-card .rs-reuse{
  position:absolute;top:7px;right:7px;background:var(--bg-raise);border:1px solid var(--ink);
  padding:4px 8px;font-family:var(--tech);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:0;transition:.16s;
}
.rs-card:hover .rs-reuse{opacity:1}

/* ---------- proven recipes --------------------------------- */
.rs-recipes{display:flex;flex-direction:column;gap:2px}
.rs-recipe{
  display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px dotted var(--rule-soft);font-size:13px;
}
.rs-recipe .rs-r-name{color:var(--ink-2)}
.rs-recipe .rs-r-dots{flex:1 1 auto;border-bottom:1px dotted var(--rule-soft);transform:translateY(-3px)}
.rs-recipe .rs-r-rate{font-family:var(--display);font-weight:600;color:var(--accent-txt);font-size:14px}
.rs-recipe .rs-r-n{font-family:var(--tech);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3)}

/* ---------- lightbox --------------------------------------- */
.rs-light{
  position:fixed;inset:0;background:rgba(18,16,13,.94);z-index:400;display:none;
  align-items:center;justify-content:center;padding:3vh 3vw;cursor:zoom-out;
}
.rs-light.open{display:flex}
.rs-light img{max-width:100%;max-height:94vh;width:auto;object-fit:contain}

/* ---------- notice ----------------------------------------- */
.rs-note{
  border-left:3px solid var(--accent);background:var(--bg-sink);padding:12px 15px;
  font-size:13px;line-height:1.65;color:var(--ink-2);margin-bottom:var(--s3);
}
.rs-note b{color:var(--ink);font-weight:600}