/*
 * The prompt editor, in the platform admin.
 *
 * A prompt is code that happens to be prose: whitespace and line breaks change
 * what the model draws, so it is shown monospaced and pre-wrapped rather than
 * as flowing text. Rendering it as a paragraph would collapse the blank lines
 * that separate its instructions, and the reader would be reviewing something
 * other than what is sent.
 */

.prompt-body {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-body-leading);
  /* pre-wrap, not pre: the prompt's own newlines are meaningful and must be
     kept, but a long line must not force the page to scroll sideways. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-problems {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--danger-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.prompt-problems li + li {
  margin-top: var(--space-2);
}

/*
 * The credit meter on the OpenRouter card.
 *
 * A bar, not a number, because the question a reader has is "how close is this
 * to stopping" and a bar answers it without arithmetic. Gold while there is
 * room, brick past 80% — the one place in the interface where a semantic colour
 * is doing work rather than decorating (D27).
 *
 * No box-shadow and no gradient beyond the gold one the tokens already define.
 */

.credit-meter {
  /* --space-2 (8px) is a SPACING token doing a size job. Chosen over minting a
     --meter-height for one card, and over --rule-width, which at 2px is a
     hairline and disappears under a gold fill. If a second meter ever appears,
     that is the moment to give it a token of its own. */
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  overflow: hidden;
}

.credit-meter__fill {
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  transition: inline-size var(--duration-base) var(--easing-standard);
}

.credit-meter__fill--low {
  background: var(--danger);
}

.credit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.credit-card p {
  margin: 0;
}

.credit-headline {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  font-weight: var(--font-weight-semibold);
}

/*
 * ---------------------------------------------------------------------------
 * The prompt library.
 * ---------------------------------------------------------------------------
 */

/*
 * The variables a body implies, shown as chips beneath it.
 *
 * They are DERIVED, not authored — the editor reads them off the placeholders
 * as you type — so they are presented as a readout with one control on each,
 * not as a form. A list of inputs would suggest the names are yours to set;
 * they are the body's.
 */

