/* ==========================================================================
   Digital Ascension Group — UI Glow-up
   A non-destructive premium styling layer for the DAG Wealth onboarding platform.
   Loaded LAST in _Layout.cshtml / _OnboardingLayout.cshtml so it sits on top of
   Bootstrap 5.3 + site.css. No markup or behavior is required to change; this
   restyles existing Bootstrap component classes and retargets --bs-* tokens.

   Direction: elevated luxury fintech (Sandbox Wealth / Mercury / Nexo-grade) on
   the canonical DAG palette — ivory canvas, warm-charcoal ink, gold highlight.
   Pairs with the Syndicately glow-up approach but in DAG brand colours.
   Motion: restrained — reserved for direct interaction, not page load.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typefaces — institutional serif for headlines (Spectral), a clean grotesque
   for body (Inter), and a mono for financial figures (Roboto Mono). SELF-HOSTED
   from /wwwroot/fonts (no external request, GDPR-safe, faster first paint). Only
   the latin subset loads by default; latin-ext loads on demand for accented
   names via unicode-range. display:swap so text never blanks on first paint.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/spectral-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/spectral-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/spectral-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/spectral-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-mono-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/roboto-mono-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/roboto-mono-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------------
   1. Design tokens — DAG canonical palette
   (333232 primary · ba9965 highlight · d1b88d accent · f5ede8 surface ·
    fbf5f2 background · 535152 graphite · 7a7877 mid-grey · ddd5cd stone ·
    eae1d9 warm-grey · a49b94 taupe)
   -------------------------------------------------------------------------- */
:root {
    /* Brand gold ramp — --dag-gold/--dag-btn aligned to DAG Style Guide --highlight #B38746 */
    --dag-gold: #B38746;
    --dag-gold-rgb: 179, 135, 70;
    --dag-warm-accent: #D18075;     /* Style Guide --warm-accent (dusty terracotta) */
    --dag-gold-600: #ae905c;
    --dag-gold-700: #977b4a;
    --dag-gold-800: #6f5a38;
    --dag-gold-link: #85693c;       /* AA-safe gold for TEXT/links (>=4.5:1 on white & ivory); decorative gold stays --dag-gold-700 */
    --dag-gold-soft: #d1b88d;       /* accent / tints */
    --dag-gold-050: #faf6ef;
    --dag-gold-100: #f1e7d6;
    --dag-btn: #B38746;             /* button gold — Style Guide --highlight */
    --dag-btn-ink: #3A3A3A;         /* graphite text on gold (Style Guide --graphite) — AA-safe vs white */
    --dag-btn-hover: #9c7539;       /* deeper highlight for hover */
    /* Secondary (Back / Cancel / Stay Here) — a charcoal that stays dark in BOTH
       themes. Must NOT be --dag-ink: that flips to cream in dark mode, which is what
       made these buttons render cream-text-on-cream (invisible) in the dark theme. */
    --dag-btn-secondary-bg: #333232;
    --dag-btn-secondary-fg: #f5efe6;

    /* Ink + text — aligned to DAG Style Guide palette */
    --dag-ink: #111111;            /* headings / primary — Style Guide --ink */
    --dag-graphite: #3A3A3A;       /* Style Guide --graphite */
    --dag-text: #3A3A3A;          /* body — Style Guide --graphite */
    --dag-muted: #6a6660;          /* muted — darkened from --mid-grey #888 to clear WCAG AA on surface */
    --dag-faint: #8A8278;          /* faint — Style Guide --taupe */

    /* Surfaces + lines — aligned to LLC (dagforms) light mode: warm-ivory cards
       on a warmer page, with solid defined borders (not faint alpha). */
    --dag-canvas: #FAF7F5;         /* page background — Style Guide --background */
    --dag-canvas-2: #F5F1EA;       /* surface — Style Guide --surface */
    --dag-surface: #F5F1EA;        /* cards — Style Guide --surface */
    --dag-surface-2: #faf6f2;
    --dag-warm: #E6E1D9;           /* warm grey — Style Guide --warm-grey */
    --dag-stone: #CFCAC1;          /* stone — Style Guide --stone */
    --dag-border: #CFCAC1;         /* solid stone border — Style Guide --stone */
    --dag-border-strong: #b9b2a6;  /* slightly deeper stone for strong borders */
    --dag-hairline: rgba(186, 153, 101, .28);  /* gold hairline accent */

    /* Typography */
    --dag-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --dag-font-display: "Spectral", Georgia, "Times New Roman", serif;
    --dag-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Warm, layered shadows */
    --dag-shadow-xs: 0 1px 2px rgba(51, 41, 31, .05);
    --dag-shadow-sm: 0 1px 2px rgba(51, 41, 31, .04), 0 2px 6px rgba(51, 41, 31, .05);
    --dag-shadow-md: 0 2px 4px rgba(51, 41, 31, .04), 0 10px 26px rgba(51, 41, 31, .08);
    --dag-shadow-lg: 0 8px 20px rgba(51, 41, 31, .08), 0 26px 52px rgba(51, 41, 31, .13);
    --dag-shadow-gold: 0 4px 14px rgba(var(--dag-gold-rgb), .28);

    /* Radii — DAG Style Guide specifies SQUARE corners on cards + buttons, so the
       structural radii are zeroed. --dag-r-pill is kept for genuinely pill-shaped
       elements (status pills, progress tracks) which are not "cards". */
    --dag-r-sm: 0;
    --dag-r: 0;
    --dag-r-lg: 0;
    --dag-r-pill: 999px;

    /* Motion — a small shared vocabulary so every transition feels of-a-piece.
       enter = decelerate (things arriving); emphasized = a touch of overshoot for
       primary moments; standard = the workhorse. Durations on a 120/200/320 ramp. */
    --dag-ease: cubic-bezier(.4, 0, .2, 1);          /* standard */
    --dag-ease-out: cubic-bezier(.16, 1, .3, 1);     /* legacy alias (= enter) */
    --dag-ease-enter: cubic-bezier(.16, 1, .3, 1);   /* decelerate on arrival */
    --dag-ease-emphasized: cubic-bezier(.2, 0, 0, 1);/* pronounced settle */
    --dag-dur-fast: .12s;
    --dag-dur: .2s;
    --dag-dur-slow: .32s;

    /* Spacing scale — 8px base, ~25% steps. Used for section rhythm. */
    --dag-space-1: 4px;
    --dag-space-2: 8px;
    --dag-space-3: 12px;
    --dag-space-4: 16px;
    --dag-space-5: 24px;
    --dag-space-6: 32px;
    --dag-space-7: 48px;
    --dag-space-8: 64px;

    /* Shimmer (overridden in dark) */
    --dag-shimmer: rgba(255, 255, 255, .6);

    /* Retarget Bootstrap so text-primary / bg-primary / btn-primary / links inherit
       the brand gold without touching markup. */
    --bs-primary: var(--dag-gold);
    --bs-primary-rgb: var(--dag-gold-rgb);
    --bs-link-color: var(--dag-gold-link);
    --bs-link-color-rgb: 133, 105, 60;
    --bs-link-hover-color: var(--dag-gold-800);
    --bs-secondary-color: var(--dag-muted);
    --bs-body-font-family: var(--dag-font);
    --bs-body-color: var(--dag-text);
    --bs-emphasis-color: var(--dag-ink);
    --bs-border-color: var(--dag-border);
    --bs-body-bg: var(--dag-canvas);
    /* .bg-body utilities read --bs-body-bg-RGB, not --bs-body-bg — without this they
       fall back to Bootstrap's cool default (e.g. the Organizations "Advisors" header
       rendered cool-navy in dark mode). Keep it in sync with --dag-canvas. */
    --bs-body-bg-rgb: 251, 245, 242;

    /* Override site.css blue focus ring with a gold one */
    --dwp-focus-inner: #ffffff;
    --dwp-focus-outer: rgba(var(--dag-gold-rgb), .55);
    --dwp-link-color: var(--dag-gold-link);

    /* (Legacy-blue holdouts — focus ring + link above; pipeline stepper,
       active-step icons and selected-card tint are already repointed to gold in
       §11 and the selected-card rule. The last navy holdout, the advisor mobile
       sidebar toggle, is handled in §20.) */

    /* Looser body leading reads calmer / more premium (Bootstrap default 1.5). */
    --bs-body-line-height: 1.6;

    /* Hairline card edge (Linear-style). Light: a soft top highlight catching
       light from above. Dark value set in the dark block. */
    --dag-card-edge: inset 0 1px 0 rgba(255, 255, 255, .7);

    /* Deliberate modular type scale (~1.2 ratio, 1rem base) — used by large
       headings; kept within ~5% of Bootstrap to avoid disrupting dense views. */
    --dag-text-sm:  .833rem;
    --dag-text-lg:  1.2rem;
    --dag-text-xl:  1.44rem;
    --dag-text-2xl: 1.728rem;
    --dag-text-3xl: 2.074rem;
    --dag-text-4xl: 2.488rem;
}

/* Dark theme tokens — warm charcoal canvas, brighter gold so accents read */
[data-bs-theme="dark"] {
    --dag-gold: #cdb083;
    --dag-gold-rgb: 205, 176, 131;
    --dag-gold-700: #d8be95;
    --dag-gold-800: #e6d3b3;
    --dag-btn: #bd9b66;
    --dag-btn-ink: #29241c;
    --dag-btn-hover: #cdb083;
    /* Elevated charcoal so the secondary button reads clearly above dark cards (#2b2a28) */
    --dag-btn-secondary-bg: #3c3a37;

    --dag-ink: #f3ede4;
    --dag-text: #c9c2b8;
    --dag-muted: #9b948a;
    --dag-faint: #837c73;

    --dag-canvas: #201f1e;         /* warm near-black */
    --dag-canvas-2: #262524;
    --dag-surface: #2b2a28;        /* cards */
    --dag-surface-2: #322f2c;
    --dag-warm: #34322f;
    --dag-stone: #3c3935;
    --dag-border: rgba(231, 221, 205, .11);
    --dag-border-strong: rgba(231, 221, 205, .18);
    --dag-hairline: rgba(205, 176, 131, .34);

    --dag-shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
    --dag-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .32);
    --dag-shadow-md: 0 2px 4px rgba(0, 0, 0, .30), 0 12px 28px rgba(0, 0, 0, .42);
    --dag-shadow-lg: 0 10px 24px rgba(0, 0, 0, .40), 0 28px 56px rgba(0, 0, 0, .55);
    --dag-shimmer: rgba(231, 221, 205, .10);

    --dag-gold-link: #d8be95;       /* dark mode: light gold already clears AA on dark surfaces */
    --bs-link-color: var(--dag-gold-link);
    --bs-link-hover-color: var(--dag-gold-soft);
    --bs-body-bg: var(--dag-canvas);
    --bs-body-bg-rgb: 32, 31, 30;

    --dwp-focus-inner: #2b2a28;
    /* Dark cards gain definition from a faint inset light edge (Linear-style),
       not a top highlight. */
    --dag-card-edge: inset 0 0 0 1px rgba(231, 221, 205, .05);
}

/* Kill transitions during a theme swap so colours snap cleanly (no half-animated
   element mid-flight). JS adds .dag-theme-switching for two frames. */
.dag-theme-switching * { transition: none !important; }

/* --------------------------------------------------------------------------
   2. Global canvas + typography
   -------------------------------------------------------------------------- */
body {
    background-color: var(--dag-canvas);
    background-image:
        radial-gradient(1100px 560px at 100% -10%, rgba(var(--dag-gold-rgb), .10), transparent 60%),
        radial-gradient(820px 460px at -8% 0%, rgba(209, 184, 141, .10), transparent 55%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: var(--dag-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--dag-text);
}

/* Faint architectural grain — a single SVG-noise layer textures the ivory canvas
   so it reads as paper, not flat white. Sits below content, never intercepts. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] body::after { opacity: .35; }
/* The grain sits at z-index:-1 — behind normal-flow content but above the body's
   own background — so page content no longer needs a z-index to clear it. Body
   children keep position:relative (for descendant positioning) but must NOT take a
   z-index: a stacking context on <main>/<header> here would cap Bootstrap modals
   below the body-level .modal-backdrop (z 1050), rendering them behind their own
   overlay (the "frozen modal" bug), and would let the footer paint over content.
   The navbar is not positioned, so its dropdowns (z 1000) already out-stack the
   in-flow page; no header lift is required. */
body > * { position: relative; }

/* Headlines — institutional serif, tight and confident */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .modal-title, .form-title {
    font-family: var(--dag-font-display);
    color: var(--dag-ink);
    letter-spacing: -.01em;
    font-weight: 600;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--dag-font-display);
    letter-spacing: -.02em;
    color: var(--dag-ink);
}
/* Deliberate scale on the large headings (h1–h4): the bigger the type, the
   tighter the tracking and leading — the hallmark of considered typesetting.
   h5/h6 stay at Bootstrap sizes (used densely in cards/forms) to avoid churn. */
h1, .h1 { font-size: var(--dag-text-4xl); line-height: 1.1;  letter-spacing: -.022em; }
h2, .h2 { font-size: var(--dag-text-3xl); line-height: 1.14; letter-spacing: -.02em; }
h3, .h3 { font-size: var(--dag-text-2xl); line-height: 1.18; letter-spacing: -.018em; }
h4, .h4 { font-size: var(--dag-text-xl);  line-height: 1.22; letter-spacing: -.014em; }

/* Financial figures — tabular mono so columns of money line up and never jitter */
.dag-figure, .dag-amount, [data-dag-figure],
.summary-sensitive-display-input {
    font-family: var(--dag-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    white-space: nowrap;   /* never break a currency figure mid-number */
}
/* Accountant-grade numerals everywhere figures live — fixed-width lining digits
   so any column of numbers aligns and totals scan cleanly. Only affects digits. */
.table, .dag-meta dd, .badge, .dag-hero__stat-num, .dag-snapshot__total,
.dag-snapshot__val, .right-align, .display-labels + span, .dag-tnum {
    font-variant-numeric: tabular-nums lining-nums;
}

a { text-underline-offset: .18em; }
::selection { background: rgba(var(--dag-gold-rgb), .26); }

/* --------------------------------------------------------------------------
   3. Navbar — theme-aware luxury bar. Cream in light mode (dark DAG mark),
   charcoal in dark mode (light DAG mark). A hairline gold border anchors it.
   The nav element previously hard-set data-bs-theme="dark"; we override the
   text-white utilities so links read correctly in both themes.
   -------------------------------------------------------------------------- */
.dwp-navbar.navbar {
    background-color: var(--dag-canvas-2) !important;
    border-bottom: 1px solid var(--dag-border);
    box-shadow: var(--dag-shadow-sm);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    position: relative;
    z-index: 1040;
}
/* During onboarding the command-palette (search) exposes tools that aren't useful
   to a client mid-form, so hide it on those pages only (body.dag-onboarding set by
   _Layout for the OnBoarding controller). The mobile nav trigger stays — it opens
   the global sidebar, which is now present on every page. */
body.dag-onboarding #commandPaletteToggle { display: none !important; }
/* gold hairline accent flush under the bar */
.dwp-navbar.navbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dag-hairline) 18%, var(--dag-hairline) 82%, transparent);
}
[data-bs-theme="dark"] .dwp-navbar.navbar {
    background-color: #1c1b1a !important;
    border-bottom-color: rgba(231, 221, 205, .08);
}

