/* Task 655 - the MaxWealth look (Design 21 "Warm African Pattern", Logo 2) over BudgetControl's markup.
   Loaded only when Brand:Name is not "BudgetControl" (staging), and scoped to html[data-theme] so it
   cannot leak onto live. LOOK ONLY: tokens, type and chrome - no layout that changes what a page does.
   Tokens match Projects\MaxWealth\Site\wwwroot\css\site.css and Marketing\site.css; change all together.
   Fonts: self-hosted under wwwroot/fonts because the CSP is font-src 'self' (no Google Fonts). Both are
   SIL OFL 1.1, latin subset from Fontsource. Design 21 is a light design: dark mode is pinned off. */
@font-face {
    font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/dm-serif-display-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/work-sans-latin-wght.woff2") format("woff2");
}
:root[data-theme="maxwealth"] {
    color-scheme: light;
    --mw-accent: #D99A2B;
    --cream: #F6EBDD; --cream2: #EFDFCB; --sand: #E6CFB2;
    --terra: #A3461E; --terra-d: #8A3A17; --ochre: #D99A2B; --ochre-d: #8A5A0B;
    --indigo: #1F2A5C; --indigo-d: #141B3D; --mw-ink: #2A1A10; --mw-ink2: #5B4334;
    --serif: 'DM Serif Display', Georgia, serif; --sans: 'Work Sans', system-ui, sans-serif;
    --zig: url("/img/mw-zig.svg");

    /* BudgetControl's own tokens, remapped. Every page reads these, so every page inherits the look. */
    --plane:   #F6EBDD;
    --surface: #ffffff;
    --raised:  #ffffff;
    --wash:    #EFDFCB;
    --ink:   #2A1A10;
    --ink-2: #5B4334;
    --muted: #6E5646;
    --border: #E6CFB2;
    --grid:   #EFDFCB;
    --shadow: 3px 3px 0 rgba(42, 26, 16, .12);
    --s1: #A3461E;
    --s1-ink: #ffffff;
    --s1-wash: #FBE7CC;
    --s2: #1F2A5C;
    --s2-wash: rgba(31, 42, 92, .10);
    --critical:   #b3261e;
    --delta-good: #1b6b3a;
    --warning:    #8A5A0B;
    --warning-wash: #FBE7CC;
    --navy:     #1F2A5C;
    --navy-ink: #ffffff;
    --navy-ink-2: #EADBC8;
    --navy-muted: #C9B9A6;
    --navy-line: rgba(255, 255, 255, .16);
    --navy-wash: rgba(255, 255, 255, .14);
    --r-1: 6px; --r-2: 12px; --r-3: 16px;
}

[data-theme="maxwealth"] body { font-family: var(--sans); background: var(--cream); color: var(--ink); }
[data-theme="maxwealth"] h1,
[data-theme="maxwealth"] h2 { font-family: var(--serif); font-weight: 400; letter-spacing: .2px; }
[data-theme="maxwealth"] a { color: var(--terra); }
[data-theme="maxwealth"] .bc-nav a { color: inherit; }
[data-theme="maxwealth"] :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