.prompt-vars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prompt-vars:empty::after {
  content: "No variables yet — write {{a_placeholder}} in the body above.";
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.prompt-var {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.prompt-var__name {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.prompt-var__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
}

/*
 * The fragment palette beside the body.
 *
 * Clicking one inserts its marker at the cursor. It sits next to the textarea
 * rather than under it because the question it answers — "what can I reuse
 * here" — is asked while writing, not after.
 */

.prompt-compose {
  display: grid;
  grid-template-columns: 1fr minmax(var(--prompt-palette-min), max-content);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 720px) {
  .prompt-compose {
    grid-template-columns: 1fr;
  }
}

.prompt-palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prompt-palette__heading {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.prompt-palette__button {
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

.prompt-palette__button:hover {
  border-color: var(--gold-rest);
  background-color: var(--gold-wash-hover);
  color: var(--text-primary);
}

.prompt-palette__button:focus-visible {
  outline: var(--focus-ring-outline) solid var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

.prompt-palette__name {
  display: block;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.prompt-art {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--prompt-art-size);
  aspect-ratio: 1 / 1;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
  object-fit: cover;
}

/* No image yet — a trial that has not run, or one that failed. Dashed, so an
   absent picture reads as a slot rather than as a broken one. */
.prompt-art--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  text-align: center;
}

.prompt-art--failed {
  border-color: var(--danger-rest);
  color: var(--danger-text);
}

/*
 * The spend line above the trial button.
 *
 * Stated as money, before the control, every time. This is the only screen in
 * the product where a person deliberately spends to look at something, and the
 * price is not something they should have to remember.
 */

.prompt-spend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--warning-border);
  border-radius: var(--radius-sm);
  background-color: var(--warning-wash);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.prompt-spend__amount {
  color: var(--text-gold);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/*
 * ---------------------------------------------------------------------------
 * The workbench layout.
 *
 * The prompt pages widen to --shell-workbench-width (shells.css) and, from
 * 1280px, put the words and the pictures side by side. Below 1280 everything
 * stacks — the same content in reading order, never a squeezed second column.
 * 1280 is written as a literal because a media query cannot read a custom
 * property; it is --shell-workbench-width.
 *
 * Actions are compact and sit at the end of their row. The pages used to borrow
 * .auth-actions from the sign-in screens, whose buttons are full width because
 * a phone-width form has one thing to do; here "Draw it" was 878px wide and the
 * pages read as a sign-up wizard rather than a tool.
 * ---------------------------------------------------------------------------
 */

.workbench-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.workbench-stack--after {
  margin-top: var(--space-4);
}

.workbench-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.workbench-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.workbench-actions--start {
  justify-content: flex-start;
}

/* The default submit first in the markup, shown last. With row-reverse,
   flex-start is the right-hand end, matching the ordinary row. */
.workbench-actions--reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* A card's body is not a stack, so the first thing after a paragraph needs
   its own breathing room — without it an action row sits flush under the
   sentence that explains it. */
* + .workbench-actions,
.workbench-prose + .workbench-muted,
.workbench-prose + .prompt-inputs,
.workbench-prose + .prompt-vars,
.workbench-prose + .workbench-fields,
.workbench-prose + .ui-actions,
.workbench-muted + .ui-actions {
  margin-top: var(--space-3);
}

/* A sentence of explanation on a platform admin page. It replaces the sign-in
   screen's .auth-prose, which these pages had borrowed (D170): same colour and
   size, but owned by the pages that use it, so a change to the sign-in column
   no longer reaches a cost report. */
.workbench-prose {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* `button_to` wraps its button in a <form>, which is a block. Inside a row of
   actions that pushes the button onto a line of its own. */
.workbench-inline-form {
  display: inline-flex;
  margin: 0;
}

.workbench-muted {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.workbench-link {
  color: var(--text-gold);
  font-size: var(--type-body-size);
  text-decoration: none;
}

.workbench-link:hover {
  text-decoration: underline;
}

.workbench-static {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* The header's version switcher: narrower than a form field, because it sits
   beside three buttons. */
.workbench-picker .ui-select {
  inline-size: var(--workbench-picker-narrow);
}

/*
 * The fact strip under a page header — model, saved, draws, spend — in one
 * line of small type instead of a card of label/value rows, so the facts are
 * there without costing the page its first screen.
 */
.workbench-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: calc(var(--space-2) - var(--space-6)) 0 var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.workbench-facts--card {
  margin: 0;
}

.workbench-fact b {
  margin-right: var(--space-1);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.workbench-fact a {
  color: var(--text-gold);
}

/* A sentence that has to be read before a button is pressed: what "Make live"
   does, what is left of the drawing budget. Gold-edged like the spend line,
   because it is the same kind of statement. */
.workbench-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--warning-border);
  border-radius: var(--radius-sm);
  background-color: var(--warning-wash);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.workbench-note strong {
  color: var(--text-gold);
}

.workbench-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* On the content column's width, not the window's (D176): beside the rail a
   1280 window leaves 976px for the page. */
@container admin-content (min-width: 960px) {
  .workbench-split {
    grid-template-columns: minmax(0, 1fr) var(--workbench-side-width);
  }

  /* Pinned while the prompt scrolls, so the pictures stay beside the words
     that drew them. It scrolls itself only if it is taller than the window —
     with "Change the details" open on a short laptop screen — rather than
     hiding its own button below the fold. */
  .workbench-split__side {
    position: sticky;
    top: var(--sticky-offset);
    max-block-size: calc(100dvh - var(--sticky-offset) - var(--space-5));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* The trial page leads with the picture, which is the larger half. */
  .workbench-split--art {
    grid-template-columns: minmax(0, 1fr) var(--workbench-side-width);
  }

  .workbench-split--art .workbench-split__side {
    position: static;
    max-block-size: none;
    overflow: visible;
  }
}

/* The draw form's fields: two across in the side column, more when stacked
   full width, and always a real gap between one input and the next label. */
.workbench-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--workbench-field-min), 30%), 1fr));
  gap: var(--space-4);
}

.workbench-fields--settings {
  grid-template-columns: repeat(auto-fill, minmax(max(var(--prompt-compare-min), 45%), 1fr));
}

.prompt-field__var {
  margin-left: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: normal;
}

/*
 * A disclosure — "Change the details", "Show what changed". Native <details>,
 * so it opens with a keyboard and without JavaScript; styled so the summary
 * reads as a control and not as a stray heading.
 */
.workbench-disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  cursor: pointer;
}

.workbench-disclosure > summary::-webkit-details-marker {
  display: none;
}

.workbench-disclosure > summary:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.workbench-disclosure[open] > summary {
  margin-bottom: var(--space-4);
}

.workbench-disclosure__title {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
}

.workbench-disclosure__hint {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
}

.workbench-disclosure__hint::after {
  content: " ▸";
}

.workbench-disclosure[open] .workbench-disclosure__hint::after {
  content: " ▾";
}

/* The compare page's shared-details strip, a card-weight surface of its own. */
.workbench-disclosure--strip {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

/* The comparison screen's control row: the two versions on the left, the one
   spending action on the right. */
.workbench-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}

.workbench-pickers,
.workbench-draw-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.workbench-pickers .ui-select {
  inline-size: var(--workbench-picker-width);
}

.workbench-draw-more .ui-select {
  inline-size: var(--workbench-count-width);
}

/* The library's "How the workbench works": five steps across at full width,
   folding as the page narrows. */
.workbench-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dashboard-nested-min), 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.workbench-steps b {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.workbench-steps__n {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  margin-bottom: var(--space-2);
  border: var(--border-width) solid var(--warning-border);
  border-radius: var(--radius-pill);
  background: var(--warning-wash);
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
}

/*
 * ---------------------------------------------------------------------------
 * The prompt as prose.
 *
 * It was a monospaced <pre> 1,150px tall. A prompt IS prose — the founders
 * wrote it as paragraphs — so it reads as paragraphs, at a readable measure.
 * The structure that is sent is kept exactly: blank lines are paragraph breaks
 * and a list item keeps its line (the helper writes the <br>). Only the typeface and the
 * placeholders change, and the preview page still shows the raw words sent.
 * ---------------------------------------------------------------------------
 */

.prompt-prose {
  max-inline-size: var(--prompt-prose-measure);
  color: var(--text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-h2-leading);
  overflow-wrap: anywhere;
}

.prompt-prose p {
  margin: 0;
}

.prompt-prose p + p {
  margin-top: var(--space-4);
}

/* What was (or would be) SENT, character for character: the preview and the
   trial page promise exactly that, so the wrapping is the prompt's own. */
.prompt-prose--sent {
  white-space: pre-wrap;
}

.prompt-prose--compact {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.prompt-prose--compact p + p {
  margin-top: var(--space-3);
}

/* A {{variable}}, in plain English, in gold — the one chromatic colour, doing
   its one job of marking what is not the prompt's own words. */
/* A variable in the prose (D179): a quiet inline mark — a gold tint and no
   border — so a paragraph with nine of them still reads as prose. As bordered
   gold pills the prompt was harder to read on the page than in its editor. */
.prompt-chip {
  display: inline;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--gold-wash-selected);
  color: var(--text-gold);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.workbench-why {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  border-left: var(--rule-width) solid var(--warning-border);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* A long note, clamped to two lines until it is opened (D170). The label and
   the "Read more" are blocks of their own; only the note's text is clamped. */
.workbench-why--long > summary {
  list-style: none;
  cursor: pointer;
}

.workbench-why--long > summary::-webkit-details-marker {
  display: none;
}

.workbench-why--long > summary:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.workbench-why .workbench-why__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.workbench-why[open] .workbench-why__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.workbench-why .workbench-why__more {
  margin-top: var(--space-1);
  color: var(--text-gold);
}

.workbench-why[open] .workbench-why__more {
  display: none;
}

.workbench-why span,
.workbench-blocks > span {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.workbench-blocks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--divider);
}

.workbench-blocks > span {
  flex-basis: 100%;
}

.prompt-block-link {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--type-caption-size);
  text-decoration: none;
}

.prompt-block-link:hover {
  border-color: var(--gold-rest);
  background-color: var(--gold-wash-hover);
}

.prompt-block-link:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

/* The editor's body box grows with its text rather than scrolling inside a
   scrolling page. `field-sizing` where the browser has it; the `rows` on the
   element is the fallback everywhere else. */
.prompt-editor__body {
  field-sizing: content;
  min-block-size: var(--prompt-editor-min);
  max-block-size: var(--prompt-editor-max);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-h2-leading);
}

.prompt-available {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-caption-size);
}

