/* Product Shot Lab — one column, three numbered steps, nothing competing for attention.
 * Every colour is a token defined on :root and swapped under [data-theme="dark"], so the theme
 * toggle flips one attribute and nothing else has to know about it. */

:root {
  --bg: #f7f6f3;
  --panel: #ffffff;
  --panel-2: #faf9f7;
  --ink: #1b1a17;
  --ink-2: #55524c;
  --ink-3: #86827a;
  --line: #e3e0d9;
  --line-2: #d2cec4;
  --accent: #b4471f;
  --accent-ink: #ffffff;
  --accent-soft: #fbeee8;
  --ok: #2f6b46;
  --ok-soft: #e8f2ec;
  --warn: #8a6320;
  --warn-soft: #fbf1de;
  --err: #a32d22;
  --err-soft: #fbe9e6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(27, 26, 23, .06), 0 8px 24px rgba(27, 26, 23, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

[data-theme="dark"] {
  --bg: #16151a;
  --panel: #1e1d23;
  --panel-2: #24232a;
  --ink: #ece9e4;
  --ink-2: #b3aea6;
  --ink-3: #837e77;
  --line: #302e37;
  --line-2: #3d3a45;
  --accent: #e2794c;
  --accent-ink: #1b120d;
  --accent-soft: #2b1d16;
  --ok: #7fc79c;
  --ok-soft: #17251d;
  --warn: #d9ac60;
  --warn-soft: #2a2113;
  --err: #e88a7d;
  --err-soft: #2c1815;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.locked { overflow: hidden; }

.wrap { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; }

.mono { font-family: var(--mono); font-size: .85em; }
.muted { color: var(--ink-3); }
.hidden { display: none !important; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* --- header ---------------------------------------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), #d9a441);
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chip {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--accent); color: var(--accent); }

.icon-btn {
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- buttons --------------------------------------------------------------------------------- */

.btn {
  font: inherit; font-weight: 550; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
  padding: 9px 16px; border-radius: 9px; transition: border-color .12s, background .12s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  padding: 11px 22px; font-size: 15.5px;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); color: var(--accent-ink); }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }
.btn-tiny { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* --- steps ----------------------------------------------------------------------------------- */

.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 26px 28px;
  margin: 22px 0;
  box-shadow: var(--shadow);
  /* The header is sticky and 56px tall, so a scrollIntoView({block:"start"}) — which is how
   * opening a demo, finishing a run and restoring a history row all move the page — would park
   * the section heading underneath it. */
  scroll-margin-top: 74px;
}
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.step-n {
  flex: none; width: 27px; height: 27px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.step h1, .step h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; font-weight: 640; }
.step h1 { font-size: 24px; }
.lede { color: var(--ink-2); margin: 10px 0 18px; max-width: 68ch; }

.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

textarea, input[type="search"], select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 11px 13px;
}
textarea { resize: vertical; line-height: 1.62; }
#prompt { font-size: 14.5px; min-height: 300px; }
textarea:focus, input:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px;
  border-color: var(--accent);
}

.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.field select { min-width: 150px; }
.field-grow { flex: 1 1 220px; }
.field-grow select { width: 100%; }

.run-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.meter { color: var(--ink-3); font-size: 13.5px; }

.gate {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--ink-2); font-size: 14px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* --- the template match card ------------------------------------------------------------------ */

.match {
  margin-top: 16px; padding: 14px 16px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.match-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.match-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.match-desc { margin: 7px 0 0; color: var(--ink-2); font-size: 14px; }
.match-why, .match-alts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0 0; }
.match-hint { margin: 9px 0 0; font-size: 13px; color: var(--ink-3); }
.match-none { margin: 0; color: var(--ink-2); font-size: 14px; }

