/* style — grouped card sections: references and the prompt.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- grouped card sections (references / prompt) ---------- */
/* Slightly darker than the inner controls so pills/cards lift off them. */
#inputs-section, #prompt-section {
  background: #131315; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 12px 12px; margin-top: 8px;
}
#prompt-section #prompt-wrap textarea { background: var(--bg); }

/* prompt header: title left, Enhance toggle right */
.prompt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.prompt-head .sec-title { margin-bottom: 0; }
/* Auto-detect. Sits between the title and Enhance, and pushes itself right so
   the two things you can do TO the prompt end up beside each other rather than
   one at each end of the row. */
.prompt-detect {
  margin-left: auto; margin-right: 10px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  background: var(--card); color: var(--text-dim);
  border: 1px solid var(--border-dash);
}
.prompt-detect:hover:not(:disabled) { color: #fff; border-color: var(--accent); background: var(--accent); }
.prompt-detect:disabled { opacity: .45; cursor: default; }
.prompt-enhance {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 9.5px; font-weight: 500; letter-spacing: .3px; text-transform: none;
  color: var(--text-dim);
  /* With the "Prompt" title gone, this is sometimes the only thing left in
     .prompt-head — space-between only spaces multiple items, so a lone one
     would fall back to flex-start (the left edge) without its own push. */
  margin-left: auto;
}
.prompt-enhance input[type=checkbox] { width: 24px; height: 14px; }
.prompt-enhance input[type=checkbox]::after { width: 10px; height: 10px; }
.prompt-enhance input[type=checkbox]:checked::after { left: 12px; }

/* TWO THINGS CLAUDE CAN DO TO THIS BOX, SIDE BY SIDE.

   Ask arrived beside Enhance, and both of them carry `margin-left: auto` from
   the days when either might be the only thing in the row. Two autos in one
   flex row SHARE the free space between them — so instead of a tidy pair on
   the right, they end up at opposite ends of the header with a gap in the
   middle. The row aligns right as a whole now, with one gap, and the title
   (on the models that still have one) pushes itself left instead. */
.prompt-head { justify-content: flex-end; gap: 10px; }
.prompt-head .sec-title { margin-right: auto; }
.prompt-head .prompt-detect,
.prompt-head .prompt-enhance { margin-left: 0; margin-right: 0; }
/* Enhance is a rewrite of a prompt, and while you are asking for one there is
   no prompt to rewrite. It stands down rather than sitting there lit and
   meaning nothing — its value is untouched and comes back with it. */
.prompt-enhance.dim { opacity: .4; pointer-events: none; }

/* AND THE BOX SAYS WHICH IT IS. The words in there are a request rather than
   a prompt, and nothing else on screen distinguishes the two — the placeholder
   only helps while the box is empty, which is exactly when it does not
   matter. The @-token mirror is hidden with it: a request is prose, and
   painting reference chips over it says the tokens mean something here. */
#prompt-block.asking #prompt {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28);
}
#prompt-block.asking #prompt-mirror { opacity: 0; }

/* plain square checkbox (Realism) */
input[type=checkbox].plain-check {
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--card); border: 1px solid var(--border-dash);
}
input[type=checkbox].plain-check::after { content: none; }
input[type=checkbox].plain-check:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox].plain-check:checked::after {
  content: ""; display: block; position: absolute; top: 2px; left: 5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); background: none; border-radius: 0;
}
#realism-row { color: var(--text-dim); font-size: 11px; font-weight: 600; }

/* toggle rows */
/* THE SWITCH SITS BESIDE ITS WORDS, NOT AT THE FAR EDGE. Simon: "Make it so
   the 'Keep the original audio' toggle is better designed, so the toggle is
   aligned to be just to the right of the text. Currently, I'm looking at it
   in Kling 03 Edit, and the toggle is over to the right, but the text is over
   to the left."

   It was space-between, which is the right rule for a full-width row and the
   wrong one here: these rows are half the card wide and the labels are short,
   so the pair read as two unrelated controls with a hole between them, and on
   a wide panel the hole grew. flex-start puts the 8px gap between the label
   and the switch and nothing after them, so a row reads as one thing.

   Both rooms, because it is one control: a toggle that looks different in the
   image editor than on the model card is the next report. */
#fields .toggle-row {
  flex: 1 1 calc(50% - 3px); display: flex; align-items: center; justify-content: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px; margin: 0; gap: 8px;
}
#fields .toggle-row label { color: var(--text); font-weight: 600; font-size: 11px; flex: 0 1 auto; }
input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 30px; height: 18px; border-radius: 3px;
  background: var(--border); position: relative; cursor: pointer; transition: background .15s;
  flex: none;
}
input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s;
}
input[type=checkbox]:checked { background: var(--accent); }
input[type=checkbox]:checked::after { left: 14px; }

