@layer components {
  .router-card__lines,
  .router-card__problems {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .router-card__line {
    font-size: var(--text-small);
    color: var(--color-ink-dark);
  }

  .router-card__event {
    font-weight: 600;
    color: var(--color-ink);
  }

  .router-card__problem {
    font-size: var(--text-small);
    color: var(--color-negative);
    background: var(--color-negative-light);
    border: 1px solid var(--color-negative-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
  }

  .router-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
}

@layer components {
  .router-history__error {
    color: var(--color-negative);
  }

  .router-history__group {
    margin-block: var(--space-4) var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-ink);
  }
}

@layer components {
  .router-card__kbd {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 0 0.3em;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    color: var(--color-ink-medium);
  }

  .router-page__mount {
    height: 100%;
  }

  .router-fallback {
    padding: var(--main-padding);
  }
}