.prompt-available code {
  margin-left: var(--space-1);
  color: var(--text-tertiary);
}

/* A shared block's include marker, as a prompt body writes it: a chip beside
   the block's name, never instead of it (D170). */
.prompt-include {
  padding: 0 var(--space-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.prompt-fragment__notes {
  margin-top: var(--space-3);
}

/*
 * ---------------------------------------------------------------------------
 * Pictures.
 *
 * --prompt-art-size capped every trial image at 280px — in a 920px card and in
 * a 450px comparison column alike, so the artwork was the smallest thing on
 * the screen. In a grid a picture now takes its column; on its own page it
 * takes up to --prompt-art-large. The caps are set by the container, not the
 * partial, because the same partial is re-rendered by the job's broadcast with
 * no idea where it is going to land.
 * ---------------------------------------------------------------------------
 */

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.prompt-grid .prompt-art,
.prompt-compare-sides .prompt-art {
  max-inline-size: none;
}

.prompt-trial-art .prompt-art {
  max-inline-size: var(--prompt-art-large);
  margin-inline: auto;
}

.prompt-art--slot {
  aspect-ratio: auto;
  min-block-size: var(--prompt-art-size);
}

.prompt-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  min-inline-size: 0;
}

.prompt-tile__link {
  display: block;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.prompt-tile__link:hover .prompt-art {
  border-color: var(--gold-rest);
}

.prompt-tile__link:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

/* A turbo-frame is a custom element with no default display, and lays out
   inline — which ignores the picture's width inside the grid (D69). */
.prompt-tile turbo-frame,
.prompt-trial-art turbo-frame {
  display: block;
}

.prompt-tile__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* Two versions, side by side. The columns are equal and neither is "the
   current one": with no seed (D48) a comparison is not a diff against a
   baseline but two sets of independent draws, and presenting one side as the
   reference would imply a reproducibility the model does not offer. */
.prompt-compare-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--prompt-compare-min), 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}

