/* ═══════════════════════════════════════════════════════════════════════════
   SBR Air — shared/ui/sbr-air.components.css  (V1 shared design foundation)
   Components per docs/design/SBR_Air_Visual_Design_System_v1.1.md (§8, §11–§20, §25), written cleanly to match
   the frozen Jobs Operations Board (the prototype CSS is a visual reference, not copied). Every selector starts
   with .sa-scope and every class uses the sa- prefix, so nothing reaches existing screens until they opt in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons (v1.1 §11) ─────────────────────────────────────────────────── */
.sa-scope .sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--sa-ctl-h); padding: 0 14px; border-radius: var(--sa-r-md);
  border: 1px solid var(--sa-border-control); background: var(--sa-surface); color: var(--sa-text);
  font-size: var(--sa-text-md); line-height: var(--sa-lh-md); font-weight: var(--sa-weight-medium);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--sa-dur-fast) var(--sa-ease), border-color var(--sa-dur-fast) var(--sa-ease);
}
.sa-scope .sa-btn:hover { background: var(--sa-surface-hover); }
.sa-scope .sa-btn:active { background: var(--sa-surface-sunken); }
.sa-scope .sa-btn--primary { background: var(--sa-blue); border-color: var(--sa-blue); color: var(--sa-text-inverse); font-weight: var(--sa-weight-semibold); }
.sa-scope .sa-btn--primary:hover { background: var(--sa-blue-hover); border-color: var(--sa-blue-hover); }
.sa-scope .sa-btn--primary:active { background: var(--sa-blue-pressed); border-color: var(--sa-blue-pressed); }
.sa-scope .sa-btn--tertiary { border-color: transparent; background: transparent; color: var(--sa-blue-text); padding: 0 8px; }
.sa-scope .sa-btn--tertiary:hover { background: var(--sa-blue-subtle); text-decoration: underline; }
.sa-scope .sa-btn--danger { color: var(--sa-red-text); }
.sa-scope .sa-btn--danger:hover { background: var(--sa-red-subtle); border-color: var(--sa-red-border); }
.sa-scope .sa-btn--danger-solid { background: var(--sa-red); border-color: var(--sa-red); color: var(--sa-text-inverse); font-weight: var(--sa-weight-semibold); } /* inside confirmation dialogs only */
.sa-scope .sa-btn--danger-solid:hover { background: var(--sa-red-hover); border-color: var(--sa-red-hover); }
.sa-scope .sa-btn--sm { height: var(--sa-ctl-h-sm); padding: 0 10px; font-size: var(--sa-text-sm); }
.sa-scope .sa-btn:disabled, .sa-scope .sa-btn[aria-disabled="true"] {
  background: var(--sa-surface-sunken); border-color: var(--sa-border); color: var(--sa-text-disabled); cursor: not-allowed;
}
.sa-scope .sa-btn[aria-busy="true"] { cursor: progress; }
.sa-scope .sa-btn[aria-busy="true"] .sa-ico svg { animation: sa-spin 1s linear infinite; }
.sa-scope .sa-icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--sa-r-md);
  border: 0; background: transparent; color: var(--sa-text-2); cursor: pointer;
}
.sa-scope .sa-icon-btn:hover { background: var(--sa-surface-hover); color: var(--sa-text); }
.sa-scope .sa-btn-group { display: flex; align-items: center; gap: var(--sa-space-2); flex-wrap: wrap; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* ── Form controls (v1.1 §18) ───────────────────────────────────────────── */
.sa-scope .sa-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sa-space-4); }
.sa-scope .sa-label { font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); font-weight: var(--sa-weight-medium); color: var(--sa-text); }
.sa-scope .sa-label .sa-optional { font-weight: var(--sa-weight-regular); color: var(--sa-text-2); }
.sa-scope .sa-input {
  width: 100%; height: var(--sa-ctl-h); padding: 0 10px; border: 1px solid var(--sa-border-control);
  border-radius: var(--sa-r-md); background: var(--sa-surface); color: var(--sa-text);
  font-size: var(--sa-text-md); line-height: var(--sa-lh-md);
}
.sa-scope textarea.sa-input { height: auto; min-height: 88px; padding: 8px 10px; resize: vertical; }
.sa-scope .sa-input::placeholder { color: var(--sa-text-3); }
.sa-scope .sa-input:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 0; border-color: var(--sa-focus); }
.sa-scope .sa-input[aria-invalid="true"] { border-color: var(--sa-red); }
.sa-scope .sa-input:disabled { background: var(--sa-surface-sunken); color: var(--sa-text-disabled); cursor: not-allowed; }
.sa-scope .sa-input[readonly] { background: var(--sa-surface-subtle); }
.sa-scope .sa-help { font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); color: var(--sa-text-2); }
.sa-scope .sa-error { display: flex; align-items: center; gap: 4px; font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); font-weight: var(--sa-weight-medium); color: var(--sa-red-text); }
.sa-scope .sa-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.sa-scope .sa-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--sa-blue); }
.sa-scope .sa-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.sa-scope .sa-toggle input { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; margin: 0; border-radius: var(--sa-r-full); background: var(--sa-border-control); position: relative; cursor: pointer; transition: background-color var(--sa-dur-base) var(--sa-ease); }
.sa-scope .sa-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--sa-surface); transition: transform var(--sa-dur-base) var(--sa-ease); }
.sa-scope .sa-toggle input:checked { background: var(--sa-blue); }
.sa-scope .sa-toggle input:checked::after { transform: translateX(14px); }
.sa-scope .sa-form-summary { margin-bottom: var(--sa-space-4); }

