/* Settings page: level navigation on the left, one topic per page on the right.
   Every color comes from tokens.css. */
#app.settings-mode .table-toolbar,
#app.settings-mode #grid-footer {
  display: none;
}

#app.settings-mode .content-heading .eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-3);
}

#app.settings-mode .content-heading .eyebrow .crumb-sep {
  color: var(--scs-ink-disabled);
}

.settings-page {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100%;
  background: var(--scs-bg);
}

.settings-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 10px 20px;
  border-right: 1px solid var(--scs-line);
  background: var(--scs-surface);
  min-height: 100%;
}

.settings-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--scs-control-h);
  padding: 0 8px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface-2);
  color: var(--scs-ink-3);
}

.settings-search:focus-within {
  border-color: var(--scs-focus);
  box-shadow: 0 0 0 2px var(--scs-accent-soft);
}

html:root .settings-search input {
  flex: 1;
  height: auto;
  border: 0;
  box-shadow: none;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--scs-ink);
  font: inherit;
  font-size: var(--scs-text-m);
  padding: 0;
}

.settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-nav-group h3 {
  margin: 0 0 4px;
  padding: 0 8px;
  font-size: var(--scs-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scs-ink-3);
}

.settings-nav-project {
  display: block;
  margin-top: 2px;
  font-size: var(--scs-text-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scs-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root .settings-nav button {
  justify-content: flex-start;
  width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--scs-radius-s) var(--scs-radius-s) 0;
  background: transparent;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-m);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}

html:root .settings-nav button:hover {
  background: var(--scs-surface-3);
  color: var(--scs-ink);
}

html:root .settings-nav button.active {
  border-left-color: var(--scs-accent);
  background: var(--scs-accent-soft);
  color: var(--scs-ink);
  font-weight: 600;
}

html:root .settings-nav button.is-danger {
  color: var(--scs-danger);
}

.settings-page.is-searching .settings-nav button:not(.is-match) {
  color: var(--scs-ink-disabled);
}

html:root .settings-page.is-searching .settings-nav button.active:not(.is-match) {
  border-left-color: transparent;
  background: transparent;
  font-weight: 400;
}

.settings-main {
  position: relative;
  min-width: 0;
  max-width: 920px;
  padding: 14px 28px 40px;
}

/* 6.12: the "Gespeichert" note floats over the top right corner instead of holding an empty
   row above the first group, so every page starts level with the search field on the left. */
.settings-main-head {
  position: absolute;
  top: 0;
  right: 28px;
  display: flex;
  justify-content: flex-end;
  height: 14px;
  align-items: center;
  pointer-events: none;
}

.settings-saved {
  font-size: var(--scs-text-s);
  font-weight: 600;
  color: var(--scs-ok);
  opacity: 0;
  transition: opacity 0.2s;
}

.settings-saved.is-visible {
  opacity: 1;
}

/* Only visible pages keep a gap: hidden pages before the open one used to push it down by 22 px. */
.settings-section-page:not([hidden]) ~ .settings-section-page:not([hidden]) {
  margin-top: 22px;
}

/* The page title sits in the content heading; section titles only appear in search results. */
.settings-section-page > h2 {
  display: none;
  margin: 0 0 8px;
  font-size: var(--scs-text-l);
  color: var(--scs-ink);
}

.settings-page.is-searching .settings-section-page > h2 {
  display: block;
}

.settings-panel {
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 260px) 130px;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--scs-line-2);
}

/* 5.4: without a differing scope the scope column is left out and the control gets the room. */
.settings-row:has(> .settings-scope-tag:empty),
.settings-row:not(:has(> .settings-scope-tag)) {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
}

.settings-row > .settings-scope-tag:empty {
  display: none;
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row[hidden] {
  display: none;
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  color: var(--scs-ink);
}

.settings-label b {
  font-size: var(--scs-text-m);
  font-weight: 600;
}

.settings-label span {
  font-size: var(--scs-text-s);
  line-height: 1.45;
  color: var(--scs-ink-3);
}

.settings-label .settings-error {
  color: var(--scs-danger);
  font-weight: 600;
}

.settings-control {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.settings-control select,
.settings-control input[type='text'] {
  width: 100%;
}

.settings-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.settings-scope-tag {
  justify-self: end;
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-3);
  text-align: right;
}

/* On/off switch built from a native checkbox, so forms and tests still see a checkbox. */
input.settings-switch {
  appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--scs-line-strong);
  border-radius: 10px;
  background: var(--scs-surface-3);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

input.settings-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--scs-surface);
  box-shadow: var(--scs-shadow-1);
  transition: transform 0.15s;
}

