/*
 * THE ONE COLLAPSE ARROW. Every "click to show / hide what's under this"
 * arrow in Limelight is this file and nothing else: the Lab's panel
 * headers (Fixtures, Cues, Soundtrack, Fixture Controls, Stage, Master and
 * every panel in the controls row, also the desktop app, which is the
 * same page), the Lab's list rows, the course's teacher page, the intro's
 * questions, and the sound tool's group rows, cue-list row and submenus.
 *
 *   "NOT ALL COLLAPSING ARROWS MATCH!!!"          (owner, 2026-10-07)
 *
 * They were seven different drawings: a ▸/▾ letter swapped in the Lab's
 * big headers (then turned to point UP when a panel docked), a flat SVG
 * triangle turned 180° in Stage, Master and the controls row, ▾/▴ SVGs
 * in list rows, a green ▸ letter on the intro, a two-border chevron on
 * the teacher page, and thin stroked > / v chevrons in the sound tool.
 *
 * The standard is the Lab's own: the solid triangle of its panel headers.
 *   - ONE shape: a solid triangle, drawn with clip-path on a box filled
 *     with currentColor (no font, no SVG file, nothing to load).
 *   - Closed points RIGHT (▸), open points DOWN (▾). The arrow turns;
 *     it is never swapped for another drawing. 150 ms.
 *   - Two sizes: 10px in headers, 8px inline in rows (.ll-arrow-sm).
 *   - One color: --secondary-lighter, and --ink-strong under the pointer.
 *     Both are defined for dark and light by the Lab (global.css) and by
 *     every static page (site.css). A row that needs another color (a
 *     selected sound-tool row is white on blue) sets --ll-arrow-ink.
 *   - One hit area: .ll-arrow-btn, 18px square (16px for .ll-arrow-sm
 *     rows), the arrow centered in it.
 *
 * Markup:
 *   <button class="ll-arrow-btn" aria-expanded="false"><span class="ll-arrow"></span></button>
 *   <details><summary><span class="ll-arrow"></span>Question</summary>…</details>
 *   <span class="ll-arrow is-open"></span>            (state set by hand)
 * The Vue app uses <uk-arrow :open="…" /> (uikit/icons/uikit.arrow.vue),
 * which renders exactly that span.
 *
 * Linked as /ll-arrow.css by index.html (the Lab and the desktop app),
 * /learn/index.html, /sound/index.html and /intro/index.html.
 * tests/ll-arrow.test.mjs keeps every arrow on it and fails on a new one.
 */
.ll-arrow{
  display:inline-block;flex:0 0 auto;
  width:10px;height:10px;
  vertical-align:middle;
  color:var(--ll-arrow-ink,var(--secondary-lighter));
  background:currentColor;
  /* the Lab's triangle: 8.66 tall, 5 deep, centered in the box */
  clip-path:polygon(25% 6.7%,75% 50%,25% 93.3%);
  transform:rotate(0deg);
  transition:transform .15s ease,color .12s;
  pointer-events:none;
}
.ll-arrow-sm{width:8px;height:8px}
.ll-arrow.is-open,
[aria-expanded="true"]>.ll-arrow,
details[open]>summary>.ll-arrow{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.ll-arrow{transition:none}}

/* Under the pointer: the arrow, or the row/summary/button it sits in. */
.ll-arrow-btn:hover>.ll-arrow,
summary:hover>.ll-arrow,
.ll-arrow-hover:hover .ll-arrow{color:var(--ll-arrow-ink-hover,var(--ink-strong))}

/* The hit area. Bare: no face, no border until hovered. */
.ll-arrow-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-sizing:border-box;width:18px;height:18px;margin:0;padding:0;
  border:1px solid transparent;border-radius:3px;background:transparent;
  color:inherit;font:inherit;line-height:1;cursor:pointer;
}
.ll-arrow-btn:hover{border-color:var(--secondary-light)}
.ll-arrow-btn:focus-visible{outline:2px solid var(--accent-sea-green,#1ea876);outline-offset:1px}
.ll-arrow-btn:disabled{cursor:default}
.ll-arrow-btn:disabled>.ll-arrow{color:var(--secondary-light)}
.ll-arrow-btn.ll-arrow-btn-sm{width:16px;height:16px}

/* A <summary> that carries the arrow: no browser marker, arrow then words. */
summary:has(>.ll-arrow){list-style:none}
summary:has(>.ll-arrow)::-webkit-details-marker{display:none}
summary>.ll-arrow{margin-right:9px}