/*
  Shown at the top of <main> on every page while the endpoint has no data yet.

  <p data-rebuilding role="status" hidden>The endpoint is currently rebuilding its data …</p>
*/

[data-rebuilding] {
  --tint: var(--color--warning);

  background: color-mix(in oklch, var(--tint) 14%, transparent);
  border-inline-start: 3px solid var(--tint);
  border-radius: 0 var(--br-2) var(--br-2) 0;
  font-size: var(--fs4);
  padding: var(--s3) var(--s5);
}