/* Layout composition only: 1rem type baseline / four, no independent palette. */
:root { --layout-unit: calc(var(--text-body-lg) / 4); --teaser-display-size: calc((var(--text-h1) + var(--text-hero)) / 2); }
/* ==========================================================================
   CROSCOPE.RU - PRODUCT DESIGN SYSTEM & LAYOUT ARCHITECTURE (v3.1 Quiet Cabinet)
   Aesthetic: Noble Graphite + Royal Iris accent + semantic data only
   Strict Compliance: /workspace/croffer/brand/tokens.css
   Viewports: Desktop (1440px) & Mobile (390px) Zero-Overflow Guarantee
   ========================================================================== */

*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  font-size:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background-color:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-sans);
  overflow-x:hidden;
}

body {
  min-height:100vh;
  background-color:var(--bg-void);
  background-image:radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand-primary) 4%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--text-on-accent) 1.5%, transparent) calc(var(--ui-rail-width) * 0.5), transparent calc(var(--ui-rail-width) * 0.5)),
    linear-gradient(90deg, color-mix(in srgb, var(--text-on-accent) 1.5%, transparent) calc(var(--ui-rail-width) * 0.5), transparent calc(var(--ui-rail-width) * 0.5));
  background-size:100% 100%, calc(var(--layout-unit) * 8) calc(var(--layout-unit) * 8), calc(var(--layout-unit) * 8) calc(var(--layout-unit) * 8);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.5;
  overflow-x:hidden;
  width:100%;
}

a {
  color:inherit;
  text-decoration:none;
}

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

img, svg {
  display:block;
  max-width:100%;
}

/* ==========================================================================
   1. TOP NAVIGATION & WORKSPACE CHROME
   ========================================================================== */
.top-shell {
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg-glass-heavy);
  backdrop-filter:blur(calc(var(--layout-unit) * 4));
  -webkit-backdrop-filter:blur(calc(var(--layout-unit) * 4));
  border-bottom:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

.top-shell__inner {
  max-width:calc(var(--layout-unit) * 360);
  margin:0 auto;
  padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 7);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 4);
}

.brand-cluster {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 3.5);
  flex-shrink:0;
}

.brand-logo-full {
  height:calc(var(--layout-unit) * 8.5);
  width:auto;
}

.brand-logo-mark {
  display:none;
  height:calc(var(--layout-unit) * 8);
  width:calc(var(--layout-unit) * 8);
}

.workspace-domain-bar {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 3);
  min-width:calc(var(--layout-unit) * 78);
  max-width:calc(var(--layout-unit) * 110);
  flex:1;
  transition:border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.workspace-domain-bar:focus-within {
  border-color:var(--border-focus);
  box-shadow:0 0 0 calc(var(--layout-unit) * 1) var(--brand-primary-dim);
}

.workspace-domain-bar__protocol {
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-muted);
  font-weight:600;
  user-select:none;
}

.workspace-domain-bar__input {
  background:transparent;
  border:none;
  outline:none;
  font-family:var(--font-mono);
  font-size:var(--text-body);
  color:var(--text-primary);
  width:100%;
  min-width:0;
}

.workspace-domain-bar__status {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 1.5);
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);
  border-radius:var(--radius-xs);
  background:var(--bg-subtle);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--text-secondary);
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 1.5);
  background:var(--bg-surface);
  padding:calc(var(--layout-unit) * 1);
  border-radius:var(--radius-md);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

.main-nav__link {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  padding:calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  font-size:var(--text-body);
  font-weight:500;
  color:var(--text-secondary);
  transition:all var(--duration-fast) ease;
  white-space:nowrap;
  border:calc(var(--ui-rail-width) * 0.5) solid transparent;
}

.main-nav__link:hover {
  color:var(--text-primary);
  background:var(--bg-elevated);
}

.main-nav__link.is-active {
  color:var(--brand-primary);
  background:var(--brand-primary-dim);
  border-color:var(--brand-primary-border);
  box-shadow:none;
}

.main-nav__icon {
  width:calc(var(--layout-unit) * 4.5);
  height:calc(var(--layout-unit) * 4.5);
  flex-shrink:0;
  opacity:1;
  filter:grayscale(1);
}

.main-nav__link.is-active .main-nav__icon {
  filter:none;
  opacity:1;
}

.icon-chrome {
  color:var(--text-secondary);
  filter:grayscale(1);
  opacity:1;
}

.page-header__eyebrow img,
.metric-card__top img {
  filter:grayscale(1);
  opacity:1;
}

.main-nav__badge {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  font-weight:700;
  padding:0 calc(var(--layout-unit) * 1);
  min-width:calc(var(--layout-unit) * 4.5);
  height:calc(var(--layout-unit) * 4.5);
  justify-content:center;
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-pill);
  background:var(--severity-critical);
  color:var(--text-on-accent);
  border:none;
}

.main-nav__badge--brand {
  background:transparent;
  color:var(--text-secondary);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  min-width:auto;
  padding:calc(var(--ui-rail-width) * 0.5) calc(var(--layout-unit) * 2);
  height:auto;
  font-weight:600;
}

.user-pill {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 2.5);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-secondary);
  flex-shrink:0;
}

.user-pill__dot {
  width:calc(var(--layout-unit) * 1.5);
  height:calc(var(--layout-unit) * 1.5);
  border-radius:var(--radius-pill);
  background:var(--text-muted);
  box-shadow:none;
}

/* ==========================================================================
   2. PAGE CONTAINER & SECTION HEADERS
   ========================================================================== */
.page-shell {
  max-width:calc(var(--layout-unit) * 360);
  margin:0 auto;
  padding:calc(var(--layout-unit) * 7) calc(var(--layout-unit) * 7) calc(var(--layout-unit) * 16);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 6);
}

.page-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 5);
  padding-bottom:calc(var(--layout-unit) * 5);
  border-bottom:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

.page-header__eyebrow {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:calc(var(--layout-unit) * 2);
}

.page-header__title {
  font-size:var(--text-h1);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 3);
  flex-wrap:wrap;
}

.page-header__subtitle {
  margin-top:calc(var(--layout-unit) * 1.5);
  font-size:var(--text-body);
  color:var(--text-secondary);
  max-width:calc(var(--layout-unit) * 180);
  line-height:1.5;
}

.page-header__actions {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2.5);
  flex-shrink:0;
  flex-wrap:wrap;
}

/* ==========================================================================
   3. BUTTONS, INPUTS, BADGES & TELEMETRY PILLS
   ========================================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--layout-unit) * 2);
  padding:calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 4);
  border-radius:var(--radius-sm);
  font-size:var(--text-body);
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  border:calc(var(--ui-rail-width) * 0.5) solid transparent;
  transition:all var(--duration-fast) var(--ease-snappy);
  white-space:nowrap;
  user-select:none;
}

.btn--primary {
  background:var(--brand-primary);
  color:var(--text-on-accent);
  box-shadow:none;
}

.btn--primary:hover {
  background:var(--brand-primary-hover);
  box-shadow:none;
  transform:translateY(calc(var(--ui-rail-width) * -0.5));
}

.btn--secondary {
  background:var(--bg-elevated);
  color:var(--text-primary);
  border-color:var(--border-default);
}

.btn--secondary:hover {
  background:var(--bg-subtle);
  border-color:var(--border-strong);
}

.btn--ghost {
  background:transparent;
  color:var(--text-secondary);
  border-color:var(--border-subtle);
}

.btn--ghost:hover {
  color:var(--text-primary);
  background:var(--bg-surface);
  border-color:var(--border-default);
}

.btn--danger {
  background:var(--severity-critical-bg);
  color:var(--severity-critical);
  border-color:var(--severity-critical-border);
}

.btn--sm {
  padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 3);
  font-size:var(--text-caption);
  border-radius:var(--radius-xs);
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 1.5);
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
  border:calc(var(--ui-rail-width) * 0.5) solid transparent;
}

.badge--critical {
  background:var(--severity-critical-bg);
  color:var(--severity-critical-fg);
  border-color:var(--severity-critical-border);
}

.badge--major {
  background:var(--severity-major-bg);
  color:var(--severity-major-fg);
  border-color:var(--severity-major-border);
}

.badge--minor {
  background:var(--severity-minor-bg);
  color:var(--severity-minor-fg);
  border-color:var(--severity-minor-border);
}

.badge--fast {
  background:var(--speed-fast-bg);
  color:var(--speed-fast);
  border-color:var(--speed-fast-border);
}

.badge--moderate {
  background:var(--speed-moderate-bg);
  color:var(--speed-moderate);
  border-color:var(--speed-moderate-border);
}

.badge--slow {
  background:var(--speed-slow-bg);
  color:var(--speed-slow);
  border-color:var(--speed-slow-border);
}

.badge--network {
  background:var(--severity-network-bg);
  color:var(--severity-network);
  border-color:var(--severity-network-border);
}

.badge--brand {
  background:var(--brand-primary-dim);
  color:var(--brand-primary);
  border-color:var(--brand-primary-border);
}

.badge--neutral {
  background:var(--bg-subtle);
  color:var(--text-secondary);
  border-color:var(--border-default);
}

/* Segmented Controls */
.segmented {
  display:inline-flex;
  align-items:center;
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 1);
  gap:calc(var(--layout-unit) * 0.5);
}

.segmented__btn {
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-xs);
  font-size:var(--text-caption);
  font-weight:600;
  color:var(--text-secondary);
  background:transparent;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 1.5);
  white-space:nowrap;
  transition:all var(--duration-fast) ease;
}

.segmented__btn.is-active {
  background:var(--bg-elevated);
  color:var(--text-primary);
  box-shadow:var(--shadow-card);
}

/* ==========================================================================
   4. CARDS, GRIDS & TELEMETRY SURFACES
   ========================================================================== */
.card {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-lg);
  box-shadow:none;
  padding:calc(var(--layout-unit) * 5);
  position:relative;
}

.card--elevated {
  background:var(--bg-elevated);
  border-color:var(--border-default);
}

.card--brand-glow {
  /* v3.1:glow banned on cabinet cards */
  border-color: var(--border-default);
  box-shadow:none;
}

.card__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 3);
  margin-bottom:calc(var(--layout-unit) * 4);
}

.card__title {
  font-size:var(--text-h3);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2.5);
}

.card__subtitle {
  font-size:var(--text-caption);
  color:var(--text-secondary);
  margin-top:calc(var(--layout-unit) * 0.5);
}

.grid-4 {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 4);
}

.grid-3 {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 4);
}

.grid-2 {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 5);
}

.grid-sidebar-right {
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:calc(var(--layout-unit) * 5);
  align-items:start;
}

/* Metric Telemetry Card = Quiet KPI (v3.1) */
.metric-card,
.ui-kpi {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:calc(var(--layout-unit) * 4) calc(var(--layout-unit) * 4.5);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2.5);
  position:relative;
  overflow:hidden;
  box-shadow:none;
}

.metric-card::before {
  content:none;
}

.metric-card--moderate::before,
.metric-card--slow::before,
.metric-card--fast::before {
  content:none;
}

.metric-card__top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2);
}

.metric-card__label {
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.metric-card__value-row {
  display:flex;
  align-items:baseline;
  gap:calc(var(--layout-unit) * 2);
}

.metric-card__value,
.ui-kpi__value {
  font-family:var(--font-mono);
  font-size:var(--text-h1);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  color:var(--text-primary);
}

.metric-card__unit {
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-muted);
}

.metric-card__threshold {
  font-size:var(--text-caption);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2);
  padding-top:calc(var(--layout-unit) * 2);
  border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

/* Progress Bar */
.telemetry-bar {
  width:100%;
  height:calc(var(--layout-unit) * 1.5);
  background:var(--bg-subtle);
  border-radius:var(--radius-pill);
  overflow:hidden;
  display:flex;
}

.telemetry-bar__fill {
  height:100%;
  border-radius:var(--radius-pill);
}

/* ==========================================================================
   5. SECTION 1: SPEED & LANDING DISCOVERY COMPONENTS
   ========================================================================== */
.discovery-banner {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:calc(var(--layout-unit) * 4.5) calc(var(--layout-unit) * 5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 4);
  flex-wrap:wrap;
}

.discovery-flow {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2.5);
  flex-wrap:wrap;
}

.discovery-step {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-size:var(--text-caption);
}

.discovery-step__code {
  font-family:var(--font-mono);
  color:var(--text-secondary);
  font-size:var(--text-caption);
}

.pages-list {
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2.5);
}

.page-row {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:calc(var(--layout-unit) * 3.5) calc(var(--layout-unit) * 4);
  display:grid;
  grid-template-columns:minmax(calc(var(--layout-unit) * 50), 1.5fr) calc(var(--layout-unit) * 22.5) repeat(4, minmax(calc(var(--layout-unit) * 19.5), 1fr)) calc(var(--layout-unit) * 30);
  align-items:center;
  gap:calc(var(--layout-unit) * 3);
  transition:border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.page-row:hover {
  border-color:var(--border-default);
  background:var(--bg-elevated);
}

.page-row.is-selected {
  border-color:var(--brand-primary-border);
  background:var(--brand-primary-dim);
}

.page-row__url-wrap {
  min-width:0;
}

.page-row__type {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:calc(var(--layout-unit) * 0.5);
  display:block;
}

.page-row__url {
  font-family:var(--font-mono);
  font-size:var(--text-body);
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.page-row__cell {
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 0.5);
}

.page-row__cell-label {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--text-muted);
  text-transform:uppercase;
}

.page-row__cell-val {
  font-family:var(--font-mono);
  font-size:var(--text-body);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.score-ring {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--layout-unit) * 10.5);
  height:calc(var(--layout-unit) * 10.5);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--text-body);
  font-weight:700;
  border:calc(var(--layout-unit) * 0.5) solid var(--speed-fast);
  background:var(--speed-fast-bg);
  color:var(--speed-fast);
}

.score-ring--moderate {
  border-color:var(--speed-moderate);
  background:var(--speed-moderate-bg);
  color:var(--speed-moderate);
}

.score-ring--slow {
  border-color:var(--speed-slow);
  background:var(--speed-slow-bg);
  color:var(--speed-slow);
}

.priority-item {
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:calc(var(--layout-unit) * 4);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2.5);
}