/* Make every navbar text token theme-aware (beats Bootstrap's .text-white) */
.dwp-navbar .nav-link,
.dwp-navbar .navbar-brand,
.dwp-navbar .btn-link,
.dwp-navbar .nav-link.text-white,
.dwp-navbar .navbar-nav .nav-link {
    color: var(--dag-text) !important;
    font-weight: 500;
    transition: color var(--dag-dur) var(--dag-ease);
}
.dwp-navbar .nav-link:hover,
.dwp-navbar .nav-link:focus,
.dwp-navbar .btn-link:hover {
    color: var(--dag-ink) !important;
}
.dwp-navbar .nav-link.dropdown-toggle::after { opacity: .55; }

/* Logo swap by theme. Markup carries both marks; CSS shows the right one.
   Height-based so the DAG Wealth wordmark scales cleanly regardless of ratio. */
.dwp-navbar-logo { height: 42px; width: auto; max-width: 210px; transition: opacity var(--dag-dur) var(--dag-ease); }
@media (max-width: 575.98px) { .dwp-navbar-logo { height: 36px; } }
.dag-logo--for-dark { display: none; }
[data-bs-theme="dark"] .dag-logo--for-light { display: none; }
[data-bs-theme="dark"] .dag-logo--for-dark { display: inline-block; }

/* Quick-action buttons (theme toggle + hide balances). Always visible (they live
   outside the collapse), so they work on mobile. Icon-only round affordance on
   phones; on >=sm they expand into labelled "boxes" so their purpose is obvious. */
.dag-navbar-actions { flex-wrap: nowrap; }
.dag-iconbtn {
    -webkit-appearance: none; appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 40px; height: 40px;        /* phone: square icon button */
    padding: 0;
    border-radius: var(--dag-r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--dag-muted);
    font-family: var(--dag-font);
    font-size: .85rem; font-weight: 600; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background var(--dag-dur) var(--dag-ease), color var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease);
}
.dag-iconbtn i { font-size: 1rem; line-height: 1; }
.dag-iconbtn__label { display: none; }
.dag-iconbtn:hover {
    background: rgba(var(--dag-gold-rgb), .14);
    border-color: var(--dag-hairline);
    color: var(--dag-ink);
}
.dag-iconbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .12rem var(--dwp-focus-inner), 0 0 0 .26rem var(--dwp-focus-outer);
}
.dag-iconbtn[aria-pressed="true"] {
    background: rgba(var(--dag-gold-rgb), .18);
    color: var(--dag-gold-700);
    border-color: var(--dag-hairline);
}
/* >=sm: become a labelled pill — subtle by default (no white fill), gold on
   interaction. Reads as a quiet control that blends into the warm bar. */
@media (min-width: 576px) {
    .dag-iconbtn {
        width: auto; height: 36px;
        padding: 0 .72rem;
        border-radius: var(--dag-r-pill);
        border-color: var(--dag-border);
        background: transparent;
        color: var(--dag-muted);
        box-shadow: none;
    }
    .dag-iconbtn__label { display: inline; }
    .dag-iconbtn:hover { background: rgba(var(--dag-gold-rgb), .10); border-color: var(--dag-hairline); color: var(--dag-ink); }
    .dag-iconbtn[aria-pressed="true"] { background: rgba(var(--dag-gold-rgb), .13); border-color: var(--dag-hairline); color: var(--dag-gold-800); }
}
/* Ghost variant (command palette + density + theme) — borderless until hovered */
.dag-iconbtn--ghost { border-color: transparent; }
.dag-iconbtn--ghost:hover { border-color: var(--dag-hairline); }
/* Icon-only variant — a tight square at every breakpoint (no label, no pill). */
.dag-iconbtn--icon { width: 38px; padding: 0; }
@media (min-width: 576px) { .dag-iconbtn--icon { width: 36px; height: 36px; padding: 0; } }
/* Thin vertical divider separating the quick actions from the profile menu. */
.dag-navbar-divider { width: 1px; height: 22px; background: var(--dag-border-strong); margin: 0 .35rem; flex: 0 0 auto; align-self: center; }
/* ⌘K hint chips inside the command-palette button */
.dag-kbd { display: inline-flex; gap: 2px; }
.dag-kbd kbd, .dag-cmdk__foot kbd {
    font-family: var(--dag-font); font-size: .68rem; font-weight: 600; line-height: 1;
    padding: .15em .4em; border-radius: 5px;
    background: rgba(var(--dag-gold-rgb), .12); color: var(--dag-gold-800);
    border: 1px solid var(--dag-border); box-shadow: none;
}
/* Profile control sits in the same cluster — keep it quiet too.
   Zero vertical padding so the link height matches the 36px icon buttons and
   the name text aligns on the same centre line as the rest of the action cluster. */
/* The profile menu's wrapper is a block, so the inline-flex link sits on the line
   baseline (descender gap) and renders ~4px higher than the sibling icon buttons.
   Making the wrapper a flex box centers the link to the same line as the buttons. */
.dwp-navbar .dag-navbar-actions .nav-item.dropdown { display: flex; align-items: center; }
.dwp-navbar .dag-profile-link { display: inline-flex; align-items: center; padding: 0 .5rem 0 .25rem; }
.dwp-navbar .dag-profile-link .fa-circle-user { color: var(--dag-muted); }

/* Profile avatar fallback + chevrons inherit the warm ink */
.dwp-navbar .fa-circle-user { color: var(--dag-muted); }
.dwp-navbar .navbar-toggler { border-color: var(--dag-border-strong); }

/* --------------------------------------------------------------------------
   3b. Left sidebar — global primary navigation, modelled on the DAG Wealth dashboard
   app: a quiet warm rail with uppercase-quiet labels, a gold left-bar + tint on
   the active item, and a collapsible Advisor group. Bootstrap's responsive
   offcanvas (.offcanvas-md) gives us a static rail at >=md and a slide-in drawer
   below md from the same markup. Colours come from the DAG --dag-* tokens.
   -------------------------------------------------------------------------- */
.dag-shell { align-items: stretch; }
.dag-main { min-width: 0; }   /* let flex content shrink instead of overflowing the rail */

.dag-sidebar {
    --bs-offcanvas-width: 280px;
    background-color: var(--dag-canvas-2);
}
.dag-sidebar__body { padding: var(--dag-space-4) var(--dag-space-3); }
.dag-sidebar__label {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dag-faint);
}

@media (min-width: 768px) {
    /* Bootstrap's .offcanvas-md resets the panel at >=md: it forces the body to
       display:flex (row), zeroes padding, and sets background:transparent !important.
       Re-assert the rail with matching/!important specificity (.dag-sidebar.offcanvas-md)
       so items stack, padding returns, and the warm background + border show. */
    .dag-sidebar.offcanvas-md {
        flex: 0 0 248px;
        width: 248px;
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        background-color: var(--dag-canvas-2) !important;
        border-right: 1px solid var(--dag-border);
    }
    .dag-sidebar.offcanvas-md .offcanvas-body {
        flex-direction: column;
        padding: var(--dag-space-4) var(--dag-space-3);
        overflow-y: visible;
    }
    [data-bs-theme="dark"] .dag-sidebar.offcanvas-md { background-color: #1c1b1a !important; }
}

/* Nav item — flat, quiet by default; the gold bar + tint mark the active route. */
.dag-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .8rem;
    margin-bottom: 2px;
    border: 0;
    border-radius: var(--dag-r-sm);
    background: transparent;
    color: var(--dag-text);
    font-family: var(--dag-font);
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background var(--dag-dur) var(--dag-ease), color var(--dag-dur) var(--dag-ease);
}
.dag-sidebar__link:hover,
.dag-sidebar__link:focus-visible {
    background: rgba(var(--dag-gold-rgb), .08);
    color: var(--dag-ink);
    outline: none;
}
.dag-sidebar__icon { width: 1.1rem; text-align: center; color: var(--dag-muted); flex: 0 0 auto; }
.dag-sidebar__text { flex: 1 1 auto; min-width: 0; }
.dag-sidebar__ext { font-size: .7rem; color: var(--dag-faint); flex: 0 0 auto; }
.dag-sidebar__link:hover .dag-sidebar__icon { color: var(--dag-gold-700); }

/* Active-route indicator: gold left-bar + warm tint + gold text. */
.dag-sidebar__bar {
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 3px;
    background: var(--dag-gold);
    opacity: 0;
}
.dag-sidebar__link--active {
    background: rgba(var(--dag-gold-rgb), .12);
    color: var(--dag-gold-800);
    font-weight: 600;
}
.dag-sidebar__link--active .dag-sidebar__icon { color: var(--dag-gold-700); }
.dag-sidebar__link--active .dag-sidebar__bar { opacity: 1; }

/* Collapsible Advisor group. */
.dag-sidebar__chevron {
    margin-left: auto; font-size: .7rem; color: var(--dag-faint);
    transition: transform var(--dag-dur) var(--dag-ease);
}
.dag-sidebar__group-toggle[aria-expanded="true"] .dag-sidebar__chevron { transform: rotate(180deg); }
.dag-sidebar__sublink { padding-left: 1.7rem; font-size: .86rem; }
.dag-sidebar__sublink .dag-sidebar__icon { font-size: .85rem; }

.dag-sidebar__sep {
    border: 0;
    border-top: 1px solid var(--dag-border);
    opacity: 1;
    margin: var(--dag-space-3) var(--dag-space-2);
}

[data-bs-theme="dark"] .dag-sidebar { background-color: #1c1b1a; }
[data-bs-theme="dark"] .dag-sidebar__link--active { color: var(--dag-gold-soft); }

/* --------------------------------------------------------------------------
   4. Cards — warm paper surfaces, hairline border, layered shadow, soft lift
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--dag-surface);
    border: 1px solid var(--dag-border);
    border-radius: var(--dag-r-lg);
    box-shadow: var(--dag-shadow-sm), var(--dag-card-edge);
    transition: box-shadow var(--dag-dur) var(--dag-ease), transform var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease);
}
.card.shadow-sm { box-shadow: var(--dag-shadow-sm), var(--dag-card-edge) !important; }
.card.shadow, .card.shadow-lg { box-shadow: var(--dag-shadow-md), var(--dag-card-edge) !important; }

/* Nested cards (the dashboard uses card-in-card) get a flatter, warmer fill so
   the hierarchy reads — outer = elevated, inner = recessed. */
.card .card {
    box-shadow: none;
    background-color: var(--dag-surface-2);
}
/* Onboarding wizard cards clip their footer background at rounded corners */
.card.theme-wizard { overflow: hidden; }

/* Interactive cards (client tiles, resource folders) lift on hover */
.card.h-100:hover,
.resource-folder-card:hover {
    box-shadow: var(--dag-shadow-md);
    transform: translateY(-2px);
    border-color: var(--dag-hairline);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--dag-border);
    font-family: var(--dag-font-display);
    color: var(--dag-ink);
}
.card-title { font-weight: 600; }
.card-subtitle, .text-body-secondary, .display-labels { color: var(--dag-muted) !important; }

/* Selected cards — gold ring instead of the stock blue, with a weighted left
   edge as the accent. A thicker border-left tapers into the rounded corners
   (no floating square-ended bar), so it reads as an intentional gold spine. */
.selected-account-card,
.selected-resource-card {
    border: 1.5px solid var(--dag-gold) !important;
    border-left-width: 4px !important;
    background-color: rgba(var(--dag-gold-rgb), .08) !important;
    box-shadow: 0 0 0 3px rgba(var(--dag-gold-rgb), .12);
}

/* --------------------------------------------------------------------------
   5. Buttons — gold primary (DAG fairing), refined outlines, restrained lift
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--dag-r-sm);
    font-weight: 600;
    letter-spacing: .005em;
    transition: background var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease), color var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease), transform var(--dag-dur) var(--dag-ease);
}
.btn:active { transform: none; }

/* Flat solid-fill buttons per the DAG Style Guide (no gradient, no bevel). */
.btn-primary {
    background: var(--dag-btn);
    border-color: var(--dag-btn);
    color: var(--dag-btn-ink);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--dag-btn-hover);
    border-color: var(--dag-btn-hover);
    color: var(--dag-btn-ink);
}
.btn-primary:active { background: var(--dag-btn-hover); }

.btn-outline-primary {
    color: var(--dag-gold-link);
    background: rgba(var(--dag-gold-rgb), .06);
    border-color: rgba(var(--dag-gold-rgb), .45);
    box-shadow: var(--dag-card-edge);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: rgba(var(--dag-gold-rgb), .14);
    border-color: var(--dag-gold);
    color: var(--dag-gold-800);
}

