/* 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. */
  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: blur(var(--blur-md)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%);
  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: rgba(255, 255, 255, 0.12);
  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__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: rgba(255, 255, 255, 0.08);
  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: blur(4px);
  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: blur(var(--blur-xl)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(150%);
  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 rgba(255, 255, 255, 0.06);
}
.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);
}
.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: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.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: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  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: rgba(255, 255, 255, 0.06);
  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: rgba(255, 255, 255, 0.04);
  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. */
  color: var(--color-brand-blue-bright);
  font-weight: var(--font-weight-semibold);
}
.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: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.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 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: 4px;
}
.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: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  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: rgba(255, 255, 255, 0.06);
  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;
}
.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 rgba(255, 255, 255, 0.06);
}
.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 rgba(255, 255, 255, 0.06);
}
.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: blur(var(--blur-lg)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  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: rgba(255, 255, 255, 0.9);
  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: rgba(255, 255, 255, 0.04);
  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: rgba(255, 255, 255, 0.04);
  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 rgba(255, 255, 255, 0.06);
  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: rgba(255, 255, 255, 0.06);
  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,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.06) 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: rgba(255, 255, 255, 0.08); }
}

/* ===== 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: rgba(255, 255, 255, 0.15);
}
.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);
  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: rgba(255, 255, 255, 0.12);
}
.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);
}