.priority-item__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 3);
}

.priority-item__title {
  font-size:var(--text-body);
  font-weight:600;
  color:var(--text-primary);
}

.priority-item__meta {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  flex-wrap:wrap;
}

.priority-item__impact {
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  background:var(--bg-void);
  border-left:var(--ui-rail-width) solid var(--border-strong);
  font-size:var(--text-caption);
  color:var(--text-secondary);
}

/* ==========================================================================
   6. SECTION 2: X-RAY ERROR DETECTOR (ANNOTATED SCREENSHOT VIEWER)
   ========================================================================== */
.xray-workspace {
  display:grid;
  grid-template-columns:minmax(0, 1.28fr) minmax(0, 1fr);
  gap:calc(var(--layout-unit) * 5);
  align-items:start;
}

.xray-viewer-card {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.xray-toolbar {
  padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 4);
  background:var(--bg-elevated);
  border-bottom:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 3);
  flex-wrap:wrap;
}

.xray-browser-bar {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2.5);
  min-width:0;
}

.xray-browser-dots {
  display:flex;
  gap:calc(var(--layout-unit) * 1);
  flex-shrink:0;
}

.xray-browser-dots span {
  width:calc(var(--layout-unit) * 2);
  height:calc(var(--layout-unit) * 2);
  border-radius:var(--radius-pill);
  background:var(--border-strong);
}

.xray-browser-dots span:nth-child(1) { background:var(--severity-critical); }
.xray-browser-dots span:nth-child(2) { background:var(--severity-major); }
.xray-browser-dots span:nth-child(3) { background:var(--speed-fast); }

.xray-url-pill {
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2.5);
  border-radius:var(--radius-xs);
  background:var(--bg-void);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(var(--layout-unit) * 85);
}

/* Simulated Inspected Client Page inside .xray-stage */
.client-shot {
  position:relative;
  background:var(--bg-surface);
  color:var(--bg-void);
  padding:calc(var(--layout-unit) * 4.5);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 3.5);
  font-family:var(--font-sans);
  user-select:none;
}

.client-shot__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2.5);
  padding-bottom:calc(var(--layout-unit) * 3);
  border-bottom:calc(var(--ui-rail-width) * 0.5) solid var(--border-strong);
}

.client-shot__brand {
  font-weight:700;
  font-size:var(--text-body);
  color:var(--bg-void);
  letter-spacing:-0.02em;
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
}

.client-shot__nav {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2.5);
  font-size:var(--text-caption);
  color:var(--text-secondary);
}

/* Target #5: Icon button without aria-label */
.client-shot__icon-btn {
  position:relative;
  width:calc(var(--layout-unit) * 8.5);
  height:calc(var(--layout-unit) * 7.5);
  border-radius:var(--radius-xs);
  background:var(--border-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-primary);
  font-size:var(--text-micro);
  font-weight:700;
}

.client-shot__grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 3);
}

.client-product-card {
  background:var(--text-on-accent);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 2.5);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2);
  position:relative;
}

/* Target #3: Broken image 404 */
.client-broken-img {
  position:relative;
  height:calc(var(--layout-unit) * 23);
  border-radius:var(--radius-xs);
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) dashed var(--text-muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--layout-unit) * 1);
  padding:calc(var(--layout-unit) * 2);
  text-align:center;
}

.client-broken-img__code {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--severity-critical);
  font-weight:700;
}

.client-good-img {
  height:calc(var(--layout-unit) * 23);
  border-radius:var(--radius-xs);
  background:linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--text-micro);
  font-weight:600;
  color:var(--brand-primary);
}

/* Target #4: Layout overlap zone */
.client-overlap-zone {
  position:relative;
  padding:calc(var(--layout-unit) * 2);
  background:var(--severity-major-bg);
  border-radius:var(--radius-xs);
  min-height:calc(var(--layout-unit) * 12);
}

.client-overlap-title {
  font-size:var(--text-caption);
  font-weight:700;
  color:var(--bg-void);
  line-height:1.2;
}

.client-overlap-price {
  font-family:var(--font-mono);
  font-size:var(--text-body);
  font-weight:700;
  color:var(--bg-void);
  margin-top:calc(var(--layout-unit) * 1);
}

.client-overlap-badge {
  position:absolute;
  top:calc(var(--layout-unit) * 2.5);
  left:calc(var(--layout-unit) * 17);
  background:var(--severity-major);
  color:var(--text-on-accent);
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  font-weight:700;
  padding:calc(var(--layout-unit) * 0.5) calc(var(--layout-unit) * 1.5);
  border-radius:var(--radius-xs);
  opacity:1;
}

/* Target #2: Promo JS Error Box */
.client-promo-box {
  position:relative;
  background:var(--text-on-accent);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2.5);
  flex-wrap:wrap;
}

.client-promo-box__input {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  background:var(--bg-elevated);
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);
  border-radius:var(--radius-xs);
  color:var(--text-primary);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
}

.client-promo-box__err {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--severity-critical);
  font-weight:600;
}

/* Target #1: Broken CTA overlapped by sticky banner */
.client-cta-zone {
  position:relative;
  background:var(--bg-void);
  color:var(--text-on-accent);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 3.5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2.5);
  overflow:visible;
}

.client-cta-btn {
  background:var(--speed-fast);
  color:var(--bg-void);
  font-weight:700;
  font-size:var(--text-caption);
  padding:calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 3.5);
  border-radius:var(--radius-xs);
  position:relative;
}

.client-sticky-blocker {
  position:absolute;
  right:calc(var(--layout-unit) * 2);
  bottom:calc(var(--layout-unit) * 1);
  left:38%;
  background:var(--bg-glass-heavy);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--text-muted);
  color:var(--border-strong);
  font-size:var(--text-micro);
  padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 2);
  border-radius:var(--radius-xs);
  pointer-events:none;
}

/* Anchor wrapper so .xray-bbox locks 1:1 onto the defective DOM region */
.xray-target-anchor {
  position:relative;
  margin-top:calc(var(--layout-unit) * 1.5);
}

.xray-bbox--fill {
  top:calc(var(--layout-unit) * -1);
  left:calc(var(--layout-unit) * -1);
  right:calc(var(--layout-unit) * -1);
  bottom:calc(var(--layout-unit) * -1);
}

.xray-bbox .xray-pill {
  position:absolute;
  top:calc(var(--layout-unit) * -3);
  right:calc(var(--layout-unit) * 2);
  bottom:auto;
  max-width:calc(100% - calc(var(--layout-unit) * 12));
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:28;
}

/* Bug Cards List (Right column of Section 2) */
.bug-list {
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 3.5);
}

.bug-card {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:calc(var(--layout-unit) * 4.5);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 3);
  transition:border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  cursor:pointer;
  box-shadow:none;
}

.bug-card:hover,
.bug-card.is-active {
  border-color:var(--border-strong);
  background:var(--bg-elevated);
  box-shadow:none;
}

/* Severity rails win over hover/selection without recoloring neutral cards. */
.bug-card.bug-card--critical,
.bug-card[data-severity="critical"] {
  border-left:var(--ui-rail-width) solid var(--severity-critical-rail);
}

.bug-card.bug-card--major,
.bug-card[data-severity="major"],
.bug-card[data-severity="warning"] {
  border-left:var(--ui-rail-width) solid var(--severity-major-rail);
}

.bug-card.bug-card--minor,
.bug-card[data-severity="minor"],
.bug-card[data-severity="info"] {
  border-left:var(--ui-rail-width) solid var(--severity-minor-rail);
}

.bug-card__top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2);
  flex-wrap:wrap;
}

.bug-card__pin-group {
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  flex-wrap:wrap;
}

.pin-inline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:calc(var(--layout-unit) * 6.5);
  height:calc(var(--layout-unit) * 6.5);
  padding:0 calc(var(--layout-unit) * 1.5);
  border-radius:var(--radius-pill);
  background:var(--severity-critical);
  color:var(--text-on-accent);
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  font-weight:700;
  border:calc(var(--ui-rail-width) * 0.75) solid var(--text-on-accent);
}

.pin-inline--major {
  background:var(--severity-major);
  color:var(--bg-void);
}

.pin-inline--minor {
  background:var(--severity-minor);
  color:var(--bg-void);
}

.bug-card__title {
  font-size:var(--text-body-lg);
  font-weight:600;
  color:var(--text-primary);
  line-height:1.3;
}

.bug-formula {
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2);
}

.bug-formula__step {
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  background:var(--bg-void);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-size:var(--text-caption);
}

.bug-formula__label {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:calc(var(--layout-unit) * 1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 1.5);
}

.bug-formula__code {
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-secondary);
  word-break:break-all;
}

.bug-formula__step--impact {
  border-left:var(--ui-rail-width) solid var(--border-strong);
  background:var(--bg-void);
  color:var(--text-secondary);
}

.bug-formula__step--fix {
  border-left:var(--ui-rail-width) solid var(--border-strong);
  background:var(--bg-void);
  color:var(--text-secondary);
}

/* ==========================================================================
   7. SECTION 3: ALERTS & RADAR CHANGES
   ========================================================================== */
.radar-hero-card {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius:var(--radius-xl);
  padding:calc(var(--layout-unit) * 6);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 5);
}

.radar-hero-card__top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 5);
  flex-wrap:wrap;
}

.radar-hero-card__identity {
  display:flex;
  align-items:flex-start;
  gap:calc(var(--layout-unit) * 4);
}

.radar-icon-box {
  width:calc(var(--layout-unit) * 13);
  height:calc(var(--layout-unit) * 13);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:none;
  color:var(--text-secondary);
}

.radar-icon-box img {
  width:calc(var(--layout-unit) * 7);
  height:calc(var(--layout-unit) * 7);
}

.radar-meta-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 3);
  padding-top:calc(var(--layout-unit) * 4);
  border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

.radar-meta-item {
  background:var(--bg-void);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 3.5);
}

.radar-meta-item__label {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--text-muted);
  margin-bottom:calc(var(--layout-unit) * 1);
}

.radar-meta-item__val {
  font-family:var(--font-mono);
  font-size:var(--text-body);
  font-weight:600;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
}

.diff-row {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:calc(var(--layout-unit) * 4);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 2.5);
}

.diff-compare {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 2.5);
}

.diff-box {
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  line-height:1.5;
  word-break:break-word;
}

.diff-box--removed,
.diff-box--added {
  background:var(--bg-subtle);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-left-width:var(--ui-rail-width);
  color:var(--text-primary);
}
.diff-box--removed { border-left-color:var(--severity-critical-border); }
.diff-box--added { border-left-color:var(--speed-fast-border); }

.alert-catalog-grid {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 3.5);
}

.alert-type-card {
  background:var(--bg-surface);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:calc(var(--layout-unit) * 4);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 3);
  transition:border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.alert-type-card:hover {
  border-color:var(--border-default);
  transform:translateY(calc(var(--ui-rail-width) * -0.5));
}

.alert-type-card.is-preset {
  border-color:var(--brand-primary-border);
  background:var(--bg-surface);
}

.alert-type-card__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--layout-unit) * 2.5);
}

.alert-type-card__icon {
  width:calc(var(--layout-unit) * 10);
  height:calc(var(--layout-unit) * 10);
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.alert-type-card__icon img {
  width:calc(var(--layout-unit) * 5.5);
  height:calc(var(--layout-unit) * 5.5);
}

/* ==========================================================================
   8. UI KIT SWATCHES & SHOWCASE GRIDS
   ========================================================================== */
.swatch-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 3.5);
}

.swatch {
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-md);
  overflow:hidden;
}

.swatch__color {
  height:calc(var(--layout-unit) * 16);
  width:100%;
  border-bottom:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}

.swatch__meta {
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  display:flex;
  flex-direction:column;
  gap:calc(var(--layout-unit) * 1);
}

.swatch__name {
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  font-weight:600;
  color:var(--text-primary);
}

.swatch__hex {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--text-secondary);
}

.icon-showcase-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:calc(var(--layout-unit) * 3);
}

.icon-tile {
  background:var(--bg-elevated);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--layout-unit) * 2);
  text-align:center;
}

.icon-tile img {
  width:calc(var(--layout-unit) * 6);
  height:calc(var(--layout-unit) * 6);
}

.icon-tile__name {
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--text-secondary);
  word-break:break-all;
}

/* ==========================================================================
   9. MOBILE RESPONSIVE ARCHITECTURE (<= 960px and 390px primary target)
   Zero Horizontal Scroll, Clean Stacking, Preserved X-Ray Pin Coordinates
   ========================================================================== */
@media (max-width: 1100px) {
  .grid-4,
  .radar-meta-grid,
  .swatch-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .grid-3,
  .alert-catalog-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .xray-workspace,
  .grid-sidebar-right {
    grid-template-columns:1fr;
  }
  .page-row {
    grid-template-columns:1fr auto;
  }
}

@media (max-width: 760px) {
  .top-shell__inner {
    padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3.5);
    flex-wrap:wrap;
    gap:calc(var(--layout-unit) * 2.5);
  }

  .brand-logo-full {
    height:calc(var(--layout-unit) * 7);
  }

  .user-pill {
    padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);
    font-size:var(--text-micro);
  }

  .workspace-domain-bar {
    order:3;
    min-width:100%;
    max-width:100%;
  }

  .main-nav {
    order:4;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:calc(var(--layout-unit) * 1);
  }

  .main-nav__link {
    justify-content:center;
    padding:calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 2);
    font-size:var(--text-caption);
  }

  .page-shell {
    padding:calc(var(--layout-unit) * 4) calc(var(--layout-unit) * 3.5) calc(var(--layout-unit) * 12);
    gap:calc(var(--layout-unit) * 4.5);
  }

  .page-header {
    flex-direction:column;
    align-items:stretch;
    gap:calc(var(--layout-unit) * 3.5);
    padding-bottom:calc(var(--layout-unit) * 4);
  }

  .page-header__title {
    font-size:var(--text-h2);
  }

  .page-header__actions {
    width:100%;
  }

  .grid-4,
  .grid-3,
  .grid-2,
  .radar-meta-grid,
  .diff-compare,
  .alert-catalog-grid {
    grid-template-columns:1fr;
    gap:calc(var(--layout-unit) * 3);
  }

  .swatch-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:calc(var(--layout-unit) * 2.5);
  }

  .icon-showcase-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:calc(var(--layout-unit) * 2.5);
  }

  .card,
  .radar-hero-card {
    padding:calc(var(--layout-unit) * 3.5);
    border-radius:var(--radius-md);
  }

  .page-row {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:calc(var(--layout-unit) * 2.5);
    padding:calc(var(--layout-unit) * 3);
  }

  .page-row__url-wrap {
    grid-column:1 / -1;
  }

  .client-shot {
    padding:calc(var(--layout-unit) * 3);
    gap:calc(var(--layout-unit) * 3);
  }

  .client-shot__grid {
    grid-template-columns:1fr;
  }

  .xray-url-pill {
    max-width:calc(var(--layout-unit) * 52);
  }

  .segmented {
    width:100%;
    display:flex;
    flex-wrap:wrap;
  }

  .segmented__btn {
    flex:1;
    justify-content:center;
    padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 2);
    font-size:var(--text-caption);
  }
}


