/*
 * Deletion-dialog styling — mirrors m7-content-app's deletion.module.css. The DS `Dialog.Footer`
 * only pads (it does NOT lay out its children), so footer buttons need a flex wrapper; and the
 * danger dialog wants a styled description line under the title. Colors use DS gray tokens.
 */

._footer_3ds73_7 {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

._description_3ds73_15 {
  padding: 28px 20px 9px;
  font-size: 14px;
  line-height: 22px;
  color: var(--mgnl-color-gray-70, #564f60);
}

/*
 * The simple DS `TanstackTable` renders `.mgnl-table` WITHOUT its `--full-width` modifier, so it
 * shrinks to content and won't span the dialog when rows are short. Force it full-width from the
 * wrapper. Unlayered → wins over the DS's `@layer components` base rule.
 */
._tableWrap_3ds73_27 {
  width: 100%;
}
._tableWrap_3ds73_27 .mgnl-table {
  width: 100%;
}
/* Detail-view layout to match the Figma "single-trait" frame (node 32:7389).
   Colours fall back to the DS neutral tokens the design references. */

/* ---- app bar ---- */

/* Status tag + autosave indicator, sitting just right of the title. */
._appBarMeta_1d80e_7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

/* ---- form layout ---- */

/* Form.Body takes no className, so reach it through the form root. The DS indents form groups that
   sit beside a fieldset via `.mgnl-form__body > *` rules, which only match when the groups are
   direct children — so the body itself has to be the layout box, not a wrapper div. */
._detailForm_1d80e_19 .mgnl-form__body {
  display: grid;
  gap: var(--mgnl-form-md-form-group-gap);
  padding: 0 24px;
}

/* ---- traits fieldset ---- */

/* The traits card, its dashed containers, the header overlap, the grip and the delete action all
   come from the DS `FormFieldset` (see TraitsField/TraitConditionRow) — only these remain. */

/* No error styles here: load/save/traits failures render as DS banners through the shared
   notification channel (src/notification), which brings its own danger/warning styling. */

/* Hint beside the "+ Trait" action; centred against it since the footer is a flex row. */
._traitsEmpty_1d80e_34 {
  align-self: center;
  font-size: 14px;
  color: var(--text-color-dim, #756d80);
}

/* The DS sizes the floating drag preview (`.mgnl-form-drag__item`) and the keyboard-drag ghost
   (`.mgnl-form-drag__ghost--keyboard-mode`) for a single `FormGroup` row: a fixed
   `--mgnl-form-group-md-height-dragged-item` (3.125rem — one 38px icon button plus the fieldset's
   padding) with `overflow: hidden`. Our rows are `FormFieldset` CARDS, and one with a trait selected
   carries a value block underneath, so at that height the preview shows only the header strip and a
   keyboard reorder visibly collapses the row mid-drag.

   Overridden here rather than upstream because the custom properties are the DS's own seam, and
   the nested-fieldset case may simply not be one it sizes for. Scoped to the traits list so no other
   FormDrag on the page inherits it. */
._traitsDragScope_1d80e_50 {
  --mgnl-form-group-md-height-dragged-item: auto;
  --mgnl-form-group-md-height-dragged-item-stacked: auto;
}

/* ---- loading skeleton ---- */

/* Placeholder form shown while the segment loads, mirroring m7-content-app's `DetailViewForm`:
   a label bar and a field bar per form field, at the form's own padding. */
._skeleton_1d80e_59 {
  display: flex;
  flex-direction: column;
  gap: var(--mgnl-dimension-16, 16px);
  padding: 0 var(--mgnl-dimension-24, 24px);
}

._skeletonField_1d80e_66 {
  display: flex;
  flex-direction: column;
  gap: var(--mgnl-dimension-8, 8px);
}