/* The sunburst: the comic backdrop, in ONE place.
   ---------------------------------------------------------------------------
   The web app's top bar, the sign-in / create-account pages (and every page
   that shares their layout), the home server's setup wizard and the two
   consoles' banner all wear this and nothing else (design system, screens W2.1 and
   5.3, design system, screens C4.1): orange rays lit at the light's place,
   turning red away from it, with Ben-Day dots printed over the far side. The
   scheme is the TOP BAR's (owner decision 2026-10-10); no other sheet or
   component draws rays of its own (the "one sunburst" guard test).

   The class is .sunburst; the parts are the two places it is worn:
   .sunburst--band  a strip (the top bar, the console banner): the light is at
                    the left, the dots print over the right;
   .sunburst--page  a whole page (sign-in and the pages that share it, the
                    setup wizard): the light is behind the panel, the dots
                    print round the edges, and the glow reaches as far as the
                    band's does (the same orange near the light, the same red
                    at the far side).
   A page sets only WHERE the light is (--sunburst-x, --sunburst-y); the
   colours are the tokens below, and the black-and-white set is the same
   design on a grey TV (the admin site and the operator console).

   Plain CSS with no dependency on the other sheets: the console kit carries
   it to the home server's page as a string (pnpm console-kit), the web app and
   the admin site import it with the rest (styles.ts). */

.sunburst {
  /* the colours: rays, their deep stripe, the light's glow and the dots */
  --sunburst-base: #d8200d;
  --sunburst-ray: #e5300f;
  --sunburst-ray-deep: #a8170a;
  --sunburst-glow: rgba(255, 198, 26, 0.9);
  --sunburst-glow-mid: rgba(255, 150, 20, 0.55);
  --sunburst-glow-end: rgba(255, 120, 20, 0);
  --sunburst-dots: rgba(60, 5, 0, 0.55);

  /* the light's place and how far its glow reaches (the band's, by default) */
  --sunburst-x: 12%;
  --sunburst-y: 50%;
  --sunburst-reach-x: 60%;
  --sunburst-reach-y: 140%;
  --sunburst-dots-mask: linear-gradient(90deg, transparent 30%, #000 85%);

  background-color: var(--sunburst-base);
  background-image:
    radial-gradient(
      ellipse var(--sunburst-reach-x) var(--sunburst-reach-y) at var(--sunburst-x)
        var(--sunburst-y),
      var(--sunburst-glow) 0,
      var(--sunburst-glow-mid) 30%,
      var(--sunburst-glow-end) 70%
    ),
    repeating-conic-gradient(
      from 0deg at var(--sunburst-x) var(--sunburst-y),
      var(--sunburst-ray) 0deg 5deg,
      var(--sunburst-ray-deep) 5deg 10deg
    );
}

/* Zero specificity: a page that is sticky or absolute keeps its own say. */
:where(.sunburst) {
  position: relative;
}

/* A whole page: the light sits behind the panel and its glow fills the page. */
.sunburst--page {
  --sunburst-x: 50%;
  --sunburst-y: 46%;
  --sunburst-reach-x: 62%;
  --sunburst-reach-y: 84%;
  --sunburst-dots-mask: radial-gradient(
    ellipse at var(--sunburst-x) var(--sunburst-y),
    transparent 38%,
    #000 90%
  );
}

/* Ben-Day dots over the far side, as if printed. */
.sunburst::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--sunburst-dots) 1.8px,
    transparent 2.2px
  );
  background-size: 9px 9px;
  -webkit-mask-image: var(--sunburst-dots-mask);
  mask-image: var(--sunburst-dots-mask);
}

/* The black-and-white print: every colour is its grey (the twins). */
[data-theme='comic-bw'] .sunburst,
[data-k-theme='bw'] .sunburst {
  --sunburst-base: #6b6b6b; /* ink on it 3.3: the frame and the panels' edges */
  --sunburst-ray: #7a7a7a;
  --sunburst-ray-deep: #4d4d4d;
  --sunburst-glow: rgba(235, 235, 235, 0.85);
  --sunburst-glow-mid: rgba(170, 170, 170, 0.5);
  --sunburst-glow-end: rgba(150, 150, 150, 0);
  --sunburst-dots: rgba(0, 0, 0, 0.5);
}