input.settings-switch:checked {
  border-color: var(--scs-accent);
  background: var(--scs-accent);
}

input.settings-switch:checked::after {
  transform: translateX(14px);
  background: var(--scs-accent-ink);
}

input.settings-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input.settings-switch:focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 2px;
}

.settings-panel.settings-danger {
  border-color: var(--scs-danger-line);
}

/* 5.4: titled groups on pages with several topics. */
.settings-group + .settings-group {
  margin-top: 20px;
}

.settings-group[hidden] {
  display: none;
}

.settings-group-title {
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: var(--scs-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scs-ink-3);
}

.settings-nav-topic {
  display: block;
  margin: 8px 0 2px;
  padding: 0 10px;
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-3);
}

.settings-nav-group h3 + .settings-nav-topic {
  margin-top: 0;
}

.settings-panel + .settings-panel {
  margin-top: 12px;
}

.settings-count {
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-s);
  font-weight: 400;
  color: var(--scs-ink-3);
}

.settings-row.is-danger .settings-label b {
  color: var(--scs-danger);
}

.settings-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 8px;
  font-size: var(--scs-text-m);
  color: var(--scs-ink-2);
}

.settings-section-page > .settings-empty {
  padding: 4px 0;
}

.settings-empty,
.settings-intro {
  margin: 0;
  padding: 14px 16px;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-3);
}

.settings-intro {
  border-bottom: 1px solid var(--scs-line-2);
}

.settings-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-bottom: 1px solid var(--scs-line-2);
}

.settings-status > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--scs-text-l);
}

.settings-status p {
  margin: 0;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}

/* Project assistance keeps its own markup; inside the panel it loses the extra frame. */
.settings-panel > .integration-hub {
  margin: 0;
  border: 0;
  padding: 14px 16px;
}

.settings-panel > .integration-hub > legend {
  display: none;
}

@media (max-width: 900px) {
  .settings-page {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--scs-line);
  }

  .settings-main {
    padding: 6px 12px 32px;
  }

  .settings-row,
  .settings-row:has(> .settings-scope-tag:empty),
  .settings-row:not(:has(> .settings-scope-tag)) {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-scope-tag {
    justify-self: start;
  }
}

/* 5.3: automatische Gesamtsicherung nach Zeitplan (Pro). */
.backup-schedule {
  border-top: 1px solid var(--scs-line-2);
}
.backup-schedule-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px 16px 0;
  font-size: var(--scs-text-m, 14px);
}
.backup-schedule-pro {
  margin: 8px 16px 0;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}
.backup-schedule-status dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: var(--scs-text-s);
}
.backup-schedule-status dt {
  color: var(--scs-ink-3);
}
.backup-schedule-status dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--scs-ink-2);
}
.backup-schedule-pair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.backup-schedule-pair input[type='number'] {
  width: 6em;
}
.settings-control input[type='number'] {
  width: 6em;
}
.backup-schedule-cron {
  font-family: var(--scs-font-mono, ui-monospace, monospace);
}
.backup-schedule-preview {
  margin: 0;
  padding: 8px 16px;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}
.backup-schedule-preview:empty {
  display: none;
}
.backup-schedule-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
}
[hidden].settings-row,
#schedule-interval-row[hidden],
#schedule-cron-row[hidden] {
  display: none;
}
.backup-schedule-actions {
  align-items: center;
  flex-wrap: wrap;
}

/* 5.4: a table's column list gets the full row width, so it reads in up to three columns
   instead of one long narrow list next to the description. */
