/* deadkey.net — /check page ("Check a deadkey"). Builds on site.css tokens. */

.check-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
}
.check-tab {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.check-tab:hover { color: var(--color-text-primary); }
.check-tab.is-active {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.check-tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.check-result { margin-top: var(--space-2); }
.check-result .callout p + p { margin-top: var(--space-2); }

.check-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.check-facts:empty { display: none; }
.check-facts dt { color: var(--color-text-muted); }
.check-facts dd { margin: 0; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .check-facts { grid-template-columns: 1fr; gap: 2px; }
  .check-facts dd { margin-bottom: var(--space-3); }
}