/*
 * 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_1v0kg_7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

._saveIndicator_1v0kg_14 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color-dim, #756d80);
  white-space: nowrap;
}

._saveIndicatorError_1v0kg_24 {
  color: var(--mgnl-color-danger, #c30000);
}

/* Spin the loader icon while saving. */
._spin_1v0kg_29 {
  animation: _detail-spin_1v0kg_1 0.8s linear infinite;
}

@keyframes _detail-spin_1v0kg_1 {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 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_1v0kg_44 .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_1v0kg_59 {
  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_1v0kg_75 {
  --mgnl-form-group-md-height-dragged-item: auto;
  --mgnl-form-group-md-height-dragged-item-stacked: auto;
}