html:root .settings-row.table-columns-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* 6.5: IF-ID prefix and suffix around a sample number, renumbering dialog (web/interface_renumber.js). */
.settings-tag-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.settings-control .settings-tag-pair input[type='text'] {
  width: 92px;
  min-width: 0;
}
.settings-tag-pair > span {
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-s);
  color: var(--scs-ink-3);
}
#settings-interface-id-example {
  font-family: var(--scs-font-mono);
}
.renumber-options {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 14px 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  min-width: 0;
}
.renumber-options legend {
  padding: 0 5px;
  font-weight: 600;
}
.renumber-options label,
label.renumber-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.renumber-options input,
label.renumber-line input {
  flex-shrink: 0;
  margin-top: 3px;
}
.renumber-families {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.renumber-family span {
  font-family: var(--scs-font-mono);
  font-weight: 600;
}
.renumber-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
div.renumber-line input {
  width: 96px;
}
.renumber-preview {
  margin-top: 12px;
  border-top: 1px solid var(--scs-line);
  padding-top: 10px;
}
.renumber-table-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
}
.renumber-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-s);
}
.renumber-table th {
  position: sticky;
  top: 0;
  background: var(--scs-surface);
  text-align: left;
  font-family: var(--scs-font);
  font-weight: 600;
  color: var(--scs-ink-2);
}
.renumber-table th,
.renumber-table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--scs-line);
}
.renumber-table td[aria-hidden] {
  color: var(--scs-ink-3);
  width: 1.5em;
}
.renumber-table tr:nth-child(even) td {
  background: var(--scs-row-alt);
}
.renumber-empty,
.renumber-more {
  color: var(--scs-ink-3);
}
.renumber-table tr.is-moved td:last-child {
  color: var(--scs-warn);
}
/* 6.6: own IF families */
.if-family-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.if-family-row {
  display: grid;
  grid-template-columns: 90px minmax(120px, 1fr) minmax(140px, auto) auto auto;
  align-items: center;
  gap: 8px;
}
.if-family-prefix {
  font-family: var(--scs-font-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.if-family-use {
  color: var(--scs-ink-2);
  font-size: 0.9em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .if-family-row {
    grid-template-columns: 80px 1fr auto;
  }
  .if-family-kind {
    grid-column: 1 / 3;
  }
}

/* 6.12 Prüfregeln: one row per check with its weight as a choice of Aus, Hinweis or Warnung,
   checks grouped by topic, and a bar that shows the current mix of warnings and hints.
   Warnung uses the warning colour, Hinweis the accent like the Prüfzentrum counters. */
#dialog.quality-rules-dialog {
  width: min(1080px, calc(100vw - 32px));
}

#dialog.quality-rules-dialog #dialog-body {
  display: grid;
  gap: 18px;
}

.quality-rules-dialog .qr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.quality-rules-dialog .qr-scope-note {
  margin: 0;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

.quality-rules-dialog .qr-run {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 16px;
  padding: 14px 16px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-l);
  background: var(--scs-surface-2);
}

.quality-rules-dialog .qr-run .field {
  margin: 0;
}

.quality-rules-dialog .qr-run .qr-interval[hidden] {
  display: none;
}

.quality-rules-dialog .qr-run-note {
  grid-column: 1 / -1;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

.quality-rules-dialog :is(.qr-weights, .qr-domains) h3 {
  margin: 0 0 4px;
  font-size: var(--scs-text-l);
  color: var(--scs-ink);
}

.quality-rules-dialog :is(.qr-weights, .qr-domains) > p,
.quality-rules-dialog .qr-weights-head p {
  margin: 0;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  line-height: 1.5;
}

.quality-rules-dialog .qr-weights-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
}

.quality-rules-dialog .qr-weights-head > div {
  max-width: 62ch;
}

.quality-rules-dialog #qr-filter {
  width: 240px;
  max-width: 100%;
}

/* The mix: one bar, three parts, sized by the number of checks at each weight. */
.quality-rules-dialog .qr-mix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 14px 0 6px;
}

.quality-rules-dialog .qr-mix-bar {
  display: flex;
  flex: 1 1 320px;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--scs-surface-3);
}

.quality-rules-dialog .qr-mix-bar > span {
  flex: 0 1 0;
  min-width: 0;
  transition: flex-grow 0.25s ease;
}

.quality-rules-dialog [data-mix='warning'] {
  background: var(--scs-warn);
}

.quality-rules-dialog [data-mix='info'] {
  background: var(--scs-accent);
}

.quality-rules-dialog [data-mix='off'] {
  background: var(--scs-line-strong);
}

.quality-rules-dialog .qr-mix-legend {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}

.quality-rules-dialog .qr-mix-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.quality-rules-dialog .qr-mix-legend li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--scs-line-strong);
}

.quality-rules-dialog .qr-mix-legend [data-mix-count='warning']::before {
  background: var(--scs-warn);
}

.quality-rules-dialog .qr-mix-legend [data-mix-count='info']::before {
  background: var(--scs-accent);
}

.quality-rules-dialog .qr-mix-legend b {
  color: var(--scs-ink);
  font-variant-numeric: tabular-nums;
}

