/* ============================================================================
   PostPilot — lit.css · the "lit navy" surface
   ----------------------------------------------------------------------------
   allupnext.com's signature dark ground: a radial navy base, a coral glow at the
   top right, a teal counter-glow at the bottom left, and a faint 52px grid that
   fades out towards the bottom. It carries every navy surface — the sidebar, the
   dashboard banner, the sign-in panel, the marketing hero and CTA band — so the
   product reads as one brand.

   Compose with .pp-on-ink (base.css), which flips the ink, hairline and link
   tokens for a dark ground:

       <section class="pp-lit pp-on-ink"> … </section>

   Every value is a token in theme.css (--pp-lit-*). The glows are plain radial
   gradients rather than blurred elements: they are already soft, and two blurred
   layers per surface are two extra compositing layers on a phone.
   Loaded by all three layouts after base.css.
   ============================================================================ */

.pp-lit {
    position: relative;
    isolation: isolate;
    overflow: clip;            /* the glows bleed past the box */
    background: var(--pp-lit-bg);
}

/* Both glows on one layer. The radii are the site's 680px / 560px circles, measured to their far corner. */
.pp-lit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle 481px at calc(100% - 160px) 140px, var(--pp-lit-glow-coral), transparent 62%),
        radial-gradient(circle 396px at 120px calc(100% - 60px), var(--pp-lit-glow-teal), transparent 60%);
}

/* The grid, masked so it dissolves down the surface. */
.pp-lit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--pp-lit-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--pp-lit-grid) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000, transparent 75%);
            mask-image: radial-gradient(100% 80% at 50% 0%, #000, transparent 75%);
}

/* A softer variant for surfaces that carry dense content (the sidebar, a dashboard banner). */
.pp-lit--calm::before { opacity: 0.7; }
.pp-lit--calm::after { opacity: 0.6; }

/* A hairline edge lifts a lit surface off a dark page. */
[data-bs-theme="dark"] .pp-lit { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

@media print {
    .pp-lit { background: none; }
    .pp-lit::before, .pp-lit::after { display: none; }
}