/* slider rows */
/* A PLACE ON DISK, PICKED. Same shell as a slider row so the card does not
   step in and out where one control is a different shape from its
   neighbours. The button carries the answer; `unset` marks the state that
   stops a heavy render from starting at all, so it reads as something
   waiting rather than as a spare button. */
#fields .folder-row {
  flex: 1 1 100%; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; margin: 0;
}
.folder-row > span { font-weight: 600; font-size: 11px; white-space: nowrap; color: var(--text); }
.folder-row .folder-pick {
  margin-left: auto; max-width: 60%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
#fields .folder-row.unset { border-color: var(--accent); }
.folder-row.unset .folder-pick { color: var(--accent); }

#fields .slider-row {
  flex: 1 1 100%; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; margin: 0;
}
.slider-row .slider-label { font-weight: 600; font-size: 11px; white-space: nowrap; color: var(--text); }
.slider-row .slider-val { font-weight: 700; min-width: 24px; text-align: right; color: var(--text); }
#fields .slider-row.has-hint { flex-wrap: wrap; }
.slider-row .res-hint { flex: 1 1 100%; text-align: right; font-size: 10px; color: var(--text-dim); margin-top: -2px; }
.field .res-hint { display: block; text-align: right; font-size: 10px; color: var(--text-dim); margin-top: 3px; }

/* TWO CONTROLS ON ONE LINE, when a card says they belong together
   (`row:` on the field -- see seatField in js/panel/19b-render-fields.js).
   The container takes the full width the fields themselves normally claim,
   and hands it out in equal shares; min-width:0 because a slider's label is
   nowrap and without it the two halves push each other past the edge. */
#fields .field-pair { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
/* A BASIS RATHER THAN A ZERO, so three controls on one row (Magnific
   Creative's factor, engine and optimised-for) share it evenly where there
   is room and drop to two-and-one where there is not, instead of squeezing
   past the point of being readable. A row that wraps is still a row; a row
   that overflows is a bug. */
#fields .field-pair > * { flex: 1 1 130px; min-width: 0; margin: 0; }
/* The slider row is the one that has to be told, since its own rule claims
   the whole width -- the same rule that makes it work on its own line. */
#fields .field-pair > .slider-row { flex: 1 1 150px; min-width: 0; }
/* ONE ROW, NEVER TWO-AND-ONE. Simon, 24 Sep, of BytePlus Video Upscale:
   "engine, scene, and bitrate are all on the same row." Three short
   dropdowns, so equal thirds with tighter padding; a long value ellipses
   rather than dropping Bitrate to a line of its own. */
#fields .field-pair[data-row="look"] { flex-wrap: nowrap; gap: 6px; min-width: 0; max-width: 100%; }
#fields .field-pair[data-row="look"] > * { flex: 1 1 0; }
/* A third of a narrow panel has no room for name and answer side by side,
   so each pill stacks them: the small name on top, the answer under it,
   the chevron pinned right. Same height as every other pill. */
#fields .field-pair[data-row="look"] .field.selwrap {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 0 22px 0 10px;
}
#fields .field-pair[data-row="look"] .field.selwrap .sel-value { display: block; max-width: 100%; }
#fields .field-pair[data-row="look"] .field.selwrap .sel-chev {
  position: absolute; right: 9px; top: 50%; margin-top: -3px;
}
/* Halved or thirded, the label is the part with no room to spare -- it may
   ellipsis rather than push the track off the end. */
#fields .field-pair .slider-label { overflow: hidden; text-overflow: ellipsis; }
/* Halved, a slider has room for its track and little else, so the value
   sits tight to it and the size hint keeps its own line underneath. */
#fields .field-pair .slider-row { gap: 8px; padding: 8px; }
#fields .field-pair .slider-val { min-width: 18px; }
/* The size note, now that it lives under the downscale slider rather than
   inside the factor control. Its own line, right-aligned under the row. */
#downscale-row { flex-wrap: wrap; }
#downscale-row .res-hint {
  flex: 1 1 100%; text-align: right; font-size: 10px;
  color: var(--text-dim); margin-top: -2px;
}
/* A RAIL YOU CANNOT SEE IS NOT A CONTROL.

   Simon, of the colour correction node: "the lines on each of the slider
   controls need to be much darker so we can see them." The track was
   var(--border) -- #1b1b1e against a #111113 card and a #17171b node, three
   shades apart at 4px tall, which is no line at all. On the Levels tab that
   left five crimson dots floating on the panel with nothing to say what they
   slide along or how far they had come.

   Near-black, with the groove's own shadow and a hairline under it: a rail
   cut INTO the surface reads on every background in the app, which is what
   this rule has to do -- it is the only range style in the panel and the
   node space, the crop rooms and the make panel all land on it. */
input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 5px;
  border-radius: 3px; background: #08080b; outline: none; cursor: pointer;
  padding: 0; border: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.5); border: none;
}