/* ============================================================================
   Band Name Generator — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — lime/olive, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #b9ef61  14.0:1 on --bg   12.9:1 on --surface   14.5:1 on --bg-sunk
     light #54761e  5.0:1 on --bg    5.3:1 on --surface    4.6:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #b9ef61; --accent-dim: rgba(185, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #54761e; --accent-dim: rgba(84, 118, 30, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* ============================================================================
   Controls — genre chips, pattern chips, keyword field
   ========================================================================= */

.bn-tool { margin-bottom: 2.5rem; }

.bn-filterbar { margin-bottom: 1.1rem; }
.bn-filterbar .field-label { display: block; margin-bottom: 0.5rem; }

.bn-keyword-field { max-width: 22rem; margin-bottom: 1.25rem; }
.bn-hint { margin: 0.4rem 0 0; font-size: 0.8125rem; color: var(--text-faint); }

/* ============================================================================
   Results grid
   ========================================================================= */

.bn-empty { margin-bottom: 1.25rem; }

.bn-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 0.85rem;
}

.bn-card {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.bn-card-tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bn-name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 640;
  line-height: 1.3;
  color: var(--accent);
}

.bn-copy-btn { align-self: flex-start; }

/* --------------------------------------------------------------- copy ---- */

.copy-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ok);
  min-width: 4.5em;
}
.copy-status.is-err { color: var(--err); }

/* ------------------------------------------------------------- furniture -- */

.section { max-width: 74ch; }
.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}