.btn-secondary {
    background: var(--dag-btn-secondary-bg);
    border-color: var(--dag-btn-secondary-bg);
    color: var(--dag-btn-secondary-fg);
}
.btn-secondary:hover { background: #444241; border-color: #444241; color: #fff; }

.btn-outline-secondary {
    color: var(--dag-text);
    border-color: var(--dag-border-strong);
    background: linear-gradient(180deg, var(--dag-surface), var(--dag-canvas-2));
    box-shadow: var(--dag-card-edge);
}
.btn-outline-secondary:hover {
    background: var(--dag-canvas-2);
    border-color: var(--dag-muted);
    color: var(--dag-ink);
}

.btn-link { color: var(--dag-gold-link); }
.btn-link:hover { color: var(--dag-gold-800); }

/* Bootstrap green/red keep their meaning but warm slightly toward the palette */
.btn-success { background: #4f7d5a; border-color: #4f7d5a; }
.btn-success:hover { background: #436b4d; border-color: #436b4d; }
.btn-danger { background: #b4524b; border-color: #b4524b; }
.btn-danger:hover { background: #9d453f; border-color: #9d453f; }
.btn-warning {
    --bs-btn-color: var(--dag-btn-ink); --bs-btn-bg: var(--dag-btn); --bs-btn-border-color: var(--dag-btn-hover);
    --bs-btn-hover-color: var(--dag-btn-ink); --bs-btn-hover-bg: var(--dag-btn-hover); --bs-btn-hover-border-color: var(--dag-gold-700);
    --bs-btn-active-color: var(--dag-btn-ink); --bs-btn-active-bg: var(--dag-btn-hover); --bs-btn-active-border-color: var(--dag-gold-700);
    --bs-btn-focus-shadow-rgb: var(--dag-gold-rgb);
    background: var(--dag-btn);
    border-color: var(--dag-btn); color: var(--dag-btn-ink);
    box-shadow: none;
}
.btn-warning:hover, .btn-warning:focus { background: var(--dag-btn-hover); border-color: var(--dag-btn-hover); color: var(--dag-btn-ink); }
.btn-warning:active { background: var(--dag-btn-hover); border-color: var(--dag-gold-700); color: var(--dag-btn-ink); }
.text-warning { color: var(--dag-gold-link) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--dag-gold-700) !important; }

/* --------------------------------------------------------------------------
   6. Badges / chips — soft pill, status-tinted
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--dag-r-pill);
    padding: .38em .7em;
}
/* Tasteful, muted status palette — each state reads distinctly without shouting.
   primary=gold (Initiated) · info=slate (Requested/Pending) · success=green (Active/
   Completed) · warning=amber (Awaiting) · danger=clay (Rejected/Closed). */
.badge.bg-primary   { background: rgba(var(--dag-gold-rgb), .16) !important; color: var(--dag-gold-800) !important; }
.badge.bg-info      { background: rgba(82, 103, 140, .15) !important;  color: #4c6184 !important; }
.badge.bg-success   { background: rgba(70, 122, 84, .15) !important;   color: #3c6a48 !important; }
.badge.bg-warning   { background: rgba(193, 140, 47, .18) !important;  color: #8a611a !important; }
.badge.bg-danger    { background: rgba(180, 82, 75, .15) !important;   color: #9d453f !important; }
.badge.bg-secondary { background: rgba(51, 50, 50, .10) !important;    color: var(--dag-ink) !important; }
/* A small leading dot turns status pills into tidy status chips. Scoped to where
   statuses actually live (table cells + request/detail subtitles) so numeric
   count pills in tabs/notifications are untouched. */
.table td .badge:not(.rounded-pill)::before,
.card-subtitle .badge:not(.rounded-pill)::before,
.card-body .badge:not(.rounded-pill):not(:has(i))::before {   /* search/KYC status chips (skip icon'd flag badges) */
    content: ""; display: inline-block; width: .42em; height: .42em;
    border-radius: 50%; margin-right: .45em; vertical-align: middle;
    background: currentColor; opacity: .85;
}
[data-bs-theme="dark"] .badge.bg-primary { color: var(--dag-gold-700) !important; }
[data-bs-theme="dark"] .badge.bg-info    { color: #a9bce0 !important; }
[data-bs-theme="dark"] .badge.bg-success { color: #9ccfa8 !important; }
[data-bs-theme="dark"] .badge.bg-warning { color: #e3c07a !important; }
[data-bs-theme="dark"] .badge.bg-danger  { color: #e8a59f !important; }

.dag-env-badge {
    display: inline-flex;
    align-items: center;
    background: #fbbf24;
    color: #111111;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: .25rem;
    padding: .25rem .5rem;
}

/* Info banner (alert-info) — retuned from default Bootstrap blue to an on-brand
   warm/gold neutral so informational callouts read as part of the DAG palette
   rather than a stock blue (or LLC's rejected purple). Badge info stays slate. */
.alert-info {
    background: #f5efe2;
    border-color: var(--dag-hairline);
    color: var(--dag-ink);
}
.alert-info .alert-link { color: var(--dag-gold-link); }
.alert-info > .fa, .alert-info > .fas, .alert-info > svg { color: var(--dag-gold); }
[data-bs-theme="dark"] .alert-info {
    background: var(--dag-warm);
    border-color: var(--dag-hairline);
    color: var(--dag-ink);
}

/* --------------------------------------------------------------------------
   7. Tables — refined header, hairline rows, warm hover, tabular figures
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    color: var(--dag-text);
}
.table > thead th,
.table > thead td {
    font-family: var(--dag-font);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dag-muted);
    border-bottom: 1px solid var(--dag-border-strong);
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.table > tbody > tr { border-color: var(--dag-border); }
.table > tbody > tr > td { padding-top: .8rem; padding-bottom: .8rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(var(--dag-gold-rgb), .07);
    color: var(--dag-ink);
}
/* money-ish cells (last column / right-aligned numbers) ride the mono face */
.table td.right-align, .table th.right-align { font-family: var(--dag-font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. Nav-tabs — underline indicator in gold (replaces the boxed default)
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--dag-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--dag-muted);
    font-weight: 600;
    border-radius: 0;
    padding: .6rem .9rem;
    transition: color var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease), background var(--dag-dur) var(--dag-ease);
}
.nav-tabs .nav-link:hover {
    color: var(--dag-ink);
    background: rgba(var(--dag-gold-rgb), .06);
    border-bottom-color: var(--dag-hairline);
}
.nav-tabs .nav-link.active {
    color: var(--dag-ink);
    background: transparent;
    border-bottom-color: var(--dag-gold);
}

/* nav-pills (onboarding sidebar) — gold active fill, warm hover */
.nav-pills .nav-link {
    color: var(--dag-text);
    border-radius: var(--dag-r-sm);
    transition: background var(--dag-dur) var(--dag-ease), color var(--dag-dur) var(--dag-ease);
}
.nav-pills .nav-link:hover { background: rgba(var(--dag-gold-rgb), .10); color: var(--dag-ink); }
.nav-pills .nav-link.active,
.form-nav-link.form-nav-current {
    background: rgba(var(--dag-gold-rgb), .16) !important;
    color: var(--dag-gold-800) !important;
    font-weight: 600;
}

/* Onboarding sidebar surface */
.sidebar.bg-body-tertiary { background-color: var(--dag-canvas-2) !important; border-right: 1px solid var(--dag-border); }

/* --------------------------------------------------------------------------
   9. Forms — refined inputs, gold focus ring (replaces site.css blue)
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--dag-border-strong);
    border-radius: var(--dag-r-sm);
    color: var(--dag-ink);
    background-color: var(--dag-surface);
    transition: border-color var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease);
}
.form-control::placeholder { color: var(--dag-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--dag-gold);
    box-shadow: 0 0 0 .2rem rgba(var(--dag-gold-rgb), .22);
}
/* Buttons must not flash a focus ring on click. Bootstrap hardcodes a blue
   --bs-btn-focus-shadow-rgb per variant (it ignores --bs-primary), and site.css
   forces a ring on plain :focus. Repoint that variable to gold, suppress the ring
   on pointer focus entirely, and show a clean gold ring only for keyboard users. */
.btn { --bs-btn-focus-shadow-rgb: var(--dag-gold-rgb); -webkit-tap-highlight-color: transparent; }
/* Repoint Bootstrap's hardcoded per-variant button colour variables to the DAG
   palette. Bootstrap sets --bs-btn-active-bg/-active-border-color/-hover-* per
   variant to fixed blues that ignore --bs-primary; the pressed (:active) state
   was flashing that blue. Pointing every state's variables at gold fixes it for
   hover, active, focus, and disabled in one place. */
.btn-primary {
    --bs-btn-color: var(--dag-btn-ink); --bs-btn-bg: var(--dag-btn); --bs-btn-border-color: var(--dag-btn-hover);
    --bs-btn-hover-color: var(--dag-btn-ink); --bs-btn-hover-bg: var(--dag-btn-hover); --bs-btn-hover-border-color: var(--dag-gold-700);
    --bs-btn-active-color: var(--dag-btn-ink); --bs-btn-active-bg: var(--dag-btn-hover); --bs-btn-active-border-color: var(--dag-gold-700);
    --bs-btn-focus-shadow-rgb: var(--dag-gold-rgb);
    --bs-btn-disabled-color: var(--dag-btn-ink); --bs-btn-disabled-bg: var(--dag-stone); --bs-btn-disabled-border-color: var(--dag-stone);
}
.btn-outline-primary {
    --bs-btn-color: var(--dag-gold-700); --bs-btn-border-color: var(--dag-hairline);
    --bs-btn-hover-color: var(--dag-gold-800); --bs-btn-hover-bg: rgba(var(--dag-gold-rgb), .12); --bs-btn-hover-border-color: var(--dag-gold);
    --bs-btn-active-color: var(--dag-gold-800); --bs-btn-active-bg: rgba(var(--dag-gold-rgb), .16); --bs-btn-active-border-color: var(--dag-gold);
    --bs-btn-focus-shadow-rgb: var(--dag-gold-rgb);
}
.btn-secondary {
    --bs-btn-color: var(--dag-btn-secondary-fg); --bs-btn-bg: var(--dag-btn-secondary-bg); --bs-btn-border-color: var(--dag-btn-secondary-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #444241; --bs-btn-hover-border-color: #444241;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #444241; --bs-btn-active-border-color: #444241;
    --bs-btn-focus-shadow-rgb: 83, 81, 82;
}
.btn-outline-secondary {
    --bs-btn-color: var(--dag-text); --bs-btn-border-color: var(--dag-border-strong);
    --bs-btn-hover-color: var(--dag-ink); --bs-btn-hover-bg: var(--dag-canvas-2); --bs-btn-hover-border-color: var(--dag-muted);
    --bs-btn-active-color: var(--dag-ink); --bs-btn-active-bg: var(--dag-canvas-2); --bs-btn-active-border-color: var(--dag-muted);
    --bs-btn-focus-shadow-rgb: 122, 120, 119;
}
/* --- Flat button finish per the DAG Style Guide: solid fill, square, NO bevel,
   gradient, or raised shadow. Buttons change only their fill on hover/active. */
.btn-primary, .btn-secondary, .btn-success, .btn-danger {
    box-shadow: none;
}
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover {
    box-shadow: none;
}
.btn-primary:active, .btn-secondary:active, .btn-success:active, .btn-danger:active {
    box-shadow: none;
}

.btn:focus, .btn:active, .btn:active:focus { outline: none; }
.btn:focus:not(:focus-visible) { box-shadow: none !important; }
.btn-primary:focus:not(:focus-visible) { box-shadow: var(--dag-shadow-xs) !important; }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .12rem var(--dwp-focus-inner), 0 0 0 .26rem var(--dwp-focus-outer) !important;
}
/* Inputs keep a gold focus ring on any focus (expected + helpful) */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--dag-gold-rgb), .22) !important;
}
.form-check-input:checked { background-color: var(--dag-btn); border-color: var(--dag-btn); }
.form-switch .form-check-input:checked { background-color: var(--dag-btn); border-color: var(--dag-btn); }
/* Fallback: many radios/checkboxes (esp. bare RadioButtonFor in editor templates)
   lack the .form-check-input class, so the rule above misses them and they render
   default browser blue. accent-color tints every native control with the brand gold
   regardless of class, covering those and any future inputs. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--dag-btn); }

/* Symmetric form inset. Onboarding form rows previously used a left-only `col-1`
   spacer (~8.3%), leaving the right edge flush and the row visually off-centre.
   This gives a balanced left+right inset at ~half a column (4.17%) so field rows
   line up evenly inside the card. Replaces per-row `col-1` spacers. Applied as
   margin (not padding) so it doesn't fight Bootstrap's negative `.row` gutters. */
.form-inset { margin-left: 4.17%; margin-right: 4.17%; }
/* The shared Address editor uses .form-inset (4.17%, to pair with the form-inset
   AccountHolder editor). Inside the col-1-based forms (entity/trust) that makes it
   protrude left/right past the surrounding fields; .address-col1 widens the inset to
   ~one column (8.33%) so the address lines up with the col-1 grid. */
.address-col1 .form-inset { margin-left: 8.33%; margin-right: 8.33%; }

.input-group-text { background: var(--dag-canvas-2); border-color: var(--dag-border-strong); color: var(--dag-muted); }
.sensitive-display { background-color: var(--dag-canvas-2) !important; }

/* Links inside body content */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) { color: var(--dag-gold-link); }
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover { color: var(--dag-gold-800); }
.household-link, .list-header-link { color: var(--dag-gold-link) !important; }

/* text-primary / icon accents → gold (text uses the AA-safe gold; icons keep the brighter gold) */
.text-primary { color: var(--dag-gold-link) !important; }
i.text-primary, .fa-circle-user.text-primary { color: var(--dag-gold) !important; }

/* --------------------------------------------------------------------------
   10. Dropdowns / modals / offcanvas — warm surfaces + soft glass
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--dag-border);
    border-radius: var(--dag-r);
    box-shadow: var(--dag-shadow-lg), var(--dag-card-edge);
    background-color: var(--dag-surface);
    padding: .35rem;
}
.dropdown-item { border-radius: var(--dag-r-sm); color: var(--dag-text); padding: .5rem .65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--dag-gold-rgb), .12); color: var(--dag-ink); }
.dropdown-item i { color: var(--dag-muted); }
.dropdown-item:hover i { color: var(--dag-gold-700); }

.modal-content {
    border: 1px solid var(--dag-border);
    border-radius: var(--dag-r-lg);
    box-shadow: var(--dag-shadow-lg);
    background-color: var(--dag-surface);
}
.modal-header, .modal-footer { border-color: var(--dag-border); }
.modal-backdrop.show { background: rgba(33, 31, 30, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.offcanvas { background-color: var(--dag-surface); }

/* Footer */
.footer.border-top { border-color: var(--dag-border) !important; background: transparent; }
.footer a { color: var(--dag-gold-link); }

/* --------------------------------------------------------------------------
   11. Pipeline progress (the multi-step indicator) — gold-on-charcoal
   -------------------------------------------------------------------------- */
:root {
    --dwp-step-completed-bg: var(--dag-ink);
    --dwp-step-completed-label: var(--dag-ink);
    --dwp-step-current-bg: var(--dag-gold);
    --dwp-step-current-label: var(--dag-gold-800);
    --dwp-step-pending-bg: var(--dag-stone);
    --dwp-step-pending-label: var(--dag-muted);
    --dwp-step-connector: var(--dag-border-strong);
    --dwp-step-connector-done: var(--dag-gold);
    --dwp-step-halo: rgba(var(--dag-gold-rgb), .18);
}
[data-bs-theme="dark"] {
    --dwp-step-completed-bg: var(--dag-warm);
    --dwp-step-current-bg: var(--dag-gold);
    --dwp-step-pending-bg: #3c3935;
}

/* Onboarding step icons that use the old blue helper classes */
.onboarding-icon-active { color: var(--dag-gold) !important; }

/* --------------------------------------------------------------------------
   12. "Hide balances" privacy blur. Toggling body.dag-hide-amounts blurs every
   .dag-sensitive figure until hovered. glow-up.js also auto-tags leaf currency
   text so existing balances respond without markup changes.
   -------------------------------------------------------------------------- */
body.dag-hide-amounts .dag-sensitive {
    filter: blur(7px);
    transition: filter .18s var(--dag-ease);
    cursor: default;
    user-select: none;
    border-radius: 4px;
}
body.dag-hide-amounts .dag-sensitive:hover { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
    body.dag-hide-amounts .dag-sensitive { transition: none; }
}

/* --------------------------------------------------------------------------
   12b. Signature hero masthead — a confident opening moment for top-level views.
   A charcoal panel with a warm gold glow sits on the ivory page (Sandbox/Mercury
   move); serif greeting on the left, glassy count-up stat tiles on the right.
   Stat figures should be REAL (derived from the model), never invented.
   -------------------------------------------------------------------------- */
.dag-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
    padding: 1.7rem 1.9rem;
    border-radius: var(--dag-r-lg);
    border: 1px solid rgba(186, 153, 101, .24);
    box-shadow: var(--dag-shadow-lg);
    color: #efe9e0;
    background:
        radial-gradient(640px 300px at 86% -40%, rgba(186, 153, 101, .36), transparent 70%),
        radial-gradient(420px 220px at 10% 130%, rgba(209, 184, 141, .14), transparent 70%),
        linear-gradient(135deg, #2c2b29 0%, #201f1e 58%, #262523 100%);
    isolation: isolate;
}
/* gold hairline along the top edge */
.dag-hero::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(186, 153, 101, .7) 28%, rgba(209, 184, 141, .95) 50%, rgba(186, 153, 101, .7) 72%, transparent);
}
/* one-time light sweep across the masthead on first paint */
.dag-hero::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 235, .10) 48%, transparent 58%);
    transform: translateX(-120%);
    animation: dag-hero-sweep 1.6s var(--dag-ease-out) .25s both;
}
@keyframes dag-hero-sweep { to { transform: translateX(120%); } }

.dag-hero__lead { position: relative; z-index: 1; min-width: 0; }
.dag-hero__eyebrow {
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .66rem; font-weight: 700;
    color: var(--dag-gold-soft);
}
.dag-hero__title {
    font-family: var(--dag-font-display);
    font-weight: 600;
    color: #f6f1e8;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
    margin: .4rem 0 0;
}
.dag-hero__title .dag-hero__accent { color: var(--dag-gold-soft); }
.dag-hero__sub { margin: .55rem 0 0; font-size: .95rem; color: rgba(231, 221, 205, .68); max-width: 56ch; }

.dag-hero__stats {
    position: relative; z-index: 1;
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(231, 221, 205, .14);
    border-radius: var(--dag-r);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
.dag-hero__stat {
    padding: .85rem 1.45rem;
    text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 122px;
}
.dag-hero__stat + .dag-hero__stat { border-left: 1px solid rgba(231, 221, 205, .12); }
.dag-hero__stat-num {
    font-family: var(--dag-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem; font-weight: 600;
    color: #f3ecdf; letter-spacing: -.02em; white-space: nowrap;
}
.dag-hero__stat-num .dag-hero__unit { color: var(--dag-gold-soft); font-size: .95rem; margin-left: .08rem; }
.dag-hero__stat-label {
    text-transform: uppercase; letter-spacing: .1em;
    font-size: .6rem; font-weight: 600;
    color: rgba(231, 221, 205, .58); margin-top: .28rem;
}
/* hero figures honour the privacy blur too */
body.dag-hide-amounts .dag-hero__stat-num.dag-sensitive { filter: blur(8px); }
@media (max-width: 575.98px) {
    .dag-hero { padding: 1.25rem 1.25rem; }
    .dag-hero__stats { width: 100%; }
    .dag-hero__stat { flex: 1; min-width: 0; padding: .7rem .5rem; }
}
@media (prefers-reduced-motion: reduce) { .dag-hero::after { display: none; } }

/* Ambient masthead — a slow warm-gold aurora drifting behind the greeting
   (candlelight through cognac). A JS-injected .dag-hero__aurora layer sits below
   the content (z-index 0) and oversizes itself (-22% inset + blur) so the gentle
   drift never reveals an edge. The blooms are low-opacity gold on the charcoal
   panel, so the effect reads as a living glow, not a gradient. The one-time load
   sweep and top hairline (::after/::before) still play over it. Reduced-motion
   users get the same blooms, held still. */
.dag-hero__aurora {
    position: absolute; inset: -22%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 50% at 24% 20%, rgba(209, 184, 141, .16), transparent 70%),
        radial-gradient(34% 46% at 80% 30%, rgba(186, 153, 101, .22), transparent 72%),
        radial-gradient(42% 54% at 58% 92%, rgba(150, 120, 70, .14), transparent 72%);
    filter: blur(8px);
    will-change: transform, opacity;
    animation: dag-aurora 26s ease-in-out infinite alternate;
}
@keyframes dag-aurora {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: .85; }
    50%  { transform: translate3d(2%, 1.4%, 0) scale(1.06); opacity: 1; }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.03); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .dag-hero__aurora { animation: none; } }

/* --------------------------------------------------------------------------
   13. Dark-mode component corrections
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] body {
    background-image:
        radial-gradient(1100px 560px at 100% -10%, rgba(var(--dag-gold-rgb), .08), transparent 60%),
        radial-gradient(820px 460px at -8% 0%, rgba(205, 176, 131, .06), transparent 55%);
}
[data-bs-theme="dark"] .card { background-color: var(--dag-surface); border-color: var(--dag-border); }
[data-bs-theme="dark"] .card .card { background-color: var(--dag-surface-2); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: var(--dag-canvas-2); color: var(--dag-ink); }
/* Readonly fields in dark mode: restore transparency so they read as display text
   rather than editable inputs — no border or underline. */
[data-bs-theme="dark"] .form-readonly .form-control {
    background-color: transparent !important;
    border: none !important;
    color: var(--dag-ink) !important;
}
[data-bs-theme="dark"] .form-readonly label { color: var(--dag-muted); }

/* Readonly / disabled inputs signal non-editability with the not-allowed cursor
   (browsers do this for :disabled but not for [readonly]). Both themes. */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
textarea[readonly] {
    cursor: not-allowed;
}
[data-bs-theme="dark"] .table { color: var(--dag-text); }
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas { background-color: var(--dag-surface); }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom { border-color: var(--dag-border) !important; }
[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--dag-canvas-2) !important; }

