/* RankFixer.ai — shared component styles, consumed by both apps via Trunk.
   Reads design tokens from @rankfixer/design-system's compiled tokens.css
   (linked separately in each app's index.html) — never hardcode a color,
   size, or shadow here; reference a --token instead. */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-background-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-normal);
  -webkit-font-smoothing: antialiased;
}

a {
  /* brand-blue-bright, not brand-blue-light: the lighter variant failed
     WCAG AA contrast against dark/glass backgrounds in several places
     (axe-core audit, Phase 0 QA pass) — bright cyan-blue has enough more
     luminance to pass consistently as the default link color. NOTE: this
     default is dark-theme-safe only — components that render a bare <a>
     visible on a light-theme white/near-light surface (e.g.
     `.rf-card__view-all` below) need their own light-theme override,
     since overriding the color here at the bare-`a` level would win over
     lower-specificity component rules like `.rf-sidebar__item`'s muted
     text color and break those instead (2026-09-02 axe-core pass). */
  color: var(--color-brand-blue-bright);
  text-decoration: none;
}
a:hover {
  color: var(--color-brand-blue-hover);
}

::selection {
  background: color-mix(in srgb, var(--color-brand-blue) 35%, transparent);
}

.rf-glass {
  background: var(--color-background-elevated);
  backdrop-filter: var(--surface-blur-md);
  -webkit-backdrop-filter: var(--surface-blur-md);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-xxl);
}

.rf-glass--strong {
  background: var(--color-background-elevated-strong);
  border-color: var(--color-border-glass-strong);
  box-shadow: var(--elevation-glass-shadow), var(--elevation-glass-inset);
}

/* ===== Logo ===== */
.rf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-logo__wordmark {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rf-logo__wordmark-primary {
  color: var(--color-brand-blue-light);
}
.rf-logo__wordmark-accent {
  color: var(--color-brand-orange-light);
}

/* ===== Button ===== */
.rf-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.rf-button:active {
  transform: translateY(1px);
}
.rf-button svg {
  width: 16px;
  height: 16px;
}
.rf-button--primary.rf-button--blue {
  background: linear-gradient(135deg, var(--color-brand-blue-bright), var(--color-brand-blue));
  color: var(--color-text-on-accent);
  box-shadow: var(--elevation-button-glow-blue);
}
.rf-button--primary.rf-button--amber {
  background: linear-gradient(135deg, var(--color-brand-amber-light), var(--color-brand-amber));
  color: var(--color-text-on-accent);
  box-shadow: var(--elevation-button-glow-amber);
}
.rf-button--primary:hover {
  filter: brightness(1.08);
}
.rf-button--secondary {
  background: var(--color-background-elevated);
  border-color: var(--color-border-glass-strong);
  color: var(--color-text-primary);
}
.rf-button--secondary:hover {
  background: var(--color-background-elevated-strong);
}
.rf-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== IconButton ===== */
.rf-icon-button {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass-strong);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.rf-icon-button svg {
  width: 18px;
  height: 18px;
}
.rf-icon-button:hover {
  background: var(--color-background-elevated-strong);
}

/* ===== TextField ===== */
.rf-textfield {
  display: block;
}
.rf-textfield__label {
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-bottom: 6px;
}
.rf-textfield__control {
  position: relative;
}
.rf-textfield__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  display: flex;
}
.rf-textfield__icon svg {
  width: 16px;
  height: 16px;
}
.rf-textfield__input {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  padding: 0 var(--space-4);
}
.rf-textfield__input--with-icon {
  padding-left: 40px;
}
.rf-textfield__input::placeholder {
  color: var(--color-text-faint);
}
.rf-textfield__input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 25%, transparent);
}

/* ===== Toggle ===== */
.rf-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.rf-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.rf-toggle__track {
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-border-glass-strong);
  border: 1px solid var(--color-border-glass);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.15s ease;
}
.rf-toggle__thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}
.rf-toggle input:checked + .rf-toggle__track {
  background: color-mix(in srgb, var(--color-brand-blue) 55%, transparent);
  border-color: var(--color-brand-blue);
}
.rf-toggle input:checked + .rf-toggle__track .rf-toggle__thumb {
  transform: translateX(18px);
  background: var(--color-brand-blue-bright);
}
.rf-toggle input:focus-visible + .rf-toggle__track {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}
.rf-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
.rf-toggle__label {
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}

/* ===== Select ===== */
.rf-select {
  display: block;
}
.rf-select__label {
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-bottom: 6px;
}
.rf-select__control {
  position: relative;
}
.rf-select__input {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  padding: 0 var(--space-8) 0 var(--space-4);
  appearance: none;
}
.rf-select__input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 25%, transparent);
}
.rf-select__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-text-muted);
  pointer-events: none;
}
.rf-select__chevron svg {
  width: 16px;
  height: 16px;
}