/* Quiet status helpers (v3.1) */
.croscope-radar-pulse-dot {
  width:calc(var(--layout-unit) * 1.5);
  height:calc(var(--layout-unit) * 1.5);
  border-radius:var(--radius-pill);
  background:var(--success-dot);
  box-shadow:none;
  display:inline-block;
  flex-shrink:0;
}

.ui-status-on {
  display:inline-flex;
  align-items:center;
  gap:calc(var(--layout-unit) * 1.5);
  color:var(--text-secondary);
  font-size:var(--text-caption);
  font-weight:550;
}

.score-ring {
  /* one carrier:ring + number; soft bg only */
  box-shadow:none;
}


/* Alert catalog icons: chrome monochrome */
.alert-type-card__icon img,
.radar-icon-box img,
.diff-row img {
  filter:grayscale(1);
  opacity:1;
}

.alert-type-card.is-preset .alert-type-card__icon {
  border-color:var(--brand-primary-border);
  background:var(--brand-primary-dim);
}

.alert-type-card.is-preset .alert-type-card__icon img {
  filter:none;
  opacity:1;
}

/* Soften network badge to major (no 4th KPI color) */
.badge--network {
  background:var(--severity-major-bg);
  color:var(--severity-major-fg);
  border-color:var(--severity-major-border);
}

/* ==========================================================================
   PROFILE + RADAR CHANNELS (04-profile, 03-alerts)
   ========================================================================== */
.channel [hidden], .radar-delivery [hidden] { display:none !important; }
a.user-pill { text-decoration:none; transition:border-color var(--duration-fast) ease; }
a.user-pill:hover { border-color:var(--brand-primary-border); color:var(--text-primary); }
button.croscope-radar-toggle { background:none; border:0; padding:0; font:inherit; }
:where(a, button, input):focus-visible { outline:calc(var(--layout-unit) * 0.5) solid var(--brand-primary); outline-offset:calc(var(--layout-unit) * 0.5); }

.profile-layout { display:grid; grid-template-columns:minmax(0, 1fr) calc(var(--layout-unit) * 85); gap:calc(var(--layout-unit) * 5); align-items:start; }
.profile-aside { display:flex; flex-direction:column; gap:calc(var(--layout-unit) * 4); }
.channel-list { display:flex; flex-direction:column; gap:calc(var(--layout-unit) * 3); }
.channel {
  display:grid; grid-template-columns:calc(var(--layout-unit) * 10) minmax(0, 1fr) auto; gap:calc(var(--layout-unit) * 3.5); align-items:start;
  padding:calc(var(--layout-unit) * 4); background:var(--bg-elevated); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); border-radius:var(--radius-md);
}
.channel__icon { width:calc(var(--layout-unit) * 10); height:calc(var(--layout-unit) * 10); border-radius:var(--radius-sm); background:var(--bg-subtle);
  display:inline-flex; align-items:center; justify-content:center; color:var(--text-secondary); }
.channel__icon svg { width:calc(var(--layout-unit) * 5); height:calc(var(--layout-unit) * 5); }
.channel__head { display:flex; align-items:center; gap:calc(var(--layout-unit) * 2.5); flex-wrap:wrap; }
.channel__name { font-size:var(--text-body); font-weight:600; color:var(--text-primary); }
.channel__kind { font-size:var(--text-caption); color:var(--text-secondary); }
.channel__value { font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-primary); margin-top:calc(var(--layout-unit) * 1.5); overflow-wrap:anywhere; }
.channel__hint { font-size:var(--text-caption); color:var(--text-secondary); margin-top:calc(var(--layout-unit) * 1.5); line-height:1.5; }
.channel__form { display:flex; gap:calc(var(--layout-unit) * 2); margin-top:calc(var(--layout-unit) * 2.5); flex-wrap:wrap; }
.channel__form[hidden] { display:none; }
.field-input {
  flex:1 1 calc(var(--layout-unit) * 50); min-width:0; height:calc(var(--layout-unit) * 9); padding:0 calc(var(--layout-unit) * 3); border-radius:var(--radius-sm);
  background:var(--bg-void); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); color:var(--text-primary);
  font-family:var(--font-mono); font-size:var(--text-caption);
}
.field-input:focus { border-color:var(--brand-primary-border); outline:none; }
.field-input--code { flex:0 1 calc(var(--layout-unit) * 30); letter-spacing:0.08em; }
.channel__side { display:flex; flex-direction:column; align-items:flex-end; gap:calc(var(--layout-unit) * 2); }

.ch-state { display:inline-flex; align-items:center; gap:calc(var(--layout-unit) * 1.5); font-size:var(--text-caption); font-weight:600;
  padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2); border-radius:var(--radius-pill); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); color:var(--text-secondary); white-space:nowrap; }
.ch-state::before { content:""; width:calc(var(--layout-unit) * 1.5); height:calc(var(--layout-unit) * 1.5); border-radius:var(--radius-pill); background:var(--text-muted); }
.ch-state--empty::before { background:transparent; border:calc(var(--ui-rail-width) * 0.5) solid var(--text-muted); }
.ch-state--pending { color:var(--text-primary); }
.ch-state--pending::before { background:var(--text-muted); }
.ch-state--on { color:var(--text-primary); }
.ch-state--on::before { background:var(--brand-tertiary); }
.ch-state--off::before { background:var(--text-muted); }
.ch-state--failed { color:var(--severity-critical-fg); border-color:var(--severity-critical-border); }
.ch-state--failed::before { background:var(--severity-critical); }
.ch-state--saving::before { background:var(--brand-primary); animation:chPulse calc(var(--duration-normal) * 4) ease-in-out infinite; }
@keyframes chPulse { 50% { opacity:1; } }

.state-legend { display:grid; grid-template-columns:repeat(auto-fit, minmax(calc(var(--layout-unit) * 38), 1fr)); gap:calc(var(--layout-unit) * 2.5); }
.state-legend__item { padding:calc(var(--layout-unit) * 3); background:var(--bg-void); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); border-radius:var(--radius-md); }
.state-legend__item p { font-size:var(--text-caption); color:var(--text-secondary); margin-top:calc(var(--layout-unit) * 1.5); line-height:1.5; }
.note-calm { font-size:var(--text-body); color:var(--text-secondary); line-height:1.5; }
.note-calm strong { color:var(--text-primary); font-weight:600; }
.account-row { display:flex; align-items:center; gap:calc(var(--layout-unit) * 3); flex-wrap:wrap; }
.account-avatar { width:calc(var(--layout-unit) * 10); height:calc(var(--layout-unit) * 10); border-radius:var(--radius-pill); background:var(--bg-subtle); color:var(--text-primary);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--text-body); }
.link-quiet { color:var(--brand-primary); font-size:var(--text-caption); font-weight:500; text-decoration:none; }
.link-quiet:hover { text-decoration:underline; }
.toast-inline { font-size:var(--text-caption); padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3); border-radius:var(--radius-sm); background:var(--bg-void);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); color:var(--text-secondary); }
.toast-inline[hidden] { display:none; }

.radar-delivery { display:flex; flex-wrap:wrap; gap:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 4.5); align-items:center; margin-top:calc(var(--layout-unit) * 4); padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 3.5);
  background:var(--bg-void); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); border-radius:var(--radius-md); font-size:var(--text-body); color:var(--text-secondary); }
.radar-delivery strong { color:var(--text-primary); font-weight:600; }
.demo-switch { display:inline-flex; gap:calc(var(--layout-unit) * 1); padding:calc(var(--layout-unit) * 1); background:var(--bg-void); border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); border-radius:var(--radius-sm); flex-wrap:wrap; }
.demo-switch button { background:none; border:calc(var(--ui-rail-width) * 0.5) solid transparent; color:var(--text-secondary); font:inherit; font-size:var(--text-caption); padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2); border-radius:var(--radius-xs); cursor:pointer; }
.demo-switch button[aria-pressed="true"] { color:var(--text-primary); background:var(--bg-subtle); border-color:var(--border-subtle); }

@media (max-width: 1100px) { .profile-layout { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 760px) {
  .channel { grid-template-columns:calc(var(--layout-unit) * 8) minmax(0, 1fr); padding:calc(var(--layout-unit) * 3.5); gap:calc(var(--layout-unit) * 2.5); }
  .channel__icon { width:calc(var(--layout-unit) * 8); height:calc(var(--layout-unit) * 8); }
  .channel__side { grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
  .profile-intro { display:none; }
}

/* Speed score companions for the existing fast KPI utility. */
.ui-kpi__value--moderate { color:var(--speed-moderate); }
.ui-kpi__value--slow { color:var(--speed-slow); }

/* Technical evidence is neutral; severity belongs to the rail and soft badge. */
.bug-evidence {
  margin-top:calc(var(--layout-unit) * 2.5);
  padding:calc(var(--layout-unit) * 2.5) calc(var(--layout-unit) * 3);
  border-radius:var(--radius-sm);
  background:var(--bg-void);
  border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--text-secondary);
  overflow-wrap:anywhere;
  min-width:0;
}
.bug-evidence > * + * { margin-top:calc(var(--layout-unit) * 1); }
.bug-evidence pre { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:calc(var(--layout-unit) * 1.5); }
.bug-evidence summary { cursor:pointer; color:var(--text-primary); }

    .auth-shell {
      min-height:100vh;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:calc(var(--layout-unit) * 6) calc(var(--layout-unit) * 4);
    }
    .auth-card {
      width:100%;
      max-width:calc(var(--layout-unit) * 110);
      background:var(--bg-surface);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-card);
      padding:calc(var(--layout-unit) * 9) calc(var(--layout-unit) * 8);
      display:flex;
      flex-direction:column;
      gap:calc(var(--layout-unit) * 6);
    }
    .auth-logo-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .auth-badge {
      font-family:var(--font-mono);
      font-size:var(--text-micro);
      color:var(--brand-primary);
      background:var(--brand-primary-dim);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--brand-primary-border);
      padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2.5);
      border-radius:var(--radius-pill);
    }
    .auth-title {
      font-size:var(--text-h2);
      font-weight:700;
      letter-spacing:-0.02em;
      color:var(--text-primary);
    }
    .auth-subtitle {
      font-size:var(--text-body);
      color:var(--text-secondary);
      line-height:1.5;
      margin-top:calc(var(--layout-unit) * 2);
    }
    .yandex-login-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:calc(var(--layout-unit) * 3);
      width:100%;
      padding:calc(var(--layout-unit) * 3.5) calc(var(--layout-unit) * 5);
      border-radius:var(--radius-sm);
      background:var(--brand-primary);
      color:var(--text-on-accent);
      font-weight:700;
      font-size:var(--text-body);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--brand-primary);
      box-shadow:none;
      transition:background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
      cursor:pointer;
    }
    .yandex-login-btn:hover {
      background:var(--brand-primary-hover);
      transform:translateY(calc(var(--ui-rail-width) * -0.5));
    }
    .auth-meta {
      border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
      padding-top:calc(var(--layout-unit) * 4);
      font-family:var(--font-mono);
      font-size:var(--text-caption);
      color:var(--text-muted);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .denied-shell {
      min-height:100vh;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:calc(var(--layout-unit) * 6) calc(var(--layout-unit) * 4);
    }
    .denied-card {
      width:100%;
      max-width:calc(var(--layout-unit) * 120);
      background:var(--bg-surface);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-card);
      padding:calc(var(--layout-unit) * 9) calc(var(--layout-unit) * 8);
      display:flex;
      flex-direction:column;
      gap:calc(var(--layout-unit) * 5.5);
    }
    .denied-status {
      display:inline-flex;
      align-items:center;
      gap:calc(var(--layout-unit) * 2);
      align-self:flex-start;
      padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 3);
      border-radius:var(--radius-pill);
      background:var(--severity-critical-bg);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--severity-critical-border);
      color:var(--severity-critical);
      font-family:var(--font-mono);
      font-size:var(--text-micro);
      font-weight:700;
    }
    .denied-title {
      font-size:var(--text-h2);
      font-weight:700;
      color:var(--text-primary);
    }
    .denied-message {
      font-size:var(--text-body);
      color:var(--text-secondary);
      line-height:1.5;
    }
    .denied-account-box {
      padding:calc(var(--layout-unit) * 3.5) calc(var(--layout-unit) * 4);
      border-radius:var(--radius-sm);
      background:var(--bg-subtle);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
      display:flex;
      flex-direction:column;
      gap:calc(var(--layout-unit) * 1);
    }
    .denied-account-label {
      font-size:var(--text-caption);
      color:var(--text-muted);
    }
    .denied-account-email {
      font-family:var(--font-mono);
      font-size:var(--text-body);
      color:var(--text-primary);
      font-weight:600;
      word-break:break-all;
    }
    .denied-logout-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:100%;
      padding:calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 4.5);
      border-radius:var(--radius-sm);
      background:var(--bg-elevated);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--border-strong);
      color:var(--text-primary);
      font-weight:600;
      transition:border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
    }
    .denied-logout-btn:hover {
      border-color:var(--brand-primary);
      background:var(--bg-subtle);
    }

    .teaser-viewport {
      min-height:100vh;
      width:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:calc(var(--layout-unit) * 8) calc(var(--layout-unit) * 6);
      position:relative;
      overflow:hidden;
    }
    .teaser-header {
      max-width:calc(var(--layout-unit) * 300);
      width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:calc(var(--layout-unit) * 4);
    }
    .teaser-status-pill {
      display:inline-flex;
      align-items:center;
      gap:calc(var(--layout-unit) * 2);
      padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 3);
      border-radius:var(--radius-pill);
      background:var(--bg-surface);
      border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
      font-family:var(--font-mono);
      font-size:var(--text-caption);
      color:var(--text-secondary);
    }
    .teaser-center {
      max-width:calc(var(--layout-unit) * 160);
      width:100%;
      margin:0 auto;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:calc(var(--layout-unit) * 6);
    }
    .teaser-mark-box {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:calc(var(--layout-unit) * 4);
      margin-bottom:calc(var(--layout-unit) * 4);
    }
    .teaser-eyebrow {
      font-family:var(--font-mono);
      font-size:var(--text-caption);
      color:var(--text-muted);
      letter-spacing:0.08em;
      text-transform:uppercase;
    }
    .teaser-title {
      font-size:var(--teaser-display-size);
      font-weight:700;
      letter-spacing:-0.02em;
      line-height:1.3;
      color:var(--text-primary);
    }
    .teaser-desc {
      font-size:var(--text-body-lg);
      color:var(--text-secondary);
      max-width:calc(var(--layout-unit) * 125);
      line-height:1.5;
    }
    .teaser-footer {
      max-width:calc(var(--layout-unit) * 300);
      width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:calc(var(--layout-unit) * 3);
      border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
      padding-top:calc(var(--layout-unit) * 5);
      font-family:var(--font-mono);
      font-size:var(--text-caption);
      color:var(--text-muted);
      text-transform:none;
    }

