/* fifteen-public-surface.css
 *
 * The dark-navy surface the ANONYMOUS Metronic-shell pages are painted on.
 *
 * SHARED — served from the Fifteen.Web.Shared RCL as
 * _content/Fifteen.Web.Shared/css/fifteen-public-surface.css. Linked by every
 * page that renders the `Layout = null` + Metronic-assets shell for a visitor
 * with no account: today /Resources and /Privacy on Nexus. Opt in by putting
 * `fx-public-surface` on <body>; nothing outside that class is touched, so the
 * authenticated app shell is untouched by this file.
 *
 * WHY IT EXISTS
 * -------------
 * Those pages load style.bundle.css and NOTHING that supplies the --fx-* theme
 * tokens (_BrandStyle is only rendered by the app layouts). Every surface
 * therefore fell back to a Metronic default, and the defaults do not agree with
 * the product:
 *
 *   surface          before                  why it was wrong
 *   ---------------  ----------------------  --------------------------------
 *   html ground      #15171c (site.css)      two-tone against the body below it
 *   body .bg-body    #1e1e2d                 flat grey sheet, no brand
 *   .card            #1e1e2d                 IDENTICAL to the body — the cards
 *                                            had no surface of their own at all
 *   .symbol-label    #212e48                 a dull grey slab, not a brand tint
 *   .text-gray-400   #474761 on #1e1e2d      1.9:1 — body copy barely legible
 *   .text-gray-500   #565674 on #1e1e2d      2.5:1 — metadata barely legible
 *   .border-gray-800 #CDCDDE                 a near-WHITE rule under the footer
 *
 * The gray-400/500/600 readings are the inverted dark-mode scale Metronic ships.
 * fifteen-dark.css already remaps 100/200/300/900 for exactly this reason but
 * deliberately skipped 400/500/600 on the stated premise that they are "middling
 * gray on both backgrounds" — measured, they are not; they are dark slate. That
 * file is loaded by every authenticated page in six modules (2,293 uses across
 * ~400 cshtml files), so widening it is an estate-wide change with an estate-wide
 * verification cost. Here the remap is scoped to the two anonymous pages, where
 * it is provably correct because they render on one known ground.
 *
 * THE PALETTE IS NOT NEW. It is _PublicLanding.cshtml's, value for value — the
 * anonymous splash every module already serves on its front door. Two anonymous
 * surfaces of the same product must not disagree about what the product looks
 * like, so if that partial's palette moves, move these with it.
 */

html:has(> body.fx-public-surface),
.fx-public-surface {
    /* Verbatim from Fifteen.Web.Shared/Views/Shared/_PublicLanding.cshtml.
     * Declared on BOTH <html> and <body>: a custom property set on <body> is not
     * visible to its parent, so the html ground rule below would resolve
     * var(--nx-bg) to nothing and drop the background entirely. */
    --nx-bg: #15151e;
    --nx-bg-2: #1e1e2d;
    --nx-card: #1b1b29;
    --nx-border: #2b2b40;
    --nx-text: #e4e6ef;
    --nx-muted: #9899ac;
    --nx-primary: #009ef7;
    /* The accent wash already used by the splash's radial gradient. */
    --nx-primary-tint: rgba(0, 158, 247, 0.14);
}

/* ---------- Page ground ----------
 * The same two-stop gradient as the splash, so arriving at /Resources from the
 * front door does not look like arriving at a different site. Fixed attachment
 * keeps the wash anchored to the viewport rather than repeating down a page that
 * is several screens tall. */
html:has(> body.fx-public-surface) {
    background: var(--nx-bg);
}

body.fx-public-surface {
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--nx-primary-tint), transparent 60%),
        linear-gradient(180deg, var(--nx-bg-2) 0%, var(--nx-bg) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--nx-text);
}

/* ---------- Cards ----------
 * The defect Brad reported: the card background equalled the body background, so
 * seven stacked cards read as one flat grey sheet. Give them the splash's own
 * elevated surface — lighter ground, a real border, a radius and a shadow. */
