/* /login and /register: the heart's quiet layer behind the sign-in and sign-up forms (includes/portal/shell.php prints <div class="ds-chakra"> and sets
   <html data-djjs-chakra> on these two routes only; the layer's look is assets/css/ds/chakra.css, aspects `threshold` and `dawn`). The app paints its own opaque
   canvas (body and the wrapper under #root), which would hide a layer at z-index -1, so on the dark theme this sheet lets the page colour through and the
   layer takes its place; the forms themselves, and every field and button in them, are the app's and untouched. The layer is always dark, so the light theme
   keeps its parchment and only the closed note remains. Tokens only. */
html.dark[data-djjs-chakra] body { background: none; }
html.dark[data-djjs-chakra] #root > div { background: transparent; }
html:not(.dark)[data-djjs-chakra] .ds-chakra { display: none; }
/* the closed "Why this chakra?" note, in flow below the app and above the privacy row */
.djjs-entry-why { box-sizing: border-box; inline-size: 100%; max-inline-size: 36rem; margin-inline: auto; padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-8); font-family: var(--ds-font-ui); color: var(--ds-text); }
.djjs-entry-why .ds-chakra-why { margin-block: 0; }
.djjs-entry-why :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: var(--ds-radius-sm); }

/* The first paint of /login and /register: the emblem, the heading and the line the app prints first, in plain HTML inside the boot loader
   (includes/portal/shell.php portal_entry_trim()); the app replaces them when it starts. Same sizes and places as the app's own (measured at 375 and
   1440: emblem 91 and 115 px from the top, heading 168 and 192, line 216 and 240), so the swap moves nothing. */
html[data-djjs-chakra] .djjs-boot { justify-content: flex-start; padding-block-start: 27px; gap: var(--ds-space-5, 1.5rem); }
@media (min-width: 48rem) { html[data-djjs-chakra] .djjs-boot { padding-block-start: 51px; } }
.djjs-boot__first { display: flex; flex-direction: column; align-items: center; gap: 0; max-inline-size: 36rem; }
.djjs-boot__first img { display: block; inline-size: 57px; block-size: 50px; object-fit: contain; margin-block-end: 27px; }
.djjs-boot__first h1 { margin: 0 0 8px; font: 600 2.25rem/40px var(--ds-font-display, "Cormorant Garamond", Georgia, serif); color: var(--ds-text, inherit); }
.djjs-boot__first p { margin: 0; font: 400 1.0625rem/1.5 var(--ds-font-body, Mukta, system-ui, sans-serif); color: var(--ds-text-muted, inherit); }