/* ===== Tabs ===== */
.rf-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border-glass);
  /* A tab strip with many tabs (e.g. Settings' 6 tabs) has no wrap-safe
     layout — wrapping a tab row looks broken. Below its natural width,
     scroll horizontally within the strip instead of letting tabs run off
     the edge of the viewport uncontained (found via 375px viewport check,
     Phase 0 remediation: "Integrations"/"API Keys" tabs were clipped off
     -screen with no way to reach them). Harmless at any width the tabs
     already fit — overflow-x only engages when content actually exceeds
     the container. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rf-tabs__tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  flex-shrink: 0;
  white-space: nowrap;
}
.rf-tabs__tab:hover {
  color: var(--color-text-primary);
}
.rf-tabs__tab--active {
  color: var(--color-brand-blue-light);
  border-bottom-color: var(--color-brand-blue);
  font-weight: var(--font-weight-semibold);
}

/* ===== Breadcrumbs ===== */
.rf-breadcrumbs {
  display: flex;
  align-items: center;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}
.rf-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rf-breadcrumbs__item svg {
  width: 14px;
  height: 14px;
  margin: 0 2px;
  opacity: 0.5;
}
.rf-breadcrumbs__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ===== Alert ===== */
.rf-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.rf-alert__icon {
  display: flex;
  flex-shrink: 0;
}
.rf-alert__icon svg {
  width: 18px;
  height: 18px;
}
.rf-alert__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.rf-alert__body {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.rf-alert--success {
  background: color-mix(in srgb, var(--color-semantic-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-semantic-success) 30%, transparent);
}
.rf-alert--success .rf-alert__icon { color: var(--color-semantic-success); }
.rf-alert--warning {
  background: color-mix(in srgb, var(--color-brand-amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-brand-amber) 32%, transparent);
}
.rf-alert--warning .rf-alert__icon { color: var(--color-brand-amber-light); }
.rf-alert--error {
  background: color-mix(in srgb, var(--color-semantic-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-semantic-error) 30%, transparent);
}
.rf-alert--error .rf-alert__icon { color: var(--color-semantic-error-light); }
.rf-alert--info {
  background: color-mix(in srgb, var(--color-brand-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-brand-blue) 28%, transparent);
}
.rf-alert--info .rf-alert__icon { color: var(--color-brand-blue-light); }

/* ===== ProgressBar ===== */
.rf-progress__label {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.rf-progress__track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-background-elevated-strong);
  overflow: hidden;
}
.rf-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.rf-progress__fill--success { background: var(--color-semantic-success); }
.rf-progress__fill--warning { background: var(--color-semantic-warning); }
.rf-progress__fill--error { background: var(--color-semantic-error); }
.rf-progress__fill--blue { background: var(--color-brand-blue-bright); }

/* ===== Modal ===== */
.rf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(5, 8, 20, 0.6);
  backdrop-filter: var(--surface-blur-sm);
  -webkit-backdrop-filter: var(--surface-blur-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.rf-modal {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius-xxl);
  background: var(--color-background-elevated-strong);
  backdrop-filter: var(--surface-blur-xl);
  -webkit-backdrop-filter: var(--surface-blur-xl);
  border: 1px solid var(--color-border-glass-strong);
  box-shadow: var(--elevation-glass-shadow), var(--elevation-glass-inset);
}
.rf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-modal__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.rf-modal__close {
  display: flex;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.rf-modal__close svg { width: 18px; height: 18px; }
.rf-modal__body {
  padding: var(--space-6);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-normal);
}
.rf-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border-glass);
}

/* ===== EmptyState ===== */
.rf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-2);
}
.rf-empty-state__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.rf-empty-state__icon svg { width: 22px; height: 22px; }
.rf-empty-state__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.rf-empty-state__description {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 320px;
}
.rf-empty-state__action { margin-top: var(--space-3); }

