/* =====================================================================
   Liquid glass (Apple style frosted, see-through panels) for the
   INTERNAL pages only: Builder (index.html), Dashboard, Quick Access,
   and the login page. Client proposals never load this file and never
   carry the class, so nothing a prospect sees changes.

   How it switches on: the "Liquid glass" toggle in the Settings popover
   (the gear in the Builder's Editor card, and the gear in the Dashboard
   and Quick Access headers) puts .liquid-glass on <html>. The choice is
   saved per browser as sb_liquid_glass (same idea as Low power mode) and
   re-applied before first paint by a one-line head script on each page.
   profile-settings.js owns the flip.

   Rules of the road:
   - Brand colors stay exactly as they are: Sendblue blue buttons keep
     their blue, the gold bells keep their gold, and the Sendblue blob +
     wordmark are never touched (no filter, no opacity, no recolor).
   - Every rule below is scoped under html.liquid-glass, except the small
     always-on block near the end (the Settings gear button, the popover
     rows, the flip flash), which has to look right in both modes.
   - backdrop-filter turns an element into the containing block for any
     position: fixed descendant, and the Builder's sidebar (.controls)
     holds two fixed popovers (#aeProfilePop, #notifyPop) that comparison.js
     places with viewport coordinates. So the big panels get translucent
     fills WITHOUT blur, and blur is reserved for surfaces that never wrap
     a fixed element: headers, stat cards, tables, popovers, menus, modals,
     pills and buttons.
   - Low power mode already strips every backdrop-filter (end of
     comparison.css); the fallback block near the end thickens the fills
     so text stays readable without the blur. Same for the OS "Reduce
     transparency" setting.
   - Transparency slider (John, 2026-09-08): every light fill alpha in this
     file is written as calc(<alpha> * var(--lg-k, 1)). profile-settings.js
     sets --lg-k on <html> from the slider (saved per browser as
     sb_liquid_glass_level; 40 = this file's designed look, k = 1; left of
     it thickens toward solid, right of it thins toward clear). Dark scrims,
     lines, shadows and the brand-color fills are left alone on purpose.
     Team default since 2026-09-08: 100, the Clear end (k = 0.15), applied
     once per browser by each page's head script; the legibility lift further
     down is what keeps that end readable.
   ===================================================================== */

