/*
    The Settings family (My Accounts, Partner Sharing, Rules & Tags, Email Preferences, Update Account, Accessibility):
    one quiet grey theme so the area reads as one place, like the mobile Settings screen. Section cards fade from a
    soft grey at the top to the card color, icons sit in grey chips, the one accent is the brand indigo (switches and
    the primary button), and color is kept for meaning: user blue and partner amber, cash / owed / invested, health.
    The page stylesheets point their own tokens at these (--set-*); the rules at the end bring the pages that predate
    this file (My Accounts, Rules & Tags, Accessibility) onto the same icon chips. Dark follows data-bs-theme="dark".
*/

:root {
    --set-ink: #2F3645;
    --set-text: #0B0F19;
    --set-muted: #5B6475;
    --set-light: #8E95A6;
    --set-icon: #5B6475;
    --set-icon-bg: #E8EBF1;
    --set-card: #FFFFFF;
    --set-card-border: #DEE2EA;
    --set-surface: #F3F5F8;
    --set-section-bg: linear-gradient(180deg, #EEF0F5 0%, #F6F7FA 42%, #FFFFFF 100%);
    --set-section-border: #DEE2EA;
    --set-hero-bg: linear-gradient(158deg, #E6E9F0 0%, #F1F3F7 45%, #FFFFFF 100%);
    --set-hero-border: #DADFE8;
    --set-glass: rgba(255, 255, 255, .78);
    --set-glass-border: rgba(255, 255, 255, .95);
    --set-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --set-accent-soft: hsl(calc(246.32deg + var(--ci-accent-shift, 0deg)) 82.61% 95.49%);
    --set-user: #2563EB;
    --set-partner: #D97706;
    --set-glow-user: radial-gradient(circle at 0 0, rgba(37, 99, 235, .14) 0%, rgba(37, 99, 235, .06) 35%, rgba(37, 99, 235, 0) 62%);
    --set-glow-partner: radial-gradient(circle at 100% 0, rgba(217, 119, 6, .12) 0%, rgba(217, 119, 6, .05) 35%, rgba(217, 119, 6, 0) 62%);
    --set-focus: 0 0 0 3px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .25);
    /* The All Access plan pill (mobile InvestmentsAllAccess*, in the accent list): ink and soft wash follow the accent
       preference, so the pill reads in the user's color (sky blue by default), not a fixed violet or gold. */
    --set-plan: hsl(calc(262.12deg + var(--ci-accent-shift, 0deg)) 83.26% 57.84%);
    --set-plan-soft: hsl(calc(260deg + var(--ci-accent-shift, 0deg)) 100% 95.29%);
    /* Stat tiles lit from the top-left (mobile AccountGlanceTileBrush / AccountGlanceTileStrokeBrush): white at the
       top-left fading toward the card under it, with a hairline that fades the same way. */
    --set-tile-fill: linear-gradient(to bottom right, #FFFFFF 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, .2) 100%);
    --set-tile-stroke: linear-gradient(to bottom right, #E1E4EF 0%, rgba(225, 228, 239, .4) 60%, rgba(225, 228, 239, 0) 100%);
}

[data-bs-theme="dark"] {
    --set-ink: #E2E5EC;
    --set-text: #D9DBE8;
    --set-muted: #A9AEC4;
    --set-light: #858BA0;
    --set-icon: #AAB2C2;
    --set-icon-bg: #262B38;
    --set-card: #171C28;
    --set-card-border: #262C3C;
    --set-surface: rgba(255, 255, 255, .05);
    --set-section-bg: linear-gradient(180deg, #1D2230 0%, #171B26 42%, #12161F 100%);
    --set-section-border: #282E3D;
    --set-hero-bg: linear-gradient(158deg, #242938 0%, #1A1E2A 45%, #0B0F19 100%);
    --set-hero-border: #2B3142;
    --set-glass: rgba(255, 255, 255, .07);
    --set-glass-border: rgba(255, 255, 255, .11);
    --set-accent: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --set-accent-soft: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .16);
    --set-user: #60A5FA;
    --set-partner: #FBBF24;
    --set-glow-user: radial-gradient(circle at 0 0, rgba(37, 99, 235, .2) 0%, rgba(37, 99, 235, .09) 35%, rgba(37, 99, 235, 0) 62%);
    --set-glow-partner: radial-gradient(circle at 100% 0, rgba(217, 119, 6, .16) 0%, rgba(217, 119, 6, .07) 35%, rgba(217, 119, 6, 0) 62%);
    --set-focus: 0 0 0 3px hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .35);
    --set-plan: hsl(calc(252.5deg + var(--ci-accent-shift, 0deg)) 94.74% 85.1%);
    --set-plan-soft: hsl(calc(252deg + var(--ci-accent-shift, 0deg)) 33.33% 20.59%);
    --set-tile-fill: linear-gradient(to bottom right, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .012) 100%);
    --set-tile-stroke: linear-gradient(to bottom right, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, 0) 100%);
}

/* ------------------------------------------------------------------ Lit stat tiles (Update Account, Snapshot)

   The account-in-numbers tiles on Update Account and the In numbers tiles on the Snapshot page: lit from the top-left,
   fading toward the card (the transaction popup's tile recipe). The gradient hairline is a masked ::before, since a CSS
   border can't take a gradient over a translucent fill. */
.set-lit-tile {
    position: relative;
    background: var(--set-tile-fill);
}

.set-lit-tile::before {
    content: "";
    position: absolute;
    /* -1px: the owners keep a 1px transparent border for layout, so the ring sits on it rather than inside it. */
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(--set-tile-stroke);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* The All Access plan pill, wherever a Settings page shows it. */
.set-plan-pill {
    color: var(--set-plan);
    background: var(--set-plan-soft);
    border-color: transparent;
}

/* The page menu (the shared segmented menu) on a Settings page */
.tx-seg.set-tabs-seg { margin: 0 0 1.25rem; min-width: min(100%, 420px); }

@media (max-width: 575.98px) {
    .tx-seg.tx-seg-inline.set-tabs-seg { display: grid; width: 100%; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .tx-seg.tx-seg-inline.set-tabs-seg .tx-seg-pill { width: calc((100% - 8px) / var(--tx-seg-count, 2)); }
}

/* ------------------------------------------------------------------ The older Settings pages on the same chips */

/* My Accounts: section icons and counts go grey (the hero keeps the Accounts aqua). */
.mya-page .mya-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--set-icon-bg);
    color: var(--set-icon);
    font-size: .8rem;
}

.mya-page .mya-count { background: var(--set-icon-bg); color: var(--set-ink); }
.mya-page .mya-rail-wrap { background: var(--set-section-bg); border: 1px solid var(--set-section-border); }

/* Rules & Tags: the page's header chip. */
.rt-page .rt-head .rt-chip-icon { background: var(--set-icon-bg); color: var(--set-icon); border-color: var(--set-card-border); }

/* Accessibility: grey icon chips on a grey-faded card. */
.admin-a11y .a11y-icon { background: var(--set-icon-bg); color: var(--set-icon); }
.admin-a11y > .card { background: var(--set-section-bg) !important; border: 1px solid var(--set-section-border) !important; border-radius: 18px; box-shadow: none !important; }