.prompt-compare-sides .workbench-muted {
  margin-bottom: var(--space-3);
}

/* The trials table's picture and number, as one link. */
.prompt-trial-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

/* One tier's prompts in the library, under its heading (D170). */
.prompt-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The details a draw used, as one wrapped line of label and value pairs. */
.prompt-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.prompt-inputs__item {
  display: flex;
  gap: var(--space-1);
}

.prompt-inputs dt {
  color: var(--text-tertiary);
}

.prompt-inputs dd {
  margin: 0;
  color: var(--text-primary);
}

/*
 * The word diff between two versions. Brick for what went and moss for what
 * arrived — D27's two semantic colours, and nothing conventional. The text
 * decoration carries the meaning as well as the colour, so it survives for a
 * reader who cannot tell the two apart.
 */
.prompt-diff {
  max-inline-size: var(--prompt-prose-measure);
  color: var(--text-tertiary);
  font-size: var(--type-body-size);
  line-height: var(--type-h2-leading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-diff__del {
  border-radius: var(--radius-sm);
  background: var(--danger-wash);
  color: var(--danger-text);
  text-decoration: line-through;
}

.prompt-diff__ins {
  border-radius: var(--radius-sm);
  background: var(--success-wash);
  color: var(--success-text);
  text-decoration: underline;
  text-decoration-color: var(--success-border);
}

.prompt-diff__gap {
  display: block;
  margin: var(--space-2) 0;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: var(--type-caption-size);
}

/* ---------------------------------------------------------------------------
   The check (D148): a vision model's read of a draw. A card under the picture
   on the draw's page, and a word or a score in a tile's caption.
   --------------------------------------------------------------------------- */

.prompt-trial-art + turbo-frame,
.prompt-check-badge {
  display: block;
}

.prompt-check-badge {
  margin-inline-end: auto;
}

.prompt-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.prompt-check__waiting {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.prompt-check__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.prompt-check__score {
  color: var(--text-tertiary);
  font-size: var(--type-body-size);
}

.prompt-check__score b {
  color: var(--text-primary);
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-semibold);
}

.prompt-check__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prompt-check__heading,
.prompt-check__caption {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-caption-leading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prompt-check__caption {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: normal;
}

/* Two columns, what was asked beside what was read, so a misspelling is found
   by looking across rather than by reading a sentence about it. */
.prompt-check__plate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--prompt-compare-min), 1fr));
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.prompt-check__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  color: var(--text-primary);
}