/* --------------------------------------------------------------------------
   14. Motion — gentle entrance for cards, fully reduced-motion safe.
   Applied once on first paint via .dag-enter (added by JS) so SPA-ish reloads
   don't re-trigger. Transform/opacity only (GPU-composited, no layout thrash).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .dag-enter > .card,
    .dag-enter > .container > .card,
    .dag-enter .tab-pane.active > .card {
        animation: dag-rise var(--dag-dur-slow) var(--dag-ease-enter) both;
    }
}
@keyframes dag-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   15. Responsive polish — keep compact cards clean at every width
   Fixes two patterns that get cramped in narrow / 3-across grids:
   (a) button rows whose labels wrapped mid-text into uneven, too-tall buttons;
   (b) "content + side action" cards (dashboard request tiles) that crushed
       their text into a sliver column beside the action button.
   -------------------------------------------------------------------------- */

/* (a) Button labels stay on one line; a row wraps the *whole* button to the next
   line instead of breaking its text — so paired buttons keep equal height. */
.btn { white-space: nowrap; }
.card .card-body .d-flex.gap-1,
.card .card-body .d-flex.gap-2 { flex-wrap: wrap; }

/* (b) Compact content-plus-action cards: inline on wide layouts, stacked once
   the card narrows (covers the 768–991px 3-across range and below) so labels
   always get the full card width. Scoped to exclude header/justify-between rows. */
@media (max-width: 991.98px) {
    .card .card-body.d-flex.align-items-center:not(.justify-content-between):not(.flex-wrap) {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .card .card-body.d-flex.align-items-center:not(.justify-content-between):not(.flex-wrap) > .flex-grow-1 {
        width: 100%;
        min-width: 0;
    }
    .card .card-body.d-flex.align-items-center:not(.justify-content-between):not(.flex-wrap) > .ms-3 {
        margin-left: 0 !important;
        margin-top: .7rem;
    }
}
/* Let flex text columns shrink properly everywhere (prevents overflow wraps) */
.card .card-body .flex-grow-1 { min-width: 0; }

/* Hero: stack the stat strip under the greeting on narrow widths, full-width
   tiles, so it reads as a clean band rather than a squeezed row. */
@media (max-width: 767.98px) {
    .dag-hero { flex-direction: column; align-items: stretch; }
    .dag-hero__stats { width: 100%; }
    .dag-hero__stat { flex: 1; }
}

/* --------------------------------------------------------------------------
   16. Component refinements — section headers, service buttons, link wrapping,
   and a slim hero variant for the onboarding flow.
   -------------------------------------------------------------------------- */

/* Section headers inside cards ("Active Requests" + "View all requests" etc.) —
   a clean flex header with a hairline rule and an animated trailing link, instead
   of a floated link bumping a heading. */
.dag-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    padding-bottom: .7rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--dag-border);
}
.dag-section-head > h1, .dag-section-head > h2, .dag-section-head > h3,
.dag-section-head > h4, .dag-section-head > h5, .dag-section-head > h6 {
    margin: 0;
    font-family: var(--dag-font-display);
    color: var(--dag-ink);
}
.dag-section-head__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--dag-gold-link) !important;
    text-decoration: none;
    white-space: nowrap;
}
.dag-section-head__link:hover { color: var(--dag-gold-800) !important; }
.dag-section-head__link i { font-size: .8em; transition: transform var(--dag-dur) var(--dag-ease); }
.dag-section-head__link:hover i { transform: translateX(3px); }

/* "Linked service" dropdown buttons (Parallel Markets, Anchorage Digital Wealth)
   — lift them out of plain grey into branded, tactile chips that read as portals. */
.dag-service-btn.btn {
    background: linear-gradient(180deg, var(--dag-surface) 0%, var(--dag-canvas-2) 100%);
    border: 1px solid var(--dag-hairline);
    color: var(--dag-ink);
    font-weight: 600;
    box-shadow: var(--dag-shadow-xs);
}
.dag-service-btn.btn:hover,
.dag-service-btn.btn:focus,
.dag-service-btn.btn.show {
    background: rgba(var(--dag-gold-rgb), .12);
    border-color: var(--dag-gold);
    color: var(--dag-ink);
    box-shadow: var(--dag-shadow-sm);
}
.dag-service-btn .dag-service-btn__icon { color: var(--dag-gold-700); }
.dag-service-btn.dropdown-toggle::after { color: var(--dag-gold-700); opacity: .8; }

/* Long emails / links must wrap inside their card instead of overflowing the edge
   (was clipping on mobile in the advisor card + support line). */
.card a[href^="mailto:"],
.client-support-link,
.client-support-link a,
.dag-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
/* …and the flex text column the email sits in must be allowed to shrink below its
   content width, otherwise overflow-wrap has no bound to break against. */
.card-body.d-flex .d-flex.align-items-center > div:last-child,
.card-body.d-flex .d-flex.align-items-center > div:last-child * { min-width: 0; }

/* Slim hero variant — the onboarding masthead. Same charcoal-and-gold panel as the
   dashboard hero but lead-only (no stat tiles), a touch more compact. */
.dag-hero--slim { padding: 1.45rem 1.7rem; align-items: center; }
.dag-hero--slim .dag-hero__title { font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.15rem); }
.dag-hero--slim .dag-hero__sub { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Breathing room, table density, route progress bar, command palette
   -------------------------------------------------------------------------- */

/* Compact request/info cards — a little vertical air between title and meta
   lines (margin/line-height based, so it never breaks the responsive stack). */
.card-body.d-flex.align-items-center { padding: 1rem 1.15rem; }
.card-body.d-flex.align-items-center .card-title { margin-bottom: .35rem; }
.card-body.d-flex.align-items-center .card-subtitle { margin-top: .22rem; line-height: 1.5; color: var(--dag-muted); }
.card-body.d-flex.align-items-center .card-subtitle .badge { margin-top: .12rem; }

/* Label / value meta lists (request + detail cards). A small uppercase bold label
   sits ABOVE its value so the value always gets the card's full width — no more
   mid-phrase wraps against the label in narrow / collapsed tiles. The card-body is
   a size container, so on roomier cards the pair lays out side-by-side instead. */
.card-body:has(.dag-meta) { container-type: inline-size; container-name: dagcard; }
.dag-meta { display: grid; grid-template-columns: 1fr; gap: 0 .7rem; margin: 0; }
.dag-meta dt {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
    color: var(--dag-muted); white-space: nowrap;
}
.dag-meta dd { margin: .05rem 0 .5rem; color: var(--dag-text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dag-meta dd:last-child { margin-bottom: 0; }
@container dagcard (min-width: 260px) {
    .dag-meta { grid-template-columns: auto 1fr; gap: .32rem .7rem; align-items: baseline; }
    .dag-meta dd { margin: 0; }
}

/* Table density toggle — body.dag-compact-tables tightens the big tables. */
body.dag-compact-tables .table { font-size: .92rem; }
body.dag-compact-tables .table > thead th,
body.dag-compact-tables .table > thead td { padding-top: .5rem; padding-bottom: .5rem; }
body.dag-compact-tables .table > tbody > tr > td { padding-top: .35rem; padding-bottom: .35rem; }  /* 5.6px */
body.dag-compact-tables .desktop-account-card .card-body,
body.dag-compact-tables .mobile-account-card .card-body { padding: .55rem .85rem !important; }
body.dag-compact-tables .card-body.d-flex.align-items-center { padding: .6rem .85rem !important; }
body.dag-compact-tables .card-body.d-flex.align-items-center .card-title { margin-bottom: .18rem !important; }

/* Route progress bar — a thin brand bar pinned to the very top of the viewport. */
.dag-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.dag-progress__fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--dag-gold-700), var(--dag-gold), var(--dag-gold-soft));
    box-shadow: 0 0 8px rgba(var(--dag-gold-rgb), .55);
    transition: width .2s var(--dag-ease);
}
.dag-progress--done .dag-progress__fill { transition: width .2s var(--dag-ease), opacity .35s ease .12s; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dag-progress { display: none; } }

