/* style — the generation panel, to Simon's design.
   One section of the split stylesheet; this one loads last on purpose, so
   every number in it wins over the older rules it revises.

   Simon, with "Generation Panel.html": "Using this design as a reference for
   layout, general structure, colors, etc., and style of buttons, update the
   CSS for the app to better reflect this. Make sure that we don't change the
   font itself. It's more just the general layout, scale, and structure."

   The design is the panel this app already draws -- the tab strip, MODEL and
   its button, REFERENCES, the prompt with its three ticks, the MODE row, the
   count / ratio / size row, Generate beside Ask, the estimate and the
   shortcut under them -- at a slightly larger, calmer scale: controls a
   touch taller, corners a touch softer (5-7px against the 3 everywhere
   else), one dark well under each group, and the crimson as a gradient on
   the one button that spends. Every number here is read off that file at
   its own zoom (0.805) and rounded to the nearest whole pixel. The font is
   untouched: Montserrat stays, only sizes move. Icons are the app's own. */

/* The tab strip: 36x38 squares, the lit one outlined in crimson on a faint
   crimson wash rather than filled. */
#tabs { gap: 10px; padding: 8px 0 4px; }
.tab { width: 36px; height: 38px; border-radius: 7px; border: 1px solid transparent; }
.tab.active {
  color: #ff3f70; border-color: var(--accent);
  background: linear-gradient(135deg, #2a0616 0%, #2b0a1c 100%);
}

/* Section titles: small caps, wide tracking, quiet. */
#main .sec-title { font-size: 10px; font-weight: 500; letter-spacing: .13em; color: #8e8e8e; }

/* The model button: 48 tall, a soft corner, a bigger name. */
#model-dd-btn {
  min-height: 50px; padding: 0 14px; gap: 12px; border-radius: 7px;
  background: #121212; border-color: #232323; font-size: 14px; font-weight: 500;
}
#model-dd-btn:hover { border-color: #3a3a3a; background: #161616; }
#model-dd-list { border-radius: 7px; }

/* The two grouped cards read as one panel: same surface, soft corners, and
   the seam between them is a hairline rather than two borders and a gap. */
#inputs-section, #prompt-section {
  background: #121212; border-color: #1c1c1c; border-radius: 8px; padding: 13px 13px 14px;
}

/* Reference wells: a dashed, darker square. */
/* THE GAP GOES THROUGH THE VARIABLE, not onto .slot-grid directly. Builder
   mode lays its five boxes out on a grid of its own with the same track rule
   (#input-slots.builder-on, 13-input-slots.css), and a gap set only on
   .slot-grid reached the tray and missed that one — so the two grids shared
   out different amounts of width and the builder boxes came out wider than
   the ordinary reference boxes beside them. Setting the variable reaches
   both, because both read it. */
:root { --slot-gap: 12px; }
.slot-card.empty { border: 1px dashed #343434; background: rgba(0, 0, 0, .3); border-radius: 5px; }
.slot-card.empty:hover { border-color: var(--accent); background: #100c0e; }

/* The prompt: its own dark box with room to write. */
/* Simon: "reduce the size of the text in prompt boxes by 15%" -- 13px * .85,
   rounded to the half. The mirror below carries the identical number; the two
   lay the same string out to the pixel or the highlight lands off the words. */
#prompt-section #prompt-wrap textarea, #prompt-block #prompt {
  background: #090909; border: 1px solid #232323; border-radius: 5px;
  padding: 11px 13px; font-size: 11px; line-height: 1.5; min-height: 106px;
}
/* THE MIRROR WEARS THE SAME METRICS. #prompt-mirror sits behind the textarea
   at 1:1 (19-reference-library.css) and paints the @mentions; the box above
   moved to 11/13px padding and a 13px face, and a mirror left at 7/10 and
   12px put every letter a few pixels from the caret that was typing it. */
#prompt-section #prompt-mirror, #prompt-block #prompt-mirror {
  padding: 11px 13px; font-size: 11px; line-height: 1.5; border-radius: 5px;
}
.check-pair { gap: 18px; padding: 0 2px; }
.check-row { font-size: 12px; font-weight: 500; color: #d1d1d1; gap: 8px; }
input[type=checkbox].plain-check { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid #3d3d3d; background: #0c0c0c; }

/* The MODE row: a dark well holding the choices, the chosen one in the
   crimson gradient. */
#model-tier, #model-mode-tabs {
  background: #0c0c0c; border-color: #1e1e1e; border-radius: 6px; padding: 6px 8px 6px 12px; gap: 12px;
}
#model-tier .tier-lab, #model-mode-tabs .tier-lab { font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #bababa; }
#model-tier .tier-tabs, #model-mode-tabs .tier-tabs { gap: 8px; }
#model-tier .tier-tab, #model-mode-tabs .tier-tab {
  height: 34px; line-height: 32px; border-radius: 5px; font-size: 12px; font-weight: 500;
  background: #121212; border-color: #272727; color: #dedede;
}
#model-tier .tier-tab.active, #model-mode-tabs .tier-tab.active {
  background: linear-gradient(135deg, #e8114e 0%, #dd1560 55%, #c9228c 100%); border-color: transparent; color: #fff;
}

/* Count, ratio, size: one height, one corner, one surface. */
/* A 10px gap needs a 5px share off each half, or two pills that used to sit
   on one row (calc(50% - 3px) for the 6px gap they were laid out for) come
   to a pixel over the line and wrap onto two. */
#fields { gap: 10px; }
#fields .field { flex-basis: calc(50% - 5px); }
#fields .field, #fields .field.selwrap, #fields .field.inwrap {
  background: #0c0c0c; border-color: #232323; border-radius: 6px;
}
#fields .field.selwrap, #fields .field.inwrap { height: 39px; }
#fields .field.selwrap .sel-value, #fields .field.inwrap input[type=text], #fields .field.inwrap input[type=number] {
  font-size: 12px; font-weight: 500;
}
#fields .field:hover, #fields .field.selwrap:hover { background: #111111; border-color: #3a3a3a; }

/* Generate: the one lit thing, in the gradient, with its glow; Ask beside
   it as a quiet square of the same height. */
#gen-row { gap: 10px; margin-top: 12px; }
#btn-generate.btn.big {
  height: 43px; padding: 0; border-radius: 6px; font-size: 14px; font-weight: 500;
  background: linear-gradient(135deg, #e8114e 0%, #dd1560 55%, #c9228c 100%);
  box-shadow: 0 6px 22px rgba(232, 17, 78, .35);
}
#btn-generate.btn.big:hover { filter: brightness(1.08); }
.btn.gen-side {
  min-width: 62px; height: 43px; border-radius: 6px; font-size: 13px; font-weight: 500;
  background: #121212; border: 1px solid #272727; color: #f3f3f3;
}
#gen-hint { font-size: 10px; color: #8e8e8e; }
#gen-hint kbd { background: #1c1c1c; border: 1px solid #2b2b2b; border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: 10px; font-weight: 500; color: #e6e6e6; }