/* font-page.css — font-generator page styles + snackbars (used by both pages). */

.font-page .site-header,
.font-page .header {
  margin-bottom: 16px;
}

.font-page .options {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 14px 0;
  padding: 16px !important;
  text-align: left;
}

.font-page main {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.font-toolbar {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  margin: 0 auto 12px;
  max-width: none;
}

.font-grid {
  gap: 10px;
  margin-bottom: 0;
  max-width: none;
}

.font-card {
  background: var(--panel-solid);
  border: 2px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--ink);
}

.font-output {
  min-height: 92px;
}

.font-empty {
  color: var(--muted);
  font-family: var(--pixel-bold);
}

/* Snackbars — #snackbar is the studio toast on the PFP page, and the copy
   feedback toast on the font page. #snackbar-2 is the legacy "Try again!"
   toast on the font page. */
#snackbar,
#snackbar-2 {
  border: 2px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--pixel-shadow);
  font-family: var(--pixel-bold);
}