:root {
  --material-ink: #292936;
  --material-muted: #667085;
  --material-border: #d9dce5;
  --material-border-strong: #b9b3ca;
  --material-surface: #ffffff;
  --material-soft: #f7f7fa;
  --material-accent: #735ea8;
  --material-accent-soft: #f0ecf8;
  --material-danger: #b42318;
  --material-success: #067647;
  --material-success-soft: #ecfdf3;
  --material-warning: #b54708;
  --material-warning-soft: #fffaeb;
  /* Stages are neutral grey carrying the theme's secondary (a lilac) as their
     accent, so a stage reads as a container around purple materials without a
     hue the theme does not own. --secondary is surface-aware (see
     static/sass/brainstem-theme/utils/colors.sass), so the accent follows the
     private/public/super palettes; the hover shade is a fixed darker lilac
     because a theme variable cannot be shaded here. Teal, rose and steel blue
     were all tried for stages and rejected as foreign to the theme. The grey
     tints step down from tray to header to open header so the header stays
     visibly distinct from the tray around it. */
  --material-step-accent: var(--secondary, #917ac2);
  --material-step-accent-strong: #7b64ad;
  --material-step-soft: #e9e9f0;
  --material-step-soft-strong: #dedee8;
  --material-step-border: #d2d2dd;
  --material-step-tray: #f7f7fa;
}

/* The right-hand width cap lives with the theme's other form-width rules
   (form-content-width in static/sass/brainstem-theme/utils/attributes.sass), so
   this tab stops at the same edge as a normal form row and follows the same
   breakpoints. Setting it here as well is what broke it: the section carries
   both this class and .material-inline-group, and that rule's later
   `max-width: none !important` won. */
.material-collection-inline {
  display: block !important;
  width: 100%;
  grid-column: 1 / -1;
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 2rem 0;
  color: var(--material-ink);
}

.material-inline-tab-title {
  display: none !important;
}

.material-inline-tab-surface {
  width: 100%;
  min-height: 100%;
  padding: .85rem 1rem 1.25rem;
  box-sizing: border-box;
  background: var(--material-surface);
}

/* No max-width here: this class sits on the same element as
   .material-collection-inline, so releasing the cap would undo the shared
   form-content-width above. The inner fieldset does need it released, to fill
   whatever width the section settles on. */
.material-inline-group {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.material-inline-group > .material-inline-tab-surface > fieldset.module {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.material-inline-group {
  display: block !important;
}

.material-inline-group > .material-inline-tab-surface > fieldset.module {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .65rem 0 !important;
  align-content: start !important;
}

.material-inline-group > .material-inline-tab-surface > fieldset.module > .material-collection-heading,
.material-inline-group > .material-inline-tab-surface > fieldset.module > .material-card-list,
.material-inline-group > .material-inline-tab-surface > fieldset.module > .errorlist {
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box;
}

.material-collection-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 !important;
  padding: .1rem .25rem !important;
  box-sizing: border-box;
}

.material-collection-heading > div {
  min-width: 0;
  flex: 1 1 auto;
}

.material-inline-group > .material-inline-tab-surface > fieldset.module > .material-collection-heading h2,
.material-readonly .material-collection-heading h2 {
  display: flex !important;
  width: auto !important;
  align-items: center;
  margin: 0 0 .18rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--material-ink) !important;
  background: transparent !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-transform: none !important;
}

/* Jet treats every top-level fieldset as a tab module and stamps
   `style="display: flex"` on the active one, which would lay these stacked
   sections out in a row. `.material-inline-group` overrides the same thing. */
.material-standalone-form {
  display: block !important;
}

.material-standalone-form > .material-form-grid,
.material-standalone-form > section {
  margin-bottom: .85rem;
}

.material-standalone-form .material-readonly-value {
  color: var(--material-muted);
  font-size: .9rem;
  line-height: 1.45;
}

.material-collection-actions {
  display: inline-flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Filled primary, matching the modal editor's own add/save buttons. */
.material-collection-add {
  flex: 0 0 auto;
  min-height: 2.55rem;
  margin: 0 !important;
  padding: .55rem .9rem !important;
  border: 1px solid transparent !important;
  border-radius: .45rem;
  color: #fff !important;
  background: #8122a1 !important;
  font-weight: 650;
  cursor: pointer;
}

.material-collection-add:hover,
.material-collection-add:focus-visible {
  background: #6d188b !important;
}

/* Secondary to "+ Add material": same box metrics, carrying the theme's
   secondary on a soft tint, because inserting from the library is the less
   frequent of the two ways to add a row. --secondary is surface-aware, so this
   follows the private/public/super palettes. */
.material-collection-add--template {
  display: inline-flex !important;
  gap: .4rem;
  align-items: center;
  border-color: var(--material-step-accent) !important;
  color: var(--material-step-accent) !important;
  background: var(--material-step-soft) !important;
}

.material-collection-add--template:hover,
.material-collection-add--template:focus-visible {
  background: #e6dff5 !important;
}

.material-collection-add--template svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.material-help,
.material-source-panel p,
.material-detail-panel p {
  margin: 0;
  color: var(--material-muted);
  font-size: .9rem;
  line-height: 1.45;
  padding-left: 0 !important;
}

.material-readonly__table {
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: .65rem;
  background: var(--material-surface);
}

.material-readonly__row {
  display: grid;
  grid-template-columns: minmax(9rem, .85fr) minmax(13rem, 1.5fr) minmax(7rem, .65fr) minmax(10rem, 1fr);
  gap: 1rem;
  align-items: start;
  padding: .8rem 1rem;
  border-top: 1px solid var(--material-border);
}

.material-readonly__row:first-child {
  border-top: 0;
}

.material-readonly__row--heading {
  color: var(--material-muted);
  background: var(--material-soft);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.material-readonly__row small {
  display: block;
  margin-top: .15rem;
  color: var(--material-muted);
  font-size: .8rem;
  line-height: 1.35;
}

.material-readonly__empty {
  grid-column: 1 / -1;
  color: var(--material-muted);
}

/* The "Materials #" hover card lists every material as a small table. Summary
   popups deliberately do not — they show a titled count and the consumables, so
   they read like the Equipment and Target regions rows around them.

   SummaryHoverPopup.js injects the card into the element that opened it, so one
   opened from a changelist sits *inside* that table's <td> and inherits its
   padding, borders and font rules. Everything below therefore restates the
   layout rather than assuming a clean slate; the selectors name the cell class
   alongside the element so they outrank the changelist's own `tbody td` rules. */
.material-summary-table {
  width: 100%;
  max-width: 34rem;
  margin: .1rem 0 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.material-summary-table th.material-summary-table__cell,
.material-summary-table td.material-summary-table__cell {
  padding: .18rem .6rem .18rem 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.material-summary-table th.material-summary-table__cell {
  padding-bottom: .3rem !important;
  border-bottom: 1px solid var(--material-border) !important;
  color: var(--material-muted) !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.material-summary-table td.material-summary-table__cell {
  padding-top: .3rem !important;
  border-top: 1px solid var(--material-soft) !important;
  color: var(--material-ink) !important;
}

.material-summary-table tbody tr:first-child td.material-summary-table__cell {
  border-top: 0 !important;
}

.material-summary-table th.material-summary-table__cell:first-child,
.material-summary-table td.material-summary-table__cell:first-child {
  width: 44%;
}

.material-summary-table th.material-summary-table__cell:nth-child(2),
.material-summary-table td.material-summary-table__cell:nth-child(2) {
  width: 24%;
}

/* The material keeps the theme's link tag, but at the changelist's own padding
   it would be taller than the row it sits in. inline-block keeps the tag a
   clean block when a long name wraps onto a second line, which an inline
   background would render ragged. */
.material-summary-table td.material-summary-table__cell a {
  display: inline-block !important;
  max-width: 100%;
  padding: .04rem .3rem !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

/* Brief per-material entries in the changelist column. The flex wrapper keeps
   wrapped or narrow-column entries as distinct rows with a consistent gap.
   A div rather than a span means the theme leaves each entry alone; the blue
   link lives in the hover card it opens, not in the column.

   ``tooltip`` is what SummaryHoverPopup.js binds to, but it is also a Bootstrap
   class carrying `opacity: 0` and absolute positioning — hence the resets. */
.material-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  max-width: 100%;
}

.material-column__item,
.material-column__more {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: .02rem .35rem;
  border-radius: .25rem;
  background: var(--material-soft);
  color: var(--material-muted);
  font-size: .78rem;
  line-height: 1.5;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.material-column__item.tooltip {
  position: static !important;
  z-index: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: help;
}

@media (hover: hover) and (pointer: fine) {
  .material-column__item.tooltip:hover {
    background: var(--material-accent-soft);
    color: var(--material-accent);
  }
}

/* The material is this row's way back to the catalog item or stock lot it came
   from, so it reads as a link tag — the same treatment related records get in
   the surrounding admin (theme: $color-tag-background/$color-tag-text,
   $radius-tags). The theme's own tag rule skips anchors that carry a class, so
   the values are restated here rather than inherited. */
.material-readonly__link {
  display: inline-block;
  padding: 0 .35rem;
  border-radius: .25rem;
  background: #e8f0ff;
  color: #4550b6 !important;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .material-readonly__link:hover {
    background: rgba(232, 240, 255, .5);
    text-decoration: none;
  }
}

.material-readonly__empty {
  margin: 0;
  padding: 1rem;
  color: var(--material-muted);
}

/* The Materials tab when its rows came from a template. Marking the tab rather
   than banding the form says the same thing in the one place the user has to
   pass through anyway, and without implying the rows are incomplete -- they are
   saveable as they stand. The dot is a pseudo-element so it survives
   updateMaterialTabCount rewriting the label's text. */
.changeform-tabs a.material-tab--from-template {
  border-color: #d8c56b !important;
  color: #5c4a00 !important;
  background: #fff9db !important;
}

.changeform-tabs a.material-tab--from-template::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: #c99a00;
  vertical-align: middle;
}

.material-applied-values,
.material-provenance {
  margin-top: .65rem;
  padding: .65rem .75rem;
  border: 1px solid #ddd5eb;
  border-left: .22rem solid var(--material-accent);
  border-radius: .5rem;
  background: #faf8fd;
}

.material-applied-values__heading {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.material-applied-values__heading > .fa {
  color: var(--material-accent);
}

.material-applied-values__heading strong,
.material-applied-values__heading span {
  display: block;
}

.material-applied-values__heading span,
.material-provenance > span {
  margin-top: .08rem;
  color: var(--material-muted);
  font-size: .76rem;
}

.material-applied-values dl,
.material-provenance dl {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .4rem;
  margin: .55rem 0 0;
}

.material-applied-values dl div,
.material-provenance dl div {
  display: grid;
  gap: .12rem;
  padding: .42rem .5rem;
  border: 1px solid #ece7f4;
  border-radius: .35rem;
  background: #fff;
}

.material-applied-values dt,
.material-provenance dt {
  color: var(--material-muted);
}

.material-applied-values dd,
.material-provenance dd {
  margin: 0;
  font-weight: 650;
  text-align: left;
}

.material-card-list {
  display: grid;
  gap: .5rem;
}

.material-card-list > .material-card,
.material-dialog__rows > .material-card,
.material-panel-list > .material-card,
.material-inline-group .material-card {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 1px solid var(--material-border) !important;
  border-radius: .65rem !important;
  background: var(--material-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.material-card.is-open {
  border-color: #c9bce0 !important;
  box-shadow: none;
}

.material-card.is-deleted {
  display: none !important;
}

.material-card.empty-form {
  display: none !important;
}

.material-card__header,
.material-inline-group .material-card__header {
  display: grid !important;
  grid-template-columns: 2rem minmax(12rem, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: .18rem .65rem .18rem 1rem !important;
  border: 0 !important;
  border-radius: .65rem;
  background: #f2edf9 !important;
}

/* Same inset-bar language as .has-error below, so the row being edited is
   findable after scrolling down into its form. The error bar is defined later
   and still wins on a card that is both open and invalid. */
.material-card.is-open .material-card__header {
  border-bottom: 1px solid #d8cee9 !important;
  border-radius: .65rem .65rem 0 0;
  background: #e9e0f4 !important;
  box-shadow: inset .18rem 0 0 var(--material-accent);
}

.material-card__order {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #ddd4ec;
  border-radius: .4rem;
  color: var(--material-accent) !important;
  background: #fff !important;
  font-size: .78rem;
  font-weight: 700;
}

.material-card.is-open .material-card__order {
  border-color: var(--material-accent);
}

.material-card__toggle {
  display: block !important;
  min-width: 0;
  padding: .15rem 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.material-card__summary-grid {
  display: grid;
  /* Fixed, not max-content: every card is its own grid, so a content-sized
     column makes the identity start at a different x on every row and the list
     stops being scannable. Long role labels ellipsis instead. */
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: .12rem;
  overflow: hidden;
}

/* Role over its source/state pills, as one column-1 block spanning both summary
   rows, so the pills stay out of the identity line's width. */
.material-card__meta {
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .22rem;
}

.material-card__badges {
  display: flex;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: .22rem .3rem;
}

.material-card__eyebrow {
  display: flex;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  margin: 0;
  /* Neutral, not accent: the material name is what should be read first, and
     the card already spends its accent on the source pill and the actions. */
  color: #6f6880;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.material-card__eyebrow > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-material-primary-badge]:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.material-card__primary-line {
  min-height: 1rem;
  color: var(--material-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.material-card__identity-line {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-items: center;
  gap: .45rem;
  overflow: hidden;
}

.material-card__identity {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--material-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nothing chosen or nothing recorded yet. Styled as absent rather than as a
   value, so a row that still needs work is visible without reading it. The
   trailing padding keeps the italic overhang out of the clipping edge. */
.material-card__identity.is-placeholder,
.material-card__detail-value.is-placeholder {
  padding-right: .12em;
  color: #8d879b;
  font-style: italic;
  font-weight: 500;
}

.material-card__source-badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 1.2rem;
  align-items: center;
  padding: .08rem .42rem;
  border: 1px solid #d8cee9;
  border-radius: 999px;
  color: #65558d;
  background: #faf8fd;
  font-size: .67rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

/* This one sits in the action cluster rather than beside the source badge, so it
   takes the action buttons' height and corner and reads as part of that row. It
   must not read as a button though: it is filled where they are outlined, and it
   has no hover, no focus ring and no pointer cursor to offer. */
.material-card__new-badge {
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 2rem;
  align-items: center;
  margin-right: .1rem;
  padding: 0 .5rem;
  border: 1px solid var(--material-accent);
  border-radius: .4rem;
  color: #fff;
  background: var(--material-accent);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.material-card__detail {
  /* Align under the title (column 2), not under the role/eyebrow (column 1). */
  grid-column: 2;
  grid-row: 2;
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: .3rem;
  overflow: hidden;
  color: var(--material-muted);
  font-size: .82rem;
  line-height: 1.35;
  white-space: nowrap;
}

.material-card__filter-summary {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #65558d;
  font-weight: 600;
  text-overflow: ellipsis;
}

.material-card__summary-separator {
  flex: 0 0 auto;
  color: #aaa3b6;
}

.material-card__detail-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-card__actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.material-action-button {
  display: inline-flex;
  box-sizing: border-box !important;
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #a99bc2 !important;
  border-radius: .4rem;
  color: var(--material-accent) !important;
  background: #fff;
  font-size: .95rem;
  line-height: 1;
  font-weight: 650;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.material-action-button > * {
  color: inherit !important;
  line-height: 1;
}

.material-action-button > .fa {
  font-size: .9rem;
  font-weight: 900;
}

.material-action-button:hover,
.material-action-button:focus-visible {
  color: #fff !important;
  border-color: var(--material-accent) !important;
  background: var(--material-accent) !important;
}

/* The one irreversible action in the row carried this class but no styling, so
   delete looked exactly like duplicate. */
.material-action-button--danger {
  border-color: #e0b8b3 !important;
  color: var(--material-danger) !important;
}

.material-action-button--danger:hover,
.material-action-button--danger:focus-visible {
  color: #fff !important;
  border-color: var(--material-danger) !important;
  background: var(--material-danger) !important;
}

/* Secondary actions repeat on every row and outweigh the content they act on.
   On pointer devices they fade in with the card; touch and keyboard keep them,
   and hidden buttons still hold their space so nothing shifts on hover. */
@media (hover: hover) and (pointer: fine) {
  .material-card__actions [data-material-move-up],
  .material-card__actions [data-material-move-down],
  .material-card__actions [data-material-duplicate-row],
  .material-card__actions .templates-create-modal__trigger,
  .material-card__actions [data-material-remove-row],
  .material-card__actions [data-modal-action="up"],
  .material-card__actions [data-modal-action="down"],
  .material-card__actions [data-modal-action="duplicate"],
  .material-card__actions [data-modal-action="remove"] {
    opacity: .35;
    transition: opacity .12s ease;
  }

  .material-card:hover .material-card__actions [data-material-move-up],
  .material-card:hover .material-card__actions [data-material-move-down],
  .material-card:hover .material-card__actions [data-material-duplicate-row],
  .material-card:hover .material-card__actions .templates-create-modal__trigger,
  .material-card:hover .material-card__actions [data-material-remove-row],
  .material-card:hover .material-card__actions [data-modal-action="up"],
  .material-card:hover .material-card__actions [data-modal-action="down"],
  .material-card:hover .material-card__actions [data-modal-action="duplicate"],
  .material-card:hover .material-card__actions [data-modal-action="remove"],
  .material-card:focus-within .material-card__actions [data-material-move-up],
  .material-card:focus-within .material-card__actions [data-material-move-down],
  .material-card:focus-within .material-card__actions [data-material-duplicate-row],
  .material-card:focus-within .material-card__actions .templates-create-modal__trigger,
  .material-card:focus-within .material-card__actions [data-material-remove-row],
  .material-card:focus-within .material-card__actions [data-modal-action="up"],
  .material-card:focus-within .material-card__actions [data-modal-action="down"],
  .material-card:focus-within .material-card__actions [data-modal-action="duplicate"],
  .material-card:focus-within .material-card__actions [data-modal-action="remove"] {
    opacity: 1;
  }
}

.material-icon-button {
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: .4rem;
  color: #5e586b;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.material-icon-button:hover,
.material-icon-button:focus-visible {
  border-color: var(--material-border);
  background: var(--material-soft);
}

.material-icon-button--danger:hover,
.material-icon-button--danger:focus-visible {
  color: var(--material-danger);
  border-color: #f4c7c3;
  background: #fff4f3;
}

.material-card__chevron {
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  flex-basis: 2rem;
  margin: 0 0 0 .15rem !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background: #e7def3 !important;
}

.material-card__chevron:hover,
.material-card__chevron:focus-visible {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--material-accent) !important;
}

.material-card__chevron .fa {
  transition: transform .15s ease;
}

.material-card.is-open .material-card__chevron .fa {
  transform: rotate(180deg);
}

.material-card__body {
  padding: .75rem;
  background: #fff;
  border-radius: 0 0 .65rem .65rem;
}

.material-card__body[hidden] {
  display: none !important;
}

.material-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* One gutter for every two-column row. Wide enough for the dependency arrow
     to sit in it, so arrow and non-arrow rows keep identical column edges. */
  gap: .7rem 2.25rem;
}

.material-form-grid--overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  margin-bottom: .55rem;
}

/* The source toggle sits beside Role, so its control row must line up with the
   select rather than hug the top of the cell. */
.material-field--source {
  align-self: end;
}

.material-field--source .material-source-choice > ul {
  min-height: 2.55rem;
}

.material-form-grid--footer {
  margin-top: 1rem;
}

.material-field {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.material-field--wide {
  grid-column: 1 / -1;
}

.material-field label,
.material-source-panel label {
  display: block;
  margin: 0 0 .35rem !important;
  color: #3d3946;
  font-size: .82rem !important;
  font-weight: 650 !important;
  line-height: 1.3;
}

.material-label-line,
.material-heading-with-help {
  display: flex;
  width: auto !important;
  align-items: center;
  gap: .4rem;
  padding: 0 !important;
  background: transparent !important;
}

.material-label-line {
  justify-content: space-between;
  margin-bottom: .35rem;
}

.material-label-line label {
  margin-bottom: 0 !important;
}

.material-help-icon {
  flex: 0 0 auto;
  margin-left: .2rem;
}

.material-help-icon .help-text {
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}

.material-field input:not([type="checkbox"]):not([type="radio"]),
.material-field select,
.material-field textarea,
.material-source-fields input:not([type="checkbox"]):not([type="radio"]),
.material-source-fields select,
.material-source-fields textarea {
  width: 100% !important;
  max-width: none !important;
  min-height: 2.65rem;
  box-sizing: border-box;
}

.material-field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.material-field select[multiple] {
  min-height: 7rem;
}

/* Draw the dropdown chevron on every native single select (the detail/overview
   dropdowns). The two-class selector beats the theme's global
   `select:not(...) { background: none !important }` (specificity 0,1,1) that
   would otherwise strip the arrow. The JSON editor's own unit selects are not
   listed here — they get the theme's chevron from .form-group--units__content,
   the same as on every other schema-backed form. */
.material-field select:not([multiple]),
.material-source-fields select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23735ea8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  background-size: .75rem .5rem !important;
  cursor: pointer;
}

.material-field small,
.material-source-fields small {
  display: block;
  margin-top: .28rem;
  color: var(--material-muted);
  font-size: .75rem;
  line-height: 1.35;
}

.material-optional {
  color: #8a8494;
  font-size: .72rem;
  font-weight: 400;
}

.material-required {
  color: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: help;
}

/* Mirrors the admin's .add-related affordance: a round plus sitting on the same
   line as the control it extends, not a text link below it.
   Every declaration needs !important: the theme's `.button, button` reset sets
   background/color/padding/border-radius with !important, so plain rules lose. */
.material-create-link {
  flex: 0 0 auto !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 100% !important;
  background: var(--material-accent) !important;
  background-color: var(--material-accent) !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.material-create-link:hover,
.material-create-link:focus-visible {
  background: #5b4a89 !important;
  background-color: #5b4a89 !important;
}

/* The label line stays full width; the control and its plus share the next row. */
.material-field--with-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem;
}

.material-field--with-create > .material-label-line {
  grid-column: 1 / -1;
}

.material-field--with-create > select,
.material-field--with-create > .select2-container {
  min-width: 0;
}

.material-manual-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .1rem 0 0;
  color: #6f6880;
  font-size: .76rem;
  line-height: 1.4;
}

/* Two different jobs for the same Jet popup. Both are scoped to a class this
   editor sets, so neither reaches the regular admin add forms:
   - From an inline form it stays the default in-interface popup, offset past
     the side menu (.custom-container's own padding-left).
   - From the materials dialog it becomes a true modal on top of it, clearing
     the dialog's z-index and dropping the side-menu offset. */
@media screen and (min-width: 1025px) {
  .related-popup-container.material-inline-popup-open .related-popup {
    padding-left: 17.85714rem !important;
  }
}

.related-popup-container.material-create-popup-open {
  z-index: 1100 !important;
}

/* Inset so it reads as a modal card over the dialog rather than a full-bleed
   page, and keep the frame from sitting under the close control. */
.related-popup-container.material-create-popup-open .related-popup {
  top: 2.5rem !important;
  right: 2.5rem !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding-left: 0 !important;
  overflow: hidden !important;
  border-radius: .8rem !important;
  box-shadow: 0 1.5rem 3rem rgba(24, 22, 29, .35) !important;
}

.related-popup-container.material-create-popup-open .related-popup iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* The theme pins .related-popup-back to left: 22rem, which lands far outside a
   centred card. Anchor it to the card's top-right instead. The card is
   min(72rem, 92vw) wide and centred, so its right edge is half that from
   centre. */
body:has(.related-popup-container.material-create-popup-open) .related-popup-back {
  top: 2.5rem !important;
  left: auto !important;
  right: 2.5rem !important;
  z-index: 1101 !important;
  border-radius: 0 .8rem 0 .5rem !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.material-primary-field__header {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
}

.material-primary-field__title {
  color: var(--material-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
}

.material-primary-toggle__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.material-primary-toggle {
  display: inline-grid !important;
  width: min(14rem, 100%) !important;
  min-height: 2.5rem;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: .15rem;
  margin: 0 !important;
  padding: .18rem !important;
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: .48rem;
  background: var(--material-soft);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.material-primary-toggle::before {
  content: none !important;
  display: none !important;
}

.material-primary-toggle__option {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 .8rem;
  border-radius: .34rem;
  color: #5a5563;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.1;
  transition: color .2s ease, background .2s ease;
}

.material-primary-toggle__input:not(:checked) + .material-primary-toggle .material-primary-toggle__option--off {
  color: #fff;
  background: #8122a1;
}

.material-primary-toggle__input:checked + .material-primary-toggle .material-primary-toggle__option--on {
  color: #fff;
  background: #8122a1;
}

.material-primary-toggle__input:focus-visible + .material-primary-toggle {
  outline: 2px solid var(--material-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(129, 34, 161, .16);
}

/* Borderless: the card already groups these, so inner outlines only add noise
   and vertical space. Applications/stages keep their frame (they are separate
   objects, not sections of this row). */
.material-source-panel,
.material-detail-panel {
  margin-top: .55rem;
  padding: 0;
  border: 0;
  background: none;
}

.material-card__body > .material-source-panel,
.material-card__body > .material-detail-panel {
  border: 0;
  background: none;
}

.material-source-panel__heading,
.material-detail-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

/* Same faint rule and spacing as the "Details · <type>" heading on the parent form
   (.type-details-heading in edit-view.sass); the JSON editor below brings its own top space. */
.material-detail-panel__heading {
  padding-bottom: .75rem;
  border-bottom: 1px solid #ece8f3;
}

.material-source-panel h3,
.material-detail-panel h3 {
  display: block !important;
  width: auto !important;
  margin: 0 0 .12rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--material-ink) !important;
  background: transparent !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Toolbar add controls. The step/application pickers sit beside "Add material"
   rather than in their own panel heading: one button per declared type put seven
   of them in the Immunolabeling header, which overflowed into a diagonal
   cascade. This is the changelist's "Add procedure" split button rebuilt here,
   since the theme's .addlink--with-dropdown is scoped to .list-view__header. */
.material-dialog__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}

/* A parent with no applications or no stages renders an empty host; without
   this the flex gap still reserves space for it beside "Add material". */
.material-dialog__toolbar-actions > span:empty {
  display: none;
}

.material-add-control {
  position: relative;
  display: inline-flex;
}

.material-add-control__button {
  display: inline-flex !important;
  align-items: center;
  gap: .3rem;
}

.material-add-control__button > .fa-chevron-down {
  margin-left: .25rem;
  padding: .2rem .35rem;
  border-radius: .3rem;
  background: rgba(255, 255, 255, .22);
  font-size: .7rem;
  transition: transform .15s ease;
}

.material-add-control.is-open .material-add-control__button > .fa-chevron-down {
  transform: rotate(180deg);
}

.material-add-control__menu {
  /* Fixed, with coordinates set by positionAddMenu(): the control sits in the
     scrolling content area, so an absolutely positioned menu was clipped by
     that scrollport and disappeared behind the footer. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 0;
  overflow: hidden auto;
  border: 1px solid var(--material-border);
  border-radius: .5rem;
  background: var(--material-surface);
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.material-add-control.is-open .material-add-control__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* !important throughout: the theme styles every button at a higher
   specificity, which is what swallowed the hover state. */
.material-add-control__option {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: .5rem .95rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--material-ink) !important;
  background: transparent !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.material-add-control__option:hover,
.material-add-control__option:focus-visible {
  color: var(--material-accent) !important;
  background: var(--material-accent-soft) !important;
  outline: none;
}

/* Applications and stages are .material-card instances, so the header frame,
   order badge, open state, and chevron rotation all come from the material card
   rules above. Only the collapsed summary line differs: a step is identified by
   its own name and conditions rather than by a source and type. */
.material-panel-list {
  display: grid;
  gap: .75rem;
}

/* Steps and applications read as their own region above the material list. The
   separation comes from the tint and the spacing below it, with no border: an
   outline here framed the step cards a second time. */
.material-group-panel {
  margin: 0 0 1rem !important;
  padding: .85rem !important;
  border: 0 !important;
  border-radius: .75rem !important;
  background: var(--material-step-tray) !important;
}

/* Shorter than the material list's placeholder: this one sits inside the tray
   rather than filling the dialog. */
.material-group-panel .material-dialog__empty {
  padding: 1.5rem 1rem;
  border-color: var(--material-step-border);
  background: var(--material-surface);
}

/* Steps are a different kind of object from materials, so they carry a neutral
   palette against the material list's purple. Every hook below overrides a
   .material-card rule; the structure itself is shared. */
/* Tinted with the stage accent so the header stands off the tray behind it;
   the tray and the old slate were a few points of grey apart. */
.material-card--panel .material-card__header {
  background: var(--material-step-soft) !important;
  border-color: var(--material-step-border) !important;
}

.material-card--panel.is-open .material-card__header {
  border-bottom-color: var(--material-step-border) !important;
  background: var(--material-step-soft-strong) !important;
  box-shadow: inset .22rem 0 0 var(--material-step-accent);
}

.material-card--panel .material-card__order {
  border-color: var(--material-step-accent) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--material-step-accent) !important;
  font-weight: 750;
  letter-spacing: .02em;
}

.material-card--panel.is-open .material-card__order {
  border-color: var(--material-step-accent) !important;
}

/* Stage cards carry their accent bar collapsed as well as open, so the
   hierarchy stays legible with every card shut. */
.material-card--panel .material-card__header {
  box-shadow: inset .22rem 0 0 var(--material-step-accent);
}

.material-card--panel .material-card__chevron:hover,
.material-card--panel .material-card__chevron:focus-visible {
  background: var(--material-step-accent) !important;
}

/* The stage inline's add button, filled with the step accent so it pairs with
   the material inline's own add button rather than competing. White text: the
   accent tint alone left accent-on-purple, which was unreadable on the filled
   base button. */
.material-collection-add--panel {
  border-color: var(--material-step-accent) !important;
  color: #fff !important;
  background: var(--material-step-accent) !important;
}

.material-collection-add--panel:hover,
.material-collection-add--panel:focus-visible {
  background: var(--material-step-accent-strong) !important;
}

/* The add control takes the theme's secondary so it reads as the companion to
   the primary "Add material". Darkened with a filter rather than a second
   variable, since --secondary is a theme-supplied value we cannot shade here. */
.material-add-control--panel .material-button--add {
  background: var(--material-step-accent) !important;
}

.material-add-control--panel .material-button--add:hover,
.material-add-control--panel .material-button--add:focus-visible {
  background: var(--material-step-accent-strong) !important;
}

.material-add-control--panel .material-add-control__option:hover,
.material-add-control--panel .material-add-control__option:focus-visible {
  color: var(--material-step-accent);
  background: var(--material-step-soft);
}

.material-panel-card__title {
  display: block;
  overflow: hidden;
  color: var(--material-ink);
  font-size: .95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-panel-card__summary {
  display: block;
  overflow: hidden;
  color: var(--material-muted);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-panel-card__summary.is-placeholder {
  font-style: italic;
  opacity: .75;
}

.material-panel-card__count {
  display: block;
  color: var(--material-step-accent);
  font-size: .76rem;
  font-weight: 650;
}

/* "Specimen stage" and "Apply only to these specimens" both answer where the
   material was used, so they pair on one row above the details. */
.material-form-grid--scope {
  margin: .55rem 0;
}

/* The source toggle is the shared choice toggle (.choice-toggle, theme
   components/choice-toggle.sass, widget shared/widgets/choice_toggle.py); only
   its placement in the material form is styled here. */

.material-inline-group .material-card__body {
  padding: .6rem;
}

.material-inline-group .material-form-grid--overview {
  margin-bottom: .5rem;
}

.material-inline-group .material-source-panel,
.material-inline-group .material-detail-panel {
  margin-top: .5rem;
  padding: .6rem;
}

.material-inline-group .material-source-panel__heading,
.material-inline-group .material-detail-panel__heading {
  min-height: 0 !important;
  margin: 0 0 .5rem !important;
  padding: 0 0 .45rem !important;
  border: 0 !important;
  border-bottom: 1px solid #ece8f3 !important;
  background: transparent !important;
}

.material-inline-group .material-heading-with-help {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center;
  background: transparent !important;
}

.material-inline-group .material-form-grid--footer {
  margin-top: .65rem;
}

/* JSON-editor chrome, neutralised. The material card already supplies the frame,
   so the editor's own card/border/background would draw a box inside a box —
   this is the one thing the material surfaces need that the admin form-row does
   not. Deliberately unscoped: the inline and the modal both mount the editor
   into .material-field--details-json, and that class exists nowhere else.

   Everything else — the column grid, number+unit sizing, ratio sizing — now
   comes from the shared rules in static/sass/brainstem-theme/layout/edit-view.sass,
   which .material-field--details-json is named in alongside .form-row[class*="json"].
   Do not re-add local copies here; they drift. */
.material-field--details-json,
.material-field--details-json > div,
.material-field--details-json .card,
.material-field--details-json .card-body {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.material-field--details-json > div[id*="json_editor"] {
  overflow-x: visible !important;
}

.material-card .select2-results__option[aria-disabled="true"],
.material-card .select2-results__option[data-material-filtered="true"] {
  display: none !important;
}

.material-source-fields[hidden],
.material-detail-panel[hidden],
.material-targets[hidden] {
  display: none !important;
}

.material-source-fields {
  padding-top: .15rem;
}

/* Same two columns as every other row: the arrow floats in the existing gap
   instead of claiming a third track, which previously narrowed these columns
   and pushed the right-hand one out of line with the rows above. */
.material-source-fields--dependent {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.material-field.is-disabled {
  opacity: .62;
  cursor: not-allowed;
}

/* Disabling the native select is not enough on its own. Select2 hides it and
   puts its own container in front, and that container keeps its click handler,
   so a gated field looked disabled while its dropdown still opened. Blocking
   pointer events on the field is what actually closes it, whichever of the two
   the browser is showing. */
.material-field.is-disabled select,
.material-field.is-disabled .select2-container {
  pointer-events: none;
}

.material-dependency-arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  height: 2.65rem;
  place-items: center;
  color: var(--material-accent);
  font-size: 1.35rem;
  font-weight: 700;
  pointer-events: none;
}

/* The consumable scope, in the slot the refine button vacates: one is the offer,
   the other is the offer accepted, and only ever one of them applies. It takes
   that button's box exactly -- same height as the tier control it sits beside,
   same rounded square -- so the slot does not change shape when it swaps. */
.material-scope-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: .3rem;
  min-height: 2.55rem;
  padding: .2rem .3rem .2rem .7rem;
  border: 1px solid var(--material-accent);
  border-radius: .45rem;
  background: var(--material-accent-soft);
  color: var(--material-accent);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
}

.material-scope-chip__icon {
  flex: 0 0 auto;
  font-size: .8rem;
}

/* A product name can run long enough to push the chip past the tier control it
   sits beside, so it is clipped here rather than shortened in the markup: the
   full name stays in the DOM for the title and for assistive technology. */
.material-scope-chip__label {
  min-width: 0;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-scope-chip__clear {
  display: grid !important;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: .3rem !important;
  background: transparent !important;
  box-shadow: none;
  color: inherit !important;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.material-scope-chip__clear::before {
  display: none !important;
}

.material-scope-chip__clear:hover,
.material-scope-chip__clear:focus-visible {
  background: var(--material-accent) !important;
  color: #fff !important;
}

/* Why the scoped lot list is empty, in the funnel it is empty in. */
.material-scope__hint:empty {
  display: none;
}

.material-scope__hint {
  color: var(--material-muted);
  font-size: .78rem;
  line-height: 1.35;
}

/* Refining a consumable into a lot moves the row between two source tiers, so the
   action belongs with the tier control rather than under the funnel it acts on.
   It borrows the "Use template" treatment because it is the same kind of offer:
   optional, available only when it applies, and never the default path. */
/* Never wraps. A wrapping flex row breaks lines on each item's *content* width
   and only shrinks afterwards, within a line -- so the chip broke to a line of
   its own while still holding an ellipsis it never got to use. Denying the wrap
   is what actually hands the overflow to the chip's label. */
.material-source-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem .6rem;
}

/* The tier control is the row's fixed anchor; whatever sits beside it gives way. */
.material-source-row > .material-source-choice,
.material-source-row > .material-refine__button {
  flex: 0 0 auto;
}

.material-source-row > .material-scope-chip {
  min-width: 0;
  overflow: hidden;
}

/* !important throughout, exactly as .material-button--template needs it: the
   admin theme's own button rules otherwise strip the fill and the outline and
   leave this rendering as bare text. */
.material-refine__button {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  gap: .35rem;
  min-height: 2.55rem;
  padding: .2rem .7rem !important;
  border: 1px solid var(--material-step-accent) !important;
  border-radius: .45rem !important;
  background: var(--material-step-soft) !important;
  color: var(--material-step-accent) !important;
  box-shadow: none;
  font-size: .82rem !important;
  font-weight: 650 !important;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.material-refine__button::before {
  display: none !important;
}

.material-refine__button:hover,
.material-refine__button:focus-visible {
  background: #e6dff5 !important;
}

/* Both halves of the slot are toggled with the hidden attribute, which the
   display rules above would otherwise override. */
.material-refine__button[hidden],
.material-scope-chip[hidden],
.material-scope__hint[hidden] {
  display: none !important;
}

/* The scope's value lives in a select so the chip's label survives a redisplay
   without a second lookup, but it is never browsed -- the chip is the control.
   Hidden on the wrapper rather than the select: Jet turns every inline select
   into a select2, and that container would otherwise render on its own. */
.material-scope-field {
  display: none !important;
}

/* Narrow enough that the tier control alone fills the row, so the wording is
   what gives way and the icon carries the meaning. Clipped rather than removed:
   the button and the chip must keep announcing themselves, and the title
   attribute above answers on touch as well as hover. */
@media (max-width: 58rem) {
  .material-refine__text,
  .material-scope-chip__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .material-refine__button {
    padding: .2rem .55rem !important;
  }

  .material-scope-chip {
    gap: .25rem;
    padding: .2rem .25rem .2rem .5rem;
  }
}

/* Nested object properties (e.g. dilution's numerator/denominator) get their own
   card from the JSON editor, which indents them relative to sibling fields.
   Strip that so every label in the details grid shares one left edge. */
.material-field--details-json .card,
.material-field--details-json fieldset,
.material-field--details-json .je-object__container,
.material-field--details-json .well {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* Django wraps FK selects in .related-widget-wrapper once the add button is
   enabled, and the theme gives that wrapper its own flex layout and gaps. Left
   alone it shifts the inline's columns out of line with the modal's, which use
   a bare <select>. Neutralise its spacing and let the select fill the cell. */
.material-collection-inline .material-field .related-widget-wrapper {
  display: flex !important;
  /* The row must never wrap. The theme's own flex allows it, so a long option --
     or simply a narrow viewport -- dropped the add button onto a line of its
     own, where it read as a control belonging to the next field rather than to
     the select it opens. */
  flex-wrap: nowrap !important;
  align-items: center;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: .4rem !important;
}

.material-collection-inline .material-field .related-widget-wrapper > select,
.material-collection-inline .material-field .related-widget-wrapper > .select2 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.material-collection-inline .material-field .related-widget-wrapper > .related-widget-wrapper-link {
  flex: 0 0 auto !important;
}

/* The label already lives in .material-label-line above the control. */
.material-collection-inline .material-field .related-widget-wrapper > label {
  display: none !important;
}

/* No inner padding: the source and detail sections must start on the same left
   edge as Role and Notes now that their frames are gone. */
.material-source-panel,
.material-detail-panel,
.material-source-panel__heading,
.material-detail-panel__heading,
.material-source-fields {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.material-card .select2-container .select2-selection--single {
  width: 100% !important;
  min-width: 0;
  overflow: hidden;
}

.material-card .select2-container .select2-selection--single .select2-selection__rendered {
  display: block !important;
  overflow: hidden !important;
  padding-right: 2.5rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.material-card .select2-container .select2-selection--single .select2-selection__arrow {
  right: .5rem !important;
}

.material-delete-field,
.material-card .inline-deletelink {
  display: none !important;
}

.material-form-errors,
.material-card .errorlist,
.material-dialog__error {
  color: var(--material-danger);
}

.material-card .errorlist {
  margin: 0 0 .3rem !important;
  padding: 0 !important;
  list-style: none;
  font-size: .78rem;
}

.material-inline-group .add-row,
.material-stage-inline-group .add-row {
  display: none !important;
}

/* Parent-inline material manager dialog. */
.material-chip {
  display: inline-block;
  margin: .12rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  color: #514969;
  background: var(--material-accent-soft);
  font-size: .76rem;
}

.material-inline-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}

.material-inline-overview {
  display: flex;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem;
  border: 1px solid #d7cce8;
  border-left: .3rem solid var(--material-accent);
  border-radius: .55rem;
  background: #f7f3fb;
}

.form-row.field-material_management,
.field-material_management,
.field-material_management > div,
.field-material_management .flex-container {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.form-row.field-material_management {
  display: none !important;
  grid-column: 1 / -1;
  flex: 0 0 100% !important;
}

.material-inline-overview--toolbar {
  display: inline-flex;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.material-inline-overview--toolbar .material-inline-summary {
  display: none;
}

.material-inline-overview--disabled div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.material-inline-overview--disabled span {
  color: var(--material-muted);
  font-size: .82rem;
}

.material-inline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
}

.material-button--add,
.material-button--save {
  color: #fff !important;
  border: 1px solid transparent !important;
  background: #8122a1 !important;
  box-shadow: none;
  font-weight: 700 !important;
}

.material-button--add::before,
.material-button--save::before {
  display: none !important;
}

.material-button--add:hover,
.material-button--add:focus-visible,
.material-button--save:hover,
.material-button--save:focus-visible {
  background: #6d188b !important;
}

/* Secondary to "Add material", matching the inline header's pair. */
.material-button--template {
  display: inline-flex !important;
  gap: .4rem;
  align-items: center;
  color: var(--material-step-accent) !important;
  border: 1px solid var(--material-step-accent) !important;
  background: var(--material-step-soft) !important;
  box-shadow: none;
  font-weight: 650 !important;
}

/* Two classes plus !important, because the rule above is one class plus
   !important: the library is a material one, so applyModalView() takes this
   button off the steps view -- and a plain [hidden] loses to any author
   `display` declaration, which is what left it on show there. */
.material-button--template[hidden] {
  display: none !important;
}

.material-button--template::before {
  display: none !important;
}

.material-button--template:hover,
.material-button--template:focus-visible {
  background: #e6dff5 !important;
}

.material-button--template svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.material-manager-open,
.material-manager-disabled {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem !important;
  border-radius: .45rem !important;
}

.material-manager-open i,
.material-manager-disabled i {
  margin-right: .1rem;
}

.material-dialog[hidden] {
  display: none;
}

html.material-modal-open,
body.material-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.material-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  background: rgba(24, 22, 29, .58);
  backdrop-filter: blur(2px);
}

.material-dialog__panel {
  /* The panel cannot clip (Select2 menus escape it), so the header and footer
     draw their own corners. One variable keeps all three identical — when they
     drift, the backdrop shows through the difference. */
  --material-dialog-radius: .8rem;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(68rem, 96vw);
  max-height: min(70rem, 92vh);
  overflow: visible;
  border-radius: var(--material-dialog-radius);
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(16, 24, 40, .28);
}

.material-dialog__header,
.material-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.material-dialog__header {
  padding: 1.3rem 1.25rem 1.1rem;
  border-radius: var(--material-dialog-radius) var(--material-dialog-radius) 0 0;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(90.9deg, var(--gradient-color1, #8122a1) 54.69%, var(--gradient-color2, #51459d) 100%);
}

/* Block, not flex: the header is already a flex row from elsewhere, which put
   the switch beside the title and stranded the close button between them. As a
   block the title row and the switch each get their own line. */
.material-dialog .material-dialog__header {
  display: block !important;
}

.material-dialog__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Mirrors admin_column_filter's .column-selector-modal__switch so both modals
   present the same segmented control. */
.material-dialog__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: 1rem;
}

.material-dialog__switch button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .45rem .75rem !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: .5rem !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
  box-shadow: none;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.material-dialog__switch button:hover {
  background: rgba(255, 255, 255, .28) !important;
}

.material-dialog__switch button[aria-selected="true"] {
  color: #8122a1 !important;
  background: #fff !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}

.material-dialog__header h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .2rem !important;
  color: #fff !important;
  font-size: 1.55rem !important;
  line-height: 1.2;
}

/* The same icon the button that opens this modal carries, so the panel names
   itself the way the toolbar named it. Sized against the title rather than
   inherited, matching .active-projects-modal__title. */
.material-dialog__header h2 .fa {
  flex: 0 0 auto;
  font-size: 1.15rem;
  opacity: .92;
}

.material-dialog__header p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
}

.material-dialog__content {
  position: relative;
  overflow: auto;
  padding: .75rem 1rem 1rem;
  background: #f8f8fa;
}

.material-dialog__toolbar,
.material-dialog__footer {
  border-top: 1px solid var(--material-border);
}

.material-dialog__toolbar {
  /* Sticky against the content scrollport so the count and Add stay reachable
     in a long list. The negative top offset matches the scrollport's own
     padding, which is what the negative margins bleed through. */
  position: sticky;
  top: -.75rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: -.75rem -1rem .75rem;
  padding: .55rem 1rem;
  border-top: 0;
  border-bottom: 1px solid var(--material-border);
  background: #fff;
}

.material-dialog__rows {
  display: grid;
  gap: .75rem;
}

.material-requirement-status {
  min-width: 0;
  color: var(--material-ink);
}

.material-dialog__toolbar-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}

.material-requirement-status ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-requirement-status li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .52rem;
  border: 1px solid var(--material-border);
  border-radius: 999px;
  background: var(--material-surface);
  font-size: .8rem;
  line-height: 1.1;
  white-space: nowrap;
}

.material-requirement-status li.is-missing {
  border-color: #fedf89;
  color: var(--material-warning);
  background: var(--material-warning-soft);
}

.material-requirement-status li.is-fulfilled {
  border-color: #abefc6;
  color: var(--material-success);
  background: var(--material-success-soft);
}

.material-requirement-status li > strong {
  color: inherit;
  font-size: .76rem;
  font-weight: 650;
}

.material-dialog__footer {
  border-radius: 0 0 var(--material-dialog-radius) var(--material-dialog-radius);
  border-top: 1px solid var(--material-border);
  background: #fff;
}

.material-dialog__footer-status {
  min-width: 0;
  flex: 1 1 auto;
}

.material-dialog__footer .material-dialog__error {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-dialog__footer .material-dialog__error[hidden] {
  display: none;
}

.material-dialog__footer-actions {
  display: flex;
  gap: .6rem;
  margin-left: auto;
}

/* Field-level error state, so the footer message points at something. */
.material-field.is-invalid > .material-label-line label,
.material-field.is-invalid > label {
  color: var(--material-danger);
}

.material-field.is-invalid input,
.material-field.is-invalid textarea,
.material-field.is-invalid select,
.material-field.is-invalid .select2-selection {
  border-color: var(--material-danger) !important;
  box-shadow: 0 0 0 2px rgba(197, 48, 48, .14);
}

.material-card.has-error > .material-card__header {
  box-shadow: inset .18rem 0 0 var(--material-danger);
}

.material-dialog button {
  min-height: 2.4rem;
}

.material-dialog .material-dialog__close {
  display: inline-flex !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  height: 2.4rem !important;
  min-height: 2.4rem !important;
  flex: 0 0 2.4rem;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .2) !important;
  font-size: 1rem !important;
  cursor: pointer !important;
}

.material-dialog .material-dialog__close:hover,
.material-dialog .material-dialog__close:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .32) !important;
}

.material-button {
  min-height: 2.5rem !important;
  padding: .5rem .8rem;
  border-radius: .45rem;
  cursor: pointer;
}

.material-button--cancel {
  color: #674c9c;
  border: 1px solid #917ac2;
  background: #fff;
  font-weight: 700;
}

.material-button--cancel:hover,
.material-button--cancel:focus-visible {
  background: #f2edf9;
}

.material-dialog .material-field > .select2-container {
  width: 100% !important;
  max-width: 100%;
}

.material-dialog__empty {
  padding: 3rem 1rem;
  border: 1px dashed var(--material-border-strong);
  border-radius: .65rem;
  color: var(--material-muted);
  background: #fff;
  text-align: center;
}

@media (max-width: 58rem) {
  .material-collection-inline {
    max-width: 100% !important;
  }

  .material-readonly__row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .material-readonly__row--heading {
    display: none;
  }

  .material-form-grid--overview,
  .material-form-grid {
    grid-template-columns: 1fr;
  }

  .material-source-fields--dependent {
    grid-template-columns: 1fr;
  }

  /* Single column here, so the arrow returns to normal flow between the two
     stacked fields rather than floating in a gap that no longer exists. */
  .material-dependency-arrow {
    position: static;
    left: auto;
    bottom: auto;
    height: 1.5rem;
    transform: rotate(90deg);
  }

  .material-field--wide {
    grid-column: auto;
  }

  .material-source-panel__heading {
    display: grid;
  }

  .material-source-choice > ul,
  .material-source-choice > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The tiers stretch to equal columns here, and the theme makes each label a
     flex box (`label:has(input[type="radio"])` with `place-content: center
     flex-start`), so the text needs centring on the main axis rather than
     text-align alone. Matching :has() here to clear that rule's specificity. */
  .material-source-choice label:has(input[type="radio"]) {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 42rem) {
  /* Near-full-screen rather than edge-to-edge: the inset keeps the panel
     reading as a dialog over the form instead of a new page, and keeps its
     controls clear of the browser's own edge gestures. */
  .material-dialog {
    padding: .75rem;
  }

  .material-dialog__panel {
    width: 100%;
    /* Flex items floor at min-content, which the card rows push past the
       viewport; without this the panel grows back out under the padding. */
    min-width: 0;
    max-height: 100%;
    height: auto;
    --material-dialog-radius: .6rem;
  }

  /* The title has done its work by the time you are editing; on a phone it was
     spending a sixth of the viewport on chrome instead of the list. */
  .material-dialog__header {
    padding: .8rem 1rem;
  }

  .material-dialog__header h2 {
    font-size: 1.2rem !important;
  }

  .material-dialog__header p {
    display: none;
  }

  /* Same selector pair as the base rule above. A media query adds no
     specificity, so a lone .material-card__header loses to
     .material-inline-group .material-card__header and the card keeps its
     three-column desktop template: the summary is squeezed into the 2rem
     order column and clipped away, and the actions land in the wide middle
     column. */
  .material-card__header,
  .material-inline-group .material-card__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* !important because the theme's bare `button` rule carries
     `display: flex !important`, which a plain display:none loses to. The
     modal's own move buttons drop out with the inline's, so both surfaces
     shed the same controls at the same width. */
  .material-card__order,
  .material-card__actions [data-material-move-up],
  .material-card__actions [data-material-move-down],
  .material-card__actions [data-modal-action="up"],
  .material-card__actions [data-modal-action="down"] {
    display: none !important;
  }

  /* One column, so the role label stops taking a fixed column out of the
     identity's width and truncating it to a few characters. The role and its
     pills share a line here rather than stacking, which would cost a fourth
     row on the narrowest cards. */
  .material-card__summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two lines rather than one ellipsis: what distinguishes two similar probes
     is the supplier at the end of the string, which is exactly what a
     single-line clamp cuts. */
  .material-card__identity {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
  }

  .material-card__meta {
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
  }

  .material-card__identity-line {
    grid-column: 1;
    grid-row: 2;
  }

  .material-card__detail {
    grid-column: 1;
    grid-row: 3;
  }

  .material-card__actions {
    gap: .05rem;
  }

  /* The three source tiers stay a row at every width — stacked, the segmented
     control stops reading as one control and eats a third of a phone screen.
     The labels shrink instead. */
  .material-source-choice label {
    padding: .42rem .35rem !important;
    font-size: .78rem;
    text-align: center;
  }
}

/* Stages and their materials read as one list: each stage is a section whose
   materials are nested beneath it, indented against the stage accent so the
   grouping is visible even with every card collapsed. */
.material-stage-section {
  display: grid;
  gap: .5rem;
  margin: 0 0 .5rem;
  padding: .65rem;
  border-radius: .75rem;
  background: var(--material-step-tray);
}

.material-stage-section__materials {
  display: grid;
  gap: .5rem;
  margin-left: 1.1rem;
  padding-left: .75rem;
  border-left: 3px solid var(--material-step-accent);
}

.material-stage-section__materials > .material-card {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 1px solid var(--material-border) !important;
  border-radius: .65rem !important;
  background: var(--material-surface) !important;
}

.material-stage-section__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding: .55rem .5rem .55rem .8rem;
  border: 1px dashed var(--material-step-border);
  border-radius: .55rem;
  color: var(--material-muted);
  font-size: .85rem;
  background: var(--material-surface);
}

.material-stage-section__empty > span {
  font-style: italic;
}

.material-stage-section__actions {
  display: flex;
  justify-content: flex-end;
}


/* Secondary to the toolbar's primary add: outlined in the stage accent, so a
   page with several stages does not read as a row of identical purple blocks. */
.material-button--nested {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 2.1rem !important;
  padding: .3rem .7rem !important;
  border: 1px solid var(--material-step-accent) !important;
  border-radius: .45rem !important;
  color: var(--material-step-accent) !important;
  background: var(--material-step-soft-strong) !important;
  font-size: .8rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.material-button--nested:hover,
.material-button--nested:focus-visible {
  color: #fff !important;
  background: var(--material-step-accent) !important;
}

.material-button--nested[hidden] {
  display: none !important;
}

.material-stage-section--unassigned {
  padding: .65rem;
  border: 1px solid var(--material-step-border);
  background: transparent;
}

/* No stages on the page: the list is just the list, no tray around it. */
.material-stage-section--unassigned.is-plain {
  padding: 0;
  border: 0;
}

.material-stage-section--unassigned .material-stage-section__materials {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.material-stage-section__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .2rem .25rem;
  color: var(--material-ink);
}

.material-stage-section__heading span {
  color: var(--material-muted);
  font-size: .82rem;
}

.material-dialog__empty--stages {
  padding: 1.5rem 1rem;
}

/* Informational, not an error: a reconciled draft explains what it kept. */
.material-dialog__notice {
  margin: 0;
  padding: .35rem .6rem;
  border-radius: .45rem;
  color: var(--material-ink);
  font-size: .85rem;
  background: var(--material-step-soft);
}

/* A draft parked under a previous procedure type, until it is reopened. */
.material-manager-open.is-stale {
  border-style: dashed !important;
  opacity: .85;
}

/* Read-only table: a stage row heads the materials that belong to it. */
.material-readonly__row--stage {
  background: var(--material-step-soft);
  border-radius: .5rem;
}

.material-readonly__row--in-stage {
  margin-left: 1rem;
  border-left: 3px solid var(--material-step-border);
}

.material-readonly__stage-order {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 .3rem;
  border: 1px solid var(--material-step-border);
  border-radius: 999px;
  color: var(--material-step-accent);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}

/* Change form: the stage inline nested inside the materials group. The nested
   group gave up the shared group classes (so every closest() from a material
   row still reaches the materials group), so it restates the resets here. Its
   own heading is hidden by the script and its row list -- where Django drops a
   new stage before the script moves it into a section -- stays out of view. */
.material-stage-inline-group--merged {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.material-stage-inline-group--merged > .material-inline-tab-surface {
  padding: 0;
  background: transparent;
}

.material-stage-inline-group--merged > .material-inline-tab-surface > fieldset.module {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.material-stage-inline-group--merged > .material-inline-tab-surface > fieldset.module > .material-card-list {
  display: none;
}

.material-combined {
  display: grid;
  gap: .75rem;
  margin: 0 0 .75rem;
}

.material-combined .material-stage-section > .material-card {
  margin: 0 !important;
}

.material-stage-section.is-deleted > .material-card {
  opacity: .55;
}

.material-inline-group--merged .material-combined__unassigned-heading {
  margin: .25rem 0 .35rem;
}

.material-inline-group--merged .material-combined__unassigned-heading[hidden] {
  display: none !important;
}

/* The material add control is a menu too, so the type is chosen before the
   row exists. Group labels separate the families the type select groups by. */
/* Group headers read like the type select's own optgroup bands: a tinted
   strip across the menu's full width, first one flush with the top. */
.material-add-control__group {
  margin: 0;
  padding: .4rem .95rem;
  color: var(--material-ink);
  background: var(--material-accent-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.material-add-control__group:not(:first-child) {
  border-top: 1px solid var(--material-border);
}

.material-add-control__menu {
  max-height: min(24rem, 70vh);
}

.material-stage-section__actions[hidden] {
  display: none !important;
}

/* Multi-select (checkbox list) fields inside a material or stage detail editor.
   The theme restores native checkboxes only under .field-type_json and
   .field-coordinates_json; a details_json editor inside an inline row falls
   under the generic .inline-related rule instead, which positions every
   checkbox absolutely and leaves the labels standing alone. Same reset as the
   theme's own, scoped to the three material surfaces. */
.material-inline-group .form-check,
.material-dialog .form-check,
.material-standalone-form .form-check {
  display: flex !important;
  align-items: center !important;
  gap: .35rem;
  margin: 0 1rem .25rem 0;
  padding-left: 0 !important;
}

.material-inline-group .form-check input[type="checkbox"],
.material-dialog .form-check input[type="checkbox"],
.material-standalone-form .form-check input[type="checkbox"] {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  float: none !important;
  accent-color: var(--material-accent) !important;
}

.material-inline-group .form-check label,
.material-dialog .form-check label,
.material-standalone-form .form-check label {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  font-weight: 500 !important;
}

.material-inline-group .form-check label::before,
.material-dialog .form-check label::before,
.material-standalone-form .form-check label::before {
  content: none !important;
  display: none !important;
}

.material-readonly__stage-order {
  border-color: var(--material-step-accent);
  color: #fff;
  background: var(--material-step-accent);
}

/* "Stage:" as a quiet prefix on the stage title, so a stage card names what
   it is the way a material card's eyebrow names its type. */
.material-panel-card__kind {
  color: var(--material-muted);
  font-weight: 500;
}

.material-action-button:disabled,
.material-action-button[disabled] {
  opacity: .35 !important;
  cursor: default !important;
  pointer-events: none;
}

.material-add-control--panel .material-add-control__group {
  background: var(--material-step-soft);
}

/* Interface rows copied from the creating procedure: read-only, linked back. */
.material-card__copied-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--material-soft);
  color: var(--material-muted);
  border: 1px solid var(--material-border);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.material-card__copied-note {
  margin: 0;
  color: var(--material-muted);
}