/* style — the compact image toolbar: count, ratio, resolution.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- compact image toolbar: count + ratio + resolution on one line ---------- */
/* WRAPS RATHER THAN RUNS OFF THE EDGE.

   A single non-wrapping row is right for the three controls this was drawn for
   — count, ratio, resolution — and wrong the moment a model has six. Seedance
   and Kling carry a count, a duration, a ratio, a resolution, a quality and a
   Generate audio switch, and the 84px floor below means they cannot all fit:
   flex could not shrink them past it, so the row grew instead and the last
   control hung outside the panel where it could not be clicked at all.

   Wrapping is the honest answer for a column whose width the user sets by
   dragging: the controls drop onto a second line and everything stays
   reachable at any width. */
.img-toolbar { display: flex; flex-wrap: wrap; gap: var(--ctl-gap); margin-top: 8px; }
/* THE ROW IS THE WIDTH OF THE COLUMN. Inside #fields (a wrapping flex row)
   the toolbar was an ordinary auto-sized child, so its pills grew only to
   their own content and the row stopped short of the right edge while the
   field pills under it ran the full width. Full width, and no margin of its
   own -- #fields already has the gap. */
#fields > .img-toolbar { flex: 1 1 100%; margin-top: 0; }
.img-toolbar > * { flex: 1 1 0; min-width: 0; max-width: var(--ctl-max); }
/* ONE FAMILY, NOT TWO. These were 10px-radius boxes sitting directly above
   full-radius field pills doing the same job, which is the inconsistency
   Simon was pointing at. The field pills are the ones already matching
   Generate -- see the note in 10-form.css -- so the toolbar comes to them. */
.tb-step, .tb-pill {
  display: flex; align-items: center; height: var(--ctl-h);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
}
/* THE WHOLE PILL IS THE DROPDOWN.

   The <select> sat inside the pill at its natural width, so the icon, the
   padding and the pill's own corners were dead — you aimed at a control 36px
   tall and hit nothing unless you landed on the word. A <label> does not save
   it: clicking a label does not open a select's list, it only focuses it.

   So the select is stretched over the pill and made transparent, and the icon
   shows through the padding reserved for it. Same trick as .field.selwrap,
   which is where this pattern was already right. */
.tb-pill { justify-content: flex-start; gap: 7px; padding: 0 var(--sp-5); cursor: pointer; position: relative; }
/* THE ARROW SITS IN, NOT ON THE BORDER. It was positioned at `right 0` on a
   select stretched edge to edge, so it touched the pill's border while the
   field pills beside it kept their chevron a full inset away. Same inset as
   the field pill (--sp-5), same chevron, same distance from the text. */
.tb-pill .tb-sel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0 30px 0 var(--sp-5); background-color: transparent;
  background-position: right var(--sp-5) center;
}
.tb-pill.tb-pill-ico .tb-sel { padding-left: 31px; }
.tb-pill:hover { border-color: var(--border-dash); }
.tb-ico { color: var(--text-dim); display: flex; flex: none; }
.tb-sel {
  width: 100%; min-width: 46px; background: transparent; border: none; padding: 0 16px 0 0;
  font-weight: 700; font-size: 12px; color: var(--text); cursor: pointer;
  text-overflow: clip;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239a9aa2' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0 center;
}
/* keep the resolution pill wide enough for "1080p" etc. */
/* Wide enough for "1080p", and never wider than the row it is on -- nor
   wider than the half a field pill takes, so a toolbar with one pill in it
   ends where a lone field would. */
.img-toolbar > .tb-pill { min-width: 84px; max-width: min(var(--ctl-max), calc(50% - 3px)); }
/* THE STEPPER KEEPS ITS OWN WIDTH. Simon: "The number of generations button
   is cut off in create mode GPT Image 2/2.5. It's got the minus and then the
   1, but you can't actually access the plus key." Every toolbar child is
   flex: 1 1 0 with min-width 0 (above), and the stepper -- three fixed
   controls -- was the one thing that could not shrink honestly: its plus
   went under the edge while the pills beside it kept their 84px floors.
   Fixed at what it needs; the pills are what flex, and Quality, which only
   ever says one short word, is the narrowest of them so the row has room. */
