/* style — input slot cards and the video trim panel.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- input slot cards (compact) ---------- */
.slot { margin-bottom: 8px; }
.slot-label {
  font-size: 11px; color: var(--text-dim); margin-bottom: 5px;
  display: flex; justify-content: space-between; align-items: center;
}
.slot-label .req { color: var(--accent); }
.slot-label .count { color: var(--text-faint); font-size: 10px; }
/* ---------- builder mode: five named slots ----------
   10-form.css hides every slot label under #input-slots, which is right for a
   tray of interchangeable references and wrong for these: the name is what
   tells you which box is the camera angle and which is the lighting. Later in
   the cascade than that rule, which is why it wins -- see the note at the top
   of this file about not rearranging the pieces. */
#input-slots .slot.builder .slot-label {
  display: flex; text-transform: uppercase; letter-spacing: .5px;
  font-size: 9.5px; font-weight: 600; color: var(--text-dim);
}
#input-slots .slot.builder .slot-label .count { display: none; }
/* THE NAME SITS ON THE BOX, NOT ABOVE A GAP.

   Simon: "adjust the position of the titles for each reference box so it's
   just above the reference box, and make it so the reference boxes are
   smaller." It used to reserve two lines' height so that wrapped names and
   unwrapped ones started their tiles level -- which read as each title
   floating in the middle of nowhere. The names are short enough now not to
   wrap at the narrower width, and the reservation goes. */
#input-slots .slot.builder .slot-label {
  min-height: 0; align-items: flex-start; margin-bottom: 2px; line-height: 1.25;
}
#input-slots .slot.builder { margin-bottom: 8px; }
/* THE SAME SIZE AS EVERY OTHER REFERENCE BOX. Simon: "in the builder mode,
   the size of the reference boxes should just be the same size as regular
   reference boxes."

   They were made smaller when the five arrived, on the reasoning that five
   named boxes want to read as a set rather than as five trays. Lived with,
   that is the wrong trade: they are the same thing you drop a picture into
   everywhere else in the panel, and a box that is smaller HERE and bigger
   THERE is a difference the eye has to explain to itself.

   AND TAKING THE RULE OFF IS NOT ENOUGH, which is the part worth writing
   down. The tray is ONE .slot-grid holding three cards, so its
   `repeat(auto-fill, minmax(min(150px, 100%), 1fr))` packs three tracks
   across. A builder slot is its own .slot with its own grid holding ONE
   card, and the same rule over one card is a single track the full width of
   the column -- measured, 249px against the tray's 161px. Same CSS, same
   declaration, boxes half again as big.

   So the FIVE SLOTS share a grid instead: #input-slots becomes the track
   layout while builder mode is on, each .slot.builder is one cell of it, and
   each slot's own inner grid collapses to the single card it holds. The track
   rule is written once here and is the same arithmetic the tray does, so the
   two cannot drift apart. */
#input-slots.builder-on {
  display: grid; gap: 0 var(--slot-gap, 6px);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  align-items: start;
}
#input-slots.builder-on > .slot.builder { margin-bottom: 10px; }
/* THE CAST, OVER THE CHARACTER BOX (wireCharMenu, js/panel/13b-model-card-render.js).

   Anchored to the slot and laid over the picture rather than pushed in below
   it: five boxes on a grid, and one of them growing a list would move the
   other four every time the pointer crossed it.

   A scroll cap rather than a height, because a roster is however long it is
   and a menu taller than the panel is a menu with its last name off the
   bottom of the window. */
#input-slots .slot.builder { position: relative; }
.charmenu {
  position: absolute; z-index: var(--z-menu); left: 0; top: 100%; min-width: 100%;
  max-height: 260px; overflow-y: auto;
  margin-top: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--border-dash); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px var(--scrim-heavy);
  display: flex; flex-direction: column; gap: 1px;
}
.charmenu-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 3px 5px; background: none; border: 0; border-radius: 3px;
  color: var(--text); font: inherit; font-size: 11px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.charmenu-item:hover { background: var(--accent-soft); color: var(--accent); }
/* The face is what anybody is actually picking by; the name is the label on
   it. Small enough that eight fit without scrolling. */
.charmenu-item img {
  width: 26px; height: 26px; flex: none; object-fit: cover;
  border-radius: 3px; background: var(--bg);
}
.charmenu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charmenu-empty { padding: 7px 8px; font-size: 10px; line-height: 1.45; color: var(--text-faint); }
/* The character GALLERY over the Characters box: tiles like the gallery's
   Characters view, Add character first. */
