/* Scoped to office reports and the field list; also matches deployed markup. */
:is(.office-dash, [data-table="offices"] .det > td > div:has(> .g), [data-table="by-office"] .det > td > div:has(> .g)) {
  container: office-report / inline-size;
  min-width: 0;
  max-width: 100%;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .g {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .g > .c {
  min-width: 0;
  max-width: 100%;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb > .contents {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) minmax(0, auto);
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb .n {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb .tr {
  min-width: 0;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface2);
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb .tr i {
  height: 5px;
  max-width: 100%;
  border-radius: inherit;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb .v {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .hb .v small {
  display: block;
  margin-left: 0;
  margin-top: 2px;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .g > .c > .tscroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

:is(.office-dash, [data-table="offices"], [data-table="by-office"]) .g > .c > .tscroll > .tb {
  min-width: 370px;
}

@container office-report (max-width: 1050px) {
  .g > .c4 {
    grid-column: span 6;
  }
  .g > .c4:last-child {
    grid-column: span 12;
  }
}

@container office-report (max-width: 600px) {
  .g > :is(.c3, .c4, .c6) {
    grid-column: span 12;
  }
}

/* The deployed field editor has no component class yet; its labelled scope
   filter identifies only the left card, without selecting the editor. */
:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) {
  min-width: 0;
  max-width: 100%;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) .seg {
  max-width: 100%;
  flex-wrap: wrap;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) :is(ul, li, li > button, li > button > span) {
  min-width: 0;
  max-width: 100%;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) li > button {
  overflow: hidden;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) li > button > span {
  width: 100%;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) li > button .grow {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(.attr-defs-list, .c4:has([aria-label="Область применения"])) li > button > .fl {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}