.quality-rules-dialog .qr-group {
  margin-top: 16px;
}

.quality-rules-dialog .qr-group[hidden],
.quality-rules-dialog .qr-rule[hidden] {
  display: none;
}

.quality-rules-dialog .qr-group h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--scs-text-m);
  font-weight: 600;
  color: var(--scs-ink);
}

.quality-rules-dialog .qr-group h4 small {
  color: var(--scs-ink-3);
  font-weight: 400;
}

.quality-rules-dialog .qr-group-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-l);
  background: var(--scs-surface);
  overflow: hidden;
}

.quality-rules-dialog .qr-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--scs-line-2);
  border-left: 3px solid transparent;
}

.quality-rules-dialog .qr-rule:has(input[value='warning']:checked) {
  border-left-color: var(--scs-warn);
}

.quality-rules-dialog .qr-rule:has(input[value='info']:checked) {
  border-left-color: var(--scs-accent);
}

.quality-rules-dialog .qr-rule:hover {
  background: var(--scs-surface-2);
}

.quality-rules-dialog .qr-rule-name {
  flex: 1 1 170px;
  min-width: 170px;
  font-size: var(--scs-text-m);
  color: var(--scs-ink);
  line-height: 1.35;
}

.quality-rules-dialog .qr-rule:has(input[value='off']:checked) .qr-rule-name {
  color: var(--scs-ink-3);
}

/* The weight as a compact choice; the radio stays in the form, the label is the button. */
.quality-rules-dialog .qr-levels {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface-2);
}

.quality-rules-dialog .qr-level {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 9px;
  border-radius: var(--scs-radius-s);
  font-size: var(--scs-text-s);
  font-weight: 500;
  color: var(--scs-ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.quality-rules-dialog .qr-level input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.quality-rules-dialog .qr-level:hover {
  color: var(--scs-ink);
}

.quality-rules-dialog .qr-level:has(input:focus-visible) {
  outline: 2px solid var(--scs-focus);
  outline-offset: 1px;
}

.quality-rules-dialog .qr-level:has(input:checked) {
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--scs-line);
  background: var(--scs-surface);
  color: var(--scs-ink);
}

.quality-rules-dialog .qr-level[data-level='warning']:has(input:checked) {
  box-shadow: 0 0 0 1px var(--scs-warn-line);
  background: var(--scs-warn-soft);
  color: var(--scs-warn);
}

.quality-rules-dialog .qr-level[data-level='info']:has(input:checked) {
  box-shadow: 0 0 0 1px var(--scs-accent-line);
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
}

.quality-rules-dialog .qr-level[data-level='off']:has(input:checked) {
  background: var(--scs-surface-3);
  color: var(--scs-ink-3);
}

/* "Vorgabe" names the inherited weight in small type beside it. */
.quality-rules-dialog .qr-level small {
  font-size: var(--scs-text-xs);
  font-weight: 500;
  color: var(--scs-ink-3);
}

.quality-rules-dialog .qr-level small::before {
  content: '(';
}

.quality-rules-dialog .qr-level small::after {
  content: ')';
}

.quality-rules-dialog .qr-level:has(input:checked) small[data-inherited='warning'] {
  color: var(--scs-warn);
}

.quality-rules-dialog .qr-level:has(input:checked) small[data-inherited='info'] {
  color: var(--scs-accent);
}

.quality-rules-dialog .qr-rule:has([data-level='inherit'] input:checked):has(small[data-inherited='warning']) {
  border-left-color: var(--scs-warn-line);
}

.quality-rules-dialog .qr-rule:has([data-level='inherit'] input:checked):has(small[data-inherited='info']) {
  border-left-color: var(--scs-accent-line);
}

.quality-rules-dialog .qr-none {
  margin: 12px 0 0;
}

.quality-rules-dialog .qr-domains {
  padding-top: 16px;
  border-top: 1px solid var(--scs-line);
}

.quality-rules-dialog .qr-inherit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.quality-rules-dialog #domain-check-rows {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}

@media (max-width: 640px) {
  .quality-rules-dialog .qr-group-rules {
    grid-template-columns: 1fr;
  }

  .quality-rules-dialog .qr-rule {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quality-rules-dialog .qr-mix-bar > span {
    transition: none;
  }
}

/* Equal "Vorgabe" width, so the choices of all rows line up in their column. */
.quality-rules-dialog .qr-level[data-level='inherit'] {
  min-width: 128px;
  justify-content: center;
}