/* ===== Editor primitives ===== */
.rf-term-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
}
.rf-term-chip__count {
  font-size: var(--font-size-caption);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.rf-term-chip--covered {
  background: color-mix(in srgb, var(--color-semantic-success) 14%, transparent);
  color: var(--color-semantic-success);
  border-color: color-mix(in srgb, var(--color-semantic-success) 30%, transparent);
}
.rf-term-chip--under {
  background: var(--color-background-elevated);
  color: var(--color-text-muted);
  border-color: var(--color-border-glass);
}
.rf-term-chip--over {
  background: color-mix(in srgb, var(--color-semantic-error) 12%, transparent);
  color: var(--color-semantic-error-light);
  border-color: color-mix(in srgb, var(--color-semantic-error) 28%, transparent);
}
.rf-inline-score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rf-inline-score__text {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-family-display);
}
.rf-inline-score__value {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
}
.rf-inline-score__value--success { color: var(--color-semantic-success); }
.rf-inline-score__value--warning { color: var(--color-brand-amber-light); }
.rf-inline-score__value--error { color: var(--color-semantic-error-light); }
.rf-inline-score__target {
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}
.rf-collapsible-sidebar {
  width: 320px;
  flex-shrink: 0;
  overflow: hidden;
}
.rf-collapsible-sidebar__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.rf-collapsible-sidebar__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}
.rf-collapsible-sidebar__body {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ===== DataTable ===== */
.rf-data-table { width: 100%; }
.rf-data-table table { width: 100%; border-collapse: collapse; }
.rf-data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-data-table__sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
}
.rf-data-table__sort-button svg { width: 12px; height: 12px; }
.rf-data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-data-table tbody tr:last-child td { border-bottom: none; }
.rf-data-table__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8) !important;
}

/* ===== Badge ===== */
.rf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.rf-badge--success {
  background: color-mix(in srgb, var(--color-semantic-success) 15%, transparent);
  color: var(--color-semantic-success);
}
.rf-badge--warning {
  background: color-mix(in srgb, var(--color-semantic-warning) 16%, transparent);
  color: var(--color-brand-amber-light);
}
.rf-badge--error {
  background: color-mix(in srgb, var(--color-semantic-error) 15%, transparent);
  color: var(--color-semantic-error-light);
}
.rf-badge--blue {
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  color: var(--color-brand-blue-light);
}
/* Dark-theme override: brand-blue-light's dark-theme value (#3B82F6) only
   hits ~4.15:1 against this badge's translucent background — just under
   WCAG AA's 4.5:1 for this text size (2026-09-02 axe-core pass, "owner"
   role badge on Team & Workflow). brand-blue-bright is theme-invariant and
   comfortably passes here (~6:1); light theme's brand-blue-light value
   already passes on its own and is left alone. Same three-path structure
   as dist/tokens.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rf-badge--blue {
    color: var(--color-brand-blue-bright);
  }
}
:root[data-theme="dark"] .rf-badge--blue {
  color: var(--color-brand-blue-bright);
}
.rf-badge--neutral {
  background: var(--color-background-elevated);
  color: var(--color-text-muted);
}

/* ===== ScoreGauge ===== */
.rf-score-gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== StatCard ===== */
.rf-stat-card {
  padding: var(--space-5);
  box-shadow: var(--elevation-glass-inset);
}
.rf-stat-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rf-stat-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  color: var(--color-brand-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rf-stat-card__icon svg {
  width: 16px;
  height: 16px;
}
.rf-stat-card__icon--amber {
  background: color-mix(in srgb, var(--color-brand-amber) 16%, transparent);
  color: var(--color-brand-amber-light);
}
.rf-stat-card__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.rf-stat-card__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
}
.rf-stat-card__value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.rf-stat-card__delta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}
.rf-stat-card__delta svg {
  width: 12px;
  height: 12px;
}
.rf-stat-card__delta--positive {
  color: var(--color-semantic-success);
}
.rf-stat-card__delta--negative {
  color: var(--color-semantic-error-light);
}
.rf-stat-card__delta--attention {
  color: var(--color-brand-amber-light);
}
.rf-stat-card__delta--neutral {
  color: var(--color-text-muted);
}

