:root {
  /* Signal — locked design tokens. Single source of truth; do not deviate. */
  --bg:        #0B0B0D;
  --panel:     #141417;
  --panel-2:   #1A1A1F;
  --line:      rgba(255,255,255,.11);
  --line-2:    rgba(255,255,255,.17);
  --text:      #EAEAEC;
  --dim:       #9A9BA2;
  --acc:       #34E3A6;
  --acc-hover: #4AF0B5;
  --acc-ink:   #05130D;
  --radius:    2px;

  /* Compatibility layer — every pre-existing component below was authored against
     these names. Aliasing (rather than touching ~150 call sites) is what makes the
     Signal recolor apply uniformly without risking untested component states.
     The former green/purple/orange tri-accent (mvp/weird/chaos) was fully retired
     in the ln-palette-purge closeout gate: every call site now references --acc
     directly, so no --accent-mvp/weird/chaos alias exists to fall back to. */
  --surface:      var(--panel);
  --surface2:     var(--panel-2);
  --border:       var(--line);
  --text-dim:     var(--dim);

  /* --accent/--muted: several per-page inline <style> blocks (the 4 text-tool
     generators) reference these via var(--accent,#7c6af7)/var(--muted,#888) but
     the names were never actually defined here, so they always silently used
     the stale hardcoded fallback regardless of the page's real theme. Defining
     them fixes every such page in one place instead of editing each fallback. */
  --accent: var(--acc);
  --muted:  var(--dim);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Self-hosted Red Hat Mono (SIL OFL) — subset latin, 3 static weights.
   Deliberate exception to the zero-external-request rule: one self-hosted
   subset display font; body stays system-ui. See brand-assets/HANDOFF.md §11. */
@font-face {
  font-family: 'Red Hat Mono';
  src: url('assets/fonts/red-hat-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('assets/fonts/red-hat-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('assets/fonts/red-hat-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Headings/labels/brand/buttons/numeric indices ride the display mono; body prose
   (p, li, blockquote) stays system-ui via the body-level font-family below. */
h1, h2, h3, h4, h5, h6,
button, .btn-primary, .btn-secondary, .btn-adjust, .btn-rate, .btn-save, .btn-action,
.btn-clear, .btn-link-small, .btn-drawer-inline, .drawer-toggle-btn, .drawer-close-btn,
.modal-close, .mode-btn, .preset-btn, .challenge-btn, .gen-switch-btn, .name-cat-btn,
.seo-btn, .pack-btn, .adv-summary, .research-summary, .dev-summary, .packs-summary,
.snav-brand, .snav-parent, .snav-all,
label, .section-label, .hp-section-label, .prompt-style-label, .combiner-field-label,
.combiner-style-label, .seo-check-links-label, .dash-label, .pub-label,
.packs-sublabel, .adv-sublabel, .name-option-label,
.dash-value, .pub-val, .phrase-text, .hub-card-title, .drawer-title,
.seo-howto > li::before, .drawer-badge, .drawer-inline-count,
.packs-badge, .adv-badge, .events-ls-badge, .saved-badge {
  font-family: var(--font-display);
}

body {
  background-color: var(--bg);
  /* Subtle ~5% SVG-noise grain overlay, tiled over the flat bg. */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcgcmVzdWx0PSdub2lzZScvPjxmZUNvbG9yTWF0cml4IGluPSdub2lzZScgdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAuMDUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-repeat: repeat;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px 80px;
  line-height: 1.5;
  overflow-x: hidden;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   APP SHELL
   ============================================================ */

.app {
  width: 100%;
  max-width: 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   HEADER
   ============================================================ */

header {
  text-align: center;
  padding: 10px 0 6px;
}

h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text);
}

.subtitle {
  font-size: 0.84rem;
  color: var(--text-dim);
  opacity: 0.75;
  letter-spacing: 0.01em;
}

/* ============================================================
   HOME HERO (index.html only)
   ============================================================ */

.home-hero {
  position: relative;
  width: 100%;
  max-width: 850px;
  height: 200px;
  margin: 0 auto 20px;
  background: #0a091b;
  border-radius: var(--radius);
  overflow: hidden;
}
.home-hero-media {
  position: absolute;
  inset: 0;
  display: block;
}
.home-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: brightness(0.72) blur(1px);
  transform: scale(1.03);
}
.home-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,15,26,0.92) 0%, rgba(15,15,26,0.78) 32%, rgba(15,15,26,0.35) 55%, rgba(15,15,26,0.05) 75%);
}
.home-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 36px;
  text-align: left;
}
.home-hero-content h1 { margin-bottom: 10px; }

@media (max-width: 480px) {
  /* Fixed height + overflow:hidden clipped the wrapped H1+tagline+link whenever their
     natural content height exceeded it. Auto height (with a floor) lets the hero grow to
     fit instead. */
  .home-hero { height: auto; min-height: 190px; margin: 0 auto 16px; }
  .home-hero-content { height: auto; max-width: 100%; padding: 20px 18px; }
  /* Flat strong overlay (not the desktop's left-to-right gradient) so the headline stays
     legible over the whole nebula regardless of the now-variable hero height/crop. */
  .home-hero-scrim {
    background: rgba(10,9,27,0.70);
  }
}

/* ============================================================
   MODE SELECTOR
   ============================================================ */

.mode-selector {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.mode-btn {
  padding: 8px 24px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mode-btn:hover { border-color: var(--line-2); color: var(--text); }
/* Standard/Weird/Chaos unify to the single mint accent (no tri-color split);
   subtle differentiation comes from border-style/weight, not hue. */
.mode-btn.active[data-mode="mvp"]   { border-color: var(--acc); color: var(--acc); background: rgba(52,227,166,0.08); }
.mode-btn.active[data-mode="weird"] { border-color: var(--acc); color: var(--acc); background: rgba(52,227,166,0.09); border-width: 2px; }
.mode-btn.active[data-mode="chaos"] { border-color: var(--acc); color: var(--acc); background: rgba(52,227,166,0.09); border-style: dashed; }

/* Chaos: cautionary treatment when inactive */
.mode-btn[data-mode="chaos"]:not(.active) {
  color: rgba(52,227,166,0.5);
  border-color: rgba(52,227,166,0.22);
  border-style: dashed;
}
.mode-btn[data-mode="chaos"]:not(.active):hover {
  color: rgba(52,227,166,0.85);
  border-color: rgba(52,227,166,0.45);
}

.mode-desc {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  min-height: 1.3em;
  margin-top: 10px;
}

/* ============================================================
   VARIETY PRESET SELECTOR
   ============================================================ */

.variety-section { display: flex; flex-direction: column; gap: 10px; }

.preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-btn {
  padding: 8px 20px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.preset-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
.preset-btn.active {
  border-color: #60a5fa;
  color: #93c5fd;
  background: rgba(96,165,250,0.12);
}
.preset-custom { font-style: italic; }
.preset-custom.active { border-color: #94a3b8; color: #cbd5e1; background: rgba(148,163,184,0.1); }

.variety-hint {
  font-size: 0.74rem;
  color: var(--text-dim);
  opacity: 0.6;
  min-height: 1em;
}

/* ============================================================
   PHRASE SECTION
   ============================================================ */

.phrase-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 40px;
  height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: border-color 0.3s;
  position: relative;
}

body[data-mode="mvp"]   .phrase-box { border-color: var(--line-2); }
body[data-mode="weird"] .phrase-box { border-color: var(--line-2); }
body[data-mode="chaos"] .phrase-box { border-color: var(--line-2); border-style: dashed; }

.phrase-text {
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
  color: var(--text);
  letter-spacing: -0.01em;
}

.phrase-text.flash { animation: phraseFlash 0.22s ease-out; }

@keyframes phraseFlash {
  0%   { opacity: 0.2; transform: scale(0.97); }
  100% { opacity: 1;   transform: scale(1); }
}

.phrase-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.phrase-actions .btn-secondary {
  border-color: rgba(255,255,255,0.14);
}
.phrase-actions .btn-secondary:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
}

/* ============================================================
   BUTTONS — PRIMARY
   ============================================================ */

.btn-primary {
  padding: 14px 52px;
  border-radius: var(--radius);
  border: none;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-primary:hover  { background: var(--acc-hover); }
.btn-primary:active { transform: scale(0.97); }
/* ln-a11y-pass: .btn-primary's own fill is --acc (mint), the same color as the
   sitewide :focus-visible outline — an offset outline alone reads ambiguously
   against a same-color fill. Adds an explicit dark ring between the button and
   the mint outline so the focused state stays unambiguous without introducing
   a second focus-ring color sitewide. */
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--bg); }

/* ============================================================
   BUTTONS — SECONDARY
   ============================================================ */

.btn-secondary {
  padding: 10px 22px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn-secondary.small { font-size: 0.78rem; padding: 6px 14px; }

.btn-clear { color: #f87171; border-color: rgba(248,113,113,0.2); }
.btn-clear:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.4); color: #fca5a5; }

/* ============================================================
   ADJUST + RATE PANELS
   ============================================================ */

#panel-adjust, #panel-rate { opacity: 0; pointer-events: none; transition: opacity 0.35s; }
#panel-adjust.revealed, #panel-rate.revealed { opacity: 1; pointer-events: auto; }

.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: block;
}

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-adjust {
  padding: 7px 14px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.79rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  opacity: 0.7;
}
.btn-adjust:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
  opacity: 1;
}

