/* ============================================================================
   Wheel Spinner — 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 a spinning-wheel picker: the wheel itself, its pointer,
   and the entries/options layout.

   Accent — crimson-pink, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef6179  5.99:1 on --bg   5.53:1 on --surface   6.20:1 on --bg-sunk
     light #960820  8.56:1 on --bg   8.93:1 on --surface   7.84:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #ef6179; --accent-dim: rgba(239, 97, 121, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #960820; --accent-dim: rgba(150, 8, 32, 0.10); }
}

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

/* base has no visually-hidden helper; the aria-live winner announcement 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;
}

/* ============================================================================
   The instrument bay
   #ws-tool combines base's .panel-sunk (background/border/radius/padding)
   with just the margin this page needs below it.
   ========================================================================= */

.tool { margin-bottom: 2.5rem; }

.ws-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(min(22rem, 100%), 1fr);
  align-items: start;
}
@media (max-width: 46rem) {
  .ws-grid { grid-template-columns: 1fr; }
}

.ws-entries-col { display: grid; gap: 1rem; }

#ws-entries {
  font-family: var(--mono);
  font-size: 0.9375rem;
  resize: vertical;
  min-height: 11rem;
}

.ws-count {
  margin: -0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}

.ws-options { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.ws-check {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; color: var(--text-dim); cursor: pointer;
}
.ws-check input { width: auto; margin: 0; accent-color: var(--accent); }

.ws-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ws-copy-status {
  margin: -0.4rem 0 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------- wheel -- */

.ws-wheel-col {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.ws-wheel-wrap {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 1;
}

.ws-wheel-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}

/* The dial is the only element that rotates. transform-box: view-box makes
   "160px 160px" (the wheel's centre in its own viewBox units) the pivot,
   rather than the default top-left of the whole SVG — without it every spin
   would orbit around a corner instead of spinning in place. */
#ws-dial {
  transform-box: view-box;
  transform-origin: 160px 160px;
}

.ws-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

.ws-pointer {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 24px solid var(--accent);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  z-index: 2;
}

#ws-spin { font-size: 0.9375rem; padding: 0.75rem 1.75rem; }

#ws-result {
  margin: 0;
  min-height: 1.6em;
}

#ws-empty-note {
  max-width: 24rem;
  border-left: 0;
  padding-left: 0;
  text-align: center;
}

/* ============================================================================
   Article furniture — shared by every content section below the tool
   ========================================================================= */

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

.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;
  transition: border-color 0.12s ease;
}
.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;
}

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

@media (prefers-reduced-motion: reduce) {
  /* base.css already forces every transition/animation duration to 0.01ms;
     this just documents that the long CSS transition app.js sets inline is
     included, and that app.js additionally skips the wait/announce delay
     rather than relying on the shortened transition alone. */
  #ws-dial { transition-duration: 0.01ms !important; }
}