/*
 * brains-a11y — control panel styling.
 * Consumes brand tokens only; contains no colour literals, so it inherits
 * whichever brand file the site imported and follows every axis including
 * density and contrast.
 */

.a11y-panel {
  display: flex;
  container-type: inline-size;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--overlay-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-body);
  max-width: 22rem;
}

.a11y-panel__head { display: flex; flex-direction: column; gap: var(--space-1); }

.a11y-panel__title {
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 600;
  margin: 0;
}

.a11y-panel__note { font-size: 0.8125em; color: var(--ink-muted); margin: 0; }

.a11y-panel__axis { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.a11y-panel__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
}

/* Wraps rather than overflowing. Five options at 200% text in a 320px viewport
 * would otherwise force horizontal scrolling and fail SC 1.4.10 (Reflow) — in
 * the control panel whose whole job is to prevent that. */
.a11y-panel__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));
  gap: var(--space-2);
}

.a11y-panel__option,
.a11y-panel__reset {
  font: inherit;
  font-size: 0.8125em;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--ink);
  /* SC 1.4.11 asks for 3:1 on the boundary of an interactive control. The
   * general --line token is a hairline for dividers at around 1.1:1, which is
   * right for a rule and wrong for a control someone has to find. */
  border: 1px solid var(--control-border, var(--line));
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--a11y-motion-duration), border-color var(--a11y-motion-duration);
}

/* The selected option is marked by a tick as well as a fill, so the state does
 * not rest on colour alone. */
.a11y-panel__option[data-active]::before {
  content: '';
  width: 0.75em;
  height: 0.75em;
  flex: none;
  background: currentColor;
  clip-path: polygon(41% 76%, 12% 49%, 20% 41%, 41% 60%, 80% 22%, 88% 30%);
}
.a11y-panel__option { gap: var(--space-2); }

.a11y-panel__option[data-active] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 500;
}

.a11y-panel__option:hover:not([data-active]),
.a11y-panel__reset:hover { border-color: var(--ink-muted); }

.a11y-panel__reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}

/* Beta options are visually separated, so nobody mistakes them for settled. */
.a11y-panel__axis[data-beta] .a11y-panel__legend::after {
  content: 'Beta';
  font-size: 0.85em;
  letter-spacing: 0.06em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-muted);
}

/* Touch targets stay at least 44px regardless of density (WCAG 2.2 AA 2.5.8). */
.a11y-panel__option, .a11y-panel__reset { min-height: 44px; }