/* ===== Sidebar ===== */
.rf-sidebar {
  width: 260px;
  flex-shrink: 0;
  height: 100%;
  background: var(--color-background-elevated);
  backdrop-filter: var(--surface-blur-lg);
  -webkit-backdrop-filter: var(--surface-blur-lg);
  border-right: 1px solid var(--color-border-glass);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.rf-sidebar--collapsed {
  width: 76px;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.rf-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.rf-sidebar--collapsed .rf-sidebar__header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.rf-sidebar__logo {
  padding: 0 var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.rf-sidebar--collapsed .rf-logo__wordmark {
  display: none;
}
.rf-sidebar__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-border-glass);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rf-sidebar__toggle svg {
  width: 14px;
  height: 14px;
}
.rf-sidebar__toggle:hover {
  background: var(--color-background-elevated);
  color: var(--color-text-primary);
}
.rf-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rf-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}
.rf-sidebar__item-icon {
  display: flex;
  color: inherit;
}
.rf-sidebar__item-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.rf-sidebar__item-label {
  white-space: nowrap;
}
/* Collapsed rail: visually hide the label (not display:none) so it stays
   in the accessibility tree as the link's accessible name — sighted users
   get the icon + hover `title` tooltip, screen readers still get the full
   label. See docs/policies/design-and-accessibility-standards.md. */
.rf-sidebar--collapsed .rf-sidebar__item-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rf-sidebar--collapsed .rf-sidebar__item {
  justify-content: center;
}
.rf-sidebar__item:hover {
  background: var(--color-background-elevated);
  color: var(--color-text-primary);
}
.rf-sidebar__item--active,
.rf-sidebar__item--active:hover {
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  /* brand-blue-bright, not brand-blue-light: the lighter variant failed WCAG
     AA contrast against this translucent-blue background (axe-core audit,
     Phase 0 QA pass) — bright cyan-blue has enough more luminance to pass.
     Dark-theme only, though: on the light-theme background this same
     translucent mix resolves to (a pale blue-white), brand-blue-bright only
     hits ~2.1:1 — real regression caught by the 2026-09-02 axe-core pass on
     the new grouped nav. Overridden to brand-blue-light below for light
     theme (5.4:1+ against this background), mirroring dist/tokens.css's own
     three-path theme-resolution structure (see that file's header comment). */
  color: var(--color-brand-blue-bright);
  font-weight: var(--font-weight-semibold);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rf-sidebar__item--active,
  :root:not([data-theme="dark"]) .rf-sidebar__item--active:hover {
    color: var(--color-brand-blue-light);
  }
}
:root[data-theme="light"] .rf-sidebar__item--active,
:root[data-theme="light"] .rf-sidebar__item--active:hover {
  color: var(--color-brand-blue-light);
}
.rf-sidebar__divider {
  height: 1px;
  background: var(--color-border-glass);
  margin: var(--space-3) var(--space-2);
}
.rf-sidebar__spacer {
  flex: 1;
}
.rf-sidebar__footer {
  padding-top: var(--space-3);
}
.rf-sidebar__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
}
.rf-sidebar--collapsed .rf-sidebar__profile {
  padding: 8px;
  justify-content: center;
}
.rf-sidebar--collapsed .rf-sidebar__profile-info {
  display: none;
}
.rf-sidebar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-brand-blue-bright), var(--color-brand-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-on-accent);
  flex-shrink: 0;
}

/* ===== TopBar ===== */
.rf-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
}
.rf-topbar__eyebrow {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-brand-blue-light);
  opacity: 0.85;
}
.rf-topbar__title {
  /* Rendered as a real <h1> (one per page, via TopBar) for a11y — reset
     the browser's default heading margin/size so it stays visually
     identical to the plain <div> it replaced (2026-09-02 axe-core pass:
     page-has-heading-one was failing on every page since no page had a
     real level-one heading anywhere in its DOM). */
  margin: 0;
  margin-top: 4px;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.rf-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== AppShell ===== */
.rf-app-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  background: var(--color-background-base);
  overflow: hidden;
}
.rf-app-shell__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: rf-blob-drift 26s ease-in-out infinite alternate;
}
.rf-app-shell__blob--a {
  top: -200px;
  left: 200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-brand-blue) 26%, transparent) 0%, transparent 70%);
  filter: blur(90px);
}
.rf-app-shell__blob--b {
  bottom: -260px;
  right: -140px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--color-brand-orange) 20%, transparent) 0%, color-mix(in srgb, var(--color-brand-amber) 14%, transparent) 45%, transparent 72%);
  filter: blur(90px);
  animation-duration: 30s;
}
@keyframes rf-blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.06); }
}
.rf-app-shell__content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (prefers-reduced-motion: reduce) {
  .rf-app-shell__blob {
    animation: none;
  }
}

