/* The footer's fifteen lights (ds- prefix): one slim row of small line icons, one per initiative world, at the top of the one shared footer.
   Tokens only (tokens.css), no hex values; the glow is the surface's own accent (--ds-accent: gold in Temple Dark, burnt amber in Temple Dawn).
   Markup: includes/shell/footer-lights.php. Breakpoints are rem (md 48rem = 768px): fifteen in a row from md; below it the row wraps into
   even rows (8 + 7, then 5 + 5 + 5 on small phones) so it never scrolls the page and a 44px target never shrinks.
   The one thing that moves is the wave: a breath of light passes along the row, a light at a time. It is the only motion here and it stops
   under prefers-reduced-motion, leaving every light with a steady soft glow. The name of a light shows on hover and on keyboard focus as a
   caption centred under the row (never beside the icon, so it cannot run past the edge of a narrow screen). */

/* the footer's top part takes the full width of the footer on every surface, so the row stays centred and the hairline above the base row spans
   the footer even where the slim footer lays its parts out in a wrapping row */
.ds-footer--chrome .ds-footer__top { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.ds-footer--chrome .ds-footer__top + .ds-footer__base { inline-size: 100%; box-sizing: border-box; }

.ds-lights {
  --fl-size: 2.75rem;            /* the tap target (44px) */
  --fl-gap: var(--ds-space-2);
  --fl-cols: 5;                  /* lights per row at this width */
  --fl-halo: 16%;                /* the glow's strength: quiet on Temple Dawn's parchment, fuller in Temple Dark */
  --fl-rest: .5;                 /* the glow of a light between waves, and the steady glow when motion is off */
  position: relative;
  min-inline-size: 0;
  box-sizing: border-box;
}
:root.dark .ds-lights, :root[data-theme="dark"] .ds-lights, .ds-theme-dark .ds-lights { --fl-halo: 42%; }
@media (min-width: 32rem) { .ds-lights { --fl-cols: 8; } }
@media (min-width: 48rem) { .ds-lights { --fl-cols: 15; --fl-gap: var(--ds-space-1); } }   /* 15 x 44px and 14 gaps of 4px fit 768px with the footer's gutters */
@media (min-width: 64rem) { .ds-lights { --fl-gap: var(--ds-space-2); } }

.ds-lights__list {
  list-style: none; margin: 0; padding: 0; margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fl-gap);
  max-inline-size: 100%; inline-size: calc(var(--fl-cols) * var(--fl-size) + (var(--fl-cols) - 1) * var(--fl-gap));
}
.ds-lights__list > li { margin: 0; padding: 0; flex: none; }

/* a light: the icon in the accent, a halo behind it. The link is not positioned, so the caption below anchors to the whole row. */
.ds-lights__item {
  display: grid; place-items: center; position: static;
  inline-size: var(--fl-size); block-size: var(--fl-size); box-sizing: border-box; border-radius: 50%;
  color: var(--ds-accent); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--ds-dur-base) linear;
}
.ds-lights__item > * { grid-area: 1 / 1; }
.ds-lights__item::before {   /* the halo: only its opacity ever changes, so the wave costs no layout and no repaint of the page */
  content: ""; grid-area: 1 / 1; inline-size: 100%; block-size: 100%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--ds-accent) var(--fl-halo), transparent) 0%, transparent 68%);
  opacity: var(--fl-rest);
  transition: opacity var(--ds-dur-base) linear;
}
.ds-lights__glyph { position: relative; inline-size: 1.25rem; block-size: 1.25rem; flex: none; }

.ds-lights__item:hover, .ds-lights__item:focus-visible { color: var(--ds-text); }
.ds-lights__item:hover::before, .ds-lights__item:focus-visible::before { opacity: 1; animation: none; }
.ds-lights__item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* the name: a small plate centred under the row; the row's own box bounds it, so it never widens the page */
.ds-lights__item::after {
  content: attr(data-name); position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--ds-space-1)); margin-inline: auto;
  inline-size: max-content; max-inline-size: 100%; box-sizing: border-box; text-align: center;
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-text-sm); line-height: var(--ds-leading-tight); color: var(--ds-text);
  background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: var(--ds-z-sticky);
  transition: opacity var(--ds-dur-base) linear, visibility var(--ds-dur-base) linear;
}
.ds-lights__item:focus-visible::after { opacity: 1; visibility: visible; }
@media (hover: hover) { .ds-lights__item:hover::after { opacity: 1; visibility: visible; } }

/* the wave: seven seconds a light, each one 0.38s after the one before it, so a breath of light runs along the row and rests; the negative
   delay starts the row mid-wave instead of dark */
@media (prefers-reduced-motion: no-preference) {
  .ds-lights__item::before { animation: ds-lights-wave 7s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .38s - 7s); }
  @keyframes ds-lights-wave {
    0%, 100% { opacity: var(--fl-rest); transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-lights__item, .ds-lights__item::before, .ds-lights__item::after { transition: none; }
}

@media (forced-colors: active) {
  .ds-lights__item { color: LinkText; }
  .ds-lights__item::before { display: none; }
  .ds-lights__item::after { border-color: CanvasText; background: Canvas; color: CanvasText; }
}
@media print { .ds-lights { display: none; } }