.btn-rate {
  padding: 10px 22px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-rate.good  { color: #86efac;   border-color: rgba(134,239,172,0.3); }
.btn-rate.bad   { color: #f87171;   border-color: rgba(248,113,113,0.3); }
.btn-rate.fave  { color: #fbbf24;   border-color: rgba(251,191, 36,0.3); }
.btn-rate.good:hover  { background: rgba(134,239,172,0.14); border-color: #86efac; transform: scale(1.04); }
.btn-rate.bad:hover   { background: rgba(248,113,113,0.14); border-color: #f87171; transform: scale(1.04); }
.btn-rate.fave:hover  { background: rgba(251,191, 36,0.14); border-color: #fbbf24; transform: scale(1.04); }

/* Active/rated state — shows which rating the current phrase got */
.btn-rate.rated.good { background: rgba(134,239,172,0.18); border-color: #86efac; }
.btn-rate.rated.bad  { background: rgba(248,113,113,0.22); border-color: #f87171; }
.btn-rate.rated.fave { background: rgba(251,191, 36,0.22); border-color: #fbbf24; }

.rating-msg { margin-top: 10px; font-size: 0.875rem; color: var(--text-dim); min-height: 1.4em; }

.rate-log-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ============================================================
   TESTING DASHBOARD
   ============================================================ */

/* #dashboard-section removed in Phase 7 — replaced by #stats-bar + #dev-section */

.dashboard-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  min-width: 64px;
  flex: 1 1 64px;
  max-width: 100px;
}

.dash-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  text-align: center;
}

.dash-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.dashboard-norepeat {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.dash-sep { opacity: 0.35; }

.dash-tag {
  color: var(--acc);
  font-weight: 600;
}

/* ============================================================
   EVENT TRACKING PANEL
   ============================================================ */

/* #events-section removed in Phase 7 — merged into #dev-section */

#events-panel summary { list-style: none; }
#events-panel summary::-webkit-details-marker { display: none; }

.events-summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.events-summary::-webkit-details-marker { display: none; }
.events-summary:hover { color: var(--text); }
.events-ls-badge {
  font-size: 0.63rem;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.2);
  color: var(--text-dim);
  font-weight: 500;
}
#events-panel[open] .packs-chevron { transform: rotate(180deg); }

.events-content {
  margin-top: 10px;
  font-size: 0.73rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  background: var(--surface);
  border-radius: 2px;
  border: 1px solid var(--border);
}
.events-content b { color: var(--text); }
.events-content code { font-size: 0.69rem; background: var(--surface2); padding: 1px 4px; border-radius: 2px; }
.events-keys { margin-top: 4px; opacity: 0.7; }
.events-btns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* ============================================================
   ADVANCED PACKS
   ============================================================ */

.packs-details summary { list-style: none; }
.packs-details summary::-webkit-details-marker { display: none; }
.packs-details summary::marker { display: none; }

.packs-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  user-select: none;
}
.packs-summary:hover .section-label { color: var(--text); }

.packs-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(96,165,250,0.15);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.25);
  font-weight: 600;
}

.packs-chevron {
  margin-left: auto;
  font-size: 1rem;
  color: var(--text-dim);
  transition: transform 0.22s ease, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.packs-details[open] .packs-chevron { transform: rotate(180deg); color: var(--text); }

.packs-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.packs-group { display: flex; flex-direction: column; gap: 8px; }

.packs-sublabel {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  opacity: 0.55;
}

.packs-grid { display: flex; gap: 8px; flex-wrap: wrap; }

.pack-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  min-width: 140px;
  flex: 1 1 140px;
  max-width: 230px;
}
.pack-btn strong { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); display: block; transition: color 0.15s; }
.pack-btn small  { font-size: 0.68rem; color: var(--text-dim); opacity: 0.55; display: block; font-weight: 400; line-height: 1.35; }
.pack-btn:hover  { border-color: rgba(255,255,255,0.22); }
.pack-btn:hover strong { color: var(--text); }
.pack-btn:hover small  { opacity: 0.75; }
.pack-btn.active { border-color: #60a5fa; background: rgba(96,165,250,0.08); }
.pack-btn.active strong { color: #93c5fd; }
.pack-btn.active small  { opacity: 0.8; }

/* ============================================================
   DEBUG PANEL
   ============================================================ */

#debug-section { border-top: 1px solid var(--border); padding-top: 12px; }

#debug-panel summary { list-style: none; }
#debug-panel summary::-webkit-details-marker { display: none; }

.debug-summary {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-dim);
  opacity: 0.4;
  user-select: none;
  letter-spacing: 0.05em;
}
.debug-summary:hover { opacity: 0.7; }

.debug-content {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: 'SF Mono', 'Fira Code', monospace;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 2px;
  border: 1px solid var(--border);
}
.debug-content b { color: var(--text); }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.stats-area { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }

.stats { font-size: 0.78rem; color: var(--text-dim); }

.footer-btns { display: flex; gap: 8px; flex-shrink: 0; align-self: flex-end; }

/* ============================================================
   VIRAL TAGLINE + CHALLENGE LABEL
   ============================================================ */

.viral-tagline {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
  min-height: 1.3em;
  opacity: 0.65;
  margin-bottom: 10px;
  transition: opacity 0.3s;
}

.challenge-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #fbbf24;
  text-align: center;
  min-height: 1.2em;
  letter-spacing: 0.02em;
}

/* ============================================================
   CHALLENGE STYLE SELECTOR
   ============================================================ */

#challenge-section { display: flex; flex-direction: column; gap: 10px; }

.challenge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.challenge-btn {
  padding: 7px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.challenge-btn:hover {
  border-color: rgba(255,255,255,0.22);
  color: var(--text);
}
.challenge-btn.active {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251,191,36,0.09);
}

/* ============================================================
   PROMPT STYLE ROW
   ============================================================ */

.prompt-style-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  opacity: 0.72;
  transition: opacity 0.2s;
}
.prompt-style-row:hover,
.prompt-style-row:focus-within {
  opacity: 1;
}

.prompt-style-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.style-select {
  padding: 6px 28px 6px 12px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9BA2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.style-select:focus { border-color: rgba(96,165,250,0.5); }

.prompt-style-hint {
  font-size: 0.67rem;
  color: var(--text-dim);
  opacity: 0.5;
  flex: 1;
  min-width: 140px;
}

/* ============================================================
   SAVE ROW + SAVE BUTTON
   ============================================================ */

.save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.btn-save {
  padding: 12px 28px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-save:hover {
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.7);
  transform: scale(1.02);
}
.btn-save:active { transform: scale(0.97); }
.btn-save.rated {
  background: rgba(251,191,36,0.22);
  border-color: #fbbf24;
}

.btn-drawer-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid rgba(96,165,250,0.25);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s, background 0.13s;
  white-space: nowrap;
}
.btn-drawer-inline:hover {
  color: #93c5fd;
  border-color: rgba(96,165,250,0.5);
  background: rgba(96,165,250,0.06);
}

.drawer-inline-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(96,165,250,0.2);
  color: #93c5fd;
  border-radius: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.rating-secondary-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   PUBLIC STATS BAR
   ============================================================ */

#stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.public-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 56px;
}

.pub-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}

.pub-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.pub-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 8px;
  flex-shrink: 0;
}

/* ============================================================
   DEV / TESTING INFO (collapsed)
   ============================================================ */

#dev-section {
  opacity: 0.75;
  transition: opacity 0.2s;
}
#dev-section:hover, #dev-section:focus-within { opacity: 1; }

#dev-panel summary { list-style: none; }
#dev-panel summary::-webkit-details-marker { display: none; }

.dev-summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  transition: color 0.15s;
}
.dev-summary:hover { color: var(--text); }
.dev-summary:hover .packs-chevron { color: var(--text); }
#dev-panel[open] .packs-chevron { transform: rotate(180deg); color: var(--text); }

.dev-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* ============================================================
   DASHBOARD HEADER ROW (legacy, kept for compat)
   ============================================================ */

.dashboard-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dashboard-header-row .section-label { margin-bottom: 0; }

.drawer-toggle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 2px;
  border: 1.5px solid rgba(96,165,250,0.35);
  background: rgba(96,165,250,0.08);
  color: #93c5fd;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
  white-space: nowrap;
  flex-shrink: 0;
}
.drawer-toggle-btn:hover {
  border-color: rgba(96,165,250,0.6);
  background: rgba(96,165,250,0.14);
}