/* ===== Chart ===== */
.rf-chart {
  width: 100%;
}
.rf-chart__x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.rf-chart__x-label {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ===== Dashboard ===== */
.rf-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  flex-shrink: 0;
}
.rf-dashboard__lower {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

/* Desktop-first, tablet-usable (Design-First plan Section 3.2E): collapse
   multi-column stat/content grids rather than clipping content off-screen.
   `!important` on grid-template-columns specifically overrides the inline
   3-column overrides some Super-Admin screens set per-instance (billing,
   health, ai-tracker stat rows) — without it those wouldn't respond here. */
@media (max-width: 1100px) {
  .rf-dashboard__stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rf-dashboard__lower {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .rf-dashboard__stats {
    grid-template-columns: 1fr !important;
  }
  .rf-app-shell__content {
    padding: var(--space-4);
  }
}
/* Small-viewport fix (375px iPhone-SE-class check, Phase 0 remediation):
   the sidebar's fixed 260px width left almost no room for content on a
   phone-width screen — main content was pushed far past the viewport edge
   and silently clipped by `.rf-app-shell`'s `overflow: hidden` (no scroll,
   no visible error, just gone). Below 480px, force the sidebar into its
   existing icon-only rail treatment regardless of the user's manual
   collapse-toggle state — the toggle still renders but has no visible
   effect at this width, which is correct: expanding back to 260px would
   just reintroduce the same clipping. Reuses the same accessible-label
   clip technique as `.rf-sidebar--collapsed` above (label stays in the
   a11y tree, hidden visually) rather than duplicating a `!important`. */
@media (max-width: 480px) {
  .rf-sidebar {
    width: 76px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .rf-sidebar .rf-logo__wordmark {
    display: none;
  }
  .rf-sidebar .rf-sidebar__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .rf-sidebar .rf-sidebar__item {
    justify-content: center;
  }
  .rf-sidebar .rf-sidebar__item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .rf-sidebar .rf-sidebar__profile {
    padding: 8px;
    justify-content: center;
  }
  .rf-sidebar .rf-sidebar__profile-info {
    display: none;
  }
  /* `.rf-doc-row` (Dashboard "Recent Documents") packs a title column plus
     three fixed-width items (score badge ~39px, status badge 84px, time
     56px) in one row — at this width their combined minimum (~225px +
     gaps) exceeds the whole row's available width, so the title column
     (the one flexible item, `min-width: 0`) was measured getting
     literally squeezed to 0px — not just cramped, the document title was
     entirely invisible, with no way to tell which document a row was for.
     Found via the 375px viewport check, Phase 0 remediation. Wrap the
     title onto its own full-width line above the metadata instead. */
  .rf-doc-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .rf-doc-row__title-col {
    flex-basis: 100%;
  }
  /* `.rf-topbar` packs the page title (eyebrow + heading, which already
     wraps onto multiple lines at this width) against its actions
     (notification icon button + primary CTA button like "New Analysis")
     on one `justify-content: space-between` row with no wrap — at 375px
     the actions got pushed off the right edge, with the CTA button's
     label sliced off mid-word. Let the row wrap so actions drop to their
     own line below the title instead of running off-screen. */
  .rf-topbar {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }
}
.rf-dashboard__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  /* `.rf-dashboard__col` is a grid item of `.rf-dashboard__lower`; a grid
     (and flex) item's default `min-width: auto` refuses to shrink below
     its content's natural min-content width, which silently defeated the
     `grid-template-columns: 1fr` single-column collapse at narrow
     viewports — the column (and everything in it) stayed desktop-width
     and got clipped by `.rf-app-shell`'s `overflow: hidden` instead of
     actually reflowing to 1 column. Found via the 375px viewport check,
     Phase 0 remediation. */
  min-width: 0;
}
.rf-card {
  border-radius: var(--radius-xxl);
  background: var(--color-background-elevated);
  backdrop-filter: var(--surface-blur-lg);
  -webkit-backdrop-filter: var(--surface-blur-lg);
  border: 1px solid var(--color-border-glass);
  /* Same `min-width: auto` flex-item issue as `.rf-dashboard__col` above:
     `.rf-card` is itself a flex item inside `.rf-dashboard__col`'s
     `display: flex; flex-direction: column`, so it needs its own
     `min-width: 0` to actually shrink to the column's narrowed width
     instead of holding at its content's natural size. */
  min-width: 0;
}
.rf-card--chart {
  flex: 1.05;
  min-height: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.rf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.rf-card__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.rf-card__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}
.rf-card--list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rf-card--list-tall {
  flex: 1.3;
}
.rf-card__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  flex-shrink: 0;
}
.rf-card__divider {
  height: 1px;
  background: var(--color-border-glass);
  flex-shrink: 0;
}
.rf-card__view-all {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Light-theme override: the default `a` color (brand-blue-bright) is
   dark-theme-tuned and only hits ~2.6:1 against this card's white
   background — see the `a` rule's comment above. brand-blue-light is
   already the light-theme-tuned text/icon token, and comfortably passes
   here (~6.7:1). Same three-path structure as dist/tokens.css. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rf-card__view-all {
    color: var(--color-brand-blue-light);
  }
}
:root[data-theme="light"] .rf-card__view-all {
  color: var(--color-brand-blue-light);
}
.rf-card__view-all svg {
  width: 12px;
  height: 12px;
}
.rf-doc-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 24px;
}
.rf-doc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-doc-row:last-child {
  border-bottom: none;
}
.rf-doc-row__title-col {
  flex: 1;
  min-width: 0;
}
.rf-doc-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-doc-row__keyword {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.rf-doc-row__status {
  width: 84px;
  text-align: center;
}
.rf-doc-row__time {
  width: 56px;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.rf-keyword-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 22px;
}
.rf-keyword-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-keyword-row:last-child {
  border-bottom: none;
}
.rf-keyword-row__term {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-keyword-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 10px;
}
.rf-keyword-row__meta svg {
  width: 12px;
  height: 12px;
}
.rf-insight-card {
  flex: 1;
  min-height: 0;
  padding: 22px;
  border-radius: var(--radius-xxl);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-brand-orange) 12%, transparent), color-mix(in srgb, var(--color-brand-amber) 20%, transparent));
  backdrop-filter: var(--surface-blur-lg);
  -webkit-backdrop-filter: var(--surface-blur-lg);
  border: 1px solid color-mix(in srgb, var(--color-brand-amber) 35%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rf-insight-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-insight-card__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-brand-amber) 30%, transparent);
  color: var(--color-brand-amber-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rf-insight-card__icon svg {
  width: 14px;
  height: 14px;
}
.rf-insight-card__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-brand-amber-light);
}
.rf-insight-card__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin-top: 10px;
}
.rf-insight-card__cta {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--color-brand-amber-light);
}
.rf-insight-card__cta svg {
  width: 12px;
  height: 12px;
}