/* ── Panels and page header (v1.1 §8, §25) ──────────────────────────────── */
.sa-scope .sa-panel { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-r-lg); }
.sa-scope .sa-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sa-space-3); padding: var(--sa-space-3) var(--sa-space-4); border-bottom: 1px solid var(--sa-border); }
.sa-scope .sa-panel__title { font-size: var(--sa-text-md); line-height: var(--sa-lh-md); font-weight: var(--sa-weight-semibold); margin: 0; }
.sa-scope .sa-panel__body { padding: var(--sa-space-4); }
.sa-scope .sa-panel--workspace .sa-panel__body { padding: var(--sa-space-5); }
.sa-scope .sa-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sa-space-4); flex-wrap: wrap; margin-bottom: 14px; }
.sa-scope .sa-page-title { font-size: var(--sa-text-xl); line-height: var(--sa-lh-xl); font-weight: var(--sa-weight-semibold); margin: 0; }
.sa-scope .sa-page-sub { margin: 2px 0 0; font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); color: var(--sa-text-2); }
.sa-scope .sa-page-actions { display: flex; align-items: center; gap: var(--sa-space-2); flex-wrap: wrap; }

/* ── Table / data grid (v1.1 §14) ───────────────────────────────────────── */
.sa-scope .sa-table-wrap { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-r-lg); overflow: auto; }
.sa-scope .sa-table { width: 100%; border-collapse: collapse; font-size: var(--sa-text-md); }
.sa-scope .sa-table th {
  position: sticky; top: 0; z-index: var(--sa-z-sticky); background: var(--sa-surface-subtle);
  height: 36px; padding: 0 6px; text-align: left; white-space: nowrap;
  font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); font-weight: var(--sa-weight-semibold); color: var(--sa-text-2);
  border-bottom: 1px solid var(--sa-border);
}
.sa-scope .sa-table th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sa-scope .sa-table th button:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 2px; }
.sa-scope .sa-table th[aria-sort="ascending"], .sa-scope .sa-table th[aria-sort="descending"] { color: var(--sa-blue-text); }
.sa-scope .sa-table td { height: var(--sa-row-h); padding: 0 6px; border-bottom: 1px solid var(--sa-border); vertical-align: middle; }
.sa-scope .sa-table .sa-num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-scope .sa-table tbody tr:hover td { background: var(--sa-surface-hover); }
.sa-scope .sa-table tbody tr[aria-selected="true"] td { background: var(--sa-surface-selected); }
.sa-scope .sa-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--sa-blue); }
.sa-scope .sa-table tbody tr.sa-row--attention td:first-child { box-shadow: inset 3px 0 0 var(--sa-amber); }
.sa-scope .sa-table tbody tr.sa-row--exception td:first-child { box-shadow: inset 3px 0 0 var(--sa-red); }
.sa-scope .sa-table tbody tr.sa-row--archived td { color: var(--sa-text-3); }
.sa-scope .sa-table tbody tr:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: -2px; }
.sa-scope .sa-table--compact td { height: var(--sa-row-h-compact); }
.sa-scope .sa-cell-primary { display: block; font-weight: var(--sa-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-scope .sa-cell-secondary { display: block; font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); color: var(--sa-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Status badge, flag, phase tag, count (v1.1 §12–13, §10) ────────────── */
.sa-scope .sa-badge { display: inline-flex; align-items: center; gap: 5px; height: var(--sa-badge-h); padding: 0 7px; border: 1px solid; border-radius: var(--sa-r-sm); font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); font-weight: var(--sa-weight-medium); white-space: nowrap; }
.sa-scope .sa-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sa-scope .sa-badge--blue { background: var(--sa-blue-subtle); border-color: var(--sa-blue-border); color: var(--sa-blue-text); }
.sa-scope .sa-badge--green { background: var(--sa-green-subtle); border-color: var(--sa-green-border); color: var(--sa-green-text); }
.sa-scope .sa-badge--amber { background: var(--sa-amber-subtle); border-color: var(--sa-amber-border); color: var(--sa-amber-text); }
.sa-scope .sa-badge--red { background: var(--sa-red-subtle); border-color: var(--sa-red-border); color: var(--sa-red-text); }
.sa-scope .sa-badge--slate { background: var(--sa-slate-subtle); border-color: var(--sa-slate-border); color: var(--sa-slate-text); }
.sa-scope .sa-badge--gray { background: var(--sa-gray-subtle); border-color: var(--sa-gray-border); color: var(--sa-gray-text); }
.sa-scope .sa-badge--dimmed { opacity: .7; }
.sa-scope .sa-flag { display: inline-flex; align-items: center; gap: 4px; height: var(--sa-badge-h); padding: 0 8px; border: 1px solid; border-radius: var(--sa-r-full); background: var(--sa-surface); font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); font-weight: var(--sa-weight-medium); white-space: nowrap; }
.sa-scope .sa-flag--sm { height: var(--sa-flag-sm-h); padding: 0 7px; font-size: 11px; }
.sa-scope .sa-flag--attention { border-color: var(--sa-amber-border); color: var(--sa-amber-text); }
.sa-scope .sa-flag--exception { border-color: var(--sa-red-border); color: var(--sa-red-text); background: var(--sa-red-subtle); }
.sa-scope .sa-flag--neutral { border-color: var(--sa-slate-border); color: var(--sa-slate-text); }
.sa-scope .sa-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border: 1px solid; border-radius: 3px; background: var(--sa-surface); font-size: 11px; font-weight: var(--sa-weight-semibold); letter-spacing: .3px; }
.sa-scope .sa-tag--est { border-color: var(--sa-tag-est-border); color: var(--sa-violet-text); }
.sa-scope .sa-tag--wo { border-color: var(--sa-tag-wo-border); color: var(--sa-blue-text); }
.sa-scope .sa-tag--neutral { border-color: var(--sa-slate-border); color: var(--sa-slate-text); }
.sa-scope .sa-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--sa-r-full); background: var(--sa-gray-subtle); color: var(--sa-gray-text); font-size: var(--sa-text-xs); font-weight: var(--sa-weight-medium); font-variant-numeric: tabular-nums; }
.sa-scope .sa-count--action { background: var(--sa-amber-subtle); color: var(--sa-amber-text); }
.sa-scope .sa-count--on-dark { background: var(--sa-nav-count-bg); color: var(--sa-nav-count-text); }
.sa-scope .sa-count[hidden] { display: none; }