/* Working cabinet semantic presentation, shared by server and generated UI. */
.nav-state-gap { margin-left:calc(var(--layout-unit) * 0.5); }
.ui-dot--muted { background:var(--text-muted); }
.identity-link { color:inherit; }
.session-logout { color:var(--text-muted);margin-left:calc(var(--layout-unit) * 2);font-size:var(--text-micro); }
.radar-heading-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--layout-unit) * 4); }
.radar-identity { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:calc(var(--layout-unit) * 3);flex:1;min-width:0; }
.radar-brand-box { width:calc(var(--layout-unit) * 12);height:calc(var(--layout-unit) * 12);border-radius:var(--radius-md);background:var(--brand-primary-dim);border:calc(var(--ui-rail-width) * 0.5) solid var(--brand-primary-border);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.inline-cluster { display:flex;align-items:center;gap:calc(var(--layout-unit) * 2.5);flex-wrap:wrap; }
.radar-title { font-size:var(--text-h2);font-weight:700;color:var(--text-primary); }
.radar-description { grid-column:1 / -1;color:var(--text-secondary);font-size:var(--text-body);margin-top:calc(var(--layout-unit) * 1); }
.radar-actions { display:flex;align-items:center;gap:calc(var(--layout-unit) * 4);flex-wrap:wrap; }
.visually-hidden-input { position:absolute;opacity:0;width:0;height:0; }
.control-caption { font-size:var(--text-body);font-weight:600; }
.scan-job-status { font-size:var(--text-body);color:var(--text-muted);margin:calc(var(--layout-unit) * 3) 0; }
.radar-summary-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--layout-unit) * 45),1fr));gap:calc(var(--layout-unit) * 3);border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);padding-top:calc(var(--layout-unit) * 4); }
.data-label { font-size:var(--text-micro);color:var(--text-muted);display:block; }
.data-value { font-size:var(--text-body);color:var(--text-primary); }
.data-label--spaced { font-size:var(--text-micro);color:var(--text-muted);display:block;margin-top:calc(var(--layout-unit) * 1); }
.history-panel { margin-top:calc(var(--layout-unit) * 7);background:var(--bg-surface);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);border-radius:var(--radius-lg);padding:calc(var(--layout-unit) * 6); }
.section-title { font-size:var(--text-h3);font-weight:600;margin-bottom:calc(var(--layout-unit) * 4); }
.report-list { display:flex;flex-direction:column;gap:calc(var(--layout-unit) * 3.5); }
.diff-entry { padding:calc(var(--layout-unit) * 4);border-radius:var(--radius-sm);background:var(--bg-elevated);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); }
.entry-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--layout-unit) * 2); }
.diff-entry__title { font-size:var(--text-body);color:var(--text-primary); }
.data-timestamp { font-size:var(--text-caption);color:var(--text-muted); }
.diff-entry__changes { margin-top:calc(var(--layout-unit) * 3);display:flex;flex-direction:column;gap:calc(var(--layout-unit) * 2); }
.diff-entry__pair { display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--layout-unit) * 55),1fr));gap:calc(var(--layout-unit) * 2.5);font-family:var(--font-mono);font-size:var(--text-caption); }
.diff-label--removed { color:var(--diff-removed);font-weight:700; }
.diff-label--added { color:var(--diff-added);font-weight:700; }
.body-secondary { color:var(--text-secondary);font-size:var(--text-body); }
.identity-lockup { height:calc(var(--layout-unit) * 8);width:auto; }
.section-note { margin-top:calc(var(--layout-unit) * 3); }
.legend-section { margin-top:calc(var(--layout-unit) * 5); }
.legend-heading { margin-bottom:calc(var(--layout-unit) * 2.5); }
.shrinkable { min-width:0; }
.account-name { font-size:var(--text-body);font-weight:600; }
.account-email { margin-top:calc(var(--layout-unit) * 0.5); }
.account-actions { margin-top:calc(var(--layout-unit) * 3.5); }
.note-followup { margin-top:calc(var(--layout-unit) * 2); }
.radar-history-link { display:inline-block;margin-top:calc(var(--layout-unit) * 2.5); }
.source-badge { background:var(--bg-subtle);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);padding:calc(var(--layout-unit) * 1.5) calc(var(--layout-unit) * 3);border-radius:var(--radius-sm); }
.results-panel { margin-top:calc(var(--layout-unit) * 6);background:var(--bg-surface);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default);border-radius:var(--radius-lg);padding:calc(var(--layout-unit) * 6); }
.speed-result { padding:calc(var(--layout-unit) * 4);border-radius:var(--radius-md);background:var(--bg-elevated);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);display:flex;flex-direction:column;gap:calc(var(--layout-unit) * 3); }
.speed-result__header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--layout-unit) * 2.5); }
.speed-result__type { background:var(--bg-subtle);padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-micro); }
.resource-url { font-weight:600;word-break:break-all; }
.speed-result__score { font-size:var(--text-h2);font-weight:700; }
.caption { font-size:var(--text-caption); }
.failure-message { color:var(--text-secondary);font-size:var(--text-body);font-family:var(--font-mono); }
.speed-metrics { display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--layout-unit) * 30),1fr));gap:calc(var(--layout-unit) * 2.5); }
.speed-metric { padding:calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 2.5);background:var(--bg-surface);border-radius:var(--radius-sm);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); }
.data-caption { font-size:var(--text-micro);color:var(--text-muted); }
.data-number { font-size:var(--text-body);font-weight:700; }
.speed-priorities { border-top:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);padding-top:calc(var(--layout-unit) * 2.5); }
.speed-priorities__title { font-size:var(--text-caption);color:var(--text-secondary);font-weight:600;margin-bottom:calc(var(--layout-unit) * 1.5); }
.tag-list { display:flex;flex-wrap:wrap;gap:calc(var(--layout-unit) * 2); }
.opportunity-tag { font-size:var(--text-caption);padding:calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2.5);border-radius:var(--radius-xs);background:var(--bg-surface);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-default); }
.denied-lockup { height:calc(var(--layout-unit) * 7.5);width:auto;align-self:flex-start; }
.xray-page-select { max-width:100%;background:var(--bg-surface);color:var(--text-primary);border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); }
.xray-viewer-stage { min-height:calc(var(--layout-unit) * 105);padding:calc(var(--layout-unit) * 4); }
.xray-page-image { display:block;width:100%;height:auto;border:calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); }
.page-failure-panel { min-height:calc(var(--layout-unit) * 55);padding:calc(var(--layout-unit) * 6); }
.report-empty-panel { min-height:calc(var(--layout-unit) * 90);padding:calc(var(--layout-unit) * 6); }
.bug-impact { margin-top:calc(var(--layout-unit) * 2.5);font-size:var(--text-body);color:var(--text-secondary); }
.text-primary { color:var(--text-primary); }
.bug-recommendation { margin-top:calc(var(--layout-unit) * 2);font-size:var(--text-body);color:var(--text-secondary); }
.empty-title { font-size:var(--text-body-lg);font-weight:600;color:var(--text-primary); }
.identity-icon--24 { width:calc(var(--layout-unit) * 6);height:calc(var(--layout-unit) * 6); }
.identity-icon--14 { width:calc(var(--layout-unit) * 3.5);height:calc(var(--layout-unit) * 3.5); }
.identity-icon--20 { width:calc(var(--layout-unit) * 5);height:calc(var(--layout-unit) * 5); }
.identity-icon--18 { width:calc(var(--layout-unit) * 4.5);height:calc(var(--layout-unit) * 4.5); }
.identity-icon--64 { width: calc(var(--layout-unit) * 16); height: calc(var(--layout-unit) * 16); }
.identity-icon--48 { width:calc(var(--layout-unit) * 12);height:calc(var(--layout-unit) * 12); }
[hidden] { display:none !important; }
.summary-state--changed { color:var(--diff-modified); }
.summary-state--clear { color:var(--speed-fast); }
.summary-state--waiting { color:var(--text-muted); }
.xray-page-panel { position:relative;width:100%;overflow:hidden;border-radius:var(--radius-sm); }
.xray-page-panel--mobile { max-width:calc(var(--layout-unit) * 97.5);margin:0 auto; }
.identity-icon { flex-shrink:0; }

h1 { font-size:var(--text-h1); }
h2 { font-size:var(--text-h2); }
h3 { font-size:var(--text-h3); }

.bug-evidence pre, .bug-evidence code { font-family:var(--font-mono); }

/* Role semantics must outrank neutral KPI defaults, including brand modifiers. */
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--critical { color:var(--severity-critical); }
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--major { color:var(--severity-major); }
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--minor { color:var(--severity-minor); }
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--fast { color:var(--speed-fast); }
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--moderate { color:var(--speed-moderate); }
:is(.metric-card__value,.ui-kpi__value).ui-kpi__value--slow { color:var(--speed-slow); }
.scan-job-status:empty { display:none; }
@media (max-width: 760px) {
  .radar-title { font-size:var(--text-h3); }
  .radar-heading-row { align-items:flex-start; }
  .radar-identity { flex-basis:100%; }
}

/* Empty/error report state has content-driven geometry, not an absent screenshot canvas. */
.xray-workbench { margin-top: calc(var(--layout-unit) * 7); }
.detector-report-state { padding: calc(var(--layout-unit) * 6); }
.detector-report-state > * + * { margin-top: calc(var(--layout-unit) * 3); }
.raw-proof { color: var(--text-secondary); font-size: var(--text-caption); }
.raw-proof summary { cursor: pointer; }
.raw-proof pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-caption); }


/* ==========================================================================
   v3.2 croscope cabinet: surfaces, focus, data-dense pins, source toggles.
   All values are tokens (brand/tokens.css, including --croscope-* 1.2).
   ========================================================================== */
.top-shell {
  background: var(--bg-surface);
  border-bottom: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  box-shadow: var(--croscope-inner-shadow);
}
.card,
.ui-card,
.ui-kpi,
.auth-card,
.denied-card,
.results-panel,
.radar-hero-card {
  box-shadow: var(--croscope-inner-shadow);
}
:where(a, button, input):focus-visible {
  outline: calc(var(--layout-unit) * 0.75) solid var(--brand-primary);
  outline-offset: calc(var(--layout-unit) * 0.5);
  box-shadow: var(--croscope-focus-ring);
}
.btn--primary {
  background: var(--brand-primary);
  transition: background-color var(--duration-normal) var(--ease-snappy);
}
.btn--primary:hover {
  background: var(--brand-primary-hover);
}

/* Data-dense: severity is shape + text, never colour alone. */
.sev-mark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--layout-unit) * 1.5);
  font-size: var(--text-caption);
  font-weight: 550;
  color: var(--text-primary);
  line-height: 1.3;
}
.sev-mark__shape {
  width: var(--ui-dot-size);
  height: var(--ui-dot-size);
  flex: 0 0 auto;
  box-sizing: border-box;
}
.sev-mark--critical .sev-mark__shape {
  border-radius: var(--radius-pill);
  background: var(--severity-critical);
}
.sev-mark--major .sev-mark__shape {
  border-radius: var(--radius-pill);
  background: transparent;
  border: calc(var(--ui-rail-width) * 0.5) solid var(--severity-critical);
}
.sev-mark--minor .sev-mark__shape {
  border-radius: var(--radius-pill);
  background: var(--croscope-graphite-300);
}
.sev-mark--system .sev-mark__shape {
  width: calc(var(--layout-unit) * 1.5);
  height: calc(var(--layout-unit) * 1.5);
  background: var(--croscope-system-error-on-dark);
  transform: rotate(45deg);
  border-radius: 0;
}
.sev-mark--fixed .sev-mark__shape {
  background: transparent;
  border: 0;
  /* Checkmark is a token-coloured square rotated; label carries the word. */
  width: var(--ui-dot-size);
  height: var(--ui-dot-size);
  border-radius: calc(var(--layout-unit) * 0.5);
  background: var(--croscope-cobalt-on-dark);
}

/* Source toggles: visible Russian label + hint, switch is not alone. */
.source-toggle {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-unit) * 1);
  min-width: 0;
}
.source-toggle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--layout-unit) * 3);
}
.source-toggle__label {
  font-size: var(--text-body);
  font-weight: 550;
  color: var(--text-primary);
}
.source-toggle__hint {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}


/* ==========================================================================
   v3.2 workspace: sidebar, insight strip, vitals, palette, care states.
   All values are tokens. Navigation is graphite. Cobalt is the primary action only.
   ========================================================================== */