/* ===== Settings ===== */
.rf-settings-panel {
  padding: 24px;
  margin-top: -8px;
}
.rf-settings-section__title {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}
.rf-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 560px;
}
@media (max-width: 640px) {
  .rf-settings-grid {
    grid-template-columns: 1fr;
  }
}
.rf-settings-section .rf-button {
  margin-top: 24px;
}
.rf-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  max-width: 560px;
}
.rf-integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  max-width: 560px;
}

.rf-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-glass);
  font-size: 14px;
}
.rf-link-row:last-child {
  border-bottom: none;
}
.rf-link-row svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

/* ===== Onboarding ===== */
.rf-onboarding-steps {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 0 4px;
}
.rf-onboarding-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-faint);
}
.rf-onboarding-step__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.rf-onboarding-step--active {
  color: var(--color-text-primary);
}
.rf-onboarding-step--active .rf-onboarding-step__dot {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: var(--color-text-on-accent);
}
.rf-onboarding-step--done .rf-onboarding-step__dot {
  background: var(--color-semantic-success);
  border-color: var(--color-semantic-success);
  color: var(--color-text-on-accent);
}

.rf-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rf-sidebar--collapsed .rf-admin-badge {
  display: none;
}
.rf-admin-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-brand-orange) 18%, transparent);
  color: var(--color-brand-orange-light);
  border: 1px solid color-mix(in srgb, var(--color-brand-orange) 35%, transparent);
}

/* ===== Toast ===== */
.rf-toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rf-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-background-solid);
  border: 1px solid var(--color-border-glass-strong);
  box-shadow: var(--elevation-glass-shadow);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}
.rf-toast__icon {
  display: flex;
  flex-shrink: 0;
}
.rf-toast__icon svg {
  width: 18px;
  height: 18px;
}
.rf-toast--success .rf-toast__icon { color: var(--color-semantic-success); }
.rf-toast--error .rf-toast__icon { color: var(--color-semantic-error-light); }
.rf-toast--info .rf-toast__icon { color: var(--color-brand-blue-bright); }
.rf-toast__message {
  flex: 1;
}
.rf-toast button {
  display: flex;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.rf-toast button svg {
  width: 14px;
  height: 14px;
}

/* ===== Skeleton ===== */
.rf-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background-elevated) 25%,
    var(--color-border-glass-strong) 37%,
    var(--color-background-elevated) 63%
  );
  background-size: 400% 100%;
  animation: rf-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes rf-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-skeleton { animation: none; background: var(--color-background-elevated-strong); }
}

/* ===== TagInput ===== */
.rf-taginput__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-bottom: 6px;
  display: block;
}
.rf-taginput__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
}
.rf-taginput__control:focus-within {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 25%, transparent);
}
.rf-taginput__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  color: var(--color-brand-blue-light);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
}
.rf-taginput__tag button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.rf-taginput__tag button:hover {
  background: var(--color-border-glass-strong);
}
.rf-taginput__tag svg {
  width: 11px;
  height: 11px;
}
.rf-taginput__input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  padding: 4px;
}
.rf-taginput__input::placeholder {
  color: var(--color-text-faint);
}

