/* ============================================================================
   Would You Rather 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 — pink-magenta, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef61bb  6.4:1 on --bg   5.9:1 on --surface   6.6:1 on --bg-sunk
     light #960862  8.0:1 on --bg   8.4:1 on --surface   7.4:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #ef61bb; --accent-dim: rgba(239, 97, 187, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #960862; --accent-dim: rgba(150, 8, 98, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
/* the glyph itself is a stroked path (a forked path / two-way arrow), not a
   filled shape, so mark-fg sets stroke rather than fill */
.brand svg .mark-fg { fill: none; stroke: var(--on-accent); }

/* ============================================================================
   The dilemma card
   ========================================================================= */

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

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

.wyr-card {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  text-align: center;
}

.wyr-cat-tag { margin: 0 0 0.6rem; }

.wyr-prompt {
  margin: 0 0 1.35rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}

.wyr-options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.9rem;
}
@media (max-width: 34rem) {
  .wyr-options { grid-template-columns: 1fr; }
  .wyr-or { margin: -0.2rem auto; }
}

.wyr-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wyr-opt-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wyr-opt-text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.wyr-pick-btn { width: 100%; }

.wyr-option.is-picked {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.wyr-option.is-picked .wyr-opt-label { color: var(--accent); }

.wyr-or {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* fresh-question pop — reduced-motion guarded even though base.css already
   neutralises all transitions/animations globally under that media query;
   this file's own keyframe gets its own explicit guard per house style. */
.wyr-card.is-fresh { animation: wyr-pop 0.22s ease; }
@keyframes wyr-pop {
  from { opacity: 0.35; transform: translateY(2px); }
  to   { opacity: 1;    transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wyr-card.is-fresh { animation: none; }
}

/* ---------------------------------------------------------------- tally -- */

.wyr-tally-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  margin-top: 1.1rem;
}
.wyr-tally {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-dim);
}
.wyr-reset-tally {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.wyr-reset-tally:hover { color: var(--text); }

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

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

/* ============================================================================
   Browsable question list (would-you-rather-questions.html)
   ========================================================================= */

.qcat { max-width: 74ch; }
.qlist {
  padding-left: 1.4em;
  margin: 0 0 1.1em;
  display: grid;
  gap: 0.55em;
}
.qlist li { padding-left: 0.2em; }

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

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

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