.charmenu.chargal {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px; padding: 6px; max-height: 320px;
}
.chargal-item {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; text-align: left;
}
.chargal-th {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--bg);
  border: 1px solid var(--border);
}
.chargal-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chargal-item:hover .chargal-th { border-color: var(--accent); }
.chargal-nm { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chargal-add .chargal-th {
  border-style: dashed; border-color: var(--border-dash);
  display: flex; align-items: center; justify-content: center;
}
.chargal-plus { font-size: 20px; font-weight: 300; line-height: 1; color: var(--text-dim); }
.chargal-add:hover .chargal-plus, .chargal-add:hover .chargal-nm { color: var(--accent); }
/* A one-column box (Environment) still gets a menu wide enough for two. */
#input-slots .slot.builder:not(.builder-multi) > .charmenu.chargal { min-width: 240px; }
#input-slots.builder-on > .slot.builder > .slot-grid { grid-template-columns: minmax(0, 1fr); }
/* A SLOT THAT HOLDS SEVERAL (Characters) KEEPS THE COLUMNS. Simon, 22 Sep:
   the extra character boxes stacked down one column with the other half of
   the panel empty. It takes the whole row and its own boxes use the same
   tracks and gap as the grid around it, so every box is the same size and
   they go two across like the rest. */
#input-slots.builder-on > .slot.builder-multi { grid-column: 1 / -1; }
#input-slots.builder-on > .slot.builder-multi > .slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 10px var(--slot-gap, 6px);
}
/* Anything that is NOT one of the five -- a slot the card has besides its
   tray -- spans the whole row rather than being squeezed into a track. */
#input-slots.builder-on > .slot:not(.builder),
#input-slots.builder-on > .slot-pair { grid-column: 1 / -1; }
/* THE TOGGLE, UP IN THE REFERENCES HEADING (paintBuilderToggle,
   js/panel/18c-render-inputs.js). A toggle-row down in #fields is full width
   with the label pushed left and the switch pushed right; in a heading it has
   to be the width of its own two pieces or it shoves the AE readout off. */
/* HIGHER, AND OVER TO THE RIGHT. Simon: "Adjust the position of the builder
   mode button so it is slightly higher and over a line to the right-hand
   side." `margin-left: auto` pushes it off the heading and against the AE
   readout; the negative top lifts it onto the heading's own line rather than
   sitting a couple of pixels under it. */
#inputs-section .section-head .bld-toggle {
  display: flex; align-items: center; gap: 7px;
  width: auto; flex: 0 0 auto; margin: -3px 0 0 auto; padding: 0;
  border: 0; background: none; min-height: 0;
}
#inputs-section .section-head .bld-toggle label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; color: var(--text-dim); cursor: pointer; margin: 0;
}
/* A LINE, NOT A BOX. Simon: "Make it so the toggle doesn't have a full box
   underneath it. It should just be a little thin line, so it's more like just
   a line with the same thickness as a circle."

   The panel's checkbox is a 30x18 slab with a knob inside it
   (css/style/12-card-sections.css), which is the right shape in a settings
   row and too heavy beside a section heading. Here the track is a 3px rail
   the height of nothing much and the knob rides ON it rather than in it:
   the knob is the control and the rail is just where it runs. Centred with
   top:50% and a translate rather than a hand-counted offset, so the two stay
   aligned whatever the rail's thickness becomes. */
#inputs-section .section-head .bld-toggle input {
  margin: 0; cursor: pointer;
  width: 26px; height: 3px; border-radius: 999px;
  background: var(--border); overflow: visible;
}
#inputs-section .section-head .bld-toggle input::after {
  width: 11px; height: 11px; top: 50%; left: 0;
  transform: translateY(-50%);
  background: var(--text-dim);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: left .15s, background .15s;
}
#inputs-section .section-head .bld-toggle input:checked { background: var(--accent-soft); }
#inputs-section .section-head .bld-toggle input:checked::after {
  left: 15px; background: var(--accent);
}
#inputs-section .section-head .bld-toggle:hover label { color: var(--text); }

/* ---------- Full-width video trim panel (video-edit models) ---------- */
.vtrim-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; aspect-ratio: 16 / 9; max-height: 200px;
  border: 1px dashed var(--border-dash); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text-dim); cursor: pointer;
}
.vtrim-empty:hover { border-color: var(--accent); color: var(--text); }
.vtrim-empty-icon svg { width: 30px; height: 30px; opacity: .5; }
.vtrim-empty-cap { font-size: 11px; }
.vtrim-empty-acts { display: flex; gap: 6px; margin-top: 2px; }