/* ── Notifications: toast and banner (v1.1 §20, §25) ────────────────────── */
.sa-scope .sa-toast-region { position: fixed; right: var(--sa-space-6); bottom: var(--sa-space-6); z-index: var(--sa-z-toast); display: flex; flex-direction: column; gap: var(--sa-space-2); pointer-events: none; }
.sa-scope .sa-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--sa-space-3); min-width: 280px; max-width: 420px; padding: 10px 12px; background: var(--sa-text); color: var(--sa-text-inverse); border-radius: var(--sa-r-lg); box-shadow: var(--sa-shadow-md); font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); animation: sa-fade-in var(--sa-dur-base) var(--sa-ease); }
.sa-scope .sa-toast--success .sa-ico { color: var(--sa-green-border); }
.sa-scope .sa-toast--error .sa-ico { color: var(--sa-red-border); }
.sa-scope .sa-toast .sa-toast__msg { flex: 1; }
.sa-scope .sa-toast button { all: unset; cursor: pointer; font-weight: var(--sa-weight-semibold); color: var(--sa-blue-border); }
.sa-scope .sa-toast button:focus-visible { outline: 2px solid var(--sa-nav-indicator); outline-offset: 2px; }
.sa-scope .sa-banner { display: flex; align-items: flex-start; gap: var(--sa-space-2); padding: 10px 12px; border: 1px solid; border-radius: var(--sa-r-md); font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); }
.sa-scope .sa-banner--info { background: var(--sa-blue-subtle); border-color: var(--sa-blue-border); color: var(--sa-blue-text); }
.sa-scope .sa-banner--warning { background: var(--sa-amber-subtle); border-color: var(--sa-amber-border); color: var(--sa-amber-text); }
.sa-scope .sa-banner--error { background: var(--sa-red-subtle); border-color: var(--sa-red-border); color: var(--sa-red-text); }
.sa-scope .sa-banner--archived { background: var(--sa-gray-subtle); border-color: var(--sa-gray-border); color: var(--sa-gray-text); }
@keyframes sa-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Drawer and modal (v1.1 §19, §7 Level 3) ────────────────────────────── */
.sa-scope .sa-layer { position: fixed; inset: 0; z-index: var(--sa-z-drawer); pointer-events: none; }
.sa-scope .sa-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--sa-drawer-w); z-index: var(--sa-z-drawer);
  display: flex; flex-direction: column; background: var(--sa-surface); border-left: 1px solid var(--sa-border);
  box-shadow: var(--sa-shadow-lg); pointer-events: auto; animation: sa-slide-in var(--sa-dur-drawer) var(--sa-ease);
}
.sa-scope .sa-drawer__head { display: flex; align-items: flex-start; gap: var(--sa-space-2); padding: var(--sa-space-4) var(--sa-space-6); border-bottom: 1px solid var(--sa-border); }
.sa-scope .sa-drawer__title { flex: 1; min-width: 0; margin: 0; font-size: var(--sa-text-lg); line-height: var(--sa-lh-lg); font-weight: var(--sa-weight-semibold); }
.sa-scope .sa-drawer__sub { margin: 2px 0 0; font-size: var(--sa-text-sm); color: var(--sa-text-2); }
.sa-scope .sa-drawer__body { flex: 1; overflow-y: auto; padding: var(--sa-space-6); }
.sa-scope .sa-drawer__foot { display: flex; align-items: center; gap: var(--sa-space-2); padding: var(--sa-space-3) var(--sa-space-6); border-top: 1px solid var(--sa-border); }
.sa-scope .sa-drawer__foot .sa-spacer, .sa-scope .sa-modal__foot .sa-spacer { flex: 1; }
@keyframes sa-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sa-scope .sa-scrim { position: fixed; inset: 0; z-index: var(--sa-z-modal); background: var(--sa-scrim); display: grid; place-items: center; padding: var(--sa-space-5); pointer-events: auto; }
.sa-scope .sa-modal { width: 100%; max-width: var(--sa-modal-sm); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--sa-surface); border-radius: var(--sa-r-xl); box-shadow: var(--sa-shadow-lg); animation: sa-fade-in var(--sa-dur-base) var(--sa-ease); }
.sa-scope .sa-modal--md { max-width: var(--sa-modal-md); }
.sa-scope .sa-modal__head { display: flex; align-items: flex-start; gap: var(--sa-space-2); padding: var(--sa-space-5) var(--sa-space-6) 0; }
.sa-scope .sa-modal__title { flex: 1; margin: 0; font-size: var(--sa-text-lg); line-height: var(--sa-lh-lg); font-weight: var(--sa-weight-semibold); }
.sa-scope .sa-modal__body { padding: var(--sa-space-4) var(--sa-space-6); overflow-y: auto; }
.sa-scope .sa-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sa-space-2); padding: 0 var(--sa-space-6) var(--sa-space-5); }
@media (max-width: 1279px) { .sa-scope .sa-drawer { width: max(480px, 45%); } }
@media (max-width: 1023px) {
  .sa-scope .sa-drawer { width: 100%; }
  .sa-scope .sa-drawer__head, .sa-scope .sa-drawer__body, .sa-scope .sa-drawer__foot { padding-left: var(--sa-space-4); padding-right: var(--sa-space-4); }
  .sa-scope .sa-btn, .sa-scope .sa-input { min-height: var(--sa-ctl-h-touch); }
  .sa-scope .sa-icon-btn { width: var(--sa-ctl-h-touch); height: var(--sa-ctl-h-touch); }
  .sa-scope .sa-toast-region { left: var(--sa-space-4); right: var(--sa-space-4); bottom: var(--sa-space-4); align-items: center; }
}