/* ----- Persistent compact sidebar on cabinet pages ----- */
body:has(> header.top-shell) {
  display: block;
  background-image: none; /* product screens: no brand grid */
}
header.top-shell {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--layout-unit) * 62);
  z-index: 100;
  background: var(--bg-surface);
  border-bottom: 0;
  border-right: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  box-shadow: var(--croscope-inner-shadow);
  overflow-x: hidden;
  overflow-y: auto;
}
header.top-shell .top-shell__inner {
  max-width: none;
  margin: 0;
  height: 100%;
  min-height: calc(var(--layout-unit) * 200);
  padding: calc(var(--layout-unit) * 4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--layout-unit) * 4);
}
header.top-shell .brand-cluster {
  flex-shrink: 0;
}
header.top-shell .brand-logo-full {
  height: calc(var(--layout-unit) * 8.5);
  max-width: 100%;
}
header.top-shell .workspace-domain-bar {
  min-width: 0;
  max-width: none;
  width: 100%;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
header.top-shell .workspace-domain-bar__input {
  min-width: calc(var(--layout-unit) * 20);
}
header.top-shell .main-nav {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: calc(var(--layout-unit) * 1);
  padding: calc(var(--layout-unit) * 1);
  background: transparent;
  border: 0;
  flex: 1 1 auto;
}
header.top-shell .main-nav__link {
  display: flex;
  min-height: calc(var(--layout-unit) * 11);
  white-space: nowrap;
  width: 100%;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}
header.top-shell .main-nav__link.is-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
  box-shadow: var(--croscope-inner-shadow);
}
header.top-shell .user-pill {
  margin-top: auto;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}
header.top-shell .workspace-tools {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-unit) * 2);
}
.page-shell {
  margin-left: calc(var(--layout-unit) * 62);
  padding-top: calc(var(--layout-unit) * 5);
}
.page-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-void);
  padding-top: calc(var(--layout-unit) * 2);
  margin-top: calc(var(--layout-unit) * -2);
}

/* Command opener */
.cmd-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--layout-unit) * 2);
  width: 100%;
  min-height: calc(var(--layout-unit) * 11);
  padding: 0 calc(var(--layout-unit) * 3);
  border-radius: var(--radius-sm);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  background: var(--bg-void);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.cmd-open:hover { color: var(--text-primary); border-color: var(--border-default); }
.cmd-open kbd {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  padding: calc(var(--layout-unit) * 0.5) calc(var(--layout-unit) * 1.5);
  border-radius: var(--radius-xs);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  color: var(--text-muted);
}

/* ----- Insight strip: what's wrong, leads, next, health ----- */
.insight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) calc(var(--layout-unit) * 36);
  gap: calc(var(--layout-unit) * 3);
  padding: calc(var(--layout-unit) * 4);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--croscope-inner-shadow);
}
.insight-strip__item { min-width: 0; }
.insight-strip__kicker {
  display: block;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: calc(var(--layout-unit) * 1.5);
}
.insight-strip__text {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-primary);
}
.insight-strip__item--leads .insight-strip__text { color: var(--text-secondary); }
.health-meter { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--layout-unit) * 2); }
.health-meter__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}
.health-meter__track {
  position: relative;
  height: calc(var(--layout-unit) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  overflow: hidden;
}
.health-meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--croscope-cobalt-on-dark);
  animation: cs-meter-fill var(--croscope-d-slow) var(--croscope-ease-out) forwards;
}
.health-meter__fill.is-mid { background: var(--speed-moderate); }
.health-meter__fill.is-low { background: var(--severity-critical); }
.health-meter__caption { font-size: var(--text-micro); color: var(--text-muted); line-height: 1.5; }

@keyframes cs-meter-fill {
  from { width: 0; }
  to { width: var(--meter-to, 0%); }
}
@keyframes cs-reveal {
  from { opacity: 0; filter: blur(var(--croscope-blur-focus)); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes cs-gauge {
  from { transform: rotate(-90deg); }
  to { transform: rotate(var(--gauge-to, 0deg)); }
}
@keyframes cs-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.insight-strip,
.vital-card,
.onboard {
  animation: cs-reveal var(--croscope-d-slow) var(--croscope-ease-out) both;
}

/* ----- Vitals: LCP / INP / CLS / TTFB ----- */
.vitals-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--layout-unit) * 3);
}
.vital-card {
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: calc(var(--layout-unit) * 4);
  box-shadow: var(--croscope-inner-shadow);
  min-width: 0;
}
.vital-card__name {
  font-size: var(--text-caption);
  font-weight: 550;
  color: var(--text-secondary);
}
.vital-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: calc(var(--layout-unit) * 1);
}
.vital-card.is-good .vital-card__value { color: var(--speed-fast); }
.vital-card.is-mid .vital-card__value { color: var(--speed-moderate); }
.vital-card.is-poor .vital-card__value { color: var(--speed-slow); }
.vital-card__unit { font-size: var(--text-caption); color: var(--text-muted); font-weight: var(--croscope-weight-regular); }
.vital-card__note { font-size: var(--text-micro); color: var(--text-muted); margin-top: calc(var(--layout-unit) * 1); line-height: 1.5; }
.dist-bar {
  display: flex;
  height: calc(var(--layout-unit) * 1.5);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-subtle);
  margin-top: calc(var(--layout-unit) * 3);
}
.dist-bar__seg { height: 100%; }
.dist-bar__seg--good { background: var(--speed-fast); }
.dist-bar__seg--mid { background: var(--speed-moderate); }
.dist-bar__seg--poor { background: var(--speed-slow); }
.threshold {
  position: relative;
  height: calc(var(--layout-unit) * 3);
  margin-top: calc(var(--layout-unit) * 2);
  border-top: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
}
.threshold__tick {
  position: absolute;
  top: 0;
  width: calc(var(--ui-rail-width) * 0.5);
  height: calc(var(--layout-unit) * 1.5);
  background: var(--text-muted);
}
.threshold__label {
  position: absolute;
  top: calc(var(--layout-unit) * 1.5);
  font-size: var(--text-micro);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transform: translateX(-50%);
}

.priority-list { margin-top: calc(var(--layout-unit) * 4); }
.priority-list__title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: calc(var(--layout-unit) * 3);
}
.priority-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-unit) * 2);
  counter-reset: pr;
}
.priority-list li {
  display: grid;
  grid-template-columns: calc(var(--layout-unit) * 6) minmax(0, 1fr) auto;
  gap: calc(var(--layout-unit) * 3);
  align-items: center;
  padding: calc(var(--layout-unit) * 3);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-md);
  counter-increment: pr;
}
.priority-list li::before {
  content: counter(pr);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.priority-list__name { font-size: var(--text-body); color: var(--text-primary); min-width: 0; }
.priority-list__save {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* ----- Filter chips, finding path, onboard, toast, palette ----- */
.chip-row { display: flex; flex-wrap: wrap; gap: calc(var(--layout-unit) * 2); align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--layout-unit) * 1.5);
  min-height: calc(var(--layout-unit) * 11);
  padding: 0 calc(var(--layout-unit) * 3);
  border-radius: var(--radius-pill);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-weight: 550;
  font-family: var(--font-sans);
  cursor: pointer;
}
.chip.is-active { color: var(--text-primary); background: var(--bg-elevated); border-color: var(--border-default); }
.finding-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--layout-unit) * 3);
  margin-top: calc(var(--layout-unit) * 3);
}
.finding-path__step { min-width: 0; }
.finding-path__label {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: calc(var(--layout-unit) * 1);
}
.finding-path__body { font-size: var(--text-caption); color: var(--text-secondary); line-height: 1.5; margin: 0; }

.onboard {
  padding: calc(var(--layout-unit) * 4);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.onboard__title { font-size: var(--text-h3); font-weight: 600; color: var(--text-primary); margin: 0 0 calc(var(--layout-unit) * 3); }
.onboard ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--layout-unit) * 2); counter-reset: on; }
.onboard li {
  display: grid;
  grid-template-columns: calc(var(--layout-unit) * 7) minmax(0, 1fr);
  gap: calc(var(--layout-unit) * 3);
  align-items: center;
  min-height: calc(var(--layout-unit) * 11);
  color: var(--text-secondary);
  font-size: var(--text-body);
  counter-increment: on;
}
.onboard li::before {
  content: counter(on);
  width: calc(var(--layout-unit) * 7);
  height: calc(var(--layout-unit) * 7);
  border-radius: var(--radius-pill);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.onboard li.is-done { color: var(--text-primary); }
.onboard li.is-done::before { background: var(--croscope-cobalt-on-dark); color: var(--croscope-graphite-950); border-color: transparent; content: "✓"; }

.scan-progress {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-unit) * 2);
  margin: calc(var(--layout-unit) * 2) 0;
}
.scan-progress__label { font-size: var(--text-caption); color: var(--text-secondary); }
.scan-progress__track { height: calc(var(--layout-unit) * 1.5); border-radius: var(--radius-pill); background: var(--bg-subtle); overflow: hidden; }
.scan-progress__fill { height: 100%; width: var(--meter-to, 30%); background: var(--croscope-cobalt-on-dark); border-radius: var(--radius-pill); animation: cs-shimmer var(--croscope-motion-loader) var(--croscope-ease-out) infinite; background-image: linear-gradient(90deg, transparent, var(--croscope-hairline-dark-2), transparent); background-size: 200% 100%; }
.skeleton {
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  background-image: linear-gradient(90deg, var(--bg-surface), var(--bg-elevated), var(--bg-surface));
  background-size: 200% 100%;
  animation: cs-shimmer var(--croscope-motion-loader) var(--croscope-ease-out) infinite;
  min-height: calc(var(--layout-unit) * 16);
}

/* Empty care */
.empty-care { text-align: left; padding: calc(var(--layout-unit) * 6); }
.empty-care .empty-title { margin-bottom: calc(var(--layout-unit) * 2); }
.empty-care p { color: var(--text-secondary); font-size: var(--text-body); line-height: 1.5; margin: 0 0 calc(var(--layout-unit) * 4); }

/* Command palette stub */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-glass-heavy);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--layout-unit) * 20);
}
.cmdk[hidden] { display: none; }
.cmdk__panel {
  width: min(100%, calc(var(--layout-unit) * 140));
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--croscope-shadow-quiet);
  overflow: hidden;
}
.cmdk__input {
  width: 100%;
  height: calc(var(--layout-unit) * 13);
  padding: 0 calc(var(--layout-unit) * 5);
  border: 0;
  border-bottom: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  outline: none;
}
.cmdk__list { list-style: none; margin: 0; padding: calc(var(--layout-unit) * 2); }
.cmdk__list a, .cmdk__list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: calc(var(--layout-unit) * 11);
  padding: 0 calc(var(--layout-unit) * 3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.cmdk__list a:hover, .cmdk__list button:hover { background: var(--bg-elevated); }
.cmdk__hint { margin: 0; padding: calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 5); font-size: var(--text-caption); color: var(--text-muted); border-top: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle); }

#croscope-toast-host {
  position: fixed;
  right: calc(var(--layout-unit) * 5);
  bottom: calc(var(--layout-unit) * 5);
  z-index: 180;
  padding: calc(var(--layout-unit) * 3) calc(var(--layout-unit) * 4);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--croscope-shadow-quiet);
  color: var(--text-primary);
  font-size: var(--text-caption);
  max-width: calc(var(--layout-unit) * 80);
}
#croscope-toast-host[hidden] { display: none; }

/* Wins row */
.wins {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  padding: calc(var(--layout-unit) * 3);
  border-radius: var(--radius-md);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  background: var(--bg-surface);
}

@media (max-width: 1100px) {
  .insight-strip { grid-template-columns: 1fr 1fr; }
  .vitals-row { grid-template-columns: 1fr 1fr; }
  .finding-path { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  header.top-shell {
    /* relative, not sticky/fixed: a fixed/sticky ancestor is the
       containing block for position:fixed nav, which pinned the
       tab bar to the header bottom and covered the domain field. */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
    overflow: visible;
    transform: none;
    filter: none;
    contain: none;
    will-change: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: auto;
    z-index: 100;
  }
  header.top-shell .brand-logo-full {
    height: calc(var(--layout-unit) * 7);
  }
  header.top-shell .top-shell__inner {
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding: calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 3);
    gap: calc(var(--layout-unit) * 2);
  }
  header.top-shell .workspace-tools { display: none; }
  header.top-shell .user-pill { display: none; }
  header.top-shell .workspace-domain-bar {
    order: 3;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  header.top-shell .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0;
    padding: calc(var(--layout-unit) * 1) calc(var(--layout-unit) * 2);
    padding-bottom: calc(var(--layout-unit) * 2);
    background: var(--bg-surface);
    border-top: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
    border-radius: 0;
    order: 4;
    z-index: 110;
  }
  header.top-shell .main-nav__link {
    min-height: calc(var(--layout-unit) * 11);
    min-width: calc(var(--layout-unit) * 11);
    justify-content: center;
    flex-direction: column;
    gap: calc(var(--layout-unit) * 0.5);
    font-size: var(--text-micro);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: calc(var(--layout-unit) * 1);
  }
  header.top-shell .workspace-domain-bar .btn,
  header.top-shell .workspace-domain-bar__input {
    min-height: calc(var(--layout-unit) * 11);
  }
  .segmented__btn {
    min-height: calc(var(--layout-unit) * 11);
  }
  .page-shell {
    margin-left: 0;
    padding-bottom: calc(var(--layout-unit) * 28);
  }
  header.top-shell .workspace-domain-bar {
    flex-wrap: nowrap;
    align-items: center;
  }
  header.top-shell .workspace-domain-bar__input {
    min-height: calc(var(--layout-unit) * 8);
    min-width: 0;
  }
  .page-header { position: static; }
  .insight-strip {
    grid-template-columns: 1fr;
    padding: calc(var(--layout-unit) * 3);
    gap: calc(var(--layout-unit) * 2);
  }
  .insight-strip__kicker { margin-bottom: calc(var(--layout-unit) * 0.5); }
  .insight-strip__text { font-size: var(--text-caption); }
  .health-meter__value { font-size: var(--text-h3); }
  .vitals-row { grid-template-columns: 1fr; }
  .cmd-open { min-height: calc(var(--layout-unit) * 11); }
  .chip { min-height: calc(var(--layout-unit) * 11); }
  .quiet-links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--layout-unit) * 3);
    font-size: var(--text-caption);
  }
}