.vtrim { position: relative; width: 100%; }
.vtrim-vid {
  width: 100%; max-height: 260px; display: block; border-radius: var(--radius-sm);
  background: #000; object-fit: contain;
}
.vtrim-rm {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--scrim-mid); border: 1px solid var(--border); border-radius: 3px; color: #fff;
}
.vtrim-rm:hover { background: var(--red); border-color: var(--red); }
.vtrim-bar {
  position: relative; height: 26px; margin: 8px 0 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer; touch-action: none;
}
.vtrim-sel {
  position: absolute; top: 0; bottom: 0; background: rgba(var(--accent-rgb),.22);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
}
.vtrim-play {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff;
  transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 4px var(--scrim-mid);
}
.vtrim-h {
  position: absolute; top: -3px; bottom: -3px; width: 12px; margin-left: -6px;
  background: var(--accent); border-radius: 3px; cursor: ew-resize; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.vtrim-h::after { content: ''; width: 2px; height: 12px; background: rgba(255,255,255,.75); border-radius: 2px; }
.vtrim-foot { display: flex; align-items: center; gap: 10px; }
/* The play button and the bar, one row -- the bar's own margin moves to the row. */
.vtrim-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.vtrim-row .vtrim-bar { flex: 1 1 auto; min-width: 0; margin: 0; }
.vtrim-read {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px; font-size: 10.5px; color: var(--text-dim);
}
.vtrim-btn {
  flex: none; padding: 4px 12px; border-radius: 3px; cursor: pointer;
  background: var(--card-hover); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; font-weight: 700;
}
.vtrim-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vtrim-btn:disabled { opacity: .6; cursor: default; }
.vtrim-btn.busy {
  border-color: var(--accent); color: var(--accent); opacity: 1;
  animation: vtrimPulse 1s ease-in-out infinite;
}
@keyframes vtrimPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.vtrim-play-btn {
  flex: none; width: 26px; height: 26px; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-hover); border: 1px solid var(--border); color: var(--text);
}
.vtrim-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.vtrim-vid { cursor: pointer; }
.vtrim-read .vtrim-dur i { font-style: normal; color: var(--text-faint); font-weight: 500; }
.vtrim-read b { color: var(--text); font-weight: 700; }
.vtrim-read .vtrim-dur { margin-left: auto; color: var(--accent); font-weight: 700; }
.vtrim-read .vtrim-up { color: var(--text-faint); }
/* The two frame numbers are click-to-type (typeNumberInPlace), so they have
   to look like something you can put a caret in rather than like the rest of
   the readout. */
.vtrim-read .tm-f { cursor: text; border-radius: 3px; padding: 0 2px;
  font-variant-numeric: tabular-nums; }
.vtrim-read .tm-f:hover { background: rgba(229,10,78,.16); }
.vtrim-read .tm-f.editing { outline: 1px solid var(--accent); outline-offset: 1px;
  background: rgba(229,10,78,.14); }
.vtrim-read .vtrim-dur .tm-assumed { margin-left: 6px; }

/* A GRID, NOT A WRAPPING ROW. Simon: "when the creation panel is at this
   kind of width, it doesn't have the three boxes and then an extra box
   underneath at a larger scale. All the reference boxes should remain
   consistent in terms of their scale."

   That was flex-wrap doing exactly what flex-wrap does: each ROW shares its
   width among the cards on it, so three cards on the first row came out a
   third wide and the fourth, alone on the second, grew to the half it was
   capped at. A grid sizes its columns once for every row -- as many 150px
   tracks as fit, each an equal share of the width -- so the card on the
   second row is the same card as the three above it.

   min(150px, 100%) rather than 150px, so a column dragged narrower than a
   card still shrinks the card with it (tests/panel-resize-free.mjs) instead
   of holding a 150px floor under the make column. */
/* ONE GAP, NOT TWO SPELLINGS OF IT — and this is what made the builder boxes
   the wrong size after they were already "fixed" once.

   The builder rule above packs #input-slots with the same track arithmetic
   this uses, which is only the same arithmetic if the GAP matches too: in a
   `repeat(auto-fill, minmax(…, 1fr))` grid the gap is subtracted before the
   tracks are shared out, so six pixels here and twelve there is a different
   box at the end of it. And that is exactly what was happening —
   31-generation-panel.css loads after this one and restyles `.slot-grid` with
   `gap: 12px`, which the tray picked up and the builder grid, matching a
   number copied out of THIS file, did not.

   A variable rather than the number, so there is one place to change and the
   two grids cannot be out by a gap again. Overridden, not re-declared, by
   31-generation-panel.css. */