html.liquid-glass {
    /* Highlight (top-left specular) layered over a soft white fill. */
    --lg-fill:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.62 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(255, 255, 255, calc(0.66 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.42 * var(--lg-k, 1))) 100%);
    --lg-fill-hover:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.7 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(255, 255, 255, calc(0.82 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))) 100%);
    /* Big reading surfaces (sidebar, tables, modals): milkier so text sits well. */
    --lg-panel:
        radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, calc(0.55 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, rgba(255, 255, 255, calc(0.84 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.7 * var(--lg-k, 1))) 100%);
    --lg-pop:
        radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.78 * var(--lg-k, 1))) 100%);
    /* Soft blue pills (Premade proposals, Builder link, bells) keep their tint. */
    --lg-fill-blue:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(228, 240, 254, calc(0.78 * var(--lg-k, 1))) 0%, rgba(212, 229, 253, calc(0.55 * var(--lg-k, 1))) 100%);
    --lg-fill-blue-hover:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(220, 236, 254, calc(0.9 * var(--lg-k, 1))) 0%, rgba(200, 222, 252, calc(0.7 * var(--lg-k, 1))) 100%);
    --lg-field: rgba(255, 255, 255, calc(0.52 * var(--lg-k, 1)));
    --lg-field-focus: rgba(255, 255, 255, calc(0.92 * var(--lg-k, 1)));
    /* Panel rim. Was 0.85 with a 0.95 top highlight; softened 2026-09-08
       (John: "make it a little less") after the white outline read too loud
       against the blue aurora at the clear end of the slider. */
    --lg-stroke: rgba(255, 255, 255, 0.6);
    --lg-line: rgba(28, 64, 130, 0.09);
    --lg-line-strong: rgba(28, 64, 130, 0.14);
    /* Legibility lift (John, 2026-09-08: "even at max transparency, how can we
       still make this easy to read"). As the Transparency slider moves toward
       clear the white fills thin out, so whatever sits behind a panel decides
       whether its text can be read: a dark photo behind a glass modal
       swallowed the words. --lg-lift grows from 0 at the designed look (k = 1)
       to 0.85 at the clear end, and every blurred surface folds it into its
       backdrop-filter: a wider blur, a little less saturation, and a
       contrast/brightness pair that lifts the dark tones behind the glass
       (roughly 0.1 -> 0.35, 0.5 -> 0.62) while leaving light ones where they
       are (0.9 stays 0.9). The modal dims below do their part too: their dark
       scrim fades out and a white veil takes over as the lift grows. Nothing
       changes at the default level. Surfaces without a backdrop-filter (the
       Builder sidebar, .fd-card) sit over the light aurora and stay readable
       on their own.
       Rebalanced the same evening (John: "this is at max transparency, why
       does it look so similar to minimum"): the first pair (contrast 0.53 +
       brightness 1.38 at the clear end) pushed light tones to white
       (0.9 -> 0.99), so the pale aurora behind a near-clear panel came out
       white and the panel read as solid. The pair below keeps 0.9 at 0.9;
       the aurora rule further down also deepens with the lift so a clear
       panel has something to show through it. */
    --lg-lift: clamp(0, 1 - var(--lg-k, 1), 1);
    --lg-lift-filter: contrast(calc(1 - 0.53 * var(--lg-lift))) brightness(calc(1 + 0.29 * var(--lg-lift)));
    /* Modal dims: the usual dark scrim at the designed look, a white veil at the clear end. */
    --lg-dim:
        linear-gradient(rgba(255, 255, 255, calc(0.4 * var(--lg-lift))), rgba(255, 255, 255, calc(0.4 * var(--lg-lift)))),
        rgba(17, 24, 39, calc(0.35 * (1 - var(--lg-lift))));
    --lg-blur: blur(calc(22px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    --lg-blur-soft: blur(calc(14px + 10px * var(--lg-lift))) saturate(calc(1.5 - 0.3 * var(--lg-lift))) var(--lg-lift-filter);
    --lg-shadow:
        0 0 0 1px rgba(28, 64, 130, 0.06),
        0 14px 40px rgba(28, 64, 130, 0.1),
        0 1px 3px rgba(28, 64, 130, 0.05);
    --lg-shadow-pop:
        0 0 0 1px rgba(28, 64, 130, 0.06),
        0 24px 64px rgba(28, 64, 130, 0.2),
        0 2px 8px rgba(28, 64, 130, 0.06);
    --lg-shadow-pill:
        0 0 0 1px rgba(28, 64, 130, 0.06),
        0 6px 18px rgba(28, 64, 130, 0.08);
    /* The bright rim along the top edge, plus a faint one along the bottom. */
    --lg-inner:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

/* ---- The backdrop: soft Sendblue aurora for the glass to refract ----
   Static on purpose (no drifting blobs): every blurred surface has to
   re-sample its backdrop whenever it changes, so a moving background
   would cost GPU on every frame. Fixed attachment keeps the colors under
   the glass while the page scrolls. Beats the plain edge wash from
   comparison.css / dashboard.css because this file loads last.
   All four blobs are blues (John, 2026-09-08 night: "remove the turquoise and
   purple, keep it consistent with blue"; the top-right violet and bottom-left
   teal are gone). Keep every blob at the Sendblue hue (~208°): blue-600
   rgba(37,99,235) sat here for an hour and its indigo lean (~220°) read as
   lavender once pale and behind the header's saturate filter (John: "still a
   bit purple in the corner"). They deepen with --lg-lift (2026-09-08 evening): at the
   designed level they are exactly as before, and toward the clear end of
   the Transparency slider the glow grows, so a near-clear panel visibly
   shows it instead of reading as a white card over a white page. The ramp
   was halved the same night (John: "the blue is too dark, lets make it
   lighter on max transparency"): the clear end now lands at roughly 0.38 /
   0.25 / 0.28 / 0.24 alpha instead of 0.55 / 0.39 / 0.43 / 0.37.
   Every blob then multiplies by --lg-tint (John, same night: "a sliding bar
   of how much blue color it will be"): the Blue tint slider in the Settings
   popover / Builder sidebar sets it on <html> from 0 (no glow) through 1 (the
   designed aurora, slider at 50) to 2 (slider at 100); saved per browser as
   sb_liquid_glass_tint and re-applied by each page's head script. Team
   default since 2026-09-08: slider at 17 (--lg-tint 0.34), a light glow.
   Top-left blob deepened at the default (John, same night: "make it darker on
   default for the top left corner"): base 0.24 -> 0.36, and its lift ramp
   trimmed 0.16 -> 0.08 so the Clear end (0.43) stays under the 0.55 he had
   called too dark. */
html.liquid-glass body,
html.liquid-glass body.dash-2a {
    background:
        radial-gradient(1100px 720px at 6% -12%, rgba(10, 142, 255, calc((0.36 + 0.08 * var(--lg-lift, 0)) * var(--lg-tint, 1))), rgba(10, 142, 255, 0) 62%),
        radial-gradient(900px 620px at 102% -4%, rgba(0, 118, 230, calc((0.15 + 0.12 * var(--lg-lift, 0)) * var(--lg-tint, 1))), rgba(0, 118, 230, 0) 62%),
        radial-gradient(860px 640px at 88% 100%, rgba(10, 142, 255, calc((0.17 + 0.13 * var(--lg-lift, 0)) * var(--lg-tint, 1))), rgba(10, 142, 255, 0) 62%),
        radial-gradient(720px 520px at 2% 102%, rgba(64, 160, 255, calc((0.15 + 0.11 * var(--lg-lift, 0)) * var(--lg-tint, 1))), rgba(64, 160, 255, 0) 62%),
        radial-gradient(600px 420px at 50% 50%, rgba(255, 255, 255, calc(0.35 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #f1f7fc 0%, #ecf3fa 100%);
    background-attachment: fixed;
}

/* =====================================================================
   Shared pieces (comparison.css): popovers, menus, bells, toasts, modals
   ===================================================================== */

/* Every popover (Builder Settings + bell popovers, Dashboard row popovers,
   the new Dashboard / Quick Access Settings popover). Fixed and placed by
   JS, never wrapping another fixed element, so real blur is safe. */
html.liquid-glass .notify-pop {
    background: var(--lg-pop);
    border: 1px solid var(--lg-stroke);
    border-radius: 20px;
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(28px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(28px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}
html.liquid-glass .close-pop,
html.liquid-glass .dash-beam-tip,
html.liquid-glass .ai-learn-pop {
    background: var(--lg-pop);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(28px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(28px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}

/* Editor / industry dropdown menus (absolute inside their dropdown). */
html.liquid-glass .ae-dropdown-menu {
    background: var(--lg-pop);
    border: 1px solid var(--lg-stroke);
    border-radius: 14px;
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}
html.liquid-glass .ae-dropdown-option:hover,
html.liquid-glass .ae-dropdown-option[aria-selected="true"] {
    background: rgba(45, 108, 223, 0.1);
}

/* The white bell / gear tiles (Builder Editor card, Quick Access header). */
html.liquid-glass .notify-bell,
html.liquid-glass .notify-bell.ae-profile-btn,
html.liquid-glass .notify-bell.ae-profile-btn:hover {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .notify-bell:hover {
    background: var(--lg-fill-hover);
    border-color: var(--lg-stroke);
}
/* The Quick Access bells keep their gold tint: only the fill goes glassy. */
html.liquid-glass .notify-bell.qa-bell {
    background:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(254, 249, 236, calc(0.85 * var(--lg-k, 1))), rgba(253, 243, 216, calc(0.6 * var(--lg-k, 1))));
}
html.liquid-glass .notify-bell.qa-bell.is-off { background: var(--lg-fill); }
/* No white disc or halo behind the gear (John, 2026-09-08: it read as a
   white blob over the bell). The gear glyph carries its own white ring
   (the inner stroke in its SVG), which is contrast enough on the glass bell. */
html.liquid-glass .notify-bell-gear {
    background: transparent;
    box-shadow: none;
}

/* Off state of the slide toggles: a glassy grey track. Checked stays brand blue
   (its rule in comparison.css is more specific than this one). */
html.liquid-glass .rb-toggle-slider { background: rgba(28, 64, 130, 0.22); }

/* Toast (dark pill at the bottom): dark glass. */
html.liquid-glass .toast {
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(calc(16px + 16px * var(--lg-lift))) saturate(calc(1.4 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(16px + 16px * var(--lg-lift))) saturate(calc(1.4 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}

/* Beam's build dock and fuel tray (fixed, over the page). Both float over
   whatever the camera is touring, and while Beam writes the call recap that
   is the dark iMessage phone screen, so the pop fill sits on a white floor
   the Transparency slider cannot thin away (John, 2026-09-08 night: "make
   this look more visible", the pill had gone nearly clear over the phone).
   At the designed level the floor hides under the pop fill and nothing
   changes; toward the clear end the pill stays milky instead of vanishing.
   The rim is a firmer blue and a soft white halo lifts them off dark
   backdrops (it disappears over the pale page). */
html.liquid-glass .beam-dock,
html.liquid-glass .beam-fuel-tray {
    background: var(--lg-pop), rgba(255, 255, 255, 0.92);
    border-color: rgba(10, 142, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}

/* =====================================================================
   Builder (index.html)
   ===================================================================== */

/* The header becomes a floating glass toolbar. It already sits
   position: relative for the sheen, which now clips to the rounded bar. */
html.liquid-glass .page-header {
    padding: 16px 22px;
    border-radius: 26px;
    background: var(--lg-fill);
    border: 1px solid var(--lg-stroke);
    box-shadow: var(--lg-shadow), var(--lg-inner);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
html.liquid-glass .hdr-sheen { border-radius: inherit; }

/* Sidebar: translucent, NO blur (it wraps two fixed popovers, see the note
   at the top of this file). Still reads as frosted because the backdrop
   under it is soft color, not detail. */
html.liquid-glass .controls {
    background: var(--lg-panel);
    border: 1px solid var(--lg-stroke);
    border-radius: 24px;
    box-shadow: var(--lg-shadow), var(--lg-inner);
}
html.liquid-glass .control-group { border-bottom-color: var(--lg-line); }

/* Fold headers in the sidebar: the Proposal settings <details> under the Editor
   picker and the Contact Me / Accept Proposal / Intro Page drawers inside it.
   comparison.css dresses each header as a solid #fafafa bar with a grey border,
   which sat as an opaque strip on the glass sidebar (John, 2026-09-08 night:
   "the proposal settings is not liquid glass"). Same clear well as the Editor
   picker row above them, and the body's hairline follows the glass lines. */
html.liquid-glass details.rb-section > summary.reply-buttons-label {
    background: var(--lg-field);
    border-color: var(--lg-line-strong);
}
html.liquid-glass details.rb-section > summary.reply-buttons-label:hover {
    background: var(--lg-field-focus);
    border-color: var(--lg-line-strong);
}
html.liquid-glass .proposal-settings-body { border-left-color: var(--lg-line-strong); }

/* Fields inside the sidebar (and the Settings popovers): clear glass wells. */
html.liquid-glass .controls input[type="text"],
html.liquid-glass .controls textarea,
html.liquid-glass .controls input[type="number"],
html.liquid-glass .controls select,
html.liquid-glass .ae-dropdown-toggle,
html.liquid-glass .ae-profile-action,
html.liquid-glass .ae-profile-title-input,
html.liquid-glass .small-btn,
html.liquid-glass .upload-drop {
    background: var(--lg-field);
    border-color: var(--lg-line-strong);
}
html.liquid-glass .controls input[type="text"]:focus,
html.liquid-glass .controls textarea:focus,
html.liquid-glass .controls input[type="number"]:focus,
html.liquid-glass .ae-dropdown-toggle:focus,
html.liquid-glass .ae-profile-title-input:focus {
    background: var(--lg-field-focus);
    border-color: #2d6cdf;
}
html.liquid-glass .ae-profile-action:hover,
html.liquid-glass .small-btn:hover,
html.liquid-glass .upload-drop:hover { background: rgba(255, 255, 255, calc(0.8 * var(--lg-k, 1))); }
html.liquid-glass .ae-crop-circle {
    background: rgba(255, 255, 255, calc(0.5 * var(--lg-k, 1)));
    box-shadow: 0 0 0 1px var(--lg-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Beam's Auto-build box. comparison.css draws its animated gradient border by
   painting the blue gradient across the WHOLE box (border-box) under a white
   padding-box layer, so the gradient only peeks out in the 2px ring. In glass
   mode that white layer follows the Transparency slider, and near the clear end
   the blue underneath showed through the entire box, tile seam and all (John,
   2026-09-08: "make this way less blue when transparency is max on"). The box
   now carries only the glass fill, and the ring is painted by a ::before that
   is masked down to the border area, so the inside can go fully clear. The
   ring keeps the same two background layers, sizes and keyframes as
   comparison.css, so the pan animation is unchanged. */
html.liquid-glass .autofill-group {
    /* 0.9 white, not 0.62: over the page's blue wash the lower value read as
       a saturated blue card (John, 2026-09-08: "make these lighter"). */
    background: rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1)));
    background-clip: padding-box;
    animation: none;
}
html.liquid-glass .autofill-group::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    background:
        linear-gradient(transparent, transparent) padding-box,
        linear-gradient(120deg, #1d4ed8, #0a8eff, #38bdf8, #1d4ed8) border-box;
    background-size: 100% 100%, 320% 320%;
    animation: autofillBorderPan 9s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Header pills. Brand blue stays brand blue; it just picks up a glass rim. */
html.liquid-glass .btn-secondary,
html.liquid-glass .funnel-btn {
    background: var(--lg-fill-blue);
    border-color: var(--lg-stroke);
    box-shadow: 0 0 0 1px rgba(27, 127, 241, 0.14), 0 6px 18px rgba(27, 127, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .btn-secondary:hover,
html.liquid-glass .funnel-btn:hover { background: var(--lg-fill-blue-hover); }
/* The Website Proposals pill while the mode is ON: funnel-demo.css paints it
   purple with white text, and the glass rule above (higher specificity)
   was swapping the purple for the light glass fill and leaving the white
   text on it, unreadable (John, 2026-09-08: "why is this white?"). Keep the
   purple, just with the glass rim. */
html.liquid-glass .funnel-btn.is-on,
html.liquid-glass .funnel-btn.is-on:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.94), rgba(139, 92, 246, 0.94));
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), 0 6px 18px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.liquid-glass .btn-primary {
    background: linear-gradient(180deg, #2E8DF6 0%, #1B7FF1 60%, #1677E6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 22px rgba(27, 127, 241, 0.38);
}
html.liquid-glass .btn-primary:hover {
    background: linear-gradient(180deg, #2384F2 0%, #0E6FE3 60%, #0B65D2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 10px 26px rgba(27, 127, 241, 0.42);
}

/* ---------------------------------------------------------------------
   Sidebar buttons (John, 2026-09-09: "make all the buttons on the form
   that arent liquid glass liquid glass"). comparison.css left these as
   solid white cards, pale-blue dashed chips and solid brand-blue slabs,
   so on the glass sidebar they were the last opaque things in the form.
   Two families, matching the header above: neutral buttons become clear
   wells like the fields beside them, and brand-blue buttons keep their
   blue and only gain a glass rim, the same call already made for
   .btn-primary, which is what keeps their white labels readable.

   No backdrop-filter anywhere below. The sidebar itself deliberately
   carries none (see the note above .controls), and every fill here is a
   token, so Low power and Reduce transparency thicken them with no extra
   rule. Left alone on purpose: .autofill-docs-toggle, .beam-fold-openall
   and .tpl-restore-card-photo are bare text links with no surface to
   frost, and .tpl-spam-btn belongs to the fake iOS spam banner inside the
   phone mockup, which is the client's view, not ours.
   --------------------------------------------------------------------- */

/* Neutral wells: "Refresh testimonials" and the two recap-voice cards.
   Hovers that carry meaning are left as comparison.css wrote them. */
html.liquid-glass .testimonials-refresh-btn,
html.liquid-glass .recap-style-btn {
    background: var(--lg-field);
    border-color: var(--lg-line-strong);
}
html.liquid-glass .testimonials-refresh-btn:hover {
    background: var(--lg-field-focus);
    border-color: var(--lg-line-strong);
}
/* The picked recap voice, instead of the flat #f0f8ff wash. The selected
   outline is comparison.css's inset ring and still draws. */
html.liquid-glass .recap-style-btn.is-active {
    background: var(--lg-fill-blue);
    border-color: #008BFF;
}
/* "Save template for everyone" is an outlined button; it gets the well but
   keeps its brand-blue outline, which is the whole of its identity. */
html.liquid-glass .tpl-save-default { background: var(--lg-field); }

/* The small round clear on an uploaded logo. This one sits on the user's
   own image, not on the sidebar, so its fill needs a floor: at the clear
   end of the Transparency slider a plain token fill drops to 8% white and
   the grey clear vanishes into whatever was uploaded. It still follows the
   slider, just from 0.5 up rather than from 0. */
html.liquid-glass .upload-clear {
    background: rgba(255, 255, 255, calc(0.5 + 0.45 * var(--lg-k, 1)));
    border-color: var(--lg-line-strong);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Dashed add chips: "Add another plan" and "Add bracket". Only the colors
   move here, so the dashed border stays dashed. */
html.liquid-glass .extra-plan-add,
html.liquid-glass .calc-bracket-add {
    background: var(--lg-fill-blue);
    border-color: rgba(27, 127, 241, 0.4);
}
html.liquid-glass .extra-plan-add:hover,
html.liquid-glass .calc-bracket-add:hover { background: var(--lg-fill-blue-hover); }

/* The grey On / Off track inside the bell popover. The popover around it is
   already glass; this pill was still a solid #eceff5 strip. The green and
   red selected states are status colors and stay opaque. */
html.liquid-glass .notify-seg {
    background: var(--lg-field);
    border-color: var(--lg-line-strong);
}

/* Brand blue in the form, same treatment as .btn-primary in the header: the
   blue stays, it gains a lit top edge and a colored shadow. */
html.liquid-glass .primary-btn {
    background: linear-gradient(180deg, #2E8DF6 0%, #1B7FF1 60%, #1677E6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 22px rgba(27, 127, 241, 0.32);
}
html.liquid-glass .primary-btn:hover {
    background: linear-gradient(180deg, #2384F2 0%, #0E6FE3 60%, #0B65D2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 10px 26px rgba(27, 127, 241, 0.36);
}
html.liquid-glass .primary-btn:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px rgba(27, 127, 241, 0.3);
}
/* Beam's two build buttons get the rim ONLY, never a background. The plain
   one already carries a blue gradient, and .autofill-btn's background IS its
   animation (autofillBtnPan slides a 280%-wide gradient); setting background
   here would win on specificity and freeze the pan. */
html.liquid-glass .recap-generate-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 8px 22px rgba(37, 99, 235, 0.3);
}
html.liquid-glass .recap-generate-btn.autofill-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 8px 22px rgba(10, 142, 255, 0.34);
}

/* The sticky slide pill above the preview (already lightly blurred). Only
   the frame around the proposal preview changes; the proposal itself, the
   intro page, and the phone mockup are the client's view and stay as is. */
html.liquid-glass .preview-pane-nav {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
html.liquid-glass .preview-pane-arrow {
    background: rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1)));
    border-color: var(--lg-stroke);
}
html.liquid-glass .preview-pane-arrow:hover { background: rgba(255, 255, 255, calc(0.95 * var(--lg-k, 1))); }

/* Website Proposal mode cards (internal board): translucent, no blur. */
html.liquid-glass .fd-card {
    background: var(--lg-panel);
    border-color: var(--lg-stroke);
    border-radius: 20px;
    box-shadow: var(--lg-shadow), var(--lg-inner);
}

/* =====================================================================
   Dashboard + Quick Access (dashboard.css, .dash-2a reskin)
   ===================================================================== */

/* Header toolbar. The glass surface (fill, stroke, inner highlight, blur) is painted by
   a ::before layer instead of by the header itself. Two reasons, both backdrop-filter:
   it makes its element a stacking context, so the Editor menu's z-index (comparison.css,
   20) stopped counting against the page and the glass stat cards and filter pills that
   come later in the DOM painted over the open menu; and it makes its element a backdrop
   root, so a blurred menu nested inside could only frost the header, never the cards
   under it. With the blur on the pseudo-element the header has neither problem and just
   sits above the page content as a whole (z-index 30: over the cards and the table,
   under the row/close popovers at 60+, the modals at 1000 and the bell panel). */
html.liquid-glass .dash-2a .dash-header {
    position: relative;
    z-index: 30;
    padding: 14px 20px;
    border-radius: 26px;
    border: 1px solid transparent;
    box-shadow: var(--lg-shadow);
}
html.liquid-glass .dash-2a .dash-header::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    box-sizing: border-box;
    border-radius: inherit;
    background: var(--lg-fill);
    border: 1px solid var(--lg-stroke);
    box-shadow: var(--lg-inner);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
html.liquid-glass .dash-2a .dash-btn-back,
html.liquid-glass .ntf-bell {
    background: var(--lg-fill-blue);
    border-color: var(--lg-stroke);
    box-shadow: 0 0 0 1px rgba(27, 127, 241, 0.14), 0 6px 18px rgba(27, 127, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .dash-2a .dash-btn-back:hover,
html.liquid-glass .ntf-bell:hover { background: var(--lg-fill-blue-hover); }
html.liquid-glass .dash-2a .dash-btn-new {
    background: linear-gradient(180deg, #2A92F8 0%, #1287F7 60%, #0F7CE8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 22px rgba(18, 135, 247, 0.36);
}
html.liquid-glass .dash-2a .dash-btn-new:hover {
    background: linear-gradient(180deg, #1F86F0 0%, #0E6FD0 60%, #0B64BF 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 10px 26px rgba(18, 135, 247, 0.4);
}
/* Summary button: keeps its pastel border, the inside goes clear. Same story as
   Beam's box above: dashboard.css paints the pastel gradient across the whole
   button under a near-white padding-box layer, and once that layer followed the
   slider the button got MORE colorful toward the clear end (John, 2026-09-08:
   "more transparent when transparency is higher, not more color"). The ring is a
   masked ::before now and the face is one glass fill. */
html.liquid-glass .dash-btn-summary {
    position: relative;
    background: rgba(242, 248, 255, calc(0.86 * var(--lg-k, 1)));
    background-clip: padding-box;
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .dash-btn-summary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90deg, #BFDBFE, #8EC5FD, #BFDBFE) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* Editor chip + AE filter chip (and the Builder's corner chip, .hdr-editor-chip). */
html.liquid-glass .hdr-editor-chip,
html.liquid-glass .dash-2a .dash-editor .ae-dropdown-toggle,
html.liquid-glass .dash-2a .dash-ae-filter .ae-dropdown-toggle {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .hdr-editor-chip:hover,
html.liquid-glass .dash-2a .dash-editor .ae-dropdown-toggle:hover,
html.liquid-glass .dash-2a .dash-ae-filter .ae-dropdown-toggle:hover { background: var(--lg-fill-hover); }

/* Stat cards: proper glass (no fixed children inside). The floating blob in
   the corner is untouched. */
html.liquid-glass .dash-2a .stat-card,
html.liquid-glass .dash-2a .stat-card:hover,
html.liquid-glass .dash-2a .stat-card-clickable:hover {
    background: var(--lg-fill);
    border: 1px solid var(--lg-stroke);
    border-radius: 22px;
    box-shadow: var(--lg-shadow), var(--lg-inner);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
html.liquid-glass .dash-2a .stat-card:hover,
html.liquid-glass .dash-2a .stat-card-clickable:hover {
    background: var(--lg-fill-hover);
    box-shadow: 0 0 0 1px rgba(28, 64, 130, 0.06), 0 18px 44px rgba(28, 64, 130, 0.14), var(--lg-inner);
}

/* Range pills (Daily / Weekly / ...). Active keeps its green. */
html.liquid-glass .dash-range-btn:not(.is-active),
html.liquid-glass .dash-premades-btn:not(.is-active) {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .dash-range-btn:not(.is-active):hover,
html.liquid-glass .dash-premades-btn:not(.is-active):hover { background: var(--lg-fill-hover); }
/* The "Pick month" menu hanging off that row: same glass as the Editor menu,
   so it floats over the tiles rather than sitting on a white card. */
html.liquid-glass .dash-month-menu {
    background: var(--lg-pop);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(24px + 16px * var(--lg-lift))) saturate(calc(1.7 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}
html.liquid-glass .dash-month-opt:hover {
    background: rgba(45, 108, 223, 0.1);
}
/* The little Day / Week / Month groups on Quick Access stat cards. */
html.liquid-glass .stat-range-toggle,
html.liquid-glass .qa-2a .stat-range-toggle {
    background: rgba(28, 64, 130, 0.08);
    box-shadow: inset 0 1px 2px rgba(28, 64, 130, 0.08);
}
html.liquid-glass .stat-range-btn.is-active,
html.liquid-glass .qa-2a .stat-range-btn.is-active {
    background: rgba(255, 255, 255, calc(0.92 * var(--lg-k, 1)));
    box-shadow: 0 2px 6px rgba(28, 64, 130, 0.14);
}

/* Search + filters row. */
html.liquid-glass .dash-2a .dash-search-wrap,
html.liquid-glass .dash-2a .dash-filter-select {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .dash-2a .dash-search-wrap:hover,
html.liquid-glass .dash-2a .dash-search-wrap:focus-within,
html.liquid-glass .dash-2a .dash-filter-select:hover,
html.liquid-glass .dash-2a .dash-filter-select:focus {
    background: var(--lg-fill-hover);
    border-color: rgba(185, 214, 248, 0.9);
}

/* The proposal table card. Its bell popovers live at body level, so blur is
   safe here too. */
html.liquid-glass .dash-table-wrap,
html.liquid-glass .dash-2a .dash-table-wrap {
    background: var(--lg-panel);
    border: 1px solid var(--lg-stroke);
    border-radius: 22px;
    box-shadow: var(--lg-shadow), var(--lg-inner);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    scrollbar-color: rgba(28, 64, 130, 0.25) rgba(28, 64, 130, 0.06);
}
html.liquid-glass .dash-2a .dash-table th { border-bottom-color: var(--lg-line-strong); }
html.liquid-glass .dash-2a .dash-table td { border-bottom-color: var(--lg-line); }
/* Rows viewed in the last 24 hours (dashboard.js adds .dash-row-new). The base
   sheet tints them a faint blue-white against plain white rows; the first glass
   pass used a white wash instead, which vanished on a panel that is already
   near-white (John, 2026-09-08 night: "there used to be a difference in color
   between the ones that got views vs no"). A soft Sendblue wash now, held on
   hover so the row stays marked under the pointer. Not scaled by --lg-k on
   purpose: it is a color mark, not a light fill, and must survive the clear end. */
html.liquid-glass .dash-2a .dash-table tbody tr.dash-row-new td { background: rgba(10, 142, 255, 0.07); }
html.liquid-glass .dash-2a .dash-table tbody tr:hover,
html.liquid-glass .dash-2a .dash-table tbody tr:hover td { background: rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))); }
html.liquid-glass .dash-2a .dash-table tbody tr.dash-row-new:hover td { background: rgba(10, 142, 255, 0.12); }
html.liquid-glass .dash-row-disabled { background: rgba(255, 255, 255, calc(0.25 * var(--lg-k, 1))); }
html.liquid-glass .dash-table-wrap::-webkit-scrollbar-track,
html.liquid-glass .dash-scroll-top::-webkit-scrollbar-track,
html.liquid-glass .dash-hscroll::-webkit-scrollbar-track { background: rgba(28, 64, 130, 0.06); }
html.liquid-glass .dash-table-wrap::-webkit-scrollbar-thumb,
html.liquid-glass .dash-scroll-top::-webkit-scrollbar-thumb,
html.liquid-glass .dash-hscroll::-webkit-scrollbar-thumb {
    background: rgba(28, 64, 130, 0.28);
    border-color: transparent;
    background-clip: padding-box;
}
html.liquid-glass .dash-table-wrap::-webkit-scrollbar-thumb:hover,
html.liquid-glass .dash-scroll-top::-webkit-scrollbar-thumb:hover,
html.liquid-glass .dash-hscroll::-webkit-scrollbar-thumb:hover { background: rgba(28, 64, 130, 0.42); }
/* The floating side-to-side bar pinned to the bottom of the screen. */
html.liquid-glass .dash-hscroll {
    background: var(--lg-pop);
    -webkit-backdrop-filter: blur(calc(20px + 16px * var(--lg-lift))) saturate(calc(1.6 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(20px + 16px * var(--lg-lift))) saturate(calc(1.6 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}

/* Modals (History, Summary, Preview): blurred dim behind, glass sheet in front.
   Themed summary headers keep their team colors. */
html.liquid-glass .dash-modal-overlay {
    background: var(--lg-dim);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html.liquid-glass .dash-modal {
    background: var(--lg-pop);
    border: 1px solid var(--lg-stroke);
    border-radius: 24px;
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(30px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
    backdrop-filter: blur(calc(30px + 16px * var(--lg-lift))) saturate(calc(1.8 - 0.4 * var(--lg-lift))) var(--lg-lift-filter);
}
html.liquid-glass .dash-modal-header { border-bottom-color: var(--lg-line); }
html.liquid-glass .dash-seg { background: rgba(28, 64, 130, 0.08); }

/* =====================================================================
   Login page (its styles are inline in login.html)
   ===================================================================== */
/* Thinner than every other panel in this file, on purpose (John, 2026-09-11:
   "make the box more transparent"). Two changes get there, and the second one
   is the one that actually matters:

   1. --lg-fill instead of --lg-pop. --lg-pop is the milky token meant for
      popovers full of small text; the login card holds eight words.
   2. NO var(--lg-lift-filter). Every other glass surface folds in a
      contrast/brightness pair that lifts dark backdrops so text stays readable
      over anything. Over a photo that is essential; over this page's own pale
      aurora it just washes the backdrop toward white, which is exactly why the
      card read as solid at the Clear end of the slider. Dropping it lets the
      aurora through instead. Safe HERE and nowhere else: the login page is the
      one internal page whose background we control completely. */
html.liquid-glass .login-card {
    background: var(--lg-fill);
    border: 1px solid var(--lg-stroke);
    border-radius: 24px;
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    -webkit-backdrop-filter: blur(calc(26px + 14px * var(--lg-lift))) saturate(1.55);
    backdrop-filter: blur(calc(26px + 14px * var(--lg-lift))) saturate(1.55);
}
html.liquid-glass .login-card input[type="password"] {
    background: var(--lg-field);
    border-color: var(--lg-line-strong);
}
html.liquid-glass .login-card input[type="password"]:focus { background: var(--lg-field-focus); }

/* ---- The two buttons, as glass rather than as paint ---- */
/* Log in. It was a flat blue gradient sitting on the glass; now it is blue
   glass: a translucent blue over its own blur, with a bright top rim and a
   coloured glow underneath. The Sendblue blue is unchanged, only its alpha. */
html.liquid-glass .login-card button {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(61, 123, 230, 0.82) 0%, rgba(45, 108, 223, 0.78) 60%, rgba(40, 95, 199, 0.82) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.16),
        0 10px 26px rgba(45, 108, 223, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
html.liquid-glass .login-card button:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(61, 123, 230, 0.92) 0%, rgba(45, 108, 223, 0.9) 60%, rgba(40, 95, 199, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        0 12px 30px rgba(45, 108, 223, 0.34);
}
/* Sign in with Google. Google's brand guidance asks for a solid white button
   with a #747775 rim; this softens the SURFACE only and leaves the four-colour
   mark and the "Sign in with Google" label exactly as specified, which is the
   part the guidance actually protects. The rim keeps Google's colour at a
   lower alpha so the button still reads as theirs, not as ours. */
html.liquid-glass .login-card .google-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.34) 100%);
    border: 1px solid rgba(116, 119, 117, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 6px 18px rgba(28, 64, 130, 0.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    color: #1f1f1f;
}
html.liquid-glass .login-card .google-btn:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.48) 100%);
    border-color: rgba(116, 119, 117, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 8px 22px rgba(28, 64, 130, 0.14);
}
html.liquid-glass .login-card .google-btn:active {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.32) 100%);
}

/* =====================================================================
   Fallbacks: Low power mode strips every blur (comparison.css), and the OS
   "Reduce transparency" setting asks for the same. Thicken the fills so
   nothing loses contrast, and let the aurora rest.
   ===================================================================== */
html.liquid-glass.low-power {
    --lg-fill:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.8 * var(--lg-k, 1))) 100%);
    --lg-fill-hover:
        radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, calc(0.6 * var(--lg-k, 1))), rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, rgba(255, 255, 255, calc(0.96 * var(--lg-k, 1))) 0%, rgba(255, 255, 255, calc(0.88 * var(--lg-k, 1))) 100%);
    --lg-panel: linear-gradient(160deg, rgba(255, 255, 255, calc(0.95 * var(--lg-k, 1))), rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1))));
    --lg-pop: linear-gradient(160deg, rgba(255, 255, 255, calc(0.98 * var(--lg-k, 1))), rgba(255, 255, 255, calc(0.95 * var(--lg-k, 1))));
    --lg-fill-blue: linear-gradient(150deg, rgba(234, 242, 254, calc(0.96 * var(--lg-k, 1))), rgba(212, 229, 253, calc(0.9 * var(--lg-k, 1))));
    --lg-fill-blue-hover: linear-gradient(150deg, rgba(220, 236, 254, calc(1 * var(--lg-k, 1))), rgba(200, 222, 252, calc(0.95 * var(--lg-k, 1))));
    --lg-field: rgba(255, 255, 255, calc(0.85 * var(--lg-k, 1)));
}
@media (prefers-reduced-transparency: reduce) {
    html.liquid-glass {
        --lg-fill: linear-gradient(150deg, rgba(255, 255, 255, calc(0.95 * var(--lg-k, 1))), rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1))));
        --lg-fill-hover: linear-gradient(150deg, rgba(255, 255, 255, calc(1 * var(--lg-k, 1))), rgba(255, 255, 255, calc(0.96 * var(--lg-k, 1))));
        --lg-panel: linear-gradient(160deg, rgba(255, 255, 255, calc(0.97 * var(--lg-k, 1))), rgba(255, 255, 255, calc(0.94 * var(--lg-k, 1))));
        --lg-pop: rgba(255, 255, 255, calc(0.98 * var(--lg-k, 1)));
        --lg-fill-blue: linear-gradient(150deg, rgba(234, 242, 254, calc(0.98 * var(--lg-k, 1))), rgba(212, 229, 253, calc(0.95 * var(--lg-k, 1))));
        --lg-fill-blue-hover: linear-gradient(150deg, rgba(220, 236, 254, calc(1 * var(--lg-k, 1))), rgba(200, 222, 252, calc(1 * var(--lg-k, 1))));
        --lg-field: rgba(255, 255, 255, calc(0.9 * var(--lg-k, 1)));
    }
    html.liquid-glass *, html.liquid-glass *::before, html.liquid-glass *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Phones: slimmer toolbars, plain aurora (fixed attachment is unreliable
   on mobile Safari, so the colors just scroll with the page there). */
@media (max-width: 640px) {
    html.liquid-glass .page-header { padding: 12px 14px; border-radius: 20px; }
    html.liquid-glass .dash-2a .dash-header { padding: 12px 14px; border-radius: 20px; }
}
@media (max-width: 768px) {
    html.liquid-glass body,
    html.liquid-glass body.dash-2a { background-attachment: scroll; }
}

/* =====================================================================
   Always-on pieces (both modes): the Settings gear on the Dashboard and
   Quick Access headers, the Settings popover rows, the flip flash.
   ===================================================================== */

/* The gear tile, injected by profile-settings.js into #sbSettingsMount
   (an empty span right before the Editor picker). Same 44px footprint as
   the notifications bell beside it. */
.sb-settings-mount { display: contents; }
.sb-settings-btn {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #E7EAF3;
    border-radius: 12px;
    background: #fff;
    color: #5F6B7A;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(63, 69, 98, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sb-settings-btn svg {
    width: 21px;
    height: 21px;
    display: block;
    transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.sb-settings-btn:hover {
    color: #1565CF;
    border-color: #C7DEFA;
    background: #F7FAFF;
    box-shadow: 0 4px 12px rgba(63, 69, 98, 0.14);
}
.sb-settings-btn:hover svg { transform: rotate(35deg); }
.sb-settings-btn:focus-visible { outline: 2px solid #2d6cdf; outline-offset: 2px; }
.sb-settings-btn[aria-expanded="true"] {
    color: #2d6cdf;
    border-color: #2d6cdf;
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.12);
}
.sb-settings-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
html.liquid-glass .sb-settings-btn {
    background: var(--lg-fill);
    border-color: var(--lg-stroke);
    box-shadow: var(--lg-shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: var(--lg-blur-soft);
    backdrop-filter: var(--lg-blur-soft);
}
html.liquid-glass .sb-settings-btn:hover { background: var(--lg-fill-hover); }
html.liquid-glass .sb-settings-btn[aria-expanded="true"] { border-color: #2d6cdf; }

/* The popover's own rows (the Dashboard / Quick Access popover reuses the
   Builder's .ae-crop-* / .ae-profile-* classes from comparison.css; these
   are the pieces that file scopes to the Builder sidebar). */
.sb-settings-pop .ae-field-label { display: block; margin-bottom: 8px; }
.sb-settings-pop .ae-profile-title-label { margin-bottom: 0; }
.sb-settings-pop input[type="file"] { display: none; }

/* "Appearance" label + the Liquid glass switch row. Self-qualified like the
   Contact Me row so it looks the same in the Builder popover (inside the
   sidebar, where .controls label rules apply) and in the header popovers. */
.ae-profile-pop .ae-glass-sub,
.sb-settings-pop .ae-glass-sub { display: block; margin: 14px 0 8px; }
.ae-profile-pop label.reply-buttons-option.ae-glass-option,
.sb-settings-pop label.reply-buttons-option.ae-glass-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin: 0 0 4px;
}
.ae-glass-option .reply-buttons-text { display: inline-flex; align-items: center; gap: 4px; }
.ae-glass-option .rb-help { position: relative; }
/* Transparency slider under the Liquid glass switch (both popovers). Its
   value becomes --lg-k on <html> (profile-settings.js): every glass fill in
   this file multiplies its alpha by it, so one number moves the whole theme
   between nearly solid (left) and almost clear (right). Greyed out while the
   switch is off. */
.lg-level-row { display: block; margin: 6px 0 2px; }
.lg-level-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #4B5563; }
.lg-level-label .rb-help { position: relative; }
.lg-level-slider { display: flex; align-items: center; gap: 8px; }
.lg-level-slider input[type="range"] { flex: 1; min-width: 0; margin: 0; accent-color: #0a8eff; cursor: pointer; }
.lg-level-end { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9CA3AF; }
.lg-level-row.is-off { opacity: 0.45; }
.lg-level-row.is-off input[type="range"] { cursor: default; }
/* Class-driven ON look in case Chrome's form restore leaves the :checked
   sibling paint stale after a reload (the same trap the Low power pill hit). */
.rb-toggle.is-on .rb-toggle-slider { background: #2d6cdf; }
.rb-toggle.is-on .rb-toggle-slider::before { transform: translateX(18px); }

/* Low power's own row in the popover ("Performance"). Its track stays gold
   rather than blue: gold has always meant the calm is on, and the bolt beside
   it (header-buttons.css) lights to match. */
.lp-option .reply-buttons-text { gap: 6px; }
.rb-toggle-gold input:checked + .rb-toggle-slider,
.rb-toggle-gold.is-on .rb-toggle-slider { background: #F5B301; }
.rb-toggle-gold input:focus-visible + .rb-toggle-slider { outline-color: #C8930A; }

/* The "Account" row at the foot of the Settings popover: who is signed in, and
   the way out. There was no way out of the site from inside it until now (the
   session cookie simply ran its 30 days), so signout.js gives every internal
   page a button and api/auth-logout.js clears the cookie on both hosts.

   Quiet on purpose. It sits directly under the Low power switch, and a loud red
   pill there is something people would hit by accident reaching for the switch
   above it; the red only arrives on hover, once the pointer has committed. The
   name line is filled in for Google sign-ins only (the shared password mints no
   identity), so the button has to look right on its own. */
.sb-signout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #eef0f4;
}
.sb-signout-who {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #4B5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-settings-pop .sb-signout-btn,
.ae-profile-pop .sb-signout-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sb-signout-btn svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }
.sb-settings-pop .sb-signout-btn:hover,
.ae-profile-pop .sb-signout-btn:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #B91C1C;
}
/* And again with html.liquid-glass on the front, which is the version that
   actually runs for everyone. The button carries .ae-profile-action, and
   html.liquid-glass .ae-profile-action:hover further up this file scores one
   element MORE than a plain .sb-settings-pop rule, so it won the background and
   left the red as text and rim on a white glass fill. Glass has been the team
   default since 2026-09-08, so without this twin the designed hover was only
   ever visible to someone who had switched the theme off. */
html.liquid-glass .sb-settings-pop .sb-signout-btn:hover,
html.liquid-glass .ae-profile-pop .sb-signout-btn:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #B91C1C;
}
.sb-signout-btn:hover svg { opacity: 1; }
.sb-settings-pop .sb-signout-btn:disabled,
.ae-profile-pop .sb-signout-btn:disabled { opacity: 0.6; cursor: wait; }
html.liquid-glass .sb-signout-row { border-top-color: var(--lg-line); }

/* Flip flash: a bright sheen sweeps across the screen when Liquid glass is
   switched, plus a soft blue rim while it settles ON. Click-through, removed
   by profile-settings.js when the show ends; skipped under OS Reduce Motion
   and clamped to an instant by Low power mode like every other animation. */
.lg-flare {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}
.lg-flare::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -45%;
    width: 42%;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, calc(0.35 * var(--lg-k, 1))) 38%,
        rgba(255, 255, 255, calc(0.85 * var(--lg-k, 1))) 50%,
        rgba(255, 255, 255, calc(0.35 * var(--lg-k, 1))) 62%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-14deg);
    animation: lgSweep 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes lgSweep {
    from { left: -45%; }
    to { left: 120%; }
}
.lg-flare-on {
    box-shadow: inset 0 0 36px 6px rgba(140, 200, 255, 0.55), inset 0 0 140px 30px rgba(10, 142, 255, 0.2);
    animation: lgGlow 1.1s ease-in-out both;
}
@keyframes lgGlow {
    0% { opacity: 0; }
    25% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}