/* Command palette (⌘K) ---------------------------------------------------- */
.dag-cmdk {
    position: fixed; inset: 0; z-index: 2050;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(33, 31, 30, .42);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .16s var(--dag-ease);
}
.dag-cmdk.is-open { opacity: 1; }
.dag-cmdk[hidden] { display: none; }
.dag-cmdk__panel {
    width: 100%; max-width: 560px;
    background: var(--dag-surface); border: 1px solid var(--dag-border);
    border-radius: var(--dag-r-lg); box-shadow: var(--dag-shadow-lg); overflow: hidden;
    transform: translateY(-8px) scale(.99); transition: transform .18s var(--dag-ease-out);
}
.dag-cmdk.is-open .dag-cmdk__panel { transform: none; }
.dag-cmdk__input { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--dag-border); }
.dag-cmdk__input i { color: var(--dag-muted); }
.dag-cmdk__input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--dag-font); font-size: 1rem; color: var(--dag-ink); }
.dag-cmdk__input input::placeholder { color: var(--dag-faint); }
.dag-cmdk__list { list-style: none; margin: 0; padding: .4rem; max-height: 48vh; overflow-y: auto; }
.dag-cmdk__item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: var(--dag-r-sm); cursor: pointer; color: var(--dag-text); font-weight: 500; }
.dag-cmdk__item i { width: 1.1rem; text-align: center; color: var(--dag-muted); font-size: .9rem; }
.dag-cmdk__item.is-active { background: rgba(var(--dag-gold-rgb), .14); color: var(--dag-ink); }
.dag-cmdk__item.is-active i { color: var(--dag-gold-700); }
.dag-cmdk__empty { padding: 1.4rem; text-align: center; color: var(--dag-muted); font-size: .9rem; }
.dag-cmdk__foot { display: flex; gap: 1.1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--dag-border); color: var(--dag-muted); font-size: .72rem; }
.dag-cmdk__foot span { display: inline-flex; align-items: center; gap: .35rem; }
@media (prefers-reduced-motion: reduce) { .dag-cmdk, .dag-cmdk__panel { transition: none; } }

/* ==========================================================================
   18. "Wow" batch — skeletons, empty states, button spinner, status timeline,
   wealth snapshot, onboarding-complete celebration.
   ========================================================================== */

/* 18a. Shimmer skeleton loaders ------------------------------------------- */
.dag-skeleton { display: block; position: relative; overflow: hidden; background: var(--dag-canvas-2); border-radius: var(--dag-r-sm); }   /* block so the <span> placeholders honour their height/width (inline ignores both) */
.dag-skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--dag-shimmer), transparent);
    animation: dag-shimmer 1.4s var(--dag-ease) infinite;
}
@keyframes dag-shimmer { 100% { transform: translateX(100%); } }
[data-bs-theme="dark"] .dag-skeleton { background: var(--dag-surface-2); }
.dag-skel { display: block; }
.dag-skel-line { height: .82rem; border-radius: 6px; margin: .55rem 0; }
.dag-skel-block { height: 1.5rem; border-radius: 8px; margin: .55rem 0; }
.dag-skel-circle { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: 0 0 auto; }
.dag-skel-row { display: flex; align-items: center; gap: 1rem; padding: .65rem .1rem; }
.dag-skel-row + .dag-skel-row { border-top: 1px solid var(--dag-border); }
.dag-skel-w40 { width: 40%; } .dag-skel-w55 { width: 55%; } .dag-skel-w70 { width: 70%; } .dag-skel-w90 { width: 90%; }
@media (prefers-reduced-motion: reduce) { .dag-skeleton::after { animation: none; } }

/* 18b. Branded empty states ----------------------------------------------- */
.dag-empty { text-align: center; padding: 2.6rem 1.25rem; color: var(--dag-muted); }
.dag-empty__icon {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(var(--dag-gold-rgb), .12); color: var(--dag-gold-700); font-size: 1.3rem;
}
.dag-empty__title { font-family: var(--dag-font-display); color: var(--dag-ink); font-size: 1.05rem; margin: 0 0 .3rem; }
.dag-empty__text { font-size: .9rem; margin: 0 auto; max-width: 40ch; }

/* 18c. Unified button loading spinner -------------------------------------- */
.dag-btn-loading { position: relative; pointer-events: none; color: transparent !important; }
.dag-btn-loading > * { visibility: hidden; }
.dag-btn-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 1.05em; height: 1.05em; margin: -.52em 0 0 -.52em;
    border: 2px solid var(--dag-btn-ink); border-right-color: transparent; border-radius: 50%;
    visibility: visible; animation: dag-spin .6s linear infinite;
}
.btn-outline-primary.dag-btn-loading::after, .btn-outline-secondary.dag-btn-loading::after,
.btn-link.dag-btn-loading::after { border-color: var(--dag-gold-700); border-right-color: transparent; }
@keyframes dag-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dag-btn-loading::after { animation-duration: 1.4s; } }

/* 18d. Account-opening status timeline ------------------------------------- */
.dag-timeline { display: flex; justify-content: center; margin: .25rem 0 1.4rem; }
.dag-timeline__step { flex: 1; min-width: 0; text-align: center; position: relative; padding-top: 2px; }
.dag-timeline__step:not(:first-child)::before {
    content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 3px;
    background: var(--dag-border-strong); z-index: 0;
}
.dag-timeline__dot {
    position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 auto;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--dag-stone); color: #fff; font-weight: 700; font-size: .78rem;
    border: 3px solid var(--dag-surface);
    transition: background var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease);
}
.dag-timeline__step.is-done .dag-timeline__dot { background: var(--dag-ink); }
[data-bs-theme="dark"] .dag-timeline__step.is-done .dag-timeline__dot { background: var(--dag-warm); color: var(--dag-gold-700); }
.dag-timeline__step.is-done:not(:first-child)::before { background: var(--dag-gold); }
.dag-timeline__step.is-current .dag-timeline__dot { background: var(--dag-gold); box-shadow: 0 0 0 4px rgba(var(--dag-gold-rgb), .18); }
.dag-timeline__label {
    margin-top: .55rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 600; color: var(--dag-muted); line-height: 1.25;
}
.dag-timeline__step.is-done .dag-timeline__label, .dag-timeline__step.is-current .dag-timeline__label { color: var(--dag-ink); }
/* Mobile: 5 equal columns get narrow, so long labels ("ACCREDITATION", "OPEN AT
   ANCHORAGE") collided. Shrink the label, drop the width-padding letter-spacing,
   add a hairline column gutter, and hyphenate so a long single word wraps cleanly
   instead of breaking mid-word or overflowing into its neighbour. */
@media (max-width: 575.98px) {
    .dag-timeline__label {
        font-size: .58rem;
        letter-spacing: 0;
        line-height: 1.15;
        padding: 0 3px;            /* small gutter; break-word (below) handles the
                                      rare too-long word, so the text keeps width */
        overflow-wrap: break-word; /* wrap a long single word rather than overflow
                                      into its neighbour — works everywhere, no
                                      hyphenation dictionary needed */
        hyphens: auto;             /* progressive nicety: real browsers add the hyphen */
        -webkit-hyphens: auto;
    }
}

/* 18e. Wealth snapshot (held-away assets) — dependency-free donut + bars ---- */
.dag-snapshot__viz { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.dag-snapshot__ring {
    position: relative; width: 168px; height: 168px; flex: 0 0 auto;
}
/* The donut is drawn as crisp SVG arcs (no conic-gradient aliasing). */
.dag-snapshot__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dag-snapshot__svg circle { transition: stroke-dasharray .55s var(--dag-ease), stroke-dashoffset .55s var(--dag-ease); }
.dag-snapshot__track { stroke: var(--dag-stone); }
/* white inner hole carves a clean centre over the arcs (text sits on it) */
.dag-snapshot__ring::after { content: ""; position: absolute; inset: 21%; border-radius: 50%; background: var(--dag-surface); }
.dag-snapshot__center { position: absolute; inset: 21%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; text-align: center; padding: 0 .35rem; }
.dag-snapshot__center small { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dag-muted); font-weight: 700; }
.dag-snapshot__total { font-family: var(--dag-font-display); font-weight: 600; font-size: 1.3rem; color: var(--dag-ink); letter-spacing: -.01em; white-space: nowrap; line-height: 1.1; }
.dag-snapshot__legend { flex: 1; min-width: 200px; display: grid; gap: .35rem; }
.dag-snapshot__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; font-size: .82rem; }
.dag-snapshot__swatch { width: .72rem; height: .72rem; border-radius: 3px; }
.dag-snapshot__row .dag-snapshot__name { color: var(--dag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dag-snapshot__row .dag-snapshot__val { font-family: var(--dag-font-mono); color: var(--dag-ink); font-variant-numeric: tabular-nums; }
.dag-snapshot__empty { color: var(--dag-faint); font-size: .85rem; }

/* 18f. Onboarding "Complete" celebration ----------------------------------- */
.dag-celebrate { text-align: center; padding: 1.5rem 1rem .5rem; position: relative; overflow: hidden; }
.dag-celebrate__seal {
    width: 104px; height: 104px; margin: 0 auto 1.4rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2.8rem;
    background: radial-gradient(circle at 32% 26%, #dcc290, var(--dag-gold) 58%, var(--dag-gold-700));
    box-shadow: 0 12px 34px rgba(var(--dag-gold-rgb), .42), inset 0 2px 8px rgba(255, 255, 255, .45);
    animation: dag-seal-pop .6s var(--dag-ease-out) both;
}
.dag-celebrate__seal i { animation: dag-check-pop .45s var(--dag-ease-out) .34s both; }
@keyframes dag-seal-pop { 0% { transform: scale(.4); opacity: 0; } 62% { transform: scale(1.09); } 100% { transform: scale(1); opacity: 1; } }
@keyframes dag-check-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.dag-celebrate__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 700; color: var(--dag-gold-link); }
.dag-celebrate__title { font-family: var(--dag-font-display); color: var(--dag-ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.06; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin: .4rem 0 0; }
.dag-celebrate__title .dag-celebrate__accent { color: var(--dag-gold-700); }
.dag-celebrate__sub { color: var(--dag-muted); max-width: 52ch; margin: .7rem auto 0; }
/* confetti — generated as .dag-confetti__bit spans by JS; falls once, reduced-motion-safe */
.dag-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dag-confetti__bit { position: absolute; top: -12px; width: 8px; height: 13px; opacity: 0; border-radius: 1px; animation: dag-confetti-fall 2.4s var(--dag-ease) forwards; }
@keyframes dag-confetti-fall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(440px) rotate(620deg); } }
@media (prefers-reduced-motion: reduce) {
    .dag-celebrate__seal, .dag-celebrate__seal i { animation: none; }
    .dag-confetti { display: none; }
}

/* ==========================================================================
   19. Batch 2 — thin-line nav icons, card micro-interactions, toasts,
   keyboard-shortcuts overlay, print/statement stylesheet.
   ========================================================================== */

/* 19a. Thin-line (Phosphor-style) navbar icons ----------------------------
   The navbar action cluster renders inline 1.6px-stroke SVGs (.dag-ic) for a
   lighter, Syndicately-like silhouette. Two-state icons (theme / privacy /
   density) carry both glyphs and reveal the right one purely from the existing
   html[data-bs-theme] / body class — no JS icon surgery needed. */
.dag-iconbtn .dag-ic { width: 19px; height: 19px; display: block; stroke: currentColor; }
.dag-ic + .dag-iconbtn__label { margin-left: .5rem; }
/* State toggles are scoped under .dag-iconbtn so they out-specify the base rule. */
/* theme: moon while light, sun while dark */
.dag-iconbtn .dag-ic--sun { display: none; }
[data-bs-theme="dark"] .dag-iconbtn .dag-ic--moon { display: none; }
[data-bs-theme="dark"] .dag-iconbtn .dag-ic--sun { display: block; }
/* privacy: open eye normally, struck-through eye while hiding balances */
.dag-iconbtn .dag-ic--eye-off { display: none; }
body.dag-hide-amounts .dag-iconbtn .dag-ic--eye { display: none; }
body.dag-hide-amounts .dag-iconbtn .dag-ic--eye-off { display: block; }
/* density: spaced rows when comfortable, tight list when compact */
.dag-iconbtn .dag-ic--list { display: none; }
body.dag-compact-tables .dag-iconbtn .dag-ic--rows { display: none; }
body.dag-compact-tables .dag-iconbtn .dag-ic--list { display: block; }

/* 19b. Account / request card micro-interactions --------------------------- */
.desktop-account-card, .mobile-account-card, .selected-resource-card,
.desktop-resource-card {
    transition: transform var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease);
    will-change: transform;
}
.desktop-account-card:hover, .mobile-account-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dag-shadow-md);
    border-color: var(--dag-hairline);
}
/* selected account/resource card gets a subtle lift (accent is the weighted
   left border defined above, which respects the card's rounded corners) */
.selected-account-card, .selected-resource-card { transform: translateY(-1px); }
/* request tiles (dashboard "Active Requests") lift gently on hover */
.dag-section-head + .row .card.h-100 { transition: transform var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease); }
.dag-section-head + .row .card.h-100:hover { transform: translateY(-2px); box-shadow: var(--dag-shadow-md); }
@media (prefers-reduced-motion: reduce) {
    .desktop-account-card, .mobile-account-card, .dag-section-head + .row .card.h-100 { transition: none; }
    .desktop-account-card:hover, .mobile-account-card:hover, .dag-section-head + .row .card.h-100:hover { transform: none; }
}

