/* ── Typo Generator — ego.cx ── */
:root {
  --brand:       #6366f1;
  --brand-hover: #4f46e5;
  --radius:      0.5rem;
}

/* Theme-aware accent */
[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --brand: #818cf8;
  --brand-hover: #6366f1;
}}

/* ── Header ── */
header.container { padding-block: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
header nav { align-items: center; }
.brand-sep { opacity: .4; margin-inline: .25rem; }
.app-name  { color: var(--brand); font-weight: 600; }
p.subtitle { margin: .25rem 0 0; font-size: .85rem; color: var(--pico-muted-color); }

/* ── Two-column options row ── */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Checkbox grid ── */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .4rem .75rem;
  margin-top: .5rem;
}
.check-label { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }
.check-label input { margin: 0; }

/* ── Buttons ── */
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; gap: .4rem;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
button.btn-icon { padding: .35rem .6rem; }

/* ── Output area ── */
.output-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.output-header label { margin: 0; flex: 1; }

#outputArea {
  min-height: 220px;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  background: var(--pico-card-background-color);
  overflow-y: auto;
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: .9rem;
  line-height: 1.7;
}
.muted { color: var(--pico-muted-color); }
.hidden { display: none !important; }

/* ── Variant blocks ── */
.variant-block {
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--pico-muted-border-color);
}
.variant-block:last-child { border-bottom: none; margin-bottom: 0; }
.variant-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pico-muted-color); margin-bottom: .4rem; }
.variant-text  { white-space: pre-wrap; word-break: break-word; }

/* ── Badge ── */
.badge {
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Alert ── */
#alert {
  padding: .6rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
  border: 1px solid var(--pico-del-color);
  color: var(--pico-del-color);
}

/* ── Footer ── */
footer.container { padding-block: 1rem; margin-top: 2rem; border-top: 1px solid var(--pico-muted-border-color); text-align: center; }

/* ── Loading spinner on button ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinning svg { animation: spin .7s linear infinite; }

/* ── Responsive: stack on mobile ── */
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr !important; }
  .grid-2col { grid-template-columns: 1fr; }
}