:root {
  --scope-bg: #fbfafc;
  --scope-surface: #ffffff;
  --scope-surface-soft: #f8fafc;
  --scope-border: #e2e8f0;
  --scope-border-soft: #f1f5f9;
  --scope-text: #020617;
  --scope-text-muted: #334155;
  --scope-text-soft: #334155;
  --scope-text-secondary: #334155;
  --scope-control-bg: #ffffff;
  --scope-control-border: #64748b;
  --scope-control-hover-bg: #f1f5f9;
  --scope-control-hover-border: #475569;
  --scope-control-disabled-bg: #f8fafc;
  --scope-control-disabled-border: #64748b;
  --scope-control-disabled-text: #475569;
  --scope-brand-purple: #6b35ff;
  --scope-brand-purple-control: #6b35ff;
  --scope-brand-purple-hover: #5425d9;
  --scope-brand-purple-text: #4c1d95;
  --scope-brand-purple-soft: rgba(107, 53, 255, 0.13);
  --scope-brand-ring: rgba(107, 53, 255, 0.18);
  --scope-purple: var(--scope-brand-purple-control);
  --scope-purple-dark: var(--scope-brand-purple-text);
  --scope-purple-soft: var(--scope-brand-purple-soft);
  --scope-green: #047857;
  --scope-green-bg: #d1fae5;
  --scope-green-border: #34d399;
  --scope-approved-solid: #047857;
  --scope-approved-solid-hover: #03694f;
  --scope-ignored-solid: #9f1239;
  --scope-ignored-solid-hover: #881337;
  --scope-rule-approved-row: #e2f7ed;
  --scope-rule-approved-row-hover: #dcf3e8;
  --scope-rule-ignored-row: #fff0f3;
  --scope-rule-ignored-row-hover: #fbe3e8;
  /* Solid destructive fill. Same value in both themes, like
     --scope-approved-solid, because it carries white text: white on #881337 is
     9.57:1. --scope-red cannot be used for this -- it is a foreground token that
     flips to a pale pink in dark mode, which put white text at 1.41:1. */
  --scope-danger-solid: #881337;
  --scope-danger-solid-hover: #6d0f2c;
  --scope-amber: #78350f;
  --scope-amber-bg: #fef3c7;
  --scope-amber-border: #facc15;
  --scope-red: #881337;
  --scope-red-bg: #ffe4e6;
  --scope-red-border: #fda4af;
  --scope-blue: #075985;
  --scope-blue-bg: #e0f2fe;
  --scope-blue-border: #7dd3fc;
  --scope-risk-low-fill: #10b981;
  --scope-risk-medium-fill: #f59e0b;
  --scope-risk-high-fill: #e11d48;
  --scope-risk-none-fill: #94a3b8;
  --scope-risk-track: #e2e8f0;
  --scope-noise-low-fill: #059669;
  --scope-noise-moderate-fill: #d97706;
  --scope-noise-high-fill: #f97316;
  --scope-noise-very-high-fill: #e11d48;
  --scope-noise-low-text: #047857;
  --scope-noise-moderate-text: #92400e;
  --scope-noise-high-text: #c2410c;
  --scope-noise-very-high-text: #be123c;
  --scope-recommendation-link: #5b21d9;
  --scope-recommendation-link-hover: var(--scope-brand-purple-text);
  --scope-radius-sm: 8px;
  --scope-radius-md: 10px;
  --scope-radius-lg: 12px;
  --scope-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --scope-data-module-border: #cbd5e1;
  --scope-data-module-header: #f1f5f9;
  --scope-data-module-row-border: #e2e8f0;
  /* Hover is transient and deliberately quiet; the leading accent makes it
     unmistakable without competing with the persistent selected surface. */
  --scope-data-module-row-hover: #f0edf8;
  --scope-data-module-row-hover-accent: #7c5cc4;
  --scope-data-module-row-selected: #ddd6fe;
  --scope-data-module-row-selected-hover: #cfc7fa;
  --scope-data-module-shadow: 0 2px 7px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.05);
  --scope-inset-surface: #f1f5f9;
  --scope-inset-border: #cbd5e1;
  --scope-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --scope-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --scope-page-title-font-size: clamp(2rem, 3.8vw, 2.5rem);
  --scope-page-title-line-height: 1.08;
}

html.scope-dark-mode {
  --scope-bg: #0f172a;
  --scope-surface: #111827;
  --scope-surface-soft: #1e293b;
  --scope-border: #334155;
  --scope-border-soft: #1f2937;
  /* Dark surfaces need luminous text, not a second layer of gray. Hierarchy
     comes from size/weight first; these remain comfortably distinct without
     making ordinary copy read like disabled UI. */
  --scope-text: #f8fafc;
  --scope-text-muted: #d8e5f4;
  --scope-text-soft: #f1f5f9;
  --scope-text-secondary: #e2e8f0;
  --scope-control-bg: #0f172a;
  --scope-control-border: #94a3b8;
  --scope-control-hover-bg: #27364a;
  --scope-control-hover-border: #cbd5e1;
  --scope-control-disabled-bg: rgba(30, 41, 59, 0.58);
  --scope-control-disabled-border: #64748b;
  --scope-control-disabled-text: #94a3b8;
  --scope-brand-purple: #6b35ff;
  --scope-brand-purple-control: #6b35ff;
  --scope-brand-purple-hover: #5b21d9;
  --scope-brand-purple-text: #c4b5fd;
  --scope-brand-purple-soft: rgba(139, 92, 246, 0.18);
  --scope-brand-ring: rgba(139, 92, 246, 0.28);
  --scope-purple: var(--scope-brand-purple-control);
  --scope-purple-dark: var(--scope-brand-purple-text);
  --scope-purple-soft: var(--scope-brand-purple-soft);
  --scope-green: #6ee7b7;
  --scope-green-bg: rgba(4, 120, 87, 0.22);
  --scope-green-border: rgba(52, 211, 153, 0.32);
  --scope-approved-solid: #047857;
  --scope-approved-solid-hover: #059669;
  --scope-ignored-solid: #9f1239;
  --scope-ignored-solid-hover: #be123c;
  --scope-rule-approved-row: #134e3f;
  --scope-rule-approved-row-hover: #166148;
  --scope-rule-ignored-row: rgba(190, 18, 60, 0.23);
  --scope-rule-ignored-row-hover: rgba(190, 18, 60, 0.3);
  /* Deliberately identical to the light theme: a solid fill under white text. */
  --scope-danger-solid: #881337;
  --scope-danger-solid-hover: #6d0f2c;
  --scope-amber: #fde68a;
  --scope-amber-bg: rgba(180, 83, 9, 0.22);
  --scope-amber-border: rgba(245, 158, 11, 0.34);
  --scope-red: #ff8da1;
  --scope-red-bg: rgba(190, 18, 60, 0.2);
  --scope-red-border: rgba(251, 113, 133, 0.32);
  --scope-blue: #7dd3fc;
  --scope-blue-bg: rgba(3, 105, 161, 0.24);
  --scope-blue-border: rgba(56, 189, 248, 0.3);
  --scope-risk-low-fill: #86efac;
  --scope-risk-medium-fill: #fde68a;
  --scope-risk-high-fill: #fda4af;
  --scope-risk-none-fill: #94a3b8;
  --scope-risk-track: #334155;
  --scope-noise-low-fill: #86efac;
  --scope-noise-moderate-fill: #f59e0b;
  --scope-noise-high-fill: #f97316;
  --scope-noise-very-high-fill: #fb7185;
  --scope-noise-low-text: #86efac;
  --scope-noise-moderate-text: #fbbf24;
  --scope-noise-high-text: #fdba74;
  --scope-noise-very-high-text: #fda4af;
  --scope-recommendation-link: #c4b5fd;
  --scope-recommendation-link-hover: #ddd6fe;
  --scope-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.26);
  --scope-data-module-border: #475569;
  --scope-data-module-header: #1e293b;
  --scope-data-module-row-border: #334155;
  --scope-data-module-row-hover: #29364a;
  --scope-data-module-row-hover-accent: #a78bfa;
  --scope-data-module-row-selected: #412780;
  --scope-data-module-row-selected-hover: #4d2f99;
  --scope-inset-surface: #1e293b;
  --scope-inset-border: #334155;
  --scope-data-module-shadow: 0 3px 9px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--scope-bg);
  color: var(--scope-text);
  font-family: var(--scope-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.scope-access-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.scope-access-shell {
  width: min(100%, 29rem);
}

.scope-access-card {
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
  padding: 1.35rem;
}

.scope-access-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--scope-border-soft);
}

.scope-access-brand-icon {
  flex: 0 0 auto;
  font-weight: 850;
}

.scope-access-copy {
  padding: 1.15rem 0 0.95rem;
}

.scope-access-copy h1 {
  margin: 0;
  color: var(--scope-text);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.scope-access-copy p {
  margin: 0.45rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.scope-access-form {
  display: grid;
  gap: 0.7rem;
}

.scope-access-form label {
  color: var(--scope-text);
  font-size: 0.82rem;
  font-weight: 760;
}

.scope-access-form input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.scope-access-form input:focus {
  outline: 0;
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

.svg-sprite {
  display: none;
}

.scope-visually-hidden,
.scope-visually-hidden-focusable:not(:focus):not(:focus-visible):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.scope-shell {
  --scope-sidebar-width: 18rem;
  --scope-sidebar-rail-width: 4.75rem;
  --scope-sidebar-x-padding: 1rem;
  --scope-sidebar-brand-y: 1.5rem;
  --scope-sidebar-brand-x: 1.25rem;
  --scope-sidebar-nav-row-height: 2.75rem;
  --scope-sidebar-nav-row-padding-x: 0.825rem;
  --scope-sidebar-icon-size: 1.32rem;
  --scope-sidebar-rail-button-width: 3.5rem;
  --scope-sidebar-rail-button-height: 2.75rem;
  --scope-sidebar-brand-icon-size: 2.25rem;
  --scope-sidebar-icon-anchor: calc(var(--scope-sidebar-rail-width) / 2);
  --scope-sidebar-rail-button-left: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
  --scope-sidebar-nav-row-padding-left: calc(var(--scope-sidebar-icon-anchor) - var(--scope-sidebar-rail-button-left) - (var(--scope-sidebar-icon-size) / 2));
  min-height: 100vh;
}

.scope-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--scope-sidebar-width);
  background: var(--scope-surface);
  border-right: 1px solid var(--scope-border);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow: hidden;
}

.scope-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: calc(var(--scope-sidebar-brand-icon-size) + (var(--scope-sidebar-brand-y) * 2));
  min-height: calc(var(--scope-sidebar-brand-icon-size) + (var(--scope-sidebar-brand-y) * 2));
  padding: var(--scope-sidebar-brand-y) var(--scope-sidebar-brand-x);
  border-bottom: 1px solid var(--scope-border-soft);
  color: inherit;
  text-decoration: none;
}

.scope-brand:hover,
.scope-brand:focus-visible {
  background: var(--scope-surface-soft);
}

.scope-brand:focus-visible {
  outline: 3px solid var(--scope-brand-ring);
  outline-offset: -3px;
}

.scope-brand-icon {
  width: var(--scope-sidebar-brand-icon-size);
  height: var(--scope-sidebar-brand-icon-size);
  border-radius: var(--scope-radius-md);
  display: grid;
  place-items: center;
  background: var(--scope-brand-purple);
  color: #fff;
  box-shadow: var(--scope-shadow-card);
}

.scope-brand-icon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.scope-brand-wordmark {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-slash {
  width: auto;
  height: 1.25rem;
  display: block;
  color: var(--scope-brand-purple);
}

.scope-brand-subtitle {
  margin-top: 0.125rem;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-nav {
  flex: 1;
  padding: 1rem var(--scope-sidebar-x-padding) 1rem var(--scope-sidebar-rail-button-left);
}

.scope-nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--scope-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--scope-sidebar-nav-row-height);
  border-radius: var(--scope-radius-md);
  padding: 0.7rem var(--scope-sidebar-nav-row-padding-x) 0.7rem var(--scope-sidebar-nav-row-padding-left);
  font-size: 0.9rem;
  transition: none;
  text-decoration: none;
}

.scope-nav-item[hidden],
.scope-cache-form[hidden],
.scope-local-workspace-tools[hidden] {
  display: none !important;
}

.scope-nav-item:not(.scope-nav-action):hover {
  background: var(--scope-surface-soft);
  color: var(--scope-text);
}

.scope-nav-item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-nav-item.is-active {
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.scope-nav-item.is-disabled,
.scope-nav-item.is-disabled:hover,
.scope-nav-item.is-disabled.is-active {
  background: transparent;
  color: var(--scope-text-muted);
  cursor: default;
  opacity: 0.62;
  box-shadow: none;
}

.scope-nav-action {
  margin-bottom: 0.75rem;
  background: var(--scope-brand-purple-control);
  color: #fff;
  box-shadow: var(--scope-shadow-card);
}

.scope-nav-action:hover {
  background: var(--scope-brand-purple-hover);
  color: #fff;
}

.scope-nav-action.is-active {
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-nav-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--scope-sidebar-icon-size);
  min-width: 0;
  font-weight: 650;
}

.scope-nav-label .icon {
  width: var(--scope-sidebar-icon-size);
  height: var(--scope-sidebar-icon-size);
}

.scope-nav-status {
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 850;
}

.scope-nav-alpha {
  border: 1px solid #ddd6fe;
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.scope-dev-only {
  display: none !important;
}

.scope-dev-mode .scope-nav-item.scope-dev-only {
  display: flex !important;
}

.scope-dev-mode .scope-nav-item.scope-dev-only[hidden] {
  display: none !important;
}

.scope-dev-mode .scope-density-toggle.scope-dev-only {
  display: flex !important;
}

.scope-dev-mode .scope-dev-page {
  display: block !important;
}

.scope-sidebar-footer {
  --scope-footer-control-font-size: 0.86rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--scope-border-soft);
}

.scope-cache-form,
.scope-lock-form {
  margin: 0 0 0.32rem;
}

.scope-sidebar-collapse {
  width: 100%;
  color: var(--scope-text);
  cursor: pointer;
  font: inherit;
}