/* The rail: Design 21 indigo, ink edge. */
[data-theme="maxwealth"] .bc-nav { background: var(--indigo); border-right: 3px solid var(--mw-ink); }
[data-theme="maxwealth"] .bc-nav .brand { display: block; color: #fff; }

/* Logo 2 - same proportions as the app header (.mw-logo in the MaxWealth Site). */
[data-theme="maxwealth"] .mw-mark { display: block; }
[data-theme="maxwealth"] .mw-logo { width: 100%; max-width: 200px; height: auto; display: block; }
[data-theme="maxwealth"] .mw-mark small {
    display: block; font: 600 10px var(--sans); letter-spacing: 2.5px; text-transform: uppercase;
    margin-top: 3px; padding-left: 35.5%; white-space: nowrap; color: var(--navy-muted);
}

/* Public header and footer. */
[data-theme="maxwealth"] .pub-head {
    background: var(--cream); border-bottom: 3px solid var(--mw-ink);
    box-shadow: 0 4px 0 var(--ochre);
}
[data-theme="maxwealth"] .pub-brand { color: var(--mw-ink); text-decoration: none; }
[data-theme="maxwealth"] .pub-brand .mw-logo { --mw-accent: #A3461E; width: 200px; }
[data-theme="maxwealth"] .pub-brand .mw-mark small { color: var(--mw-ink2); }
[data-theme="maxwealth"] footer { background: var(--mw-ink); color: #EADBC8; }
[data-theme="maxwealth"] footer a { color: #FFD58A; }

/* Buttons: pill, ink border, offset shadow (Design 21 .btn). Colours only stay with the button's role. */
[data-theme="maxwealth"] button,
[data-theme="maxwealth"] .btn { border-radius: 999px; }
[data-theme="maxwealth"] button.primary,
[data-theme="maxwealth"] .btn-primary,
[data-theme="maxwealth"] button[type="submit"]:not(.danger):not(.link) {
    background: var(--terra); color: #fff; border: 2px solid var(--mw-ink); box-shadow: 3px 3px 0 var(--mw-ink);
}
[data-theme="maxwealth"] button.primary:hover,
[data-theme="maxwealth"] button[type="submit"]:not(.danger):not(.link):hover { background: var(--terra-d); }

/* Phone: the rail lies down as a strip (site.css, 60rem); keep the logo small there. */
@media (max-width: 60rem) {
    [data-theme="maxwealth"] .bc-nav { border-right: 0; border-bottom: 3px solid var(--mw-ink); }
    [data-theme="maxwealth"] .bc-nav .mw-logo { max-width: 140px; }
    [data-theme="maxwealth"] .bc-nav .mw-mark small { display: none; }
}
@media (max-width: 30rem) {
    [data-theme="maxwealth"] .pub-brand .mw-logo { width: 150px; }
}

/* Task 665 - burger menu below 768px. The open menu is a vertical list inside the sticky strip, with its
   own scroll so a long menu never runs off the bottom of a phone screen. */
@media (max-width: 767.98px) {
    [data-theme="maxwealth"] .bc-nav .mw-burger, [data-theme="maxwealth"] .pub-head .mw-burger { color: #fff; }
    .mw-nav-js .bc-nav .mw-menu.is-open {
        display: flex; flex-direction: column; gap: var(--sp-2); order: 0;
        max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem);
        overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) 0 var(--sp-3);
    }
    .mw-nav-js .bc-nav .mw-menu .nav-sections {
        grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; flex: none; gap: .1rem;
    }
    .mw-nav-js .bc-nav .mw-menu .nav-account { order: 0; margin: 0; }
    .mw-nav-js .bc-nav .mw-menu h2.nav-heading { display: block; }
    .mw-nav-js .bc-nav .mw-menu .nav-group { display: block; }   /* task 728 */
    .mw-nav-js .bc-nav .mw-menu summary.nav-heading { display: list-item; cursor: pointer; }
    .mw-nav-js .bc-nav .mw-menu .nav-item { padding: .6rem .7rem; font-size: var(--t-body); min-height: 44px; }
    .pub-head { flex-wrap: wrap; }
    .mw-nav-js .pub-head .mw-menu.is-open {
        display: flex; flex-direction: column; align-items: stretch; gap: .25rem; padding-top: .5rem;
    }
    .mw-nav-js .pub-head .mw-menu a { padding: .6rem .25rem; }
}

/* Task 665 - tablet band (768px to 60rem). The rail lies down as a strip here (site.css) but the nine
   section links were forced into one row: each label was clipped to ~27px, so the strip read as a row
   of icons with cut-off text. Measured at 768 in headless Edge. Let the links wrap onto a second line
   at their natural width instead - every label readable, nothing scrolls sideways. */
@media (min-width: 768px) and (max-width: 60rem) {
    .bc-nav .nav-sections { display: flex; flex-wrap: wrap; flex: 1 1 100%; gap: .2rem; }
    .bc-nav .nav-sections .nav-item { grid-template-columns: 18px auto auto; } /* task 714 - icon column back */
    .bc-nav .nav-label { overflow: visible; }
}
/* Task 674 - the appmaxwealth African-art pieces, ported onto the full-width app (layout untouched).
   Source: appmaxwealth.netdentity.net site.css (.border-band, .exec, .tile, .findings, .side a[aria-current]). */
:root[data-theme="maxwealth"] {
    --ndebele: url("/img/mw-ndebele.svg");
}
/* Patterns are files, not data: URIs - the CSP (default-src self, no img-src) blocks data: images. */
/* 1. The Ndebele band across the very top of the screen. */
[data-theme="maxwealth"] .mw-band {
    height: 32px; background: var(--ndebele) repeat-x; border-top: 3px solid var(--mw-ink); border-bottom: 3px solid var(--mw-ink);
}

/* 2. The summary card and its result tiles: ink frame, zigzag cap, offset shadow, big serif numbers. */
/* Task 703 (Johan, chat 1013): the box now holds only tiles + findings; the verdict sits above it as the
   marketing site's big full-width .verdict banner (Marketing\site.css - keep the two in step). */
[data-theme="maxwealth"] .tool-exec-body {
    background: #fff; border: 3px solid var(--mw-ink); border-radius: 20px; padding: 24px 26px; box-shadow: 8px 8px 0 var(--ochre);
}
[data-theme="maxwealth"] .tool-exec h2 { font-size: 26px; margin: 26px 0 12px; }
[data-theme="maxwealth"] .tool-demo {
    background: #FBE7CC; border: 2.5px solid var(--mw-ink); border-left: 12px solid var(--ochre); border-radius: 12px; padding: 12px 16px;
}
[data-theme="maxwealth"] .tool-demo a { font-weight: 700; margin-left: 6px; }
[data-theme="maxwealth"] .tool-banner {
    position: relative; overflow: hidden; margin: 0 0 22px; padding: 22px 60px 22px 26px;
    background: #fff; border: 3px solid var(--mw-ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--terra);
}
[data-theme="maxwealth"] .tool-banner::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22px;
    background: var(--ndebele); background-size: 66px 22px; border-left: 2.5px solid var(--mw-ink);
}
[data-theme="maxwealth"] .tool-exec .tool-banner .tool-verdict {
    font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.05; margin: 0; color: var(--terra);
}
[data-theme="maxwealth"] .tool-banner .tool-headline { margin: 10px 0 0; font-size: 19px; color: var(--mw-ink2); max-width: 620px; }
[data-theme="maxwealth"] .tool-score { font-family: var(--serif); font-weight: 400; font-size: 64px; color: var(--mw-ink); }
[data-theme="maxwealth"] .tool-score-of { font-family: var(--sans); font-weight: 600; color: var(--mw-ink2); margin-left: 4px; }
[data-theme="maxwealth"] .tool-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 18px; margin: 22px 0 6px; }
[data-theme="maxwealth"] .tool-tile {
    position: relative; overflow: hidden; background: #fff; border: 2.5px solid var(--mw-ink); border-radius: 16px;
    padding: 0 18px 18px; box-shadow: 4px 4px 0 var(--terra);
}
[data-theme="maxwealth"] .tool-tile::before {
    content: ""; display: block; height: 14px; margin: 0 -18px 14px;
    background: var(--zig) repeat-x, var(--terra); background-size: 24px 12px; border-bottom: 2.5px solid var(--mw-ink);
}
[data-theme="maxwealth"] .tool-tile:nth-child(4n+2) { box-shadow: 4px 4px 0 var(--indigo); }
[data-theme="maxwealth"] .tool-tile:nth-child(4n+2)::before { background-color: var(--indigo); }
[data-theme="maxwealth"] .tool-tile:nth-child(4n+3) { box-shadow: 4px 4px 0 var(--ochre-d); }
[data-theme="maxwealth"] .tool-tile:nth-child(4n+3)::before { background-color: var(--ochre-d); }
[data-theme="maxwealth"] .tool-tile:nth-child(4n) { box-shadow: 4px 4px 0 var(--mw-ink2); }
[data-theme="maxwealth"] .tool-tile:nth-child(4n)::before { background-color: var(--mw-ink2); }
[data-theme="maxwealth"] .tool-tile-label { font-size: 12.5px; font-weight: 700; color: var(--mw-ink2); text-transform: uppercase; letter-spacing: 1px; }
[data-theme="maxwealth"] .tool-tile-value {
    font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 6px 0 6px; color: var(--mw-ink);
}
[data-theme="maxwealth"] .tool-tile-meaning { font-size: 14px; color: var(--mw-ink2); }

/* 3. "What this means": Ndebele diamonds cycling terracotta, ochre, indigo. */
[data-theme="maxwealth"] .tool-findings { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
/* Task 729d: block + an absolutely placed diamond, not a 2-column grid - mw-nav.js (task 732) wraps every number
   in <strong class="mw-n">, and in a grid li each text run and <strong> became its own cell, squeezing the
   sentence into the 22px diamond column. */
[data-theme="maxwealth"] .tool-findings li { display: block; position: relative; padding-left: 32px; color: var(--mw-ink2); font-size: 16px; }
[data-theme="maxwealth"] .tool-findings li::before {
    content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 14px; background: var(--terra); transform: rotate(45deg); border: 2px solid var(--mw-ink);
}
[data-theme="maxwealth"] .tool-findings li:nth-child(3n+2)::before { background: var(--ochre); }
[data-theme="maxwealth"] .tool-findings li:nth-child(3n)::before { background: var(--indigo); }

/* Overview board cards get the same frame. */
[data-theme="maxwealth"] .tool-card { background: #fff; border: 2.5px solid var(--mw-ink); border-radius: 16px; transition: box-shadow .12s; }
[data-theme="maxwealth"] .tool-card:hover, [data-theme="maxwealth"] .tool-card:focus-visible { box-shadow: 6px 6px 0 var(--terra); }
[data-theme="maxwealth"] .tool-card.is-demo { border-style: dashed; }
[data-theme="maxwealth"] .tool-card-title { font-family: var(--serif); font-weight: 400; font-size: 26px; }
[data-theme="maxwealth"] .tool-card .tool-score { font-size: 44px; }
/* Task 705 (Johan) - a weak score on an Overview card is the tool page's verdict banner in small: ink frame,
   offset shadow, Ndebele edge - red (critical, under 40) or amber (behind, under 70). Healthy cards stay calm. */
[data-theme="maxwealth"] .tool-card .tool-card-banner {
    position: relative; overflow: hidden; padding: 12px 40px 12px 14px;
    border: 3px solid var(--mw-ink); border-radius: 14px;
}
[data-theme="maxwealth"] .tool-card .tool-card-banner::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 18px;
    background: var(--ndebele); background-size: 54px 18px; border-left: 2.5px solid var(--mw-ink);
}
[data-theme="maxwealth"] .tool-card .tool-card-banner.is-critical { background: #FBDCD3; box-shadow: 5px 5px 0 #B42318; }
[data-theme="maxwealth"] .tool-card .tool-card-banner.is-warn { background: #FBE7CC; box-shadow: 5px 5px 0 var(--ochre); }
[data-theme="maxwealth"] .tool-card-banner .tool-card-alert { font-family: var(--sans); font-size: 13px; letter-spacing: 1px; }
[data-theme="maxwealth"] .tool-card-banner.is-critical .tool-card-alert { background: #B42318; color: #fff; }
[data-theme="maxwealth"] .tool-card-banner.is-warn .tool-card-alert { background: var(--ochre-d); color: #fff; }
[data-theme="maxwealth"] .tool-card-banner.is-critical .tool-score,
[data-theme="maxwealth"] .tool-card-banner.is-critical .tool-verdict { color: #B42318; }
[data-theme="maxwealth"] .tool-card-banner.is-warn .tool-score,
[data-theme="maxwealth"] .tool-card-banner.is-warn .tool-verdict { color: var(--ochre-d); }
[data-theme="maxwealth"] .tool-card-banner .tool-verdict { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; background: none; border: 0; padding: 0; }

/* 4. The selected page in the rail - exactly appmaxwealth's .side a[aria-current="page"]: white, ink edge,
   terracotta offset shadow. Round 2 (chat 923/924): the zigzag hem read as small triangles; it is gone. */
[data-theme="maxwealth"] .nav-item[aria-current="page"] {
    background: #fff; color: var(--mw-ink); font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--mw-ink), 3px 3px 0 var(--terra);
}
[data-theme="maxwealth"] .nav-item[aria-current="page"] .nav-ico { color: var(--terra); }
[data-theme="maxwealth"] .nav-item[aria-current="page"] .nav-count { color: var(--mw-ink2); }

@media (max-width: 620px) {
    [data-theme="maxwealth"] .mw-band { height: 24px; background-size: 72px 24px; }
    [data-theme="maxwealth"] .tool-exec-body { padding: 16px; box-shadow: 4px 4px 0 var(--ochre); }
    [data-theme="maxwealth"] .tool-banner { padding: 18px; box-shadow: 4px 4px 0 var(--terra); }
    [data-theme="maxwealth"] .tool-banner::after { display: none; }
    [data-theme="maxwealth"] .tool-exec .tool-banner .tool-verdict { font-size: 36px; }
    [data-theme="maxwealth"] .tool-banner .tool-headline { margin-inline: auto; font-size: 17px; }
    [data-theme="maxwealth"] .tool-score { font-size: 48px; }
    [data-theme="maxwealth"] .tool-headline { min-width: 0; flex: 1 1 100%; }
    [data-theme="maxwealth"] .tool-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    [data-theme="maxwealth"] .tool-tile { padding: 0 12px 14px; }
    [data-theme="maxwealth"] .tool-tile::before { margin: 0 -12px 10px; }
    [data-theme="maxwealth"] .tool-tile-value { font-size: 28px; }
}
@media (max-width: 380px) { [data-theme="maxwealth"] .tool-tiles { grid-template-columns: 1fr; } }

/* Task 674 round 3 (Johan, chat 929-932) - the dock: graph LEFT, a full-height panel RIGHT that scrolls on
   its own and closes to a tab; a drawer on a phone. Structure is in mwcalc.css and mw-split.js; this is
   the skin. Round 4 (chat 936): the panel itself is PLAIN - no zigzag cap, no frames, no offset shadows. */
[data-theme="maxwealth"] .mw-dock:not(.is-inline) .mw-panel {
    background: #fff; border-left: 1px solid #D9C7B2; color: var(--mw-ink); box-shadow: -4px 0 16px rgba(42, 26, 16, .06);
}
[data-theme="maxwealth"] .mw-dock:not(.is-inline) .mw-panel-head { background: #fff; border-bottom: 1px solid #E6D6C2; }
[data-theme="maxwealth"] .mw-panel-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
[data-theme="maxwealth"] .mw-panel-close { border: 1.5px solid #8C6A50; }
[data-theme="maxwealth"] .mw-panel-close:hover { background: #F6EEE4; }
[data-theme="maxwealth"] .mw-adjust { background: var(--terra); border: 2.5px solid var(--mw-ink); box-shadow: 3px 3px 0 var(--mw-ink); }
[data-theme="maxwealth"] .mw-panel-tab {
    background: var(--indigo); border: 2.5px solid var(--mw-ink); border-right: 0; box-shadow: -3px 3px 0 var(--terra);
}
@media (min-width: 900px) {
    [data-theme="maxwealth"] .mw-dock .mw-split-handle { background-image: linear-gradient(var(--ochre), var(--ochre)); }
    [data-theme="maxwealth"] .mw-dock .mw-split-handle::after {
        background: var(--mw-ink); border: 2px solid var(--mw-ink);
        box-shadow: inset 0 9px 0 -7px var(--cream), inset 0 -9px 0 -7px var(--cream), 2px 2px 0 var(--terra);
    }
    [data-theme="maxwealth"] .mw-dock .mw-split-handle:hover,
    [data-theme="maxwealth"] .mw-dock .mw-split-handle.is-dragging { background-image: linear-gradient(var(--terra), var(--terra)); }
}
[data-theme="maxwealth"] .tool-tile.is-whatif .tool-tile-value { color: var(--indigo); }

/* Overview: the board takes the left; the tool cards stack one-up in the panel. */
[data-theme="maxwealth"] .mw-dock-overview > .board { max-width: none; margin: 0; }
[data-theme="maxwealth"] .mw-dock-overview .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
[data-theme="maxwealth"] .mw-dock-overview .board-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
[data-theme="maxwealth"] .mw-dock-overview .card.span-2 { grid-column: 1 / -1; }
[data-theme="maxwealth"] .mw-dock-overview:not(.is-inline) .tool-board { margin: 0; }
[data-theme="maxwealth"] .mw-dock-overview:not(.is-inline) .tool-cards { grid-template-columns: 1fr; }
[data-theme="maxwealth"] .mw-dock-overview:not(.is-inline) .mw-panel .tool-card { border: 1px solid #D9C7B2; border-radius: 12px; box-shadow: none; }
[data-theme="maxwealth"] .mw-dock-overview:not(.is-inline) .mw-panel .tool-card:hover,
[data-theme="maxwealth"] .mw-dock-overview:not(.is-inline) .mw-panel .tool-card:focus-visible { border-color: var(--mw-ink); box-shadow: none; }
[data-theme="maxwealth"] .mw-dock-overview.is-inline .mw-panel-title { font-family: var(--serif); margin-bottom: 12px; }

/* Graph card: the same ink frame as the summary. */
[data-theme="maxwealth"] .mwl-out { border: 2.5px solid var(--mw-ink); box-shadow: 5px 5px 0 var(--ochre); }
[data-theme="maxwealth"] .mwl h3 { font-family: var(--serif); }

/* Overview gets the full African-art treatment: KPI tiles and chart cards as zigzag-capped ink frames. */
[data-theme="maxwealth"] .board .tile,
[data-theme="maxwealth"] .board .card {
    position: relative; overflow: hidden; background: #fff; border: 2.5px solid var(--mw-ink); border-radius: 16px;
    box-shadow: 4px 4px 0 var(--terra); padding-top: 0;
}
[data-theme="maxwealth"] .board .tile::before,
[data-theme="maxwealth"] .board .card::before {
    content: ""; display: block; height: 14px; margin: 0 calc(-1 * var(--sp-4)) 12px;
    background: var(--zig) repeat-x, var(--terra); background-size: 24px 12px; border-bottom: 2.5px solid var(--mw-ink);
}
[data-theme="maxwealth"] .board .card::before { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
[data-theme="maxwealth"] .board .tile:nth-child(4n+2), [data-theme="maxwealth"] .board .card:nth-child(4n+2) { box-shadow: 4px 4px 0 var(--indigo); }
[data-theme="maxwealth"] .board .tile:nth-child(4n+2)::before, [data-theme="maxwealth"] .board .card:nth-child(4n+2)::before { background-color: var(--indigo); }
[data-theme="maxwealth"] .board .tile:nth-child(4n+3), [data-theme="maxwealth"] .board .card:nth-child(4n+3) { box-shadow: 4px 4px 0 var(--ochre-d); }
[data-theme="maxwealth"] .board .tile:nth-child(4n+3)::before, [data-theme="maxwealth"] .board .card:nth-child(4n+3)::before { background-color: var(--ochre-d); }
[data-theme="maxwealth"] .board .tile:nth-child(4n), [data-theme="maxwealth"] .board .card:nth-child(4n) { box-shadow: 4px 4px 0 var(--mw-ink2); }
[data-theme="maxwealth"] .board .tile:nth-child(4n)::before, [data-theme="maxwealth"] .board .card:nth-child(4n)::before { background-color: var(--mw-ink2); }
[data-theme="maxwealth"] .board .tile .lbl { font-weight: 700; color: var(--mw-ink2); letter-spacing: 1px; }
[data-theme="maxwealth"] .board .tile .val { font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: 0; color: var(--mw-ink); }
[data-theme="maxwealth"] .board .card header h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; }
[data-theme="maxwealth"] .tool-board > h2 { font-size: 30px; margin: 0 0 14px; }
[data-theme="maxwealth"] .tool-card { box-shadow: 4px 4px 0 var(--ochre); }
@media (max-width: 620px) {
    [data-theme="maxwealth"] .board .tile .val { font-size: 26px; }
    [data-theme="maxwealth"] .board .tile::before { margin: 0 calc(-1 * var(--sp-3)) 10px; }
    [data-theme="maxwealth"] .board .card::before { margin: 0 calc(-1 * var(--sp-3)) 10px; }
}

/* Task 688 - ONE form grid for every tool page. Add class "mw-grid" to a form (or a block of labels): fields sit in
   equal columns and overflow wraps into the same columns on the next line. Repeating records: put "mw-grid-list" on
   the list and a first row "mw-grid mw-grid-head" holding one <span> per field (aria-hidden); each row's own label
   text sits in <span class="mw-cap"> and is hidden from sight (not from screen readers) while the header shows.
   Narrow column variant: "mw-grid-narrow". On a phone everything is one column and the captions come back. */
.mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 12px 16px; align-items: end; }
.mw-grid.mw-grid-narrow { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.mw-grid > label { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0; flex: none; }
.mw-grid > label > input:not([type="checkbox"]):not([type="radio"]), .mw-grid > label > select { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }
.mw-grid > label > input[type="checkbox"], .mw-grid > label > input[type="radio"] { align-self: flex-start; margin: 6px 0; }
.mw-grid > button { justify-self: start; align-self: end; }
.mw-grid > h2, .mw-grid > h3, .mw-grid > p, .mw-grid > details, .mw-grid > summary, .mw-grid > fieldset,
.mw-grid > .entity-default, .mw-grid > .mw-span { grid-column: 1 / -1; margin: 0; }
.mw-grid > details.mw-grid { padding: 0; }
.mw-grid-list { list-style: none; margin: 0; padding: 0; }
.mw-grid-head { font-size: var(--t-small, 13px); font-weight: 600; color: var(--muted, #475467); padding: 0 0 .3rem; border: 0; }
.mw-grid-head > span { min-width: 0; overflow-wrap: anywhere; }
.mw-grid-list .mw-cap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 40rem) {
    .mw-grid, .mw-grid.mw-grid-narrow { grid-template-columns: 1fr; }
    .mw-grid > button { justify-self: stretch; }
    .mw-grid-head { display: none; }
    .mw-grid-list .mw-cap { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}
/* Task 689 - the sign-in merge prompt on /account: conflicts side by side. */
#account-merge .merge-section { margin: 0.75rem 0; }
#account-merge .merge-section h3 { margin: 0 0 0.25rem; font-size: 1rem; }
#account-merge table.merge-conflict { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.25rem; font-size: 0.9rem; }
#account-merge table.merge-conflict caption { text-align: left; font-weight: 600; padding-bottom: 0.25rem; }
#account-merge table.merge-conflict th, #account-merge table.merge-conflict td { text-align: left; padding: 0.2rem 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); overflow-wrap: anywhere; }
#account-merge .merge-win { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
#account-login.is-primary { font-weight: 600; outline: 2px solid currentColor; }