/* Settings shell — SettingsLayout (sub-nav, content column, back link), the /settings
   landing list, SettingsPageHeader, SettingsPanel, SettingRow
   (docs/superpowers/specs/2026-09-25-settings-redesign-design.md, "Visual system").

   A plain global stylesheet on purpose, NOT .razor.css: Blazor's scope attribute is
   stamped only on markup a .razor file emits itself — never on a child component's root
   or on RenderTreeBuilder output — so scoped rules silently fail to paint on exactly the
   composed markup these components exist for (docs/lessons/blazor-and-bunit.md,
   css-isolation). Every class here is qb-settings-* to stay out of MudBlazor's way.

   Colors come from the MudTheme via --mud-palette-* (Theme/QuoteBeltTheme.cs); the hex
   after each is the theme's own value, as a fallback only. The two tints with no palette
   entry (dependent-row wash, danger border) are fixed. The 6px corners are settings-only. */

/* ---- Shell: sub-nav + content column (SettingsLayout) ----
   The breakpoint is MudBlazor's md (960px): the SAME one the /settings landing page asks
   IBrowserViewportService for, so "the sub-nav is hidden" and "the landing is a list" flip
   together. Change one, change both. */
.qb-settings-shell {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.qb-settings-subnav {
  flex: 0 0 248px;
  width: 248px;
  min-width: 0;
}

.qb-settings-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 840px;
}

.qb-settings-search {
  margin-bottom: 16px;
}

