/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(vendor/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(vendor/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.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;
}
/* Public-account presentation only. Never place unscoped rules here:
   family sessions share app.html, and all behaviour remains in existing JS. */
body.sx.public-account,
body.public-page {
    --sx-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --sx-mono: var(--sx-sans);
    --fp-lime: #e6f79b;
    --fp-panel: #e3e5e0;
    --fp-panel-deep: #d7dbd3;
    --sx-bg-from: #e9ebe6;
    --sx-bg-to: #e9ebe6;
    --sx-surface: #f7f8f3;
    --sx-text: #232620;
    --sx-muted: #5b6255;
    --sx-muted-2: #5b6255;
    --sx-faint: #68705f;
    --sx-accent: #3f532d;
    --sx-pos: #39632d;
    --sx-neg: #9a4738;
    --sx-row-hover: #edf3dd;
    --sx-card-shadow: none;
    --sx-card-border: 1px solid #23262020;
    --sx-fs-tiny: 11px;
    --sx-fs-xs: 11px;
    --sx-fs-sm: 12px;
    --bw-bonds: #b8c88e;
    --bw-equity: #5d7542;
    --bw-theme: #8d9287;
    --bw-stock: #bda674;
    --bg: var(--sx-bg-from);
    --bg-secondary: #e3e5e0;
    --card-bg: var(--sx-surface);
    --text: var(--sx-text);
    --text-muted: var(--sx-muted);
    --text-secondary: var(--sx-muted);
    --border: #23262026;
    --primary: var(--sx-accent);
    --primary-light: #3f532d14;
    --green: var(--sx-pos);
    --red: var(--sx-neg);
    --header-bg: var(--sx-surface);
    --fp-ink: #20231e;
    /* Legacy components keep their original colours unless this account opts in. */
    --fp-surface: var(--sx-surface);
    --fp-canvas: var(--sx-bg-from);
    --fp-inset: #e3e5e0;
    --fp-soft: #eef0e9;
    --fp-hover: var(--sx-row-hover);
    --fp-selected: #e6f79b;
    --fp-text: var(--sx-text);
    --fp-muted: var(--sx-muted);
    --fp-accent: var(--sx-accent);
    --fp-accent-rgb: 63,83,45;
    --fp-border: #d1d6ca;
    --fp-positive: var(--sx-pos);
    --fp-negative: var(--sx-neg);
    --fp-positive-fill: rgba(57,99,45,0.25);
    --fp-negative-fill: rgba(154,71,56,0.25);
    --fp-chart-secondary: #b8c88e;
    --fp-chart-1: #5d7542;
    --fp-chart-2: #b8c88e;
    --fp-chart-3: #8d9287;
    --fp-chart-4: #6689a5;
    --fp-chart-5: #bda674;
    --fp-chart-6: #bbc8a7;
    --fp-chart-7: #d9b087;
    --fp-chart-8: #797f9e;
    --fp-chart-9: #b68187;
    --fp-chart-10: #8bafa9;
    --fp-chart-11: #8c795f;
    --fp-chart-12: #c5bccd;
    background: var(--sx-bg-from);
    color: var(--sx-text);
    font-family: var(--sx-sans);
}
body.sx.public-account .topbar {
    background: var(--sx-surface);
    color: var(--sx-text);
    border-bottom: 1px solid var(--fp-border);
    box-shadow: none;
    backdrop-filter: none;
    gap: 18px;
    flex-wrap: wrap;
}
body.sx.public-account .topbar-left,
body.sx.public-account .topbar-right { flex-wrap: wrap; }
body.sx.public-account .topbar .brand {
    color: var(--sx-text);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -1.2px;
}
body.sx.public-account .topbar .brand .acc { color: inherit; }
body.sx.public-account .topbar .brand::before,
body.public-page .brand::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 34px;
    margin-right: 9px;
    vertical-align: -8px;
    background: url("full-pocket.svg") center / contain no-repeat;
}
body.sx.public-account .topbar .nav { color: var(--sx-muted); }
body.sx.public-account .topbar .nav:hover { background: var(--fp-soft); color: var(--sx-text); }
body.sx.public-account .topbar .nav.on,
body.sx.public-account .topbar .nav.active {
    background: var(--fp-ink);
    color: #f3f5ed;
    box-shadow: none;
}
body.sx.public-account .topbar .btn-ghost { color: var(--sx-text); }
body.sx.public-account .topbar .account-switch small,
body.sx.public-account .topbar .micro { color: #5b6255; }
body.sx.public-account .topbar .avatar { background: #e6f79b; color: #232620; }
body.sx.public-account .btn-prim,
body.sx.public-account .btn-primary,
body.sx.public-account .etfp-btn-prim {
    background: var(--fp-lime);
    border-color: var(--fp-lime);
    color: #232620;
    border-radius: 24px;
    box-shadow: none;
}
body.sx.public-account :is(.btn-prim, .btn-primary, .etfp-btn-prim):hover { background: #d8ed80; color: #232620; }
body.sx.public-account .btn-dark { background: #232620; color: #e9ebe6; border-radius: 24px; }
body.sx.public-account :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid #3f532d;
    outline-offset: 3px;
}
body.sx.public-account .topbar :is(button, a):focus-visible { outline-color: var(--sx-accent); }
body.sx.public-account :is(button, input, select, textarea, .sd, .ticker-dropdown-item, .invest-table .num) { font-family: var(--sx-sans); }
body.sx.public-account :is(.tg-grid, .tg-grid > div, .tg-grid .tg-name, .tg-grid.head .micro) { font-family: var(--sx-sans) !important; }
body.sx.public-account :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select, textarea) {
    background: var(--sx-surface);
    color: var(--sx-text);
    border-color: var(--fp-border);
    font-family: var(--sx-sans);
}
body.sx.public-account :is(input, textarea)::placeholder { color: var(--sx-muted); }
body.sx.public-account :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--sx-accent); }
body.sx.public-account :is(input, select, textarea):disabled { background: #e3e8e5; color: #5b6255; }
body.sx.public-account .home-title,
body.sx.public-account .learn-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.15;
}
body.sx.public-account .home-card,
body.sx.public-account .pa-card {
    background: var(--sx-surface);
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: 22px;
}
body.sx.public-account .home-next-card { background: var(--fp-lime); }
body.sx.public-account .home-next-card button {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #f3f5ed;
}
body.sx.public-account .home-next-card button:hover { background: #3d4533; }
body.sx.public-account #home-gainers { background: var(--fp-lime); }
body.sx.public-account #home-losers { background: var(--fp-panel-deep); }
body.sx.public-account .home-indices,
body.sx.public-account .pf-kcard:nth-child(2),
body.sx.public-account .bs #your-money {
    --sx-text: #f3f5ed;
    --sx-muted: #c3c9b9;
    --sx-muted-2: #c3c9b9;
    --sx-pos: #d9ef9a;
    --sx-neg: #f0b3a5;
    --green: #d9ef9a;
    --red: #f0b3a5;
    --fp-positive: #d9ef9a;
    --fp-negative: #f0b3a5;
    --sx-soft-3: #ffffff26;
    --fp-muted: #c3c9b9;
    --fp-border: #ffffff26;
    background: var(--fp-ink);
    color: var(--sx-text);
}
body.sx.public-account .learn-guide-card { background: var(--fp-lime); color: var(--sx-text); }
body.sx.public-account .pf-hero { background: var(--fp-panel); border-radius: 22px; }
body.sx.public-account .pf-kcard { background: var(--fp-lime); }
body.sx.public-account .pf-kcard-tint { background: var(--fp-lime); }
body.sx.public-account .pf-name { font-size: clamp(26px, 3.5vw, 38px); letter-spacing: -1px; }
body.sx.public-account .pf-hero-value .kpi-value-lg { font-size: clamp(32px, 4vw, 44px); }
body.sx.public-account .pa-kpis > div { background: var(--fp-lime); }
body.sx.public-account .pa-kpis > div:nth-child(2) { background: var(--fp-panel); }
body.sx.public-account .pa-kpis > div:nth-child(3) { background: var(--fp-lime); }
body.sx.public-account .bs { background: var(--sx-bg-from); color: var(--sx-text); }
body.sx.public-account .bs h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: -1.3px;
    line-height: 1.15;
}
body.sx.public-account .bs :is(.lede, .hint, .mixdesc, .choice-d, .costsub, .revmeta, .empty) {
    color: var(--sx-muted);
    line-height: 1.6;
}
body.sx.public-account .bs :is(.acc, a, .editbtn) { color: var(--sx-accent); }
body.sx.public-account .bs :is(.card, .revcard, .part, .choice, .mix-choice) {
    background: var(--sx-surface);
    border-color: var(--border);
    box-shadow: none;
}
body.sx.public-account .bs .step-n { background: var(--fp-ink); color: #f3f5ed; }
body.sx.public-account .bs :is(.amt input, .txt) {
    background: var(--sx-surface);
    color: var(--sx-text);
    border-color: #95a69b;
}
body.sx.public-account .bs :is(.amt input, .txt):focus { border-color: var(--sx-accent); }
body.sx.public-account .bs .step:has(#bw-amount) { background: var(--fp-lime); border-radius: 22px; padding: 24px; }
body.sx.public-account .bs #bw-amount { background: var(--sx-surface); }
body.sx.public-account .bs #bw-monthly { background: var(--fp-panel); }
body.sx.public-account .bs .quick { flex-wrap: wrap; }
body.sx.public-account .bs .quick button { border-radius: 22px; background: #e3e5e0; color: var(--sx-text); }
body.sx.public-account .bs .mix-choice { padding: 20px; border-radius: 18px; background: var(--fp-panel); }
body.sx.public-account .bs :is(.mix-choice.on, .choice.on, .fund.on) {
    background: #e6f79b;
    border-color: #3f532d;
    box-shadow: inset 3px 0 #3f532d;
}
body.sx.public-account .bs .mix-choice-name { font-size: 20px; font-weight: 500; }
body.sx.public-account .bs input { accent-color: #3f532d; }
body.sx.public-account .bs .choice.on .radio,
body.sx.public-account .bs .fund.on .radio { border-color: #3f532d; }
body.sx.public-account .bs .choice.on .radio::after,
body.sx.public-account .bs .fund.on .radio::after { background: #3f532d; }
body.sx.public-account .bs .btn {
    background: var(--fp-lime);
    color: #232620;
    border-color: var(--fp-lime);
    border-radius: 24px;
}
body.sx.public-account .bs .btn:hover { background: #d8ed80; color: #232620; }
body.sx.public-account .bs #your-money { border-color: var(--fp-border); }
body.sx.public-account .bs #your-money .lbl { color: var(--sx-muted); }
body.sx.public-account .bs #your-money .sprow { border-color: var(--fp-border); }
body.sx.public-account .bs .sp .lbl { font-size: 11px; }
body.sx.public-account .bs .mix-percentages { font-size: 12px; line-height: 1.6; }
body.sx.public-account :is(.modal-content, .etfp-modal) { background: var(--sx-surface); }
body.sx.public-account .np-options { display: grid; gap: 14px; }
body.sx.public-account .np-options[hidden] { display: none; }
body.sx.public-account .np-options p { margin: 0 0 4px; color: var(--sx-muted); }
body.sx.public-account .np-option { display: grid; gap: 10px; width: 100%; padding: 22px; border: 1px solid var(--fp-border); border-radius: 18px; background: var(--fp-panel); color: var(--sx-text); text-align: left; cursor: pointer; }
body.sx.public-account .np-option:first-of-type { background: var(--fp-lime); }
body.sx.public-account .np-option:hover { border-color: var(--sx-accent); }
body.sx.public-account .np-option strong { display: flex; justify-content: space-between; gap: 12px; font-size: 19px; font-weight: 500; }
body.sx.public-account .np-option > span { font-size: 14px; line-height: 1.5; color: var(--sx-muted); }
body.sx.public-account #np-back { margin-bottom: 20px; }
@media (max-width: 768px) {
    body.sx.public-account .holdings-soft-row {
        --fp-holding-fill: var(--sx-surface);
        background: var(--fp-holding-fill);
    }
    body.sx.public-account .holdings-soft-row:hover { --fp-holding-fill: var(--sx-row-hover); }
    body.sx.public-account .holdings-soft-row > [data-col="ticker"] {
        box-shadow: 18px 0 0 0 var(--fp-holding-fill);
    }
    body.sx.public-account .holdings-soft-row > [data-col="name"] {
        background: var(--fp-holding-fill);
        box-shadow: 10px 0 0 0 var(--fp-holding-fill), 16px 0 11px -8px #23262029;
    }
}
@media (max-width: 700px) {
    body.sx.public-account .topbar { padding: 16px; gap: 14px; }
    body.sx.public-account .topbar-left { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 4px; }
    body.sx.public-account .topbar .brand { grid-column: 1 / -1; margin: 0 0 6px; }
    body.sx.public-account .topbar .nav { padding: 12px 4px; text-align: center; font-size: 12px; }
    body.sx.public-account .topbar-right { gap: 8px; }
    body.sx.public-account .bs .amt { max-width: 100%; }
    body.sx.public-account .bs .amt input { max-width: 100%; }
    body.sx.public-account :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.sx.public-account *, body.sx.public-account *::before, body.sx.public-account *::after {
        scroll-behavior: auto;
        transition-duration: 0s;
    }
}
/* Disabled controls must stay visibly unavailable after recolouring. */
body.sx.public-account .bs .btn:disabled,
body.sx.public-account .bs .btn:disabled:hover,
body.sx.public-account :is(.btn-prim, .btn-primary, .etfp-btn-prim):disabled,
body.sx.public-account :is(.btn-prim, .btn-primary, .etfp-btn-prim):disabled:hover {
    background: #e3e8e5;
    color: #5b6255;
    border-color: #e3e8e5;
    cursor: not-allowed;
}
body.sx.public-account .etfp-row .etfp-dist.acc { background: #e6f79b; color: #5d7542; }
body.sx.public-account .etfp-row .etfp-dist.dist { background: #e3e5e0; color: #515b49; }
body.sx.public-account .bs .chip-num[aria-pressed="true"] {
    border-color: #3f532d;
    box-shadow: inset 0 0 0 1px #3f532d;
    color: #232620;
}
body.sx.public-account .home-page { background: var(--sx-bg-from); }
body.sx.public-account .home-head { position: static; background: transparent; box-shadow: none; backdrop-filter: none; }
body.sx.public-account .home-title { font-family: var(--sx-sans); }
body.sx.public-account .learn-guide { background: var(--sx-surface); border-color: var(--border); }
body.sx.public-account .learn-guide-card:hover { background: var(--fp-lime); }
body.sx.public-account .learn-guide-art { background: #dbe7b9; }
body.sx.public-account .learn-allocation .learn-guide-art { background: #d7dbd3; }
body.sx.public-account .learn-behaviour .learn-guide-art { background: #e6f79b; }
body.sx.public-account .learn-guide-seal { background: #232620; color: #e9ebe6; }
body.sx.public-account :is(.learn-kicker, .learn-guide-action, .learn-guide-sources a) { color: var(--sx-accent); }

/* The subscription screen is a separate public page. */
body.public-page { font-family: var(--sx-sans); }
body.public-page :is(h1, h2) { font-weight: 500; }
body.public-page a { color: var(--sx-accent); }
body.public-page header { background: var(--sx-surface); border-bottom: 1px solid var(--fp-border); }
body.public-page header :is(a, .brand, .brand span) { color: var(--sx-text); }
body.public-page .brand { font-family: inherit; font-size: 24px; font-weight: 500; letter-spacing: -1px; text-transform: lowercase; white-space: nowrap; }
body.public-page .brand span { display: none; }
body.public-page .plan { background: var(--sx-surface); border-color: var(--fp-border); box-shadow: none; }
body.public-page :is(.date, #refresh) { color: var(--sx-muted); }
body.public-page button { background: var(--fp-lime); color: var(--sx-text); border-color: var(--fp-lime); border-radius: 24px; }
body.public-page button:hover:not(:disabled) { background: #d8ed80; }
body.public-page button:disabled { background: #e3e8e5; color: #5b6255; border-color: #e3e8e5; }
body.public-page :is(a, button):focus-visible { outline: 3px solid var(--sx-accent); outline-offset: 3px; }
body.public-page header a:focus-visible { outline-color: var(--sx-accent); }
body.public-page footer { border-color: var(--fp-border); }

/* Narrow public screens need shrinking tracks, not min-content card widths. */
body.sx.public-account .portfolio-cards-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.sx.public-account .pcard { min-width:0; }
body.sx.public-account .pcard-name { white-space:normal; overflow-wrap:anywhere; }
body.sx.public-account :is(.etfp-cat-item, .etfp-row):focus-visible { outline:3px solid var(--sx-accent); outline-offset:-3px; }
@media(max-width:960px) { body.sx.public-account .portfolio-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
    body.sx.public-account .portfolio-list-page { padding:12px 0; }
    body.sx.public-account .portfolio-cards-grid { grid-template-columns:minmax(0,1fr) !important; padding:0; }
    body.sx.public-account .pcard { padding:22px 20px; }
}
@media(max-width:360px) {
    body.sx.public-account .topbar-left { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:480px) {
    body.sx.public-account .bsave-trow > label:has(input[type="date"]) { grid-column:1 / -1; }
}