/* The stand is a darkroom: gentool builds prompts for photographs, so the page
   is lit like the room they would be printed in — a blue-black ground, one
   amber safelight as the only accent, and the finished prompt set on warm paper
   as if it were the print itself.

   Three type roles, each earning its place: sans for the controls, a serif for
   the prompt prose (it is read word by word to catch wording), and a monospace
   for machine data (keys, seed, latent size).

   There is no entrance animation anywhere. Every control change reloads this
   page, so anything that played on load would play hundreds of times an hour. */

:root {
  color-scheme: dark;

  --ink: #12151c;
  --panel: #191d26;
  --panel-raised: #1f2430;
  --line: #2b3140;
  --line-soft: #232936;

  --text: #d7dbe4;
  --text-dim: #79839a;
  --text-faint: #545d70;

  --safelight: #e8a33d;
  --safelight-dim: #7a5622;
  --paper: #eceae4;
  --paper-ink: #23211c;
  --alarm: #e2705f;

  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --gap: 18px;
  --radius: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
}

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  padding: 14px 22px;
  background: rgba(18, 21, 28, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.topbar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.topbar h1::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--safelight);
  box-shadow: 0 0 10px var(--safelight-dim);
}

.coverage {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.coverage b {
  color: var(--safelight);
  font-weight: 500;
}

.hint {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

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

.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
  color: var(--text);
  font: 500 12px/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { border-color: var(--text-faint); }

.btn:focus-visible {
  outline: 2px solid var(--safelight);
  outline-offset: 2px;
}

.btn-primary {
  border-color: var(--safelight-dim);
  color: var(--safelight);
}

.btn-small {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- columns ---------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--gap);
  align-items: start;
  padding: var(--gap) 22px 60px;
}

.col-result { position: sticky; top: 74px; }

/* One scroll area, not two: the column scrolls when the folds are opened, and
   the print inside it is never clipped mid-sentence. */
.result {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Flex children would otherwise shrink to fit the column and squeeze a long
   print into an unreadable box. */
.result > * { flex-shrink: 0; }

/* ---------- panels ---------- */

.panel {
  padding: 14px 16px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.col-form .panel + .panel { margin-top: var(--gap); }

.panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.panel h2 .btn-small { margin-left: auto; }

/* The prompt is what the stand is for, so it stays open and everything else in
   the result column folds away behind a summary. Kept shut, the column is short
   enough that the print never leaves the screen while the form is worked. */
details.panel > summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  list-style-position: outside;
}

details.panel > summary:focus-visible {
  outline: 2px solid var(--safelight);
  outline-offset: 3px;
}

details.panel[open] > summary { margin-bottom: 12px; }

details.panel .hint { margin-bottom: 10px; }

details.panel .prompt + p { margin: 10px 0 0; }

.panel-error { border-color: var(--alarm); }

.error {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--alarm);
}

/* ---------- fields ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 14px;
}

/* The ledger: a field you pinned carries a solid amber edge, one left to the
   fill-in stays dim. Coverage of the sheet is then readable at a glance, which
   is the question this tool exists to answer — an omitted trait is not an
   absent trait, it is one the model reinvents on every run. */
.field {
  display: block;
  padding-left: 9px;
  border-left: 2px solid var(--line);
}

.field-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.field-title em {
  color: var(--text-faint);
  font-style: normal;
}

.field.is-set { border-left-color: var(--safelight); }
.field.is-set .field-title { color: var(--text); }

.field input,
.field select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
  color: var(--text-dim);
  font: 400 13px/1.4 var(--sans);
}

.field.is-set input,
.field.is-set select { color: var(--text); }

.field input:focus,
.field select:focus {
  outline: 2px solid var(--safelight);
  outline-offset: 1px;
}

.field input::placeholder { color: var(--text-faint); }

/* ---------- the print ---------- */

/* Set tight enough that a prompt of ordinary length stands complete on a
   laptop screen: the whole point of the right column is reading it without
   moving anything. */
.prompt {
  margin: 0;
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--paper-ink);
  font: 400 13px/1.56 var(--serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
}

.meta dt { color: var(--text-faint); }
.meta dd { margin: 0; color: var(--text); }

/* ---------- result table ---------- */

.rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rows th {
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-faint);
  font-weight: 500;
  text-align: left;
}

.rows td {
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.rows .key,
.rows .origin {
  font-family: var(--mono);
  font-size: 11px;
}

.rows .key { color: var(--text-faint); }

.origin-given { color: var(--safelight); }
.origin-key { color: var(--text-dim); }
.origin-random { color: var(--text-dim); font-style: italic; }
.origin-none { color: var(--text-faint); }

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

@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }

  /* The prompt goes first: on a phone it is the thing being checked, and the
     form below it is what gets scrolled to. */
  .col-result {
    position: static;
    order: -1;
  }

  .result { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}