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

   Accent — lime green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #82ef61  13.0:1 on --bg   12.0:1 on --surface   13.5:1 on --bg-sunk
     light #3a7728   5.2:1 on --bg    5.5:1 on --surface    4.8:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #82ef61; --accent-dim: rgba(130, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #3a7728; --accent-dim: rgba(58, 119, 40, 0.10); }
}

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

/* base has no [hidden] override, and .field's own `display: grid` (an author
   rule) otherwise beats the user-agent stylesheet's [hidden] rule — same fix
   several other generator tools use for the same reason. */
[hidden] { display: none !important; }

/* base has no visually-hidden helper; the live region needs one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- tool --- */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.ug-numbers-field { display: grid; gap: 0.35rem; }

.ug-maxlen-row { display: flex; align-items: center; gap: 0.6rem; }
.ug-maxlen-row input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }
.ug-maxlen-out {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 2.2ch;
  text-align: right;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* --------------------------------------------------------------- results -- */

.ug-results {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.6rem 0.6rem 0.85rem;
}

.ug-handle {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
  min-width: 0;
}

.ug-copy { flex: 0 0 auto; }

.ug-copy-status {
  min-height: 1.4em;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* ============================================================================
   Article furniture — shared shapes reused across the reference content
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.example,
.pagelinks a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.example { margin: 0 0 1rem; }
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a { display: block; text-decoration: none; }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }
.pagelinks a:hover { border-color: var(--accent); }

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