/* home — the marketing site's language, inside the console.
 *
 * Two places borrow it:
 *
 *   .xc-topband   the header on every console screen
 *   .xc-authside  the panel beside sign-in and sign-up
 *
 * ── It was three, and three was too many ──────────────────────────────
 *
 * The dashboard opened on a full band of its own: the night, both glows, a
 * gradient figure the size of a headline and two stat cards. On its own it
 * looked right. Under a header wearing the same thing it was two dark blocks
 * stacked before any of the actual screen, and the honest word for it was
 * heavy. It is gone, and the figure it carried is back in the tiles where it
 * always was.
 *
 * What is left is one dark strip at the top of a light page, which is enough
 * to say "this is the same product as the website" and little enough to read
 * past. The glows in it are about a third of what they were for the same
 * reason.
 *
 */

/* ═══════════════════════════════════════════════════════════════════════
 * The header, on every console screen.
 *
 * The same night, the same two glows and the same mesh as the dashboard's
 * band and the marketing site's hero — but slim, and carrying only what a
 * header carries: where you are, what that screen is for, and the one figure
 * it can state honestly.
 *
 * ── Why the header rather than each screen ─────────────────────────────
 *
 * Because there are thirty of them and they would drift. One partial is
 * included by both consoles, so the tenant screens and the platform screens
 * change together and a screen written next month arrives already wearing
 * it. It is also the only element that is on literally every page, which is
 * what "the app looks like the site" has to mean.
 *
 * ── Quieter than the dashboard's ───────────────────────────────────────
 *
 * Half the glow and a sparser mesh. It sits above content on every screen
 * rather than being the thing you came to look at, and two identical dark
 * blocks stacked on the dashboard would read as a mistake rather than as a
 * family. The dashboard's band is the loud one; this is the room it is in.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-r='head'].xc-topband {
    position: relative;
    background-color: #0B0B1A;
    color: #FFFFFF;
    isolation: isolate;

    /*
     * Above the screen below it, so the language menu that drops out of the
     * band lands over that screen rather than under its first card. The band
     * no longer clips (.xc-topband__sky does that for the glows), which is
     * what lets the menu out at all.
     */
    z-index: 20;

    /*
     * What the buttons in here are made of.
     *
     * The header's controls carry their surface and hairline inline, which is
     * this codebase's idiom — so rather than fight the cascade with
     * `!important`, they read these two and this is where they change. Off
     * the band they fall back to the ordinary tokens.
     *
     * White, not a translucent wash. The first cut was white at 7%, which
     * looked handsome and left a periwinkle icon sitting on near-black at
     * about two to one — you could see that a control was there and not what
     * it was. Solid white puts them back at the contrast they have on every
     * light screen in the product, and it is the same pairing: this exact
     * icon on this exact surface, which is why they read as the same buttons
     * rather than as dark-mode variants of them.
     */
    --band-btn: #FFFFFF;
    --band-line: rgba(255, 255, 255, .92);
}

/* The burger is icon-only and inherits its colour; on a white button the
   white it wore on the band is invisible. */
.xc-topband [data-r='burger'] {
    color: #14142B !important;
}

/* A hairline between the white buttons and the night, so they read as
   raised off it rather than punched out of it. */
.xc-topband .xc-icon-btn,
.xc-topband [data-r='burger'],
.xc-topband [data-r='bell'] {
    box-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}

/* What the band used to clip, clipped here: the glows sit far outside it
   (-180%, -200%) and would otherwise light up the screen below. */
.xc-topband__sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.xc-topband__glow {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.xc-topband__glow--blue {
    inset-inline-start: -6%;
    inset-block-start: -180%;
    inline-size: 34%;
    background-image: radial-gradient(circle, rgba(28, 28, 210, .20) 0%, transparent 62%);
    animation: xc-band-glow 9s ease-in-out infinite;
}

.xc-topband__glow--green {
    inset-inline-end: 8%;
    inset-block-end: -200%;
    inline-size: 26%;
    background-image: radial-gradient(circle, rgba(14, 158, 94, .10) 0%, transparent 60%);
    animation: xc-band-glow 11s ease-in-out 2s infinite;
}

.xc-topband__mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 22% 50%, #000 5%, transparent 68%);
    mask-image: radial-gradient(ellipse at 22% 50%, #000 5%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* Everything the header already had, lifted above the glows. */
[data-r='head'].xc-topband > *:not(.xc-topband__sky) {
    position: relative;
    z-index: 1;
}

/* The screen's name, wearing the gradient the landing page puts on its last
   word. `inline-block` and the padding for the same reason as the band's: a
   descender clipped by background-clip is the classic version of this bug. */
.xc-topband__title {
    display: inline-block;
    background-image: linear-gradient(92deg, #FFFFFF 38%, #C9C9FF 78%, #8F8FF7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-block-end: .06em;
}

.xc-topband__sub {
    color: rgba(255, 255, 255, .46) !important;
}

/* The headline figure, which on light was near-black. */
.xc-topband .xc-hero {
    color: #FFFFFF;
}

.xc-topband .xc-hero--none,
.xc-topband .xc-hero__label {
    color: rgba(255, 255, 255, .42);
}

/* ═══════════════════════════════════════════════════════════════════════
 * The panel beside sign-in and sign-up.
 *
 * It was a blue gradient — good-looking and nothing like the site somebody
 * has just come from. It is the first thing a new customer sees after the
 * marketing page, so of the three places this language appears, this is the
 * one where the resemblance does the most work.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-r='authside'].xc-authside {
    position: relative;
    overflow: hidden;
    background: #0B0B1A !important;
    isolation: isolate;
}

.xc-authside__glow {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.xc-authside__glow--blue {
    inset-inline-start: -30%;
    inset-block-start: -18%;
    inline-size: 90%;
    background-image: radial-gradient(circle, rgba(28, 28, 210, .62) 0%, transparent 62%);
    animation: xc-band-glow 9s ease-in-out infinite;
}

.xc-authside__glow--green {
    inset-inline-end: -26%;
    inset-block-end: -16%;
    inline-size: 74%;
    background-image: radial-gradient(circle, rgba(14, 158, 94, .26) 0%, transparent 60%);
    animation: xc-band-glow 11s ease-in-out 2s infinite;
}

.xc-authside__mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 34%, #000 18%, transparent 74%);
    mask-image: radial-gradient(ellipse at 50% 34%, #000 18%, transparent 74%);
    pointer-events: none;
    z-index: 0;
}

[data-r='authside'].xc-authside > *:not(.xc-authside__glow):not(.xc-authside__mesh) {
    position: relative;
    z-index: 1;
}

/* The last word of the headline, in the site's own gradient. */
.xc-authside__word {
    background-image: linear-gradient(90deg, #0E9E5E, #8F8FF7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-block-end: .06em;
}

/* The three ticks, as the landing draws its eyebrow: a hairline rather than
   a filled block, so they sit on the night instead of on top of it. */
.xc-authside__tick {
    background-color: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .16);
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .xc-topband__glow,
    .xc-authside__glow {
        animation: none;
    }
}

@keyframes xc-band-glow {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.08); }
}