/* 19c. Branded toast notifications ----------------------------------------- */
.dag-toast-wrap {
    position: fixed; z-index: 1090; right: 1rem; bottom: 1rem;
    display: flex; flex-direction: column; gap: .6rem; max-width: min(92vw, 380px);
    pointer-events: none;
}
.dag-toast {
    pointer-events: auto; position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 2.2rem .85rem .95rem;
    background: var(--dag-surface); color: var(--dag-text);
    border: 1px solid var(--dag-border); border-radius: var(--dag-r-md, 12px);
    box-shadow: var(--dag-shadow-lg);
    transform: translateY(8px); opacity: 0;
    transition: transform .28s var(--dag-ease-out), opacity .28s var(--dag-ease-out);
}
.dag-toast.is-in { transform: translateY(0); opacity: 1; }
.dag-toast.is-out { transform: translateY(8px); opacity: 0; }
.dag-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dag-gold); }
.dag-toast__icon {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: .05rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .82rem; color: #fff; background: var(--dag-gold);
}
.dag-toast__body { flex: 1; min-width: 0; }
.dag-toast__title { font-family: var(--dag-font-display); font-weight: 600; color: var(--dag-ink); font-size: .95rem; line-height: 1.25; }
.dag-toast__msg { font-size: .85rem; color: var(--dag-muted); margin-top: .12rem; word-wrap: break-word; }
.dag-toast__close {
    position: absolute; top: .45rem; right: .5rem; border: 0; background: transparent;
    color: var(--dag-faint); cursor: pointer; line-height: 1; font-size: 1.05rem; padding: .15rem .25rem;
}
.dag-toast__close:hover { color: var(--dag-ink); }
.dag-toast--success::before, .dag-toast--success .dag-toast__icon { background: #4f8a5b; }
.dag-toast--error::before,   .dag-toast--error .dag-toast__icon   { background: #b4534b; }
.dag-toast--warning::before, .dag-toast--warning .dag-toast__icon { background: #c08a3e; }
.dag-toast--info::before,    .dag-toast--info .dag-toast__icon    { background: var(--dag-gold); }
.dag-toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(var(--dag-gold-rgb), .5); width: 100%; transform-origin: left; }
.dag-toast.is-in .dag-toast__bar { animation: dag-toast-bar linear forwards; }
@keyframes dag-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .dag-toast { transition: opacity .2s linear; transform: none; }
    .dag-toast.is-in { transform: none; } .dag-toast.is-out { transform: none; }
    .dag-toast__bar { animation: none !important; }
}

/* 19d. Keyboard-shortcuts help overlay ------------------------------------- */
.dag-shorts { position: fixed; inset: 0; z-index: 1085; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dag-shorts[hidden] { display: none; }
.dag-shorts__scrim { position: absolute; inset: 0; background: rgba(20, 16, 12, .42); backdrop-filter: blur(2px); opacity: 0; transition: opacity .16s var(--dag-ease); }
.dag-shorts.is-open .dag-shorts__scrim { opacity: 1; }
.dag-shorts__panel {
    position: relative; width: min(440px, 100%); background: var(--dag-surface);
    border: 1px solid var(--dag-border); border-radius: var(--dag-r-lg);
    box-shadow: var(--dag-shadow-lg); padding: 1.4rem 1.5rem 1.2rem;
    transform: translateY(10px) scale(.985); opacity: 0;
    transition: transform .2s var(--dag-ease-out), opacity .2s var(--dag-ease-out);
}
.dag-shorts.is-open .dag-shorts__panel { transform: none; opacity: 1; }
.dag-shorts__title { font-family: var(--dag-font-display); color: var(--dag-ink); font-size: 1.15rem; font-weight: 600; margin: 0 0 .15rem; }
.dag-shorts__sub { color: var(--dag-muted); font-size: .82rem; margin: 0 0 1rem; }
.dag-shorts__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--dag-border); }
.dag-shorts__row:first-of-type { border-top: 0; }
.dag-shorts__row span { color: var(--dag-text); font-size: .9rem; }
.dag-shorts kbd {
    font-family: var(--dag-font-mono); font-size: .76rem; line-height: 1;
    padding: .28em .5em; color: var(--dag-ink); background: var(--dag-canvas-2);
    border: 1px solid var(--dag-border-strong); border-bottom-width: 2px; border-radius: 6px; margin-left: .25rem;
}
@media (prefers-reduced-motion: reduce) {
    .dag-shorts__scrim, .dag-shorts__panel { transition: opacity .12s linear; }
    .dag-shorts__panel { transform: none; }
}

/* 19e. Print / statement stylesheet ----------------------------------------
   Turns any page into a clean private-bank statement: nav, footer, buttons,
   toggles, tabs and modals fall away; a DAG letterhead + sign-off (injected by
   glow-up.js when a [data-dag-print] trigger exists) take their place. */
