/* Visible captions for icon-only controls, shared by the mini apps (see dokumenta/tools/MINIAPP_LABELS_CHECKPOINT.md).
   Markup: wrap the untouched button and add a caption that points at it, so a tap on the caption presses the button:
     <span class="ctl"><button id="b-dice" aria-label="Shuffle" ...>…</button><label class="ctl-lb" for="b-dice" aria-hidden="true" data-i18n="dice.lb">Shuffle</label></span>
   The button keeps its aria-label (the caption is aria-hidden so screen readers do not hear it twice).
   .ctl-lb.ov  – caption drawn over the photo/canvas: white with a dark halo, readable on any picture.
   .ctl-lb.one – one line with an ellipsis instead of up to two wrapped lines (tight rows).
   .ctl.side   – caption beside the button instead of under it.
   Colour otherwise follows the surrounding text (inherit), so it works on dark and light panels alike;
   a page can set --ctl-lb-c / --ctl-lb-w / --ctl-lb-fs to tune colour, max width and size (keep 11–12px). */
.ctl { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; min-width: 0; vertical-align: top; }
.ctl.side { flex-direction: row; gap: 6px; }
.ctl-lb {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  max-width: var(--ctl-lb-w, 76px); margin: 0; padding: 0;
  font: 500 var(--ctl-lb-fs, 11.5px)/1.15 var(--ui, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  letter-spacing: 0; text-transform: none; text-align: center; color: var(--ctl-lb-c, inherit);
  overflow-wrap: anywhere; hyphens: auto; cursor: pointer; pointer-events: auto;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ctl.side .ctl-lb { text-align: start; }
.ctl-lb.one { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ctl-lb.ov { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.65); }
.ctl:has(> :disabled) .ctl-lb { opacity: .5; cursor: default; }
.ctl[hidden], .ctl:has(> [hidden]) { display: none; }