.qb-settings-search__input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--mud-palette-text-primary, #10151D);
  background: var(--mud-palette-surface, #FFFFFF);
  border: 1px solid var(--mud-palette-lines-inputs, #BDBDBD);
  border-radius: 6px;
}

.qb-settings-search__input:focus {
  outline: 2px solid var(--mud-palette-primary, #2563EB);
  outline-offset: -1px;
  border-color: transparent;
}

.qb-settings-subnav__empty {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-subnav__group {
  margin-bottom: 16px;
}

.qb-settings-subnav__group-title {
  padding: 0 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-subnav__list,
.qb-settings-landing__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qb-settings-subnav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mud-palette-text-primary, #10151D);
  text-decoration: none;
}

.qb-settings-subnav__item:hover {
  background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.qb-settings-subnav__item:focus-visible {
  outline: 2px solid var(--mud-palette-primary, #2563EB);
  outline-offset: -2px;
}

.qb-settings-subnav__item--active {
  font-weight: 600;
  color: var(--mud-palette-primary, #2563EB);
  background: var(--mud-palette-primary-hover, rgba(37, 99, 235, 0.08));
}

.qb-settings-subnav__icon {
  flex-shrink: 0;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-subnav__item--active .qb-settings-subnav__icon {
  color: inherit;
}

.qb-settings-subnav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only below md, in place of the sub-nav. */
.qb-settings-back {
  display: none;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mud-palette-primary, #2563EB);
  text-decoration: none;
}

/* ---- /settings landing list (board A7) — only below md; at md and up the page redirects ---- */
.qb-settings-landing__title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-landing__empty {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-landing__group {
  margin-bottom: 20px;
}

.qb-settings-landing__group-title {
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-landing__list {
  background: var(--mud-palette-surface, #FFFFFF);
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
  overflow: clip;
}

.qb-settings-landing__list > li + li {
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-landing__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--mud-palette-text-primary, #10151D);
  text-decoration: none;
}

.qb-settings-landing__item:active {
  background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.qb-settings-landing__icon {
  flex-shrink: 0;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-landing__label {
  flex: 1 1 auto;
  min-width: 0;
}

.qb-settings-landing__chevron {
  flex-shrink: 0;
  color: var(--mud-palette-text-secondary, #4B5665);
}

@media (min-width: 960px) {
  .qb-settings-landing {
    display: none;
  }
}

@media (max-width: 959.98px) {
  .qb-settings-subnav {
    display: none;
  }

  .qb-settings-back {
    display: inline-flex;
  }

  .qb-settings-content {
    max-width: none;
  }
}

/* ---- Page header ---- */
.qb-settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.qb-settings-page-header__text {
  min-width: 0;
}

.qb-settings-page-header__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-page-header__description {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-page-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* ---- Panel ---- */
.qb-settings-panel {
  background: var(--mud-palette-surface, #FFFFFF);
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: clip;
}

.qb-settings-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}

.qb-settings-panel__heading {
  min-width: 0;
}

.qb-settings-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-panel__description {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-panel__header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* A headerless panel's first row would otherwise draw its divider against the panel border. */
.qb-settings-panel__body:first-child > .qb-settings-row:first-child {
  border-top: 0;
}

.qb-settings-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-panel--danger {
  border-color: #EBC4C4;
}

.qb-settings-panel--danger .qb-settings-panel__title {
  color: var(--mud-palette-error, #B91C1C);
}

/* ---- Row ---- */
.qb-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-row__text {
  min-width: 0;
}

.qb-settings-row__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-row__help {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-row__control {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* Shown only while its parent setting is on (the caller hides it otherwise). */
.qb-settings-row--dependent {
  padding-left: 48px;
  background: #FBFBFC;
}

.qb-settings-row--dependent .qb-settings-row__text {
  padding-left: 12px;
  border-left: 2px solid var(--mud-palette-divider, #E2E6EB);
}

/* A settings section may note one extra sentence under a row's help (DemoDataSection's
   quota line). */
.qb-settings-row__note {
  display: block;
  margin-top: 4px;
}

/* A panel with an id is an in-page anchor target (Plan & billing's "#plans"). Without the
   margin, scrolling to it lands the heading under the 56px app bar. */
.qb-settings-panel[id] {
  scroll-margin-top: 72px;
}

/* ---- Panel modifiers ---- */
/* For a panel whose fields drop a list BELOW themselves from inside the panel (the address
   suggestions and the country picker are positioned in place, not in a popover layer): the
   default overflow: clip would cut the list off at the panel's bottom edge. Only for panels
   with no full-bleed tinted row at a rounded corner, which is what the clip is for. */
.qb-settings-panel--overflow-visible {
  overflow: visible;
}

/* ---- Free-form panel content: a form grid, a table, an alert, between or under rows ---- */
.qb-settings-block {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-panel__body:first-child > .qb-settings-block:first-child {
  border-top: 0;
}

.qb-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.qb-settings-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qb-settings-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A table (QbTable, a plain <table>) inside a panel. The panel's overflow: clip CLIPS wide
   content rather than scrolling it, so without this wrapper a table's right-hand columns and
   row actions are cut off on a narrow screen with no way to reach them. */
.qb-settings-table {
  overflow-x: auto;
}

/* ---- Integrations: one card per provider (board A4, IntegrationProviderCard) ----
   The logo tile stays white in both themes: the vendor marks are drawn for a light ground
   (Salesforce's white wordmark sits inside its blue cloud, QuickBooks' "qb" inside its circle). */
.qb-settings-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qb-settings-providers__head {
  min-width: 0;
}

.qb-settings-providers__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-providers__description {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-provider {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  background: var(--mud-palette-surface, #FFFFFF);
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
}

.qb-settings-provider__mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 8px;
  background: #FFFFFF;
}

.qb-settings-provider__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qb-settings-provider__body {
  flex-grow: 1;
  min-width: 0;
}

.qb-settings-provider__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.qb-settings-provider__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.qb-settings-provider__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-provider__chip {
  margin: 0;
}

/* Shrinkable and wrapping: two buttons (Reauthorize + Disconnect) must never overflow the card
   at 320-390px. Below 600px the actions drop under the title instead (media query below). */
.qb-settings-provider__actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 8px;
}

/* AA contrast for the blue "Syncing paused" chip and label. The theme sets no Info colour, so
   MudBlazor's default (#2196F3) applies: 3.1:1 against white, below AA's 4.5:1. #1D4ED8 is
   6.7:1 (white text on it, and it as text on the white card). Scoped to the provider card so
   the rest of the app keeps its Info colour. */
.qb-settings-provider .mud-chip.mud-chip-color-info {
  background-color: #1D4ED8;
  color: #FFFFFF;
}

.qb-settings-provider .mud-info-text {
  color: #1D4ED8;
}

.qb-settings-provider__description {
  max-width: 560px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

/* Margins, not a flex gap on the body: the meta slot is always passed, so an empty one must
   take no space. */
.qb-settings-provider__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  font-size: 13px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-provider__meta:not(:empty) {
  margin-top: 6px;
}

.qb-settings-provider__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 8px;
}

.qb-settings-provider__state {
  font-weight: 600;
}

/* The Salesforce setup steps, under the card they are about. */
.qb-settings-provider__setup {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
}

/* A form's own Save, after its panels (Company profile). Not sticky. */
.qb-settings-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* ---- Company logo (General › Company identity) ---- */
.qb-settings-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.qb-settings-logo__frame {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  max-width: 200px;
  height: 64px;
  padding: 6px;
  border: 1px dashed #B8C0CB;
  border-radius: 6px;
  background: #FBFBFC;
}

.qb-settings-logo__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.qb-settings-logo__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qb-settings-logo__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.qb-settings-logo__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

/* ---- Status chips in a row (Quoting › pipeline preview) ---- */
.qb-settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* ---- Exchange-rate table (Quoting › Exchange rates) ----
   minmax(0, …) columns shrink with the panel, so a phone gets narrower inputs rather than a
   table cut off by the panel's overflow: clip. */
.qb-settings-fx {
  display: flex;
  flex-direction: column;
}

.qb-settings-fx__head,
.qb-settings-fx__row {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 180px) 36px;
  gap: 12px;
  align-items: center;
}

.qb-settings-fx__head {
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-fx__row {
  padding: 8px 0;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-fx__add {
  padding-top: 10px;
}

/* ---- Plan & billing (board A5, BillingPage + BillingContactsSection) ---- */
.qb-settings-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 24px 18px;
}

.qb-settings-plan__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.qb-settings-plan__overline {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-plan__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.qb-settings-plan__name {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--mud-palette-text-primary, #10151D);
  overflow-wrap: anywhere;
}

.qb-settings-plan__chip {
  margin: 0;
}

.qb-settings-plan__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-plan__meta > span + span::before {
  content: "·";
  margin-right: 6px;
}

/* "Set your time zone", beside a period-end date shown in UTC (BillingPage). */
.qb-settings-plan__tz-link {
  color: var(--mud-palette-primary);
}

.qb-settings-plan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.qb-settings-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-usage__item {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.qb-settings-usage__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 13px;
  line-height: 20px;
}

.qb-settings-usage__label {
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-usage__value {
  font-weight: 600;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-meter {
  height: 6px;
  border-radius: 3px;
  background: #EEF0F3;
  overflow: hidden;
}

.qb-settings-meter__fill {
  height: 100%;
  max-width: 100%;
  border-radius: 3px;
  background: var(--mud-palette-primary, #2563EB);
}

/* The upgrade cards inside the Plans panel. auto-fill + minmax(0, …) keeps them one column
   on a phone rather than overflowing the panel's overflow: clip. */
.qb-settings-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.qb-settings-plan-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
}

.qb-settings-plan-card__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-plan-card__price {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--mud-palette-primary, #2563EB);
}

.qb-settings-plan-card__limit {
  font-size: 13px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-plan-card__action {
  align-self: flex-start;
  margin-top: auto;
}

/* The "add a recipient" fields and button on one line, wrapping on a narrow screen. */
.qb-settings-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.qb-settings-add__field {
  flex: 1 1 200px;
  min-width: 0;
}

@media (max-width: 599.98px) {
  .qb-settings-provider {
    gap: 12px;
    padding: 16px;
  }

  .qb-settings-provider__mark {
    width: 36px;
    height: 36px;
    padding: 4px;
  }

  .qb-settings-provider__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .qb-settings-page-header,
  .qb-settings-panel__header,
  .qb-settings-row {
    flex-wrap: wrap;
  }

  .qb-settings-panel__header,
  .qb-settings-row,
  .qb-settings-block,
  .qb-settings-panel__footer,
  .qb-settings-plan,
  .qb-settings-usage {
    padding-left: 16px;
    padding-right: 16px;
  }

  .qb-settings-grid--2,
  .qb-settings-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .qb-settings-row--dependent {
    padding-left: 32px;
  }
}

/* ---- Pricing rules: test bench and sample table (Quoting › Pricing rules, PricingTestBench) ----
   Two traces side by side when comparing; the result that differs is marked by a border AND by
   the verdict sentence / the "differs" cell, so nothing is signalled by colour alone. */
.qb-settings-bench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qb-settings-bench__inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.qb-settings-bench__problem,
.qb-settings-samples__empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-bench__problem {
  color: var(--mud-palette-error, #B91C1C);
}

.qb-settings-bench__traces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.qb-settings-bench__traces--compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qb-settings-bench__trace {
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--mud-palette-divider, #E2E6EB);
  border-radius: 6px;
  background: var(--mud-palette-surface, #FFFFFF);
}

.qb-settings-bench__trace--differs {
  border-color: var(--mud-palette-warning, #B7791F);
  border-width: 2px;
}

.qb-settings-bench__trace-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-bench__steps {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-bench__steps > li + li {
  margin-top: 2px;
}

.qb-settings-bench__result {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--mud-palette-divider, #E2E6EB);
  font-size: 13px;
  line-height: 1.5;
}

.qb-settings-bench__result dt {
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-bench__result dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.qb-settings-bench__verdict {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-bench__verdict--differs {
  font-weight: 600;
  color: var(--mud-palette-text-primary, #10151D);
}

.qb-settings-samples {
  margin-top: 4px;
}

.qb-settings-samples__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.qb-settings-samples__caption {
  padding: 0 0 8px;
  text-align: left;
  font-size: 13px;
  color: var(--mud-palette-text-secondary, #4B5665);
}

/* :where() keeps these cell defaults at one class of specificity, so the rule-name column's own
   class below overrides the alignment by source order. */
.qb-settings-samples__table :where(th, td) {
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-samples__table thead th {
  font-weight: 600;
  color: var(--mud-palette-text-secondary, #4B5665);
}

.qb-settings-samples__table tbody th {
  font-weight: 500;
}

.qb-settings-samples__rule {
  text-align: left;
  white-space: normal;
}

.qb-settings-samples__row--differs > th,
.qb-settings-samples__row--differs > td {
  font-weight: 600;
  background: var(--mud-palette-warning-hover, rgba(183, 121, 31, 0.08));
}

@media (max-width: 959.98px) {
  .qb-settings-bench__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-settings-bench__traces--compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599.98px) {
  .qb-settings-bench__inputs {
    grid-template-columns: minmax(0, 1fr);
  }
/* ---- Pricing rules (Settings › Pricing rules, PricingRulesPage) ----
   The ordered rule table and the versions table share one table style. A rule with a
   validation error is tinted and carries the error text under its name, so the finding sits
   beside the rule it names (spec §6); the implicit "otherwise" row is muted because it is not
   editable. */
.qb-settings-rules {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.qb-settings-rules th,
.qb-settings-rules td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mud-palette-divider, #E2E6EB);
}

.qb-settings-rules th {
  font-weight: 600;
  color: var(--mud-palette-text-secondary, #5F6B7A);
  white-space: nowrap;
}

.qb-settings-rules__row > td {
  background: transparent;
}

.qb-settings-rules__position {
  width: 40px;
  color: var(--mud-palette-text-secondary, #5F6B7A);
}

.qb-settings-rules__actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.qb-settings-rules__name {
  font-weight: 500;
}

.qb-settings-rules__chip {
  margin-left: 4px;
  vertical-align: middle;
}

.qb-settings-rules__row--error > td {
  background: rgba(244, 67, 54, 0.06);
}

.qb-settings-rules__error {
  margin-top: 4px;
  color: var(--mud-palette-error, #D32F2F);
}

.qb-settings-rules__row--otherwise > td {
  color: var(--mud-palette-text-secondary, #5F6B7A);
  font-style: italic;
  border-bottom: 0;
}

.qb-settings-rules__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--mud-palette-text-secondary, #5F6B7A);
}

.qb-settings-rules__note-icon {
  flex: 0 0 auto;
}

.qb-settings-rules__findings {
  margin: 6px 0 0;
  padding-left: 20px;
}

.qb-settings-rules__save {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.qb-settings-rules__summary {
  flex: 1 1 320px;
  min-width: 0;
}

.qb-settings-rules__save .qb-settings-form-actions {
  margin-bottom: 0;
  margin-top: 4px;
}