.drawer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #3b82f6;
  color: #fff;
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   SAVED IDEAS DRAWER
   ============================================================ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.drawer-overlay.open {
  pointer-events: auto;
  opacity: 1;
}

.saved-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #12122a;
  border-left: 1px solid var(--border);
  z-index: 400;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.saved-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.drawer-total-count { font-size: 0.72rem; color: var(--text-dim); }

.drawer-close-btn {
  width: 30px; height: 30px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s;
}
.drawer-close-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

.drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.drawer-tab {
  padding: 6px 11px;
  border-radius: 2px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
}
.drawer-tab:hover { color: var(--text); background: var(--surface2); }
.drawer-tab.active {
  background: var(--surface2);
  border-color: rgba(96,165,250,0.3);
  color: #93c5fd;
  font-weight: 600;
}

.drawer-search-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
}
.drawer-search:focus { border-color: rgba(96,165,250,0.5); }
.drawer-search::placeholder { color: var(--text-dim); opacity: 0.45; }

.drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
  opacity: 0.7;
}

.drawer-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-export-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.drawer-storage-note {
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.55;
  text-align: center;
}
.drawer-storage-note code {
  font-size: 0.67rem;
  background: var(--surface2);
  padding: 1px 4px;
  border-radius: 2px;
}

#drawer-clear-all {
  width: 100%;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.drawer-confirm-row {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-confirm-msg {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.drawer-confirm-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================
   SAVED IDEA CARDS
   ============================================================ */

.saved-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 0.14s;
  flex-shrink: 0;
}
.saved-card:hover { border-color: rgba(255,255,255,0.14); }

.saved-card-text {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.saved-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.saved-badge {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 600;
}
.saved-badge.favorite { background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.28); }
.saved-badge.good     { background: rgba(52,227,166,0.12); color: var(--acc); border: 1px solid rgba(52,227,166,0.24); }
.saved-badge.bad      { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.24); }

.saved-mode {
  font-size: 0.62rem;
  color: var(--text-dim);
  background: var(--surface);
  padding: 2px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.saved-style { font-size: 0.66rem; color: #fbbf24; opacity: 0.85; }
.saved-time  { font-size: 0.63rem; color: var(--text-dim); margin-left: auto; }

.saved-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.saved-delete-btn {
  opacity: 0.38;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.saved-delete-btn:hover {
  opacity: 1;
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 22px;
  font-size: 0.85rem;
  color: var(--text);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  animation: toastIn 0.2s ease-out;
}
.toast.success { border-color: rgba(52,227,166,0.5);  color: var(--acc); }
.toast.error   { border-color: rgba(248,113,113,0.5); color: #f87171; }
.toast.info    { border-color: rgba(96,165,250,0.4);  color: #93c5fd; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   FALLBACK MODAL
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.modal-close {
  width: 28px; height: 28px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.72rem;
}
.modal-textarea {
  flex: 1;
  padding: 14px 20px;
  background: var(--bg);
  color: var(--text-dim);
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 0.7rem;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  min-height: 200px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.modal-copy-btn { font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
  .phrase-box  { padding: 36px 22px 28px; height: 160px; }
  .phrase-text { font-size: 1.35rem; }
  .btn-primary { padding: 13px 40px; font-size: 1rem; }
  .btn-row     { gap: 6px; }
  .btn-adjust  { font-size: 0.78rem; padding: 7px 12px; }
  .btn-rate    { padding: 9px 16px;  font-size: 0.82rem; }
  .btn-save    { padding: 11px 22px; font-size: 0.95rem; }
  .pack-btn    { min-width: 120px; flex: 1 1 120px; }
  .prompt-style-hint { display: none; }
  .pub-sep     { display: none; }
  .public-stats-row { gap: 14px; }

  /* Drawer full-width on narrow screens */
  .saved-drawer { width: 100vw; }
  .drawer-toggle-btn { padding: 6px 10px; font-size: 0.76rem; }

  /* Secondary actions: 2-column grid on mobile */
  .secondary-actions {
    grid-template-columns: 1fr 1fr;
  }

  .btn-action { font-size: 0.78rem; padding: 9px 6px; }
  .tertiary-actions { gap: 10px; font-size: 0.74rem; }
}

/* ============================================================
   PHASE 8A — PUBLIC UI SIMPLIFICATION
   ============================================================ */

/* Primary action — centered, dominant */
.primary-action {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Secondary actions — 4-button grid */
.secondary-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: -10px;
}

/* Action buttons — consistent height/radius */
.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
  white-space: nowrap;
  min-height: 44px;
}
.btn-action:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
}

/* Favorite */
.btn-action.fave-btn {
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
  background: rgba(251,191,36,0.08);
}
.btn-action.fave-btn:hover {
  background: rgba(251,191,36,0.16);
  border-color: rgba(251,191,36,0.65);
}
.btn-action.fave-btn.rated {
  background: rgba(251,191,36,0.22);
  border-color: #fbbf24;
}

/* Library */
.btn-action.library-btn {
  border-color: rgba(96,165,250,0.28);
  color: var(--text-dim);
}
.btn-action.library-btn:hover {
  color: #93c5fd;
  border-color: rgba(96,165,250,0.52);
  background: rgba(96,165,250,0.08);
}

/* Tertiary actions — small text row below secondary buttons */
.tertiary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -14px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.tertiary-actions:hover { opacity: 1; }

.btn-link-small {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.btn-link-small:hover { color: var(--text); }

.action-sep {
  color: var(--text-dim);
  opacity: 0.4;
  font-size: 0.78rem;
  user-select: none;
}

.coming-soon-text {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.65;
  font-style: italic;
  user-select: none;
}

/* Prompt style area — small, secondary */
.prompt-style-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0.65;
  transition: opacity 0.2s;
  padding: 2px 0;
  margin-top: -6px;
}
.prompt-style-area:hover,
.prompt-style-area:focus-within { opacity: 1; }

/* ============================================================
   ADVANCED OPTIONS (collapsed)
   ============================================================ */

.adv-details summary { list-style: none; }
.adv-details summary::-webkit-details-marker { display: none; }
.adv-details summary::marker { display: none; }

.adv-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  user-select: none;
  border-radius: 2px;
  transition: color 0.15s;
}
.adv-summary:hover { color: var(--text); }
.adv-summary:hover .packs-chevron { color: var(--text); }
.adv-details[open] .packs-chevron { transform: rotate(180deg); color: var(--text); }

.adv-badge {
  display: inline-block;
  font-size: 0.63rem;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(96,165,250,0.15);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.25);
  font-weight: 600;
}

.adv-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.adv-group { display: flex; flex-direction: column; gap: 8px; }

.adv-sublabel {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  opacity: 0.65;
}

.adv-note {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.71rem;
  color: var(--acc);
  opacity: 0.9;
  margin-left: 6px;
  font-weight: 500;
}

/* ============================================================
   RESEARCH MODE (collapsed)
   ============================================================ */

.research-details summary { list-style: none; }
.research-details summary::-webkit-details-marker { display: none; }
.research-details summary::marker { display: none; }

.research-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  user-select: none;
  border-radius: 2px;
  transition: color 0.15s;
}
.research-summary:hover { color: var(--text); }
.research-summary:hover .packs-chevron { color: var(--text); }
.research-details[open] .packs-chevron { transform: rotate(180deg); color: var(--text); }

.research-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* Always show panels inside research body (override the opacity-0 default) */
.research-body #panel-adjust,
.research-body #panel-rate {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.research-note {
  font-size: 0.74rem;
  color: var(--text-dim);
  opacity: 0.6;
  line-height: 1.5;
}

/* ============================================================
   FOOTER — MINIMAL
   ============================================================ */

.footer-minimal {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  opacity: 0.4;
  transition: opacity 0.2s;
}
.footer-minimal:hover { opacity: 0.75; }

/* ============================================================
   PHASE 8E — PART F: SPACING & SYMMETRY POLISH
   ============================================================ */

/* Advanced + Research: visually secondary when closed */
.adv-details,
.research-details {
  opacity: 0.82;
  transition: opacity 0.2s;
}
.adv-details:hover,
.adv-details:focus-within,
.adv-details[open],
.research-details:hover,
.research-details:focus-within,
.research-details[open] { opacity: 1; }

/* Mobile: tighten tertiary less aggressively on narrow screens */
@media (max-width: 480px) {
  /* Issue 1: desktop .secondary-actions rule (repeat(4,1fr)) lives below the first
     media block, so it wins there. This block is after the desktop rule → overrides. */
  .secondary-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: -8px;
  }
  .tertiary-actions   { margin-top: -10px; }
  .prompt-style-area  { margin-top: -4px; }

  /* Issue 2: drawer tabs — reduce padding/font so all 4 tabs fit without scrolling */
  .drawer-tabs {
    gap: 3px;
    padding: 6px 8px;
  }
  .drawer-tab {
    padding: 5px 8px;
    font-size: 0.72rem;
  }
}

