/* Overrides for kauz.css */

article {
  text-align: center;
  margin-block: var(--space-4);
}

figure {
  display: inline-block;
  padding: var(--space-2);
  background: var(--color-bg-elev);
  border: var(--border-normal);
}

#char-input {
  font-size: 2rem;
  text-align: center;
  width: 4rem;
}

.controls {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  max-width: 28rem;
  margin: var(--space-3) auto var(--space-2);
}

.controls label {
  flex: 1;
  text-align: left;
  margin: 0;
}

.controls select {
  margin-top: calc(var(--space-unit) * 0.5);
}

.actions {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-block: var(--space-3);
}

#download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}

#download:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* Scrollbars: thin, low-contrast, no track chrome.
   The design system uses heavy borders on <pre> already; the native
   scrollbar competes with them. Slim it down to a single muted bar. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-fg-dim) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--color-fg-dim);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-fg-muted);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}