body.sources .main { gap: 16px; }
body.sources .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.sources .titles { flex: 1; min-width: 0; }
body.sources .subhead { white-space: normal; }
body.sources .header-actions { display: flex; gap: 12px; align-items: center; }

body.sources .chip.ok { background: #e3f3ea; border-color: #17653f; color: #17653f; }
body.sources .chip.info { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
body.sources .banner.error { background: var(--status-error-subtle); border-color: var(--status-error); }
body.sources .banner.error strong { color: var(--status-error); }
body.sources .fine { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 16px; }
body.sources .field .hint { margin: 0; color: var(--text-muted); font-weight: 400; }
body.sources .field .hint:empty { min-height: 16px; }
@media (max-width: 1024px) { body.sources .field .hint:empty { display: none; } }
@media (min-width: 1025px) {
  body.sources .sheet > .secondary,
  body.sources .state-card > .secondary { align-self: flex-start; }
}
@media (min-width: 1025px) {
  body.sources .primary:disabled,
  body.sources button.secondary:disabled { height: 36px; }
}
body.sources .field.error .control { border-color: var(--status-error); }
body.sources .field.error .hint { color: var(--status-error); }
body.sources .field .control,
body.sources select.control { width: 100%; }
body.sources .filters { flex-wrap: wrap; }
body.sources .field.w260 { width: 260px; }
body.sources .field.w200 { width: 200px; }
body.sources .field.w180 { width: 180px; }
body.sources .field.w160 { width: 160px; }

body.sources .sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
body.sources .sheet h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
body.sources .field-row { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
body.sources .cap-scrim .field-row { flex-wrap: wrap; }
body.sources .cap-scrim .field-row .field { flex: 1 1 180px; min-width: 180px; }
body.sources .field-row .field { flex: 1; min-width: 0; width: auto; }
body.sources .cadence { display: flex; align-items: center; gap: 16px; width: 100%; }
body.sources .cadence .choice { width: 160px; flex: none; text-decoration: none; color: var(--text-primary); }
body.sources a.choice { text-decoration: none; color: var(--text-primary); }
body.sources .cadence .desc { flex: 1; min-width: 0; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
body.sources .cadence .price { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
body.sources .radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  flex: none;
}
body.sources .radio.on {
  border: 0;
  background: url("/static/radio-selected.svg") center / 16px 16px no-repeat;
}
body.sources .radio-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

body.sources .pager { display: flex; align-items: center; gap: 12px; width: 100%; }
body.sources .pager p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
body.sources button.secondary:disabled {
  background: var(--bg-subtle);
  border-color: var(--border-default);
  color: var(--text-muted);
  cursor: default;
}
body.sources .table-wrap th { white-space: normal; }
body.sources td.wrap { white-space: normal; }

body.sources .gallery { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
body.sources .state-card {
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
body.sources .kicker { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
body.sources .plain { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 20px; }

body.sources .tabs a { display: flex; flex-direction: column; text-decoration: none; }
body.sources .tabs a span {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-secondary);
}
body.sources .tabs a i { display: block; height: 2px; background: transparent; }
body.sources .tabs a[aria-selected="true"] span { color: var(--accent); }
body.sources .tabs a[aria-selected="true"] i { background: var(--accent); }
body.sources .step { display: flex; gap: 12px; align-items: flex-start; }
body.sources .step .chip { flex: none; }
body.sources .step h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
body.sources .step p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
body.sources .command {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 13px;
  line-height: 18px;
}
body.sources .check-row { display: flex; gap: 12px; align-items: center; }

body.sources.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.sources .signin-card {
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-dialog);
  background: var(--bg-surface);
}
body.sources .signin-card .lede { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
body.sources .signin-card .primary { width: 100%; }
body.sources .gate-bar { display: none; }

@media (min-width: 1025px) {
  body.sources .cap-scrim { padding-top: 150px; }
  body.sources .export-scrim { padding-top: 200px; }
  body.sources .session-scrim { padding-top: 260px; }
}
body.sources .dialog.export { width: 540px; }
body.sources .dialog form { display: flex; flex-direction: column; gap: 16px; }
body.sources .dialog .applies .group-label { margin: 0 0 8px; font-weight: 400; }
body.sources .dialog.session { width: 500px; }
body.sources .dialog-copy { margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 400; line-height: 20px; }
body.sources .dialog .include label { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-primary); }
body.sources .dialog .include label.muted { color: var(--text-muted); }
body.sources .drawer .dialog-actions { justify-content: flex-end; }
body.sources .drawer.panel > .banner { margin-top: 0; }
body.sources .section-chips { display: none; }
body.sources .sourcebar .origin,
body.sources .sourcebar .detail { display: contents; }
body.sources .sourcebar .sep { color: var(--text-muted); }
body.sources .sourcebar.derived .dot { background: #0f6e78; }
body.sources .sourcebar.operator .dot { background: #55544f; }
body.sources .drawer .close,
body.sources .text-button { text-decoration: none; }

@media (max-width: 1024px) {
  body.sources.gate { display: block; padding: 0; min-height: 100vh; }
  body.sources .gate-bar { display: flex; align-items: center; height: 56px; padding: 12px 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); font-size: 14px; font-weight: 600; line-height: 20px; }
  body.sources .gate-bar .wordmark { display: inline; color: var(--text-primary); }
  body.sources.gate .signin-card { width: 100%; padding: 24px; border: 0; border-radius: 0; background: transparent; gap: 16px; }
  body.sources.gate .signin-card h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
  body.sources.gate .signin-card .lede { font-size: 13px; line-height: 18px; }
  body.sources.gate .signin-card .primary { height: 44px; }
  body.sources .page-header { display: contents; }
  body.sources .main > * { order: 10; }
  body.sources .page-header > .titles { order: 1; flex: none; width: 100%; }
  body.sources .main > .section-chips { order: 2; }
  body.sources .page-header > .header-actions { order: 3; align-self: flex-start; }
  body.sources .section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    width: 100%;
  }
  body.sources .section-chips .chip-hit { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
  body.sources .sourcebar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    white-space: normal;
    font-size: 12px;
    line-height: 16px;
  }
  body.sources .sourcebar .origin {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
  }
  body.sources .sourcebar .origin strong { color: var(--text-secondary); }
  body.sources .sourcebar .detail { display: block; flex: 1; min-width: 0; color: var(--text-secondary); }
  body.sources .sourcebar .detail > span { display: inline; }
  body.sources .sourcebar .detail > .sep:first-child { display: none; }
  body.sources .sourcebar .sep { color: var(--text-secondary); }
  body.sources .gallery .state-card,
  body.sources .state-card { width: 100%; }
  body.sources tr:has(.metric-line) { gap: 0 8px; align-items: flex-end; }
  body.sources tr:has(.metric-line) td:has(.chip),
  body.sources tr:has(.metric-line) td:has(button),
  body.sources tr:has(.metric-line) td:has(a.secondary) { margin-top: 4px; }
  body.sources tr:has(.metric-line) td:has(.chip) ~ td:has(.chip) { margin-top: 0; }
  body.sources tr:has(.metric-line) td:has(a.secondary) { flex: 1 0 100%; }
  body.sources .note { display: none; }
  body.sources tr:has(.metric-line) td:has(.metric-line) { margin-top: 0; }
  body.sources tr:has(.metric-line) td:has(.metric-line) {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  body.sources .table-wrap .chip[data-prefix]::before { content: attr(data-prefix) ":\00a0"; }
  body.sources tr:has(.metric-line) td:has(button),
  body.sources tr:has(.metric-line) td:has(a.secondary),
  body.sources tr:has(.metric-line) td:has(a.primary),
  body.sources tr:has(.metric-line) td:has(a.text-button) { flex: 1 0 100%; }
  body.sources tr:has(.metric-line) td:has(button) button,
  body.sources tr:has(.metric-line) td:has(button) .secondary,
  body.sources tr:has(.metric-line) td:has(a.secondary) a,
  body.sources tr:has(.metric-line) td:has(a.primary) a { width: auto; }
  /* Key/value rows (KeyValue): 12/16 padding, 16 gap, key 120 wide 13/18 secondary, value 14/20. */
  body.sources .keep-table thead { display: none; }
  body.sources .keep-table table,
  body.sources .keep-table tbody { display: block; width: 100%; }
  body.sources .table-wrap.keep-table tr { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-default); background: transparent; }
  body.sources .table-wrap.keep-table tr > td { display: block; flex: 1; min-width: 0; width: auto; padding: 0; border: 0; height: auto; white-space: normal; text-align: left; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-primary); }
  body.sources .table-wrap.keep-table tr > td:first-child { flex: none; width: 120px; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
  body.sources .filters .field,
  body.sources .filters .field.w260,
  body.sources .filters .field.w200,
  body.sources .filters .field.w180,
  body.sources .filters .field.w160 { width: 100%; }
  body.sources .cadence .desc,
  body.sources .cadence .price { display: none; }
  body.sources .cadence { min-height: 44px; }
  body.sources .cadence .choice { min-height: 44px; display: flex; align-items: center; }
  body.sources .sheet .field-row { flex-wrap: wrap; }
  body.sources .sheet .field-row .field { flex: 1 1 calc(50% - 8px); }
  body.sources .sheet .field-row .field:nth-child(3) { flex: 1 1 100%; }
  body.sources .sheet .dialog-actions .primary,
  body.sources .sheet > .secondary,
  body.sources .check-row .primary { width: 100%; }
  body.sources .sheet .dialog-actions .primary:disabled {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
  }
  body.sources .check-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.sources .sheet:has(> .step) { gap: 12px; }
  body.sources .step,
  body.sources .step > div { display: contents; }
  body.sources .step > .chip { align-self: flex-start; margin: 9px 0; min-width: 24px; justify-content: center; }
  body.sources .step h3 { margin: 0; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--text-secondary); }
  body.sources .step p { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
  body.sources .command { padding: 0; background: transparent; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
  body.sources .check-row > .chip { margin: 9px 0; }
  body.sources .check-row .field { width: 100%; }
  body.sources .check-row .secondary { width: 100%; }
  /* Drawer (tablet 440 wide, mobile sheet): header 76, 24 side padding, key/value rows, actions bar with top border. */
  body.sources .drawer.panel { display: flex; flex-direction: column; gap: 0; padding: 0; width: 440px; }
  body.sources .drawer .drawer-head { min-height: 76px; padding: 16px 24px; }
  body.sources .drawer .close { height: 44px; padding: 8px 16px; font-size: 13px; line-height: 18px; text-decoration: none; }
  body.sources .drawer.panel > .banner { margin: 0 24px 12px; }
  body.sources .drawer .table-wrap.keep-table { margin: 0 24px; }
  body.sources .drawer .dialog-actions { margin-top: auto; padding: 24px; border-top: 1px solid var(--border-default); justify-content: flex-end; }
  body.sources .drawer .dialog-actions .text-button { display: none; }
  /* Dialogs (position and width come from design-fidelity.css). */
  body.sources .dialog,
  body.sources .collect-dialog,
  body.sources .dialog.export,
  body.sources .dialog.session { width: 480px; max-width: 100%; }
  body.sources .dialog form { display: flex; flex-direction: column; gap: 16px; }
  body.sources .dialog .field-row { flex-wrap: wrap; }
  body.sources .dialog .field-row .field { flex: 1 1 calc(50% - 8px); }
  body.sources .dialog .field-row .field:nth-child(3) { flex: 1 1 100%; }
  body.sources .dialog .applies { display: flex; flex-direction: column; gap: 16px; }
  body.sources .dialog .applies .group-label { margin: 0; font-weight: 400; }
  body.sources .dialog .radio-stack { gap: 16px; width: 100%; }
  body.sources .dialog .radio-stack .choice { min-height: 44px; width: 100%; white-space: normal; }
  body.sources .dialog .dialog-actions .text-button,
  body.sources .dialog .dialog-actions .primary { height: 44px; }
  body.sources .dialog.export .include { gap: 16px; }
  body.sources .dialog.export .include label { min-height: 44px; }
  body.sources .dialog-copy { font-size: 13px; line-height: 18px; }
  body.sources .tabs { height: auto; align-items: center; flex-wrap: wrap; gap: 0 8px; }
  body.sources .tabs a { min-height: 44px; justify-content: center; }
  body.sources .tabs a i { display: none; }
  body.sources .tabs a span {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
  }
  body.sources .tabs a[aria-selected="true"] span {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  body.sources .drawer.panel { border: 1px solid var(--border-default); }
  body.sources .sheet:has(> .field) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
  }
  body.sources .sheet:has(> .field) > h2,
  body.sources .sheet:has(> .field) > .dialog-actions { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  body.sources .main { gap: 12px; }
  body.sources .header-actions form { flex: 1; display: flex; }
  body.sources .header-actions form .primary { flex: 1; width: 100%; }
  body.sources .header-actions {
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 56px;
    display: flex;
    padding: 16px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
  }
  body.sources .header-actions .secondary,
  body.sources .header-actions .primary { flex: 1; width: 100%; height: 44px; }
  body.sources .field-row,
  body.sources .sheet .field-row,
  body.sources .cadence { flex-direction: column; align-items: stretch; }
  body.sources .sheet .field-row .field,
  body.sources .sheet .field-row .field:nth-child(3),
  body.sources .cadence .choice,
  body.sources .field.w260,
  body.sources .field.w200,
  body.sources .field.w180,
  body.sources .field.w160 { width: 100%; flex-basis: auto; }
  body.sources .dialog,
  body.sources .collect-dialog,
  body.sources .dialog.export,
  body.sources .dialog.session { width: 100%; max-width: 100%; margin-top: auto; margin-bottom: auto; }
  body.sources .dialog .field-row { flex-direction: column; }
  body.sources .dialog .field-row .field,
  body.sources .dialog .field-row .field:nth-child(3) { flex-basis: auto; width: 100%; }
  body.sources .dialog.session .dialog-actions .primary { width: 100%; }
  body.sources .dialog.export .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  body.sources .dialog.export .primary,
  body.sources .dialog.export .text-button { width: 100%; }
  body.sources .dialog .cap-actions .text-button,
  body.sources .dialog .cap-actions .primary { flex: 1; }
  body.sources .dialog.export .include .tick { flex: none; }
  body.sources.gate .signin-card { padding: 16px; gap: 12px; }
  /* ST-05 mobile: auto-height sheet from the bottom, 10 radius, actions full width. */
  body.sources .drawer.panel.panel.panel { top: auto; bottom: 0; height: auto; max-height: calc(100vh - 84px); width: 100%; }
  body.sources .drawer .dialog-actions { justify-content: stretch; }
  body.sources .drawer .dialog-actions .secondary { width: 100%; }
}

/* Select caret (shared fidelity rule is overridden by design.css `.control { background }`; see shared-requests-st.md). */
body.sources select.control {
  background-repeat: no-repeat;
  background-position: var(--caret-x, calc(100% - 12px)) 17px;
  background-size: 5px 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4' viewBox='0 0 5 4'%3E%3Cpath d='M0 0h5L2.5 4z' fill='%231b1b1a'/%3E%3C/svg%3E");
}
body.sources select.control:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4' viewBox='0 0 5 4'%3E%3Cpath d='M0 0h5L2.5 4z' fill='%236a6963'/%3E%3C/svg%3E");
}
body.sources .radio-stack .choice input { flex: none; }
body.sources #drawer-root .drawer .table-wrap.keep-table tr > td { white-space: normal; height: auto; }
@media (max-width: 1024px) { body.sources .dialog .include label.muted { color: var(--text-primary); } }
body.sources .empty-line { margin: 0; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; line-height: 18px; }
body.sources .example-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 16px; flex-wrap: wrap; }

/* 1025 to 1279: columns wrap instead of pushing the action column out of the panel. */
@media (min-width: 1025px) and (max-width: 1279px) {
  body.sources .table-wrap table { width: 100%; table-layout: auto; }
  body.sources .table-wrap th,
  body.sources .table-wrap td { white-space: normal; }
}

body.sources .scrim-link { position: absolute; inset: 0; }
body.sources .dialog-scrim .dialog { position: relative; z-index: 1; }
body.sources .filters-reason { margin: -8px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
body.sources .radiogroup { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* UI2 pass: layout fixes for the sections added after the first pass. */
/* Local backup row: the stored detail and the one action share a line (the row stays one line high on desktop). */
body.sources .backup-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
body.sources .backup-line form { margin: 0; }
/* Candidate rules form: fields, hints and the action keep the 12px sheet rhythm. */
body.sources .sheet > form:not(.check-row) { display: flex; flex-direction: column; gap: 12px; width: 100%; }
/* Sign-in: the helper line and the action keep a 16px gap even when the helper wraps. */
body.sources .signin-card form { display: flex; flex-direction: column; gap: 16px; }
/* Connect a source: Simulate and Register rows share one grid of field widths, buttons align to the field bottoms. */
@media (min-width: 1025px) {
  body.sources .check-row { flex-wrap: wrap; align-items: flex-end; row-gap: 12px; }
  body.sources .check-row .field { width: 240px; max-width: 100%; }
  body.sources .check-row > .chip { margin-bottom: 6px; }
  body.sources .check-row > button,
  body.sources .check-row > .primary { flex: none; }
  body.sources .step > .chip { min-width: 26px; justify-content: center; }
}

@media (max-width: 1024px) {
  /* Detail text lives in the compact line above; only the action stays in the cell. */
  body.sources .backup-line .detail-text { display: none; }
  /* A table with no data row has no compact rows: no header cells over a message. */
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) thead,
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) colgroup { display: none; }
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) table,
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) tbody,
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) tr,
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) td { display: block; width: 100%; box-sizing: border-box; }
  body.sources .table-wrap:not(:has(.metric-line)):not(.keep-table) td[colspan] { padding: 12px 16px; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Five stats (Budget and usage) read as 3 + 2 rather than 4 + 1. */
  body.sources .distribution { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.sources .distribution .stat:nth-child(5) { grid-column: auto; }
}

/* 1025 to 1279: dates stay on one line; the Search field gives 20px back so the four filters share a row. */
@media (min-width: 1025px) and (max-width: 1279px) {
  body.sources .table-wrap td:first-child:not(.wrap):not(.strong-wrap) { white-space: nowrap; }
  body.sources .table-wrap.keep-table td:first-child { white-space: normal; }
}

/* UI2 review: read-only "Now" value, date hint, and ST-08 filters on one row from 1025. */
body.sources .dialog .field .control:disabled { opacity: 1; }
body.sources:not(#ds) input[type="date"][data-display=""]:not([data-kb])::before { content: "Choose a date"; color: #6a6963; }
@media (min-width: 1025px) and (max-width: 1279px) {
  body.sources .field.w260 { width: 200px; }
  body.sources .field.w180 { width: 150px; }
  body.sources .field.w160 { width: 140px; }
}

/* UI2 review S10: long stored text (hashes, object keys, URLs, unbroken values) wraps inside its cell, card, banner, heading or drawer at every width. */
body.sources :is(.main, .drawer, .dialog) :is(h1, h2, h3, p, strong, span, a, li, td, th, label, div) { overflow-wrap: anywhere; }
body.sources .metric-line { overflow-wrap: anywhere; word-break: normal; }

/* UI2 review S10: on mobile the cap dialog never grows past the viewport. The fields scroll inside it; the action row stays pinned below them (no negative margins). */
@media (max-width: 767px) {
  body.sources .cap-scrim { overflow: hidden; }
  body.sources .cap-scrim .dialog.collect-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; margin-top: 0; margin-bottom: 0; }
  body.sources .cap-scrim .dialog.collect-dialog > h2,
  body.sources .cap-scrim .dialog.collect-dialog > .banner { flex: none; }
  body.sources .cap-scrim .dialog.collect-dialog > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
  body.sources .cap-fields { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px; }
  body.sources .cap-actions { flex: none; }
}
@media (min-width: 768px) {
  body.sources .cap-fields { display: flex; flex-direction: column; gap: 16px; }
}

/* Static review (2026-10-27). Header words are never broken: `overflow-wrap: anywhere` on a long stored value shrinks a column's
   min-content width, which let auto table layout (1025 to 1279) squeeze a neighbouring header below its longest word. A header keeps
   normal wrapping, so its longest word is the column's floor. */
body.sources :is(.main, .drawer, .dialog) .table-wrap thead th { overflow-wrap: normal; word-break: normal; }
/* Activity "Where" is a stored table name (snake_case, no break points). It keeps its whole name wherever the column can hold it
   (210 wide from 1280; in auto layout the name sets the column floor). */
body.sources .table-wrap td.where { overflow-wrap: break-word; word-break: normal; }

/* Keep stored-history pagination readable beside its summary at narrow widths. */
body.sources .pager p { flex: 1; min-width: 0; }
body.sources .pager > .secondary {
  flex-shrink: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}