/* ============================================================
   NAMES & TITLES MODE
   ============================================================ */

/* Generator type switch — top-level toggle */
.generator-switch {
  display: flex;
  gap: 8px;
}
.gen-switch-btn {
  flex: 1;
  padding: 9px 16px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.gen-switch-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
}
.gen-switch-btn.active {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(52,227,166,0.09);
}
/* Active prompt button uses green accent */
.gen-switch-btn.active[data-gen="prompt"] {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(52,227,166,0.08);
}

/* Name category buttons */
.name-category-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.name-cat-btn {
  padding: 7px 13px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.name-cat-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
}
.name-cat-btn.active {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(52,227,166,0.09);
}

/* Drawer kind filter */
.drawer-kind-row {
  padding: 0 16px 8px;
}
.drawer-kind-filter {
  width: 100%;
  padding: 7px 10px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}
.drawer-kind-filter:focus {
  border-color: var(--acc);
  outline: none;
}

/* Saved card — kind/category badge for name entries */
.saved-kind {
  font-size: 0.78rem;
  color: var(--acc);
  font-weight: 500;
}

/* Word-count option row inside name controls */
.name-options-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.name-option-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.name-option-select {
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  min-width: 130px;
}
.name-option-select:focus {
  border-color: var(--acc);
  outline: none;
}
.name-count-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.7;
  margin: 0;
}
@media (max-width: 480px) {
  .name-options-row { gap: 8px; }
  .name-option-select { min-width: 110px; }
}

/* ============================================================
   HOMEPAGE — dev-panel log buttons + footer generator links
   ============================================================ */

.dev-log-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.site-footer.footer-generators,
.footer-generators {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}
.footer-generators-label { color: var(--text-dim); opacity: 0.7; }
.footer-generators a { color: var(--acc); text-decoration: none; }
.footer-generators a:hover { text-decoration: underline; }
.footer-sep { color: var(--text-dim); opacity: 0.5; }