.dag-print-only { display: none; }
@media print {
    @page { margin: 18mm 16mm; }
    html, body {
        background: #fff !important; color: #1c1a18 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* keep the gold */
    }
    body::before, body::after { display: none !important; }
    header, .dwp-navbar, footer, .footer, .dag-navbar-actions, .navbar,
    .dag-progress, .dag-cmdk, .dag-shorts, .dag-toast-wrap, .offcanvas,
    .modal, .modal-backdrop, .btn, .dag-iconbtn, .nav-tabs, .accordion-button::after,
    [data-dag-print], #unsavedChangesModal, .navbar-toggler, .alert-dismissible .btn-close,
    .dag-empty, .dag-section-head__link, .dag-service-btn,
    .dag-hero, .dag-attention, .dag-ob-progress { display: none !important; }   /* the dark hero/strip print as grey-on-white — the letterhead already heads the statement */

    /* Force the brand colours (donut, allocation bar, badges, timeline, seal) to
       print even when the browser's "Background graphics" option is off, so the
       allocation prints gold rather than greyscale. */
    .dag-snapshot__ring, .dag-snapshot__svg, .dag-snapshot__svg circle,
    .dag-snapshot__bar, .dag-snapshot__bar-seg, .dag-snapshot__swatch,
    .badge, .dag-timeline__dot, .pipeline-progress .step-icon,
    .dag-print-letterhead, .dag-print-letterhead__seal {
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }

    .dag-print-only { display: block !important; }
    /* Masthead — a double-rule (gold + tan) under a serif wordmark and a wax-seal
       style medallion, the way a private bank sets its letterhead. */
    .dag-print-letterhead {
        display: flex !important; align-items: center; gap: 16px;
        padding-bottom: 12px; margin-bottom: 24px;
        border-bottom: 1.5px solid #ba9965; box-shadow: 0 3px 0 0 #e6d3b3;
    }
    .dag-print-letterhead__seal {
        width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        background: #f6efe3; color: #8a6d3f; border: 1.5px solid #ba9965;
        box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px #e6d3b3;
        font-family: "Spectral", Georgia, serif; font-size: 25px; font-weight: 600;
    }
    .dag-print-letterhead__id { line-height: 1.2; }
    .dag-print-letterhead__wordmark { font-family: "Spectral", Georgia, serif; font-size: 20px; font-weight: 600; color: #2a2724; letter-spacing: .01em; }
    .dag-print-letterhead__kicker { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #8a6d3f; font-weight: 700; }
    .dag-print-letterhead__tag { font-size: 10px; letter-spacing: .03em; color: #6b6560; font-style: italic; margin-top: 1px; }
    .dag-print-letterhead__meta { margin-left: auto; text-align: right; font-size: 10.5px; color: #6b6560; line-height: 1.5; }
    .dag-print-letterhead__meta strong { color: #2a2724; display: block; font-size: 12px; font-family: "Spectral", Georgia, serif; }
    .dag-print-letterhead__meta .dag-print-conf { display: block; margin-top: 3px; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: #8a6d3f; font-weight: 700; }

    .dag-print-foot {
        display: block !important; margin-top: 26px; padding-top: 12px;
        border-top: 1px solid #d9d2c9; font-size: 9.5px; color: #7a746d; line-height: 1.55; text-align: justify;
    }
    .dag-print-foot strong { font-family: "Spectral", Georgia, serif; color: #2a2724; }

    /* clean up read-only form chrome so values read as a statement, not a form */
    .card, .accordion-item, .accordion-body { border: none !important; box-shadow: none !important; background: transparent !important; }
    .form-control, .form-select, .form-floating > .form-control { border: none !important; background: transparent !important; padding-left: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
    .form-floating > label { color: #8a6d3f !important; }
    .tab-pane { display: block !important; opacity: 1 !important; }
    .dag-timeline { break-inside: avoid; }
    a[href]::after { content: "" !important; }
    .dag-sensitive { filter: none !important; }   /* never print blurred figures */
}

/* ==========================================================================
   24. Premium Tier 2C — statement mode: art-direct the printed document so it
   reads like a private-bank statement, not a screenshot of a web app. (Print
   only; zero screen impact.)
   ========================================================================== */
@media print {
    main, .container { max-width: none !important; }
    /* serif headings throughout the document */
    h1, h2, h3, h4, h5, h6, .form-title, .form-section-header, .dag-section-head h5 {
        font-family: "Spectral", Georgia, serif !important; color: #2a2724 !important;
    }
    /* section headers become serif small-caps rules */
    h5, .form-section-header, .dag-section-head h5 {
        text-transform: uppercase; letter-spacing: .07em; font-size: 11px !important;
        color: #8a6d3f !important; border-bottom: .75px solid #ddd5cd;
        padding-bottom: 3px; margin: 16px 0 8px; text-align: left !important;
    }
    /* tables read like a ledger — serif caps headers, hairline rows, figures right */
    .table { width: 100%; border-collapse: collapse; }
    .table > thead th {
        font-family: "Spectral", Georgia, serif; text-transform: uppercase;
        letter-spacing: .07em; font-size: 8.5px; color: #8a6d3f;
        border-bottom: 1px solid #c9a86a; padding: 4px 6px;
    }
    .table > tbody td { border-bottom: .5px solid #e4ddd3; padding: 5px 6px; font-size: 10.5px; color: #2a2724; }
    .table .right-align, .table td.right-align,
    .table .dag-figure, .table .dag-amount { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
    /* label/value meta rendered as clean statement lines */
    .dag-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
    .dag-meta dt { text-transform: uppercase; letter-spacing: .06em; font-size: 8px; color: #8a6d3f; }
    .dag-meta dd { font-size: 11px; color: #2a2724; }
    /* the allocation snapshot prints as a tidy, self-contained figure */
    .dag-snapshot, .dag-snapshot .card-body { padding: 0 !important; }
    /* page hygiene — keep figures and their headers together */
    .card, .dag-snapshot, .dag-timeline, table, tr { break-inside: avoid; }
    h4, h5, .form-section-header { break-after: avoid; }
}

/* ==========================================================================
   20. Premium Tier 0 — last legacy-blue holdouts not covered by token overrides.
   (palette/numerals/type/card-edge handled in §1–6 above via token repoints.)
   ========================================================================== */
/* The advisor mobile sidebar toggle still hard-codes the old navy; bring it onto
   the DAG charcoal/gold so no blue-navy survives anywhere. */
#mobileSideBarToggle {
    background-color: var(--dag-ink);
    color: var(--dag-gold);
    box-shadow: var(--dag-shadow-md);
}
#mobileSideBarToggle:hover { background-color: var(--dag-gold); color: var(--dag-btn-ink); }

/* ==========================================================================
   21. Premium Tier 1 — section rhythm, tactile press, pipeline stepper redesign.
   ========================================================================== */

/* 21a. Section rhythm — a touch more air below the hero, on the 8px scale.
   (The spacing tokens above are the durable deliverable for components; deeper
   per-section rhythm is left to Bootstrap's margin utilities, which carry
   !important and shouldn't be fought from here.) */
.dag-hero { margin-bottom: var(--dag-space-5); }

/* 21b. Flat buttons per the DAG Style Guide — no press dip on .btn. Icon buttons
   keep a subtle tactile dip (not a styleguide CTA). */
.dag-iconbtn:active { transform: translateY(1px); }

/* 21c. Pipeline stepper redesign — bring the legacy site.css .pipeline-progress
   up to .dag-timeline quality: circular nodes with a surface ring, a soft gold
   halo on the current step, hairline connectors centred on the nodes, and tidy
   uppercase labels. Colours already come from the gold --dwp-step-* tokens (§11);
   this restyles the *form*. Structure unchanged (no partial edit). */
.pipeline-progress .step-icon {
    border-radius: 50%;
    border: 3px solid var(--dag-surface);
    box-shadow: var(--dag-shadow-xs);
    font-family: var(--dag-font-mono);
    font-variant-numeric: tabular-nums;
    transition: background var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease);
}
.pipeline-progress .pipeline-step.completed .step-icon { color: var(--dag-gold); }   /* gold check on charcoal */
.pipeline-progress .pipeline-step.current .step-icon {
    box-shadow: 0 0 0 4px rgba(var(--dag-gold-rgb), .18), var(--dag-shadow-xs);
    color: var(--dag-btn-ink);
}
/* drop the old square halo bg — the ring above is the current cue now */
.pipeline-progress .pipeline-step.current .step-icon-wrap { background: transparent; }
/* hairline connector, centred on the 38px node row */
.pipeline-progress .step-connector {
    height: 3px; border-radius: 3px; margin-top: 19px;
    background: var(--dag-border-strong);
}
.pipeline-progress .step-connector.done { background: var(--dag-gold); }
.pipeline-progress .step-label {
    letter-spacing: .07em; font-weight: 700; color: var(--dag-muted);
}
[data-bs-theme="dark"] .pipeline-progress .pipeline-step.completed .step-icon { color: var(--dag-gold-700); }
@media (max-width: 575.98px) {
    .pipeline-progress .step-label {
        font-size: .55rem; letter-spacing: 0; line-height: 1.15;
        word-break: break-word; hyphens: auto; -webkit-hyphens: auto; padding: 0 2px;
    }
}

/* 21d. Investment-account progress — reuses the onboarding .dag-ob-progress bar
   (a "Step X of N" line over a full gold track), then a plain icon row beneath it.
   No numbered circles/boxes: each step is just its FontAwesome glyph, coloured by
   state via the shared onboarding-icon-* classes (active = gold, done = gold,
   pending = muted). No percentage — the static bar + active icon convey position. */
.investment-progress .investment-progress__icons { padding-left: 0; margin-bottom: 0; list-style: none; }
.investment-progress .investment-step {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .1rem .45rem; color: inherit; text-decoration: none;
}
.investment-progress .investment-step:focus-visible { outline: none; }
.investment-progress .investment-step__icon {
    font-size: 1.15rem;
    color: var(--dag-muted);
    transition: color var(--dag-dur) var(--dag-ease), transform var(--dag-dur) var(--dag-ease);
}
.investment-progress .investment-step:hover .investment-step__icon { color: var(--dag-ink); }
/* Only the CURRENT step icon is highlighted (gold + a subtle lift, no box/circle),
   matching the onboarding bar where past/future steps stay muted. */
.investment-progress .investment-step__icon.onboarding-icon-active { color: var(--dag-gold); transform: scale(1.18); }
/* setCurrentNavSection() tags the active link .form-nav-current, which elsewhere
   paints a gold pill background — suppress that here so the icon highlight is the
   only cue (no box around the active step). */
.investment-progress .form-nav-link.form-nav-current { background: transparent !important; color: inherit !important; }

/* Review-step submit-error list — the per-section "jump to" arrows sit inside a
   .badge (tiny font), making them awkward to tap. Enlarge the glyph and give the
   anchor a ~44px touch target. */
.error-nav-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.75rem; min-height: 2.75rem;
    color: var(--dag-gold-link); text-decoration: none;
    transition: color var(--dag-dur) var(--dag-ease), transform var(--dag-dur) var(--dag-ease);
}
.error-nav-arrow i { font-size: 1.6rem; line-height: 1; }
.error-nav-arrow:hover, .error-nav-arrow:focus-visible { color: var(--dag-gold-800); transform: scale(1.08); }
.error-nav-arrow:focus-visible { outline: none; }

/* ==========================================================================
   22. OKLCH palette — perceptual derivation of the gold states and dark-mode
   surface elevation. The brand base hexes (--dag-gold / --dag-canvas) stay as
   the source + the fallback; on browsers with relative-color OKLCH we re-derive
   the shades by shifting ONLY lightness (chroma + hue inherited from the base,
   so gold stays gold and the warm canvas stays warm). Deltas are tuned to ≈ the
   current hand-picked values, so appearance is preserved but the ramp and the
   dark elevation ladder become perceptually even. Guarded — old browsers keep
   the hex ramp untouched.
   ========================================================================== */
@supports (color: oklch(from red l c h)) {
    :root {
        /* Light: gold darkens in even L steps for hover / active / links / text */
        --dag-gold-600: oklch(from var(--dag-gold) calc(l - .05) c h);
        --dag-gold-700: oklch(from var(--dag-gold) calc(l - .13) c h);
        --dag-gold-800: oklch(from var(--dag-gold) calc(l - .26) c h);
    }
    [data-bs-theme="dark"] {
        /* Dark: gold lightens (legible on the dark canvas) */
        --dag-gold-700: oklch(from var(--dag-gold) calc(l + .05) c h);
        --dag-gold-800: oklch(from var(--dag-gold) calc(l + .12) c h);
        /* Surfaces elevate by even lightness steps from the canvas — the
           textbook dark-mode "lift by lightening" so stacked cards read. */
        --dag-canvas-2:  oklch(from var(--dag-canvas) calc(l + .03) c h);
        --dag-surface:   oklch(from var(--dag-canvas) calc(l + .05) c h);
        --dag-surface-2: oklch(from var(--dag-canvas) calc(l + .09) c h);
    }
}

/* ==========================================================================
   23. Premium Tier 2B — net-worth hero. Elevates the wealth snapshot into a
   net-worth panel: a prominent serif total + a linear allocation flow bar that
   mirrors the donut. REAL data only (no fabricated trend). Injected by JS, so no
   view markup changes; the total band only shows on the dashboard (static)
   snapshot, the flow bar shows wherever the snapshot does.
   ========================================================================== */
.dag-snapshot__hero { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: .1rem 0 1.1rem; }
.dag-snapshot__hero-amt {
    font-family: var(--dag-font-display); font-weight: 600;
    font-size: clamp(1.85rem, 1.3rem + 1.7vw, 2.65rem); line-height: 1;
    color: var(--dag-ink); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums lining-nums;
}
.dag-snapshot__hero-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--dag-muted); }
.dag-snapshot__bar {
    display: flex; height: 12px; margin: 1.1rem 0 .35rem;
    border-radius: var(--dag-r-pill); overflow: hidden;
    background: var(--dag-canvas-2); box-shadow: var(--dag-card-edge);
}
.dag-snapshot__bar-seg {
    height: 100%;
    transition: width var(--dag-dur-slow) var(--dag-ease-enter), filter var(--dag-dur) var(--dag-ease);
}
.dag-snapshot__bar-seg + .dag-snapshot__bar-seg { box-shadow: -1px 0 0 rgba(255, 255, 255, .25); }
.dag-snapshot__bar:hover .dag-snapshot__bar-seg { filter: saturate(.7) opacity(.6); }
.dag-snapshot__bar .dag-snapshot__bar-seg:hover { filter: none; }

/* ==========================================================================
   25. Advisor command center — book-of-business "needs attention" strip under
   the advisor hero. Urgent items glow clay, an all-clear state reads green.
   ========================================================================== */
.dag-attention { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.dag-attention__chip {
    display: inline-flex; align-items: center; gap: .42rem;
    padding: .36rem .75rem; border-radius: var(--dag-r-pill);
    font-size: .8rem; font-weight: 600; line-height: 1; text-decoration: none;
    background: var(--dag-surface); border: 1px solid var(--dag-border);
    color: var(--dag-text); box-shadow: var(--dag-card-edge);
    transition: transform var(--dag-dur) var(--dag-ease), box-shadow var(--dag-dur) var(--dag-ease), border-color var(--dag-dur) var(--dag-ease), color var(--dag-dur) var(--dag-ease);
}
.dag-attention__chip i { color: var(--dag-gold-700); font-size: .85em; }
a.dag-attention__chip:hover { transform: translateY(-1px); box-shadow: var(--dag-shadow-sm); border-color: var(--dag-hairline); color: var(--dag-ink); }
.dag-attention__chip--urgent { background: rgba(180, 82, 75, .10); border-color: rgba(180, 82, 75, .26); color: #9d453f; }
.dag-attention__chip--urgent i { color: #b4524b; }
.dag-attention__chip--clear { background: rgba(70, 122, 84, .10); border-color: rgba(70, 122, 84, .24); color: #3c6a48; }
.dag-attention__chip--clear i { color: #4f8a5b; }
.dag-attention__spacer { margin-left: auto; }
[data-bs-theme="dark"] .dag-attention__chip--urgent { color: #e8a59f; }
[data-bs-theme="dark"] .dag-attention__chip--clear { color: #9ccfa8; }
@media (max-width: 575.98px) { .dag-attention { margin-top: -.25rem; } .dag-attention__spacer { margin-left: 0; } }

/* Trust cue — a small lock note beside sensitive (encrypted) fields. */
.dag-secure-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--dag-muted); margin-top: .15rem; }
.dag-secure-hint i { color: var(--dag-gold-700); font-size: .85em; }

/* ==========================================================================
   26. Notification center — read/unread states, entity tag, relative time,
   per-item + mark-all-read actions in the offcanvas.
   ========================================================================== */
.dag-notif {
    position: relative; padding: .7rem .8rem .6rem; margin-bottom: .55rem;
    background: var(--dag-surface); border: 1px solid var(--dag-border);
    border-radius: var(--dag-r); box-shadow: var(--dag-card-edge);
    transition: border-color var(--dag-dur) var(--dag-ease);
}
/* unread: a weighted gold left edge (tapers with the radius) + stronger ink */
.dag-notif--unread { border-left: 3px solid var(--dag-gold); }
.dag-notif__tag {
    display: inline-block; font-size: .58rem; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--dag-gold-800); background: rgba(var(--dag-gold-rgb), .12);
    padding: .12rem .42rem; border-radius: var(--dag-r-pill); margin-bottom: .35rem;
}
.dag-notif__msg { margin: 0 0 .4rem; color: var(--dag-text); font-size: .85rem; line-height: 1.38; }
.dag-notif--unread .dag-notif__msg { color: var(--dag-ink); font-weight: 500; }
.dag-notif__msg a { color: inherit; text-decoration: none; }
.dag-notif__msg a:hover { color: var(--dag-gold-700); }
.dag-notif__msg a i { font-size: .68em; color: var(--dag-gold-700); margin-left: .15rem; }
.dag-notif__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--dag-faint); }
.dag-notif__actions { display: inline-flex; gap: .1rem; flex: 0 0 auto; }
.dag-notif__btn {
    border: 0; background: transparent; color: var(--dag-faint); cursor: pointer;
    padding: .25rem .4rem; border-radius: 6px; line-height: 1; font-size: .82rem;
    transition: color var(--dag-dur) var(--dag-ease), background var(--dag-dur) var(--dag-ease);
}
.dag-notif__btn:hover { color: var(--dag-gold-700); background: rgba(var(--dag-gold-rgb), .12); }
.dag-notif__btn--danger:hover { color: #b4524b; background: rgba(180, 82, 75, .12); }
.dag-notif-allread {
    border: 0; background: transparent; color: var(--dag-gold-link); cursor: pointer;
    font-size: .76rem; font-weight: 600; padding: .25rem .35rem; border-radius: 6px;
}
.dag-notif-allread:hover { background: rgba(var(--dag-gold-rgb), .12); color: var(--dag-gold-800); }
#notificationListBody { padding-top: .85rem; }
#notificationList.offcanvas .offcanvas-header { justify-content: space-between; }

/* ==========================================================================
   27. Onboarding depth — flow-wide progress readout (JS-injected above the step
   wizard) + a richer "Complete" payoff (accomplishments + next step).
   ========================================================================== */
.dag-ob-progress { margin: 0 0 1rem; }
.dag-ob-progress__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.dag-ob-progress__step { font-family: var(--dag-font-display); font-size: .98rem; font-weight: 600; color: var(--dag-ink); }
.dag-ob-progress__pct { font-size: .76rem; font-weight: 700; letter-spacing: .03em; color: var(--dag-gold-link); font-variant-numeric: tabular-nums lining-nums; }
.dag-ob-progress__track { height: 5px; border-radius: var(--dag-r-pill); background: var(--dag-canvas-2); overflow: hidden; box-shadow: var(--dag-card-edge); }
.dag-ob-progress__fill {
    height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--dag-gold), var(--dag-gold-700));
    transition: width .6s var(--dag-ease-enter);
}

/* Complete page — accomplishments checklist + next-step callout */
.dag-celebrate__summary { display: grid; gap: .5rem; max-width: 30rem; margin: 1.5rem auto 0; text-align: left; }
.dag-celebrate__done { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--dag-text); }
.dag-celebrate__done i { color: #4f8a5b; font-size: 1rem; flex: 0 0 auto; }
[data-bs-theme="dark"] .dag-celebrate__done i { color: #9ccfa8; }
.dag-celebrate__next {
    display: inline-flex; align-items: center; gap: .55rem;
    margin: 1.4rem auto 0; padding: .7rem 1.05rem;
    background: rgba(var(--dag-gold-rgb), .08); border: 1px solid var(--dag-hairline);
    border-radius: var(--dag-r); color: var(--dag-ink); font-size: .9rem; font-weight: 500;
}
.dag-celebrate__next i { color: var(--dag-gold-700); }

/* ==========================================================================
   28. Submission milestone — the "submitted, now in review" payoff for the
   account-application + action-submitted pages. Reuses .dag-celebrate (seal,
   eyebrow, title, sub, confetti) and adds a 3-step "what happens next" track.
   No invented SLAs in the copy — the reassurance is the visible track itself.
   ========================================================================== */
.dag-milestone-track {
    list-style: none; margin: 1.7rem auto .4rem; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem;
    max-width: 34rem;
}
.dag-milestone-step {
    position: relative; padding: 0 .4rem;
    display: flex; flex-direction: column; align-items: center;
}
/* connector line linking each dot back to the previous one */
.dag-milestone-step::before {
    content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px;
    background: var(--dag-hairline); z-index: 0;
}
.dag-milestone-step:first-child::before { display: none; }
.dag-milestone-step.is-done::before,
.dag-milestone-step.is-active::before { background: var(--dag-gold); }
.dag-milestone-step__dot {
    position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-size: .82rem; flex: 0 0 auto;
    background: var(--dag-canvas-2); color: var(--dag-muted);
    border: 1px solid var(--dag-hairline); box-shadow: var(--dag-card-edge);
}
.dag-milestone-step.is-done .dag-milestone-step__dot {
    background: linear-gradient(160deg, var(--dag-gold), var(--dag-gold-700));
    color: #fff; border-color: transparent;
}
.dag-milestone-step.is-active .dag-milestone-step__dot {
    background: rgba(var(--dag-gold-rgb), .14); color: var(--dag-gold-700);
    border-color: var(--dag-gold);
}
.dag-milestone-step.is-active .dag-milestone-step__dot i { animation: dag-pulse-soft 2.2s var(--dag-ease) infinite; }
.dag-milestone-step__text { display: flex; flex-direction: column; align-items: center; }
.dag-milestone-step__label { margin-top: .55rem; font-weight: 600; font-size: .85rem; color: var(--dag-ink); }
.dag-milestone-step__meta { margin-top: .12rem; font-size: .72rem; color: var(--dag-muted); line-height: 1.3; max-width: 16ch; }
@keyframes dag-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) {
    .dag-milestone-step.is-active .dag-milestone-step__dot i { animation: none; }
}
@media (max-width: 575.98px) {
    .dag-milestone-track { grid-template-columns: 1fr; gap: .25rem; max-width: 24rem; }
    .dag-milestone-step { flex-direction: row; align-items: center; gap: .85rem; padding: .4rem 0; }
    .dag-milestone-step::before { display: none; }
    .dag-milestone-step__text { align-items: flex-start; }
    .dag-milestone-step__label { margin-top: 0; }
    .dag-milestone-step__meta { max-width: none; }
}

/* ==========================================================================
   29. KYC verification record — replaces the readonly "Status: Pending" form
   fields with a toned status card. The badge TEXT is always the real Parallel
   Markets status (title-cased); only the colour/icon is interpreted, so we
   never misrepresent the underlying value.
   ========================================================================== */
.dag-kyc-record {
    border: 1px solid var(--dag-hairline); border-left: 3px solid var(--dag-hairline);
    border-radius: var(--dag-r); background: var(--dag-canvas-2);
    padding: 1rem 1.1rem; box-shadow: var(--dag-card-edge);
}
.dag-kyc-record__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dag-kyc-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.dag-kyc-status i { font-size: .95rem; }
.dag-kyc-record__link { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.dag-kyc-record__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .65rem 1.4rem; margin: .95rem 0 0;
}
.dag-kyc-record__meta > div { display: flex; flex-direction: column; gap: .12rem; }
.dag-kyc-record__meta dt { margin: 0; font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--dag-muted); }
.dag-kyc-record__meta dd { margin: 0; font-size: .9rem; color: var(--dag-ink); font-variant-numeric: tabular-nums lining-nums; word-break: break-word; }
/* status tones — left accent + badge colour */
.dag-kyc-record--ok { border-left-color: #4f8a5b; }
.dag-kyc-record--ok .dag-kyc-status { color: #3f7a4f; }
.dag-kyc-record--bad { border-left-color: #b4524b; }
.dag-kyc-record--bad .dag-kyc-status { color: #a8463f; }
.dag-kyc-record--warn { border-left-color: #b9852f; }
.dag-kyc-record--warn .dag-kyc-status { color: #9c6f23; }
.dag-kyc-record--pending { border-left-color: var(--dag-gold); }
.dag-kyc-record--pending .dag-kyc-status { color: var(--dag-gold-800); }
.dag-kyc-record--neutral .dag-kyc-status { color: var(--dag-muted); }
[data-bs-theme="dark"] .dag-kyc-record--ok .dag-kyc-status { color: #9ccfa8; }
[data-bs-theme="dark"] .dag-kyc-record--bad .dag-kyc-status { color: #e2a39d; }
[data-bs-theme="dark"] .dag-kyc-record--warn .dag-kyc-status { color: #e0bd84; }

/* ==========================================================================
   30. Branded loading panel — replaces bare Bootstrap spinners on the longest
   waits (document generation + the account-submission modal) with a gold ring,
   reassuring copy, and a shimmer bar. Reduced-motion safe (static ring + bar).
   ========================================================================== */
.dag-loading { text-align: center; padding: 2.4rem 1rem; max-width: 32rem; margin: 0 auto; }
.dag-loading--tight { padding: 1.4rem .5rem; }
.dag-loading__spinner {
    width: 46px; height: 46px; margin: 0 auto 1.15rem; border-radius: 50%;
    border: 3px solid rgba(var(--dag-gold-rgb), .22); border-top-color: var(--dag-gold-700);
    animation: dag-spin .9s linear infinite;
}
@keyframes dag-spin { to { transform: rotate(360deg); } }
.dag-loading__title { font-family: var(--dag-font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; color: var(--dag-ink); margin: 0; }
.dag-loading__text { color: var(--dag-muted); font-size: .9rem; margin: .45rem auto 0; max-width: 38ch; line-height: 1.5; }
.dag-loading__bar {
    height: 4px; width: 170px; margin: 1.2rem auto 0; border-radius: var(--dag-r-pill);
    background: var(--dag-canvas-2); overflow: hidden; position: relative;
}
.dag-loading__bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--dag-gold), transparent);
    animation: dag-loading-sweep 1.5s var(--dag-ease) infinite;
}
@keyframes dag-loading-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
    .dag-loading__spinner { animation: none; border-color: rgba(var(--dag-gold-rgb), .3); border-top-color: var(--dag-gold-700); }
    .dag-loading__bar::after { animation: none; left: 29%; }
}

/* ==========================================================================
   31. Recovery panel — empathetic, recoverable error state (used by Payment
   Failed). Amber-toned icon (not alarm red), warm copy, a "common causes"
   hint box. Pairs with the page's existing retry / previous buttons.
   ========================================================================== */
.dag-recover { max-width: 34rem; margin: .5rem auto; text-align: center; padding: 1.4rem 1rem .4rem; }
.dag-recover__icon {
    width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem;
    color: #9c6f23; background: rgba(185, 133, 47, .12); border: 1px solid rgba(185, 133, 47, .28);
}
.dag-recover__title { font-family: var(--dag-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.015em; color: var(--dag-ink); margin: 0; }
.dag-recover__text { color: var(--dag-muted); margin: .55rem auto 0; max-width: 46ch; line-height: 1.55; }
.dag-recover__hints {
    list-style: none; margin: 1.3rem auto 0; padding: 1rem 1.15rem; max-width: 30rem; text-align: left;
    display: grid; gap: .6rem; background: var(--dag-canvas-2);
    border: 1px solid var(--dag-hairline); border-radius: var(--dag-r);
}
.dag-recover__hints li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--dag-text); line-height: 1.45; }
.dag-recover__hints i { color: var(--dag-gold-700); margin-top: .18rem; flex: 0 0 auto; font-size: .78rem; }
[data-bs-theme="dark"] .dag-recover__icon { color: #e0bd84; background: rgba(224, 189, 132, .12); border-color: rgba(224, 189, 132, .3); }

/* ==========================================================================
   32. State pages — one calm, branded treatment for error / 404 / no-access /
   session-expired. Replaces the cold red-on-white with an icon medallion,
   warm copy, and a clear way back. Each view supplies its own icon + words.
   ========================================================================== */
.dag-statepage { max-width: 33rem; margin: 3.5rem auto; padding: 0 1rem; }
.dag-statepage__card {
    text-align: center; padding: 2.8rem 2rem;
    background: var(--dag-surface); border: 1px solid var(--dag-hairline);
    border-radius: var(--dag-r-lg); box-shadow: var(--dag-shadow-md);
}
.dag-statepage__icon {
    width: 66px; height: 66px; margin: 0 auto 1.3rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.6rem;
    color: var(--dag-gold-700); background: rgba(var(--dag-gold-rgb), .1);
    border: 1px solid rgba(var(--dag-gold-rgb), .26);
}
.dag-statepage__icon--muted { color: var(--dag-ink); background: var(--dag-canvas-2); border-color: var(--dag-hairline); }
.dag-statepage__title { font-family: var(--dag-font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; color: var(--dag-ink); margin: 0; }
.dag-statepage__text { color: var(--dag-muted); margin: .75rem auto 0; max-width: 44ch; line-height: 1.55; }
.dag-statepage__text a, .dag-statepage__meta a { font-weight: 600; }
.dag-statepage__actions { margin-top: 1.7rem; display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; }
.dag-statepage__meta { margin: 1.5rem 0 0; font-size: .8rem; color: var(--dag-muted); }
.dag-statepage__meta code { background: var(--dag-canvas-2); padding: .12rem .42rem; border-radius: 6px; font-size: .8rem; color: var(--dag-ink); }

/* ==========================================================================
   33. Form section header — rebrands the shared FormSectionHeader partial
   (~60 uses app-wide) from <hr>/<p>/<hr> to a serif label flanked by hairline
   rules. Breaks long onboarding forms into legible, premium-feeling sections.
   ========================================================================== */
.dag-form-section { display: flex; align-items: center; gap: 1rem; margin: 1.9rem 0 .6rem; }
.dag-form-section__rule { flex: 1; height: 1px; background: var(--dag-hairline); }
.dag-form-section__label {
    font-family: var(--dag-font-display); font-weight: 600; font-size: 1.08rem;
    letter-spacing: -.01em; color: var(--dag-ink); white-space: nowrap; margin: 0; padding: 0;
}

/* ==========================================================================
   34. Review-fix pass — addresses the findings in DAG-UI-REVIEW.md. Grouped
   here so the corrections read together; the critical button/stacking fixes
   live with their original rules (§1 grain, §5 buttons, token blocks).
   ========================================================================== */

/* #2 — Tools dropdown and Search button overlap: the min-width on the toggle was
   wider than its flex allocation, causing it to intrude on the Search button. Remove
   the min-width (the site.css min-width: 80px on .search-action-btn suffices to show
   "Tools ▾") and add a small margin so the two buttons have visible breathing room. */
.search-action-btn .dropdown-toggle { text-overflow: clip; }
div.search-action-btn + button.search-action-btn { margin-left: .4rem; }

/* #5 — SSN/Tax-ID field: eye-inline and info-icon were at different vertical
   positions (eye used translateY(-15%), info used bottom:0.6rem). Fix both to
   top:50% + translateY(-50%) so they share the same centre-line. */
.sensitive-field .eye-inline { right: 1rem; top: 50%; transform: translateY(-50%); }
.sensitive-field.has-tooltip .eye-inline { right: 2.4rem; }
.sensitive-field .info-icon { top: 50%; bottom: auto; transform: translateY(-50%); }

/* #4/#6 — Onboarding progress bar: (a) it ran edge-to-edge, so inset it to match the
   card's ~1rem padding; (b) it was flush with the card top (no breathing room), so add
   top padding. When the wizard lives in .card-header (Payment page), the header already
   provides padding — zero the overrides there to avoid double-indenting. */
.dag-ob-progress { padding-inline: 1.15rem; padding-top: .75rem; }
.card-header > .dag-ob-progress { padding-inline: 0; padding-top: 0; }

/* Cards are square per the DAG Style Guide; keep Bootstrap's card radii in sync at 0
   so header/footer inner corners match the squared outer card. */
.card { --bs-card-border-radius: var(--dag-r-lg); --bs-card-inner-border-radius: var(--dag-r-lg); }

/* #8 — "Add Beneficiary"/"Add…" buttons use .btn-info and rendered bright cyan. Re-cast
   as a warm gold ghost so they read as a secondary add affordance distinct from the
   solid-gold primary "Continue". */
.btn-info {
    --bs-btn-color: var(--dag-gold-link); --bs-btn-bg: rgba(var(--dag-gold-rgb), .08); --bs-btn-border-color: rgba(var(--dag-gold-rgb), .45);
    --bs-btn-hover-color: var(--dag-gold-800); --bs-btn-hover-bg: rgba(var(--dag-gold-rgb), .16); --bs-btn-hover-border-color: var(--dag-gold);
    --bs-btn-active-color: var(--dag-gold-800); --bs-btn-active-bg: rgba(var(--dag-gold-rgb), .2); --bs-btn-active-border-color: var(--dag-gold);
    --bs-btn-focus-shadow-rgb: var(--dag-gold-rgb);
}
.btn-info { background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
.btn-info:hover { background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color); }

/* #24 — Advisor availability "Calendar Link:" row: the label, link/edit view and form
   are in a d-flex.gap-2 container that was being forced to flex-wrap by the glow-up
   §15 rule (.card .card-body .d-flex.gap-2 = 4-class specificity). Override must match
   that specificity (.advisor-card .card-body .d-flex.gap-2 = 4 classes, wins on source order). */
.advisor-card .card-body .d-flex.gap-2 { flex-wrap: nowrap; }
.advisor-card .d-flex > .text-nowrap { align-self: center; }
.advisor-card form.d-flex .form-control { min-width: 0; }
.advisor-card h4 + .fa-solid { align-self: center; font-size: .9em; }

/* #11 — Organizations "General Repcode" / referral-count read-outs carried full card
   chrome (edge ring + shadow), reading as an oversized bordered badge. Flatten them
   into a tidy inline read-out. */
.dag-readout { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.dag-readout .card-body { padding-top: .25rem; padding-bottom: .25rem; }

/* #13 — Accordion headers (Investment Account / Client Profile section panels) used
   Bootstrap's stock blue active state + blue focus ring + blue chevron. Repoint the
   accordion variables to the DAG charcoal/gold system. (User: de-blue all.) */
.accordion {
    --bs-accordion-color: var(--dag-ink);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--dag-border);
    --bs-accordion-btn-color: var(--dag-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--dag-ink);
    --bs-accordion-active-bg: var(--dag-canvas-2);
    --bs-accordion-btn-focus-border-color: var(--dag-hairline);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--dag-gold-rgb), .25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333232'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ba9965'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .accordion {
    --bs-accordion-active-bg: var(--dag-surface-2);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3ede4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cdb083'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* #3 — Belt-and-suspenders: set background-image directly on ::after so Bootstrap's
   default blue chevron cannot win, regardless of CSS-variable cascade order. */
[data-bs-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3ede4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cdb083'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* #14 — Investment-account cards on the dashboard had their top border/glow clipped by
   the sidebar's overflow-y:auto. Pad the scroll container so the full card edge shows. */
.dag-acct-scroll { padding: 4px 6px; }

/* #6/#17/#23 — Continue/action buttons in card-footers use a col-9 (empty spacer) +
   col-3 (button) grid. On narrow phones col-3 is only ~67px — too tight for the button.
   On ≤575px, hide the spacer and let the button take its natural width, right-aligned. */
@media (max-width: 575.98px) {
    .card-footer > .row > .col-9:first-child,
    .card-footer > .row > .col-9:empty { display: none; }
    .card-footer > .row { justify-content: flex-end; }
    .card-footer > .row > .col-3:last-child,
    .card-footer > .row > [class*="col-"]:last-child { flex: 0 0 auto !important; width: auto !important; padding-right: .75rem; }
    .row.py-2:has(> .col-9 + .col-3) > .col-9 { display: none; }
    .row.py-2:has(> .col-9 + .col-3) { justify-content: flex-end; }
    .row.py-2:has(> .col-9 + .col-3) > .col-3 { flex: 0 0 auto !important; width: auto !important; padding-right: .75rem; }
}

/* #9 — Pay button: payment card-footer wraps the row inside a <form>, so the general
   .card-footer > .row selector doesn't match. Target #paymentForm directly. */
@media (max-width: 575.98px) {
    #paymentForm .row .col-9 { display: none; }
    #paymentForm .row { justify-content: flex-end; }
    #paymentForm .row .col-3 { flex: 0 0 auto !important; width: auto !important; padding-right: .75rem; }
}

/* #15 — Info icons next to question labels: keep them body-text size so they don't
   inflate the row height. Also indent the radio option columns on mobile for the
   bottom two InvestmentObjective questions. */
.col-1 > h2 > .fa-circle-info,
.col-1 > h2 > .fa-info-circle,
.form-radio-header .fa-circle-info,
.info-icon { font-size: 1rem !important; }
@media (max-width: 767.98px) {
    .form-radio-header + .col-md-8 { padding-left: 1.5rem; }
}

/* #16 — No-beneficiary confirmation modal: col-md-3 expands to full width on mobile,
   pushing Continue below Cancel. Auto-width keeps both buttons inline. */
@media (max-width: 767.98px) {
    #beneficiaryConfirmationModal .modal-body .col-md-3,
    #confirmationModal .modal-body .col-md-3 { flex: 0 0 auto; width: auto; }
}