/* GPT Image Prompt 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; }
}