.footer-badges {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* ============================================================
   SEO LANDING PAGES (loaded by seo-page.js; no app.js)
   Reuses the global tokens; body centering from the base styles applies.
   ============================================================ */

.seo-page {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.breadcrumb {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

.seo-hero { text-align: center; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.seo-hero h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
}
.seo-intro {
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0 auto;
}

/* Tool block */
.seo-tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.seo-tool-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.seo-tool-controls label { font-size: 0.85rem; color: var(--text-dim); }
/* generator-QA self-caught: business-name-generator's longer Mood & Style option text
   pushed the wrap point so the bare "Suffix" <label> and its <select> ended up on
   different flex-wrap lines (label on row 1, select on row 2), visually orphaning the
   label. Grouping them as one flex item keeps the pair atomic through any wrap. */
.cs-suffix-group { display:inline-flex; align-items:center; gap:8px; }

/* ln-generator-word-lock (Sprint 9 Gate 3): shared lock-tray + clickable-result-token
   styles, reused across every representative page this gate wires up. Signal tokens
   only -- square-ish 2px radius (matching --radius sitewide), no glow/gradient/
   glassmorphism, and deliberately NOT pill-shaped (the project's own "no pill-badges"
   constraint) despite "chip" being the common name for this UI pattern. */
.wl-bar { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.wl-tray {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 2px;
  background: var(--surface2);
}
/* generator-QA self-caught: author CSS beats the UA [hidden]{display:none} rule at
   equal specificity, so trayEl.hidden=true (JS) rendered as a visible empty bordered
   box, not actually hidden, on every page load and after releasing all locks. */
.wl-tray[hidden] { display: none; }
.wl-tray-label { font-size: 0.85rem; color: var(--text-dim); }
.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1.5px solid var(--acc); border-radius: 2px;
  background: var(--bg); color: var(--text); font-size: 0.9rem; font-weight: 600;
}
.wl-chip-remove {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.wl-chip-remove:hover, .wl-chip-remove:focus-visible { color: var(--acc); }
.wl-add { display: flex; align-items: center; gap: 8px; }
.wl-add input[type="text"] {
  padding: 8px 12px; border-radius: 2px; border: 1.5px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: 0.9rem; min-width: 160px;
}
.wl-add button {
  padding: 8px 14px; border-radius: 2px; border: 1.5px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: 0.85rem; cursor: pointer;
}
.wl-add button:hover, .wl-add button:focus-visible { border-color: var(--acc); color: var(--acc); }
/* Clickable result tokens -- inline buttons so each word in a result stays part of the
   text flow (no layout shift), with a quiet dotted underline as the only affordance
   until hover/focus (no glow). */
.wl-token {
  background: transparent; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; border-bottom: 1px dotted var(--text-dim);
}
.wl-token:hover, .wl-token:focus-visible { color: var(--acc); border-bottom-color: var(--acc); }
.wl-empty-state { font-size: 0.9rem; color: var(--text-dim); padding: 10px 0; }

.seo-wordcount,
#seo-wordcount {
  padding: 9px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
}
#seo-wordcount:focus { border-color: var(--acc); outline: none; }

.seo-body .btn-primary {
  padding: 13px 36px;
  font-size: 1rem;
}

.seo-tool-status {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  min-height: 1.2em;
  margin: 0;
}

.seo-results {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.seo-result {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.seo-result-name { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
.seo-result-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.seo-btn {
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.seo-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.seo-fav.is-fav {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(52,227,166,0.12);
}

/* Result action buttons: icon-only; aria-label on each button keeps SR access */
.seo-result .seo-btn {
  font-size: 0;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 2px;
}
.seo-result-actions .seo-copy::before {
  content: '\2398';
  font-size: 14px;
  color: var(--text-dim);
}
.seo-result-actions .seo-fav::before {
  content: '\2606';
  font-size: 17px;
  color: var(--text-dim);
}
.seo-result-actions .seo-fav.is-fav::before {
  content: '\2605';
  color: #fbbf24;
}
/* Card (Name Combiner only, operator-kept scope): plain downwards-arrow glyph
   (U+2193, Arrows block) -- matches the button's real action (download a name
   card image). Chosen over an emoji-range pictograph (e.g. downwards BLACK
   arrow U+2B07, framed-picture pictographs) specifically because U+2193 has
   no Emoji_Presentation by Unicode default: it renders as a plain monochrome
   character everywhere, same as \2398/\2606/\2605 above, never a colored
   emoji glyph on some platforms and text on others. */
.seo-result-actions .seo-card::before {
  content: '\2193';
  font-size: 16px;
  color: var(--text-dim);
}

/* Check-availability links (optional, config-driven — e.g. band/song only): a compact
   secondary line, not a 3rd item competing with name+actions for the same row. flex-basis:
   100% forces it onto its own line within .seo-result's flex-wrap without touching the
   name/actions markup or layout at all — pages that never render this element (no config)
   see zero effect from the flex-wrap addition above, since two non-oversized items never
   wrap on their own. */
.seo-check-links {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-dim);
}
.seo-check-links[hidden] { display: none; }
.seo-check-links-label { color: var(--text-dim); }
.seo-check-links a { color: var(--text-dim); text-decoration: underline; }
.seo-check-links a:hover { color: var(--text); }

/* Inline availability check (band page only, spike ln-inline-availability-spike-band):
   the "Check name" trigger reuses the .seo-check-links <a> visual language (plain-text
   button, no border/background) so it reads as one more check option in the same row,
   not a new UI element. Badge colors reuse the site's existing bad/good semantic values
   (already used in .btn-rate.bad/.good, .toast.error/.success on the homepage) rather
   than introducing a new color system — a genuinely new pair would violate the design
   system's "no new color systems" guardrail. */
.seo-check-links button.seo-inline-check {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-dim);
  text-decoration: underline;
}
.seo-check-links button.seo-inline-check:hover { color: var(--text); }
.seo-check-links button.seo-inline-check:disabled { cursor: default; text-decoration: none; opacity: 0.7; }
.seo-inline-badge.in-use { color: #f87171; }
.seo-inline-badge.likely-clear { color: #86efac; }
.seo-inline-badge.check-error { color: var(--text-dim); }

/* Shared generator workbench
   Desktop keeps the generated shortlist primary on the left and moves filters +
   refinement into a compact right rail. Mobile retains the existing stacked flow.
   Business keeps its richer Name Lab layout; combiners and the prompt builder have
   purpose-built interaction models and are intentionally excluded. */
.seo-tool.seo-workbench { align-items: stretch; }
.seo-workbench > .seo-controls-rail {
  order: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.seo-workbench > .seo-results-column {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.seo-workbench > .seo-controls-rail > .seo-tool-controls {
  align-items: stretch;
  justify-content: flex-start;
}
.seo-workbench > .seo-controls-rail > .wl-bar { margin: 0; }
.seo-workbench > .seo-results-column > .seo-library-hint { margin-top: 2px; }
@media (min-width: 900px) {
  /* Match the Business Name Lab's desktop geometry exactly (name-lab.css:
     .seo-page:has(.name-lab){max-width:1040px} + minmax(0,1fr) 320px / 20px gap).
     Without the page-width lift the workbench inherited the generic 760px
     .seo-page cap, leaving the results column ~378px wide and wrapping ordinary
     multi-word names. Scoped with :has() to the workbench class site-chrome.js
     adds, so no non-workbench page's width changes. */
  .seo-page:has(.seo-tool.seo-workbench) { max-width: 1040px; }
  .seo-tool.seo-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    column-gap: 20px;
  }
  .seo-workbench > .seo-results-column { grid-column: 1; grid-row: 1; }
  .seo-workbench > .seo-controls-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-right: 2px;
  }
  .seo-workbench > .seo-controls-rail > .seo-tool-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
  }
  .seo-workbench > .seo-controls-rail > .seo-tool-controls label {
    margin-top: 3px;
    text-align: left;
  }
  .seo-workbench > .seo-controls-rail > .seo-tool-controls select,
  .seo-workbench > .seo-controls-rail > .seo-tool-controls .btn-primary {
    width: 100%;
    min-width: 0;
  }
  .seo-workbench > .seo-controls-rail > .seo-tool-controls .cs-suffix-group {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }
  .seo-workbench > .seo-controls-rail > .wl-bar {
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
  }
  .seo-workbench > .seo-controls-rail > .wl-bar .wl-add {
    align-items: stretch;
    flex-direction: column;
  }
  .seo-workbench > .seo-controls-rail > .wl-bar .wl-add input,
  .seo-workbench > .seo-controls-rail > .wl-bar .wl-add button {
    width: 100%;
    min-width: 0;
  }
  .seo-workbench > .seo-controls-rail > .seo-provider-settings { margin: 0; }
}

/* Result Review + provider visibility are shared across every generator that
   declares checkLinks/checkInline. Availability/search controls stay out of the
   result card until Review is opened, and the page-level disclosure lets the user
   choose which providers appear. */
.seo-result-actions .seo-review::before { content: '\2139'; font-size: 15px; color: var(--text-dim); }
.seo-result-review {
  flex-basis: 100%;
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.seo-result-review[hidden] { display: none; }
.seo-review-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 0.76rem;
}
.seo-review-facts dt { margin: 0; color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.seo-review-facts dd { margin: 0; color: var(--text); }
.seo-review-group {
  flex-basis: 100%;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.seo-review-group[hidden] { display: none; }
.seo-review-group-label {
  flex-basis: 100%;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seo-review-elsewhere { font-size: 0.76rem; }
.seo-review-elsewhere a { color: var(--text-dim); text-decoration: underline; }
.seo-review-elsewhere a:hover { color: var(--text); }

.seo-provider-settings {
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  text-align: left;
}
.seo-provider-settings > summary.seo-provider-settings-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.seo-provider-settings > summary.seo-provider-settings-head::-webkit-details-marker { display: none; }
.seo-provider-settings > summary.seo-provider-settings-head::after {
  content: '+';
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 400;
}
.seo-provider-settings[open] > summary.seo-provider-settings-head::after { content: '−'; }
.seo-provider-settings-body { margin-top: 8px; }
.seo-provider-settings-head {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seo-provider-group { margin: 0 0 8px; }
.seo-provider-group:last-of-type { margin-bottom: 0; }
.seo-provider-group-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seo-provider-group-hint { font-weight: 400; letter-spacing: normal; text-transform: none; }
.seo-provider-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 0.76rem;
  cursor: pointer;
}
.seo-provider-toggle input { accent-color: var(--acc); }
.seo-provider-settings-note {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1.4;
}
.seo-availability-cockpit {
  align-items: center;
  gap: 7px 10px;
  margin-top: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.seo-availability-cockpit .seo-check-links-label {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seo-availability-cockpit button.seo-inline-check {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(52,227,166,0.45);
  background: rgba(52,227,166,0.06);
  color: var(--acc);
  text-decoration: none;
}
.seo-availability-cockpit button.seo-inline-check:hover,
.seo-availability-cockpit button.seo-inline-check:focus-visible {
  border-color: var(--acc);
  background: rgba(52,227,166,0.11);
  color: var(--text);
  outline: none;
}
.seo-availability-cockpit button.seo-inline-check:disabled {
  border-color: var(--border);
  background: transparent;
}
.seo-availability-cockpit .seo-inline-badge {
  flex: 1 1 260px;
  min-width: 0;
  line-height: 1.45;
}
.seo-availability-cockpit .seo-inline-badge.no-record { color: var(--text); }
.seo-inline-badge.is-checking { color: var(--text-dim); }
.seo-inline-checked-at { color: var(--text-dim); white-space: nowrap; }

/* Content sections */
.seo-section { display: flex; flex-direction: column; gap: 12px; }
.seo-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.seo-section h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
}
.seo-section p { font-size: 0.92rem; color: var(--text-dim); }
.seo-section ul { padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.seo-section li { font-size: 0.9rem; color: var(--text-dim); }

/* ln-mvp-closeout-c-repair: prose links inside SEO copy had NO colour rule anywhere in this
   stylesheet, so they fell through to the UA default #0000EE — measured 2.09:1 on the page
   background and 1.96:1 inside a panel, against the AA bar of 4.5. 66 visible links on all 42
   shipped page dirs. --acc is the site's existing accent and measures 11.9:1 on --bg, so this
   adopts the palette rather than introducing a colour.
   Scoped to the containers the defect actually occupies (p / li / .seo-intro), which the census
   showed is exactly coextensive with the failing set: of 2,502 links measured site-wide, the 132
   below AA were all and only these. The underline is kept — colour alone must not be the sole
   affordance for a link in body copy. */
.seo-section p a,
.seo-section li a,
.seo-page .seo-intro a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seo-section p a:hover,
.seo-section li a:hover,
.seo-page .seo-intro a:hover {
  color: var(--acc-hover);
}

/* Static example groups */
.seo-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.seo-example-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 14px 16px;
}
.seo-example-group h3 { margin-bottom: 8px; color: var(--acc); }
.seo-example-group ul { list-style: none; padding: 0; gap: 4px; }
.seo-example-group li { color: var(--text); font-size: 0.88rem; }

/* Related generators */
.seo-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seo-related-links a {
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  font-size: 0.84rem;
}
.seo-related-links a:hover { border-color: var(--acc); color: var(--acc); }

/* FAQ */
.seo-faq details {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 16px;
  background: var(--surface);
}
.seo-faq details + details { margin-top: 8px; }
.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
}
.seo-faq details[open] summary { color: var(--acc); margin-bottom: 8px; }
.seo-faq summary::-webkit-details-marker { color: var(--text-dim); }

/* Disclaimer: a plain 1px border + muted background on all four sides -- no accent
   left-border. A tinted callout with a colored left border is the templated-LLM-UI
   pattern the design notes ban (planning/nameryn-name-lab-v2-workbench-design-notes.md
   §1); the uniform border + muted surface already reads as a quiet, intentional box
   without it. */
.seo-disclaimer {
  font-size: 0.8rem;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 14px;
}

/* Page footer for landing pages */
.seo-footer {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.seo-footer a { color: var(--text-dim); text-decoration: none; }
.seo-footer a:hover { color: var(--text); text-decoration: underline; }

/* ============================================================
   SEO LANDING PAGE — VISUAL POLISH
   Extends/overrides the .seo-* base above. Homepage unaffected.
   ============================================================ */

/* Tool block: mint-accent hairline so it reads as the focal point */
.seo-tool {
  border-color: rgba(52,227,166,0.28);
  padding: 28px 24px 22px;
  gap: 20px;
}

/* Generate button: wider, more commanding */
.seo-body .btn-primary {
  min-width: 210px;
  padding: 13px 44px;
}

/* Status line: slightly larger when filled */
.seo-tool-status {
  opacity: 0.9;
}

/* Library hint — small, always-on affordance */
.seo-library-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  opacity: 0.6;
  line-height: 1.45;
  margin-top: -4px;
}
.seo-library-hint a {
  color: var(--acc);
  text-decoration: none;
}
.seo-library-hint a:hover { text-decoration: underline; opacity: 1; }

/* Result rows: hover glow, compact padding */
.seo-result {
  padding: 8px 11px;
  border-radius: 2px;
  transition: border-color 0.14s, background 0.14s;
}
.seo-result:hover {
  border-color: rgba(52,227,166,0.32);
  background: rgba(52,227,166,0.04);
}

/* Name text: slightly more legible */
.seo-result-name { font-size: 1.05rem; }

/* All action buttons: ensure tap-target floor */
.seo-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Copy: purple tint on hover */
.seo-copy:hover {
  color: var(--acc);
  border-color: rgba(52,227,166,0.5);
  background: rgba(52,227,166,0.07);
}

/* Favorite: gold when starred */
.seo-fav.is-fav {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
}
.seo-fav.is-fav:hover { background: rgba(251,191,36,0.2); border-color: #fbbf24; }

/* Card button: distinct blue-family */
.seo-card { border-color: rgba(96,165,250,0.22); }
.seo-card:hover {
  color: #93c5fd;
  border-color: rgba(96,165,250,0.52);
  background: rgba(96,165,250,0.08);
}

/* Section headings: left accent bar for visual hierarchy */
.seo-section h2 {
  padding-left: 14px;
  border-left: 3px solid rgba(52,227,166,0.55);
  font-size: 1.3rem;
}

/* Body copy: a little more readable */
.seo-section p  { font-size: 0.9rem; line-height: 1.6; }
.seo-section li { line-height: 1.55; }

/* Examples grid: chip-style inline pills */
.seo-examples .seo-example-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
}
.seo-examples .seo-example-group li {
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 10px;
  line-height: 1.35;
}
.seo-examples .seo-example-group li:hover {
  border-color: rgba(52,227,166,0.38);
  color: var(--acc);
  cursor: default;
}

/* How-to: numbered steps with accent circles */
.seo-howto {
  list-style: none;
  padding: 0;
  counter-reset: howto-step;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.seo-howto > li {
  counter-increment: howto-step;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.seo-howto > li::before {
  content: counter(howto-step);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--acc);
  background: rgba(52,227,166,0.12);
  border: 1px solid rgba(52,227,166,0.22);
  border-radius: 2px;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.seo-howto > li strong { color: var(--text); }

/* FAQ: hide default marker, add custom chevron */
.seo-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::marker { display: none; }
.seo-faq summary::after {
  content: '▾';
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.seo-faq details[open] summary::after { transform: rotate(180deg); color: var(--acc); }
.seo-faq details { transition: border-color 0.15s; }
.seo-faq details:hover       { border-color: rgba(52,227,166,0.28); }
.seo-faq details[open]       { border-color: rgba(52,227,166,0.38); }
.seo-faq details[open] summary { margin-bottom: 6px; color: var(--acc); }
.seo-faq details p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.58;
  color: var(--text-dim);
}

/* Disclaimer: slightly more breathing room */
.seo-disclaimer { padding: 14px 16px; font-size: 0.82rem; line-height: 1.5; }

/* Related links: purple accent on hover */
.seo-related-links a:hover {
  border-color: rgba(52,227,166,0.55);
  background: rgba(52,227,166,0.06);
}

/* Hero + breadcrumb */
.seo-hero    { gap: 20px; padding-top: 6px; }
.breadcrumb  { opacity: 0.75; }

/* Mobile: stack controls, full-width button */
@media (max-width: 480px) {
  .seo-tool { padding: 20px 16px 18px; }
  .seo-tool-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* Text-only selector labels ("Mood & Style", "Words") are hidden to save space;
     labels wrapping a functional control (e.g. username/nickname/gamertag's Numbers/
     Underscores/Symbols checkboxes) must stay visible — excluded by class, not by
     structure. */
  .seo-tool-controls label:not(.ug-check-label):not(.ng-check-label):not(.gg-check-label) { display: none; }
  .seo-tool-controls select { width: 100%; }
  .seo-body .btn-primary { min-width: 0; width: 100%; padding: 13px 24px; }
  .seo-btn { padding: 9px 14px; min-height: 44px; }
  .seo-howto > li { gap: 10px; }
  .seo-section h2 { font-size: 1.18rem; }
}

/* ============================================================
   GENERATORS HUB PAGE
   ============================================================ */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.hub-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.hub-card:hover {
  border-color: rgba(52,227,166,0.55);
  background: rgba(52,227,166,0.04);
}
.hub-card-icon { font-size: 2rem; line-height: 1; }
.hub-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.hub-card-desc  { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; flex: 1; }
.hub-card-cta   { font-size: 0.82rem; color: var(--acc); font-weight: 600; margin-top: 4px; }

/* ============================================================
   GUIDES (editorial byline)
   ============================================================ */
.guide-byline {
  font-size: 0.82rem;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.guide-byline a { color: var(--acc); }
.guide-byline a:hover { text-decoration: underline; }

/* ============================================================
   TRUST PAGES (privacy / terms / about)
   ============================================================ */

.static-prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.static-prose h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  padding-left: 12px;
  border-left: 3px solid rgba(52,227,166,0.45);
}
.static-prose h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-top: -6px; }
.static-prose p  { font-size: 0.9rem; color: var(--text-dim); line-height: 1.65; }
.static-prose ul, .static-prose ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.static-prose li { font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; }
.static-prose a  { color: var(--acc); }
.static-prose a:hover { text-decoration: underline; }
.static-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Comparison table (best-name-generators) */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.compare-table th, .compare-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.compare-table thead th {
  background: var(--panel-2);
  color: var(--acc);
  font-weight: 700;
  font-size: 0.8rem;
}
.compare-table tbody th {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.compare-table td { color: var(--text-dim); }

/* ============================================================
   HOMEPAGE — GENERATORS + FAQ SECTIONS
   ============================================================ */

.hp-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  opacity: 0.62;
  margin-bottom: 2px;
}

/* Generator card grid on homepage */
.hp-gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.hp-gen-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 2px;
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
  line-height: 1.3;
}
.hp-gen-link:hover {
  border-color: rgba(52,227,166,0.5);
  background: rgba(52,227,166,0.06);
  color: var(--acc);
}
.hp-gen-link small {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.7;
  line-height: 1.3;
}
.hp-gen-link:hover small { opacity: 0.85; }
.hp-gen-see-all {
  font-size: 0.8rem;
  color: var(--acc);
  text-decoration: none;
  opacity: 0.75;
  align-self: flex-end;
  margin-top: -4px;
}
.hp-gen-see-all:hover { opacity: 1; text-decoration: underline; }

/* Homepage FAQ — reuses .seo-faq rules already defined above.
   The wrapper below just adds section-level spacing. */
.hp-faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 480px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hp-gen-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NAME COMBINER — input-driven tool controls (name-combiner page only).
   Extends the shared .seo-tool card; styles the two name inputs, the optional
   third name, and the style selector cohesively with the rest of the design
   system. Scoped to .combiner-* so the homepage and other pages are unaffected.
   ============================================================ */

.combiner-fields {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.combiner-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 130px;
  max-width: 240px;
  text-align: left;
}
.combiner-field-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.combiner-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.combiner-input::placeholder { color: var(--text-dim); opacity: 0.6; }
.combiner-input:focus {
  border-color: var(--acc);
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,227,166,0.18);
}
.combiner-plus {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--acc);
  padding-bottom: 9px;
  flex: 0 0 auto;
}


/* Style selector + Combine button row */
.combiner-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.combiner-style-label { font-size: 0.85rem; color: var(--text-dim); }
.combiner-style {
  padding: 9px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
}
.combiner-style:focus { border-color: var(--acc); outline: none; }

@media (max-width: 480px) {
  .combiner-fields { gap: 8px; }
  .combiner-field { min-width: 0; }
  .combiner-plus { padding-bottom: 10px; }
}


/* ---- Accessibility: honor reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Screen-reader-only text (ln-a11y-pass) ──────────────────────────────────
   Standard visually-hidden pattern (WebAIM) — used to give a handful of
   inputs a real <label> where a VISIBLE label would duplicate an adjacent
   heading/placeholder and change layout; never for content sighted users
   would otherwise see. ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link (ln-a11y-pass) ─────────────────────────────────────────────────
   Off-screen until focused (keyboard Tab from page load lands here first,
   before the nav) — jumps straight to the page's tool or primary content,
   skipping the repeated nav/dropdown structure. Zero visual footprint for
   mouse/touch users; never overlaps content since it's off-canvas until
   :focus. ─────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--acc);
  color: var(--acc-ink);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ── Global site nav (ln-nav-dropdown-v2) ────────────────────────────────────
   Centered bar with hover + focus-within CSS dropdowns. <div>/<button>
   keeps child <a> links always in DOM (crawlable without JS). Inline JS
   syncs aria-expanded + Esc (progressive enhancement). Hover-bridge delay
   prevents flicker when mouse moves from parent button to dropdown.
   ─────────────────────────────────────────────────────────────────────────── */
.site-nav {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  font-size: 0.82rem;
  line-height: 1.4;
}
.snav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.snav-brand {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.snav-brand img { width: 26px; height: 26px; image-rendering: pixelated; flex-shrink: 0; }
.snav-brand:hover,
.snav-brand:focus-visible { color: var(--acc); outline: none; }
.snav-menu {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
/* ── Mega-menu (ln-nav-mega-menu): a single "Generators ▾" trigger opening a
   7-column panel, replacing the old per-category multi-dropdown nav. Every
   link inside is real static HTML (never JS-injected) — visibility is driven
   ENTIRELY by the JS below (.is-open, mirroring aria-expanded), no CSS
   :hover/:focus-within fallback. A :focus-within-based fallback was tried
   and reverted: the panel is visibility:hidden while closed, so its links
   are already outside the Tab order (nothing for :focus-within to "catch"
   that Tab/click on the trigger button doesn't already cover), and it
   actively broke ESC — closing via JS returns focus to the trigger button
   itself, which sits inside .snav-mega-group, so :focus-within kept
   matching and the panel stayed visually open despite aria-expanded/
   .is-open both being correctly cleared. Keyboard users open it the same
   way as a click: Tab to the button, Enter/Space (native button semantics
   fire the same click handler); ESC closes and returns focus to the
   button; clicking/tabbing outside the group closes it too. ── */
.snav-mega-group { position: relative; }
.snav-parent {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  color: var(--text-dim);
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
  user-select: none;
  background: none;
  border: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}
.snav-parent:hover,
.snav-parent:focus-visible {
  color: var(--text);
  background: var(--surface2);
  outline: none;
}
.snav-parent[aria-expanded="true"] { color: var(--text); background: var(--surface2); }
.snav-caret {
  font-size: 0.6rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.15s;
}
.snav-parent[aria-expanded="true"] .snav-caret { transform: rotate(180deg); }
/* Panel: hidden by default; opened purely via JS's .is-open class. */
.snav-mega-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px;
  width: max-content;
  max-width: min(820px, calc(100vw - 2rem));
  z-index: 102;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: start;
  gap: 4px 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, visibility 0.12s;
}
.snav-mega-panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* ln-nav-mega-align: each of the panel's 4 direct grid children is now a
   .snav-mega-stack — 1-2 .snav-mega-col groups stacked vertically — instead
   of a 7th-item auto-placed grid cell. This replaces implicit row-based
   auto-placement (which forced a ragged 4x2 layout: the 10-item Fantasy
   column stretched row 1 tall, stranding Usernames/Text/AI Prompts far
   below with a big empty lower-left gap) with 4 deliberately balanced,
   top-aligned column-stacks. min-width:0 avoids the grid-item default
   min-width:auto content-based sizing gotcha with long nowrap link text. */
.snav-mega-stack { min-width: 0; }
.snav-mega-heading {
  margin: 8px 0 2px;
  padding: 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acc);
  text-align: left;
}
.snav-mega-col:first-child .snav-mega-heading { margin-top: 0; }
.snav-mega-col ul { list-style: none; margin: 0; padding: 0; }
.snav-mega-col li a {
  display: block;
  padding: 0.32rem 0.4rem;
  border-radius: 2px;
  color: var(--text-dim);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.snav-mega-col li a:hover,
.snav-mega-col li a:focus-visible {
  color: var(--text);
  background: var(--surface2);
  outline: none;
}
/* ── "All Generators"/"AI Prompts"/etc. direct links ── */
.snav-all {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.snav-all:hover,
.snav-all:focus-visible {
  color: var(--text);
  background: var(--surface2);
  outline: none;
}
/* ── Mobile: panel becomes an in-flow, single-column accordion ── */
@media (max-width: 540px) {
  .snav-inner { height: auto; min-height: 40px; padding: 0.4rem 0.75rem; flex-wrap: wrap; }
  .snav-menu { width: 100%; flex-wrap: wrap; }
  .snav-all { width: 100%; }
  .snav-mega-group { position: static; width: 100%; }
  .snav-mega-panel {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    border-radius: var(--radius);
    margin: 2px 0 4px;
    gap: 0;
  }
  .snav-mega-panel.is-open { display: grid; }
}

/* ============================================================
   MOBILE FOLD DENSITY — compact generator layout for 390×844
   Desktop behavior unchanged; all rules scoped to ≤480 px.
   This block is last so it cascades over earlier ≤480 / ≤540
   media rules without needing !important.
   ============================================================ */
@media (max-width: 480px) {

  /* Nav: inline nav items so brand + groups share rows instead of stacking
     (≤540 rule forces snav-menu + each snav-mega-group to width:100%) */
  .snav-menu      { width: auto; }
  .snav-mega-group { width: auto; }
  .snav-all       { width: auto; }
  .site-nav       { margin-bottom: 12px; }

  /* SEO page: tighter section gaps */
  .seo-page { gap: 10px; }

  /* Hero: tighter gaps + smaller h1 floor; strip h1 bottom-margin (adds to flex gap) */
  .seo-hero { gap: 4px; padding-top: 2px; }
  .seo-hero h1 { font-size: clamp(1.35rem, 5vw, 2.3rem); margin-bottom: 0; }
  .seo-intro   { font-size: 0.86rem; }

  /* Tool block: tighter padding + gap */
  .seo-tool { padding: 12px 14px 10px; gap: 6px; }

  /* Controls: row layout so selects (and checkbox toggles) wrap compactly;
     the Generate button always gets its own full-width row below them —
     see the .btn-primary rule's flex-basis:100% below for why. */
  .seo-tool-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }
  /* Override width:100% that the earlier ≤480 rule puts on selects */
  .seo-tool-controls select { width: auto; flex: 0 0 auto; }
  /* flex-basis:100% guarantees the button can never share a row with a select/checkbox
     (a 100%-basis item never fits next to anything else), so it always wraps onto its
     own full-width line regardless of how many controls (1, 2, or 3 selects, plus
     username/nickname's checkboxes) precede it — this is what actually prevents label
     clipping; flex:1 alone let the button collapse to whatever sliver of space was left
     on a crowded line instead of wrapping (the character/business/website/game-studio/
     video-game 2-3-select bug). */
  .seo-tool-controls .btn-primary { flex: 1 1 100%; min-width: 0; padding: 11px 14px; font-size: 0.82rem; width: auto; }

  /* Results: tighter row gap on mobile (overrides desktop 6px) */
  .seo-results { gap: 4px; }

  /* How-to: clip overflow from mixed-text flex rows on narrow viewports */
  .seo-howto { overflow-x: clip; }

  /* Result cards: compact padding + smaller name text on mobile */
  .seo-result { padding: 5px 10px; }
  .seo-result-actions { gap: 4px; }
  .seo-result-name { font-size: 0.82rem; }

  /* Larger touch target for icon buttons on mobile (overrides desktop 30px) */
  .seo-result .seo-btn { width: 34px; height: 34px; min-height: 34px; border-radius: 2px; }
}

/* Results: fit all rows within a short browser window without scrolling (laptop-height
   viewports with a full-width layout -- mobile widths keep the block above, where
   scrolling past the fold is already normal UX). Row height shrinks below the
   breakpoint instead of the result count changing; foldVisibilityNote() in
   seo-page.js still discloses on-screen if any row is ever left off-screen regardless
   of viewport quirks this breakpoint doesn't anticipate. */
@media (max-height: 900px) and (min-width: 481px) {
  .seo-results { gap: 3px; }
  .seo-result { padding: 3px 10px; }
  .seo-result .seo-btn { width: 28px; height: 28px; min-height: 28px; }
}

/* Pixel-art sprite icons for generator links/cards (ln-wire-generator-sprite-icons).
   Replaces decorative category emojis; inline .gen-ico scales with the label text like
   the emoji it replaces; hub-card sprite is a fixed pixel block. Crisp at any DPI. */
.gen-ico { width: 1.15em; height: 1.15em; margin-right: 0.35em; vertical-align: -0.18em; image-rendering: pixelated; }
.hub-card-icon img { width: 48px; height: 48px; image-rendering: pixelated; display: block; }

/* ============================================================
   SHARED SITE CHROME — simple navigation + crawlable footer
   Mirrors the approved homepage proposal across public pages.
   ============================================================ */

.snav-brand,
.snav-all,
.snav-parent,
.snav-mega-heading,
.snav-mega-col a,
.snav-mega-all,
.snav-library,
.snav-toggle,
.site-footer-v2,
.site-footer-v2 a,
.sf-label {
  font-family: var(--font-display);
}

.site-nav {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 13, .94);
  backdrop-filter: blur(12px);
}

.snav-inner {
  position: relative;
  width: min(1280px, calc(100% - clamp(40px, 6vw, 112px)));
  max-width: none;
  height: 58px;
  margin: 0 auto;
  padding: 0;
  gap: 24px;
}

.snav-brand {
  gap: 10px;
  margin-right: 0;
  font-size: 0.86rem;
  letter-spacing: -.03em;
}

.snav-brand img {
  width: 25px;
  height: 25px;
}

.snav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.snav-all {
  padding: 11px 10px;
  color: var(--dim);
  font-size: 0.75rem;
  border-radius: 0;
}

.snav-all:hover,
.snav-all:focus-visible,
.snav-all[aria-current="page"] {
  color: var(--text);
  background: var(--panel);
}

.snav-library {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.snav-library span {
  color: var(--acc);
}

.snav-library:hover,
.snav-library:focus-visible {
  border-color: var(--acc);
  background: var(--panel);
}

.snav-toggle {
  display: none;
  margin-left: auto;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--acc);
  font-size: 0.75rem;
  cursor: pointer;
}

/* Full generator directory, restored inside the cleaner v3 site chrome. */
.snav-mega-group {
  position: static;
}

.snav-parent {
  min-height: 38px;
  padding: 11px 10px;
  border-radius: 0;
  color: var(--dim);
  font-size: 0.75rem;
}

.snav-parent:hover,
.snav-parent:focus-visible,
.snav-parent[aria-expanded="true"],
.snav-parent.is-current {
  color: var(--text);
  background: var(--panel);
}

.snav-caret {
  margin-left: 2px;
  color: var(--acc);
}

.snav-mega-panel {
  top: 100%;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: rgba(11, 11, 13, .985);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

.snav-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 26px 28px 22px;
}

.snav-mega-stack {
  min-width: 0;
}

.snav-mega-col + .snav-mega-col {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.snav-mega-heading,
.snav-mega-col:first-child .snav-mega-heading {
  margin: 0 0 8px;
  padding: 0;
  color: var(--acc);
  font-size: .62rem;
  letter-spacing: .1em;
}

.snav-mega-col li a {
  padding: 6px 0;
  border-radius: 0;
  color: var(--dim);
  font-size: .7rem;
  line-height: 1.25;
}

.snav-mega-col li a:hover,
.snav-mega-col li a:focus-visible,
.snav-mega-col li a[aria-current="page"] {
  color: var(--text);
  background: transparent;
}

.snav-mega-col li a[aria-current="page"]::after {
  content: "  ·";
  color: var(--acc);
}

.snav-mega-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 28px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: .68rem;
  text-decoration: none;
}

.snav-mega-all:hover,
.snav-mega-all:focus-visible {
  color: var(--acc);
  background: var(--panel);
  outline: none;
}

/* Sitewide local Idea Library. The drawer is a sibling of the sticky header so
   backdrop-filter never changes the containing block for its fixed positioning. */
body.site-library-open {
  overflow: hidden;
}

.site-library-overlay,
.site-library-drawer {
  position: fixed;
}

.site-library-overlay {
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.site-library-overlay.is-open {
  opacity: 1;
}

.site-library-overlay[hidden],
.site-library-drawer[hidden],
.site-library-list[hidden],
.site-library-empty[hidden] {
  display: none;
}

.site-library-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 301;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(500px, 100vw);
  border-left: 1px solid var(--line-2);
  background: #0b0b0d;
  box-shadow: -28px 0 80px rgba(0, 0, 0, .48);
  color: var(--text);
  transform: translate3d(100%, 0, 0);
  transition: transform 180ms cubic-bezier(.2, .75, .25, 1);
}

.site-library-drawer.is-open {
  transform: translate3d(0, 0, 0);
}

.site-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--line);
}

.site-library-kicker,
.site-library-head h2,
.site-library-head [data-library-status],
.site-library-filters label,
.site-library-item strong,
.site-library-item span,
.site-library-footer p {
  font-family: var(--font-display);
}

.site-library-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--acc);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-library-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.site-library-head [data-library-status] {
  margin-top: 9px;
  color: var(--dim);
  font-size: .68rem;
}

.site-library-close,
.site-library-actions button,
.site-library-item-actions button {
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}

.site-library-close {
  flex: 0 0 auto;
  padding: 9px 11px;
  font-size: .68rem;
}

.site-library-close:hover,
.site-library-actions button:hover:not(:disabled),
.site-library-item-actions button:hover {
  border-color: var(--acc);
  background: var(--panel);
  color: var(--text);
}

.site-library-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
}

.site-library-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.site-library-filters label {
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-library-filters input,
.site-library-filters select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  font: 400 .78rem/1.2 var(--font-body);
  color-scheme: dark;
}

.site-library-filters input::placeholder {
  color: var(--dim);
  opacity: .72;
}

.site-library-filters input:focus,
.site-library-filters select:focus {
  border-color: var(--acc);
  outline: none;
}

.site-library-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-library-empty {
  max-width: 34ch;
  padding: 48px 28px;
  color: var(--dim);
  font-size: .88rem;
  line-height: 1.7;
}

.site-library-list {
  list-style: none;
}

.site-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}

.site-library-item strong {
  min-width: 0;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}

.site-library-item > span {
  grid-column: 1;
  color: var(--dim);
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-library-item-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.site-library-item-actions button {
  padding: 7px 8px;
  font-size: .62rem;
}

.site-library-footer {
  padding: 18px 28px 22px;
  border-top: 1px solid var(--line);
  background: rgba(20, 20, 23, .72);
}

.site-library-footer p {
  margin-bottom: 14px;
  color: var(--dim);
  font-size: .61rem;
  line-height: 1.5;
}

.site-library-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.site-library-actions button {
  min-height: 40px;
  padding: 8px;
  font-size: .62rem;
}

.site-library-actions button:disabled {
  cursor: default;
  opacity: .34;
}

.site-footer-v2 {
  width: calc(100% + 32px);
  margin: 56px 0 -80px -16px;
  border-top: 1px solid var(--line);
  background: rgba(11, 11, 13, .72);
  color: var(--dim);
}

.sf-shell {
  width: min(1280px, calc(100% - clamp(40px, 6vw, 112px)));
  margin: 0 auto;
  padding: 46px 0 28px;
}

.sf-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.sf-brand .snav-brand {
  color: var(--text);
}

.sf-brand p {
  max-width: 300px;
  margin-top: 16px;
  color: var(--dim);
  font-size: 0.76rem;
  line-height: 1.6;
}

.sf-label {
  display: block;
  margin-bottom: 14px;
  color: var(--acc);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.sf-col a {
  display: block;
  margin: 8px 0;
  color: var(--dim);
  font-size: 0.75rem;
  text-decoration: none;
}

.sf-col a:hover,
.sf-col a:focus-visible {
  color: var(--text);
  text-decoration: none;
}

.sf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  font: 400 0.64rem/1.4 var(--font-display);
}

.sf-badge {
  display: block;
  width: auto;
  height: 34px;
}

@media (max-width: 820px) {
  .snav-inner {
    width: calc(100% - 32px);
  }

  .snav-toggle {
    display: block;
  }

  .snav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    margin: 0;
    padding: 12px 16px 16px;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--bg);
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }

  .snav-menu.is-open {
    display: grid;
  }

  .snav-all,
  .snav-library {
    width: 100%;
  }

  .snav-mega-group {
    width: 100%;
  }

  .snav-parent {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .snav-mega-panel {
    position: static;
    display: none;
    width: 100%;
    max-height: min(62vh, 520px);
    margin: 8px 0 4px;
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
  }

  .snav-mega-panel.is-open {
    display: block;
  }

  .snav-mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 20px;
  }

  .snav-mega-all {
    position: sticky;
    bottom: 0;
    padding: 12px 20px;
    background: var(--bg);
  }

  .snav-all {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .snav-library {
    justify-content: space-between;
    margin-top: 6px;
  }

  .sf-shell {
    width: calc(100% - 32px);
  }

  .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .sf-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .site-nav {
    margin-bottom: 12px;
  }

  .snav-mega-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .snav-mega-col + .snav-mega-col {
    margin-top: 14px;
    padding-top: 14px;
  }

  .snav-mega-all {
    padding-right: 18px;
    padding-left: 18px;
  }

  .site-library-drawer {
    width: 100vw;
    border-left: 0;
  }

  .site-library-head {
    padding: 22px 20px 19px;
  }

  .site-library-filters {
    grid-template-columns: minmax(0, 1fr) 120px;
    padding: 17px 20px;
  }

  .site-library-item {
    gap: 8px 12px;
    padding: 17px 20px;
  }

  .site-library-item-actions {
    flex-direction: column;
  }

  .site-library-footer {
    padding: 16px 20px max(18px, env(safe-area-inset-bottom));
  }

  .site-library-actions {
    grid-template-columns: 1fr 1fr;
  }

  .site-library-actions [data-library-clear] {
    grid-column: 1 / -1;
  }

  .sf-grid {
    grid-template-columns: 1fr;
  }

  .sf-brand {
    grid-column: auto;
  }

  .sf-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* ln-mvp-closeout-g2: compact Refine clear control (reuses .wl-add / .wl-chip styles) */
.seo-refine-clear {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: transparent;
  color: var(--text-dim, #9aa);
  cursor: pointer;
}
.seo-refine-clear:hover,
.seo-refine-clear:focus-visible {
  border-color: var(--acc, #6ee7b7);
  color: var(--acc, #6ee7b7);
  outline: none;
}
.seo-refine-bar { margin-top: 8px; }