/* ============================================================================
   Random Team Generator — tool layer over base.css

   base.css supplies the reset, typography, forms, buttons, chips, badges,
   panels, tables, header, footer and focus rings. This file adds the accent
   and only the parts of the generator no other tool has.

   Accent — warm orange, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef9161  8.01:1 on --bg   7.39:1 on --surface   8.29:1 on --bg-sunk
     light #963708  7.07:1 on --bg   7.38:1 on --surface   6.48:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #ef9161; --accent-dim: rgba(239, 145, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #963708; --accent-dim: rgba(150, 55, 8, 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, so the
   count-mode field that app.js hides via the `hidden` attribute would keep
   rendering. Same fix text-repeater uses for the same reason. */
[hidden] { display: none !important; }

/* base has no visually-hidden helper; the About page's table caption 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 --- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.1rem; }

.mode-toggle { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.mode-toggle .chip[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--accent-dim);
}

.count-row { margin-top: 1rem; max-width: 20rem; }
.count-row input[type="number"] { max-width: 10rem; }

.tool-actions { align-items: center; }

/* names-note only carries base's .note border/padding while it actually has
   something to say — an empty validation message would otherwise leave a
   stray 2px stub visible at all times. base.css's own .note-err supplies the
   error colour when app.js adds that class. */
#names-note:empty { display: none; }
.copy-status {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  min-width: 4.5rem;
}
.copy-status.is-err { color: var(--err); }
.offscreen-copy { position: fixed; top: -1000px; left: 0; opacity: 0; }

.team-summary {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.team-summary:empty { margin: 0; }

.teams-output {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}
.team-card h3 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.team-card h3 .team-size {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.team-card ol { margin: 0; padding-left: 1.35em; }
.team-card li { margin-bottom: 0.3em; overflow-wrap: anywhere; }
.team-card li:last-child { margin-bottom: 0; }

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

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

.formula {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

.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); }

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

.tag-pass { color: var(--ok); font-weight: 600; }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks 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;
}