/* ===== SearchAutocomplete ===== */
.rf-search-autocomplete {
  position: relative;
}
.rf-search-autocomplete__control {
  position: relative;
}
.rf-search-autocomplete__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-text-muted);
}
.rf-search-autocomplete__icon svg {
  width: 16px;
  height: 16px;
}
.rf-search-autocomplete__input {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  padding: 0 var(--space-4) 0 40px;
}
.rf-search-autocomplete__input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 25%, transparent);
}
.rf-search-autocomplete__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-background-solid);
  border: 1px solid var(--color-border-glass-strong);
  box-shadow: var(--elevation-glass-shadow);
  max-height: 260px;
  overflow-y: auto;
}
.rf-search-autocomplete__option {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.rf-search-autocomplete__option--active {
  background: color-mix(in srgb, var(--color-brand-blue) 16%, transparent);
  color: var(--color-brand-blue-light);
}

/* ===== OptionGroup (Radio / Checkbox) ===== */
.rf-option-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.rf-option-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.rf-option-group--horizontal .rf-option-group__label {
  width: 100%;
  margin-bottom: 4px;
}
.rf-option-group__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  opacity: 0.85;
  padding: 0;
  margin-bottom: 2px;
}
.rf-option-group__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.rf-option-group__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.rf-option-group__control {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-glass-strong);
  background: var(--color-background-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rf-option-group__control--radio { border-radius: 50%; }
.rf-option-group__control--checkbox { border-radius: 5px; }
.rf-option-group__control::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--color-brand-blue-bright);
  border-radius: inherit;
  transform: scale(0);
  transition: transform 0.1s ease;
}
.rf-option-group__control--checkbox::after { border-radius: 2px; }
.rf-option-group__item input:checked + .rf-option-group__control {
  border-color: var(--color-brand-blue);
}
.rf-option-group__item input:checked + .rf-option-group__control::after {
  transform: scale(1);
}
.rf-option-group__item input:focus-visible + .rf-option-group__control {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ===== DateRangePicker ===== */
.rf-date-range__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-bottom: 6px;
  display: block;
}
.rf-date-range__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rf-date-range__control input {
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  padding: 0 var(--space-3);
  /* Native <input type="date"> chrome (calendar icon, picker popup) follows
     `color-scheme`, not our --color-* tokens — it doesn't auto-flip with
     the rest of the theme, so it needs its own light/dark rule pair here,
     mirroring dist/tokens.css's own layered override structure (see that
     file's header comment) rather than a single hardcoded value. Default
     to dark (this product's fallback identity); overridden to light below
     for the same three theme-resolution paths as the token file. */
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rf-date-range__control input {
    color-scheme: light;
  }
}
:root[data-theme="light"] .rf-date-range__control input {
  color-scheme: light;
}
:root[data-theme="dark"] .rf-date-range__control input {
  color-scheme: dark;
}
.rf-date-range__control input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 25%, transparent);
}
.rf-date-range__sep {
  color: var(--color-text-muted);
}
.rf-date-range__control-input--invalid {
  border-color: var(--color-error);
}
.rf-date-range__control-input--invalid:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
}
.rf-date-range__error {
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-label);
  color: var(--color-error-light);
}

/* ===== Auth screen ===== */
.rf-auth-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-background-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rf-auth-page__wordmark {
  position: absolute;
  top: 36px;
  left: 48px;
  z-index: 1;
}
.rf-auth-page__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: rf-blob-drift 24s ease-in-out infinite alternate;
}
.rf-auth-page__blob--blue {
  top: -180px;
  left: -160px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-brand-blue) 55%, transparent) 0%, transparent 70%);
  filter: blur(70px);
}
.rf-auth-page__blob--orange {
  bottom: -220px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--color-brand-orange) 42%, transparent) 0%, color-mix(in srgb, var(--color-brand-amber) 22%, transparent) 45%, transparent 72%);
  filter: blur(80px);
  animation-duration: 28s;
}
.rf-auth-page__blob--amber {
  top: 220px;
  right: 120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-brand-amber) 32%, transparent) 0%, transparent 70%);
  filter: blur(60px);
  animation-duration: 20s;
}
.rf-auth-page__center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .rf-auth-page__blob {
    animation: none;
  }
}
.rf-auth-card {
  width: 440px;
  padding: 40px;
}
.rf-auth-card__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: 28px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.rf-auth-card__subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.rf-auth-card__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-5) 0;
}
.rf-auth-card__divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-border-glass-strong);
}
.rf-auth-card__divider-text {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}
.rf-auth-card__field {
  margin-bottom: var(--space-4);
}
.rf-auth-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rf-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass-strong);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rf-auth-card .rf-button {
  width: 100%;
  height: 48px;
  justify-content: center;
}
.rf-auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}
.rf-auth-trust {
  margin-top: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.55;
}
.rf-auth-trust svg {
  width: 13px;
  height: 13px;
}
.rf-auth-trust span {
  font-size: var(--font-size-caption);
}

/* ===== RankedBarList ===== */
.rf-ranked-bar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.rf-ranked-bar-list__row {
  display: grid;
  grid-template-columns: 96px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
}
.rf-ranked-bar-list__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-ranked-bar-list__track {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-background-elevated);
  overflow: hidden;
}
.rf-ranked-bar-list__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.rf-ranked-bar-list__value {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-align: right;
}