.scope-lock-button {
  width: 100%;
  color: var(--scope-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.scope-theme-toggle {
  width: 100%;
  color: var(--scope-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.scope-density-toggle,
.scope-theme-toggle,
.scope-footer-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.35rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--scope-radius-md);
  padding: 0.48rem 0.75rem;
  margin-bottom: 0.32rem;
  transition: none;
}

.scope-density-toggle:hover,
.scope-theme-toggle:hover,
.scope-sidebar-collapse:hover,
.scope-cache-button:not(:disabled):hover,
.scope-lock-button:hover,
.scope-safety:hover {
  border-color: transparent;
  background: var(--scope-surface-soft);
}

.scope-theme-toggle:focus-visible,
.scope-sidebar-collapse:focus-visible,
.scope-cache-button:focus-visible,
.scope-lock-button:focus-visible,
.scope-safety:focus-visible {
  outline: 0;
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-footer-panel-title {
  display: flex;
  align-items: center;
  gap: 0.64rem;
  min-width: 0;
  color: var(--scope-text);
}

.scope-footer-panel-title .icon {
  width: var(--scope-sidebar-icon-size);
  height: var(--scope-sidebar-icon-size);
  color: var(--scope-brand-purple);
}

.scope-density-toggle strong,
.scope-theme-toggle strong,
.scope-footer-panel-title strong,
.scope-footer-panel-title > span,
.scope-safety-title {
  display: block;
  color: var(--scope-text);
  font-size: var(--scope-footer-control-font-size);
  line-height: 1.2;
}

.scope-appearance-meta {
  flex: 0 0 auto;
  color: var(--scope-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.scope-cache-button {
  width: 100%;
  min-height: 2.35rem;
  justify-content: flex-start;
  padding: 0.48rem 0.75rem;
  border-radius: var(--scope-radius-md);
  border-color: transparent;
  background: transparent;
}

.scope-cache-button:disabled .scope-cache-title {
  color: var(--scope-control-disabled-text);
}

.scope-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.18rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

.scope-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.scope-switch > span {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid var(--scope-border);
  background: #e2e8f0;
  transition: none;
}

.scope-switch > span::before {
  content: "";
  position: absolute;
  top: 0.17rem;
  left: 0.18rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: none;
}

.scope-switch input:checked + span {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-control);
}

.scope-switch input:checked + span::before {
  transform: translateX(0.95rem);
}

.scope-switch input:focus-visible + span {
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-dark-mode body .scope-nav-item {
  color: var(--scope-text-muted);
}

.scope-dark-mode body .scope-nav-action,
.scope-dark-mode body .scope-nav-action:hover,
.scope-dark-mode body .scope-nav-action.is-active,
.scope-dark-mode body .scope-brand-icon,
.scope-dark-mode body .scope-btn-primary,
.scope-dark-mode body .scope-btn-approved {
  color: #fff;
}

.scope-dark-mode body .scope-density-toggle strong,
.scope-dark-mode body .scope-theme-toggle strong,
.scope-dark-mode body .scope-safety-title,
.scope-dark-mode body .scope-btn,
.scope-dark-mode body .scope-search input,
.scope-dark-mode body .scope-import-form input,
.scope-dark-mode body .scope-import-form textarea,
.scope-dark-mode body .scope-run-picker select,
.scope-dark-mode body .scope-insight-sort-form select,
.scope-dark-mode body .scope-mono,
.scope-dark-mode body .url-sample,
.scope-dark-mode body .scope-metric-detail-strong,
.scope-dark-mode body .scope-flash,
.scope-dark-mode body .scope-alert {
  color: var(--scope-text);
}

.scope-dark-mode body .scope-search input,
.scope-dark-mode body .scope-import-form input,
.scope-dark-mode body .scope-import-form textarea,
.scope-dark-mode body .scope-run-picker select,
.scope-dark-mode body .scope-insight-sort-form select,
.scope-dark-mode body .scope-candidate-row,
.scope-dark-mode body .scope-url-list,
.scope-dark-mode body .pipeline-step,
.scope-dark-mode body .scope-upload-icon,
.scope-dark-mode body .scope-insight-row,
.scope-dark-mode body .scope-flash,
.scope-dark-mode body .scope-metric-button:hover {
  background: var(--scope-surface);
}

.scope-dark-mode body .scope-impact-row:hover,
.scope-dark-mode body .scope-impact-row:focus-visible {
  background: var(--scope-surface-soft);
}

.scope-dark-mode body .scope-switch > span {
  background: #334155;
}

.scope-dark-mode body .scope-impact-bar {
  background: var(--scope-risk-track);
}

.scope-dark-mode body .scope-search input,
.scope-dark-mode body .scope-import-form input,
.scope-dark-mode body .scope-import-form textarea,
.scope-dark-mode body .scope-run-picker select,
.scope-dark-mode body .scope-insight-sort-form select {
  background-color: var(--scope-control-bg);
  border-color: var(--scope-control-border);
  color: var(--scope-text);
}

.scope-dark-mode body .scope-btn:not(.scope-btn-primary):not(.scope-btn-approved):not(.scope-btn-danger-soft) {
  background: var(--scope-control-bg);
  border-color: var(--scope-control-border);
  color: var(--scope-text);
}

.scope-dark-mode body .scope-btn:not(.scope-btn-primary):not(.scope-btn-approved):not(.scope-btn-danger-soft):hover {
  background: #27364a;
  border-color: #cbd5e1;
  color: #f8fafc;
}

.scope-dark-mode body .scope-btn:focus-visible,
.scope-dark-mode body .scope-run-picker select:focus,
.scope-dark-mode body .scope-insight-sort-form select:focus,
.scope-dark-mode body .scope-search input:focus,
.scope-dark-mode body .scope-import-form input:focus,
.scope-dark-mode body .scope-import-form textarea:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-dark-mode body .scope-btn:disabled,
.scope-dark-mode body .scope-btn:disabled:hover {
  background: rgba(30, 41, 59, 0.58);
  border-color: #64748b;
  color: #94a3b8;
  opacity: 1;
}

.scope-dark-mode body .scope-run-picker select:hover,
.scope-dark-mode body .scope-insight-sort-form select:hover,
.scope-dark-mode body .scope-search input:hover,
.scope-dark-mode body .scope-import-form input:hover,
.scope-dark-mode body .scope-import-form textarea:hover {
  background-color: #111827;
  border-color: #cbd5e1;
}

.scope-dark-mode body .scope-switch > span::before {
  background: #e5e7eb;
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) td {
  background: var(--scope-rule-approved-row);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):hover td,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):focus-visible td {
  background: var(--scope-rule-approved-row-hover);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-selected td {
  background: var(--scope-data-module-row-selected);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved.is-selected td {
  background: var(--scope-data-module-row-selected);
  color: var(--scope-text);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row:not(.is-approved):not(.is-ignored):not(.is-selected) td {
  background: var(--scope-surface);
}

.scope-dark-mode body .scope-candidate-row.is-selected,
.scope-dark-mode body .scope-candidate-row.is-approved.is-selected {
  background: var(--scope-data-module-row-selected);
  box-shadow: inset 5px 0 0 var(--scope-brand-purple), inset 0 0 0 1px rgba(221, 214, 254, 0.48);
}

.scope-dark-mode body .scope-candidate-row.is-selected:hover {
  background: var(--scope-data-module-row-selected-hover);
}

.scope-dark-mode body .scope-nav-action:hover,
.scope-dark-mode body .scope-nav-action.is-active,
.scope-dark-mode body .scope-btn-primary:hover {
  background: var(--scope-brand-purple-hover);
  border-color: var(--scope-brand-purple-hover);
  color: #fff;
}

.scope-dark-mode body .scope-btn-approved {
  background: var(--scope-approved-solid);
  border-color: var(--scope-approved-solid);
  color: #fff;
}

.scope-dark-mode body .scope-btn-approved:hover,
.scope-dark-mode body .scope-btn-approved:focus-visible,
.scope-dark-mode body .scope-btn-approved:active {
  background: var(--scope-approved-solid-hover);
  border-color: var(--scope-approved-solid-hover);
  color: #fff;
}

.scope-dark-mode body .scope-btn-danger-soft:hover {
  background: var(--scope-danger-solid);
  border-color: var(--scope-danger-solid);
  color: #fff;
}

.scope-dark-mode body .scope-url-shape-token,
.scope-dark-mode body .scope-url-shape-variable {
  background: rgba(167, 139, 250, 0.18);
  color: var(--scope-brand-purple-text);
}

.scope-dark-mode body .scope-url-shape-required {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(110, 231, 183, 0.55);
  color: var(--scope-green);
}

.scope-dark-mode body .scope-url-shape-or {
  background: rgba(251, 113, 133, 0.16);
  border-color: rgba(255, 141, 161, 0.55);
  color: var(--scope-red);
}

.scope-dark-mode body .scope-candidate-stats b,
.scope-dark-mode body .scope-url-shape,
.scope-dark-mode body .scope-url-shape-inline,
.scope-dark-mode body .scope-rule-scope,
.scope-dark-mode body .scope-review-factor-group > ul,
.scope-dark-mode body .scope-review-factor-label,
.scope-dark-mode body .scope-regex-title-shape,
.scope-dark-mode body .scope-scoped-preview-note,
.scope-dark-mode body .scope-insight-priority p,
.scope-dark-mode body .scope-insight-mode-note,
.scope-dark-mode body .scope-insight-detail-section h3,
.scope-dark-mode body .scope-insight-list-row,
.scope-dark-mode body .scope-code-light {
  color: var(--scope-text-muted);
}

.scope-cache-button {
  width: 100%;
  min-height: 2.35rem;
  justify-content: flex-start;
  border-radius: var(--scope-radius-md);
  padding: 0.48rem 0.75rem;
  font-size: var(--scope-footer-control-font-size);
}

.scope-cache-title,
.scope-cache-button .scope-footer-panel-title strong {
  color: var(--scope-text);
}

.scope-cache-title .icon {
  color: var(--scope-brand-purple);
}

.scope-cache-button .scope-footer-panel-title strong {
  font-weight: 700;
}

.scope-cache-button:hover .scope-cache-title,
.scope-cache-button:hover .scope-cache-title .icon,
.scope-cache-button:hover .scope-footer-panel-title strong,
.scope-cache-button:focus-visible .scope-cache-title,
.scope-cache-button:focus-visible .scope-cache-title .icon,
.scope-cache-button:focus-visible .scope-footer-panel-title strong {
  color: var(--scope-red);
}

.scope-cache-button:active .scope-cache-title,
.scope-cache-button:active .scope-cache-title .icon,
.scope-cache-button:active .scope-footer-panel-title strong {
  color: #fff;
}

.scope-cache-button:disabled .scope-cache-title,
.scope-cache-button:disabled .scope-cache-title .icon,
.scope-cache-button:disabled .scope-footer-panel-title strong {
  color: var(--scope-control-disabled-text);
}

.scope-safety {
  margin-bottom: 0;
  width: 100%;
  color: var(--scope-text);
  text-decoration: none;
}

.scope-safety-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--scope-text);
  font-size: var(--scope-footer-control-font-size);
}

.scope-safety-title strong {
  font-weight: 700;
}

.scope-safety-title .icon {
  color: var(--scope-brand-purple);
}

.scope-privacy-page {
  max-width: 58rem;
  padding-block: 1.4rem calc(6rem + env(safe-area-inset-bottom));
}

.scope-privacy-lede {
  margin: 0 0 0.25rem;
  color: var(--scope-text);
  font-size: clamp(1.28rem, 2.2vw, 1.72rem);
  font-weight: 800;
  line-height: 1.18;
}

.scope-privacy-version {
  margin: 0;
  color: var(--scope-text-muted);
}

.scope-privacy-copy {
  display: grid;
  gap: 0.8rem;
  color: var(--scope-text-muted);
  font-size: 1rem;
  line-height: 1.68;
}

.scope-privacy-notice {
  display: grid;
  gap: 1rem;
  margin-top: 0.65rem;
}

.scope-privacy-notice section {
  display: grid;
  gap: 0.35rem;
}

.scope-privacy-copy p {
  margin: 0;
}

.scope-privacy-section-title {
  margin: 0.35rem 0 -0.35rem;
  color: var(--scope-text);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}

.scope-privacy-copy code {
  color: var(--scope-text);
  font-family: var(--scope-font-mono);
  font-size: 0.95em;
}

.scope-privacy-contact {
  color: var(--scope-text);
}

.scope-privacy-contact-link {
  color: var(--scope-brand-purple-text);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: var(--scope-brand-purple-control);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.17em;
}

.scope-privacy-contact-link:hover,
.scope-privacy-contact-link:focus-visible {
  color: var(--scope-brand-purple-hover);
  text-decoration-color: var(--scope-brand-purple-hover);
}

.scope-privacy-terms,
.scope-privacy-map {
  display: grid;
  gap: 0.95rem;
  margin-top: 0.65rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--scope-data-module-border);
}

.scope-privacy-terms .scope-privacy-section-title,
.scope-privacy-map .scope-privacy-section-title {
  margin-bottom: -0.2rem;
}

.scope-privacy-map-figure {
  display: grid;
  gap: 0.65rem;
  margin: 0.25rem 0 0;
}

.scope-privacy-map-frame {
  display: block;
  overflow: hidden;
  border: 2px solid var(--scope-control-border);
  border-radius: var(--scope-radius-lg);
  background: #f8f7fc;
  box-shadow: var(--scope-shadow-card);
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.scope-privacy-map-frame:hover {
  border-color: var(--scope-brand-purple-control);
  box-shadow: var(--scope-data-module-shadow);
  transform: translateY(-1px);
}

.scope-privacy-map-frame:focus-visible {
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring), var(--scope-data-module-shadow);
}

.scope-privacy-map-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.scope-privacy-map-description {
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
}

.scope-privacy-map-description summary {
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  color: var(--scope-text);
  font-weight: 800;
  line-height: 1.35;
}

.scope-privacy-map-description ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0 1.15rem 1rem 2.2rem;
  color: var(--scope-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.scope-privacy-map-description strong {
  color: var(--scope-text);
}

.scope-privacy-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.scope-privacy-map-actions .scope-btn {
  text-decoration: none;
}

.scope-consent-manager,
.scope-consent-banner {
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
}

.scope-consent-manager {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  justify-self: start;
  gap: 1rem;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.82rem 0.9rem;
}

.scope-consent-manager[hidden] {
  display: none;
}

.scope-consent-banner > div:first-child {
  display: grid;
  gap: 0.22rem;
}

.scope-consent-manager strong,
.scope-consent-banner strong {
  color: var(--scope-text);
  font-size: 0.95rem;
}

.scope-consent-banner p {
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.scope-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.scope-consent-manager .scope-consent-actions {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.scope-consent-choice {
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.4rem;
  padding: 0.46rem 0.95rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.5rem;
  background: var(--scope-surface);
  color: var(--scope-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.scope-consent-choice:hover {
  color: var(--scope-text);
  border-color: var(--scope-control-hover-border);
  background: var(--scope-control-hover-bg);
}

.scope-consent-choice[aria-pressed="true"] {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-consent-choice:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-consent-banner {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  width: min(42rem, calc(100vw - 2rem));
  padding: 1rem;
}

.scope-consent-banner[hidden] {
  display: none;
}

.scope-dark-mode body .scope-consent-manager,
.scope-dark-mode body .scope-consent-banner {
  border-color: rgba(148, 163, 184, 0.32);
  background: #182033;
}

@media (max-width: 720px) {
  .scope-privacy-map-actions .scope-btn {
    width: 100%;
    justify-content: center;
  }

  .scope-consent-manager {
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .scope-consent-manager strong {
    font-size: 0.84rem;
  }

  .scope-consent-choice {
    padding-inline: 0.65rem;
    font-size: 0.82rem;
  }

  .scope-consent-banner {
    grid-template-columns: 1fr;
  }
}

.scope-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.7svh, 2.15rem);
  width: min(100%, 72rem);
  min-height: min(46rem, calc(100svh - 5rem));
  margin-inline: auto;
  padding: clamp(0.75rem, 2svh, 1.6rem) 1rem clamp(1rem, 3svh, 2.5rem);
  container-type: inline-size;
  text-align: center;
}

.scope-not-found-code {
  color: var(--scope-text);
  font-size: clamp(10rem, min(34cqi, 28svh), 21rem);
  font-weight: 900;
  line-height: 0.9;
}

.scope-not-found-face {
  color: var(--scope-brand-purple);
  font-size: clamp(11rem, min(42cqi, 35svh), 24rem);
  font-weight: 700;
  line-height: 0.9;
  opacity: 0.9;
}

.scope-not-found h2 {
  margin: 0;
  color: var(--scope-text);
  font-size: clamp(2.8rem, min(8cqi, 7svh), 5rem);
  line-height: 1.05;
}

@supports not (font-size: 1cqi) {
  .scope-not-found-code {
    font-size: clamp(10rem, min(27vw, 28svh), 21rem);
  }

  .scope-not-found-face {
    font-size: clamp(11rem, min(33vw, 35svh), 24rem);
  }

  .scope-not-found h2 {
    font-size: clamp(2.8rem, min(6.2vw, 7svh), 5rem);
  }
}

.scope-main {
  padding-left: var(--scope-sidebar-width);
}

.scope-sidebar-collapsed body .scope-main {
  padding-left: var(--scope-sidebar-rail-width);
}

.scope-sidebar-collapsed body .scope-sidebar {
  width: var(--scope-sidebar-rail-width);
}

.scope-sidebar-collapsed.scope-sidebar-interacting body .scope-sidebar,
.scope-sidebar-collapsed body .scope-sidebar:hover,
.scope-sidebar-collapsed body .scope-sidebar:focus-within {
  width: var(--scope-sidebar-width);
  box-shadow: 0 1.25rem 2.8rem rgba(15, 23, 42, 0.22);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-brand-text,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-item > span:not(.scope-nav-label),
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-text,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-status,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-footer-panel-title > :not(.icon),
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-switch,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-appearance-meta {
  display: none;
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav {
  padding-left: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
  padding-right: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-sidebar-footer {
  padding-left: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
  padding-right: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-item,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-footer-panel,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-cache-button {
  width: var(--scope-sidebar-rail-button-width);
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  min-width: var(--scope-sidebar-rail-button-width);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-item {
  min-height: var(--scope-sidebar-rail-button-height);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav-label,
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-footer-panel-title {
  width: 100%;
  justify-content: center;
  gap: 0;
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-footer-panel-title .icon {
  width: var(--scope-sidebar-icon-size);
  height: var(--scope-sidebar-icon-size);
}

.scope-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 4rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--scope-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem;
}

.scope-topbar-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
}

.scope-topbar-actions,
.scope-actions,
.scope-badge-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.scope-search {
  position: relative;
  display: block;
}

.scope-search .icon {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  transform: translateY(-50%);
  color: var(--scope-text-soft);
}

.scope-search input {
  width: min(22rem, 32vw);
  height: 2.5rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text);
  outline: 0;
  padding: 0 0.85rem 0 2.45rem;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.scope-search input:hover,
.scope-import-form input:hover,
.scope-import-form textarea:hover,
.scope-run-picker select:hover,
.scope-insight-sort-form select:hover {
  background-color: var(--scope-control-hover-bg);
  border-color: var(--scope-control-hover-border);
}

.scope-search input:focus,
.scope-import-form input:focus,
.scope-import-form textarea:focus,
.scope-run-picker select:focus,
.scope-insight-sort-form select:focus {
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-page {
  padding: 2rem;
}

.scope-pdf-background-job {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 2rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface, #fff);
  color: var(--scope-text);
  box-shadow: 0 0.2rem 0.7rem rgba(15, 23, 42, 0.08);
}

.scope-pdf-background-job[hidden] {
  display: none;
}

.scope-pdf-background-job-copy {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
}

.scope-pdf-background-job-copy span {
  color: var(--scope-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .scope-pdf-background-job {
    margin: 0 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .scope-pdf-background-job-copy {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.2rem;
  }
}

.scope-flash {
  border-radius: var(--scope-radius-md);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--scope-border);
  background: #fff;
  color: var(--scope-text);
}

.scope-flash-success {
  background: var(--scope-green-bg);
  border-color: var(--scope-green-border);
  color: var(--scope-green);
}

.scope-flash-error {
  background: var(--scope-red-bg);
  border-color: var(--scope-red-border);
  color: var(--scope-red);
}

.scope-flash-warning {
  background: var(--scope-amber-bg);
  border-color: var(--scope-amber-border);
  color: var(--scope-amber);
}

.scope-alert {
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.scope-alert-warning {
  background: var(--scope-amber-bg);
  border-color: var(--scope-amber-border);
  color: var(--scope-amber);
}

.scope-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.scope-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
}

.scope-title {
  margin: 0.8rem 0 0;
  font-size: var(--scope-page-title-font-size);
  line-height: var(--scope-page-title-line-height);
  letter-spacing: 0;
  font-weight: 850;
}

.scope-description {
  max-width: 52rem;
  margin: 0.85rem 0 0;
  color: var(--scope-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* Compacter and bolder than before: 2.4rem tall, tighter padding, weight 800,
   smaller radius. Colour is untouched -- variants below supply their own fills
   and must keep winning on source order. */
.scope-btn {
  min-height: 2.4rem;
  border-radius: 0.5rem;
  border: 1px solid var(--scope-control-border);
  background: var(--scope-surface);
  color: var(--scope-text);
  padding: 0.46rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: none;
  white-space: nowrap;
}

.scope-btn:hover {
  background: var(--scope-control-hover-bg);
  border-color: var(--scope-control-hover-border);
  color: var(--scope-text);
}

.scope-btn:active {
  transform: translateY(1px);
}

.scope-btn:focus-visible {
  outline: 0;
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-btn-primary {
  background: var(--scope-brand-purple-control);
  border-color: var(--scope-brand-purple-control);
  color: #fff;
  box-shadow: var(--scope-shadow-card);
}

.scope-btn-primary:hover {
  background: var(--scope-brand-purple-hover);
  border-color: var(--scope-brand-purple-hover);
  color: #fff;
}

.scope-btn-primary:focus-visible,
.scope-btn-primary:active {
  color: #fff;
}

.scope-btn-danger-soft {
  background: var(--scope-red-bg);
  border-color: var(--scope-red-border);
  color: var(--scope-red);
}

.scope-btn-danger-soft.scope-cache-button {
  background: transparent;
  border-color: transparent;
  color: var(--scope-text);
}

.scope-btn-danger-soft.scope-cache-button:hover {
  background: var(--scope-surface-soft);
  border-color: transparent;
  color: var(--scope-red);
}

.scope-btn-danger-soft.scope-cache-button:focus-visible {
  background: var(--scope-surface-soft);
  border-color: var(--scope-brand-purple-control);
  color: var(--scope-red);
}

/* These two carry white text on a solid fill, so they take the solid token.
   Using --scope-red put white on #fecdd3 in dark mode -- 1.41:1, an invisible
   label on a destructive control. --scope-danger-solid holds in both themes. */
.scope-btn-danger-soft.scope-cache-button:active {
  background: var(--scope-danger-solid);
  border-color: var(--scope-danger-solid);
  color: #fff;
}

.scope-btn-danger-soft:hover {
  background: var(--scope-danger-solid);
  border-color: var(--scope-danger-solid);
  color: #fff;
}

.scope-btn.scope-cache-button {
  min-height: 2.35rem;
  justify-content: flex-start;
  padding: 0.48rem 0.75rem;
}

.scope-btn-small {
  min-height: 2rem;
  padding: 0.34rem 0.68rem;
  font-size: 0.84rem;
  font-weight: 800;
}

.scope-btn-approved {
  background: var(--scope-approved-solid);
  border-color: var(--scope-approved-solid);
  color: #fff;
  box-shadow: var(--scope-shadow-card);
  justify-content: center;
  min-width: 7rem;
}

.scope-btn-approved:hover,
.scope-btn-approved:focus-visible,
.scope-btn-approved:active {
  background: var(--scope-approved-solid-hover);
  border-color: var(--scope-approved-solid-hover);
  color: #fff;
}

.scope-btn-approved:hover .icon,
.scope-btn-approved:focus-visible .icon,
.scope-btn-approved:active .icon {
  color: #fff;
}

.scope-approve-state-icon[hidden] {
  display: none;
}

.scope-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.scope-metrics {
  margin-top: 1.6rem;
}

.scope-dashboard-module.scope-card-padded {
  padding: 1.35rem;
}

.scope-dashboard-module > .scope-section-heading:first-child {
  align-items: center;
  margin-bottom: 1rem;
}

.scope-dashboard-kpis {
  gap: 0.85rem;
}

.scope-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.scope-stack {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.scope-card {
  background: var(--scope-surface);
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  box-shadow: var(--scope-shadow-card);
}

.scope-card-padded {
  padding: 1.25rem;
}

.scope-card-header,
.scope-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.scope-card-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--scope-border-soft);
}

.scope-card-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.scope-approve-all-form,
.scope-ignore-pending-form {
  display: inline-flex;
}

.scope-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
}

.scope-heading-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.scope-heading-icon {
  margin-top: 0.08rem;
}

.scope-card-subtitle {
  margin: 0.3rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.scope-impact-preview-title {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.scope-impact-preview-title .scope-card-subtitle {
  margin: 0;
}

.scope-impact-preview-title .scope-card-title::after {
  content: ":";
}

.scope-dashboard-kpi {
  min-height: 7.2rem;
  border-radius: var(--scope-radius-lg);
}

.scope-metrics.scope-dashboard-kpis .scope-dashboard-kpi {
  min-height: 6.2rem;
}

.scope-composition-kpis {
  align-items: stretch;
}

.scope-scope-composition {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 9.5rem;
  overflow: hidden;
  padding: 1.18rem 1.4rem;
  border-color: var(--scope-border);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
}

.scope-composition-total {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.scope-composition-total span {
  color: var(--scope-brand-purple-text);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.scope-composition-total strong {
  color: var(--scope-text);
  font-size: clamp(3rem, 5.2vw, 4.7rem);
  line-height: 0.88;
  font-weight: 850;
}

.scope-composition-body {
  min-width: 0;
}

.scope-composition-main {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) minmax(28rem, 2fr);
  gap: 1.5rem;
  align-items: stretch;
}

.scope-composition-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-self: end;
  width: 100%;
  gap: 0;
  align-items: stretch;
  padding-left: 1.15rem;
  border: 0;
  border-left: 1px solid var(--scope-border);
  border-radius: 0;
  background: transparent;
}

.scope-composition-stat {
  display: grid;
  gap: 0.28rem;
  align-content: center;
  min-width: 0;
  padding: 0 1.15rem;
  text-align: left;
}

.scope-composition-stat:first-child {
  padding-left: 0;
}

.scope-composition-stat + .scope-composition-stat {
  border-left: 1px solid var(--scope-border);
}

.scope-composition-stat > span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 0.38rem;
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.scope-composition-stat strong {
  display: grid;
  gap: 0.16rem;
  color: var(--scope-text);
  font-size: clamp(1.95rem, 2.8vw, 2.85rem);
  font-weight: 850;
  line-height: 0.98;
  white-space: nowrap;
  text-align: left;
}

.scope-composition-stat.is-noise strong {
  color: var(--scope-text);
}

.scope-composition-stat.is-noise small {
  color: var(--scope-noise-very-high-text);
}

.scope-composition-stat small {
  font-size: 1.05rem;
  font-weight: 780;
  line-height: 1.25;
}

.scope-metric {
  padding: 1.05rem 1.15rem;
}

.scope-metric-button {
  width: 100%;
  text-align: left;
  transition: none;
}

.scope-metric-button:hover {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-purple-soft);
}

.scope-metric-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.scope-metric-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.scope-metric-label {
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.scope-metric-value {
  margin-top: 0.6rem;
  font-size: clamp(1.85rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: 0;
}

.scope-metric-detail {
  margin-top: 0.4rem;
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
}

.scope-metric-detail-strong {
  max-width: 14rem;
  color: var(--scope-text-muted);
  overflow-wrap: anywhere;
}

.scope-metric-icon {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: var(--scope-radius-md);
  border: 1px solid;
  flex: 0 0 2.55rem;
  padding: 0;
}

.scope-metric-icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.tone-purple,
.scope-badge-purple {
  background: var(--scope-purple-soft);
  border-color: rgba(107, 53, 255, 0.2);
  color: var(--scope-purple-dark);
}

.tone-green,
.scope-badge-green {
  background: var(--scope-green-bg);
  border-color: var(--scope-green-border);
  color: var(--scope-green);
}

.tone-amber,
.scope-badge-amber {
  background: var(--scope-amber-bg);
  border-color: var(--scope-amber-border);
  color: var(--scope-amber);
}

.tone-red,
.scope-badge-red {
  background: var(--scope-red-bg);
  border-color: var(--scope-red-border);
  color: var(--scope-red);
}

.tone-blue,
.scope-badge-blue {
  background: var(--scope-blue-bg);
  border-color: var(--scope-blue-border);
  color: var(--scope-blue);
}

.tone-purple-text {
  color: var(--scope-purple-dark);
}

.scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--scope-border);
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 750;
}

.scope-badge-slate {
  background: var(--scope-surface-soft);
  border-color: var(--scope-border);
  color: var(--scope-text-muted);
}

.scope-import {
  margin-top: 1.5rem;
}

body.scope-tab-add .scope-flash {
  max-width: 64rem;
}

body.scope-tab-add .scope-import {
  max-width: 46rem;
  margin-right: auto;
  margin-left: auto;
}

/* The card was centred while the page title stayed pinned to the left edge, so
   the two never lined up and the page read as one wide empty gutter with a form
   floating in it. Add Scope is a single task, so it gets a single column: the
   heading shares the card's width and centring and sits directly above it. */
body.scope-tab-add .scope-hero {
  max-width: 46rem;
  margin-right: auto;
  margin-left: auto;
}

/* Nothing sits beside the title on this tab -- the workspace selector moved to
   the sidebar -- so the hero does not need to reserve a second column. */
body.scope-tab-add .scope-hero > div:first-child {
  min-width: 0;
}

.scope-import-form {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(10rem, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
}

.scope-import-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.scope-import-form input,
.scope-import-form textarea,
.scope-run-picker select {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text);
  outline: 0;
  padding: 0.45rem 0.75rem;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.scope-import-form input,
.scope-import-form textarea {
  font-weight: 400;
}

.scope-import-form input::placeholder,
.scope-import-form textarea::placeholder {
  color: var(--scope-text-muted);
  font-weight: 400;
  opacity: 0.72;
}

.scope-import-form textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.45;
}

.scope-run-picker {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.scope-run-picker::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.58rem;
  height: 0.58rem;
  border-right: 2px solid var(--scope-text-muted);
  border-bottom: 2px solid var(--scope-text-muted);
  pointer-events: none;
  transform: translateY(-62%) rotate(45deg);
}

.scope-run-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-width: 0;
}

.scope-run-tools .scope-run-picker {
  flex: 0 0 auto;
}

.scope-run-picker select {
  width: auto;
  min-width: 12rem;
  max-width: min(36rem, 55vw);
  field-sizing: content;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 3.2rem;
}

.scope-dark-mode body .scope-run-picker select {
  background-image: none;
}

.scope-dark-mode body .scope-run-picker::after {
  border-color: var(--scope-text-muted);
}

.scope-run-picker-submit {
  min-height: 2.5rem;
  padding-inline: 0.85rem;
  white-space: nowrap;
}

.scope-run-picker-submit:focus,
.scope-run-picker-submit:focus-visible {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 5;
  box-shadow: 0 0 0 4px var(--scope-brand-ring), var(--scope-shadow-card);
}

.scope-empty {
  margin-top: 1.5rem;
}

.scope-empty-actions {
  margin-top: 1rem;
}

.scope-candidate-list {
  overflow: hidden;
}

.scope-recommended-rules-card,
.scope-approved-rules-card {
  overflow: hidden;
}

.scope-recommended-rules-card .scope-candidate-list,
.scope-approved-rules-card .scope-candidate-list {
  border-radius: 0 0 calc(var(--scope-radius-lg) - 1px) calc(var(--scope-radius-lg) - 1px);
}

.scope-recommended-rules-card .scope-candidate-row:last-of-type,
.scope-approved-rules-card .scope-candidate-row:last-of-type {
  border-bottom: 0;
}

.scope-recommended-rules-card .scope-candidate-row:last-of-type.is-selected,
.scope-approved-rules-card .scope-candidate-row:last-of-type.is-selected {
  border-bottom-right-radius: calc(var(--scope-radius-lg) - 1px);
  border-bottom-left-radius: calc(var(--scope-radius-lg) - 1px);
}

.scope-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.15rem;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--scope-data-module-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-data-module-shadow);
}

.scope-filter-banner div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0.3rem 0.55rem;
}

.scope-filter-banner span {
  color: var(--scope-brand-purple-text);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.scope-filter-banner strong {
  color: var(--scope-text);
  font-family: var(--scope-font-sans);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.scope-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.1rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid var(--scope-border);
  border-radius: 0.5rem;
  background: var(--scope-surface);
  color: var(--scope-brand-purple-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.scope-filter-clear:hover,
.scope-filter-clear:focus-visible {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-purple-soft);
  color: var(--scope-brand-purple-text);
}

.scope-candidate-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--scope-border-soft);
  background: #fff;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4.4rem, 5rem) minmax(4.4rem, 5rem) 1rem;
  grid-template-areas:
    "title matches reduction chevron"
    "match matches reduction chevron";
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  transition: background-color 150ms ease;
}

.scope-candidate-row:hover {
  background: var(--scope-data-module-row-hover);
}

.scope-candidate-row.is-selected {
  background: var(--scope-data-module-row-selected);
  box-shadow: inset 5px 0 0 var(--scope-brand-purple), inset 0 0 0 1px rgba(107, 53, 255, 0.52);
}

.scope-candidate-row.is-selected:hover {
  background: var(--scope-data-module-row-selected-hover);
}

.scope-candidate-row.is-approved {
  box-shadow: inset 3px 0 0 var(--scope-approved-solid);
}

.scope-candidate-row.is-approved.is-selected {
  box-shadow: inset 5px 0 0 var(--scope-brand-purple), inset 0 0 0 1px rgba(107, 53, 255, 0.52);
}

.scope-candidate-row.is-approved:not(.is-selected) {
  background: linear-gradient(90deg, rgba(4, 120, 87, 0.06), #fff 42%);
}

.scope-candidate-row.is-muted {
  opacity: 0.58;
}

.scope-candidate-main {
  display: contents;
}

.scope-candidate-titleline {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.scope-candidate-titleline strong {
  font-size: 0.97rem;
}

.scope-candidate-subtitle {
  grid-area: match;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-candidate-subtitle-label {
  color: var(--scope-text-soft);
  font-weight: 850;
  margin-right: 0.35rem;
}

.scope-candidate-stats {
  display: contents;
}

.scope-candidate-stat {
  min-width: 0;
  justify-self: stretch;
}

.scope-candidate-stat-matches {
  grid-area: matches;
}

.scope-candidate-stat-reduction {
  grid-area: reduction;
}

.scope-candidate-stats small {
  display: block;
  color: var(--scope-text-soft);
  font-size: 0.76rem;
}

.scope-candidate-stats b {
  display: block;
  margin-top: 0.18rem;
  color: var(--scope-text);
  font-size: 0.86rem;
}

.scope-chevron {
  grid-area: chevron;
  align-self: center;
  justify-self: end;
  color: var(--scope-purple-dark);
  font-size: 1.5rem;
}

.scope-list-empty {
  padding: 1.5rem;
  color: var(--scope-text-muted);
}

.scope-rules-table-card {
  overflow: hidden;
}

.scope-rules-table-card > .scope-card-header {
  align-items: center;
  padding: 0.58rem 0;
}

.scope-rules-control-row {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr) 5.4rem 5rem 5.95rem 6.6rem 2rem;
  justify-content: stretch;
  gap: 0;
}

.scope-rules-control-label {
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.scope-rules-table-card .scope-card-title {
  font-size: 1.125rem;
  font-weight: 750;
  grid-column: 2 / 3;
  letter-spacing: 0;
  line-height: 1.25;
}

.scope-rules-control-row .scope-rules-control-label {
  grid-column: 2 / 3;
}

.scope-rules-actions,
.scope-rules-table-card .scope-card-header-actions {
  display: grid;
  grid-column: 3 / 7;
  grid-template-columns: max-content 7.2rem 5.4rem;
  align-items: center;
  justify-content: end;
  gap: 0.625rem;
}

.scope-rules-actions .scope-badge,
.scope-rules-table-card .scope-card-header-actions .scope-badge {
  justify-self: stretch;
}

.scope-rules-actions .scope-btn-small,
.scope-rules-table-card .scope-card-header-actions .scope-btn-small,
.scope-rules-table-card .scope-card-header-actions .scope-approve-all-form,
.scope-rules-table-card .scope-card-header-actions .scope-ignore-pending-form {
  width: 100%;
  justify-self: stretch;
  white-space: nowrap;
}

.scope-rules-table-card .scope-badge {
  padding: 0.16rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.scope-rules-table-card .scope-card-header .scope-btn-small {
  min-height: 1.85rem;
  border-radius: 6px;
  padding: 0.28rem 0.66rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.scope-rules-table-card .scope-card-header .scope-btn-small .icon {
  width: 0.92rem;
  height: 0.92rem;
}

.scope-rules-table-shell {
  overflow: hidden;
  border-top: 1px solid var(--scope-border-soft);
}

.scope-rules-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.scope-rules-table th {
  padding: 0.5rem 0.28rem;
  border-bottom: 1px solid var(--scope-border);
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.scope-rules-table th:nth-child(3),
.scope-rules-table th:nth-child(4),
.scope-rules-table th:nth-child(5),
.scope-rules-table th:nth-child(7) {
  text-align: right;
}

.scope-rules-table th:nth-child(6) {
  text-align: left;
}

.scope-rules-table td {
  padding: 0.44rem 0.68rem;
  border-top: 1px solid var(--scope-border-soft);
  color: var(--scope-text);
  vertical-align: middle;
}

.scope-rules-table tbody tr:first-child td {
  border-top: 0;
}

.scope-rules-table .scope-candidate-row.has-approved-divider > td {
  border-top-width: 3px;
  border-top-color: var(--scope-green);
  box-shadow: inset 0 7px 10px -10px rgba(4, 120, 87, 0.7);
}

.scope-rules-table .scope-candidate-row.has-ignored-divider > td {
  border-top-width: 3px;
  border-top-color: var(--scope-ignored-solid);
  box-shadow: inset 0 7px 10px -10px rgba(159, 18, 57, 0.78);
}

.scope-rules-table tbody tr:last-child td {
  border-bottom: 0;
}

.scope-rules-table tbody tr:last-child > td:first-child {
  border-bottom-left-radius: calc(var(--scope-radius-lg) - 1px);
}

.scope-rules-table tbody tr:last-child > td:last-child {
  border-bottom-right-radius: calc(var(--scope-radius-lg) - 1px);
}

.scope-rules-table .scope-candidate-row {
  display: table-row;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  padding: 0;
  transition: none;
}

.scope-rules-table .scope-candidate-row:not(.is-approved):not(.is-ignored):not(.is-selected):hover td,
.scope-rules-table .scope-candidate-row:not(.is-approved):not(.is-ignored):not(.is-selected):focus-visible td {
  background: var(--scope-data-module-row-hover);
}

.scope-rules-table .scope-candidate-row:hover > td:first-child,
.scope-rules-table .scope-candidate-row:focus-visible > td:first-child {
  box-shadow: inset 4px 0 0 var(--scope-data-module-row-hover-accent);
}

.scope-rules-table .scope-candidate-row:focus-visible {
  outline: none;
}

.scope-rules-table .scope-candidate-row.is-selected {
  box-shadow: none;
}

.scope-rules-table .scope-candidate-row.is-selected td {
  background: var(--scope-data-module-row-selected);
}

.scope-rules-table .scope-candidate-row.is-selected > td:first-child,
.scope-rules-table .scope-candidate-row:focus-visible > td:first-child {
  border-left: 4px solid var(--scope-brand-purple);
}

.scope-rules-table .scope-candidate-row:focus-visible .scope-rules-select-indicator,
.scope-rules-table .scope-candidate-row.is-selected .scope-rules-select-indicator {
  background: transparent;
  opacity: 0;
}

.scope-rules-table .scope-candidate-row.is-approved.is-selected td {
  background: var(--scope-data-module-row-selected);
  color: var(--scope-text-secondary);
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) {
  background: transparent;
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) td {
  background: var(--scope-rule-approved-row);
  color: var(--scope-text);
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):hover td,
.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):focus-visible td {
  background: var(--scope-rule-approved-row-hover);
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-candidate-titleline strong,
.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-title-shape,
.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-cell-overlap,
.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-cell-metric strong,
.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-chevron {
  color: var(--scope-text);
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-title-shape {
  opacity: 0.85;
}

.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-candidate-titleline strong,
.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-rules-title-shape,
.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-rules-cell-overlap,
.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-rules-cell-metric strong,
.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-chevron {
  color: var(--scope-text-secondary);
}

.scope-rules-table .scope-candidate-row.is-approved.is-selected .scope-rules-title-shape {
  opacity: 0.85;
}

.scope-rules-table .scope-candidate-row.is-ignored:not(.is-selected) td {
  background: var(--scope-rule-ignored-row);
  color: var(--scope-text);
  opacity: 1;
}

.scope-rules-table .scope-candidate-row.is-ignored:not(.is-selected):hover td,
.scope-rules-table .scope-candidate-row.is-ignored:not(.is-selected):focus-visible td {
  background: var(--scope-rule-ignored-row-hover);
}

html:not(.scope-dark-mode) body .scope-rules-table .scope-candidate-row.is-selected .scope-rules-title-shape .scope-url-shape-required {
  color: #065f46;
}

.scope-rules-col-select {
  width: 0.5rem;
}

.scope-rules-col-rule {
  width: auto;
}

.scope-rules-col-overlap {
  width: 5.4rem;
}

.scope-rules-col-matches {
  width: 5rem;
}

.scope-rules-col-reduction {
  width: 5.95rem;
}

.scope-rules-col-status {
  width: 6.6rem;
}

.scope-rules-col-review {
  width: 2rem;
}

.scope-rules-select-head,
.scope-rules-cell-select {
  padding-right: 0;
  text-align: center;
}

.scope-rules-select-indicator {
  display: inline-block;
  width: 0.18rem;
  height: 1.8rem;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
}

.scope-rules-cell-rule {
  min-width: 0;
  text-align: left;
}

.scope-rules-rule-summary {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
}

.scope-rules-table .scope-candidate-titleline {
  display: inline-block;
  flex: 0 1 auto;
  max-width: 42%;
  min-width: 5.5rem;
  grid-area: auto;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  vertical-align: middle;
}

.scope-rules-table .scope-candidate-titleline strong {
  display: block;
  color: var(--scope-text);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-rules-title-shape {
  width: auto;
  min-width: 0;
  display: inline-block;
  flex: 1 1 auto;
  color: var(--scope-text-secondary);
  font-family: var(--scope-font-mono);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.scope-rules-title-shape .scope-url-shape-inline {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  word-break: normal;
  white-space: nowrap;
}

.scope-rules-title-shape .scope-url-shape-required,
.scope-rules-title-shape .scope-url-shape-variable,
.scope-rules-title-shape .scope-url-shape-or {
  display: inline;
  margin: 0;
  padding: 0.03rem 0.18rem;
  border-radius: 0.35rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.scope-rules-title-shape .scope-url-shape-required {
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: var(--scope-green);
}

.scope-rules-title-shape .scope-url-shape-variable {
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.scope-rules-title-shape .scope-url-shape-or {
  border: 1px solid rgba(219, 39, 119, 0.3);
  background: rgba(253, 242, 248, 0.95);
  color: #831843;
}

.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-inline {
  opacity: 0.85;
}

.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-required,
.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-variable,
.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-or {
  border: 0;
  background: transparent;
  padding: 0;
}

.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-variable,
.scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-or {
  color: var(--scope-text-muted);
}

.scope-rules-cell-overlap {
  color: var(--scope-text-muted);
  text-align: right;
  white-space: nowrap;
}

.scope-rules-overlap-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  border: 0;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.15;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

.scope-rules-overlap-action:hover,
.scope-rules-overlap-action:focus-visible {
  color: #b91c1c;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.scope-rules-overlap-action:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(220, 38, 38, 0.34);
  outline-offset: 2px;
}

.scope-rules-overlap-value .icon {
  flex: 0 0 auto;
  width: 1.02rem;
  height: 1.02rem;
  opacity: 0.9;
}

.scope-rules-overlap-value strong {
  font-size: inherit;
  font-weight: inherit;
}

.scope-rules-overlap-empty {
  color: var(--scope-text-soft);
  font-size: 0.86rem;
  font-weight: 600;
}

.scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-overlap-value {
  color: #b91c1c;
  opacity: 0.72;
}

.scope-dark-mode body .scope-rules-title-shape .scope-url-shape-required {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(110, 231, 183, 0.55);
  color: var(--scope-green);
}

.scope-dark-mode body .scope-rules-title-shape .scope-url-shape-variable {
  background: rgba(167, 139, 250, 0.18);
  color: var(--scope-brand-purple-text);
}

.scope-dark-mode body .scope-rules-title-shape .scope-url-shape-or {
  background: rgba(251, 113, 133, 0.16);
  border-color: rgba(255, 141, 161, 0.55);
  color: var(--scope-red);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-required,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-variable,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-or {
  border: 0;
  background: transparent;
}

/* Approval is a completed decision, not a disabled row. The light treatment
   retains its established quiet hierarchy; dark mode cannot compound gray
   text and nested opacity against an already-dark table. */
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-candidate-titleline strong,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-cell-overlap,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-cell-metric strong,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-chevron {
  color: var(--scope-text);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape,
.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-url-shape-inline {
  opacity: 1;
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-variable {
  color: var(--scope-brand-purple-text);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved .scope-rules-title-shape .scope-url-shape-or {
  color: var(--scope-red);
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected) .scope-rules-overlap-value {
  color: var(--scope-red);
  opacity: 1;
}

.scope-dark-mode body .scope-rules-table .scope-candidate-row.has-approved-divider > td {
  border-top-color: var(--scope-green);
}

.scope-dark-mode body .scope-rules-overlap-value {
  color: var(--scope-red);
}

.scope-dark-mode body .scope-rules-overlap-action:hover,
.scope-dark-mode body .scope-rules-overlap-action:focus-visible {
  color: #ffc0cb;
}

.scope-dark-mode body .scope-rules-overlap-empty {
  color: var(--scope-text-muted);
}

.scope-rules-cell-metric {
  text-align: right;
  white-space: nowrap;
}

.scope-rules-cell-metric strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.scope-rules-cell-status {
  text-align: left;
  white-space: nowrap;
  padding-left: 0.44rem;
  padding-right: 0.62rem;
}

.scope-rules-cell-status .scope-btn {
  min-height: 1.7rem;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 640;
}

.scope-row-approve-form .scope-btn {
  border-color: rgba(107, 53, 255, 0.28);
  background: rgba(107, 53, 255, 0.1);
  color: var(--scope-purple-dark);
}

.scope-row-approve-form .scope-btn:hover,
.scope-row-approve-form .scope-btn:focus-visible,
.scope-row-approve-form .scope-btn:active {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-row-approve-form .scope-btn .icon {
  display: none;
}

.scope-rules-cell-status .scope-btn .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.scope-row-approve-form,
.scope-row-unapprove-form,
.scope-row-unignore-form {
  display: inline-flex;
  margin: 0;
}

.scope-rule-status-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  gap: 0.26rem;
  border: 1px solid var(--scope-border);
  border-radius: 6px;
  padding: 0.2rem 0.52rem;
  font-size: 0.76rem;
  font-weight: 640;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}

.scope-rule-status-badge .icon {
  width: 0.82rem;
  height: 0.82rem;
}

.scope-rule-status-approved {
  border-color: var(--scope-approved-solid);
  background: var(--scope-approved-solid);
  color: #fff;
}

.scope-rule-status-approved-action {
  cursor: pointer;
  justify-content: center;
  min-width: 5.4rem;
  width: 5.75rem;
}

.scope-rule-status-approved-action:hover,
.scope-rule-status-approved-action:focus-visible,
.scope-rule-status-approved-action:active {
  border-color: var(--scope-approved-solid-hover);
  background: var(--scope-approved-solid-hover);
  color: #fff;
}

.scope-rule-status-approved-action:hover .icon,
.scope-rule-status-approved-action:focus-visible .icon,
.scope-rule-status-approved-action:active .icon {
  color: #fff;
}

.scope-dark-mode body .scope-row-approve-form .scope-btn {
  border-color: rgba(196, 181, 253, 0.28);
  background: rgba(107, 53, 255, 0.16);
  color: var(--scope-brand-purple-text);
}

.scope-dark-mode body .scope-row-approve-form .scope-btn:hover,
.scope-dark-mode body .scope-row-approve-form .scope-btn:focus-visible,
.scope-dark-mode body .scope-row-approve-form .scope-btn:active {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-dark-mode body .scope-rule-status-approved {
  border-color: var(--scope-approved-solid);
  background: var(--scope-approved-solid);
  color: #fff;
}

.scope-dark-mode body .scope-rule-status-approved-action:hover,
.scope-dark-mode body .scope-rule-status-approved-action:focus-visible,
.scope-dark-mode body .scope-rule-status-approved-action:active {
  border-color: var(--scope-approved-solid-hover);
  background: var(--scope-approved-solid-hover);
  color: #fff;
}

.scope-rule-status-ignored,
.scope-rule-status-muted {
  border-color: var(--scope-ignored-solid);
  color: #fff;
  background: var(--scope-ignored-solid);
}

.scope-rule-status-muted-action {
  cursor: pointer;
}

.scope-rule-status-muted-action:hover,
.scope-rule-status-muted-action:focus-visible,
.scope-rule-status-muted-action:active {
  border-color: var(--scope-ignored-solid-hover);
  background: var(--scope-ignored-solid-hover);
  color: #fff;
}

.scope-rules-table .scope-candidate-row.is-muted {
  opacity: 1;
}

.scope-rules-table .scope-candidate-row.is-muted:not(.is-selected) td:not(.scope-rules-cell-status) {
  opacity: 1;
}

.scope-rules-cell-review {
  text-align: right;
  padding-right: 0.72rem;
  padding-left: 1.3rem;
}

.scope-rules-cell-review .scope-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--scope-purple-dark);
  font-size: 1.08rem;
  line-height: 1;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.scope-scoped-preview-note {
  margin-top: 0.75rem;
  color: var(--scope-text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.scope-url-shape-row {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.scope-rule-scope-row > span {
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.scope-rule-scope-row {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.scope-url-shape {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  color: var(--scope-text);
  font-family: var(--scope-font-mono);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scope-url-shape-token {
  display: inline-block;
  margin: 0 0.08rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
  font-family: var(--scope-font-sans);
  font-size: 0.78rem;
  font-weight: 800;
}

.scope-url-shape-required {
  display: inline-block;
  margin: 0 0.03rem;
  padding: 0.04rem 0.24rem;
  border: 1px solid var(--scope-green-border);
  border-radius: 0.42rem;
  background: var(--scope-green-bg);
  color: var(--scope-green);
  font-weight: 800;
}

.scope-url-shape-or {
  display: inline-block;
  margin: 0 0.03rem;
  padding: 0.04rem 0.24rem;
  border: 1px solid rgba(219, 39, 119, 0.3);
  border-radius: 0.42rem;
  background: rgba(253, 242, 248, 0.95);
  color: #831843;
  font-weight: 850;
}

.scope-rule-scope {
  display: block;
  width: 100%;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.scope-rule-scope strong {
  color: var(--scope-text);
  font-weight: 850;
}

.scope-impact-metrics {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.scope-impact-metric-row[hidden] {
  display: none;
}

.scope-impact-metric-row + .scope-impact-metric-row {
  padding-top: 0.8rem;
  border-top: 1px solid var(--scope-border);
}

.scope-impact-metrics .scope-progress-row {
  margin-top: 0;
}

.scope-impact-metrics .scope-progress {
  margin: 0.55rem 0 0;
}

.scope-impact-metrics .scope-progress-row strong {
  text-align: right;
  font-size: 0.9rem;
}

.scope-impact-value {
  display: inline-flex;
  justify-content: flex-end;
  gap: 0.28rem;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: right;
}

.scope-impact-value strong {
  color: var(--scope-text);
  font-weight: 850;
}

.impact-grid div {
  background: var(--scope-surface-soft);
  border-radius: var(--scope-radius-md);
  padding: 0.85rem;
}

.impact-grid span,
.scope-progress-row span {
  color: var(--scope-text-muted);
  font-size: 0.8rem;
}

.impact-grid strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.45rem;
  line-height: 1.2;
}

.impact-removed {
  background: var(--scope-purple-soft) !important;
  color: var(--scope-purple-dark);
}

.impact-after {
  background: var(--scope-green-bg) !important;
  color: var(--scope-green);
}

.scope-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}

.scope-progress {
  height: 0.55rem;
  width: 100%;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  margin: 0.75rem 0 1.2rem;
}

.scope-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--scope-purple);
  width: 0;
  transition: width 200ms ease;
}

.scope-review-profile {
  margin-top: 1.25rem;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid var(--scope-border);
  border-radius: 0;
  background: transparent;
}

.scope-review-profile:focus {
  outline: 3px solid rgba(107, 53, 255, 0.28);
  outline-offset: 0.35rem;
}

.scope-review-profile.is-highlighted {
  outline: 3px solid rgba(107, 53, 255, 0.32);
  outline-offset: 0.35rem;
}

.scope-review-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.scope-review-profile-head h3 {
  margin: 0;
  color: var(--scope-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.scope-review-profile-summary {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
}

.scope-review-profile-summary > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0 0.75rem;
}

.scope-review-profile-summary > div:first-child {
  padding-left: 0;
}

.scope-review-profile-summary > div + div {
  border-left: 1px solid var(--scope-border);
}

.scope-review-profile-summary dt {
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.scope-review-profile-summary dd {
  margin: 0;
}

.scope-review-status-value {
  color: var(--scope-text);
  font-size: 0.95rem;
  font-weight: 820;
  line-height: 1.35;
  white-space: nowrap;
}

.scope-review-status-value.is-green {
  color: #047857;
}

.scope-review-status-value.is-amber {
  color: #92400e;
}

.scope-review-status-value.is-red {
  color: #be123c;
}

.scope-review-status-value.is-purple {
  color: var(--scope-brand-purple-text);
}

.scope-review-factor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.scope-review-factor-group {
  padding: 0;
  min-width: 0;
}

.scope-review-factor-group > ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--scope-text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.scope-review-factor {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.scope-review-factor-direction {
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
}

.scope-review-factor .scope-review-factor-labels {
  display: grid;
  gap: 0.2rem;
  list-style: disc;
  margin: 0;
  padding-left: 1.1rem;
}

.scope-review-factor-label {
  color: var(--scope-text);
  overflow-wrap: anywhere;
}

.scope-review-factor-risk-raise .scope-review-factor-direction {
  color: #e11d48;
}

.scope-review-factor-risk-mitigate .scope-review-factor-direction {
  color: #047857;
}

.scope-review-factor-confidence-support .scope-review-factor-direction {
  color: #2563eb;
}

.scope-review-factor-confidence-lower .scope-review-factor-direction {
  color: #e11d48;
}

.scope-review-overlap-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.78rem;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--scope-radius-md);
  background: rgba(254, 226, 226, 0.58);
  color: #be123c;
  padding: 0.52rem 0.62rem;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.scope-review-overlap-callout[hidden] {
  display: none;
}

.scope-review-overlap-callout.is-highlighted {
  border-color: rgba(220, 38, 38, 0.48);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.scope-review-overlap-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.06rem;
  color: #dc2626;
}

.scope-dark-mode body .scope-review-factor-risk-raise .scope-review-factor-direction,
.scope-dark-mode body .scope-review-factor-confidence-lower .scope-review-factor-direction {
  color: var(--scope-red);
}

.scope-dark-mode body .scope-review-factor-risk-mitigate .scope-review-factor-direction {
  color: var(--scope-green);
}

.scope-dark-mode body .scope-review-factor-confidence-support .scope-review-factor-direction {
  color: var(--scope-blue);
}

.scope-dark-mode body .scope-review-status-value.is-green {
  color: var(--scope-green);
}

.scope-dark-mode body .scope-review-status-value.is-amber {
  color: #fbbf24;
}

.scope-dark-mode body .scope-review-status-value.is-red {
  color: var(--scope-red);
}

.scope-dark-mode body .scope-review-overlap-callout {
  border-color: rgba(255, 141, 161, 0.48);
  background: rgba(127, 29, 29, 0.2);
  color: var(--scope-red);
}

.scope-dark-mode body .scope-review-overlap-icon {
  color: var(--scope-red);
}

.scope-code-blocks {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.scope-code-blocks label {
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.scope-code-light,
.scope-code-dark {
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  padding: 0.8rem;
  font-family: var(--scope-font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  max-width: 100%;
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.scope-code-light {
  background: var(--scope-surface-soft);
  color: var(--scope-text);
}

.scope-code-dark {
  background: #020617;
  border-color: #020617;
  color: #fff;
}

.scope-action-note {
  margin: 0.75rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.scope-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.scope-action-grid .scope-btn,
.scope-action-grid form {
  width: 100%;
}

.scope-ignore-selected-button.scope-btn-ignored {
  border-color: var(--scope-ignored-solid);
  background: var(--scope-ignored-solid);
  color: #fff;
  box-shadow: var(--scope-shadow-card);
}

.scope-ignore-selected-button.scope-btn-ignored:hover,
.scope-ignore-selected-button.scope-btn-ignored:focus-visible,
.scope-ignore-selected-button.scope-btn-ignored:active {
  border-color: var(--scope-ignored-solid-hover);
  background: var(--scope-ignored-solid-hover);
  color: #fff;
}

.scope-ignore-form {
  margin-top: 0.75rem;
}

.scope-link-button {
  border: 0;
  background: transparent;
  color: var(--scope-text-muted);
  padding: 0;
  font-size: 0.86rem;
  font-weight: 700;
}

.scope-link-button:hover {
  color: var(--scope-red);
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.sample-grid-single {
  grid-template-columns: 1fr;
}

.scope-url-list {
  background: var(--scope-surface);
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  overflow: hidden;
  box-shadow: var(--scope-shadow-card);
}

.scope-url-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--scope-surface-soft);
  border-bottom: 1px solid var(--scope-border-soft);
}

.scope-url-list-body {
  display: grid;
  overflow: visible;
}

.url-sample {
  padding: 0.56rem 0.85rem;
  border-bottom: 1px solid var(--scope-border-soft);
  color: var(--scope-text-muted);
  font-family: var(--scope-font-mono);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.url-sample-link {
  color: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.url-sample-link .url-sample-text {
  text-decoration: underline;
  text-decoration-color: var(--scope-recommendation-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.url-sample-link:hover .url-sample-text,
.url-sample-link:focus-visible .url-sample-text {
  color: var(--scope-recommendation-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--scope-recommendation-link-hover);
  text-underline-offset: 2px;
}

.url-sample-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--scope-brand-ring);
  outline-offset: 2px;
}

.url-sample-external-icon {
  width: 0.88rem;
  height: 0.88rem;
  margin-left: 0.24rem;
  color: var(--scope-recommendation-link);
  vertical-align: -0.1rem;
}

.pipeline-grid {
  display: grid;
  gap: 0.9rem;
}

.scope-url-list-body.top-path-grid {
  display: grid;
  gap: 0;
  margin-top: 0;
  max-height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.top-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.56rem 0.85rem;
  border-bottom: 1px solid var(--scope-border-soft);
}

.top-path-value {
  color: var(--scope-text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.top-path-count {
  color: var(--scope-text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.top-path-empty {
  padding: 0.56rem 0.85rem;
  color: var(--scope-text-muted);
  border-bottom: 1px solid var(--scope-border-soft);
}

.pipeline-step {
  border: 1px solid var(--scope-border);
  background: var(--scope-surface-soft);
  border-radius: var(--scope-radius-md);
  padding: 1rem;
}

.pipeline-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.pipeline-step {
  background: #fff;
  box-shadow: var(--scope-shadow-card);
}

.pipeline-step div {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--scope-radius-md);
  border: 1px solid rgba(107, 53, 255, 0.2);
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.pipeline-step h3 {
  margin: 0.9rem 0 0;
  font-size: 0.98rem;
}

.pipeline-step p {
  margin: 0.45rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.scope-table-wrap {
  overflow: hidden;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  margin-top: 1rem;
}

.scope-integrated-table-wrap {
  border-color: var(--scope-border-soft);
  border-radius: var(--scope-radius-md);
  box-shadow: none;
}

.scope-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.scope-table thead {
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-table th,
.scope-table td {
  padding: 0.58rem 0.78rem;
  border-bottom: 1px solid var(--scope-border-soft);
  vertical-align: top;
}

.scope-table th {
  text-align: left;
  font-weight: 750;
}

.scope-table tbody tr:hover > td {
  background: var(--scope-data-module-row-hover);
}

.scope-table tbody tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 var(--scope-data-module-row-hover-accent);
}

.scope-shape-table-wrap {
  margin-top: 0.55rem;
}

.scope-shape-table th,
.scope-shape-table td {
  padding: 0.5rem 0.7rem;
}

.scope-shape-table .scope-mono {
  overflow-wrap: anywhere;
}

.scope-shape-table .scope-badge {
  padding: 0.16rem 0.48rem;
  font-size: 0.68rem;
}

.scope-mono {
  font-family: var(--scope-font-mono);
  font-size: 0.78rem;
  color: var(--scope-text-muted);
  overflow-wrap: anywhere;
}

.align-right {
  text-align: right !important;
}

.scope-import-form-v01 {
  grid-template-columns: minmax(12rem, 0.8fr) minmax(14rem, 1fr) auto;
}

.scope-import-form-v01 .scope-paste-field {
  grid-column: 1 / -1;
}

.scope-import-form-v02 {
  --scope-import-control-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.82rem;
  align-items: stretch;
}

/* The dashed edge is the affordance that identifies the drop target, so 1.4.11
   applies to it. It was a hardcoded #c4b5fd with no dark override: 1.69:1 in
   light mode, passing in dark only because a pale colour on a dark surface is
   incidentally high-contrast. It needs a token that flips, and only
   --scope-brand-purple-text clears 3:1 in both (10.01:1 / 12.28:1) -- the vivid
   control purple fails dark at 2.91:1.

   Resting state is deliberately quiet. Previously the dropzone and Run analyzer
   were both brand purple, so two elements competed to be primary; the purple fill
   now appears on hover, drag and focus, where the rules below escalate it, and
   the solid primary purple stays unique to Run analyzer. */
.scope-import-form label.scope-upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  border: 1.5px dashed var(--scope-brand-purple-text);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface-soft);
  color: var(--scope-text);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.scope-upload-cluster {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.scope-import-form label.scope-upload-dropzone:hover,
.scope-import-form label.scope-upload-dropzone.is-dragging {
  border-color: var(--scope-purple);
  background: rgba(107, 53, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(107, 53, 255, 0.1);
}

.scope-import-form label.scope-upload-dropzone:focus-within {
  border-color: var(--scope-brand-purple-control);
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-import-form label.scope-upload-dropzone.has-file {
  border-style: solid;
  border-color: var(--scope-green-border);
  background: var(--scope-green-bg);
}

.scope-upload-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.scope-upload-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--scope-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ddd6fe;
  color: var(--scope-purple);
  box-shadow: var(--scope-shadow-card);
}

.scope-upload-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.scope-dark-mode body .scope-upload-icon {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(196, 181, 253, 0.55);
  color: var(--scope-brand-purple-text);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.12), 0 8px 20px rgba(2, 6, 23, 0.22);
}

.scope-upload-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  place-self: center;
  text-align: left;
}

.scope-upload-copy strong {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--scope-text);
}

.scope-upload-copy span {
  color: var(--scope-text-muted);
  font-size: 0.88rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.scope-import-limit-note {
  flex: 0 0 auto;
  margin: 0.06rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.scope-import-form-v02 .scope-website-label {
  width: min(100%, var(--scope-import-control-width));
}

.scope-paste-direct {
  width: min(100%, var(--scope-import-control-width));
}

.scope-paste-direct textarea {
  --scope-paste-default-height: calc((12px * 1.5 * 4) + 0.9rem + 2px);
  --scope-paste-max-height: min(18rem, 42vh);
  font-family: var(--scope-font-mono);
  font-size: 12px;
  font-weight: 400;
  min-height: var(--scope-paste-default-height);
  height: var(--scope-paste-default-height);
  line-height: 1.5;
  max-height: var(--scope-paste-max-height);
  overflow-y: auto;
  resize: vertical;
}

.scope-paste-direct textarea::placeholder {
  font-family: var(--scope-font-mono);
  font-size: 12px;
  font-weight: 400;
}

.scope-import-form-v02 > .scope-btn {
  width: min(100%, var(--scope-import-control-width));
}

.scope-import-loading {
  width: min(100%, var(--scope-import-control-width));
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--scope-border-strong);
  border-radius: var(--scope-radius-md);
  background: var(--scope-purple-soft);
  color: var(--scope-text);
  padding: 0.8rem 0.9rem;
}

.scope-import-loading[hidden] {
  display: none;
}

.scope-import-loading-copy {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
}

.scope-import-loading-copy strong {
  font-weight: 850;
  color: var(--scope-text);
}

.scope-import-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid rgba(107, 53, 255, 0.24);
  border-top-color: var(--scope-brand-purple);
  animation: scope-spin 800ms linear infinite;
}

.scope-import-progress {
  position: relative;
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(107, 53, 255, 0.16);
}

.scope-import-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 38%;
  border-radius: inherit;
  background: var(--scope-brand-purple);
  animation: scope-import-indeterminate 1.05s ease-in-out infinite;
}

.scope-import-form.is-submitting label.scope-upload-dropzone,
.scope-import-form.is-submitting .scope-paste-direct,
.scope-import-form.is-submitting .scope-website-label {
  cursor: wait;
}

.scope-import-form.is-submitting label.scope-upload-dropzone {
  pointer-events: none;
  border-style: solid;
  border-color: var(--scope-brand-purple);
  background: var(--scope-purple-soft);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-import-form.is-submitting .scope-paste-direct,
.scope-import-form.is-submitting .scope-website-label {
  pointer-events: none;
}

.scope-import-form.is-submitting .scope-upload-input {
  cursor: wait;
}

.scope-import-form.is-submitting input:not([type="hidden"]):not([type="file"]),
.scope-import-form.is-submitting textarea {
  background: var(--scope-surface-soft);
}

@keyframes scope-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scope-import-indeterminate {
  0% {
    left: -38%;
  }
  55% {
    left: 34%;
  }
  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scope-import-spinner,
  .scope-import-progress span {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.scope-overview-grid,
.scope-rules-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.scope-overview-shapes {
  margin-top: 1.5rem;
}

.scope-insight-metrics {
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.scope-insight-metrics .scope-metric {
  padding: 0.8rem 0.9rem;
}

.scope-insight-metrics .scope-metric-row {
  align-items: center;
}

.scope-insight-metrics .scope-metric-value {
  margin-top: 0.25rem;
  font-size: 1.45rem;
}

.scope-insight-metrics .scope-metric-icon {
  width: 2rem;
  height: 2rem;
}

.scope-insight-metrics .scope-metric-detail {
  margin-top: 0.2rem;
}

.scope-insight-briefs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.scope-insight-card {
  min-width: 0;
  border-radius: var(--scope-radius-md);
  padding: 0.65rem 0.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.scope-insight-card .scope-badge {
  align-self: flex-start;
  max-width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scope-insight-card:hover {
  border-color: rgba(107, 53, 255, 0.35);
  background: #fff;
}

.scope-insight-card:disabled {
  opacity: 0.58;
}

.scope-insight-card.is-selected {
  border-color: rgba(107, 53, 255, 0.45);
  box-shadow: inset 3px 0 0 var(--scope-purple), var(--scope-shadow-card);
}

.scope-insight-card strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

.scope-insight-card .scope-mono {
  min-width: 0;
  overflow-wrap: anywhere;
}

.scope-insight-card small {
  color: var(--scope-text-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.scope-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.42fr);
  gap: 0.9rem;
  margin-top: 0.9rem;
  align-items: start;
  min-height: 0;
}

.scope-insight-master {
  padding: 0.9rem;
}

.scope-insight-sort-form {
  display: flex;
  align-items: end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}

.scope-insight-sort-form label {
  display: grid;
  gap: 0.3rem;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.scope-insight-sort-form select {
  min-height: 2.15rem;
  min-width: 12rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.42rem 2rem 0.42rem 0.7rem;
  outline: 0;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.scope-insight-sort-order {
  min-height: 2.15rem;
}

.scope-insight-list-shell {
  display: grid;
  gap: 0;
  margin-top: 0.7rem;
  border: 1px solid var(--scope-border-soft);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  min-height: 0;
  overflow: hidden;
}

.scope-insight-list-header {
  display: grid;
  grid-template-columns: minmax(8rem, 1.35fr) minmax(8rem, 1.15fr) minmax(4.4rem, 0.45fr) minmax(4.4rem, 0.45fr) minmax(5.5rem, 0.6fr) minmax(5.5rem, 0.6fr) minmax(5.5rem, 0.55fr);
  gap: 0.35rem;
  border-bottom: 1px solid var(--scope-border-soft);
  background: var(--scope-surface-soft);
  padding: 0.48rem 0.55rem;
  color: var(--scope-text-muted);
  font-size: 0.66rem;
  font-weight: 850;
}

.scope-insight-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(8rem, 1.35fr) minmax(8rem, 1.15fr) minmax(4.4rem, 0.45fr) minmax(4.4rem, 0.45fr) minmax(5.5rem, 0.6fr) minmax(5.5rem, 0.6fr) minmax(5.5rem, 0.55fr);
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-bottom: 1px solid var(--scope-border-soft);
  border-radius: 0;
  background: #fff;
  padding: 0.48rem 0.55rem;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.scope-insight-row:last-child {
  border-bottom: 0;
}

.scope-insight-row:hover {
  background: var(--scope-data-module-row-hover);
}

.scope-insight-row:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(107, 53, 255, 0.36);
}

.scope-insight-row.is-selected {
  background: var(--scope-data-module-row-selected);
  box-shadow: inset 3px 0 0 var(--scope-purple);
}

.scope-insight-row-head {
  min-width: 0;
  display: contents;
}

.scope-insight-row-title {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.scope-insight-row-head > .scope-badge {
  grid-column: 7;
  grid-row: 1;
  justify-self: end;
}

.scope-insight-row-body {
  display: contents;
}

.scope-insight-row-body > :nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.scope-insight-row-body > :nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.scope-insight-row-body > :nth-child(3) {
  grid-column: 4;
  grid-row: 1;
}

.scope-insight-row-body > :nth-child(4) {
  grid-column: 5;
  grid-row: 1;
}

.scope-insight-row-body > :nth-child(5) {
  grid-column: 6;
  grid-row: 1;
}

.scope-insight-row-body > div,
.scope-insight-stat-button {
  min-width: 0;
  border: 0;
  background: transparent;
  border-radius: var(--scope-radius-md);
  padding: 0.32rem 0.38rem;
  text-align: left;
}

.scope-insight-row-body span,
.scope-insight-stat-button span {
  display: none;
  color: var(--scope-text-muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.scope-insight-row-body strong,
.scope-insight-stat-button strong {
  display: block;
  margin-top: 0.12rem;
  color: var(--scope-text);
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scope-insight-stat-button {
  cursor: pointer;
}

.scope-insight-stat-button:hover {
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.scope-insight-stat-button small {
  color: var(--scope-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.scope-insight-area {
  display: block;
}

.scope-insight-detail {
  position: sticky;
  top: 5.25rem;
  padding: 0.9rem;
}

.scope-insight-detail:focus {
  outline: 0;
  border-color: rgba(107, 53, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(107, 53, 255, 0.1);
}

.scope-insight-priority {
  border: 1px solid var(--scope-border);
  background: var(--scope-surface-soft);
  border-radius: var(--scope-radius-md);
  padding: 0.55rem;
  margin-top: 0.55rem;
}

.scope-insight-priority p {
  margin: 0.45rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scope-insight-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.55rem;
}

/* Was `border: 1px solid var(--scope-border)` on a hardcoded `#fff`. The border
   gave 1.23:1 light / 1.71:1 dark against the card, and the fill never flipped --
   in dark mode this was a white pill carrying pale grey text at 1.48:1. Both now
   use theme-aware control tokens. */
.scope-insight-mode-tabs button {
  min-height: 2rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.4rem;
}

.scope-insight-mode-tabs button:hover {
  border-color: rgba(107, 53, 255, 0.35);
  color: var(--scope-purple-dark);
}

.scope-insight-mode-tabs button.is-active {
  background: var(--scope-purple-soft);
  border-color: rgba(107, 53, 255, 0.35);
  color: var(--scope-purple-dark);
}

.scope-insight-mode-note {
  margin: 0.5rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scope-insight-breakdown,
.scope-insight-facts {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.scope-insight-breakdown {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scope-insight-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scope-insight-breakdown div,
.scope-insight-facts div {
  border: 1px solid var(--scope-border);
  background: var(--scope-surface-soft);
  border-radius: var(--scope-radius-md);
  padding: 0.48rem;
  min-width: 0;
}

.scope-insight-breakdown span,
.scope-insight-facts span {
  display: block;
  color: var(--scope-text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.scope-insight-breakdown strong,
.scope-insight-facts strong {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.scope-insight-composition {
  height: 0.72rem;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: var(--scope-risk-track);
  margin-top: 0.55rem;
}

.scope-insight-composition-fill {
  min-width: 0;
  height: 100%;
  transition: width 200ms ease;
}

.scope-insight-detail-section {
  margin-top: 0.72rem;
}

.scope-insight-detail-section h3 {
  margin: 0 0 0.35rem;
  color: var(--scope-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scope-insight-list,
.scope-insight-samples {
  display: grid;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  overflow: hidden;
}

.scope-insight-samples .url-sample {
  padding: 0.44rem 0.55rem;
  font-size: 0.7rem;
  line-height: 1.3;
}

.scope-insight-list-row {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.44rem 0.55rem;
  border-bottom: 1px solid var(--scope-border-soft);
  background: #fff;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-insight-list-row > span,
.scope-insight-list-row > b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.scope-insight-list-row:last-child,
.scope-insight-candidate-link:last-child,
.scope-insight-samples .url-sample:last-child {
  border-bottom: 0;
}

.scope-insight-list-row b {
  color: var(--scope-text);
  font-family: var(--scope-font-mono);
  font-size: 0.78rem;
}

.scope-insight-list-row.is-empty {
  display: block;
  color: var(--scope-text-muted);
}

.scope-insight-list-row.is-more {
  display: block;
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.scope-insight-candidate-link {
  display: grid;
  gap: 0.18rem;
  padding: 0.48rem 0.55rem;
  border-bottom: 1px solid var(--scope-border-soft);
  background: #fff;
}

.scope-insight-candidate-link:hover {
  background: var(--scope-surface-soft);
  color: var(--scope-purple-dark);
}

.scope-insight-candidate-link span {
  font-weight: 750;
  font-size: 0.78rem;
}

.scope-insight-candidate-link small {
  color: var(--scope-text-muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.scope-rules-secondary-single {
  grid-template-columns: 1fr;
}

.scope-impact-map {
  margin-top: 1.5rem;
}

.scope-impact-legend {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  flex-wrap: wrap;
  margin-top: 0.72rem;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.scope-impact-legend-concentration {
  color: var(--scope-text-muted);
}

.scope-impact-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-fill {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 999px;
  display: inline-block;
}

.scope-noise-low {
  background: var(--scope-noise-low-fill);
}

.scope-noise-moderate {
  background: var(--scope-noise-moderate-fill);
}

.scope-noise-high {
  background: var(--scope-noise-high-fill);
}

.scope-noise-very-high {
  background: var(--scope-noise-very-high-fill);
}

.scope-impact-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 0.95rem;
}

.scope-impact-column {
  min-width: 0;
}

.scope-impact-bars {
  display: grid;
  gap: 0;
  margin-top: 0.48rem;
  border-top: 1px solid var(--scope-data-module-border);
}

.scope-impact-bars > .scope-muted {
  padding: 0.6rem 0.1rem 0.1rem;
}

.scope-impact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--scope-border-soft);
  color: inherit;
  padding: 0.47rem 0.1rem;
  text-decoration: none;
}

.scope-impact-row:hover,
.scope-impact-row:focus-visible {
  background: var(--scope-surface-soft);
}

.scope-impact-row:focus-visible {
  outline: 3px solid var(--scope-brand-ring);
  outline-offset: 2px;
}

.scope-impact-label {
  min-width: 0;
}

.scope-impact-label .scope-mono {
  display: block;
  overflow-wrap: anywhere;
  color: var(--scope-text);
  font-size: 0.84rem;
}

.scope-impact-row-metric {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-width: 0;
}

.scope-impact-row-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.scope-impact-row-stats strong {
  color: var(--scope-text);
  font-weight: 850;
}

.scope-impact-bar {
  flex: 0 0 4.85rem;
  height: 0.52rem;
  width: 4.85rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--scope-risk-track);
}

.scope-impact-fill {
  display: block;
  height: 100%;
  min-width: 0.28rem;
  border-radius: 1px;
}

.scope-risk-low {
  background: var(--scope-risk-low-fill);
}

.scope-risk-medium {
  background: var(--scope-risk-medium-fill);
}

.scope-risk-high {
  background: var(--scope-risk-high-fill);
}

.scope-risk-none {
  background: var(--scope-risk-none-fill);
}

.scope-regex-toolbar,
.scope-regex-list {
  margin-top: 1.5rem;
}

.scope-rule-subtabs {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.18rem;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0 0.2rem;
  border: 0;
  border-bottom: 2px solid var(--scope-control-border);
  border-radius: 0;
  background: transparent;
  transform: translateX(calc(-1.2rem - 2px));
}

.scope-rule-view-hero {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1.5rem;
  min-height: 3.25rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

/* The linked rule views and Project/Scope context share one stable header row. */
.scope-rule-view-hero .scope-active-context {
  position: static;
  grid-column: 2;
  justify-self: end;
  width: fit-content;
  max-width: min(34rem, 100%);
  margin-left: 0;
}

.scope-rule-view-hero .scope-active-context[hidden] {
  display: inline-flex !important;
  min-height: calc(var(--scope-context-segment-min-height) + 0.2rem + 2px);
  visibility: hidden;
}

.scope-rule-view-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.scope-rule-workspace-stage,
.scope-rule-workspace-panel {
  min-width: 0;
}

.scope-rule-workspace-panel[hidden] {
  display: none !important;
}

.scope-rule-subtab {
  position: relative;
  z-index: 0;
  min-height: clamp(3.7rem, 5vw, 4.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-bottom: -2px;
  padding: calc(0.8rem - 2px) 1rem 0.58rem;
  border: 2px solid var(--scope-control-border);
  border-radius: 0.7rem 0.7rem 0 0;
  background: var(--scope-surface-soft);
  color: var(--scope-text-secondary);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

/* The active linked view doubles as the visible page title. Its label box,
   rather than the surrounding folder tab, shares the standard H1 geometry. */
.scope-rule-subtab-label {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.65rem, 2.7vw, 1.9rem);
  line-height: var(--scope-page-title-line-height);
  font-weight: 750;
}

.scope-rule-subtab:hover {
  z-index: 1;
  background: var(--scope-control-hover-bg);
  color: var(--scope-brand-purple-text);
}

.scope-rule-subtab[aria-current="page"] {
  z-index: 2;
  border-color: var(--scope-brand-purple-control);
  border-bottom-color: var(--scope-brand-purple);
  background: var(--scope-brand-purple);
  color: #fff;
  box-shadow: none;
}

.scope-rule-subtab:focus-visible {
  outline: 3px solid var(--scope-brand-purple-control);
  outline-offset: 3px;
}

.scope-regex-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.scope-regex-actions-left,
.scope-regex-actions-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.scope-regex-actions-left {
  min-width: 0;
}

.scope-regex-actions-right {
  margin-left: auto;
  justify-content: flex-end;
}

.scope-regex-actions-right .scope-btn,
.scope-regex-host-filter select {
  min-height: 2.5rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-control-bg);
  color: var(--scope-text);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.2;
}

.scope-regex-host-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.scope-regex-host-filter::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.58rem;
  height: 0.58rem;
  border-right: 2px solid var(--scope-text-muted);
  border-bottom: 2px solid var(--scope-text-muted);
  pointer-events: none;
  transform: translateY(-62%) rotate(45deg);
}

.scope-regex-host-filter select {
  width: min(18rem, 42vw);
  min-width: 11rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  outline: 0;
  padding: 0.45rem 3.2rem 0.45rem 0.85rem;
  font: inherit;
  transition: none;
}

.scope-regex-host-filter select:hover {
  background-color: var(--scope-control-hover-bg);
  border-color: var(--scope-control-hover-border);
}

.scope-regex-host-filter select:focus,
.scope-regex-host-filter select:focus-visible {
  border-color: var(--scope-brand-purple-control);
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-regex-host-filter select option {
  background: var(--scope-control-bg);
  color: var(--scope-text);
}

.scope-dark-mode body .scope-regex-host-filter select {
  background-color: var(--scope-control-bg);
  background-image: none;
  border-color: var(--scope-control-border);
  color: var(--scope-text);
}

.scope-dark-mode body .scope-regex-host-filter::after {
  border-color: var(--scope-text-muted);
}

.scope-regex-download-menu {
  position: relative;
  display: inline-flex;
}

.scope-regex-download-menu > summary {
  min-height: 2.5rem;
  gap: 0.48rem;
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 2.55rem 0.45rem 0.85rem;
  position: relative;
  transition: none;
}

.scope-regex-download-menu > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: 0.52rem;
  height: 0.52rem;
  border-right: 2px solid var(--scope-text-muted);
  border-bottom: 2px solid var(--scope-text-muted);
  pointer-events: none;
  transform: translateY(-62%) rotate(45deg);
}

.scope-regex-download-menu > summary .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.scope-regex-download-menu > summary:hover {
  background: var(--scope-control-hover-bg);
  border-color: var(--scope-control-hover-border);
}

.scope-regex-download-menu > summary:focus,
.scope-regex-download-menu > summary:focus-visible {
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
  outline: 0;
}

.scope-regex-download-menu > summary::-webkit-details-marker {
  display: none;
}

.scope-regex-download-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 20;
  min-width: 20rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface);
  padding: 0.32rem;
  box-shadow: var(--scope-shadow-card);
}

.scope-regex-download-panel form {
  margin: 0;
}

.scope-regex-download-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: var(--scope-radius-sm);
  background: transparent;
  color: var(--scope-text);
  padding: 0.5rem 0.62rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  transition: none;
}

.scope-regex-download-item > span {
  margin-left: auto;
  padding-left: 1rem;
  color: var(--scope-text-muted);
  font-variant-numeric: tabular-nums;
}

.scope-regex-download-separator {
  height: 1px;
  margin: 0.2rem 0.35rem;
  background: var(--scope-border);
}

.scope-regex-download-note {
  margin: 0;
  padding: 0.45rem 0.62rem;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scope-regex-export-status {
  min-height: 0;
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
}

.scope-regex-export-status:empty {
  display: none;
}

.scope-regex-export-status.is-error {
  color: var(--scope-red);
}

.scope-regex-download-item:hover,
.scope-regex-download-item:focus-visible {
  background: var(--scope-control-hover-bg);
  color: var(--scope-purple-dark);
  outline: 0;
}

.scope-regex-download-item:disabled {
  cursor: not-allowed;
  color: var(--scope-text-muted);
  opacity: 0.55;
}

.scope-regex-download-item:disabled:hover,
.scope-regex-download-item:disabled:focus-visible {
  background: transparent;
  color: var(--scope-text-muted);
}

.scope-dark-mode body .scope-regex-download-panel {
  border-color: var(--scope-control-border);
  background: var(--scope-surface);
}

.scope-regex-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.75rem, 1fr));
  margin: 0;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
  overflow: hidden;
}

.scope-regex-summary > div {
  min-width: 0;
  padding: 0.9rem 1rem;
}

.scope-regex-summary > div + div {
  border-left: 1px solid var(--scope-border);
}

.scope-regex-summary dt {
  color: var(--scope-purple-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.25;
}

.scope-regex-summary dd {
  margin: 0.45rem 0 0;
  color: var(--scope-text);
}

.scope-regex-summary strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  line-height: 1.1;
  white-space: nowrap;
}

.scope-regex-summary strong span {
  color: var(--scope-text-secondary);
  font-size: 0.9rem;
  font-weight: 650;
}

.scope-regex-summary small {
  display: block;
  margin-top: 0.3rem;
  color: var(--scope-text-secondary);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
}

.scope-regex-summary-line {
  display: flex;
  align-items: center;
  gap: 0.65rem 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  color: var(--scope-text-secondary);
  font-size: 0.9rem;
}

.scope-regex-summary-line span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  padding: 0.55rem 0.7rem;
}

.scope-regex-summary-line b {
  color: var(--scope-text);
  font-weight: 800;
}

.scope-btn:disabled {
  cursor: not-allowed;
  background: var(--scope-control-disabled-bg);
  border-color: var(--scope-control-disabled-border);
  color: var(--scope-control-disabled-text);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.scope-dark-mode body .scope-btn:disabled,
.scope-dark-mode body .scope-btn:disabled:hover {
  background: rgba(30, 41, 59, 0.58);
  border-color: #64748b;
  color: #94a3b8;
  opacity: 1;
}

.scope-merged-output {
  margin-top: 1rem;
  border-color: var(--scope-border);
  border-radius: var(--scope-radius-lg);
  box-shadow: var(--scope-shadow-card);
}

.scope-merged-output[hidden] {
  display: none !important;
  margin-top: 0;
}

.scope-merged-output code {
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}

.scope-regex-list {
  overflow: hidden;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
}

.scope-regex-list-empty {
  padding: 0.95rem 1rem;
}

.scope-regex-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.scope-rule-view-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.4rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-shadow-card);
  color: var(--scope-text-muted);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.scope-rules-grid > .scope-rule-view-empty {
  grid-column: 1 / -1;
}

.scope-rule-view-empty .scope-regex-empty-state {
  min-height: 0;
}

/* Local-first analysis data lives in IndexedDB, so the server cannot render an
   authoritative Rule Candidates/Regex Export body. Keep the shared header fixed
   and paint a quiet, correctly layered loading shell instead of flashing an
   incorrect empty state before browser hydration completes. */
.scope-rule-view-loading {
  display: flex;
  align-items: center;
  min-height: 5.4rem;
  padding: 0.95rem 1rem;
  overflow: hidden;
  border: 1px solid var(--scope-data-module-border);
  border-radius: var(--scope-radius-lg);
  background: var(--scope-surface);
  box-shadow: var(--scope-data-module-shadow);
}

.scope-rules-grid > .scope-rule-view-loading {
  grid-column: 1 / -1;
}

.scope-rule-view-loading-lines {
  display: grid;
  width: min(32rem, 72%);
  gap: 0.55rem;
}

.scope-rule-view-loading-lines i {
  display: block;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--scope-data-module-row-border);
}

.scope-rule-view-loading-lines i:first-child {
  width: 42%;
  background: var(--scope-data-module-border);
}

.scope-rule-view-loading-lines i:last-child {
  width: 68%;
}

.scope-rule-view-loading-secondary {
  min-height: 6.5rem;
}

.scope-regex-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.scope-regex-table th {
  padding: 0.48rem 0.58rem;
  border-bottom: 1px solid var(--scope-border);
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.scope-regex-table th:nth-child(1) {
  text-align: center;
}

.scope-regex-table th:nth-child(3),
.scope-regex-table th:nth-child(4),
.scope-regex-table th:nth-child(6) {
  text-align: right;
}

.scope-regex-table td {
  padding: 0.5rem 0.58rem;
  border-top: 1px solid var(--scope-border-soft);
  color: var(--scope-text);
  vertical-align: middle;
}

.scope-regex-table tbody tr:first-child td {
  border-top: 0;
}

.scope-regex-table tbody tr:hover > td {
  background: var(--scope-data-module-row-hover);
}

.scope-regex-table tbody tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 var(--scope-data-module-row-hover-accent);
}

.scope-regex-col-select {
  width: 2.45rem;
}

.scope-regex-col-rule {
  width: 31%;
}

.scope-regex-col-matches {
  width: 6.2rem;
}

.scope-regex-col-reduction {
  width: 6.2rem;
}

.scope-regex-col-output {
  width: 36%;
}

.scope-regex-col-review {
  width: 5.6rem;
}

.scope-regex-select-head,
.scope-regex-cell-select {
  text-align: center;
}

.scope-regex-cell-select input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--scope-purple);
}

.scope-regex-rule-summary {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.scope-regex-cell-metric {
  text-align: right;
  white-space: nowrap;
}

.scope-regex-cell-output {
  min-width: 0;
}

.scope-regex-cell-review {
  text-align: right;
}

.scope-regex-list-compact {
  margin-top: 1rem;
}

.scope-regex-line-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  padding: 0.85rem;
}

.scope-regex-line-card strong,
.scope-regex-line-card small {
  display: block;
}

.scope-regex-line-card small {
  margin-top: 0.25rem;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-regex-line-card > code {
  grid-column: 1;
  min-width: 0;
  border-radius: var(--scope-radius-sm);
  background: #020617;
  color: #fff;
  padding: 0.65rem;
  font-family: var(--scope-font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scope-regex-line-card > .scope-btn {
  grid-column: 2;
}

.scope-regex-row-main {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.scope-regex-title-line {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.scope-regex-title-line strong {
  display: inline;
  flex: 0 0 auto;
}

.scope-regex-title-shape {
  display: inline-block;
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--scope-text-secondary);
  font-family: var(--scope-font-mono);
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.scope-regex-title-shape .scope-url-shape-inline {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.scope-regex-title-shape .scope-url-shape-required,
.scope-regex-title-shape .scope-url-shape-token,
.scope-regex-title-shape .scope-url-shape-variable,
.scope-regex-title-shape .scope-url-shape-or {
  display: inline;
  margin: 0;
  padding: 0.015rem 0.12rem;
  border-radius: 0.28rem;
  font-size: inherit;
  font-weight: 650;
  line-height: inherit;
}

.scope-regex-title-shape .scope-url-shape-required {
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: var(--scope-green);
}

.scope-regex-title-shape .scope-url-shape-token,
.scope-regex-title-shape .scope-url-shape-variable {
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
}

.scope-regex-title-shape .scope-url-shape-or {
  border: 1px solid rgba(219, 39, 119, 0.3);
  background: rgba(253, 242, 248, 0.95);
  color: #831843;
}

.scope-regex-note {
  color: var(--scope-amber);
  font-weight: 750;
}

.scope-regex-rule-body {
  display: grid;
  gap: 0.55rem;
}

.scope-regex-artifact {
  min-width: 0;
  display: grid;
  gap: 0;
}

.scope-url-shape-inline {
  display: block;
  width: 100%;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  padding: 0.62rem 0.75rem;
  color: var(--scope-text);
  font-family: var(--scope-font-mono);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scope-url-shape-required {
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: var(--scope-green);
  border-radius: 0.35rem;
  padding: 0.03rem 0.18rem;
  font-weight: 850;
}

.scope-url-shape-variable {
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
  border-radius: 0.35rem;
  padding: 0.03rem 0.18rem;
  font-weight: 850;
}

.scope-url-shape-or {
  border: 1px solid rgba(219, 39, 119, 0.3);
  background: rgba(253, 242, 248, 0.95);
  color: #831843;
  border-radius: 0.35rem;
  padding: 0.03rem 0.18rem;
  font-weight: 850;
}

.scope-regex-review-link {
  flex: 0 0 auto;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-sm);
  background: var(--scope-surface);
  color: var(--scope-purple-dark);
  padding: 0.22rem 0.46rem;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  transition: none;
}

.scope-regex-review-link:hover,
.scope-regex-review-link:focus {
  border-color: rgba(107, 53, 255, 0.35);
  background: var(--scope-purple-soft);
  color: var(--scope-purple-dark);
  outline: 0;
}

.scope-regex-impact-count,
.scope-regex-impact-pct {
  color: var(--scope-text);
  font-size: 0.84rem;
  font-weight: 790;
  line-height: 1.15;
}

.scope-regex-overlap-note {
  display: block;
  color: #b45309;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.25;
}

.scope-dark-mode body .scope-regex-overlap-note {
  color: #fbbf24;
}

.scope-regex-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.35fr);
  gap: 0.75rem;
}

.scope-regex-context span {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  padding: 0.75rem;
  color: var(--scope-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.scope-regex-context b {
  color: var(--scope-text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.scope-regex-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--scope-radius-md);
  background: #020617;
}

.scope-rule-output-regex {
  margin-top: 0.1rem;
}

.scope-regex-line code {
  display: block;
  min-width: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0.58rem 0.68rem;
  font-family: var(--scope-font-mono);
  font-size: 0.82rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.scope-regex-line-compact {
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: var(--scope-radius-sm);
}

.scope-regex-line.scope-merged-output {
  border-color: var(--scope-border);
  border-radius: var(--scope-radius-lg);
  box-shadow: var(--scope-shadow-card);
}

.scope-regex-line-expandable {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.scope-regex-line-compact code {
  padding: 0.42rem 0.54rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.75rem;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-regex-line-expandable.is-expanded {
  align-items: stretch;
}

.scope-regex-line-expandable.is-expanded code {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.scope-regex-line-compact .scope-regex-copy-button {
  width: 2.05rem;
}

.scope-regex-line-compact .scope-regex-expand-button {
  width: 1.9rem;
}

.scope-regex-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.38rem;
  min-height: 100%;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: none;
}

.scope-regex-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.78);
  transition: none;
}

.scope-regex-copy-button .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.scope-regex-expand-button .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.scope-regex-copy-button .scope-copy-success-icon {
  display: none;
}

.scope-regex-expand-button .scope-collapse-icon {
  display: none;
}

.scope-regex-copy-button:hover,
.scope-regex-copy-button:focus,
.scope-regex-expand-button:hover,
.scope-regex-expand-button:focus {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  outline: 0;
}

.scope-regex-copy-button.is-copied {
  background: rgba(16, 185, 129, 0.22);
  color: #bbf7d0;
}

.scope-dark-mode body .scope-regex-copy-button.is-copied {
  color: var(--scope-green);
}

.scope-regex-copy-button.is-copied .scope-copy-icon {
  display: none;
}

.scope-regex-copy-button.is-copied .scope-copy-success-icon {
  display: block;
}

.scope-regex-line-expandable.is-expanded .scope-regex-expand-button {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.scope-regex-line-expandable.is-expanded .scope-expand-icon {
  display: none;
}

.scope-regex-line-expandable.is-expanded .scope-collapse-icon {
  display: block;
}

.scope-regex-copy-button:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.4);
}

.scope-regex-copy-button:focus-visible,
.scope-regex-expand-button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.78);
}

.scope-rules-grid {
  display: grid;
  grid-template-columns: minmax(31rem, 1.08fr) minmax(25rem, 0.92fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

.scope-overview-table td,
.scope-overview-table th {
  vertical-align: middle;
}

.scope-overview-table th,
.scope-overview-table td {
  padding: 0.32rem 0.6rem;
}

.scope-overview-table tbody tr {
  height: var(--scope-overview-table-row-height);
}

.scope-overview-table-wrap {
  --scope-overview-table-header-height: 2.35rem;
  --scope-overview-table-row-height: 2.38rem;
  --scope-overview-table-footer-height: 2.58rem;
  --scope-overview-table-visible-body-height: calc(var(--scope-overview-table-header-height) + (var(--scope-overview-table-row-height) * 12) + var(--scope-overview-table-footer-height));
  border-color: var(--scope-border-soft);
  display: flex;
  flex-direction: column;
  margin-top: 0.65rem;
}

.scope-overview-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--scope-overview-table-visible-body-height);
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: auto;
}

.scope-overview-table-wrap.is-scrollable .scope-overview-table-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.scope-overview-table-wrap.is-expanded .scope-overview-table-scroll {
  max-height: min(calc(var(--scope-overview-table-header-height) + (var(--scope-overview-table-row-height) * 18) + var(--scope-overview-table-footer-height)), 74vh);
}

.scope-overview-table {
  width: 100%;
  table-layout: fixed;
}

.scope-overview-table th,
.scope-overview-table td {
  overflow-wrap: normal;
}

.scope-overview-table th:nth-child(1),
.scope-overview-table td:nth-child(1) {
  width: 42%;
}

.scope-overview-table th:nth-child(2),
.scope-overview-table td:nth-child(2) {
  width: 13%;
}

.scope-overview-table th:nth-child(3),
.scope-overview-table td:nth-child(3) {
  width: 11%;
}

.scope-overview-table th:nth-child(4),
.scope-overview-table td:nth-child(4) {
  width: 34%;
}

.scope-overview-table-no-recommendations th:nth-child(1),
.scope-overview-table-no-recommendations td:nth-child(1) {
  width: 72%;
}

.scope-overview-table-no-recommendations th:nth-child(2),
.scope-overview-table-no-recommendations td:nth-child(2) {
  width: 16%;
}

.scope-overview-table-no-recommendations th:nth-child(3),
.scope-overview-table-no-recommendations td:nth-child(3) {
  width: 12%;
}

.scope-overview-table .scope-mono {
  display: block;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-overview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--scope-surface-soft);
  white-space: nowrap;
}

.scope-overview-url-count,
.scope-overview-metric {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scope-overview-url-count {
  color: var(--scope-text-muted);
  font-weight: 400;
}

.scope-overview-noise-text {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 500;
}

.scope-overview-noise-text-low {
  color: var(--scope-noise-low-text);
}

.scope-overview-noise-text-medium {
  color: var(--scope-noise-moderate-text);
}

.scope-overview-noise-text-high {
  color: var(--scope-noise-high-text);
}

.scope-overview-noise-text-very-high {
  color: var(--scope-noise-very-high-text);
}

.scope-overview-empty {
  color: var(--scope-text-muted);
  font-weight: 750;
}

.scope-overview-recommendation {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: nowrap;
  max-width: 100%;
}

.scope-overview-recommendation-link {
  min-width: 0;
  gap: 0.45rem;
  flex-wrap: nowrap;
  align-items: baseline;
  max-width: 100%;
}

.scope-overview-recommendation-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-overview-more-link {
  flex: 0 0 auto;
  color: var(--scope-recommendation-link);
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
}

.scope-overview-compact-rules {
  display: none;
  color: var(--scope-recommendation-link);
  font-size: 0.86rem;
  font-weight: 750;
}

.scope-overview-recommendation-link:hover .scope-overview-more-link {
  text-decoration: underline;
}

.scope-alert-link {
  display: inline-flex;
  align-items: center;
  color: var(--scope-recommendation-link);
  font-weight: 800;
}

.scope-alert-link:hover {
  color: var(--scope-recommendation-link-hover);
}

.scope-overview-table tfoot.scope-table-footer td {
  padding: 0.45rem 0.6rem;
  background: var(--scope-surface);
  border-top: 1px solid var(--scope-border-soft);
  border-bottom: 0;
  text-align: center;
}

.scope-table-footer[hidden],
.scope-table-load-more[hidden] {
  display: none;
}

.scope-table-load-more {
  width: 50%;
  min-width: 7rem;
  min-height: 2rem;
  padding: 0.34rem 0.8rem;
  font-size: 0.8rem;
}

.scope-muted {
  color: var(--scope-text-muted);
  font-size: 0.84rem;
}

.scope-overview-grid .scope-dashboard-module.scope-card-padded {
  padding: 1.15rem;
}

.scope-overview-grid .scope-table-wrap {
  margin-top: 0.65rem;
}

@media (max-width: 1320px) {
  .scope-impact-bar {
    flex-basis: 4.35rem;
    width: 4.35rem;
  }

  .scope-overview-recommendation-title,
  .scope-overview-more-link {
    display: none;
  }

  .scope-overview-compact-rules {
    display: inline;
  }
}

@media (max-width: 760px) {
  .scope-impact-row {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }

  .scope-impact-row-metric {
    justify-content: space-between;
  }

  .scope-impact-bar {
    flex-basis: 4rem;
    width: 4rem;
  }
}

.scope-compact-mode body .scope-brand {
  --scope-sidebar-brand-y: 1.15rem;
  --scope-sidebar-brand-x: 1.25rem;
}

.scope-compact-mode body .scope-nav {
  padding: 0.75rem var(--scope-sidebar-x-padding);
}

.scope-compact-mode body .scope-nav-item {
  --scope-sidebar-nav-row-height: 2.35rem;
  --scope-sidebar-nav-row-padding-x: 0.795rem;
  padding-top: 0.56rem;
  padding-bottom: 0.56rem;
  font-size: 0.84rem;
}

.scope-compact-mode body .scope-nav-action {
  margin-bottom: 0.55rem;
}

.scope-compact-mode body .scope-sidebar-footer {
  --scope-footer-control-font-size: 0.8rem;
  padding: 0.75rem;
}

.scope-compact-mode.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-nav,
.scope-compact-mode.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-sidebar-footer {
  padding-left: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
  padding-right: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
}

.scope-compact-mode body .scope-density-toggle,
.scope-compact-mode body .scope-theme-toggle,
.scope-compact-mode body .scope-cache-form {
  margin-bottom: 0.55rem;
}

.scope-compact-mode body .scope-density-toggle,
.scope-compact-mode body .scope-theme-toggle {
  min-height: 2.25rem;
  padding: 0.42rem 0.65rem;
}

.scope-compact-mode body .scope-cache-button,
.scope-compact-mode body .scope-safety {
  min-height: 2.25rem;
  padding: 0.42rem 0.65rem;
}

.scope-compact-mode body .scope-page {
  padding: 1.35rem 1.5rem;
}

.scope-compact-mode body .scope-hero {
  gap: 1rem;
}

.scope-compact-mode body .scope-title {
  margin-top: 0.35rem;
  font-size: var(--scope-page-title-font-size);
  line-height: var(--scope-page-title-line-height);
}

.scope-compact-mode body .scope-description {
  margin-top: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.scope-compact-mode body .scope-flash {
  padding: 0.62rem 0.8rem;
  margin-bottom: 0.75rem;
}

.scope-compact-mode body .scope-card-padded,
.scope-compact-mode body .scope-card-header {
  padding: 0.9rem;
}

.scope-compact-mode body .scope-card-title {
  font-size: 0.94rem;
}

.scope-compact-mode body .scope-card-subtitle {
  margin-top: 0.22rem;
  font-size: 0.84rem;
  line-height: 1.35;
}

.scope-compact-mode body .scope-badge {
  padding: 0.22rem 0.52rem;
  font-size: 0.72rem;
}

.scope-compact-mode body .scope-btn {
  min-height: 2.18rem;
  padding: 0.38rem 0.8rem;
  font-size: 0.82rem;
}

.scope-compact-mode body .scope-grid-4,
.scope-compact-mode body .scope-grid-main,
.scope-compact-mode body .scope-overview-grid,
.scope-compact-mode body .scope-rules-grid,
.scope-compact-mode body .scope-rules-secondary,
.scope-compact-mode body .scope-impact-map-grid,
.scope-compact-mode body .scope-regex-summary,
.scope-compact-mode body .sample-grid {
  gap: 1rem;
}

.scope-compact-mode body .scope-metrics,
.scope-compact-mode body .scope-grid-main,
.scope-compact-mode body .scope-overview-grid,
.scope-compact-mode body .scope-overview-shapes,
.scope-compact-mode body .scope-rules-grid,
.scope-compact-mode body .scope-rules-secondary,
.scope-compact-mode body .scope-impact-map,
.scope-compact-mode body .scope-regex-toolbar,
.scope-compact-mode body .scope-regex-list,
.scope-compact-mode body .sample-grid,
.scope-compact-mode body .scope-import,
.scope-compact-mode body .scope-empty {
  margin-top: 1rem;
}

.scope-compact-mode body .scope-stack,
.scope-compact-mode body .scope-regex-list {
  gap: 1rem;
}

.scope-compact-mode body .scope-metric {
  padding: 0.9rem;
}

.scope-compact-mode body .scope-metric-label,
.scope-compact-mode body .scope-metric-detail {
  font-size: 0.76rem;
}

.scope-compact-mode body .scope-metric-value {
  margin-top: 0.4rem;
  font-size: 1.55rem;
}

.scope-compact-mode body .scope-metric-icon {
  width: 2.15rem;
  height: 2.15rem;
}

.scope-compact-mode body .scope-import-form {
  margin-top: 0.75rem;
  gap: 0.6rem;
}

.scope-compact-mode body .scope-import-form label {
  gap: 0.25rem;
  font-size: 0.74rem;
}

.scope-compact-mode body .scope-import-form input,
.scope-compact-mode body .scope-import-form textarea,
.scope-compact-mode body .scope-run-picker select {
  min-height: 2.18rem;
  padding: 0.36rem 0.62rem;
}

.scope-compact-mode body .scope-run-picker select {
  background-position: right 1rem center;
  background-size: 0.9rem 0.9rem;
  padding-right: 2.75rem;
}

.scope-compact-mode body .scope-import-form textarea {
  min-height: 7.5rem;
  line-height: 1.35;
}

.scope-compact-mode body .scope-import-form label.scope-upload-dropzone {
  min-height: 8.5rem;
}

.scope-compact-mode body .scope-upload-icon {
  width: 2.55rem;
  height: 2.55rem;
}

.scope-compact-mode body .scope-upload-copy strong {
  font-size: 0.98rem;
}

.scope-compact-mode body .scope-impact-legend {
  margin-top: 0.65rem;
  gap: 0.65rem;
  font-size: 0.76rem;
}

.scope-compact-mode body .scope-impact-map-grid {
  margin-top: 0.9rem;
}

.scope-compact-mode body .scope-impact-bars {
  gap: 0;
  margin-top: 0.45rem;
}

.scope-compact-mode body .scope-impact-row {
  gap: 0.7rem;
  padding: 0.42rem 0;
}

.scope-compact-mode body .scope-impact-row-stats {
  font-size: 0.76rem;
}

.scope-compact-mode body .scope-impact-bar {
  flex-basis: 4.4rem;
  width: 4.4rem;
  height: 0.46rem;
}

.scope-compact-mode body .scope-table-wrap {
  margin-top: 0.7rem;
}

.scope-compact-mode body .scope-table {
  font-size: 0.82rem;
}

.scope-compact-mode body .scope-table thead {
  font-size: 0.72rem;
}

.scope-compact-mode body .scope-table th,
.scope-compact-mode body .scope-table td {
  padding: 0.55rem 0.72rem;
}

.scope-compact-mode body .scope-mono {
  font-size: 0.73rem;
}

.scope-compact-mode body .scope-candidate-row {
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(3.8rem, 4.4rem) minmax(3.8rem, 4.4rem) 0.9rem;
  padding: 0.72rem 0.9rem;
}

.scope-compact-mode body .scope-candidate-main {
  display: contents;
}

.scope-compact-mode body .scope-candidate-titleline strong {
  font-size: 0.9rem;
}

.scope-compact-mode body .scope-candidate-subtitle {
  font-size: 0.8rem;
}

.scope-compact-mode body .scope-candidate-stats {
  gap: 0.5rem;
}

.scope-compact-mode body .scope-candidate-stats small {
  font-size: 0.68rem;
}

.scope-compact-mode body .scope-candidate-stats b {
  font-size: 0.78rem;
}

.scope-compact-mode body .scope-chevron {
  font-size: 1.25rem;
}

.scope-compact-mode body .scope-url-shape-row,
.scope-compact-mode body .scope-rule-scope-row,
.scope-compact-mode body .impact-grid {
  margin-top: 0.78rem;
}

.scope-compact-mode body .scope-url-shape,
.scope-compact-mode body .scope-rule-scope {
  min-height: 2.1rem;
  padding: 0.52rem 0.68rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.scope-compact-mode body .scope-url-shape-token {
  font-size: 0.7rem;
}

.scope-compact-mode body .scope-url-shape-required {
  padding: 0.03rem 0.2rem;
}

.scope-compact-mode body .impact-grid div {
  padding: 0.62rem;
}

.scope-compact-mode body .impact-grid strong {
  font-size: 1.22rem;
}

.scope-compact-mode body .scope-progress-row {
  margin-top: 0.82rem;
}

.scope-compact-mode body .scope-progress {
  height: 0.42rem;
  margin: 0.5rem 0 0.8rem;
}

.scope-compact-mode body .scope-impact-metrics {
  gap: 0.65rem;
  margin-top: 0.82rem;
}

.scope-compact-mode body .scope-impact-metrics .scope-progress-row {
  margin-top: 0;
}

.scope-compact-mode body .scope-impact-metrics .scope-progress {
  margin: 0.45rem 0 0;
}

.scope-compact-mode body .scope-review-profile {
  padding-top: 0.85rem;
  margin-top: 1rem;
}

.scope-compact-mode body .scope-review-factor-grid {
  gap: 1rem;
  margin-top: 0.8rem;
}

.scope-compact-mode body .scope-review-factor-group {
  padding: 0;
}

.scope-compact-mode body .scope-review-factor {
  gap: 0.3rem;
}

.scope-compact-mode body .scope-review-factor-labels {
  gap: 0.12rem;
}

.scope-compact-mode body .scope-code-blocks {
  gap: 0.4rem;
  margin-top: 0.72rem;
}

.scope-compact-mode body .scope-code-light,
.scope-compact-mode body .scope-code-dark {
  padding: 0.62rem;
  font-size: 0.72rem;
  line-height: 1.42;
}

.scope-compact-mode body .scope-action-grid,
.scope-compact-mode body .scope-regex-actions {
  gap: 0.5rem;
  margin-top: 0.72rem;
}

.scope-compact-mode body .scope-action-note {
  margin-top: 0.55rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

.scope-compact-mode body .scope-url-list-header {
  padding: 0.65rem 0.8rem;
}

.scope-compact-mode body .url-sample {
  padding: 0.58rem 0.8rem;
  font-size: 0.72rem;
}

.scope-compact-mode body .top-path-row,
.scope-compact-mode body .top-path-empty {
  padding: 0.58rem 0.8rem;
}

.scope-compact-mode body .scope-regex-summary > div,
.scope-compact-mode body .scope-regex-context span {
  padding: 0.62rem;
}

.scope-compact-mode body .scope-regex-summary strong {
  margin-top: 0.22rem;
  font-size: 1.1rem;
}

.scope-compact-mode body .scope-regex-rule {
  gap: 0.56rem;
}

.scope-compact-mode body .scope-regex-line {
  gap: 0;
}

.scope-compact-mode body .scope-regex-line code {
  padding: 0.62rem;
  font-size: 0.74rem;
  line-height: 1.38;
}

/* Compact mode is a layout mode: keep primary type readable and remove repeated surfaces. */
.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-title {
  margin-top: 0.45rem;
  font-size: clamp(2rem, 3.8vw, 2.5rem);
  line-height: 1.08;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-description {
  font-size: 0.96rem;
  line-height: 1.5;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-card-title {
  font-size: 1rem;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-card-subtitle {
  font-size: 0.88rem;
  line-height: 1.42;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-mono {
  font-size: 0.78rem;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-overview-command-row:not(.is-empty) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.5rem;
}

.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-overview-command-row:not(.is-empty) .scope-impact-map,
.scope-compact-mode body:where(.scope-tab-overview, .scope-tab-rules, .scope-tab-add, .scope-tab-regex) .scope-overview-command-row:not(.is-empty) .scope-metrics {
  margin-top: 0;
}

.scope-compact-mode body.scope-tab-overview .scope-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scope-compact-mode body.scope-tab-overview .scope-metric {
  min-height: 7.4rem;
  padding: 0.95rem;
}

.scope-compact-mode body.scope-tab-overview .scope-metric-value {
  margin-top: 0.35rem;
  font-size: 2rem;
}

.scope-compact-mode body.scope-tab-overview .scope-metric-detail {
  display: none;
}

.scope-compact-mode body.scope-tab-overview .scope-metric-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-map-grid {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-bars {
  gap: 0;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-bars .scope-impact-row:nth-of-type(n+5) {
  display: none;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.4rem 0;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-label {
  min-width: 0;
}

.scope-compact-mode body.scope-tab-overview .scope-impact-bar {
  flex-basis: 4.25rem;
  width: 4.25rem;
  height: 0.46rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-row {
  grid-template-columns: minmax(0, 1fr) minmax(4.2rem, 4.8rem) minmax(4.2rem, 4.8rem) 0.9rem;
  padding: 0.82rem 1rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-main {
  display: contents;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-titleline {
  grid-area: title;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-titleline strong {
  font-size: 0.97rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-subtitle {
  grid-area: match;
  font-size: 0.9rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-stats {
  display: contents;
}

.scope-compact-mode body.scope-tab-rules .scope-rules-table .scope-candidate-row {
  display: table-row;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}

.scope-compact-mode body.scope-tab-rules .scope-rules-table .scope-candidate-titleline {
  grid-area: auto;
}

.scope-compact-mode body.scope-tab-rules .scope-rules-table .scope-candidate-titleline strong {
  font-size: 0.9rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-stats small {
  font-size: 0.72rem;
}

.scope-compact-mode body.scope-tab-rules .scope-candidate-stats b {
  font-size: 0.88rem;
}

.scope-compact-mode body.scope-tab-rules .scope-chevron {
  font-size: 1.4rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-metrics,
.scope-compact-mode body.scope-tab-insights .scope-insight-briefs {
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-card {
  padding: 0.52rem 0.58rem;
  gap: 0.24rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-card .scope-badge {
  font-size: 0.68rem;
  padding: 0.18rem 0.45rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-card strong {
  font-size: 0.98rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-card small {
  font-size: 0.69rem;
  line-height: 1.24;
}

.scope-compact-mode body.scope-tab-insights .scope-insights-grid {
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-master,
.scope-compact-mode body.scope-tab-insights .scope-insight-detail {
  padding: 0.78rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-sort-form,
.scope-compact-mode body.scope-tab-insights .scope-insight-list-shell {
  margin-top: 0.52rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-row {
  padding: 0.36rem 0.48rem;
  gap: 0.3rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-row-body > div,
.scope-compact-mode body.scope-tab-insights .scope-insight-stat-button {
  padding: 0.22rem 0.28rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-detail-section {
  margin-top: 0.58rem;
}

.scope-compact-mode body.scope-tab-insights .scope-insight-mode-tabs,
.scope-compact-mode body.scope-tab-insights .scope-insight-breakdown,
.scope-compact-mode body.scope-tab-insights .scope-insight-facts,
.scope-compact-mode body.scope-tab-insights .scope-insight-composition {
  margin-top: 0.45rem;
}

@media (max-width: 1180px) {
  .scope-grid-4,
  .pipeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-scope-composition {
    grid-column: span 2;
  }

  .scope-grid-main,
  .scope-overview-grid,
  .scope-insights-grid,
  .scope-impact-map-grid,
  .scope-rules-grid,
  .scope-rules-secondary,
  .scope-regex-context,
  .sample-grid {
    grid-template-columns: 1fr;
  }

  .scope-insight-briefs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-insight-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) repeat(4, minmax(0, 0.55fr)) minmax(0, 0.55fr);
  }

  .scope-insight-list-header {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) repeat(4, minmax(0, 0.55fr)) minmax(0, 0.55fr);
  }

  .scope-insight-master,
  .scope-insight-detail {
    position: static;
  }

  .scope-import-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-import-form-v02 {
    grid-template-columns: 1fr;
  }

  .scope-regex-line-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .scope-regex-artifacts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .scope-sidebar {
    display: flex;
    width: var(--scope-sidebar-rail-width) !important;
    box-shadow: none !important;
  }

  .scope-topbar {
    display: none;
  }

  .scope-main {
    padding-left: var(--scope-sidebar-rail-width);
  }

  .scope-page {
    padding: 1rem;
  }

  .scope-sidebar .scope-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .scope-sidebar .scope-brand-text,
  .scope-sidebar .scope-nav-item > span:not(.scope-nav-label),
  .scope-sidebar .scope-nav-text,
  .scope-sidebar .scope-nav-status,
  .scope-sidebar .scope-footer-panel-title > :not(.icon),
  .scope-sidebar .scope-switch,
  .scope-sidebar .scope-appearance-meta {
    display: none !important;
  }

  .scope-sidebar .scope-nav,
  .scope-sidebar .scope-sidebar-footer {
    padding-left: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
    padding-right: calc((var(--scope-sidebar-rail-width) - var(--scope-sidebar-rail-button-width)) / 2);
  }

  .scope-sidebar .scope-nav-item,
  .scope-sidebar .scope-footer-panel,
  .scope-sidebar .scope-cache-button {
    width: var(--scope-sidebar-rail-button-width);
    min-width: var(--scope-sidebar-rail-button-width);
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .scope-sidebar .scope-nav-item {
    min-height: var(--scope-sidebar-rail-button-height);
  }

  .scope-sidebar .scope-nav-label,
  .scope-sidebar .scope-footer-panel-title {
    width: 100%;
    justify-content: center;
    gap: 0;
  }

  .scope-sidebar .scope-sidebar-collapse {
    display: none !important;
  }

  .scope-hero,
  .scope-card-header,
  .scope-section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .scope-grid-4,
  .pipeline-grid,
  .scope-import-form,
    .scope-import-form-v01,
    .scope-import-form-v02,
    .scope-overview-grid,
    .scope-insights-grid,
    .scope-insight-briefs,
    .scope-impact-map-grid,
    .scope-rules-grid,
    .scope-rules-secondary,
    .scope-regex-context,
    .sample-grid {
    grid-template-columns: 1fr;
  }

  .scope-scope-composition {
    grid-column: span 1;
  }

  .scope-composition-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .scope-composition-stats {
    padding-top: 1rem;
    padding-left: 0;
    border-top: 1px solid var(--scope-border);
    border-left: 0;
  }

  .scope-candidate-stats,
  .impact-grid,
  .scope-review-factor-grid,
  .scope-insight-breakdown,
  .scope-insight-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-insight-sort-form,
  .scope-insight-sort-form label,
  .scope-insight-sort-form select,
  .scope-insight-sort-order {
    width: 100%;
  }

  .scope-insight-row {
    grid-template-columns: 1fr;
  }

  .scope-insight-row-title,
  .scope-insight-row-head > .scope-badge,
  .scope-insight-row-body > :nth-child(1),
  .scope-insight-row-body > :nth-child(2),
  .scope-insight-row-body > :nth-child(3),
  .scope-insight-row-body > :nth-child(4),
  .scope-insight-row-body > :nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .scope-insight-list-header {
    display: none;
  }

  .scope-insight-row-body span,
  .scope-insight-stat-button span {
    display: block;
  }

  .scope-regex-table,
  .scope-regex-table thead,
  .scope-regex-table tbody,
  .scope-regex-table tr,
  .scope-regex-table th,
  .scope-regex-table td {
    display: block;
  }

  .scope-regex-table thead {
    display: none;
  }

  .scope-regex-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.46rem 0.7rem;
    padding: 0.72rem;
    border-top: 1px solid var(--scope-border-soft);
  }

  .scope-regex-table tbody tr:first-child {
    border-top: 0;
  }

  .scope-regex-table td {
    padding: 0;
    border-top: 0;
  }

  .scope-regex-cell-select {
    grid-row: span 4;
    align-self: start;
    padding-top: 0.1rem;
  }

  .scope-regex-cell-rule,
  .scope-regex-cell-output {
    grid-column: 2;
  }

  .scope-regex-cell-metric,
  .scope-regex-cell-review {
    grid-column: 2;
    text-align: left;
  }

  .scope-regex-cell-metric::before {
    content: attr(data-label) " ";
    color: var(--scope-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
  }

  .scope-rules-table th,
  .scope-rules-table td {
    padding-right: 0.46rem;
    padding-left: 0.46rem;
  }

  .scope-rules-col-matches {
    width: 4rem;
  }

  .scope-rules-col-overlap {
    width: 4.4rem;
  }

  .scope-rules-col-reduction {
    width: 3.9rem;
  }

  .scope-rules-col-status {
    width: 5.3rem;
  }

  .scope-rules-col-review {
    width: 2.9rem;
  }

  .scope-rules-cell-status {
    padding-right: 0.52rem;
  }

  .scope-rules-cell-review {
    padding-right: 0.56rem;
    padding-left: 0.92rem;
    text-align: right;
  }

  .scope-rules-cell-status .scope-btn,
  .scope-rule-status-badge {
    padding-right: 0.48rem;
    padding-left: 0.48rem;
  }

  .scope-import-form label.scope-upload-dropzone {
    min-height: 8.5rem;
    padding: 1.1rem;
  }

  .scope-upload-cluster {
    width: min(100%, 18rem);
    flex-direction: column;
    gap: 0.72rem;
  }

  .scope-upload-copy {
    text-align: center;
  }
}

@media (max-width: 520px) {
  :root {
    --scope-page-title-font-size: 2rem;
  }

  .scope-candidate-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1rem;
    grid-template-areas:
      "title title chevron"
      "match match chevron"
      "matches reduction chevron";
    row-gap: 0.42rem;
  }

  .scope-action-grid,
  .scope-regex-summary,
  .scope-composition-stats,
  .scope-candidate-stats,
  .impact-grid,
  .scope-review-factor-grid,
  .scope-insight-mode-tabs,
  .scope-insight-breakdown,
  .scope-insight-facts {
    grid-template-columns: 1fr;
  }

  .scope-regex-summary > div + div {
    border-top: 1px solid var(--scope-border);
    border-left: 0;
  }

  .scope-composition-stat {
    padding-right: 0;
    padding-left: 0;
  }

  .scope-composition-stat + .scope-composition-stat {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--scope-border);
    border-left: 0;
  }

}

/* ==========================================================================
   PDF Scope (v0.7)

   One screen: header, status strip, toolbar, table. The page itself never
   scrolls vertically -- only the table does.
   ========================================================================== */

.scope-pdf-scope {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Owns the pane height so the table, not the page, is what scrolls. */
  height: 100%;
  min-height: 0;
}

.scope-pdf-engine-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--scope-control-border);
  border-radius: 0.55rem;
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.82rem;
}

.scope-pdf-engine-control label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--scope-text);
  font-weight: 760;
  cursor: pointer;
}

.scope-pdf-engine-control input {
  margin: 0;
}

.scope-pdf-engine-note {
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* The display rules in this block have the same specificity as the UA [hidden]
   rule and come later, so without these guards every panel would render at
   once. This regressed once already. */
.scope-pdf-status[hidden],
.scope-pdf-toolbar[hidden],
.scope-pdf-table-wrap[hidden],
.scope-pdf-more[hidden],
.scope-pdf-host-errors[hidden],
.scope-pdf-metadata[hidden],
.scope-pdf-run-alert[hidden],
.scope-pdf-notice[hidden],
.scope-pdf-status-actions > [hidden] {
  display: none;
}

/* No .scope-pdf-head rules: the tab has no heading of its own. The shared page
   header supplies the title, as it does for every other tab. */

/* ------------------------------------------------------------ status strip -- */

.scope-pdf-status,
.scope-pdf-notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--scope-border);
  border-radius: 0.6rem;
  background: var(--scope-surface);
}

.scope-pdf-notice {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.scope-pdf-status-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.scope-pdf-status-running {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.scope-pdf-status-running .scope-pdf-status-main {
  grid-column: 1;
  grid-row: 1;
}

.scope-pdf-status-running [data-pdf-cancel] {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.scope-pdf-status-running .scope-pdf-status-detail {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 1.2em;
  display: grid;
  grid-template-columns: 9.5rem minmax(12rem, 1fr);
  align-items: baseline;
  gap: 1rem;
  white-space: nowrap;
}

.scope-pdf-status-running .scope-pdf-activity {
  grid-column: 1 / -1;
  grid-row: 3;
}

.scope-pdf-status-main > strong {
  color: var(--scope-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.scope-pdf-status-main > span,
.scope-pdf-status-detail {
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.82rem;
}

.scope-pdf-status-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.scope-pdf-status-line strong {
  color: var(--scope-text);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scope-pdf-status-line span {
  color: var(--scope-text-muted);
  font-size: 0.82rem;
}

.scope-pdf-status-line [data-pdf-progress-eta] {
  display: inline-block;
  width: 17rem;
  min-width: 17rem;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-pdf-status-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.scope-pdf-progress-bar {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--scope-purple-soft);
  overflow: hidden;
}

.scope-pdf-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--scope-brand-purple);
  transition: width 220ms ease;
}

.scope-pdf-progress-bar.is-indeterminate > span {
  background-color: var(--scope-brand-purple);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.34) 0,
    rgba(255, 255, 255, 0.34) 0.55rem,
    transparent 0.55rem,
    transparent 1.1rem
  );
  background-size: 2.2rem 2.2rem;
  animation: scope-pdf-indeterminate 850ms linear infinite;
  transition: none;
}

@keyframes scope-pdf-indeterminate {
  to { background-position: 2.2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scope-pdf-progress-bar.is-indeterminate > span {
    animation: none;
  }
}

.scope-pdf-status-detail {
  font-variant-numeric: tabular-nums;
}

.scope-pdf-runtime {
  color: var(--scope-text);
  font-weight: 750;
  white-space: nowrap;
}

.scope-pdf-run-phase {
  display: inline-block;
  width: 16rem;
  min-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-pdf-activity {
  display: grid;
  grid-template-columns: repeat(5, minmax(7.25rem, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.scope-pdf-activity-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5ch;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--scope-border);
  border-radius: 0.4rem;
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.scope-pdf-activity-slot > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-pdf-activity-slot strong {
  color: var(--scope-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.scope-pdf-run-alert {
  padding: 0.7rem 1rem;
  border: 1px solid #b45309;
  border-radius: 0.6rem;
  background: rgba(245, 158, 11, 0.13);
  color: var(--scope-text);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.45;
}

.scope-pdf-run-alert[data-tone="failure"] {
  border-color: var(--scope-danger-solid);
  background: var(--scope-danger-soft);
}

.scope-pdf-host-errors {
  padding: 0.7rem 1rem;
  border: 1px solid #a16207;
  border-radius: 0.6rem;
  background: rgba(251, 191, 36, 0.12);
  color: var(--scope-text);
  font-size: 0.84rem;
  line-height: 1.45;
}

.scope-dark-mode body .scope-pdf-host-errors {
  border-color: #fbbf24;
}

.scope-pdf-host-errors p {
  margin: 0 0 0.3rem;
}

.scope-pdf-host-errors p:last-child {
  margin-bottom: 0;
}

.scope-pdf-host-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- toolbar -- */

/* Deliberately distinct from the status strip so the page does not read as one
   undifferentiated block. */
.scope-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--scope-border);
  border-radius: 0.55rem;
  background: var(--scope-surface-soft, rgba(0, 0, 0, 0.02));
}

/* --scope-control-border, not --scope-border. --scope-border is a hairline for
   dividers; against this toolbar's own panel it measured 1.18:1 light / 1.41:1
   dark, so the controls had no discernible edge. The control token is 4.55:1 /
   5.71:1. A solid fill alone cannot substitute here -- the control fill and the
   panel are near-identical neutrals (1.05:1 in light), so the boundary is what
   carries WCAG 1.4.11. */
.scope-pdf-field input,
.scope-pdf-field select {
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.4rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  font: inherit;
  font-size: 0.84rem;
}

.scope-pdf-field input {
  min-width: 15rem;
}

.scope-pdf-shown {
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.scope-pdf-download {
  margin-left: auto;
}

/* ------------------------------------------------------------------ table -- */

.scope-pdf-table-wrap {
  flex: 1 1 auto;
  min-height: 12rem;
  overflow: auto;
  border: 1px solid var(--scope-border);
  border-radius: 0.55rem;
  /* Snap rows so none is left half-hidden, and hold the scroll clear of the
     sticky header by its own height. */
  scroll-snap-type: y proximity;
  scroll-padding-top: 2.1rem;
}

.scope-pdf-table {
  min-width: 62rem;
  table-layout: fixed;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.scope-pdf-col-document {
  width: 47%;
}

.scope-pdf-col-pages,
.scope-pdf-col-size {
  width: 7rem;
}

.scope-pdf-col-status {
  width: 11.5rem;
}

.scope-pdf-table.is-error-view {
  min-width: 80rem;
}

.scope-pdf-table.is-error-view .scope-pdf-col-status {
  width: 28rem;
}

.scope-pdf-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.4rem 0.6rem;
  background: var(--scope-surface);
  box-shadow: inset 0 -1px 0 var(--scope-border);
  white-space: nowrap;
}

.scope-pdf-table tbody tr {
  scroll-snap-align: start;
}

.scope-pdf-table tbody td {
  padding: 0.3rem 0.6rem;
  vertical-align: middle;
}

.scope-pdf-table thead th button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

/* The sorted column must be obvious, not inferred. */
.scope-pdf-table thead th.is-sorted button {
  color: var(--scope-brand-purple-text);
}

.scope-pdf-table thead th.is-sorted button::after {
  content: "\25BC";
  font-size: 0.62em;
}

.scope-pdf-table thead th.is-sorted.is-asc button::after {
  content: "\25B2";
}

.scope-pdf-doc {
  max-width: 26rem;
}

.scope-pdf-path {
  max-width: 18rem;
  color: var(--scope-text-muted);
}

.scope-pdf-doc,
.scope-pdf-path {
  overflow: hidden;
}

.scope-pdf-doc a,
.scope-pdf-path span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Matches the URL-list link treatment used in Rule Candidates. */
.scope-pdf-link {
  color: var(--scope-brand-purple-text);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--scope-brand-purple-control);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

/* Hover must gain contrast, not lose it. --scope-brand-purple-hover is a fill
   colour meant to sit under white text, so using it as link text scored 2.25:1
   on the dark surface. Keeping the theme-aware text token and expressing hover
   through a tint and a thicker underline measures 9.41:1 light / 10.79:1 dark. */
.scope-pdf-link:hover,
.scope-pdf-link:focus-visible {
  color: var(--scope-brand-purple-text);
  background: var(--scope-brand-purple-soft);
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.14em;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 0.15em var(--scope-brand-purple-soft);
}

.scope-pdf-link-icon {
  width: 0.88em;
  height: 0.88em;
  margin-left: 0.25em;
  opacity: 0.75;
}

.scope-pdf-unknown,
.scope-pdf-pending {
  color: var(--scope-text-muted);
}

/* The table's colgroup reserves the Status track before live rows exist. A
   fixed table algorithm is required here: widths on cells inside an automatic
   table are only preferences and were redistributed as row content changed. */
.scope-pdf-status-cell {
  height: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-pdf-table.is-error-view .scope-pdf-status-cell {
  height: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.scope-pdf-ok,
.scope-pdf-bad {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.scope-pdf-ok .icon {
  width: 1.05em;
  height: 1.05em;
  color: #15803d;
}

.scope-pdf-bad .icon {
  width: 1.05em;
  height: 1.05em;
  color: #b45309;
}

.scope-pdf-bad code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--scope-text-muted);
  font-family: var(--scope-font-mono);
  font-size: 0.78em;
}

.scope-pdf-error-detail {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
  width: 100%;
  padding: 0.25rem 0;
  color: var(--scope-red);
}

.scope-pdf-error-detail > .icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
}

.scope-pdf-error-detail-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.scope-pdf-error-detail-copy > span {
  color: var(--scope-text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.scope-pdf-error-detail-copy code {
  width: max-content;
  max-width: 100%;
  padding: 0.08rem 0.3rem;
  border: 1px solid var(--scope-red-border);
  border-radius: 0.3rem;
  background: var(--scope-red-bg);
  color: var(--scope-red);
  font-family: var(--scope-font-mono);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* Centred under the table rather than hanging off one edge. */
.scope-pdf-more {
  display: flex;
  justify-content: center;
  padding-top: 0.15rem;
}

.scope-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Solid danger action, used by Stop measuring. Shares the one destructive token
   with the other danger states rather than the one-off red this rule used to
   invent: white on the token is 9.57:1, and the value already exists in the
   palette, so no new colour family enters. */
.scope-btn-danger {
  background: var(--scope-danger-solid);
  border-color: var(--scope-danger-solid);
  color: #ffffff;
  font-weight: 800;
}

.scope-btn-danger:hover,
.scope-btn-danger:focus-visible {
  background: var(--scope-danger-solid-hover);
  border-color: var(--scope-danger-solid-hover);
  color: #ffffff;
}

/* Duplicate marker. Informational: the headline total still counts every copy,
   because a crawler fetches every URL. */
/* A button now, because clicking it filters to this document's duplicate group.
   Amber-on-amber-tint measures 8.15:1 light / 11.74:1 dark. */
.scope-pdf-dupe {
  background: var(--scope-amber-bg);
  color: var(--scope-amber);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.scope-pdf-dupe:hover {
  /* The underline carries the hover, so the tint does not have to shift enough
     to disturb the amber text's contrast. */
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.12em;
}

.scope-pdf-dupe:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--scope-brand-ring);
}

/* The first of several identical documents. Marked too, otherwise it reads as
   unremarkable next to the copies that point at it. */
.scope-pdf-dupe.is-original {
  background: var(--scope-blue-bg);
  color: var(--scope-blue);
}

/* Pressed state for the toolbar toggle, so an active filter is visible and not
   only announced. */
.scope-pdf-dupe-filter.is-active,
.scope-pdf-error-filter.is-active {
  background: var(--scope-brand-purple-control);
  border-color: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-pdf-dupe-filter.is-active .icon,
.scope-pdf-error-filter.is-active .icon {
  color: #fff;
}

/* Both filters stay visible with nothing to show, so the disabled state has to
   read as unavailable rather than as merely quiet. Disabled controls are exempt
   from the contrast minimum, which is why this can dim below it. */
.scope-pdf-dupe-filter:disabled,
.scope-pdf-error-filter:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ==========================================================================
   Phase 3 — Add Scope rhythm and the sidebar scope selector
   ========================================================================== */

/* Add Scope read as a busy stack and it was not obvious that Run analyzer had
   to be pressed. Tightened rhythm, quieter divider, and a clearly primary
   action. CSS only: the DOM order dropzone -> divider -> paste -> label ->
   submit is asserted by tests and is unchanged. */
.scope-import-form-v02 {
  gap: 0.65rem;
}

/* The primary action, unmistakably. */
.scope-import-form-v02 > .scope-btn[data-import-submit] {
  margin-top: 0.15rem;
  padding-block: 0.72rem;
  border-radius: 0.55rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.scope-import-form-v02 > .scope-btn[data-import-submit] .icon {
  width: 1.05em;
  height: 1.05em;
}

/* ------------------------------------------- sidebar workspace selector -- */

/* Moved out of the page header, where it competed with the content, into the
   sidebar under Add Scope so scope management is grouped. Long CSV names are the
   constraint here, so the control truncates and carries the full name as its
   title and accessible label. */
.scope-local-workspace-tools {
  display: flex;
  align-items: center;
  min-height: var(--scope-sidebar-nav-row-height);
  margin-bottom: 0.25rem;
  padding: 0 0.15rem;
}

/* Border, fill, radius, focus ring and the chevron all come from
   .scope-run-picker select, which app.js already applies and which has
   deliberate dark-mode variants. Only the sidebar-specific geometry belongs
   here: that rule was sized for a horizontal header (width:auto, min-width:12rem,
   field-sizing:content) and would push past an 18rem sidebar that clips at
   overflow:hidden. Do NOT set the padding shorthand — it would wipe out the
   3.2rem right padding that reserves room for the chevron, putting the caret
   on top of the label. */
.scope-local-workspace-tools .scope-local-workspace-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-left: 2.65rem;
  /* Truncation matters more than width here: scope names are long. */
  text-overflow: ellipsis;
}

/* The picker is a flex row; without this the select refuses to shrink below its
   content width and the chevron ends up over the text. */
.scope-local-workspace-tools .scope-run-picker {
  width: 100%;
  min-width: 0;
}

.scope-local-workspace-icon {
  position: absolute;
  z-index: 1;
  left: 0.8rem;
  width: var(--scope-sidebar-icon-size);
  height: var(--scope-sidebar-icon-size);
  color: var(--scope-brand-purple-text);
  pointer-events: none;
}

/* The selector keeps the same row in the rail and expanded sidebar. Its native
   select remains the hit target; only the visible presentation condenses to an
   icon. This prevents the rest of navigation from moving when the overlay
   opens and keeps selection available in the forced touch rail. */
.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-local-workspace-tools,
.scope-sidebar-rail-only body .scope-sidebar .scope-local-workspace-tools {
  width: var(--scope-sidebar-rail-button-width);
  min-width: var(--scope-sidebar-rail-button-width);
  min-height: var(--scope-sidebar-rail-button-height);
  padding: 0;
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-local-workspace-picker,
.scope-sidebar-rail-only body .scope-sidebar .scope-local-workspace-picker {
  width: var(--scope-sidebar-rail-button-width);
  min-width: var(--scope-sidebar-rail-button-width);
  height: var(--scope-sidebar-rail-button-height);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-local-workspace-picker::after,
.scope-sidebar-rail-only body .scope-sidebar .scope-local-workspace-picker::after {
  display: none;
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-local-workspace-icon,
.scope-sidebar-rail-only body .scope-sidebar .scope-local-workspace-icon {
  left: 50%;
  transform: translateX(-50%);
}

.scope-sidebar-collapsed:not(.scope-sidebar-interacting) body .scope-sidebar:not(:hover):not(:focus-within) .scope-local-workspace-select,
.scope-sidebar-rail-only body .scope-sidebar .scope-local-workspace-select {
  width: var(--scope-sidebar-rail-button-width);
  min-width: var(--scope-sidebar-rail-button-width);
  max-width: var(--scope-sidebar-rail-button-width);
  height: var(--scope-sidebar-rail-button-height);
  min-height: var(--scope-sidebar-rail-button-height);
  padding: 0;
  color: transparent;
  cursor: pointer;
}

.scope-local-workspace-select option {
  color: var(--scope-text);
}

/* ==========================================================================
   PDF Scope — live download rows
   ========================================================================== */

.scope-pdf-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4ch;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* The Status cell itself is the progress bar. Its green fill sits under the
   text, advances by compositor-only transform, and disappears completely when
   the finished row replaces this loading row. */
.scope-pdf-status-cell.is-loading {
  position: relative;
  overflow: hidden;
}

.scope-pdf-status-cell.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--scope-green-bg);
  transform: scaleX(var(--scope-pdf-load-scale, 0));
  transition: transform 140ms linear;
  will-change: transform;
  pointer-events: none;
}

.scope-pdf-progress-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--scope-green);
}

@media (prefers-reduced-motion: reduce) {
  .scope-pdf-status-cell.is-loading::before {
    transition: none;
    will-change: auto;
  }
}

.scope-pdf-progress-value {
  width: 4ch;
  color: var(--scope-green);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.scope-pdf-terminal {
  display: grid;
  grid-template-columns: 1.05em minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 1.2rem;
  font-weight: 700;
}

.scope-nav-item[data-pdf-run-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
}

@media (max-width: 900px) {
  .scope-pdf-activity {
    grid-template-columns: repeat(3, minmax(7.25rem, 1fr));
  }
}

@media (max-width: 640px) {
  .scope-pdf-status-line [data-pdf-progress-eta],
  .scope-pdf-run-phase {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .scope-pdf-status-running .scope-pdf-status-detail,
  .scope-pdf-activity {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------- sort affordance -------- */

/* The carets were 0.62em and the same colour as the label, so which column was
   sorted had to be hunted for. Bigger, brand-coloured, and every sortable
   column now hints that it sorts. */
.scope-pdf-table thead th button::after {
  content: "\25BC";
  font-size: 0.9em;
  line-height: 1;
  color: var(--scope-text-muted);
  opacity: 0.35;
}

.scope-pdf-table thead th button:hover::after,
.scope-pdf-table thead th button:focus-visible::after {
  opacity: 0.8;
}

.scope-pdf-table thead th.is-sorted button::after {
  font-size: 0.95em;
  color: var(--scope-brand-purple-control);
  opacity: 1;
}

/* Third state on Status: completion order, which is neither A-Z nor Z-A. A
   distinct glyph keeps it from reading as a direction on the status text. */
.scope-pdf-table thead th.is-other button::after {
  content: "\2193";
  font-size: 1.05em;
  font-weight: 900;
}

/* ==========================================================================
   Controls recalibration — WCAG 2.1 AA
   ==========================================================================
   Form only. No palette token is repurposed and no new colour family enters:
   every pairing was computed at AA in both themes first. The complaint being
   answered is that controls read weak and small -- borders where a fill was
   wanted, light labels, loose padding.
   ========================================================================== */

/* Button geometry and weight are changed on the base rules in place, further up
   this file, NOT appended here. Variant rules like .scope-btn-primary and
   .scope-btn-danger-soft:hover carry the same specificity as .scope-btn, so an
   appended base rule wins on source order and silently strips their fills --
   which is exactly how a generic hover override erased the destructive hover on
   the Remove controls. Editing in place keeps the cascade the design intends.

   ------------------------------------------------------------------ badges -- */

/* The weakest element in the app: a 1px border around an already-tinted pill
   made the edge fight the fill and the label read thin. Solid tint, no border,
   one consistent height, tighter tracking. Every tone's text-on-tint pairing
   measures 4.84:1 or better in light and 11.4:1 or better in dark, so this is
   purely a form change. */
.scope-badge {
  border: 0;
  min-height: 1.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Table badges are inline annotations, not standalone status controls. Keep
   their painted height below the row's normal text line so adding a badge can
   never make that row taller than its unbadged neighbors. Interactive badges
   retain a 24px pointer target through a transparent pseudo-element. */
.scope-table tbody .scope-badge {
  box-sizing: border-box;
  height: 1rem;
  min-height: 0;
  margin-block: 0;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  line-height: 1;
  vertical-align: middle;
}

.scope-table tbody button.scope-badge {
  position: relative;
}

.scope-table tbody button.scope-badge::after {
  content: "";
  position: absolute;
  inset: -0.26rem -0.25rem;
}

.scope-badge-purple,
.tone-green,
.scope-badge-green,
.tone-amber,
.scope-badge-amber,
.tone-red,
.scope-badge-red,
.tone-blue,
.scope-badge-blue,
.scope-badge-slate {
  border-color: transparent;
}

/* Nav status pills follow the badges. */
.scope-nav-status {
  padding: 0.14rem 0.46rem;
  font-weight: 900;
  letter-spacing: 0.015em;
}

.scope-nav-alpha {
  border-color: transparent;
}

/* --------------------------------------------------------------- inputs ---- */

/* Inputs are the one place a visible edge is the whole affordance, so they keep
   their border and only pick up the matching radius. Weight is deliberately left
   alone: what a user types is data, not a label, and pasted CSV stays at normal
   weight so it reads as content. */
.scope-import-form input,
.scope-import-form textarea {
  border-radius: 0.5rem;
}

/* The selector shows a chosen value, which is a label, so it can carry weight. */
.scope-run-picker select {
  border-radius: 0.5rem;
  font-weight: 700;
}

/* Paste toggle: one input method at a time, so it sits where the divider was and
   reads as an alternative rather than a second required field. */
.scope-import-form-v02 .scope-paste-toggle {
  justify-self: center;
  width: auto;
  background: transparent;
  border-color: transparent;
  color: var(--scope-brand-purple-text);
  font-weight: 700;
}

.scope-import-form-v02 .scope-paste-toggle:hover,
.scope-import-form-v02 .scope-paste-toggle:focus-visible {
  background: var(--scope-brand-purple-soft);
  border-color: transparent;
  color: var(--scope-brand-purple-text);
}

.scope-import-form-v02 .scope-upload-dropzone[hidden],
.scope-import-form-v02 .scope-paste-direct[hidden] {
  display: none;
}

/* ==========================================================================
   Browser-local Projects
   ========================================================================== */

.scope-active-context {
  --scope-context-segment-min-height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  max-width: min(34rem, 45%);
  min-width: 0;
  padding: 0.1rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.6rem;
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: right;
}

.scope-active-context[hidden] {
  display: none !important;
}

.scope-active-context-segment {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--scope-context-segment-min-height);
  padding: 0.1rem 0.65rem;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.scope-active-context-segment:hover {
  background: var(--scope-control-hover-bg);
  color: var(--scope-text);
}

.scope-active-context-segment[aria-pressed="true"] {
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-active-context-segment:focus-visible {
  outline: 2px solid var(--scope-brand-purple-control);
  outline-offset: 2px;
}

.scope-active-context-project,
.scope-active-context-standalone {
  font-weight: 820;
}

.scope-active-context-separator {
  color: var(--scope-text-muted);
  font-weight: 400;
}

.scope-active-context-scope {
  font-weight: 500;
}

@media (pointer: coarse) {
  .scope-active-context {
    --scope-context-segment-min-height: 44px;
  }
}

.scope-import-batch {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 0.25rem;
}

.scope-import-batch[hidden],
.scope-project-pdf-picker[hidden],
.scope-project-overview[hidden] {
  display: none !important;
}

.scope-import-batch-heading,
.scope-project-pdf-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
}

.scope-import-batch-heading h2,
.scope-project-pdf-heading h2 {
  margin: 0 auto 0 0;
  font-size: 1.08rem;
}

.scope-import-batch-heading > label:not(.scope-import-project-name),
.scope-project-pdf-actions > label {
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.45rem;
  color: var(--scope-text);
}

.scope-project-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.8rem;
}

.scope-project-pdf-summary {
  color: var(--scope-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.scope-import-project-name {
  min-width: min(18rem, 100%);
}

.scope-import-batch-table,
.scope-project-pdf-table {
  min-width: 0;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
}

.scope-import-batch-row,
.scope-project-pdf-row {
  display: grid;
  grid-template-columns: minmax(3.75rem, 0.3fr) minmax(0, 1.5fr) minmax(0, 0.65fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--scope-border-soft);
}

.scope-import-batch-row:last-child,
.scope-project-pdf-row:last-child {
  border-bottom: 0;
}

.scope-import-batch-row.is-heading,
.scope-project-pdf-row.is-heading {
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.scope-import-batch-row > input[type="checkbox"],
.scope-project-pdf-row > input[type="checkbox"] {
  width: 1.05rem;
  min-height: 1.05rem;
  accent-color: var(--scope-brand-purple-control);
}

.scope-import-batch-row > input[type="text"],
.scope-import-batch-row > select {
  width: 100%;
  min-height: 2.4rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.5rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.45rem 0.65rem;
  font: inherit;
}

.scope-import-batch-status {
  min-width: 0;
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.scope-project-pdf-picker {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.9rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface);
}

.scope-project-pdf-row.is-current {
  background: var(--scope-brand-purple-soft);
}

.scope-project-pdf-row.is-running {
  box-shadow: inset 4px 0 0 var(--scope-brand-purple-control);
}

.scope-project-pdf-row.is-queued > :last-child,
.scope-project-pdf-row.is-stopped > :last-child,
.scope-project-pdf-row.is-skipped > :last-child {
  color: var(--scope-text-muted);
}

.scope-project-pdf-row .scope-link-button,
.scope-project-overview-table .scope-link-button {
  color: var(--scope-brand-purple-text);
  text-align: left;
  cursor: pointer;
}

.scope-project-pdf-row .scope-link-button:hover,
.scope-project-pdf-row .scope-link-button:focus-visible,
.scope-project-overview-table .scope-link-button:hover,
.scope-project-overview-table .scope-link-button:focus-visible {
  color: var(--scope-brand-purple-control);
  text-decoration: underline;
}

.scope-project-overview {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.scope-project-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.scope-project-overview-metric {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--scope-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface);
}

.scope-project-overview-metric span {
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-project-overview-metric strong {
  font-size: 1.2rem;
}

.scope-project-overlap-note {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-left: 4px solid var(--scope-brand-purple-control);
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.85rem;
}

.scope-projects {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.scope-project-status[hidden],
.scope-project-editor[hidden],
.scope-projects-empty[hidden],
.scope-project-actions [hidden] {
  display: none !important;
}

.scope-project-status {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-soft);
  color: var(--scope-text);
  line-height: 1.5;
}

.scope-project-status.is-error {
  border-left-color: var(--scope-danger-solid);
}

.scope-project-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.34fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.scope-project-index,
.scope-project-editor,
.scope-projects-empty {
  min-width: 0;
  border: 1px solid var(--scope-border);
  border-radius: 0.75rem;
  background: var(--scope-surface);
  padding: 1rem;
}

.scope-project-index-heading,
.scope-project-editor-heading,
.scope-project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.scope-project-index h2,
.scope-project-editor h2 {
  margin: 0;
  font-size: 1.08rem;
}

.scope-project-index-heading p,
.scope-project-editor > p,
.scope-projects-empty span,
.scope-project-storage {
  margin: 0.3rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.scope-project-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.scope-project-empty {
  margin: 0;
  color: var(--scope-text-muted);
}

.scope-project-list-item {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.55rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.7rem 0.75rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scope-project-list-item:hover,
.scope-project-list-item:focus-visible,
.scope-project-list-item.is-active {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-soft);
  outline: 0;
}

.scope-project-list-item:focus-visible {
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-project-list-item span {
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-project-editor {
  display: grid;
  gap: 1rem;
}

.scope-project-name {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 20rem;
  color: var(--scope-text);
  font-size: 0.8rem;
  font-weight: 760;
}

.scope-project-name input {
  min-height: 2.65rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.5rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.55rem 0.7rem;
  font: inherit;
}

.scope-project-name input:focus {
  border-color: var(--scope-brand-purple-control);
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-project-editor-heading > strong {
  color: var(--scope-text-muted);
  font-size: 0.82rem;
}

.scope-project-workspaces {
  display: grid;
  border-top: 1px solid var(--scope-border);
}

.scope-project-workspace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--scope-border);
  color: var(--scope-text-muted);
}

.scope-project-workspace.is-selected {
  color: var(--scope-text);
}

.scope-project-membership {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.scope-project-workspace input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--scope-brand-purple-control);
}

.scope-project-workspace-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.scope-project-workspace .scope-link-button {
  width: fit-content;
  max-width: 100%;
  color: var(--scope-brand-purple-text);
  font: inherit;
  font-weight: 760;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.scope-project-workspace .scope-link-button:hover,
.scope-project-workspace .scope-link-button:focus-visible {
  color: var(--scope-brand-purple-control);
  text-decoration: underline;
}

.scope-project-workspace small {
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-project-workspace-delete {
  min-width: 2.35rem;
  padding-inline: 0.55rem;
  color: var(--scope-danger-solid);
}

.scope-project-actions {
  justify-content: flex-end;
  padding-top: 0.2rem;
}

.scope-project-actions [data-project-delete] {
  margin-right: auto;
}

.scope-projects-empty {
  display: grid;
  gap: 0.35rem;
}

@media (max-width: 900px) {
  .scope-project-layout {
    grid-template-columns: 1fr;
  }

  .scope-project-overview-metrics {
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
  }
}

@media (max-width: 640px) {
  .scope-import-batch-row,
  .scope-project-pdf-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .scope-import-batch-row.is-heading,
  .scope-project-pdf-row.is-heading {
    display: none;
  }

  .scope-import-batch-row > :nth-child(n + 3),
  .scope-project-pdf-row > :nth-child(n + 3) {
    grid-column: 2;
  }

  .scope-project-workspace {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .scope-active-context {
    position: static;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .scope-rule-view-hero .scope-active-context {
    grid-column: 1;
    grid-row: 1;
    width: fit-content;
    max-width: 100%;
    justify-self: end;
    justify-content: flex-end;
    margin-left: 0;
    text-align: right;
  }

  .scope-rule-view-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .scope-rule-view-hero .scope-rule-subtabs {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .scope-project-overview-metrics {
    grid-template-columns: 1fr;
  }

  .scope-project-actions {
    justify-content: flex-start;
  }

  .scope-project-actions [data-project-delete] {
    width: 100%;
    margin-right: 0;
  }
}

/* ==========================================================================
   Phase 5a — Client Report Alpha
   ========================================================================== */

.scope-pdf-byline {
  margin: 0.55rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

body.scope-tab-pdf_scope .scope-hero,
body.scope-tab-client_report .scope-hero {
  margin-bottom: 1rem;
}

body.scope-tab-client_report .scope-hero {
  align-items: center;
}

body.scope-tab-client_report .scope-title {
  margin-top: 0;
}

.scope-client-report {
  --scope-report-label-width: 10.5rem;
  --scope-report-field-gap: 0.6rem;
  --scope-report-control-width: 32rem;
  --scope-report-structural-font-size: 1.14rem;
  --scope-report-structural-font-weight: 820;
  --scope-report-structural-line-height: 1.25;
  display: grid;
  gap: 1rem;
  container-type: inline-size;
}

.scope-report-status {
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-soft);
  color: var(--scope-text);
  line-height: 1.5;
}

.scope-report-status[hidden],
.scope-report-editor[hidden],
.scope-report-preview-shell[hidden],
.scope-report-hero-actions[hidden],
.scope-report-field[hidden],
.scope-report-validity-control[hidden],
.scope-report-logo-state[hidden] {
  display: none !important;
}

.scope-report-editor {
  display: grid;
  gap: 0.9rem;
}

.scope-report-editor.is-measuring {
  visibility: hidden;
  pointer-events: none;
}

[data-report-width-group] {
  --scope-report-control-width: var(--scope-report-fitted-control-width, 20rem);
}

.scope-report-editor-section {
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--scope-border);
}

.scope-report-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.25rem;
  margin-bottom: 0.6rem;
  text-align: left;
}

.scope-report-section-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.65rem;
}

.scope-report-section-titleline [data-report-workspace-count] {
  color: var(--scope-text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
}

.scope-report-section-heading h2 {
  margin: 0;
  color: var(--scope-text);
  font-size: var(--scope-report-structural-font-size);
  font-weight: var(--scope-report-structural-font-weight);
  line-height: var(--scope-report-structural-line-height);
}

.scope-report-section-heading p,
.scope-report-config-panel-body > p,
.scope-report-pdf-sources > p {
  margin: 0.22rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.scope-report-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: stretch;
  gap: 1rem;
}

.scope-report-detail-group {
  display: block;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.scope-report-detail-controls {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
}

.scope-report-detail-group legend {
  float: left;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0;
  color: var(--scope-text);
  font-size: var(--scope-report-structural-font-size);
  font-weight: var(--scope-report-structural-font-weight);
  line-height: var(--scope-report-structural-line-height);
}

.scope-report-master-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--scope-text);
  font: inherit;
  font-weight: 820;
  cursor: pointer;
}

.scope-report-master-toggle input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--scope-brand-purple-control);
}

.scope-report-field {
  display: grid;
  grid-template-columns: var(--scope-report-label-width) minmax(0, var(--scope-report-control-width));
  justify-content: start;
  justify-self: start;
  align-items: center;
  gap: 0.38rem var(--scope-report-field-gap);
  min-width: 0;
  color: var(--scope-text);
  font-size: 0.8rem;
  font-weight: 760;
}

.scope-report-field:has(> select) {
  grid-template-columns: var(--scope-report-label-width) minmax(0, var(--scope-report-select-width, var(--scope-report-control-width)));
}

.scope-report-field small {
  grid-column: 2;
  color: var(--scope-text-muted);
  font-weight: 500;
  line-height: 1.35;
}

.scope-report-field input,
.scope-report-field select,
.scope-report-field textarea,
.scope-report-role {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.5rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.4rem 0.65rem;
}

.scope-report-field select,
.scope-report-role {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 0.78rem 0.78rem;
  padding-right: 2.35rem;
}

.scope-report-field select {
  width: var(--scope-report-select-width, 100%);
  max-width: 100%;
}

.scope-dark-mode body .scope-report-field select,
.scope-dark-mode body .scope-report-role {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
}

.scope-dark-mode body .scope-report-field input[type="date"] {
  color-scheme: dark;
}

.scope-report-field input:focus,
.scope-report-field select:focus,
.scope-report-field textarea:focus,
.scope-report-role:focus {
  outline: 0;
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-report-field textarea {
  min-height: 5.35rem;
  resize: vertical;
}

.scope-report-field input[type="file"] {
  padding: 0.22rem 0.4rem;
  cursor: pointer;
}

.scope-report-field input[type="file"]::file-selector-button {
  min-height: 1.8rem;
  margin: 0 0.65rem 0 0;
  border: 1px solid var(--scope-brand-purple-text);
  border-radius: 0.4rem;
  background: var(--scope-brand-purple-soft);
  color: var(--scope-brand-purple-text);
  font: inherit;
  font-weight: 800;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.scope-report-field input[type="file"]::file-selector-button:hover,
.scope-report-field input[type="file"]:focus-visible::file-selector-button {
  border-color: var(--scope-brand-purple-control);
  background: var(--scope-brand-purple-control);
  color: #fff;
}

.scope-report-field input[type="file"]::file-selector-button:active {
  border-color: var(--scope-brand-purple-hover);
  background: var(--scope-brand-purple-hover);
  color: #fff;
}

.scope-report-logo-state {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0 calc(var(--scope-report-label-width) + var(--scope-report-field-gap));
  color: var(--scope-text-muted);
  font-size: 0.84rem;
}

.scope-report-logo-state img {
  width: 4rem;
  height: 2.75rem;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--scope-border);
  border-radius: 0.4rem;
  background: #fff;
}

.scope-report-notice {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--scope-brand-purple-control);
  background: var(--scope-surface-soft);
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.scope-report-project-picker {
  display: grid;
  grid-template-columns: var(--scope-report-label-width) minmax(0, var(--scope-report-select-width, var(--scope-report-control-width)));
  justify-content: start;
  align-items: center;
  gap: var(--scope-report-field-gap);
  margin-bottom: 0.35rem;
  color: var(--scope-text);
  font-size: 0.8rem;
  font-weight: 760;
}

.scope-report-project-picker select {
  width: var(--scope-report-select-width, 100%);
  max-width: 100%;
  min-height: 2.35rem;
  border: 1px solid var(--scope-control-border);
  border-radius: 0.5rem;
  background: var(--scope-control-bg);
  color: var(--scope-text);
  padding: 0.4rem 0.65rem;
}

.scope-report-project-picker select:focus {
  border-color: var(--scope-brand-purple-control);
  outline: 0;
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-report-project-help {
  margin: 0 0 0.9rem calc(var(--scope-report-label-width) + var(--scope-report-field-gap));
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.scope-report-workspaces {
  max-height: min(30rem, 65vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  border: 1px solid var(--scope-data-module-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface);
  box-shadow: var(--scope-data-module-shadow);
}

/* Reserve scrollbar space only when the inventory actually overflows. Keeping
   a stable gutter on short lists left an empty strip between every row and the
   module edge, making the table look visually incomplete. */
.scope-report-workspaces.is-scrollable {
  scrollbar-gutter: stable;
}

.scope-report-workspaces:focus-visible {
  outline: 3px solid var(--scope-brand-ring);
  outline-offset: 2px;
}

.scope-report-workspace-table {
  min-width: 46rem;
  table-layout: fixed;
  font-size: 0.8rem;
}

.scope-report-workspace-table thead {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--scope-data-module-header);
}

.scope-report-workspace-table th,
.scope-report-workspace-table td {
  padding: 0.38rem 0.6rem;
  border-bottom-color: var(--scope-data-module-row-border);
  vertical-align: middle;
}

.scope-report-workspace-table th:first-child {
  width: 40%;
}

.scope-report-workspace-table th:nth-child(2) {
  width: 6.4rem;
}

.scope-report-workspace {
  color: var(--scope-text-muted);
}

.scope-report-workspace:last-child > td {
  border-bottom: 0;
}

.scope-report-workspace:focus-within {
  background: var(--scope-data-module-row-hover);
}

.scope-report-workspace.is-selected > td {
  background: var(--scope-data-module-row-selected);
  color: var(--scope-text);
}

.scope-report-workspace.is-selected:hover > td,
.scope-report-workspace.is-selected:focus-within > td {
  background: var(--scope-data-module-row-selected-hover);
  color: var(--scope-text);
}

.scope-report-workspace.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--scope-brand-purple-control);
}

.scope-report-workspace-topline {
  min-width: 0;
}

.scope-report-workspace-choice {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}

.scope-report-workspace-choice input {
  align-self: center;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--scope-brand-purple-control);
}

.scope-report-workspace-choice strong,
.scope-report-workspace-choice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-report-workspace-summary {
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.scope-report-workspace-summary {
  text-align: left;
}

.scope-report-workspace-date,
.scope-report-workspace-action {
  display: inline-block;
  white-space: nowrap;
}

.scope-report-workspace-details {
  min-width: 0;
}

.scope-report-workspace-role-cell {
  white-space: nowrap;
}

.scope-report-workspace-action {
  color: var(--scope-brand-purple-text);
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.scope-report-role {
  width: 5.35rem;
  min-width: 0;
  min-height: 2.1rem;
  color: var(--scope-text);
  font-size: 0.78rem;
  font-weight: 760;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  padding-left: 0.6rem;
}

.scope-report-service-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.scope-report-pricing-meta {
  --scope-report-label-width: 6rem;
  display: grid;
  gap: 0.55rem;
}

.scope-report-validity-row {
  display: grid;
  grid-template-columns: var(--scope-report-label-width) minmax(0, 1fr);
  justify-content: start;
  align-items: center;
  gap: 0.38rem var(--scope-report-field-gap);
  min-width: 0;
}

.scope-report-validity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  color: var(--scope-text);
  font-size: 0.8rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.scope-report-validity-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--scope-brand-purple-control);
}

.scope-report-validity-controls {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: var(--scope-report-field-gap);
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.scope-report-validity-control {
  display: block;
  min-width: 0;
}

.scope-report-validity-type {
  width: var(--scope-report-select-width, var(--scope-report-control-width));
}

.scope-report-validity-value {
  grid-template-columns: max-content;
  width: max-content;
  max-width: 100%;
}

[data-report-validity-days] input {
  width: calc(2ch + 1.3rem + 2px);
  min-width: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

[data-report-validity-days] input::-webkit-inner-spin-button,
[data-report-validity-days] input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

[data-report-validity-date] input {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.scope-report-validity-control :disabled,
.scope-report-detail-controls :disabled,
[data-report-quote-control] :disabled {
  cursor: not-allowed;
  border-color: var(--scope-control-disabled-border);
  background-color: var(--scope-control-disabled-bg);
  color: var(--scope-control-disabled-text);
  opacity: 1;
}

.scope-report-detail-controls:has(:disabled),
[data-report-quote-control]:has(:disabled) {
  color: var(--scope-control-disabled-text);
}

.scope-report-support-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 100%;
}

.scope-report-support-note textarea {
  grid-column: 1;
  width: 100%;
  min-height: 8rem;
  height: 100%;
  resize: vertical;
}

.scope-report-support-note textarea:disabled {
  cursor: not-allowed;
  border-color: var(--scope-control-disabled-border);
  background: var(--scope-control-disabled-bg);
  color: var(--scope-control-disabled-text);
  opacity: 1;
}

.scope-report-config-grid,
.scope-report-lower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1rem;
}

.scope-report-config-grid {
  align-items: stretch;
}

.scope-report-lower-grid {
  align-items: stretch;
}

@container (min-width: 880px) {
  .scope-report-config-grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 14fr);
  }

  .scope-report-lower-grid {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  }
}

.scope-report-config-panel,
.scope-report-service,
.scope-report-pricing-panel {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.scope-report-detail-group,
.scope-report-config-panel,
.scope-report-notes-section,
.scope-report-support-section {
  padding: 0.8rem;
  border-radius: 0.65rem;
  background: var(--scope-inset-surface);
  box-shadow: inset 0 0 0 1px var(--scope-inset-border);
}

.scope-report-config-panel legend,
.scope-report-service legend,
.scope-report-pricing-panel legend {
  float: left;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0;
  color: var(--scope-text);
  font-size: var(--scope-report-structural-font-size);
  font-weight: var(--scope-report-structural-font-weight);
  line-height: var(--scope-report-structural-line-height);
}

.scope-report-config-panel legend label,
.scope-report-service legend label,
.scope-report-pricing-panel legend label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.scope-report-service legend input,
.scope-report-pricing-panel legend input,
.scope-report-option-row input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--scope-brand-purple-control);
}

.scope-report-config-panel:disabled > .scope-report-config-panel-body {
  display: block;
  opacity: 0.52;
}

.scope-report-config-panel-body {
  clear: both;
  min-width: 0;
}

.scope-report-detail-controls {
  clear: both;
}

.scope-report-service-fields {
  margin-top: 0.55rem;
}

.scope-report-pdf-sources {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.scope-report-pdf-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: end;
  padding: 0.15rem 0 0;
}

.scope-report-pdf-source-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--scope-report-field-gap);
  min-width: 0;
}

.scope-report-pdf-source-mode {
  grid-template-columns: minmax(0, var(--scope-report-select-width, max-content)) !important;
}

.scope-report-pdf-source-mode select {
  grid-column: 1;
}

.scope-report-pdf-pages {
  --scope-report-control-width: 7.5rem;
  grid-template-columns: max-content minmax(0, var(--scope-report-control-width));
}

.scope-report-remediation-rate {
  --scope-report-control-width: 5.25rem;
  grid-template-columns: max-content minmax(0, var(--scope-report-control-width));
  width: max-content;
  margin-left: calc(var(--scope-report-pdf-source-select-width, 0px) + var(--scope-report-field-gap));
}

.scope-report-pdf-pages input:disabled {
  cursor: not-allowed;
  border-color: var(--scope-control-disabled-border);
  background: var(--scope-control-disabled-bg);
  color: var(--scope-control-disabled-text);
  opacity: 1;
}

.scope-report-option-row {
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
  align-content: start;
  gap: 0.65rem;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

.scope-report-option-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--scope-text);
  font-weight: 720;
}

.scope-report-notes-section,
.scope-report-support-section {
  min-width: 0;
  height: 100%;
}

.scope-report-notes-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.scope-report-support-section {
  display: grid;
  grid-template-rows: auto 1fr;
}

.scope-report-support-section .scope-report-section-heading {
  margin-bottom: 1rem;
}

.scope-report-editor-actions,
.scope-report-preview-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.7rem;
}

.scope-report-editor-actions {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--scope-data-module-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface-soft);
  box-shadow: var(--scope-data-module-shadow);
  text-align: left;
}

.scope-report-editor-message {
  flex: 0 1 auto;
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

.scope-report-editor-actions > .scope-btn {
  margin-left: 0;
  width: 100%;
}

.scope-report-page-size-action {
  display: block;
  width: 100%;
}

.scope-report-page-size-action select {
  width: 100%;
  min-height: 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background-color: var(--scope-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 0.82rem 0.82rem;
  color: var(--scope-text);
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 820;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.scope-report-page-size-action select:hover {
  border-color: var(--scope-brand-purple-control);
}

.scope-report-page-size-action select:focus-visible {
  outline: 0;
  border-color: var(--scope-brand-purple-control);
  box-shadow: 0 0 0 4px var(--scope-brand-ring);
}

.scope-dark-mode body .scope-report-page-size-action select {
  border-color: var(--scope-control-border);
  background-color: #fff;
  color: #0f172a;
}

.scope-report-generate {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 820;
}

.scope-report-generate .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.scope-report-editor-message:empty,
.scope-report-export-status:empty {
  display: none;
}

.scope-report-editor-actions ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.scope-report-editor-actions a {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--scope-brand-purple-text);
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.scope-report-editor-message a:focus-visible {
  border-radius: 0.18rem;
  outline: 3px solid var(--scope-brand-ring);
  outline-offset: 2px;
}

.scope-report-editor-message li a {
  font-weight: 600;
}

[id^="client-report-issue-target-"] {
  scroll-margin-block: 2rem;
}

@container (min-width: 68rem) {
  .scope-report-editor {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    align-items: start;
  }

  .scope-report-editor-section {
    grid-column: 1;
  }

  .scope-report-editor-actions {
    position: sticky;
    top: 1rem;
    grid-column: 2;
    grid-row: 1;
    /* The editor begins below the page hero. Pull its action rail back over the
       hero's title row so the primary action starts at the true page top, then
       let sticky positioning hold the same inset while the form scrolls. */
    margin-top: calc(-1 * (1rem + 2.7rem));
  }

  .scope-compact-mode body.scope-tab-client_report .scope-report-editor-actions {
    margin-top: calc(-1 * (1rem + 2.247rem));
  }
}

.scope-report-preview-shell {
  display: grid;
  gap: 0.8rem;
}

.scope-report-preview-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.scope-report-hero-actions {
  align-items: center;
}

.scope-report-export-menu {
  position: relative;
}

.scope-report-export-split {
  display: inline-flex;
  align-items: stretch;
}

.scope-report-export-split .scope-btn {
  position: relative;
  border-radius: 0;
}

.scope-report-export-split .scope-report-export-primary {
  border-radius: var(--scope-radius-sm) 0 0 var(--scope-radius-sm);
}

.scope-report-export-split .scope-report-export-caret {
  min-width: 2.75rem;
  margin-left: -1px;
  border-radius: 0 var(--scope-radius-sm) var(--scope-radius-sm) 0;
  padding-inline: 0.72rem;
}

.scope-report-export-split .scope-btn:focus-visible {
  z-index: 1;
}

.scope-report-export-menu [data-report-html-menu-trigger] .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 120ms ease;
}

.scope-report-export-menu.is-open [data-report-html-menu-trigger] .icon {
  transform: rotate(180deg);
}

.scope-report-export-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  min-width: 12rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--scope-control-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-surface);
  padding: 0.32rem;
  box-shadow: var(--scope-shadow-card);
}

.scope-report-export-panel[hidden] {
  display: none;
}

.scope-report-export-panel button {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  border-radius: var(--scope-radius-sm);
  background: transparent;
  color: var(--scope-text);
  padding: 0.55rem 0.68rem;
  font: inherit;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.scope-report-export-panel button:hover,
.scope-report-export-panel button:focus-visible {
  background: var(--scope-control-hover-bg);
  color: var(--scope-purple-dark);
  outline: 0;
}

.scope-report-export-panel button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--scope-brand-purple-control);
}

.scope-report-export-panel .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.scope-report-export-status {
  min-height: 1.4rem;
  margin: 0;
  color: var(--scope-text-muted);
  font-size: 0.84rem;
  text-align: right;
}

.scope-report-preview {
  overflow: auto;
  border: 1px solid var(--scope-border);
  border-radius: 0.65rem;
  background: #e4e4e7;
  padding: clamp(0.75rem, 2.5vw, 2rem);
}

.scope-report-dialog {
  width: min(calc(100% - 2rem), 34rem);
  border: 1px solid var(--scope-control-border);
  border-radius: 0.7rem;
  background: var(--scope-surface);
  color: var(--scope-text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
  padding: 1.25rem;
}

.scope-report-dialog::backdrop {
  background: rgba(15, 23, 42, 0.66);
}

.scope-report-dialog h2 {
  margin: 0;
  font-size: 1.2rem;
}

.scope-report-dialog p,
.scope-report-dialog ul {
  color: var(--scope-text-muted);
  line-height: 1.5;
}

.scope-report-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.15rem;
}

/* The preview is deliberately light even when the application is dark. */
.scope-report-preview .client-scope-report {
  --report-purple: #4c1d95;
  --report-purple-soft: #f5f3ff;
  --report-text: #18181b;
  --report-muted: #52525b;
  --report-border: #d4d4d8;
  width: min(100%, 60rem);
  margin: 0 auto;
  padding: 2.6rem;
  background: #fff;
  color: var(--report-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 0 3px 16px rgba(24, 24, 27, 0.14);
}

.scope-report-preview .report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.9rem;
  border-top: 7px solid var(--report-purple);
  padding-top: 1.5rem;
}

.scope-report-preview .report-identity {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  min-width: 0;
}

.scope-report-preview .report-logo {
  width: 5.5rem;
  max-height: 4rem;
  object-fit: contain;
  object-position: left top;
}

.scope-report-preview .report-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--report-purple);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scope-report-preview .client-scope-report h1 {
  margin: 0;
  color: var(--report-text);
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.scope-report-preview .client-scope-report h2 {
  margin: 0 0 0.9rem;
  color: var(--report-text);
  font-size: 1.22rem;
}

.scope-report-preview .report-meta,
.scope-report-preview .report-notes,
.scope-report-preview .report-hosts {
  color: var(--report-muted);
}

.scope-report-preview .report-meta {
  min-width: 12rem;
  font-size: 0.88rem;
}

.scope-report-preview .report-meta div + div {
  margin-top: 0.5rem;
}

.scope-report-preview .report-meta strong {
  display: block;
  color: var(--report-text);
}

.scope-report-preview .report-contact-line {
  display: block;
}

.scope-report-preview table {
  width: 100%;
  border-collapse: collapse;
  color: var(--report-text);
}

.scope-report-preview caption {
  margin-bottom: 0.65rem;
  color: var(--report-text);
  font-size: 1.18rem;
  font-weight: 800;
  text-align: left;
}

.scope-report-preview caption.report-caption-detail {
  display: table-caption;
  color: var(--report-muted);
  font-size: 0.79rem;
  font-weight: 400;
}

.scope-report-preview th,
.scope-report-preview td {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--report-border);
  color: var(--report-text);
  text-align: left;
  vertical-align: top;
}

.scope-report-preview thead th {
  background: var(--report-purple-soft);
  color: var(--report-purple);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scope-report-preview .report-number {
  text-align: right;
  white-space: nowrap;
}

.scope-report-preview .report-detail {
  display: block;
  margin-top: 0.2rem;
  color: var(--report-muted);
  font-size: 0.79rem;
  font-weight: 400;
}

.scope-report-preview .report-total th,
.scope-report-preview .report-total td {
  border-top: 2px solid var(--report-purple);
  font-weight: 800;
}

.scope-report-preview .report-limitations {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--report-purple);
  background: var(--report-purple-soft);
  color: #3f3f46;
  font-size: 0.84rem;
}

.scope-report-preview .report-limitations ul {
  margin: 0;
  padding-left: 1.25rem;
}

.scope-report-preview .report-notes {
  margin-top: 1.25rem;
  font-size: 0.82rem;
}

.scope-report-preview .report-notes p {
  margin: 0;
}

.scope-report-preview .report-notes p + p {
  margin-top: 0.3rem;
}

.scope-report-preview .report-note {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--report-purple);
  background: var(--report-purple-soft);
  color: #3f3f46;
  font-size: 0.86rem;
}

.scope-report-preview .report-note strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--report-purple);
}

.scope-report-preview .report-note p {
  margin: 0;
}

.scope-report-preview .report-supporting {
  margin-top: 3.4rem;
}

.scope-report-preview .report-supporting + .report-supporting {
  margin-top: 1.5rem;
}

.scope-report-preview .report-supporting-heading {
  padding-top: 1.6rem;
  border-top: 2px solid var(--report-purple);
}

.scope-report-preview .report-supporting + .report-supporting .report-supporting-heading {
  padding-top: 1.25rem;
}

.scope-report-preview .report-terminal-row > th,
.scope-report-preview .report-terminal-row > td {
  border-bottom: 0;
}

.scope-report-preview .report-inventory-table td {
  width: 50%;
}

.scope-report-preview .report-metrics {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.scope-report-preview .report-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0;
}

.scope-report-preview .report-metrics dt {
  color: var(--report-muted);
}

.scope-report-preview .report-metrics dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.scope-report-preview .report-sources td:last-child {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .scope-report-pricing-meta,
  .scope-report-service-fields,
  .scope-report-pdf-source {
    grid-template-columns: 1fr;
  }

  body.scope-tab-client_report .scope-run-tools,
  .scope-report-hero-actions {
    justify-content: flex-start;
  }

  .scope-report-preview .client-scope-report {
    padding: 1.5rem;
  }

  .scope-report-preview .report-header {
    display: block;
  }

  .scope-report-preview .report-meta {
    margin-top: 1.2rem;
  }

  .scope-report-preview .report-number {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .scope-report-details-grid,
  .scope-report-config-grid,
  .scope-report-lower-grid {
    grid-template-columns: 1fr;
  }

  .scope-report-field {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: var(--scope-report-control-width);
  }

  .scope-report-support-note {
    max-width: none;
  }

  .scope-report-support-note textarea {
    grid-column: 1;
  }

  .scope-report-project-picker {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: var(--scope-report-control-width);
  }

  .scope-report-project-help {
    margin-left: 0;
  }

  .scope-report-field small {
    grid-column: 1;
  }

  .scope-report-logo-state {
    margin-left: 0;
  }

  .scope-report-preview .report-inventory-table,
  .scope-report-preview .report-inventory-table thead,
  .scope-report-preview .report-inventory-table tbody,
  .scope-report-preview .report-inventory-table tr,
  .scope-report-preview .report-inventory-table th,
  .scope-report-preview .report-inventory-table td {
    display: block;
    width: 100%;
  }

  .scope-report-preview .report-inventory-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .scope-report-preview .report-inventory-table td::before {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--report-purple);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-heading);
  }
}

@container (max-width: 640px) {
  .scope-report-details-grid,
  .scope-report-config-grid,
  .scope-report-lower-grid,
  .scope-report-pricing-meta,
  .scope-report-service-fields,
  .scope-report-pdf-source {
    grid-template-columns: 1fr;
  }

  .scope-report-field small {
    grid-column: 1;
  }

  .scope-report-field {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: var(--scope-report-control-width);
  }

  .scope-report-pdf-source-controls {
    flex-wrap: wrap;
  }

  .scope-report-support-note {
    max-width: none;
  }

  .scope-report-logo-state {
    margin-left: 0;
  }

  .scope-report-validity-row {
    column-gap: 0.5rem;
  }

  .scope-report-pricing-meta {
    --scope-report-control-width: min(
      var(--scope-report-fitted-control-width),
      calc((100cqi - var(--scope-report-label-width) - var(--scope-report-field-gap) - var(--scope-report-field-gap)) / 2)
    );
  }

  .scope-report-validity-controls {
    gap: 0.5rem;
  }

  .scope-report-validity-toggle {
    font-size: 0.75rem;
  }

  .scope-report-remediation-rate {
    width: 100%;
    margin-left: 0;
  }

}

.scope-compact-mode body .scope-report-service-block {
  padding-block: 0.95rem;
}

/* ==========================================================================
   PDF Scope — post-run executive summary
   ==========================================================================
   A real table, not a grid of divs: it is tabular data, a screen reader should
   announce it as one, and it has to survive copy-paste into an email. The
   on-screen form and the copied form are deliberately identical.
   ========================================================================== */

.scope-pdf-status-done .scope-pdf-status-main {
  width: 100%;
  align-items: start;
  justify-items: start;
  text-align: left;
}

.scope-pdf-status-done {
  align-items: flex-start;
}

.scope-pdf-status-done .scope-pdf-status-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.scope-pdf-summary-table {
  width: max-content;
  max-width: 100%;
  justify-self: start;
  border-collapse: collapse;
  margin: 0;
  text-align: left;
}

.scope-pdf-summary-table caption {
  text-align: left;
  padding: 0 0 0.35rem;
  color: var(--scope-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.scope-pdf-summary-table th,
.scope-pdf-summary-table td {
  padding: 0.16rem 0.9rem 0.16rem 0;
  border: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.scope-pdf-summary-table th {
  text-align: left;
  color: var(--scope-text);
  font-weight: 600;
  white-space: nowrap;
}

/* The figures are what a prospect quotes back, so they lead. Tabular numerals
   keep the column aligned as counts change during a run. */
.scope-pdf-summary-table td.align-right {
  color: var(--scope-text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.scope-pdf-summary-note-cell {
  color: var(--scope-text-muted);
}

.scope-pdf-summary-filter {
  color: var(--scope-brand-purple-text);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  cursor: pointer;
}

.scope-pdf-summary-filter:hover,
.scope-pdf-summary-filter:focus-visible {
  color: var(--scope-brand-purple-hover);
}

.scope-pdf-summary-table tr.is-error > * {
  background: var(--scope-red-bg);
  color: var(--scope-red);
}

.scope-pdf-summary-table tr.is-error .scope-pdf-summary-filter {
  color: var(--scope-red);
}

/* While anything is unreadable the totals are a floor, not a total. */
.scope-pdf-summary-note {
  --scope-pdf-summary-note-inline-padding: 0.55rem;
  display: inline-block;
  width: fit-content;
  /* Keep the warning outline while aligning its text—not the padded box—with
     the labels above it. The extra pixel accounts for the outline itself. */
  margin: 0.16rem 0 0 calc(-1 * var(--scope-pdf-summary-note-inline-padding) - 1px);
  max-width: min(100%, 46rem);
  padding: 0.38rem var(--scope-pdf-summary-note-inline-padding);
  border: 1px solid var(--scope-amber-border);
  border-radius: 0.45rem;
  background: var(--scope-amber-bg);
  color: var(--scope-amber);
  font-size: 0.82rem;
  font-weight: 600;
}

.scope-pdf-summary-note[hidden] {
  display: none;
}

/* Completion time is run metadata, not a result. Keep it outside the semantic
   summary table so Copy summary remains focused on scope figures. */
.scope-pdf-completed-runtime {
  margin: 0.55rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.scope-pdf-completed-runtime[hidden] {
  display: none;
}

/* Creation-date enrichment is a distinct, background phase. It sits between
   the settled page totals and the document toolbar so page completion never
   disappears while metadata continues. */
.scope-pdf-metadata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 0.72rem 1rem;
  border: 1px solid var(--scope-border);
  border-radius: 0.6rem;
  background: var(--scope-surface);
}

.scope-pdf-metadata-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.85rem;
  font-size: 0.84rem;
  color: var(--scope-text-muted);
}

.scope-pdf-metadata-copy strong {
  color: var(--scope-text);
}

.scope-pdf-metadata-copy [data-pdf-metadata-coverage],
.scope-pdf-metadata-copy [data-pdf-metadata-progress] {
  font-variant-numeric: tabular-nums;
}

.scope-pdf-metadata-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.scope-pdf-metadata-actions > [hidden] {
  display: none;
}

.scope-pdf-metadata-progressbar {
  grid-column: 1 / -1;
  height: 0.3rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--scope-purple-soft);
}

.scope-pdf-metadata-progressbar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--scope-brand-purple);
  transition: width 180ms ease;
}

@media (max-width: 48rem) {
  .scope-pdf-metadata {
    grid-template-columns: 1fr;
  }

  .scope-pdf-metadata-actions {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Add Scope — no layout shift when switching input method
   ========================================================================== */

/* DOM order is dropzone -> toggle -> panel, so in paste mode the toggle jumped
   above the textarea. Reordering the grid puts the textarea in the dropzone's
   slot and leaves the button exactly where it was, without touching the DOM
   order that tests assert. */
.scope-import-form-v02 .scope-paste-direct:not([hidden]) {
  order: -1;
}

/* Same footprint as the dropzone, so nothing resizes when toggling. Autogrow and
   the max-height cap still apply on top of this. */
.scope-import-form-v02 .scope-paste-direct textarea {
  min-height: 9rem;
}

/* ---------------------------------------------------- inline website label -- */

/* .scope-import-form label is display:grid, which is what stacked this. The
   label reads as part of the control rather than a caption above it. */
.scope-import-form-v02 .scope-website-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scope-import-form-v02 .scope-website-label > span {
  flex: 0 0 auto;
  color: var(--scope-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.scope-import-form-v02 .scope-website-label > input {
  flex: 1 1 auto;
  min-width: 0;
}

/* An inline label that squeezes the input on a phone is worse than a stacked
   one, so it stacks again when there is no room. */
@media (max-width: 34rem) {
  .scope-import-form-v02 .scope-website-label {
    display: grid;
    gap: 0.35rem;
  }
}

/* The module read top-heavy: card padding plus two stacked margins above the
   first control. */
body.scope-tab-add .scope-import {
  margin-top: 0.85rem;
}

.scope-import-form-v02 {
  margin-top: 0.6rem;
}

/* ==========================================================================
   Shared compact data modules — Overview, Rule Candidates, and PDF Scope
   ========================================================================== */

/* These three analysis views carry the same kind of dense inventory data.
   Keep their surfaces visibly layered above the page without inflating their
   controls or rows. The stronger outline/shadow is intentionally separate from
   --scope-border, which remains the quieter token for internal dividers. */
body.scope-tab-overview .scope-dashboard-module,
body.scope-tab-overview .scope-dashboard-kpi,
body.scope-tab-rules .scope-rules-grid .scope-card,
body.scope-tab-rules .scope-rules-grid .scope-url-list,
body.scope-tab-rules .scope-rule-view-empty,
body.scope-tab-regex .scope-rule-view-empty,
body.scope-tab-regex .scope-regex-summary,
body.scope-tab-regex .scope-regex-list,
body.scope-tab-pdf_scope :is(.scope-pdf-status, .scope-pdf-notice, .scope-pdf-toolbar, .scope-pdf-table-wrap) {
  border-color: var(--scope-data-module-border);
  background-color: var(--scope-surface);
  box-shadow: var(--scope-data-module-shadow);
}

/* PDF Scope keeps its compact vertical rhythm, but each functional layer now
   has a clear edge against the page and against its neighbours. */
body.scope-tab-pdf_scope .scope-pdf-scope {
  gap: 0.85rem;
}

body.scope-tab-pdf_scope .scope-pdf-status,
body.scope-tab-pdf_scope .scope-pdf-notice,
body.scope-tab-pdf_scope .scope-pdf-table-wrap {
  border-radius: var(--scope-radius-lg);
}

body.scope-tab-pdf_scope .scope-pdf-toolbar {
  border-radius: var(--scope-radius-md);
  background: var(--scope-data-module-header);
}

body.scope-tab-pdf_scope .scope-pdf-table-wrap {
  background: var(--scope-surface);
}

/* One header and row rhythm across every analysis table. */
body.scope-tab-overview :is(.scope-overview-table, .scope-shape-table),
body.scope-tab-rules .scope-rules-table,
body.scope-tab-pdf_scope .scope-pdf-table {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

body.scope-tab-overview :is(.scope-overview-table, .scope-shape-table) thead th,
body.scope-tab-rules .scope-rules-table thead th,
body.scope-tab-pdf_scope .scope-pdf-table thead th {
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--scope-data-module-border);
  background: var(--scope-data-module-header);
  box-shadow: none;
  color: var(--scope-text-muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body.scope-tab-overview :is(.scope-overview-table, .scope-shape-table) tbody td,
body.scope-tab-rules .scope-rules-table tbody td,
body.scope-tab-pdf_scope .scope-pdf-table tbody td {
  padding: 0.34rem 0.6rem;
  border-bottom-color: var(--scope-data-module-row-border);
  vertical-align: middle;
}

body.scope-tab-overview :is(.scope-overview-table, .scope-shape-table) tbody tr:hover,
body.scope-tab-pdf_scope .scope-pdf-table tbody tr:hover {
  background: var(--scope-data-module-row-hover);
}

/* Overview tables become integrated data modules instead of tables nested
   inside a second padded card. This also stops a short table from stretching
   to the height of its longer neighbour. */
body.scope-tab-overview .scope-metrics {
  margin-top: 1rem;
}

body.scope-tab-overview .scope-impact-map {
  margin-top: 1rem;
  padding: 1rem;
}

body.scope-tab-overview .scope-overview-grid {
  align-items: start;
  gap: 1rem;
  margin-top: 1rem;
}

body.scope-tab-overview .scope-overview-shapes {
  margin-top: 1rem;
}

body.scope-tab-overview .scope-overview-grid .scope-dashboard-module.scope-card-padded,
body.scope-tab-overview .scope-overview-shapes.scope-dashboard-module.scope-card-padded {
  overflow: hidden;
  margin-right: 0;
  padding: 0;
}

body.scope-tab-overview .scope-overview-grid .scope-dashboard-module > .scope-section-heading:first-child,
body.scope-tab-overview .scope-overview-shapes > .scope-section-heading:first-child {
  min-height: 2.65rem;
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-bottom: 1px solid var(--scope-data-module-border);
  background: var(--scope-data-module-header);
}

body.scope-tab-overview .scope-overview-grid .scope-card-title,
body.scope-tab-overview .scope-overview-shapes .scope-card-title {
  font-size: 0.92rem;
}

body.scope-tab-overview .scope-overview-grid .scope-table-wrap,
body.scope-tab-overview .scope-overview-shapes .scope-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.scope-tab-overview .scope-overview-grid .scope-dashboard-module > .scope-muted {
  padding: 0.72rem;
}

body.scope-tab-overview .scope-overview-table tfoot.scope-table-footer td {
  border-top-color: var(--scope-data-module-border);
  background: var(--scope-surface);
}

/* Rule Candidates keeps its review/detail split, but the queue now follows the
   same compact header and table language as PDF Scope. */
body.scope-tab-rules .scope-rules-grid {
  gap: 1rem;
  margin-top: 1rem;
}

body.scope-tab-rules .scope-rules-table-card > .scope-card-header {
  min-height: 2.65rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--scope-data-module-border);
  background: var(--scope-data-module-header);
}

body.scope-tab-rules .scope-rules-table-shell {
  border-top: 0;
}

body.scope-tab-rules .scope-rules-grid .scope-url-list-header {
  border-bottom-color: var(--scope-data-module-border);
  background: var(--scope-data-module-header);
}

body.scope-tab-regex .scope-merged-output {
  border-color: var(--scope-data-module-border);
  box-shadow: var(--scope-data-module-shadow);
}

body.scope-tab-rules .scope-rules-table th {
  white-space: nowrap;
}

body.scope-tab-rules .scope-rules-table .scope-candidate-row:not(.is-approved):not(.is-ignored):not(.is-selected):hover td,
body.scope-tab-rules .scope-rules-table .scope-candidate-row:not(.is-approved):not(.is-ignored):not(.is-selected):focus-visible td {
  background: var(--scope-data-module-row-hover);
}

body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):hover td,
body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-approved:not(.is-selected):focus-visible td {
  background: var(--scope-rule-approved-row-hover);
}

body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-ignored:not(.is-selected):hover td,
body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-ignored:not(.is-selected):focus-visible td {
  background: var(--scope-rule-ignored-row-hover);
}

body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-selected:hover td,
body.scope-tab-rules .scope-rules-table .scope-candidate-row.is-selected:focus-visible td {
  background: var(--scope-data-module-row-selected-hover);
}

@media (max-width: 760px) {
  body.scope-tab-overview .scope-overview-grid,
  body.scope-tab-rules .scope-rules-grid {
    gap: 0.85rem;
  }

  body.scope-tab-overview .scope-overview-grid .scope-dashboard-module > .scope-section-heading:first-child,
  body.scope-tab-overview .scope-overview-shapes > .scope-section-heading:first-child {
    min-height: 0;
  }
}

/* Inset configuration and summary modules use one cross-theme layer. Tables,
   result panels, page shells, and controls deliberately keep their existing
   surfaces so the hierarchy remains visible. This block stays last so older
   route-specific surface rules cannot flatten the light theme. */
.scope-project-pdf-picker,
.scope-project-overview-metric,
body.scope-tab-overview .scope-dashboard-kpi,
body.scope-tab-overview .scope-impact-map,
body.scope-tab-insights .scope-insight-metrics .scope-metric,
body.scope-tab-insights .scope-insight-card,
body.scope-tab-insights .scope-insight-master,
body.scope-tab-insights .scope-insight-detail {
  border-color: var(--scope-inset-border);
  background-color: var(--scope-inset-surface);
}

body.scope-tab-insights .scope-insight-card:hover {
  background-color: var(--scope-inset-surface);
}

/* The noise-map shell stays an inset module, while its linked data rows use
   the same white reading surface as the Overview tables below it. Keep dark
   mode on its existing uninterrupted inset surface. */
html:not(.scope-dark-mode) body.scope-tab-overview .scope-impact-map .scope-impact-row {
  background-color: #fff;
}

html:not(.scope-dark-mode) body.scope-tab-overview .scope-impact-map .scope-impact-row:hover,
html:not(.scope-dark-mode) body.scope-tab-overview .scope-impact-map .scope-impact-row:focus-visible {
  background-color: var(--scope-data-module-row-hover);
}

/* Project-scoped analysis routes keep member workspaces visible without
   creating a synthetic combined inventory. */
.scope-project-route-navigator {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.9rem;
  border: 1px solid var(--scope-inset-border);
  border-radius: var(--scope-radius-md);
  background: var(--scope-inset-surface);
}

.scope-project-route-navigator > h2 {
  margin: 0;
}

.scope-project-route-navigator .scope-table-wrap {
  margin: 0;
}

.scope-project-route-navigator tr.is-current > td {
  background: var(--scope-brand-purple-soft);
}

/* Approved decisions stay visible when their derived regex is not yet safe
   to export. Only current exact-parity rows receive copy/merge controls. */
.scope-regex-exclusion-note {
  margin: 0.45rem 0 0;
  color: var(--scope-text-muted);
  font-size: 0.78rem;
}

.scope-regex-table tbody .scope-regex-rule.is-unverified > td {
  background: var(--scope-surface-soft);
}

.scope-regex-rule.is-unverified .scope-regex-line {
  opacity: 0.72;
}

.scope-regex-verification-message {
  display: block;
  margin-top: 0.35rem;
  color: var(--scope-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.scope-regex-regeneration-action {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--scope-brand-purple-text);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.scope-regex-regeneration-action:hover {
  color: var(--scope-brand-purple-hover);
}

.scope-regex-regeneration-action:focus-visible {
  border-radius: 0.2rem;
  outline: 3px solid var(--scope-brand-ring);
  outline-offset: 2px;
}

.scope-regex-regeneration-action:disabled {
  color: var(--scope-text-muted);
  cursor: wait;
}