/* ── Tooltip and info popover (v1.1 §16) ────────────────────────────────── */
.sa-scope .sa-tooltip { position: fixed; z-index: var(--sa-z-popover); max-width: 280px; padding: 6px 8px; background: var(--sa-text); color: var(--sa-text-inverse); border-radius: var(--sa-r-md); box-shadow: var(--sa-shadow-md); font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); pointer-events: none; animation: sa-fade-in var(--sa-dur-fast) var(--sa-ease); }
.sa-scope .sa-info { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--sa-text-3); cursor: pointer; position: relative; }
.sa-scope .sa-info::after { content: ""; position: absolute; inset: -10px; } /* 44 px hit area */
.sa-scope .sa-popover { position: fixed; z-index: var(--sa-z-popover); max-width: 280px; padding: 10px 12px; background: var(--sa-surface); color: var(--sa-text); border: 1px solid var(--sa-border); border-radius: var(--sa-r-lg); box-shadow: var(--sa-shadow-md); font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); }

/* ── Empty / loading / error states (v1.1 §20) ──────────────────────────── */
.sa-scope .sa-state { display: flex; flex-direction: column; align-items: center; gap: var(--sa-space-2); padding: var(--sa-space-10) var(--sa-space-5); text-align: center; color: var(--sa-text-2); }
.sa-scope .sa-state .sa-ico { width: 24px; height: 24px; color: var(--sa-text-3); }
.sa-scope .sa-state__title { margin: 0; font-size: var(--sa-text-md); line-height: var(--sa-lh-md); font-weight: var(--sa-weight-semibold); color: var(--sa-text); }
.sa-scope .sa-state__text { margin: 0; font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); }
.sa-scope .sa-state--error .sa-ico { color: var(--sa-red); }
.sa-scope .sa-skeleton { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--sa-surface-sunken) 0%, var(--sa-surface-subtle) 50%, var(--sa-surface-sunken) 100%); background-size: 200% 100%; animation: sa-shimmer 1.2s linear infinite; }
@keyframes sa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Tabs (v1.1 §25) ────────────────────────────────────────────────────── */
.sa-scope .sa-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sa-border); overflow-x: auto; }
.sa-scope .sa-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-bottom: 2px solid transparent; color: var(--sa-text-2); font-weight: var(--sa-weight-medium); white-space: nowrap; cursor: pointer; }
.sa-scope .sa-tab:hover { color: var(--sa-text); }
.sa-scope .sa-tab[aria-selected="true"] { color: var(--sa-blue-text); border-bottom-color: var(--sa-blue); font-weight: var(--sa-weight-semibold); }
.sa-scope .sa-tab:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: -2px; }
.sa-scope .sa-tab__count { font-size: var(--sa-text-xs); font-weight: var(--sa-weight-regular); color: var(--sa-text-3); font-variant-numeric: tabular-nums; }
.sa-scope .sa-tab[aria-selected="true"] .sa-tab__count { color: var(--sa-blue-text); }