/* ===== ActivityFeed ===== */
.rf-activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rf-activity-feed__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-activity-feed__row:last-child {
  border-bottom: none;
}
.rf-activity-feed__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  color: var(--color-brand-blue-light);
}
.rf-activity-feed__icon svg {
  width: 15px;
  height: 15px;
}
.rf-activity-feed__icon--success {
  background: color-mix(in srgb, var(--color-semantic-success) 15%, transparent);
  color: var(--color-semantic-success);
}
.rf-activity-feed__icon--warning {
  background: color-mix(in srgb, var(--color-semantic-warning) 16%, transparent);
  color: var(--color-brand-amber-light);
}
.rf-activity-feed__icon--info {
  background: color-mix(in srgb, var(--color-brand-blue) 14%, transparent);
  color: var(--color-brand-blue-light);
}
.rf-activity-feed__body {
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  line-height: var(--font-line-height-normal);
}
.rf-activity-feed__action {
  font-weight: var(--font-weight-medium);
}
.rf-activity-feed__detail,
.rf-activity-feed__timestamp {
  color: var(--color-text-muted);
}

/* ===== ApprovalQueue ===== */
.rf-approval-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rf-approval-queue__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-glass);
  transition: opacity 0.15s ease;
}
.rf-approval-queue__row:last-child {
  border-bottom: none;
}
.rf-approval-queue__row--processing {
  opacity: 0.55;
}
.rf-approval-queue__body {
  min-width: 0;
}
.rf-approval-queue__description {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.rf-approval-queue__meta {
  margin: 2px 0 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}
.rf-approval-queue__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.rf-approval-queue__approve,
.rf-approval-queue__reject {
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
}
.rf-approval-queue__approve {
  background: color-mix(in srgb, var(--color-semantic-success) 16%, transparent);
  color: var(--color-semantic-success);
}
.rf-approval-queue__approve:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-semantic-success) 26%, transparent);
}
.rf-approval-queue__reject {
  background: color-mix(in srgb, var(--color-semantic-error) 15%, transparent);
  color: var(--color-semantic-error-light);
}
.rf-approval-queue__reject:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-semantic-error) 25%, transparent);
}
.rf-approval-queue__approve:disabled,
.rf-approval-queue__reject:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== NotificationPanel ===== */
.rf-notification-panel {
  position: relative;
  display: inline-flex;
}
.rf-notification-panel__trigger {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-glass-strong);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.rf-notification-panel__trigger:hover {
  background: var(--color-background-elevated-strong);
}
.rf-notification-panel__trigger svg {
  width: 18px;
  height: 18px;
}
.rf-notification-panel__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-brand-purple);
  color: var(--color-text-on-accent);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  text-align: center;
}
.rf-notification-panel__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--color-background-solid);
  border: 1px solid var(--color-border-glass-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-glass-shadow);
  z-index: 900;
}
.rf-notification-panel__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-glass);
}
.rf-notification-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf-notification-panel__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-glass);
  cursor: pointer;
}
.rf-notification-panel__item:last-child {
  border-bottom: none;
}
.rf-notification-panel__item:hover {
  background: var(--color-background-elevated);
}
.rf-notification-panel__item--unread {
  background: color-mix(in srgb, var(--color-brand-blue) 8%, transparent);
}
.rf-notification-panel__item--unread .rf-notification-panel__message {
  font-weight: var(--font-weight-semibold);
}
.rf-notification-panel__message {
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}
.rf-notification-panel__timestamp {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}
.rf-notification-panel__empty {
  padding: var(--space-5) var(--space-4);
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  text-align: center;
}

/* ===== Sidebar nav groups (Phase 3 grouped-nav restructure) ===== */
.rf-sidebar__group {
  margin-bottom: var(--space-4);
}
.rf-sidebar__group:last-of-type {
  margin-bottom: 0;
}
/* No standalone uppercase-small-label utility class exists yet in this
   file (checked: `.rf-stat-card__label`, `.rf-topbar__eyebrow`, and
   `.rf-data-table th` each define the same small-caps-ish treatment
   independently, scoped to their own component) -- this follows
   `.rf-stat-card__label`'s exact values rather than inventing a fourth
   variant, since it's the closest existing precedent for a muted section
   label at rest (not a colored eyebrow, not a table header). */
.rf-sidebar__group-label {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
}
/* Same visually-hidden-but-accessible technique as
   `.rf-sidebar--collapsed .rf-sidebar__item-label` above (not
   `display:none`): a screen-reader user on the collapsed icon-only rail
   still benefits from hearing each section's heading, arguably more than
   sighted users lose by not seeing it, since the icons alone are more
   ambiguous without a group label for context. */
.rf-sidebar--collapsed .rf-sidebar__group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}