/* Domain light: a page's own colour, taken from its Legend's or card's domains, never decoration.
   The light splits along the title slash, at the glyph's own angle: two flat washes meet at a
   1px hairline, like the site's rules. The hairline runs opposite to the text colour (a dark cut
   on the dark theme, a light one on the light theme), so text crossing it only gains contrast. domain-light-client.mjs measures the slash and sets
   --dl-angle and --dl-pos (the seam's place along the gradient line); without it the seam keeps
   a default place. Rune-art hues, richer than the UI label colours, keep Calm green instead of the
   site's teal, and each domain is weighted to one apparent brightness (Order and Body are loud,
   Chaos and Mind dark). The page colour belongs to the viewport, so a fixed layer at z-index -1
   sits above it and under all content. Only colour and opacity transition. No looping motion,
   canvas or image assets. */
.domain-light{--dl-fury:#e02830;--dl-calm:#50903c;--dl-mind:#1478b0;--dl-body:#e87800;--dl-chaos:#684090;--dl-order:#f0b000;--dl-1:transparent;--dl-2:transparent;--dl-w1:1;--dl-w2:1;--dl-base:.6;--dl-angle:108deg;--dl-pos:40vw;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;transition:opacity 800ms ease}
.domain-light[data-domain-1=Fury]{--dl-1:var(--dl-fury);--dl-w1:.9}.domain-light[data-domain-1=Calm]{--dl-1:var(--dl-calm);--dl-w1:1}.domain-light[data-domain-1=Mind]{--dl-1:var(--dl-mind);--dl-w1:1.15}.domain-light[data-domain-1=Body]{--dl-1:var(--dl-body);--dl-w1:.82}.domain-light[data-domain-1=Chaos]{--dl-1:var(--dl-chaos);--dl-w1:1.4}.domain-light[data-domain-1=Order]{--dl-1:var(--dl-order);--dl-w1:.7}
.domain-light[data-domain-2=Fury]{--dl-2:var(--dl-fury);--dl-w2:.9}.domain-light[data-domain-2=Calm]{--dl-2:var(--dl-calm);--dl-w2:1}.domain-light[data-domain-2=Mind]{--dl-2:var(--dl-mind);--dl-w2:1.15}.domain-light[data-domain-2=Body]{--dl-2:var(--dl-body);--dl-w2:.82}.domain-light[data-domain-2=Chaos]{--dl-2:var(--dl-chaos);--dl-w2:1.4}.domain-light[data-domain-2=Order]{--dl-2:var(--dl-order);--dl-w2:.7}
/* Each wash is flat near the seam and fades over its reach. Declared on the children so each one
   reads its own --dl-reach. "after" lights past the slash, "before" the title's side. */
.domain-light>*{position:absolute;inset:0;--dl-mask:linear-gradient(#0000,#0000);--dl-after:linear-gradient(var(--dl-angle),transparent calc(var(--dl-pos) - .5px),#000 var(--dl-pos),rgb(0 0 0/.92) calc(var(--dl-pos) + var(--dl-reach)*.08),rgb(0 0 0/.72) calc(var(--dl-pos) + var(--dl-reach)*.35),rgb(0 0 0/.3) calc(var(--dl-pos) + var(--dl-reach)*.7),transparent calc(var(--dl-pos) + var(--dl-reach)));--dl-before:linear-gradient(var(--dl-angle),transparent calc(var(--dl-pos) - var(--dl-reach)),rgb(0 0 0/.3) calc(var(--dl-pos) - var(--dl-reach)*.7),rgb(0 0 0/.72) calc(var(--dl-pos) - var(--dl-reach)*.35),rgb(0 0 0/.92) calc(var(--dl-pos) - var(--dl-reach)*.08),#000 var(--dl-pos),transparent calc(var(--dl-pos) + .5px));-webkit-mask-image:var(--dl-mask);mask-image:var(--dl-mask)}
.domain-light i{transition:background-color 1100ms cubic-bezier(.2,.65,.3,1)}
.domain-light i:first-child{background-color:var(--dl-1);opacity:calc(var(--dl-base)*var(--dl-w1))}
.domain-light i:nth-child(2){background-color:var(--dl-2);opacity:calc(var(--dl-base)*var(--dl-w2))}
.domain-light b{background:rgb(0 0 0/.45);--dl-mask:linear-gradient(var(--dl-angle),transparent calc(var(--dl-pos) - 1px),#000 calc(var(--dl-pos) - .5px),#000 calc(var(--dl-pos) + .5px),transparent calc(var(--dl-pos) + 1px))}
/* A Legend's pair: the lead domain takes the wide side past the slash, the accent the title's side. */
.domain-light[data-shape=pair] i:first-child{--dl-reach:max(620px,70vw);--dl-mask:var(--dl-after)}
.domain-light[data-shape=pair] i:nth-child(2){--dl-reach:max(460px,45vw);--dl-mask:var(--dl-before)}
/* A card page: the light sits behind the card and the slash clips it; a second domain is a soft tint past it. */
.domain-light[data-shape=card] i:first-child{--dl-reach:max(760px,70vw);--dl-mask:var(--dl-before)}
.domain-light[data-shape=card] i:nth-child(2){--dl-reach:max(456px,42vw);--dl-mask:var(--dl-after);opacity:calc(var(--dl-base)*var(--dl-w2)*.5)}
/* Legend pages: the art is the light. Only the slash and the main action take the domains. */
.domain-light[data-shape=mark]{display:none}
:root[data-theme=light] .domain-light{--dl-base:.3}
:root[data-theme=light] .domain-light b{background:rgb(255 255 255/.6)}
/* Phone card pages float the card top right, so its light moves to that side. */
@media(max-width:700px){
  .domain-light[data-shape=card] i:first-child{--dl-reach:max(420px,70vw);--dl-mask:var(--dl-after)}
  .domain-light[data-shape=card] i:nth-child(2){--dl-reach:max(252px,42vw);--dl-mask:var(--dl-before)}
}
@media(prefers-reduced-motion:reduce){.domain-light,.domain-light i{transition:none}}
@media(forced-colors:active),print{.domain-light{display:none}}

/* Below the head, a card's reference content sits on the surface deck pages use, so the light
   stays in the head and the margins and never crosses a table. */
.card-reference>.reference-lower:not(:empty){background:color-mix(in srgb,var(--bg) 95%,transparent);margin-inline:-32px;padding:8px 32px 32px}
@media(max-width:1100px){.card-reference>.reference-lower:not(:empty){margin-inline:-24px;padding-inline:24px}}
@media(max-width:700px){.card-reference>.reference-lower:not(:empty){margin-inline:-16px;padding-inline:16px}}
/* Small grey text in a lit head stays readable (4.5:1) where a bright domain meets the seam, and
   the footer sits on the surface like the content above it. */
body:has(.domain-light:not([data-shape=mark])) :is(main>.breadcrumbs,.dk-head,.reference-breadcrumb,.reference-hero,.db-topline,.db-toolbar,.db-workspace-tabs){--muted:color-mix(in srgb,var(--ink) 86%,var(--bg))}
body:has(.domain-light:not([data-shape=mark])) .footer{background:color-mix(in srgb,var(--bg) 95%,transparent)}

/* The page's own colour signs it: the title slash takes the Legend's or card's domains and the main
   action the first one. Pages without domains keep the brand cyan. */
body:has(.domain-light[data-domain-1=Fury]){--d1:var(--fury)}body:has(.domain-light[data-domain-1=Calm]){--d1:var(--calm)}body:has(.domain-light[data-domain-1=Mind]){--d1:var(--mind)}body:has(.domain-light[data-domain-1=Body]){--d1:var(--body-color)}body:has(.domain-light[data-domain-1=Chaos]){--d1:var(--chaos)}body:has(.domain-light[data-domain-1=Order]){--d1:var(--order)}
body:has(.domain-light[data-domain-2=Fury]){--d2:var(--fury)}body:has(.domain-light[data-domain-2=Calm]){--d2:var(--calm)}body:has(.domain-light[data-domain-2=Mind]){--d2:var(--mind)}body:has(.domain-light[data-domain-2=Body]){--d2:var(--body-color)}body:has(.domain-light[data-domain-2=Chaos]){--d2:var(--chaos)}body:has(.domain-light[data-domain-2=Order]){--d2:var(--order)}
body:has(.domain-light[data-domain-1]) h1 .heading-slash{background:linear-gradient(180deg,var(--d1) 52%,var(--d2,var(--d1)) 52%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Once the seam is placed, the slash splits along its own stroke, each half facing the side it
   lights, so the page seam continues the split inside the glyph. */
body:has(.domain-light){--dl-near:var(--d2,var(--d1));--dl-far:var(--d1)}
body:has(.domain-light[data-shape=card]){--dl-near:var(--d1);--dl-far:var(--d2,var(--d1))}
@media(max-width:700px){body:has(.domain-light[data-shape=card]){--dl-near:var(--d2,var(--d1));--dl-far:var(--d1)}}
body:has(.domain-light[data-seam]) h1 .heading-slash{background-image:linear-gradient(var(--dl-angle),var(--dl-near) var(--dl-split),var(--dl-far) var(--dl-split))}
body:has(.domain-light[data-domain-1]) main .button.primary{background:var(--d1);border-color:var(--d1);color:#111}