/* Meter width steps (percent is allowed; no inline styles). */
.m-0 { --meter-to: 0%; }
.fg-0 { flex-grow: 0; width: 0%; }
.m-1 { --meter-to: 1%; }
.fg-1 { flex-grow: 1; width: 1%; }
.m-2 { --meter-to: 2%; }
.fg-2 { flex-grow: 2; width: 2%; }
.m-3 { --meter-to: 3%; }
.fg-3 { flex-grow: 3; width: 3%; }
.m-4 { --meter-to: 4%; }
.fg-4 { flex-grow: 4; width: 4%; }
.m-5 { --meter-to: 5%; }
.fg-5 { flex-grow: 5; width: 5%; }
.m-6 { --meter-to: 6%; }
.fg-6 { flex-grow: 6; width: 6%; }
.m-7 { --meter-to: 7%; }
.fg-7 { flex-grow: 7; width: 7%; }
.m-8 { --meter-to: 8%; }
.fg-8 { flex-grow: 8; width: 8%; }
.m-9 { --meter-to: 9%; }
.fg-9 { flex-grow: 9; width: 9%; }
.m-10 { --meter-to: 10%; }
.fg-10 { flex-grow: 10; width: 10%; }
.m-11 { --meter-to: 11%; }
.fg-11 { flex-grow: 11; width: 11%; }
.m-12 { --meter-to: 12%; }
.fg-12 { flex-grow: 12; width: 12%; }
.m-13 { --meter-to: 13%; }
.fg-13 { flex-grow: 13; width: 13%; }
.m-14 { --meter-to: 14%; }
.fg-14 { flex-grow: 14; width: 14%; }
.m-15 { --meter-to: 15%; }
.fg-15 { flex-grow: 15; width: 15%; }
.m-16 { --meter-to: 16%; }
.fg-16 { flex-grow: 16; width: 16%; }
.m-17 { --meter-to: 17%; }
.fg-17 { flex-grow: 17; width: 17%; }
.m-18 { --meter-to: 18%; }
.fg-18 { flex-grow: 18; width: 18%; }
.m-19 { --meter-to: 19%; }
.fg-19 { flex-grow: 19; width: 19%; }
.m-20 { --meter-to: 20%; }
.fg-20 { flex-grow: 20; width: 20%; }
.m-21 { --meter-to: 21%; }
.fg-21 { flex-grow: 21; width: 21%; }
.m-22 { --meter-to: 22%; }
.fg-22 { flex-grow: 22; width: 22%; }
.m-23 { --meter-to: 23%; }
.fg-23 { flex-grow: 23; width: 23%; }
.m-24 { --meter-to: 24%; }
.fg-24 { flex-grow: 24; width: 24%; }
.m-25 { --meter-to: 25%; }
.fg-25 { flex-grow: 25; width: 25%; }
.m-26 { --meter-to: 26%; }
.fg-26 { flex-grow: 26; width: 26%; }
.m-27 { --meter-to: 27%; }
.fg-27 { flex-grow: 27; width: 27%; }
.m-28 { --meter-to: 28%; }
.fg-28 { flex-grow: 28; width: 28%; }
.m-29 { --meter-to: 29%; }
.fg-29 { flex-grow: 29; width: 29%; }
.m-30 { --meter-to: 30%; }
.fg-30 { flex-grow: 30; width: 30%; }
.m-31 { --meter-to: 31%; }
.fg-31 { flex-grow: 31; width: 31%; }
.m-32 { --meter-to: 32%; }
.fg-32 { flex-grow: 32; width: 32%; }
.m-33 { --meter-to: 33%; }
.fg-33 { flex-grow: 33; width: 33%; }
.m-34 { --meter-to: 34%; }
.fg-34 { flex-grow: 34; width: 34%; }
.m-35 { --meter-to: 35%; }
.fg-35 { flex-grow: 35; width: 35%; }
.m-36 { --meter-to: 36%; }
.fg-36 { flex-grow: 36; width: 36%; }
.m-37 { --meter-to: 37%; }
.fg-37 { flex-grow: 37; width: 37%; }
.m-38 { --meter-to: 38%; }
.fg-38 { flex-grow: 38; width: 38%; }
.m-39 { --meter-to: 39%; }
.fg-39 { flex-grow: 39; width: 39%; }
.m-40 { --meter-to: 40%; }
.fg-40 { flex-grow: 40; width: 40%; }
.m-41 { --meter-to: 41%; }
.fg-41 { flex-grow: 41; width: 41%; }
.m-42 { --meter-to: 42%; }
.fg-42 { flex-grow: 42; width: 42%; }
.m-43 { --meter-to: 43%; }
.fg-43 { flex-grow: 43; width: 43%; }
.m-44 { --meter-to: 44%; }
.fg-44 { flex-grow: 44; width: 44%; }
.m-45 { --meter-to: 45%; }
.fg-45 { flex-grow: 45; width: 45%; }
.m-46 { --meter-to: 46%; }
.fg-46 { flex-grow: 46; width: 46%; }
.m-47 { --meter-to: 47%; }
.fg-47 { flex-grow: 47; width: 47%; }
.m-48 { --meter-to: 48%; }
.fg-48 { flex-grow: 48; width: 48%; }
.m-49 { --meter-to: 49%; }
.fg-49 { flex-grow: 49; width: 49%; }
.m-50 { --meter-to: 50%; }
.fg-50 { flex-grow: 50; width: 50%; }
.m-51 { --meter-to: 51%; }
.fg-51 { flex-grow: 51; width: 51%; }
.m-52 { --meter-to: 52%; }
.fg-52 { flex-grow: 52; width: 52%; }
.m-53 { --meter-to: 53%; }
.fg-53 { flex-grow: 53; width: 53%; }
.m-54 { --meter-to: 54%; }
.fg-54 { flex-grow: 54; width: 54%; }
.m-55 { --meter-to: 55%; }
.fg-55 { flex-grow: 55; width: 55%; }
.m-56 { --meter-to: 56%; }
.fg-56 { flex-grow: 56; width: 56%; }
.m-57 { --meter-to: 57%; }
.fg-57 { flex-grow: 57; width: 57%; }
.m-58 { --meter-to: 58%; }
.fg-58 { flex-grow: 58; width: 58%; }
.m-59 { --meter-to: 59%; }
.fg-59 { flex-grow: 59; width: 59%; }
.m-60 { --meter-to: 60%; }
.fg-60 { flex-grow: 60; width: 60%; }
.m-61 { --meter-to: 61%; }
.fg-61 { flex-grow: 61; width: 61%; }
.m-62 { --meter-to: 62%; }
.fg-62 { flex-grow: 62; width: 62%; }
.m-63 { --meter-to: 63%; }
.fg-63 { flex-grow: 63; width: 63%; }
.m-64 { --meter-to: 64%; }
.fg-64 { flex-grow: 64; width: 64%; }
.m-65 { --meter-to: 65%; }
.fg-65 { flex-grow: 65; width: 65%; }
.m-66 { --meter-to: 66%; }
.fg-66 { flex-grow: 66; width: 66%; }
.m-67 { --meter-to: 67%; }
.fg-67 { flex-grow: 67; width: 67%; }
.m-68 { --meter-to: 68%; }
.fg-68 { flex-grow: 68; width: 68%; }
.m-69 { --meter-to: 69%; }
.fg-69 { flex-grow: 69; width: 69%; }
.m-70 { --meter-to: 70%; }
.fg-70 { flex-grow: 70; width: 70%; }
.m-71 { --meter-to: 71%; }
.fg-71 { flex-grow: 71; width: 71%; }
.m-72 { --meter-to: 72%; }
.fg-72 { flex-grow: 72; width: 72%; }
.m-73 { --meter-to: 73%; }
.fg-73 { flex-grow: 73; width: 73%; }
.m-74 { --meter-to: 74%; }
.fg-74 { flex-grow: 74; width: 74%; }
.m-75 { --meter-to: 75%; }
.fg-75 { flex-grow: 75; width: 75%; }
.m-76 { --meter-to: 76%; }
.fg-76 { flex-grow: 76; width: 76%; }
.m-77 { --meter-to: 77%; }
.fg-77 { flex-grow: 77; width: 77%; }
.m-78 { --meter-to: 78%; }
.fg-78 { flex-grow: 78; width: 78%; }
.m-79 { --meter-to: 79%; }
.fg-79 { flex-grow: 79; width: 79%; }
.m-80 { --meter-to: 80%; }
.fg-80 { flex-grow: 80; width: 80%; }
.m-81 { --meter-to: 81%; }
.fg-81 { flex-grow: 81; width: 81%; }
.m-82 { --meter-to: 82%; }
.fg-82 { flex-grow: 82; width: 82%; }
.m-83 { --meter-to: 83%; }
.fg-83 { flex-grow: 83; width: 83%; }
.m-84 { --meter-to: 84%; }
.fg-84 { flex-grow: 84; width: 84%; }
.m-85 { --meter-to: 85%; }
.fg-85 { flex-grow: 85; width: 85%; }
.m-86 { --meter-to: 86%; }
.fg-86 { flex-grow: 86; width: 86%; }
.m-87 { --meter-to: 87%; }
.fg-87 { flex-grow: 87; width: 87%; }
.m-88 { --meter-to: 88%; }
.fg-88 { flex-grow: 88; width: 88%; }
.m-89 { --meter-to: 89%; }
.fg-89 { flex-grow: 89; width: 89%; }
.m-90 { --meter-to: 90%; }
.fg-90 { flex-grow: 90; width: 90%; }
.m-91 { --meter-to: 91%; }
.fg-91 { flex-grow: 91; width: 91%; }
.m-92 { --meter-to: 92%; }
.fg-92 { flex-grow: 92; width: 92%; }
.m-93 { --meter-to: 93%; }
.fg-93 { flex-grow: 93; width: 93%; }
.m-94 { --meter-to: 94%; }
.fg-94 { flex-grow: 94; width: 94%; }
.m-95 { --meter-to: 95%; }
.fg-95 { flex-grow: 95; width: 95%; }
.m-96 { --meter-to: 96%; }
.fg-96 { flex-grow: 96; width: 96%; }
.m-97 { --meter-to: 97%; }
.fg-97 { flex-grow: 97; width: 97%; }
.m-98 { --meter-to: 98%; }
.fg-98 { flex-grow: 98; width: 98%; }
.m-99 { --meter-to: 99%; }
.fg-99 { flex-grow: 99; width: 99%; }
.m-100 { --meter-to: 100%; }
.fg-100 { flex-grow: 100; width: 100%; }


/* Pass 2: quiet links are graphite, not a second cobalt accent.
   Base quiet-links (was only inside the 760 block, so 1440 ran on). */
.link-quiet {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: calc(var(--layout-unit) * 1);
  font-weight: 550;
}
.link-quiet:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-secondary);
}
.onboard a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: calc(var(--layout-unit) * 1);
}
.quiet-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--layout-unit) * 2) calc(var(--layout-unit) * 4);
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin: 0;
}
.quiet-links a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: calc(var(--layout-unit) * 1);
}
.quiet-links a:hover,
.onboard a:hover {
  text-decoration-color: var(--text-secondary);
}


/* ==========================================================================
   Identity round 1 (2026-11-12): palette, type, hero, pins, motion.
   All values are tokens. No traffic-light paint. One Signal finding.
   ========================================================================== */

/* Teaser: no background grid, no "live node" chrome. */
body:has(.teaser-viewport) {
  background-image: none;
}
.teaser-status-pill { display: none; }

/* Type: Inter for UI and KPI; Geist Mono only for code, URLs, ms in tables, Ctrl K. */
.metric-card__value,
.ui-kpi__value,
.hero-finding__value,
.health-meter__value,
.vital-card__value,
.tabular {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  color: var(--croscope-graphite-100);
}
.metric-card__label,
.summary-row .metric-card__label,
.vital-card__name,
.priority-list__title,
.finding-path__label,
.insight-strip__kicker {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  text-transform: none;
  color: var(--croscope-graphite-400);
}
.workspace-domain-bar__input,
.workspace-domain-bar__protocol,
.cmd-open kbd,
.bug-evidence,
.bug-evidence pre,
.font-geist-mono,
.speed-result__url,
a.priority-list__url {
  font-family: var(--font-geist-mono);
}

/* Sidebar active: Graphite 850 plane + 2px Graphite 100 inset bar, no Cobalt fill. */
header.top-shell .main-nav__link.is-active {
  color: var(--text-primary);
  background: var(--croscope-graphite-850);
  border-color: transparent;
  box-shadow: none;
  position: relative;
}
header.top-shell .main-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ui-rail-width);
  background: var(--croscope-graphite-100);
}

/* Nav count badge: Graphite 700 pill, Graphite 100 number.
   6px Signal dot only when a critical finding exists. */
.main-nav__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--layout-unit) * 1);
  min-width: calc(var(--layout-unit) * 5);
  height: calc(var(--layout-unit) * 5);
  padding: 0 calc(var(--layout-unit) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--croscope-graphite-700);
  color: var(--croscope-graphite-100);
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-micro);
  border: 0;
}
.main-nav__crit {
  width: var(--croscope-pin-dot);
  height: var(--croscope-pin-dot);
  border-radius: var(--radius-pill);
  background: var(--croscope-signal);
  box-shadow: var(--croscope-pin-outline-shadow);
  flex: 0 0 auto;
}
/* Live = Spectrum pip, never jade. */
.ui-dot--success,
.ch-state--on::before {
  background: var(--croscope-spectrum-on-dark);
}