.prompt-check__lines--read {
  letter-spacing: 0.04em;
}

.prompt-check__field {
  display: inline-block;
  min-inline-size: 4.5em;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.prompt-check__problems {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--danger-border);
  border-radius: var(--radius-sm);
  background: var(--danger-wash);
  color: var(--danger-text);
}

.prompt-check__ok {
  margin: 0;
  color: var(--success-text);
}

/* Two rows of four for eight criteria. The workbench runs at one width (D134). */
.prompt-check__scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.prompt-check__criterion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.prompt-check__criterion dt {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.prompt-check__criterion dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Under the pass mark: gold, the colour warning borrows (D27) — not brick,
   which is kept for what actually fails the draw. */
.prompt-check__criterion--low {
  border-color: var(--warning-border);
  background: var(--warning-wash);
}

.prompt-check__notes {
  margin: 0;
}

.prompt-check__footnote {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.prompt-check-badge__label {
  color: var(--text-tertiary);
}

.prompt-check-badge__label--passes {
  color: var(--success-text);
}

.prompt-check-badge__label--needs-a-look {
  color: var(--text-gold);
}

.prompt-check-badge__label--fails {
  color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   The model comparison (D149): one version, a column per model.
   --------------------------------------------------------------------------- */

.prompt-model-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Up to five columns at the workbench's width (D134), never so narrow a
   picture is smaller than a tile on the version page. */
.prompt-compare-sides--models {
  grid-template-columns: repeat(auto-fit, minmax(var(--prompt-model-min), 1fr));
}

/* Two across at every width: three left "Average cost" broken over two
   lines in a five-model comparison, and one wasted the column. */
.prompt-model-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.prompt-model-stats dt {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.prompt-model-stats dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.prompt-model-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* One draw per row in a model's column: two side by side in a fifth of the
   page leaves a caption no room for its date, verdict and cost. */
.prompt-compare-sides--models .prompt-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* The column's gap already spaces it; the comparison card's own
   `.workbench-muted` margin would double it. */
.prompt-compare-sides .prompt-model-sent {
  margin-bottom: 0;
}

/* The steps of one draw, folded under its row on the generation costs page (D165). */
.generation-steps {
  margin-top: var(--space-1);
  font-size: var(--type-caption-size);
}

.generation-steps ol {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
  list-style: decimal;
}

/* The library's latest-draws cell (D179): small squares in a row, enough to
   see what a prompt is drawing without opening it. */
.prompt-thumbs { display: inline-flex; gap: var(--space-1); vertical-align: middle; }

.prompt-thumbs__img {
  width: var(--prompt-thumb-size);
  height: var(--prompt-thumb-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: var(--border-width) solid var(--border-default);
}

/* The version page's versions, in its rail (D179): a list, the current one
   filled, each with its state. It was a full-width table under everything. */
.workbench-versions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }

.workbench-versions__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--rail-item-height);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.workbench-versions__item:hover { background: var(--surface-hover-item); color: var(--text-primary); }
.workbench-versions__item.is-current { background: var(--surface-selected); color: var(--text-primary); }
.workbench-versions__item:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.workbench-versions__n { min-inline-size: 3ch; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.workbench-versions__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The library's tables share one column grid (D179), so Versions and the costs
   line up from one tier's table to the next rather than each sizing to its own
   rows. */
.prompt-group .ui-table { table-layout: fixed; min-width: var(--prompt-table-min); }
.prompt-group .ui-table th:nth-child(1) { width: var(--prompt-col-name); }
.prompt-group .ui-table th:nth-child(2) { width: var(--prompt-col-draws); }