/* A-13 switches: the platform's switches in a card, the jobs in a table, and the confirmation's before and after */
.bh-switches { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2); }
.bh-switches-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.bh-switch-list > li + li { border-top: 1px solid var(--line); }
/* A row of the list: the design system's Switch (app.css), wrapping its control under the text on a narrow screen */
.bh-switch-row { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; }
.bh-switch-row > .bh-switch-text { gap: 2px; flex: 1 1 280px; }
.bh-switch-row .bh-meta, .bh-job-name + .bh-meta { overflow-wrap: anywhere; }
.bh-jobs { display: grid; gap: var(--space-3); }
/* position: relative so the scroller is the containing block for what it holds. Without it an absolutely positioned
   descendant — A-13's screen-reader-only "Actions" header, .bh-sr in the last th — belongs to an ancestor outside the
   scroller, so overflow-x never clips it: it sat at x ≈ 448 of a 489 px table and widened the page itself by 89 px in
   ka and 12 px in ru, which the sweep caught only when a dead outbox message made that table render (S37). */
.bh-table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.bh-jobs .bh-admin-table td { vertical-align: middle; }
.bh-job-switch { cursor: pointer; }
.bh-job-name { display: block; font-family: var(--font-mono); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }

/* The confirmation: the state now and after, then what the change does */
.bh-change { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }
.bh-change > div { display: contents; }
.bh-change dt { color: var(--ink-2); }
.bh-change dd { margin: 0; font-weight: var(--weight-bold); }
.bh-change-effect { color: var(--ink-1); }