.img-toolbar > .tb-step { flex: 0 0 auto; min-width: 86px; width: auto; }
.img-toolbar > .field.selwrap.tb-quality { flex: 0 1 auto; min-width: 74px; }
/* A round end wants its buttons off it. */
.tb-step { justify-content: space-between; padding: 0 var(--sp-3); }
.tb-stepbtn {
  width: 24px; height: 24px; border: none; background: none; color: var(--text-dim);
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 3px;
}
.tb-stepbtn:hover { color: #fff; background: var(--card-hover); }
.tb-stepval { font-weight: 700; font-size: 13px; color: var(--accent); min-width: 16px; text-align: center; }
/* THE RATIO ROW the crop rooms draw at the top (ratioIconsHtml, 05-icons.js):
   the shapes themselves, the lit one in the brand colour, the same pill
   family as everything else in a control row. */
.ratio-row { display: inline-flex; gap: 4px; align-items: stretch; }
.ratio-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 36px; height: var(--ctl-h); padding: 0 6px; box-sizing: border-box; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: inherit;
}
.ratio-btn span { font-size: 8.5px; font-weight: 700; letter-spacing: .2px; line-height: 1; }
.ratio-btn svg { display: block; }
.ratio-btn:hover { color: var(--text); border-color: var(--border-dash); }
.ratio-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* small text-only pill (e.g. GPT quality) sits tight to the right of resolution */
.tb-pill.tb-pill-sm { flex: 0 0 auto; padding: 0 var(--sp-5); }
/* A field pill in the toolbar row (tbPill without an icon -- file type,
   bitrate, quality): the same rules as in #fields, see 10-form.css, and the
   same footing in the row as its icon-pill neighbours. */
.img-toolbar > .field.selwrap { flex: 1 1 0; min-width: 84px; max-width: var(--ctl-max); }
/* A setting that is on or off, in the toolbar's own shape. Off is the same
   quiet card as its neighbours; on is the accent, because a switch you cannot
   read at a glance is a switch you check twice. */
.tb-pill.tb-pill-tog {
  flex: 0 0 auto; gap: 5px; padding: 0 9px; cursor: pointer;
  color: var(--text-faint); font-weight: 700; font-size: 11px;
  border: 1px solid var(--border); background: var(--card);
}
.tb-pill.tb-pill-tog .tb-togtxt { white-space: nowrap; }
.tb-pill.tb-pill-tog.on {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}
.tb-pill.tb-pill-tog:hover { border-color: var(--accent); }
.tb-pill-sm .tb-sel { font-size: 11px; text-transform: capitalize; }

/* per-card capture buttons inside each empty reference slot */
.ec-actions { display: flex; gap: 4px; margin-top: 6px; }
.ec-btn {
  width: 26px; height: 26px; border-radius: 3px; padding: 0;
  border: 1px solid var(--border); background: var(--card); color: var(--text-dim);
  font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ec-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.ec-btn svg { display: block; }
/* AN UPDATE IS WAITING. The dev shell no longer reloads the window on a
   save (desktop/main.js); it lights this button instead, and a click loads
   what changed. Accent ring and a dot, because the header is a quiet row
   and a button that has changed meaning has to say so without shouting. */
.icon-btn.pending { color: var(--accent); border-color: var(--accent); position: relative; }
.icon-btn.pending::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.slot-card.empty .cap { display: none; }   /* icon only, no "Image 1" word */
.slot-card.empty .icon { color: var(--text-dim); display: flex; opacity: .35; padding: 4px; }
.slot-card.empty .icon svg { display: block; width: 24px; height: 24px; }

/* Compact reference slots (Seedance) — three to a row, always.
   A grid rather than a wrapping flex row, because with flex the number of cards
   on a line was whatever happened to fit and it changed as the panel was
   resized: nine references would sit 4/4/1 at one width and 3/3/3 at another.
   Three fixed columns keep the block square and predictable, and 1fr lets each
   card take a third of whatever width there is instead of being pinned to
   120px. minmax(0,…) stops a long file name in a badge from pushing a column
   wider than its share. */
/* ONE BOX SIZE, HERE TOO. Simon: "can we unify reference box sizes over all
   views, the reference boxes in different modes should match those in the
   create mode."

   This block used to pin three equal columns whatever the width, on the
   reasoning that three fixed columns keep it square and predictable. What it
   actually produced was a reference card of a different size from every other
   reference card in the app — a third of the column here, a 161px track in
   Create — and the two sat on screen together often enough for the difference
   to read as meaning something.

   Same declaration as .slot-grid now, reading the same --slot-gap, so this
   cannot drift from the tray again. The cosmetic rules below (no max-width,
   smaller caption, smaller icons) are untouched: they are about what a card
   in a tight column looks like, not how wide it is. */
.slot-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: var(--slot-gap, 6px);
}
/* max-width: none -- .slot-card carries `max-width: calc(50% - 3px)` for the
   wrapping flex rows (13-input-slots.css); inside a grid cell that halves
   the card, which is what made the Seedance references tiny. */
.slot-grid.compact .slot-card { width: auto; max-width: none; aspect-ratio: 16 / 9; height: auto; }
.slot-grid.compact .slot-card.empty .cap { font-size: 8px; }
.slot-grid.compact .slot-card.empty .icon svg { width: 16px; height: 16px; }
.slot-grid.compact .ec-actions { gap: 3px; margin-top: 4px; }
.slot-grid.compact .ec-btn { width: 22px; height: 22px; font-size: 11px; }