.tag {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.tag-quiet { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }

/* --- progress -------------------------------------------------------------------------------- */

.progress {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px; margin: 22px 0; box-shadow: var(--shadow);
}
.progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
/* The progress rows are .pstep, deliberately NOT .step — the section cards already own .step and
 * a shared name meant every progress row inherited a card's padding, border and shadow. */
.step-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-2); transition: background .2s;
}
.pstep { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.pstep-on { color: var(--ink); font-weight: 550; }
.pstep-on .step-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.pstep-done { color: var(--ink-2); }
.pstep-done .step-dot { background: var(--ok); }
.pstep-failed .step-dot { background: var(--err); }
.step-note { margin-left: auto; color: var(--ink-3); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- the prompt and its checker ---------------------------------------------------------------- */

.why {
  margin: 0 0 14px; padding: 11px 14px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--ink-2); font-size: 14.5px;
}
.notes { display: grid; gap: 8px; margin-bottom: 14px; }
.note { padding: 10px 13px; border-radius: 9px; font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.note-warn { background: var(--warn-soft); color: var(--warn); }
.note-error { background: var(--err-soft); color: var(--err); }
.note strong { flex: none; }

.prompt-grid { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
.prompt-main { min-width: 0; }

.checker {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 15px 16px;
}
.checker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.checker-note { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-3); }
.pill {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; background: var(--line); color: var(--ink-2);
}
.pill-strong { background: var(--ok-soft); color: var(--ok); }
.pill-workable { background: var(--warn-soft); color: var(--warn); }
.pill-thin { background: var(--warn-soft); color: var(--warn); }
.pill-blocked { background: var(--err-soft); color: var(--err); }
.pill-empty { background: var(--line); color: var(--ink-3); }

.blocks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.block { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.block-dot { width: 15px; text-align: center; font-weight: 700; }
.block-on { color: var(--ink); }
.block-on .block-dot { color: var(--ok); }
.block-off { color: var(--ink-3); }

.findings { display: grid; gap: 8px; }
.finding {
  font-size: 12.8px; line-height: 1.5; padding: 9px 11px; border-radius: 8px;
  display: grid; gap: 2px; background: var(--panel);
  border: 1px solid var(--line);
}
.finding strong { font-size: 12.5px; }
.finding-error { background: var(--err-soft); border-color: transparent; color: var(--err); }
.finding-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.finding-note { color: var(--ink-2); }

.variations { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* --- the picture ------------------------------------------------------------------------------- */

.stage { margin: 18px 0 0; padding: 0; }
.stage img {
  display: block; max-width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.stage figcaption { margin-top: 9px; font-size: 13.5px; }

/* --- demos ------------------------------------------------------------------------------------- */

.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.demo {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.demo-shot { margin: 0; background: var(--bg); }
.demo-shot img { display: block; width: 100%; height: 170px; object-fit: cover; }
.demo-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.demo-body h3 { margin: 0; font-size: 15.5px; font-weight: 640; }
.demo-req { margin: 0; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 3px; }
.demo-req-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.demo-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.demo-why { margin: 0; font-size: 13px; color: var(--ink-3); }
.demo-body .btn { align-self: flex-start; margin-top: auto; }
.demo-prov { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* --- history ----------------------------------------------------------------------------------- */

.history { display: grid; gap: 12px; }
.hist { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; }
.hist-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-req { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* --- the case library drawer --------------------------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(20, 18, 16, .5); display: flex; justify-content: flex-end; }
.drawer-panel {
  width: min(680px, 100%); height: 100%; background: var(--panel);
  border-left: 1px solid var(--line); padding: 20px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font-size: 19px; }
.drawer-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.drawer-controls input { flex: 1 1 240px; }
.drawer-controls select { flex: 0 1 200px; }
.drawer-foot { font-size: 12.5px; margin: 4px 0 0; }

.cases { display: grid; gap: 12px; }
.case { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); }
.case-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-prompt {
  margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.case-slots { margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }
.case-by { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* --- toast, footer ------------------------------------------------------------------------------ */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 80; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow);
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
}
.toast-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.toast-err { background: var(--err-soft); color: var(--err); border-color: transparent; }

.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 44px; color: var(--ink-3); font-size: 13px; }
.foot p { margin: 0 0 10px; max-width: 78ch; }
.foot code { font-family: var(--mono); font-size: .92em; }

/* --- narrow ------------------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .prompt-grid { grid-template-columns: 1fr; }
  .step { padding: 20px 18px 22px; border-radius: 12px; }
  .step h1 { font-size: 21px; }
  .wrap { padding: 0 14px; }
  .demo-shot img { height: 150px; }
}

/* --- reference pictures ------------------------------------------------------------------------ */

/* The writer reads these; the renderer never does. The zone stays quiet until it matters and
   turns amber when the prompt in play actually points at an attachment. */
.refzone { margin-top: 16px; }
.ref-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ref-head .lbl { margin-bottom: 0; }
.ref-head .muted { font-weight: 500; }
.ref-note { font-size: 12.8px; color: var(--ink-3); text-align: right; }
.ref-note.ref-wanted { color: var(--warn); font-weight: 600; }

.ref-drop {
  margin-top: 7px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed var(--line-2); background: var(--panel-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  transition: border-color .15s, background .15s;
}
.ref-drop.ref-over { border-color: var(--accent); background: var(--accent-soft); }
.refzone.ref-wanted .ref-drop { border-color: var(--warn); background: var(--warn-soft); }
.ref-hint { font-size: 12.8px; color: var(--ink-3); line-height: 1.5; flex: 1 1 300px; }
.ref-hint strong { color: var(--ink-2); font-weight: 650; }

.ref-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ref-item {
  position: relative; width: 92px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel-2);
}
.ref-item img { display: block; width: 100%; height: 68px; object-fit: cover; }
.ref-item figcaption {
  font-size: 10.5px; color: var(--ink-3); padding: 4px 6px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-drop-btn {
  position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 12px; line-height: 1;
  background: rgba(20, 18, 16, .72); color: #fff;
}
.ref-drop-btn:hover { background: var(--err); }

/* The same attachments, mirrored into the prompt editor. The block they fix fires down here, so
   the fix has to be reachable from here too rather than sending the reader back up to step 1. */
.ref-inline { margin: 0 0 9px; }
.ref-inline-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ref-inline-note { font-size: 12.8px; color: var(--ink-3); flex: 1 1 240px; }
.ref-inline.ref-wanted .ref-inline-note { color: var(--warn); font-weight: 600; }
.ref-inline .ref-list { margin-top: 8px; }
.ref-inline .ref-item { width: 68px; }
.ref-inline .ref-item img { height: 50px; }

/* One control for the interface language AND the language the prompt is written in. */
.lang-select {
  width: auto; font-size: 12.5px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
}
.lang-select:hover { border-color: var(--accent); color: var(--accent); }

/* A case row is a thumbnail beside its text. The picture is what makes 541 rows skimmable —
   without it every row is a wall of prompt prose and nobody scrolls past the first screen. */
.case { display: flex; gap: 12px; align-items: flex-start; }
.case-shot {
  flex: none; width: 104px; border-radius: 8px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
}
.case-shot img { display: block; width: 100%; height: 78px; object-fit: cover; }
.case-body { min-width: 0; flex: 1; }

@media (max-width: 560px) {
  .case { flex-direction: column; }
  .case-shot { width: 100%; }
  .case-shot img { height: 132px; }
}

/* ===== Product Shot Lab — layout on top of the shared shell ===================================== */

/* photos: a drop zone that becomes a strip of previews */
.ph-drop {
  margin-top: 8px; padding: 18px 16px; border-radius: 12px; text-align: center;
  border: 1.5px dashed var(--line-2); background: var(--panel-2); color: var(--ink-2); font-size: 14px;
  transition: border-color .15s, background .15s;
}
.ph-drop.ref-over { border-color: var(--accent); background: var(--accent-soft); }
.ph-drop .btn { margin: 0 4px; }
.ph-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.ph-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ph-item { position: relative; width: 118px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel-2); }
.ph-item img { display: block; width: 100%; height: 88px; object-fit: cover; }
.ph-item .nopreview { height: 88px; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
.ph-item figcaption { font-size: 10.5px; color: var(--ink-3); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.ph-note.ref-wanted { color: var(--warn); font-weight: 600; }

/* the product form */
.form-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; margin-top: 16px; }
.form-grid input[type="text"] { width: 100%; font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }

/* shot toggles */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.shot-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-size: 13.5px;
}
.shot-opt input { margin-top: 3px; accent-color: var(--accent); }
.shot-opt strong { display: block; font-size: 13.5px; }
.shot-opt span { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.shot-opt.is-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }

/* the product card as an editable form */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.card-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.card-grid input, .card-grid textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 10px; }
.card-grid .wide { grid-column: 1 / -1; }
.card-grid textarea { min-height: 64px; resize: vertical; }
.card-lede { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }

/* one card per shot */
.brief-list { display: grid; gap: 16px; margin-top: 14px; }
.brief { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.brief-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brief-head strong { font-size: 15px; }
.brief-head .order { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.brief-body { display: grid; grid-template-columns: 1fr 260px; gap: 14px; padding: 14px; }
.brief-body textarea { width: 100%; min-height: 190px; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; resize: vertical; }
.brief-side { display: flex; flex-direction: column; gap: 10px; }
.brief-check { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--panel); font-size: 12.5px; }
.brief-check .pill { float: right; }
.brief-check .finding { margin-top: 8px; }
.brief-stage img { display: block; width: 100%; border-radius: 9px; border: 1px solid var(--line); }
.brief-stage figcaption { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.brief-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 14px 14px; }
.brief-foot .mono { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.preview-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.pill-ready { background: var(--ok-soft); color: var(--ok); }
.pill-check { background: var(--warn-soft); color: var(--warn); }

/* the finished set, in listing order */
.set-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0 6px; }
.set-notes { display: grid; gap: 6px; margin-top: 8px; }

@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .brief-body { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}

/* --- 2026-09-04 restructure: learned from the Prompt Lab ------------------------------------- */

/* a picture above the fold */
.hero { display: flex; gap: 26px; align-items: flex-start; }
.hero .lede { flex: 1; }
.hero-pair { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 10px; text-decoration: none; color: inherit; }
.hero-pair figure { margin: 0; width: 136px; }
.hero-pair img { display: block; width: 136px; height: 136px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.hero-pair:hover img { border-color: var(--accent); }
.hero-pair figcaption { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.35; }
.hero-arrow { color: var(--accent); font-size: 22px; font-weight: 700; margin-bottom: 22px; }

/* the marketplace's rules where the marketplace is chosen */
.rules { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.rules strong { color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }

/* compact shot picker: one line per shot */
.shot-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.shot-opt { align-items: center; padding: 8px 11px; }
.shot-opt input { margin-top: 0; }
.shot-opt .shot-txt { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.shot-opt strong { display: inline; white-space: nowrap; }
.shot-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* step 2 as a placeholder until the reader has run */
.step-pending { border-style: dashed; padding-top: 16px; padding-bottom: 16px; box-shadow: none; }
.step-pending .step-n { background: var(--line); color: var(--ink-3); }
.step-pending h2 { color: var(--ink-3); }
.step-pending .lede { margin: 6px 0 0; font-size: 14px; }

/* the set as a strip of tiles, in listing order */
.set-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.tile { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tile img, .tile-empty { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tile-empty { display: grid; place-items: center; text-align: center; padding: 8px; color: var(--ink-3); font-size: 12px; line-height: 1.35;
  background: repeating-linear-gradient(45deg, var(--panel-2) 0 8px, var(--bg) 8px 16px); }
.tile-cap { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; }
.tile-cap strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-cap .order { flex: none; width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }
.tile-cap .dot { margin-left: auto; }
.tile.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.dot-ready { background: var(--ok); } .dot-check { background: var(--warn); } .dot-blocked { background: var(--err); }

/* tabs: one brief editor at a time */
.brief-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 0; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--panel-2); border-color: var(--line); color: var(--ink); font-weight: 600; }
.tab .order { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.tab img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; border: 1px solid var(--line); }
.brief-list { gap: 0; margin-top: 0; }
.brief { display: none; border-top-left-radius: 0; }
.brief.is-active { display: block; }
.brief-body { grid-template-columns: 1fr 300px; }
.brief-body textarea { min-height: 330px; }
.brief-check strong { display: block; margin-bottom: 4px; }
.brief-check .blocks { margin: 6px 0 4px; gap: 4px; }
.brief-check .block { font-size: 12.5px; }

/* the worked example: before -> after, both whole */
.demos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.demo-shot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; background: var(--bg); }
.demo-shot figure { margin: 0; }
.demo-shot img { height: auto; aspect-ratio: 1 / 1; border-radius: 9px; border: 1px solid var(--line); }
.demo-shot figcaption { font-size: 11px; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.demo-arrow { color: var(--accent); font-size: 20px; font-weight: 700; }

@media (max-width: 760px) {
  .hero { flex-direction: column; gap: 6px; }
  .hero-pair figure { width: 112px; } .hero-pair img { width: 112px; height: 112px; }
  .demo-shot img { height: auto; }
  .brief-body textarea { min-height: 240px; }
  .brief-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex: none; }
}
@media (max-width: 480px) { .shot-opt span { display: none; } .set-strip { grid-template-columns: repeat(3, 1fr); } }

/* polish after the first live look */
.hero-pair { align-items: flex-start; }
.hero-pair figcaption { min-height: 2.7em; }
.hero-arrow { margin: 0; align-self: flex-start; margin-top: calc(68px - .6em); }
.set-bar .meter { flex: 1 1 160px; }
.set-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.demo { max-width: 640px; }
.demo-shot { align-items: start; }
.demo-shot figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-arrow { align-self: start; margin-top: calc(50% - .6em); }
@media (max-width: 760px) { .hero-arrow { margin-top: calc(56px - .6em); } .set-actions { margin-left: 0; } }
/* equal halves regardless of caption width; the price line keeps to one row */
.demo-shot { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.demo-shot figure { min-width: 0; }
.set-bar .meter { flex: 1 1 260px; }