body.fx-public-surface .card {
    background-color: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

body.fx-public-surface .card-body {
    background-color: transparent;
}

/* ---------- Icon tiles ----------
 * Metronic's dark bg-light-primary is #212e48, which reads as grey rather than as
 * a tint of the brand. Use the same accent wash as the page gradient. */
body.fx-public-surface .symbol-label.bg-light-primary {
    /* !important is not decoration here: Metronic's own .bg-light-primary is
       declared !important in style.bundle.css, so without it this rule loses on
       cascade order alone and the tile stays #212e48 grey. Verified by render. */
    background-color: var(--nx-primary-tint) !important;
    color: var(--nx-primary) !important;
    border: 1px solid rgba(0, 158, 247, 0.22);
}

/* ---------- Body copy ----------
 * Restore the light-mode meaning of the gray scale the markup was authored
 * against. Scoped to this surface only — see the header note on fifteen-dark.css. */
body.fx-public-surface .text-gray-400 {
    color: #B5B5C3 !important;
}

body.fx-public-surface .text-gray-500,
body.fx-public-surface .text-gray-600 {
    color: var(--nx-muted) !important;
}

/* ---------- Rules and separators ----------
 * border-gray-800 resolves to #CDCDDE in dark mode — a near-white line. The
 * footer wants the same hairline the cards use. */
body.fx-public-surface .border-gray-800 {
    border-color: var(--nx-border) !important;
}

/* ---------- Light mode ----------
 * These pages pin data-bs-theme="dark" today, exactly as _PublicLanding does, so
 * this block is what keeps them correct if that pin is ever lifted or a visitor's
 * host renders them light — the ground, the card and the copy all move together
 * rather than leaving light-on-light text behind. */
html[data-bs-theme="light"]:has(> body.fx-public-surface),
html[data-theme="light"]:has(> body.fx-public-surface),
[data-bs-theme="light"] body.fx-public-surface,
[data-theme="light"] body.fx-public-surface {
    --nx-bg: #eef1f6;
    --nx-bg-2: #f8fafc;
    --nx-card: #ffffff;
    --nx-border: #e4e6ef;
    --nx-text: #181c32;
    --nx-muted: #5e6278;
}

[data-bs-theme="light"] body.fx-public-surface .text-gray-400,
[data-theme="light"] body.fx-public-surface .text-gray-400 {
    color: #5e6278 !important;
}

[data-bs-theme="light"] body.fx-public-surface .text-gray-500,
[data-theme="light"] body.fx-public-surface .text-gray-500,
[data-bs-theme="light"] body.fx-public-surface .text-gray-600,
[data-theme="light"] body.fx-public-surface .text-gray-600 {
    color: var(--nx-muted) !important;
}

[data-bs-theme="light"] body.fx-public-surface .card,
[data-theme="light"] body.fx-public-surface .card {
    box-shadow: 0 12px 32px rgba(24, 28, 50, 0.08);
}

/* Headings in light mode. fifteen-dark.css lifts text-gray-100/200/300 to
 * near-white, but only under a dark theme attribute; in light mode they keep
 * Metronic's light-scale values (gray-100 = #f5f8fa), which is white ink on a
 * white card. Put the ink back so a light render is readable rather than blank. */
[data-bs-theme="light"] body.fx-public-surface .text-gray-100,
[data-theme="light"] body.fx-public-surface .text-gray-100,
[data-bs-theme="light"] body.fx-public-surface .text-gray-200,
[data-theme="light"] body.fx-public-surface .text-gray-200,
[data-bs-theme="light"] body.fx-public-surface .text-gray-300,
[data-theme="light"] body.fx-public-surface .text-gray-300 {
    color: var(--nx-text) !important;
}

[data-bs-theme="light"] body.fx-public-surface h1,
[data-theme="light"] body.fx-public-surface h1,
[data-bs-theme="light"] body.fx-public-surface h2,
[data-theme="light"] body.fx-public-surface h2,
[data-bs-theme="light"] body.fx-public-surface h3,
[data-theme="light"] body.fx-public-surface h3 {
    color: var(--nx-text);
}