/* Hero finding: one title 22/600, one Signal metric, one Cobalt action. */
.hero-finding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--layout-unit) * 3);
  padding: calc(var(--layout-unit) * 5);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--croscope-inner-shadow);
  animation: cs-reveal var(--croscope-d-slow) var(--croscope-ease-out) both;
}
.hero-finding__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--croscope-lh-title);
  letter-spacing: -0.02em;
  color: var(--croscope-graphite-100);
  animation: cs-focus var(--croscope-d-slow) var(--croscope-ease-out) both;
}
.hero-finding__metric {
  display: flex;
  align-items: baseline;
  gap: calc(var(--layout-unit) * 2);
}
.hero-finding__value {
  font-size: var(--croscope-fs-display);
  line-height: var(--croscope-lh-display);
  color: var(--croscope-graphite-100);
}
.hero-finding__value.is-signal {
  color: var(--croscope-signal);
}
.hero-finding__unit {
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
}
.hero-finding__dot {
  width: var(--croscope-pin-dot);
  height: var(--croscope-pin-dot);
  border-radius: var(--radius-pill);
  background: var(--croscope-signal);
  box-shadow: var(--croscope-pin-outline-shadow);
  align-self: center;
  animation: pin-dot var(--croscope-d-fast) var(--croscope-ease-out) both;
}
.hero-finding__check {
  width: calc(var(--layout-unit) * 3);
  height: calc(var(--layout-unit) * 3);
  border-radius: var(--radius-pill);
  background: var(--croscope-cobalt-on-dark);
  align-self: center;
  position: relative;
}
.hero-finding__check::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 40%;
  width: 40%;
  height: 25%;
  border-left: calc(var(--ui-rail-width) * 0.5) solid var(--croscope-graphite-950);
  border-bottom: calc(var(--ui-rail-width) * 0.5) solid var(--croscope-graphite-950);
  transform: rotate(-45deg);
}
.hero-finding__leads {
  margin: 0;
  max-width: calc(var(--layout-unit) * 140);
  font-size: var(--croscope-fs-body);
  line-height: var(--croscope-lh-body);
  color: var(--croscope-graphite-300);
}
.hero-finding__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--layout-unit) * 4);
}
.hero-finding.is-quiet {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Health: Graphite 200 fill on Graphite 700 hairline, number Graphite 100. */
.health-meter__value { color: var(--croscope-graphite-100); }
.health-meter__track {
  height: calc(var(--layout-unit) * 0.75);
  background: transparent;
  border: calc(var(--ui-rail-width) * 0.25) solid var(--croscope-graphite-700);
  border-radius: var(--radius-pill);
}
.health-meter__fill,
.health-meter__fill.is-mid,
.health-meter__fill.is-low {
  background: var(--croscope-graphite-200);
}
.health-meter--inline {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--layout-unit) * 2);
  min-width: calc(var(--layout-unit) * 36);
}
.health-meter--inline .health-meter__value { font-size: var(--text-h3); }

/* Empty: even field, no Signal. Failed: empty cell. */
.empty-care {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--layout-unit) * 3);
  padding: calc(var(--layout-unit) * 5);
  background: var(--bg-surface);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.empty-care__field { width: calc(var(--layout-unit) * 24); height: auto; opacity: 0.9; }
.empty-care__next { margin: 0; color: var(--croscope-graphite-300); font-size: var(--croscope-fs-body); }

/* Compact unboxed summary: shapes + numbers, no tiles. */
.summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--layout-unit) * 6) calc(var(--layout-unit) * 8);
  padding: calc(var(--layout-unit) * 2) 0;
  background: transparent;
  border: 0;
}
.summary-row .metric-card,
.summary-row .ui-kpi,
.summary-row article {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: calc(var(--layout-unit) * 28);
  flex: 0 1 auto;
}
.summary-row .metric-card__top { margin: 0; }
.summary-row .metric-card__unit {
  font-size: var(--croscope-fs-caption);
  color: var(--croscope-graphite-400);
  font-weight: var(--croscope-weight-regular);
  font-family: var(--font-sans);
}

/* Vitals as evidence, not four equal KPI tiles. */
.vitals-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--layout-unit) * 5);
  align-items: stretch;
}
.vital-card {
  flex: 1 1 calc(var(--layout-unit) * 40);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: calc(var(--layout-unit) * 2) 0;
  border-radius: 0;
}
.vital-card__value { font-size: var(--text-h2); color: var(--croscope-graphite-100); }
.vital-card.is-worst .vital-card__value { color: var(--croscope-signal); }
.vital-card.is-good .vital-card__value { color: var(--croscope-graphite-100); }
.vital-track {
  position: relative;
  height: calc(var(--layout-unit) * 1);
  margin: calc(var(--layout-unit) * 2) 0;
  background: transparent;
  border-top: calc(var(--ui-rail-width) * 0.25) solid var(--croscope-graphite-700);
}
.vital-track__fill {
  position: absolute;
  left: 0;
  top: calc(var(--layout-unit) * -0.4);
  height: calc(var(--layout-unit) * 0.75);
  width: var(--meter-to);
  background: var(--croscope-graphite-200);
  border-radius: var(--radius-pill);
  transform-origin: left center;
  animation: meter-fill var(--croscope-d-med) var(--croscope-ease-out) both;
}
.vital-track__fill.is-worst { background: var(--croscope-signal); }
.vital-track__fill.is-good { background: var(--croscope-cobalt-on-dark); }
.vital-track__tick {
  position: absolute;
  top: calc(var(--layout-unit) * -1.2);
  width: 0;
  height: calc(var(--layout-unit) * 2.2);
  border-left: calc(var(--ui-rail-width) * 0.25) solid var(--croscope-graphite-300);
  left: var(--tick-to);
}
.vital-check {
  display: inline-block;
  width: calc(var(--layout-unit) * 2.5);
  height: calc(var(--layout-unit) * 2.5);
  border-radius: var(--radius-pill);
  background: var(--croscope-cobalt-on-dark);
  vertical-align: middle;
  margin-left: calc(var(--layout-unit) * 1);
}
.vital-card__note {
  color: var(--croscope-graphite-400);
  font-size: var(--croscope-fs-caption);
}

/* Priority list: v1 shapes, effect in tabular Graphite 300. */
.priority-list { margin: calc(var(--layout-unit) * 2) 0 calc(var(--layout-unit) * 6); }
.priority-list__title {
  margin: 0 0 calc(var(--layout-unit) * 3);
  font-size: var(--croscope-fs-title);
  font-weight: 600;
  color: var(--croscope-graphite-100);
  text-transform: none;
  letter-spacing: -0.02em;
}
.priority-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--layout-unit) * 2); }
.priority-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--layout-unit) * 3);
  align-items: baseline;
  padding: calc(var(--layout-unit) * 2) 0;
  border-bottom: calc(var(--ui-rail-width) * 0.25) solid var(--border-subtle);
  min-height: calc(var(--layout-unit) * 11);
}
.priority-list__name { color: var(--croscope-graphite-100); font-size: var(--croscope-fs-body); }
.priority-list__save,
.priority-list__effect {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--croscope-fs-caption);
  color: var(--croscope-graphite-300);
  text-align: right;
}

/* Pins: 6px Signal (or outline / Graphite) + 2px halo + 1px ring, number in Graphite 950 chip. */
.xray-pin {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--croscope-graphite-100);
  min-width: 0;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--layout-unit) * 1.5);
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: var(--croscope-fs-caption);
  top: calc(var(--layout-unit) * -3);
  left: calc(var(--layout-unit) * -1);
}
.xray-pin__dot {
  width: var(--croscope-pin-dot);
  height: var(--croscope-pin-dot);
  border-radius: var(--radius-pill);
  background: var(--croscope-signal);
  box-shadow: var(--croscope-pin-dot-shadow);
  flex: 0 0 auto;
  animation: pin-dot var(--croscope-d-fast) var(--croscope-ease-out) var(--croscope-d-fast) both;
}
.xray-pin--major .xray-pin__dot {
  background: transparent;
  border: var(--croscope-pin-ring) solid var(--croscope-signal);
  box-shadow: var(--croscope-pin-outline-shadow);
}
.xray-pin--minor .xray-pin__dot {
  background: var(--croscope-graphite-300);
  box-shadow: var(--croscope-pin-outline-shadow);
}
.xray-pin__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--layout-unit) * 5);
  height: calc(var(--layout-unit) * 5);
  padding: 0 calc(var(--layout-unit) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--croscope-graphite-950);
  color: var(--croscope-graphite-100);
  animation: pin-chip var(--croscope-d-med) var(--croscope-ease-out) var(--croscope-d-fast) both;
}
/* Screenshot frame fits the image, no letterbox. */
.xray-stage,
.xray-viewer-stage,
#xray-stage {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  overflow: hidden;
}
.xray-page-image {
  width: 100%;
  height: auto;
  display: block;
}
.client-shot {
  padding: 0;
  background: var(--bg-void);
}

/* Lens loader (scan running). */
.lens-loader {
  width: calc(var(--layout-unit) * 20);
  height: calc(var(--layout-unit) * 20);
  display: block;
}
.scan-progress { flex-direction: row; align-items: center; gap: calc(var(--layout-unit) * 3); }

