/*
    smarterp.next — the product mark
    --------------------------------
    Two spans, written by Infrastructure/Branding.cs: the stem set plainly and
    ".next" carrying a gradient. Every layout that shows the brand links this
    sheet — the main application, the launcher, sign-in and Control — because
    the brand appears in all four and only two of them share a stylesheet.

    ========================================================================
    WHY THE GRADIENT CANNOT BE WRITTEN THE OBVIOUS WAY
    ========================================================================
    The obvious way is

        background-image: linear-gradient(...);
        background-clip: text;
        color: transparent;

    and the failure mode is TEXT THAT IS NOT THERE. Three separate things can
    drop the background-image declaration while leaving color: transparent
    standing, and each of them paints the name in nothing at all:

      * an unknown custom property. A declaration using a var() that resolves
        to nothing is "invalid at computed-value time" and is discarded — it
        does NOT fall back to an earlier rule. This sheet is linked by
        _ControlLayout, which loads no tokens.css, so --brand-gradient and
        --accent-rgb genuinely are unset there.
      * a browser without background-clip: text.
      * a colour function the browser does not parse (color-mix, oklab).

    So: every var() here carries a literal fallback, the gradient itself is
    built only from plain rgb() stops, and colour: transparent is confined to
    an @supports block. The worst case anywhere is the name in a solid accent
    colour, which is the same thing it looked like before the gradient existed.
    [[css-drops-a-declaration-with-an-unknown-var]]
*/

.brand {
    white-space: nowrap;
}

/*
    THE STEM IS THE QUIETER HALF. The name is lower case and the emphasis is
    meant to sit on ".next", so the stem takes the weight the surrounding text
    has and the suffix is the one that is heavier -- rather than the stem being
    made lighter, which on a sidebar footer at .72rem is already as light as it
    can legibly go.
*/
.brand__next {
    font-weight: 800;

    /*  The fallback arm: a solid accent, always painted. 29 78 216 is the
        indigo palette's --l-accent-strong-rgb, which is what a reader on the
        default palette with no tokens.css would otherwise have seen. */
    color: rgb(var(--accent-strong-rgb, 29 78 216));

    /*  Letter-spacing rather than a larger font-size: the mark sits inline in
        a <title>-sized heading, a sidebar footer and a sign-in subtitle, and a
        suffix that grew would change the line height of all three. */
    letter-spacing: .01em;
}

/*
    Both spellings tested and both declared: Safari and every WebKit-based
    browser on iOS implement this prefixed only, and a bare background-clip
    there would leave the fallback colour showing -- which is correct, but
    plainer than it needs to be.
*/
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .brand__next {
        /*  The var()'s own fallback is the indigo gradient written out, so
            this declaration is valid even with no token layer at all. */
        background-image: var(--brand-gradient,
            linear-gradient(100deg, rgb(37 99 235) 0%, rgb(124 58 237) 55%, rgb(219 39 119) 100%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        /*  A gradient clipped to glyphs is painted per element box, so the
            two words must not be allowed to break across lines -- half the
            suffix would restart the ramp. */
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}

/*
    PRINT, WHERE A GRADIENT IS NOT A COLOUR. Clipped text prints as nothing on
    a printer that drops background graphics -- which is the default in every
    browser's print dialog -- so the letterhead would carry a company name and
    a blank where the product is. Forced back to ink.
*/
@media print {
    .brand__next {
        background-image: none;
        color: #1d4ed8;
    }
}

/*
    A reader who has asked for fewer colours, or more contrast, is not asking
    for a three-stop ramp through magenta on the one word that identifies the
    application.
*/
@media (prefers-contrast: more) {
    .brand__next {
        background-image: none;
        color: rgb(var(--accent-strong-rgb, 29 78 216));
    }
}