/*
 * Shared interactive controls for illustrative visuals. Policy: docs/interactive-controls.md.
 * One look for every in-page control so readers can tell at a glance what responds to a click or tap.
 * Component styles set layout only (spacing, size, position); colour, border, shadow and states come from here.
 */
:root {
  --ui-act: #5b6cff;                      /* control blue: visible on the dark page */
  --ui-act-line: rgba(91, 108, 255, .75);
  --ui-act-soft: rgba(91, 108, 255, .14);
  --ui-act-strong: rgba(91, 108, 255, .28);
  --ui-selected: #2b3be5;                 /* site blue: the selected state */
  --ui-ink: #f4f6f8;
}

/* A choice that shows something on the page (aria-pressed). Raised, tinted, outlined; filled when selected. */
.ui-choice {
  border: 1px solid var(--ui-act-line);
  background: var(--ui-act-soft);
  color: var(--ui-ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ui-choice:hover { border-color: var(--ui-act); background: var(--ui-act-strong); transform: translateY(-1px); }
.ui-choice:active { transform: translateY(1px); box-shadow: none; }
.ui-choice[aria-pressed="true"],
.ui-choice[aria-pressed="true"]:hover { border-color: var(--ui-act); background: var(--ui-selected); color: #fff; box-shadow: none; transform: none; }
/* Without JavaScript a choice does nothing, so it must not look clickable. */
.ui-choice:disabled,
.ui-choice:disabled:hover { border-color: transparent; background: none; box-shadow: none; transform: none; cursor: default; }

/* Chevron inside a choice: points right; turns down when its content is open below. */
.ui-choice-icon { display: block; flex: none; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.ui-choice[aria-pressed="true"] .ui-choice-icon { transform: rotate(45deg); }
.ui-choice:disabled .ui-choice-icon { display: none; }

/* A small numbered marker inside text that selects its item. Filled; inverted when selected. */
.ui-badge { border: 0; background: var(--ui-act); color: #fff; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; }
.ui-badge:hover { box-shadow: 0 0 0 4px var(--ui-act-strong); }
.ui-badge[aria-pressed="true"] { background: #fff; color: var(--ui-selected); box-shadow: 0 0 0 2px var(--ui-act); }
.ui-badge:disabled { border: 1px solid #aeb8c3; background: transparent; color: var(--ui-ink); box-shadow: none; cursor: default; }

/* A disclosure (details/summary): an outlined pill with + / −. */
.ui-disclosure > summary { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; padding: .35rem .75rem; border: 1px solid var(--ui-act-line); border-radius: 999px; background: var(--ui-act-soft); color: var(--ui-ink); font: 600 .82rem/1.3 var(--hp-sans, system-ui, sans-serif); text-decoration: none; list-style: none; cursor: pointer; transition: background-color .15s ease; }
.ui-disclosure > summary:hover { background: var(--ui-act-strong); }
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.ui-disclosure[open] > summary::after { content: "−"; }

/* A link to another page: text with a control-blue underline and an arrow. */
.ui-link { color: var(--ui-ink); text-decoration: underline; text-decoration-color: var(--ui-act); text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.ui-link:hover { text-decoration-color: currentColor; }

/* A short instruction next to a pane title; shown only once the visual is interactive (.is-enhanced). */
.ui-hint { display: none; align-items: center; gap: .35rem; font: 500 .74rem/1.4 var(--hp-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: #aab3ff; }
.is-enhanced .ui-hint { display: inline-flex; }
.ui-hint::before { content: ""; width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.1rem); }

.ui-choice:focus-visible, .ui-badge:focus-visible, .ui-disclosure > summary:focus-visible, .ui-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ui-choice, .ui-choice-icon, .ui-badge, .ui-disclosure > summary { transition: none; }
  .ui-choice:hover, .ui-choice:active { transform: none; }
}