/* Motion. Durations already zero under prefers-reduced-motion in tokens. */
@keyframes pin-dot {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes pin-chip {
  from { opacity: 0; transform: translateX(calc(var(--layout-unit) * -1)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pin-ring {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes meter-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes cs-focus {
  from { filter: blur(var(--croscope-blur-focus)); opacity: 0.4; }
  to { filter: blur(0); opacity: 1; }
}
.hero-finding.is-fixed .hero-finding__dot {
  background: var(--croscope-cobalt-on-dark);
  transition: background-color var(--croscope-d-slow) var(--croscope-ease-out);
}

/* Kill leftover window-control traffic lights. */
.xray-browser-dots span,
.xray-browser-dots span:nth-child(1) {
  background: var(--croscope-graphite-600);
}


/* Tick positions for the norma threshold. */
.t-0 { --tick-to: 0%; }
.t-1 { --tick-to: 1%; }
.t-2 { --tick-to: 2%; }
.t-3 { --tick-to: 3%; }
.t-4 { --tick-to: 4%; }
.t-5 { --tick-to: 5%; }
.t-6 { --tick-to: 6%; }
.t-7 { --tick-to: 7%; }
.t-8 { --tick-to: 8%; }
.t-9 { --tick-to: 9%; }
.t-10 { --tick-to: 10%; }
.t-11 { --tick-to: 11%; }
.t-12 { --tick-to: 12%; }
.t-13 { --tick-to: 13%; }
.t-14 { --tick-to: 14%; }
.t-15 { --tick-to: 15%; }
.t-16 { --tick-to: 16%; }
.t-17 { --tick-to: 17%; }
.t-18 { --tick-to: 18%; }
.t-19 { --tick-to: 19%; }
.t-20 { --tick-to: 20%; }
.t-21 { --tick-to: 21%; }
.t-22 { --tick-to: 22%; }
.t-23 { --tick-to: 23%; }
.t-24 { --tick-to: 24%; }
.t-25 { --tick-to: 25%; }
.t-26 { --tick-to: 26%; }
.t-27 { --tick-to: 27%; }
.t-28 { --tick-to: 28%; }
.t-29 { --tick-to: 29%; }
.t-30 { --tick-to: 30%; }
.t-31 { --tick-to: 31%; }
.t-32 { --tick-to: 32%; }
.t-33 { --tick-to: 33%; }
.t-34 { --tick-to: 34%; }
.t-35 { --tick-to: 35%; }
.t-36 { --tick-to: 36%; }
.t-37 { --tick-to: 37%; }
.t-38 { --tick-to: 38%; }
.t-39 { --tick-to: 39%; }
.t-40 { --tick-to: 40%; }
.t-41 { --tick-to: 41%; }
.t-42 { --tick-to: 42%; }
.t-43 { --tick-to: 43%; }
.t-44 { --tick-to: 44%; }
.t-45 { --tick-to: 45%; }
.t-46 { --tick-to: 46%; }
.t-47 { --tick-to: 47%; }
.t-48 { --tick-to: 48%; }
.t-49 { --tick-to: 49%; }
.t-50 { --tick-to: 50%; }
.t-51 { --tick-to: 51%; }
.t-52 { --tick-to: 52%; }
.t-53 { --tick-to: 53%; }
.t-54 { --tick-to: 54%; }
.t-55 { --tick-to: 55%; }
.t-56 { --tick-to: 56%; }
.t-57 { --tick-to: 57%; }
.t-58 { --tick-to: 58%; }
.t-59 { --tick-to: 59%; }
.t-60 { --tick-to: 60%; }
.t-61 { --tick-to: 61%; }
.t-62 { --tick-to: 62%; }
.t-63 { --tick-to: 63%; }
.t-64 { --tick-to: 64%; }
.t-65 { --tick-to: 65%; }
.t-66 { --tick-to: 66%; }
.t-67 { --tick-to: 67%; }
.t-68 { --tick-to: 68%; }
.t-69 { --tick-to: 69%; }
.t-70 { --tick-to: 70%; }
.t-71 { --tick-to: 71%; }
.t-72 { --tick-to: 72%; }
.t-73 { --tick-to: 73%; }
.t-74 { --tick-to: 74%; }
.t-75 { --tick-to: 75%; }
.t-76 { --tick-to: 76%; }
.t-77 { --tick-to: 77%; }
.t-78 { --tick-to: 78%; }
.t-79 { --tick-to: 79%; }
.t-80 { --tick-to: 80%; }
.t-81 { --tick-to: 81%; }
.t-82 { --tick-to: 82%; }
.t-83 { --tick-to: 83%; }
.t-84 { --tick-to: 84%; }
.t-85 { --tick-to: 85%; }
.t-86 { --tick-to: 86%; }
.t-87 { --tick-to: 87%; }
.t-88 { --tick-to: 88%; }
.t-89 { --tick-to: 89%; }
.t-90 { --tick-to: 90%; }
.t-91 { --tick-to: 91%; }
.t-92 { --tick-to: 92%; }
.t-93 { --tick-to: 93%; }
.t-94 { --tick-to: 94%; }
.t-95 { --tick-to: 95%; }
.t-96 { --tick-to: 96%; }
.t-97 { --tick-to: 97%; }
.t-98 { --tick-to: 98%; }
.t-99 { --tick-to: 99%; }
.t-100 { --tick-to: 100%; }

/* Pin self-draw stagger (severity order applied as pin-stagger-N). */
.xray-pin__dot { position: relative; }
.xray-pin__dot::before {
  content: "";
  position: absolute;
  inset: calc((var(--croscope-pin-halo) + var(--croscope-pin-ring)) * -1);
  border-radius: var(--radius-pill);
  border: var(--croscope-pin-ring) solid var(--croscope-graphite-100);
  animation: pin-ring var(--croscope-d-fast) var(--croscope-ease-out) var(--pin-delay) both;
}
.pin-stagger-0 { --pin-delay: calc(0 * var(--croscope-d-fast)); }
.pin-stagger-1 { --pin-delay: calc(1 * var(--croscope-d-fast)); }
.pin-stagger-2 { --pin-delay: calc(2 * var(--croscope-d-fast)); }
.pin-stagger-3 { --pin-delay: calc(3 * var(--croscope-d-fast)); }
.pin-stagger-4 { --pin-delay: calc(4 * var(--croscope-d-fast)); }
.pin-stagger-5 { --pin-delay: calc(5 * var(--croscope-d-fast)); }
.pin-stagger-6 { --pin-delay: calc(6 * var(--croscope-d-fast)); }
.pin-stagger-7 { --pin-delay: calc(7 * var(--croscope-d-fast)); }
.pin-stagger-8 { --pin-delay: calc(8 * var(--croscope-d-fast)); }
.pin-stagger-9 { --pin-delay: calc(9 * var(--croscope-d-fast)); }
.pin-stagger-10 { --pin-delay: calc(10 * var(--croscope-d-fast)); }
.pin-stagger-11 { --pin-delay: calc(11 * var(--croscope-d-fast)); }
.pin-stagger-12 { --pin-delay: calc(12 * var(--croscope-d-fast)); }
.pin-stagger-0 .xray-pin__dot,
.pin-stagger-1 .xray-pin__dot,
.pin-stagger-2 .xray-pin__dot,
.pin-stagger-3 .xray-pin__dot,
.pin-stagger-4 .xray-pin__dot,
.pin-stagger-5 .xray-pin__dot,
.pin-stagger-6 .xray-pin__dot,
.pin-stagger-7 .xray-pin__dot,
.pin-stagger-8 .xray-pin__dot,
.pin-stagger-9 .xray-pin__dot,
.pin-stagger-10 .xray-pin__dot,
.pin-stagger-11 .xray-pin__dot,
.pin-stagger-12 .xray-pin__dot {
  animation-delay: calc(var(--pin-delay) + var(--croscope-d-fast));
}
.pin-stagger-0 .xray-pin__num,
.pin-stagger-1 .xray-pin__num,
.pin-stagger-2 .xray-pin__num,
.pin-stagger-3 .xray-pin__num,
.pin-stagger-4 .xray-pin__num,
.pin-stagger-5 .xray-pin__num,
.pin-stagger-6 .xray-pin__num,
.pin-stagger-7 .xray-pin__num,
.pin-stagger-8 .xray-pin__num,
.pin-stagger-9 .xray-pin__num,
.pin-stagger-10 .xray-pin__num,
.pin-stagger-11 .xray-pin__num,
.pin-stagger-12 .xray-pin__num {
  animation-delay: calc(var(--pin-delay) + var(--croscope-d-fast));
}

/* Unbox leftover metric-card role tints on the summary row. */
.summary-row .metric-card--fast,
.summary-row .metric-card--moderate,
.summary-row .metric-card--slow,
.summary-row .metric-card--critical {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 404 uses the empty-cell field, centered quietly. */
.page-404 { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-void); }
.page-404 .empty-care { align-items: flex-start; max-width: calc(var(--layout-unit) * 120); }

/* Severity shape marks (v1): filled Signal, Signal outline, Graphite 300, Graphite 400, Cobalt fixed. */
.sev-mark { display: inline-flex; align-items: center; gap: calc(var(--layout-unit) * 1.5); color: var(--croscope-graphite-400); font-size: var(--croscope-fs-caption); font-weight: var(--croscope-weight-medium); }
.sev-mark__shape { width: calc(var(--layout-unit) * 2); height: calc(var(--layout-unit) * 2); flex: 0 0 auto; }
.sev-mark--critical .sev-mark__shape { background: var(--croscope-signal); border-radius: var(--radius-pill); }
.sev-mark--major .sev-mark__shape { border: var(--croscope-pin-ring) solid var(--croscope-signal); border-radius: var(--radius-pill); background: transparent; }
.sev-mark--medium .sev-mark__shape,
.sev-mark--minor .sev-mark__shape { background: var(--croscope-graphite-300); border-radius: 0; }
.sev-mark--low .sev-mark__shape { background: var(--croscope-graphite-400); border-radius: 0; }
.sev-mark--fixed .sev-mark__shape { background: var(--croscope-cobalt-on-dark); border-radius: var(--radius-pill); }
.sev-mark--system .sev-mark__shape { width: calc(var(--layout-unit) * 2); height: calc(var(--layout-unit) * 2); background: var(--croscope-system-error-on-dark); transform: rotate(45deg); border-radius: 0; }

/* One uppercase eyebrow only: page-header and teaser. Neutralize other kickers. */
.insight-strip__kicker,
.sheet-demo__label,
.metric-card__label {
  text-transform: none;
}

/* Identity r1 critique: list unboxed, health track visible, 404 cell full, vitals paint. */
section.priority-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
section.priority-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--layout-unit) * 3);
  align-items: baseline;
  padding: calc(var(--layout-unit) * 2.5) 0;
  background: transparent;
  border: 0;
  border-bottom: calc(var(--ui-rail-width) * 0.25) solid var(--border-subtle);
  border-radius: 0;
}
section.priority-list li::before { content: none; display: none; }
section.priority-list .priority-list__name { min-width: 0; }
section.priority-list .priority-list__effect,
section.priority-list .priority-list__save {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--croscope-graphite-300);
  text-align: right;
  max-width: calc(var(--layout-unit) * 70);
}

.health-meter { display: flex; flex-direction: column; }
.health-meter--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--layout-unit) * 2);
  min-width: calc(var(--layout-unit) * 48);
}
.health-meter--inline .health-meter__track {
  flex: 1 1 auto;
  width: calc(var(--layout-unit) * 28);
  min-width: calc(var(--layout-unit) * 20);
}

.vital-card .vital-card__value { color: var(--croscope-graphite-100); }
.vital-card.is-worst .vital-card__value { color: var(--croscope-signal); }
.vital-card.is-mid .vital-card__value,
.vital-card.is-poor .vital-card__value { color: var(--croscope-graphite-100); }

.empty-care__field--cell {
  width: calc(var(--layout-unit) * 70);
  height: auto;
  max-width: 100%;
}
.page-404 .empty-care {
  background: transparent;
  border: 0;
  box-shadow: none;
  align-items: flex-start;
}

@media (max-width: 760px) {
  section.priority-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  section.priority-list .priority-list__effect,
  section.priority-list .priority-list__save {
    grid-column: 2;
    text-align: left;
    max-width: none;
  }
}

/* Identity round 2: type, summary line, list, toggle, teaser. */
.page-header__eyebrow,
.teaser-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-kicker);
  font-weight: var(--croscope-weight-medium);
  letter-spacing: var(--croscope-ls-eyebrow);
  text-transform: uppercase;
  color: var(--croscope-graphite-400);
}
.workspace-domain-bar__protocol {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
  text-transform: none;
}
[data-testid="nav-user-email"],
.identity-link,
.user-pill,
.denied-account-email,
.account-email,
.data-timestamp,
.source-badge,
.badge.source-badge {
  font-family: var(--font-sans);
}
.data-label {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
  text-transform: none;
}
.data-value {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-body);
  font-weight: var(--croscope-weight-regular);
  color: var(--croscope-graphite-100);
}
.summary-state--clear { color: var(--croscope-graphite-100); }
.teaser-desc,
.teaser-footer {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-body);
  color: var(--croscope-graphite-400);
}

/* Geist Mono only for URL inputs/selects, ms in tables, Ctrl K. */
.workspace-domain-bar__input,
.xray-toolbar__url,
.cmd-open kbd,
.font-geist-mono,
.font-mono-telemetry.resource-url,
span.resource-url,
.speed-result a,
.priority-list__save,
.opportunity-tag,
.bug-evidence,
.bug-evidence pre {
  font-family: var(--font-geist-mono);
}

.hero-finding__unit {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
  text-transform: none;
}

.summary-line {
  margin: calc(var(--layout-unit) * 2) 0 calc(var(--layout-unit) * 5);
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
}
.summary-line .tabular {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--croscope-graphite-100);
  font-size: var(--croscope-fs-body);
}

.text-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--layout-unit) * 2);
  margin: calc(var(--layout-unit) * 3) 0;
}
.text-tab {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--layout-unit) * 9);
  padding: 0 calc(var(--layout-unit) * 3);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--croscope-graphite-100);
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  text-decoration: none;
}
.text-tab:hover { border-color: var(--croscope-graphite-300); }

/* Ranked list: rank + title + right-aligned tabular effect (speed); effect as second line (errors). */
section.priority-list ol { list-style: none; counter-reset: none; }
section.priority-list li {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: calc(var(--layout-unit) * 3);
  background: transparent;
  border: 0;
  border-bottom: calc(var(--ui-rail-width) * 0.25) solid var(--border-subtle);
  border-radius: 0;
  padding: calc(var(--layout-unit) * 2.5) 0;
}
section.priority-list li::before { content: none; display: none; }
.priority-list__rank {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--croscope-fs-caption);
  font-weight: 600;
  color: var(--croscope-graphite-400);
  min-width: calc(var(--layout-unit) * 4);
}
section.priority-list .priority-list__name { flex: 1 1 0%; min-width: 0; }
section.priority-list .priority-list__save {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  font-family: var(--font-geist-mono);
  font-variant-numeric: tabular-nums;
  color: var(--croscope-graphite-300);
  font-size: var(--croscope-fs-caption);
}
section.priority-list .priority-list__body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--layout-unit) * 1);
}
section.priority-list .priority-list__body .priority-list__effect,
section.priority-list .priority-list__effect {
  display: block;
  text-align: left;
  max-width: none;
  margin-left: 0;
  color: var(--croscope-graphite-400);
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-regular);
}

/* Vitals share one baseline: name, value, track. Lab note is a tooltip. */
.vitals-row { align-items: flex-start; }
.vital-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.vital-card__name {
  display: flex;
  align-items: center;
  gap: calc(var(--layout-unit) * 1);
  min-height: calc(var(--layout-unit) * 5);
}
.vital-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--layout-unit) * 4);
  height: calc(var(--layout-unit) * 4);
  border-radius: var(--radius-pill);
  border: calc(var(--ui-rail-width) * 0.5) solid var(--croscope-graphite-400);
  color: var(--croscope-graphite-400);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 600;
  cursor: help;
}
.vital-card__value { min-height: calc(var(--layout-unit) * 8); }

/* Toggle ON: Graphite 100 track, Graphite 950 thumb, no Cobalt glow. */
.croscope-radar-toggle.is-on .croscope-radar-toggle__track {
  background: var(--croscope-graphite-100);
  border-color: var(--croscope-graphite-100);
  box-shadow: none;
}
.croscope-radar-toggle.is-on .croscope-radar-toggle__thumb {
  background: var(--croscope-graphite-950);
  box-shadow: none;
}

/* Identity GO, round 3 polish: rhythm, evidence, teaser wrap, vitals. */
.teaser-title {
  text-wrap: balance;
}

/* 48px (12 × 4px) between major cabinet blocks, 8-pt grid. */
main.page-shell > .page-header,
main.page-shell > .hero-finding,
main.page-shell > .empty-care,
main.page-shell > .priority-list,
main.page-shell > .vitals-row,
main.page-shell > .summary-line,
main.page-shell > .text-tabs,
main.page-shell > .xray-workbench,
main.page-shell > .radar-hero-card,
main.page-shell > .history-panel,
main.page-shell > .onboard,
main.page-shell > .scan-progress,
main.page-shell > .note-calm,
main.page-shell > .yandex-webmaster-hint {
  margin-top: 0;
  margin-bottom: calc(var(--layout-unit) * 12);
}
main.page-shell > .scan-job-status {
  margin-top: 0;
  margin-bottom: 0;
}
main.page-shell > .scan-job-status:not(:empty) {
  margin-bottom: calc(var(--layout-unit) * 12);
}
main.page-shell > .xray-workbench {
  margin-top: calc(var(--layout-unit) * 12);
}


/* Evidence cards: data-dense-ui-v1 type scale 11/13/15 Inter 450/550, 8-pt padding. */
section.xray-workbench .bug-card,
.bug-Inspector-column .bug-card {
  padding: calc(var(--layout-unit) * 4);
  gap: calc(var(--layout-unit) * 4);
}
section.xray-workbench .bug-evidence,
.bug-Inspector-column .bug-evidence {
  margin-top: 0;
  padding: calc(var(--layout-unit) * 4);
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-regular);
  color: var(--croscope-graphite-100);
  line-height: var(--croscope-lh-body);
}
section.xray-workbench .bug-evidence > * + *,
.bug-Inspector-column .bug-evidence > * + * {
  margin-top: calc(var(--layout-unit) * 2);
}
section.xray-workbench .bug-evidence .text-muted,
.bug-Inspector-column .bug-evidence .text-muted {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  font-weight: var(--croscope-weight-medium);
  color: var(--croscope-graphite-400);
}
section.xray-workbench .bug-evidence pre,
.bug-Inspector-column .bug-evidence pre {
  font-family: var(--font-geist-mono);
  margin-top: calc(var(--layout-unit) * 2);
}
section.xray-workbench .finding-path,
.bug-Inspector-column .finding-path {
  gap: calc(var(--layout-unit) * 4);
  margin-top: calc(var(--layout-unit) * 4);
}
section.xray-workbench .finding-path__step,
.bug-Inspector-column .finding-path__step {
  padding: calc(var(--layout-unit) * 4);
}
section.xray-workbench .finding-path__label,
.bug-Inspector-column .finding-path__label {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-kicker);
  font-weight: var(--croscope-weight-medium);
  letter-spacing: var(--croscope-ls-eyebrow);
  text-transform: none;
  color: var(--croscope-graphite-400);
  margin-bottom: calc(var(--layout-unit) * 2);
}
section.xray-workbench .finding-path__body,
.bug-Inspector-column .finding-path__body {
  font-family: var(--font-sans);
  font-size: var(--croscope-fs-caption);
  color: var(--croscope-graphite-100);
}

.vital-card__value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
}