.slot-grid {
  display: grid; gap: var(--slot-gap, 6px);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.slot-card {
  width: auto; aspect-ratio: 16 / 9; height: auto;
  min-width: 0; max-width: none;
  border-radius: var(--radius-sm); overflow: hidden; position: relative;
  cursor: pointer; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
/* A shade under the section it sits in, not the section's own colour.
   Simon: "adjust the brightness of the background on the reference
   placeholders so they're very slightly darker than the surrounding
   section." Transparent read as a dashed outline drawn on nothing; a
   little black under it reads as a well the picture drops into. */
.slot-card.empty { border: 1.5px dashed var(--border-dash); background: rgba(0, 0, 0, .16); }
.slot-card.empty:hover { border-color: var(--accent); background: var(--accent-soft); }
.slot-card.empty .icon { font-size: 16px; color: var(--text-dim); line-height: 1; }
.slot-card.empty .cap { font-size: 10px; color: var(--text-dim); }
.slot-card.empty:hover .icon, .slot-card.empty:hover .cap { color: var(--text); }

.slot-card.filled { border: 1px solid var(--border); }
.slot-card.filled img, .slot-card.filled video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.slot-card .media-glyph { font-size: 20px; }
.slot-card .rm {
  position: absolute; top: 3px; right: 3px; width: 16px; height: 16px;
  border-radius: 50%; border: none; cursor: pointer; z-index: 2;
  background: rgba(0,0,0,.75); color: #fff; font-size: 10px; line-height: 14px; text-align: center; padding: 0;
}
.slot-card .rm:hover { background: var(--accent); }
/* square, larger delete button on reference cards (site-style) */
.slot-card .rm.sq {
  top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 3px;
  background: var(--scrim-mid); display: inline-flex; align-items: center; justify-content: center;
}
.slot-card .rm.sq:hover { background: var(--red, #e5484d); }
.slot-card .rm.sq svg { display: block; }
/* HOW LONG THE CLIP IS. Bottom-left, above the filename caption, in the
   same 14px lane the upload chip uses — see 27-gallery-chrome.css. */
.slot-card .dur {
  position: absolute; bottom: 14px; left: 3px; z-index: 2;
  font-size: 7.5px; font-weight: 700; letter-spacing: .4px;
  background: rgba(0, 0, 0, .72); color: #fff;
  border-radius: 3px; padding: 2px 6px; pointer-events: none;
}
/* Empty until the metadata lands: a bare pill with nothing in it reads as a
   smudge on the thumbnail. */
.slot-card .dur:empty { display: none; }
/* AND THE UPLOAD CHIP STEPS ASIDE. Both live bottom-left; the duration is
   always there for a clip and the chip is occasional, so the constant one
   keeps the corner and the visitor moves. Three classes to the chip's two,
   so this wins on specificity wherever the two files land in the cascade. */
.slot-card .dur ~ .upl { left: auto; right: 3px; }

.slot-card .badge {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  font-size: 8px; text-align: center; padding: 2px 3px;
  background: rgba(0,0,0,.65); color: #cfcfcf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.slot-tools { display: flex; gap: 6px; margin-top: 5px; }

/* Start frame / End frame rendered side by side.

   HALF THE ROW EACH, AND THE CARD FILLS ITS HALF. Simon: "start and end
   frame reference boxes are still too small, they should be same size as
   normal reference boxes." They were a quarter of the width of every other
   card, and by two compounding rules: `flex: 0 0 auto` shrank each .slot to
   its content, which is the card's 150px base, and .slot-card's
   `max-width: calc(50% - 3px)` — right for a wrapping row, where it makes a
   lone card the size a card in a pair would be — then halved that again to
   72px. The pair IS the pair now: each slot takes an equal share of the row,
   and the one card in it fills its share, which lands within a couple of
   pixels of a reference card in the block above. */
/* AND THEN: THE SAME BOX AS EVERYWHERE ELSE, NOT HALF A ROW.

   Simon: "can we unify reference box sizes over all views, the reference
   boxes in different modes should match those in the create mode."

   Half the row each was an improvement on the quarter-width fault described
   above, and it is still not the same box: half of 508 is 249, and a
   reference card in the Create tray beside it is 161. Two sizes of the same
   control on one screen, and the eye has to work out whether the difference
   means anything. It does not.

   So the pair lays its slots out on the SAME tracks the tray uses — the
   identical declaration, reading the identical gap — and its two slots take
   the first two of them. Same arithmetic, same width, nothing to keep in
   step by hand. A pair in a column too narrow for two tracks still gets one
   and the slots stack, which is the same thing the tray does there. */
.slot-pair {
  display: grid; gap: var(--slot-gap, 6px); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.slot-pair .slot { min-width: 0; }
/* One track, whatever the half is wide: auto-fill in a slot wide enough for
   two tracks would give the pair's one card half of its half, which is the
   quarter-width fault described above coming back by another road. */
.slot-pair .slot > .slot-grid { grid-template-columns: minmax(0, 1fr); }
.slot-pair .slot > .slot-grid > .slot-card { max-width: none; }

/* Compact icon-only capture / sketch buttons — bare icons, no chrome */
.btn.small.icon-btn {
  padding: 0; width: 26px; height: 26px; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 0; color: var(--text-dim);
}
.btn.small.icon-btn:hover {
  background: none; border: none; color: var(--text);
}