* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; letter-spacing: 0; }
a { color: var(--brand); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 14px; background: var(--surface); color: var(--text-strong); border: 2px solid var(--focus); border-radius: var(--radius-md); }
.skip-link:focus { top: 12px; }
.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.button, button, input[type="submit"] {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-strong); text-decoration: none; font-weight: 650; cursor: pointer;
}
.button:hover, button:hover { background: var(--surface-subtle); border-color: #87959d; }
.button.primary, .button--primary, button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.button.primary:hover, .button--primary:hover, button.primary:hover { background: var(--brand-hover); }
.button.safe { background: var(--success-soft); border-color: #79bb95; color: #0c5733; }
.button.warning { background: var(--warning-soft); border-color: #d8a54e; color: #6e4100; }
.button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button.disabled, button:disabled { background: var(--surface-quiet); color: #75818b; cursor: not-allowed; }
.icon-button { width: 40px; min-width: 40px; padding: 0; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm); overflow: visible;
}
.card h2 { margin: 0 0 12px; color: var(--text-strong); font-size: 18px; line-height: 1.3; }
.card h3 { color: var(--text-strong); }
.card p { max-width: 82ch; }
.card.hero { background: var(--surface); border-left: 4px solid var(--brand); color: var(--text); box-shadow: var(--shadow-sm); }
.card.hero h2 { font-size: 21px; }
.card.hero p { color: var(--text-muted) !important; text-shadow: none !important; }
.section-eyebrow, .page-kicker { margin: 0 0 6px; color: var(--brand); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.status-chip, .chip, .badge {
  display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 750; color: var(--text-strong);
}
.status-chip--go, .chip.go, .badge.go, .badge.GO { background: var(--success-soft); border-color: #9bd3b0; color: #0c5733; }
.status-chip--warn, .chip.warn, .badge.warn, .badge.WARN { background: var(--warning-soft); border-color: #e4bd74; color: #6e4100; }
.status-chip--blocked, .chip.blocked, .badge.blocked, .badge.BLOCKED { background: var(--danger-soft); border-color: #e3a39e; color: #7d1f1a; }
.chip.blocked_by_owner_config, .badge.blocked_by_owner_config,
.chip.production_blocked, .badge.production_blocked { background: var(--danger-soft); border-color: #e3a39e; color: #7d1f1a; }
.chip.beta, .badge.beta, .chip.local_only, .badge.local_only,
.chip.working_local, .badge.working_local, .chip.working_dry_run, .badge.working_dry_run,
.chip.working_mock, .badge.working_mock { background: var(--info-soft); border-color: #a8c7eb; color: #194d88; }
.status-chip--beta { background: var(--info-soft); border-color: #a8c7eb; color: #194d88; }
.metric-grid, .status-strip, .card-grid, .summary-card-grid, .owner-action-grid, .blocker-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3);
}
.metric, .mini-card, .summary-card, .owner-action-card, .blocker-card, .visual-card {
  min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: inherit; text-decoration: none;
}
.metric { border-left: 4px solid var(--line-strong); }
.metric strong { display: block; margin-top: 8px; color: var(--text-strong); font-size: 24px; }
.metric span, .metric small { color: var(--text-muted); }
.metric.GO { border-left-color: var(--success); }
.metric.WARN { border-left-color: var(--warning); }
.metric.BLOCKED { border-left-color: var(--danger); }
.commands, .quick-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.table-shell { min-width: 0; }
.table-pagination {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding-top: var(--space-3); color: var(--text-muted); font-size: 13px;
}
.table-pagination .icon-button { min-height: 40px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--text-muted); background: var(--surface-subtle); font-weight: 750; }
tbody tr:hover { background: #f8fbfb; }
td { max-width: 300px; overflow-wrap: anywhere; }
td .button, td button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.cell-muted { color: var(--text-muted); }
.cell-text { display: inline-block; max-width: 42ch; }
details > summary { cursor: pointer; color: var(--brand); font-weight: 650; }
code, pre { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
code { padding: 2px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
label { display: grid; gap: 6px; color: var(--text-strong); font-weight: 650; }
input, select, textarea {
  min-height: 40px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong);
}
textarea { min-height: 104px; resize: vertical; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filterbar label { min-width: 180px; color: var(--text-muted); font-size: 12px; }
.empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--text-muted); }
.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: grid; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }