/**
 * New Life Daily — the light Garden, behind NLD_LIGHT_GARDEN.
 *
 * Everything here is scoped under `body.light-garden #screen-2`, so it
 * inherits nothing while the surface is off and comes back off with one env
 * var.
 *
 * What this surface does NOT touch: the tree's own sky. tree-3d.js sets
 * `scene.background` and blends it with fog toward the time of day, so the
 * habitat already paints its own weather — pale at noon, dark at night. That
 * is the screen's whole point and it was never the forest palette. The dark
 * green was only the page behind the canvas and the loading card, which is
 * what the `light` param on /tree-view changes.
 *
 * !important appears in exactly one place below, on the cards whose colour is
 * written inline in the blade. An inline style cannot be beaten any other way,
 * and the alternative — editing those attributes — would change the forest
 * screen too, which is the thing a per-surface flag exists to avoid.
 */

body.light-garden #screen-2 {
    /* Paul, 15 Aug: "too white" — same problem the shell had, on this screen's
       own ground. #eff4f4 carries almost no chroma (a 5-point spread across
       its channels against the shell's old, also-rejected #f7fcfb), so
       everywhere the three glows below don't reach — most of the lower half
       — it read as flat white paper, not tint. Moved to the shell's own
       mint-blue transition stop (nld-shell-light.css's --bg-mid) rather than
       inventing a fourth hue: this screen's glows already run mint ->
       lavender -> sky, and e6f1f4 sits naturally between the first and last
       without fighting either. */
    --gl-ground: #e6f1f4;
    --gl-mint: #cfe9df;
    --gl-lavender: #e2e2f4;
    --gl-sky: #d8e8f7;
    --gl-ink: #16333b;
    --gl-ink-2: #5d7b83;
    --gl-teal: #1d9c84;
    --gl-grad-a: #4c7be8;
    --gl-grad-b: #35c79a;
    --gl-glass: rgba(255, 255, 255, 0.74);
    --gl-hairline: rgba(22, 51, 59, 0.07);
    --gl-shadow: 0 8px 22px -14px rgba(16, 46, 54, 0.34);

    /* Redefining the app's own green inside this scope, which only became
       possible once every translucent green stopped being written longhand.
       The blade's inline styles say `rgba(var(--primary-rgb), 0.18)` and
       `color: var(--primary)`, so a border, a tint and a caption all follow
       from here — including the ones on this screen that are not enumerated
       below, which is the point. Both must move together or the screen comes
       out two different greens. */
    --primary: #1d9c84;
    --primary-rgb: 29, 156, 132;
    --primary-dark: #14705f;

    color: var(--gl-ink);
    letter-spacing: normal;
    text-align: left;
}

body.light-garden #screen-2.active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(520px 380px at 6% 0%, var(--gl-mint) 0%, transparent 58%),
        radial-gradient(480px 420px at 100% 4%, var(--gl-lavender) 0%, transparent 60%),
        radial-gradient(560px 460px at 50% 100%, var(--gl-sky) 0%, transparent 64%),
        var(--gl-ground);
}

/* ── Type ─────────────────────────────────────────────────────────────── */

body.light-garden #screen-2 h2,
body.light-garden #screen-2 h3 {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 660;
    letter-spacing: -0.024em;
    color: var(--gl-ink);
}
body.light-garden #screen-2 h2 { font-size: 25px; }
body.light-garden #screen-2 h3 { font-size: 17px; }
body.light-garden #screen-2 .small { color: var(--gl-ink-2); }

/* ── The habitat, framed ──────────────────────────────────────────────── */

/* The mockup shows the tree inside a pale circular orb. A true circle crops a
   3:4 habitat badly — the canopy is the first thing to go — so this keeps the
   aspect and takes the orb's soft ring and pale ground instead. */
body.light-garden #screen-2 #habitat-container {
    background: radial-gradient(circle at 34% 24%, #ffffff 0%, rgba(255, 255, 255, 0.55) 44%, rgba(210, 236, 232, 0.6) 100%);
    border: 6px solid rgba(255, 255, 255, 0.92);
    outline: none;
    border-radius: 40px;
    box-shadow: 0 22px 44px -26px rgba(16, 70, 62, 0.55), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

body.light-garden #screen-2 #garden-tree-preview .small { color: var(--gl-ink-2); }
/* #tree-stage-label-inline and #armor-garden-status are inline `var(--primary)`
   in the blade, so the token redefinition above already carries them. */

/* ── Cards ────────────────────────────────────────────────────────────── */

/* The Shared Testimonies card carries its background and border inline, so the
   cascade cannot reach it without this. */
body.light-garden #screen-2 .card {
    background: var(--gl-glass) !important;
    border: 1px solid var(--gl-hairline) !important;
    border-radius: 20px;
    box-shadow: var(--gl-shadow);
    color: var(--gl-ink);
}
body.light-garden #screen-2 .card h3 { color: var(--gl-ink); }
body.light-garden #screen-2 .card .small { color: var(--gl-ink-2); }

/* The armour card's gold chevron and tint are literal, not tokenised — gold
   was not part of the green sweep — so this one still has to be named. */
body.light-garden #screen-2 #armor-garden-card > div:last-child { color: var(--gl-ink-2); }

/* ── Controls ─────────────────────────────────────────────────────────── */

body.light-garden #screen-2 .btn {
    background: linear-gradient(96deg, var(--gl-grad-a) 0%, var(--gl-grad-b) 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 620;
    box-shadow: 0 12px 24px -12px rgba(60, 140, 190, 0.8);
}
body.light-garden #screen-2 .btn .small { color: rgba(255, 255, 255, 0.88); }

body.light-garden #screen-2 .btn-ghost {
    background: rgba(255, 255, 255, 0.8);
    color: var(--gl-ink);
    border: 1px solid var(--gl-hairline);
    box-shadow: var(--gl-shadow);
}
body.light-garden #screen-2 .btn-ghost .small { color: var(--gl-ink-2); }

body.light-garden #screen-2 .input,
body.light-garden #screen-2 textarea {
    background: rgba(255, 255, 255, 0.86);
    color: var(--gl-ink);
    border: 1px solid var(--gl-hairline);
    border-radius: 14px;
}
body.light-garden #screen-2 .input::placeholder,
body.light-garden #screen-2 textarea::placeholder { color: #93a9af; }

body.light-garden #screen-2 .btn:focus-visible,
body.light-garden #screen-2 .btn-ghost:focus-visible,
body.light-garden #screen-2 textarea:focus-visible {
    outline: 2px solid var(--gl-teal);
    outline-offset: 2px;
}