/* Entry funnel token migration.
 *
 * Scoped to the pre-protocol trust surfaces. This file overrides legacy
 * prototype chrome from styles.css without reopening the global refactor.
 */

body {
  background: var(--color-semantic-surface-canvas);
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-body);
}

.app {
  gap: var(--spacing-3);
}

.top-brand {
  background: var(--color-semantic-surface-raised);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-3) var(--spacing-4);
}

.top-brand h1 {
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-normal);
  line-height: var(--font-line-height-tight);
}

.top-brand p {
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
  margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);
}

.runtime-badge {
  background: var(--color-semantic-surface-canvas);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-letter-spacing-normal);
  padding: var(--spacing-1) var(--spacing-2);
}

.status {
  background: var(--color-semantic-surface-raised);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
  border-radius: var(--radius-card);
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
  padding: var(--spacing-2) var(--spacing-3);
}

.status.error {
  background: var(--color-semantic-surface-raised);
  border-color: var(--color-semantic-status-act);
  color: var(--color-semantic-status-act);
}

#screen-splash,
#screen-login,
#screen-consent,
#screen-data {
  position: relative;
  font-family: var(--font-family-body);
  color: var(--color-semantic-text-on-canvas);
}

#screen-splash h2,
#screen-login h2,
#screen-consent h2,
#screen-data h2,
#screen-splash h3,
#screen-login h3,
#screen-consent h3,
#screen-data h3,
#screen-splash .brand-mark {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--color-semantic-text-on-canvas);
}

#screen-splash .panel,
#screen-login .panel,
#screen-consent .panel,
#screen-data .panel {
  background: var(--color-semantic-surface-raised);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
  border-top: var(--stroke-chart-line-emphasis) solid
    var(--color-semantic-action-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

#screen-splash .splash-panel {
  gap: var(--spacing-3);
  min-height: calc(var(--spacing-16) + var(--spacing-16) + var(--spacing-16));
}

#screen-splash .brand-mark {
  font-size: var(--font-size-3xl);
}

#screen-splash p,
#screen-login .muted,
#screen-consent .muted,
#screen-data .muted {
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
}

#screen-login .stack-form,
#screen-consent .stack-form,
#screen-data .stack-form {
  gap: var(--spacing-3);
}

#screen-login label,
#screen-consent label,
#screen-data label {
  gap: var(--spacing-2);
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
}

#screen-login .checkbox-row,
#screen-consent .checkbox-row {
  gap: var(--spacing-2);
}

#screen-login input,
#screen-login select,
#screen-consent input,
#screen-consent select,
#screen-data input,
#screen-data select,
#screen-data textarea {
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-default);
  border-radius: var(--radius-input-icon);
  background: var(--color-semantic-surface-raised);
  color: var(--color-semantic-text-on-canvas);
}

#screen-login input:focus,
#screen-login select:focus,
#screen-consent input:focus,
#screen-consent select:focus,
#screen-data input:focus,
#screen-data select:focus,
#screen-data textarea:focus,
#screen-data [role="button"]:focus-visible {
  border-color: var(--color-semantic-border-focus);
  box-shadow: var(--shadow-focus-ring);
}

#screen-login .primary,
#screen-consent .primary,
#screen-data .primary {
  background: var(--color-semantic-action-primary);
  color: var(--color-semantic-action-primary-on);
  border: var(--spacing-0);
  border-radius: var(--radius-cta);
  font-weight: var(--font-weight-semibold);
}

#screen-login .secondary,
#screen-data .secondary {
  background: transparent;
  color: var(--color-semantic-text-on-canvas);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-default);
  border-radius: var(--radius-cta);
  font-weight: var(--font-weight-medium);
}

#screen-consent .summary-box,
#screen-data .summary-box,
#screen-data .subtle-card {
  background: var(--color-semantic-surface-canvas);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
  border-radius: var(--radius-card);
  color: var(--color-semantic-text-on-canvas);
}

#screen-data .subtle-card {
  box-shadow: var(--shadow-xs);
}

#screen-data .parse-filter-chip {
  background: var(--color-semantic-surface-raised);
  border: var(--stroke-border-default) solid
    var(--color-semantic-border-default);
  border-radius: var(--radius-pill);
  color: var(--color-semantic-text-on-canvas);
}

#screen-data .parse-filter-chip.active {
  background: var(--color-semantic-action-primary);
  border-color: var(--color-semantic-action-primary);
  color: var(--color-semantic-action-primary-on);
}

#screen-data .parse-panel-row td,
#screen-data .parse-row-auto {
  background: var(--color-semantic-surface-canvas);
  color: var(--color-semantic-text-on-canvas);
}

#screen-data th {
  color: var(--color-semantic-text-label);
  letter-spacing: var(--font-letter-spacing-wide);
}

#screen-data td {
  border-bottom: var(--stroke-border-default) solid
    var(--color-semantic-border-subtle);
}

#screen-data progress {
  accent-color: var(--color-semantic-action-primary);
}