/* The inspector ----------------------------------------------------------- */

/* The inspector: the selected thing's fields, opened in place (spec.md §6) —
   under the row or the cards it belongs to, inside that pane's own scroller,
   so not one itself. Set apart from what is around it the way an open row is. */
.inspector {
  flex: none;
  margin: 2px 12px 10px;
  padding: 10px 14px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inspector-head { display: flex; flex-direction: column; gap: 2px; }
.inspector-head .section-label { padding: 8px 0 0; }
.inspector-head .iname { font-size: 17px; font-weight: 700; word-break: break-word; font-family: var(--mono); }
.ifield { display: flex; flex-direction: column; gap: 5px; }
.ifield .ilabel { font-size: 11.5px; color: var(--muted); }
.ifield .cfg-text { width: 100%; min-width: 0; }
.ifield select { max-width: 100%; }
.ifield .row.wrap { row-gap: 6px; }
.ifield .thumb {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: var(--radius);
  background: var(--panel-3);
  border: 1px solid var(--border);
}
.ifield .hint.mono { font-size: 11px; }
/* The way to take the selected thing out, under its fields — a point off the
   road, a body out of the world: crimson, its own width. */
.inspector .link.danger { color: var(--danger); align-self: flex-start; }

/* The inspector holds a sound's editor or player, and a person's moods. Its
   parts do not scroll on their own; it does. */
.inspector .scroll { flex: none; overflow: visible; }
/* The sound editor was built to fill a pane and shrink; here it takes its own
   height, or the field under it paints over the sliders. */
.inspector .sound { flex: none; min-height: 0; }
.inspector .sound .pad { padding: 0; }
.inspector .media { padding: 0; background: none; }
/* With a ··· and a ✕ beside the name: a row after all, the name growing. */
.inspector-head.row { flex-direction: row; align-items: flex-start; gap: 4px; }
.inspector-head.row .grow { min-width: 0; }
.mood-row { align-items: center; gap: 6px; }
.mood-row .cfg-text { flex: 1; min-width: 4rem; }
.ifield .mood-row .thumb {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  max-height: none;
  object-fit: contain;
  border: none;
  background: none;
}