/* ── Metric strip (v1.1 §25, DR-13) ─────────────────────────────────────── */
.sa-scope .sa-metrics { display: flex; gap: 2px; padding: 6px; background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-r-lg); overflow-x: auto; }
.sa-scope .sa-metric { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--sa-r-md); cursor: pointer; }
.sa-scope .sa-metric:hover { background: var(--sa-surface-hover); border-color: var(--sa-border); }
.sa-scope .sa-metric[aria-pressed="true"] { background: var(--sa-blue-subtle); border-color: var(--sa-blue); box-shadow: inset 0 0 0 1px var(--sa-blue); }
.sa-scope .sa-metric:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 2px; }
.sa-scope .sa-metric__num { font-size: var(--sa-text-2xl); line-height: var(--sa-lh-2xl); font-weight: var(--sa-weight-semibold); font-variant-numeric: tabular-nums; color: var(--sa-text); }
.sa-scope .sa-metric__label { font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); font-weight: var(--sa-weight-medium); color: var(--sa-text-2); }
.sa-scope .sa-metric[aria-pressed="true"] .sa-metric__label { color: var(--sa-blue-text); }
.sa-scope .sa-metric__att { font-size: var(--sa-text-xs); font-weight: var(--sa-weight-semibold); color: var(--sa-amber-hover); margin-left: 6px; }
.sa-scope .sa-metric__exc { font-size: var(--sa-text-xs); font-weight: var(--sa-weight-semibold); color: var(--sa-red-text); margin-left: 6px; }