/* =============================================================================
   Anatomy of a Budget — stylesheet
   -----------------------------------------------------------------------------
   Scoped under .wmg, plain CSS, loaded with {% static_v %}. The visual
   language is the AI Derailment Log's (reads/static/reads/css/derailment.css):
   grey paper, black crayon ink, one orange, rubber stamps, flat offset
   shadows, Space Mono. Copied in rather than shared, so neither page can
   break the other; the tokens below are the same values.

   Layout: one full-viewport tool (section 4). From 900x560 up the page does
   not scroll: a control bar, then two ledger pages edge to edge like an open
   book, each map taking half of what is left of its page. budgets.js reads
   the maps' boxes after layout and draws into them, so the CSS decides the
   size and the JS only fills it. Smaller screens stack the pages and scroll.

   Category colours: the owner's 10-colour palette, as flat fills (no hatching
   or dots inside a tile; they fought the numbers). Spending has 11 functions,
   so the ten colours go to the ten functions and interest on the debt is
   drawn in ink grey: not a service, the cost of past borrowing, kin to the
   empty dashed Borrowing tile. Which colour went where was chosen by laying
   out every country's maps and maximising the colour distance between tiles
   that touch; three of the ten are near-identical oranges, so keep that in
   mind before swapping two. Same fills in both themes. No legend: every tile
   has a label (when it fits), a doodle, a hover card and a table row.
   ============================================================================= */

/* 1. Tokens ------------------------------------------------------------------ */
.wmg {
    --paper: #eceae5;
    --card: #f8f7f3;
    --paper-tile: #fbfaf6;
    --ink: #191817;
    --ink-soft: #4d4945;
    --ink-mute: #7d7871;
    --orange: #ee6c1e;
    --orange-deep: #c9500f;
    --card-shadow: rgba(25, 24, 23, 0.92);
    --gutter: rgba(25, 24, 23, 0.16);       /* the fold between the two pages */
    --hair: rgba(25, 24, 23, 0.14);
    --rule: rgba(79, 120, 168, 0.13);       /* ledger ruling */
    --font-typewriter: 'Space Mono', 'Courier New', monospace;

    --alert: #e34948;                       /* deficit figure, "not to scale" stamp */

    /* spending */
    --c-social: #f3722c;
    --c-health: #43aa8b;
    --c-education: #277da1;
    --c-defence: #f94144;
    --c-economic: #f9c74f;
    --c-gps: #f8961e;
    --c-order: #4d908e;
    --c-housing: #577590;
    --c-environment: #90be6d;
    --c-culture: #f9844a;
    --c-interest: #4d4945;                  /* ink grey, outside the palette (see above) */
    --c-other: #9c968d;

    /* revenue */
    --r-income: #277da1;
    --r-ssc: #f3722c;
    --r-goods: #f9c74f;
    --r-property: #f94144;
    --r-trade: #90be6d;
    --r-othertax: #f8961e;
    --r-nontax: #43aa8b;

    font-family: var(--font-typewriter);
    color: var(--ink);
    background: var(--paper);
}
html.dark .wmg {
    --paper: #232120;
    --card: #1f1e1c;
    --paper-tile: #2a2826;
    --ink: #ebe7df;
    --ink-soft: #bdb7ad;
    --ink-mute: #8f897f;
    --card-shadow: rgba(0, 0, 0, 0.6);
    --gutter: rgba(0, 0, 0, 0.45);
    --hair: rgba(235, 231, 223, 0.14);
    --rule: rgba(57, 135, 229, 0.12);
    --alert: #e66767;

    /* The palette stays; only the two greys flip with the paper. */
    --c-interest: #bdb7ad;
    --c-other: #6f6a63;
}

.wmg-page { margin: 0; background: #eceae5; }
html.dark .wmg-page { background: #232120; }
.wmg-defs { position: absolute; width: 0; height: 0; }
.wmg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 2. Control bar ------------------------------------------------------------- */
.wmg-bar {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
    padding: .55rem 1rem;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
}
.wmg-brand {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--ink); text-decoration: none;
    font-size: .95rem; font-weight: 700; white-space: nowrap;
}
.wmg-brand svg { color: var(--orange); transition: transform .3s; }
.wmg-brand:hover svg { transform: translateX(-3px); }
.wmg-brand__mark { position: relative; }
.wmg-brand__mark::after {
    content: "";
    position: absolute; left: -.04em; right: -.06em; bottom: -.18em; height: .3em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 40 4, 80 13, 122 8 S 205 3, 244 9 S 286 12, 298 6' fill='none' stroke='%23ee6c1e' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 12 C 60 8, 110 14, 170 10 S 260 7, 294 10' fill='none' stroke='%23ee6c1e' stroke-width='2.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.wmg-pick { display: flex; align-items: center; gap: .45rem; }
.wmg-pick select {
    appearance: none; -webkit-appearance: none;
    min-width: 10rem;
    padding: .4rem 1.9rem .36rem .7rem;
    border: 1.5px solid var(--ink);
    border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ee6c1e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center;
    color: var(--ink);
    font: inherit; font-size: .8rem; font-weight: 700;
    box-shadow: 2px 2px 0 var(--card-shadow);
    cursor: pointer;
}
/* A click on a <select> matches :focus-visible too, so the pickers get no
   ring from the mouse; budgets.js sets .is-kbd while the keyboard is in use,
   and only then do they show one. */
.wmg-pick select:focus { outline: none; }
.wmg.is-kbd .wmg-pick select:focus-visible,
.wmg-swap:focus-visible, .wmg-seg button:focus-visible, .wmg-brand:focus-visible,
.wmg-drawer-btn:focus-visible, .wmg-theme:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.wmg-swap, .wmg-theme {
    width: 2.1rem; height: 2.1rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ink); border-radius: 50%;
    background: var(--card); color: var(--ink); cursor: pointer;
}
.wmg-swap { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.wmg-swap:hover { transform: rotate(180deg); }
.wmg-theme__sun, html.dark .wmg-theme__moon { display: none; }
html.dark .wmg-theme__sun { display: block; }
.wmg-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-left: auto; }
.wmg-seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px 5px 4px 6px; overflow: hidden; }
.wmg-seg button {
    padding: .42rem .62rem .38rem;
    border: 0; border-left: 1.5px solid var(--ink);
    background: transparent; color: var(--ink);
    font: inherit; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer;
}
.wmg-seg button:first-child { border-left: 0; }
.wmg-seg button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.wmg-seg button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.wmg-drawer-btn {
    padding: .45rem .15rem .3rem;
    border: 0; border-bottom: 2px solid var(--orange);
    background: none; color: var(--ink);
    font: inherit; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}

/* 3. Ledgers: two pages of an open book -------------------------------------- */
.wmg-ledgers { display: grid; grid-template-columns: minmax(0, 1fr); }
.wmg-ledger {
    position: relative;
    min-width: 0;
    background:
        repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
        var(--card);
    padding: .8rem 1rem 1rem;
}
.wmg-ledger + .wmg-ledger { border-top: 1.5px solid var(--ink); }
@media (min-width: 900px) {
    .wmg-ledgers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wmg-ledger { padding: .75rem 1.2rem .8rem; }
    .wmg-ledger + .wmg-ledger { border-top: 0; border-left: 1.5px solid var(--ink); }
    /* the fold: each page darkens a little towards the spine */
    .wmg-ledger[data-side="a"] { box-shadow: inset -18px 0 18px -18px var(--gutter); }
    .wmg-ledger[data-side="b"] { box-shadow: inset 18px 0 18px -18px var(--gutter); }
}

.wmg-ledger__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.wmg-ledger__flag { width: 30px; height: 30px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); }
.wmg-ledger__id { min-width: 0; }
.wmg-ledger__line { display: flex; align-items: center; gap: .6rem; }
.wmg-ledger__name { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; line-height: 1.15; }
.wmg-ledger__period { margin-top: .1rem; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }
.wmg-stamp {
    display: inline-block;
    padding: .28rem .55rem .22rem;
    border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px;
    border-radius: 2px;
    font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--orange-deep);
    transform: rotate(-3deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark .wmg-stamp { color: var(--orange); }
.wmg-ledger__line .wmg-stamp { padding: .18rem .42rem .14rem; font-size: 8.5px; }
.wmg-sums {
    margin-left: auto;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .05rem .9rem;
    font-size: .74rem; text-align: right;
}
.wmg-sums b { font-size: .86rem; }
.wmg-sums span { color: var(--ink-soft); white-space: nowrap; }
.wmg-sums .is-deficit b { color: var(--alert); }

.wmg-badge {
    display: none;
    flex-basis: 100%;
    align-items: center; gap: .6rem; flex-wrap: wrap;
    font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
}
.wmg-ledger.is-big .wmg-badge { display: flex; }
.wmg-badge .wmg-stamp { color: var(--alert); }
.wmg-badge button {
    border: 0; border-bottom: 2px solid var(--orange); background: none; color: var(--ink);
    font: inherit; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; padding: .2rem 0;
}

.wmg-map { margin-top: .6rem; }
.wmg-map__bar { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.wmg-map__title { font-size: .85rem; font-weight: 700; }
.wmg-crumbs { display: flex; align-items: center; gap: .35rem; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.wmg-crumbs button {
    border: 0; border-bottom: 1.5px solid var(--orange); background: none; color: var(--ink);
    font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: .1rem 0;
}
/* The box a map may fill. Scrolling layouts give it a height here; the
   full-viewport layout (section 4) lets it take what is left instead. */
.wmg-map__area {
    position: relative;
    margin-top: .4rem;
    height: clamp(15rem, 64vw, 30rem);
}
.wmg-ghost {
    position: absolute; top: 0; left: 0;
    border: 1.5px dashed var(--hair);
    border-radius: 4px;
    pointer-events: none;
}
.wmg-frame {
    position: relative;
    transition: width .7s cubic-bezier(.2, .8, .2, 1), height .7s cubic-bezier(.2, .8, .2, 1);
}
.wmg-frame svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Tiles */
.wmg-tile { cursor: default; outline: none; }
.wmg-tile.is-zoomable { cursor: zoom-in; }
.wmg-tile__shape {
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: filter .2s;
}
.wmg-tile.is-deficit .wmg-tile__shape { stroke-dasharray: 1.6 1.2; stroke-width: 1.6; }
.wmg-tile:hover .wmg-tile__shape, .wmg-tile:focus-visible .wmg-tile__shape { filter: brightness(1.08) saturate(1.1); stroke-width: 2.4; }
.wmg-tile:focus-visible .wmg-tile__shape { stroke: var(--orange); stroke-width: 3; }
.wmg-tile text { font-family: var(--font-typewriter); pointer-events: none; }
.wmg-tile__name { font-size: 11px; font-weight: 700; }
.wmg-tile__value { font-size: 10px; }
.wmg-tile text.t-dark { fill: #191817; }
.wmg-tile text.t-light { fill: #fffaf3; }
.wmg-tile text.t-ink { fill: #191817; }
html.dark .wmg-tile text.t-ink { fill: #ebe7df; }
/* Doodles are line drawings (the fills above are for text only). */
.wmg-tile__doodle { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wmg-tile__doodle.t-dark { stroke: #191817; }
.wmg-tile__doodle.t-light { stroke: #fffaf3; }
.wmg-tile__doodle.t-ink { stroke: var(--ink); }

/* Redraw: outlines drawn stroke by stroke, fills washed in after. */
.wmg-frame.is-drawing .wmg-tile__shape {
    animation: wmg-draw .75s ease-out both, wmg-fill .5s ease-out both;
    animation-delay: var(--d, 0s), calc(var(--d, 0s) + .35s);
}
.wmg-frame.is-drawing .wmg-tile text, .wmg-frame.is-drawing .wmg-tile__doodle {
    animation: wmg-fade .4s ease-out both;
    animation-delay: calc(var(--d, 0s) + .55s);
}
@keyframes wmg-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes wmg-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes wmg-fade { from { opacity: 0; } to { opacity: 1; } }

/* Margin notes: one compact block under the maps, flowing in a line or two */
.wmg-notes { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .1rem 1.3rem; }
.wmg-note {
    font-size: .74rem; font-style: italic; line-height: 1.45; color: var(--ink-soft);
    padding-left: 1.2rem; position: relative;
}
.wmg-note::before { content: "\270E"; position: absolute; left: 0; top: -.05em; color: var(--orange); font-style: normal; }
.wmg-map > .wmg-note { margin-top: .35rem; font-size: .7rem; }

/* The "tiny country" popup */
.wmg-popup {
    position: absolute;
    z-index: 5;
    right: 1rem;
    max-width: 17rem;
    padding: .9rem 1rem .9rem;
    background: var(--card);
    border: 1.5px solid var(--ink);
    border-radius: 12px 14px 12px 4px / 10px 12px 14px 4px;
    box-shadow: 4px 4px 0 var(--card-shadow);
    transform: rotate(-1.2deg);
    animation: wmg-pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes wmg-pop { from { opacity: 0; transform: rotate(-4deg) scale(.85); } }
.wmg-popup p { font-size: .88rem; line-height: 1.5; }
.wmg-popup p em { font-style: italic; color: var(--ink-soft); }
.wmg-popup__actions { margin-top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.wmg-popup button {
    padding: .45rem .7rem .4rem;
    border: 1.5px solid var(--ink); border-radius: 3px 5px 4px 6px;
    background: var(--card); color: var(--ink);
    font: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.wmg-popup button.is-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.wmg-popup button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* 4. Full viewport ----------------------------------------------------------- */
/* Wide and tall enough: no page scroll. The bar takes its natural height,
   the pages take the rest, and inside each page the head and notes take
   theirs while the two maps split what remains. */
@media (min-width: 900px) and (min-height: 560px) {
    .wmg-page { overflow: hidden; }
    .wmg { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
    .wmg-bar { flex: none; }
    .wmg-ledgers { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
    .wmg-ledger { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .wmg-ledger__head, .wmg-notes { flex: none; }
    .wmg-map { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .wmg-map__bar { flex: none; }
    .wmg-map__area { flex: 1 1 0; min-height: 0; height: auto; }
}

/* 5. Tooltip ----------------------------------------------------------------- */
.wmg-tip {
    position: fixed; z-index: 60;
    max-width: 19rem;
    padding: .65rem .8rem;
    background: var(--ink); color: var(--card);
    border-radius: 3px 6px 4px 7px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
    font-size: .76rem; line-height: 1.5;
    pointer-events: none;
}
.wmg-tip[hidden] { display: none; }
.wmg-tip b { display: block; font-size: .82rem; color: var(--orange); }
html.dark .wmg-tip b, html.dark .wmg-tip .tip-act { color: var(--orange-deep); }
.wmg-tip .tip-status { display: inline-block; margin-top: .3rem; padding: .05rem .35rem; border: 1px solid currentColor; border-radius: 2px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.wmg-tip .tip-note { display: block; margin-top: .35rem; opacity: .8; font-size: .7rem; }
.wmg-tip .tip-src { display: block; margin-top: .3rem; opacity: .75; font-size: .68rem; }
.wmg-tip .tip-act { display: block; margin-top: .35rem; color: var(--orange); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }

/* 6. Drawer ------------------------------------------------------------------ */
.wmg-drawer {
    margin: 0 0 0 auto;
    width: min(34rem, 100vw);
    max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    padding: 0;
    border: 0; border-left: 1.5px solid var(--ink);
    background: var(--card); color: var(--ink);
    box-shadow: -6px 0 0 var(--card-shadow);
}
.wmg-drawer::backdrop { background: rgba(10, 10, 10, .35); }
.wmg-drawer[open] { animation: wmg-slide .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes wmg-slide { from { transform: translateX(40px); opacity: 0; } }
.wmg-drawer__inner { padding: 1.6rem 1.4rem 3rem; }
.wmg-drawer__close {
    position: sticky; top: 0; float: right;
    width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--ink); border-radius: 50%;
    background: var(--card); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.wmg-drawer__title { margin-top: 1rem; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.wmg-drawer__method { margin-top: 1rem; padding-left: 1.1rem; font-size: .8rem; line-height: 1.65; color: var(--ink-soft); }
.wmg-drawer__method li { margin-top: .45rem; }
.wmg-drawer__method b { color: var(--ink); }
.wmg-drawer__country { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1.5px dashed var(--hair); font-size: .78rem; line-height: 1.6; color: var(--ink-soft); }
.wmg-drawer__country h3 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; color: var(--ink); }
.wmg-drawer__country h3 img { border-radius: 50%; }
.wmg-drawer__country.is-hit { scroll-margin-top: 1rem; }
.wmg-drawer__country.is-hit h3 { color: var(--orange-deep); }
html.dark .wmg-drawer__country.is-hit h3 { color: var(--orange); }
.wmg-drawer__country p, .wmg-drawer__country ul { margin-top: .45rem; }
.wmg-drawer__country ul { padding-left: 1.1rem; }
.wmg-drawer__sources { margin-top: .5rem; padding-left: 1.3rem; font-size: .72rem; }
.wmg-drawer__sources a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wmg-drawer__foot { margin-top: 1.6rem; font-size: .72rem; color: var(--ink-mute); }

/* Every number, as a table — at the foot of the drawer */
.wmg-table { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1.5px dashed var(--hair); }
.wmg-table summary {
    display: inline-block; cursor: pointer;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    border-bottom: 2px solid var(--orange); padding-bottom: .15rem;
}
.wmg-table summary::-webkit-details-marker { display: none; }
.wmg-table summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.wmg-table__country { margin-top: 1.2rem; overflow-x: auto; }
.wmg-table__country h3 { font-size: .9rem; font-weight: 700; }
.wmg-table__country h3 span { font-weight: 400; font-size: .74rem; color: var(--ink-mute); }
.wmg-table table { margin-top: .5rem; border-collapse: collapse; font-size: .7rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.wmg-table caption { text-align: left; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); padding: .2rem 0; }
.wmg-table th, .wmg-table td { padding: .28rem .45rem; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.wmg-table th[scope="row"], .wmg-table thead th:first-child { text-align: left; }
.wmg-table thead th { color: var(--ink-mute); font-weight: 400; }

/* 7. Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wmg-frame, .wmg-swap, .wmg-brand svg { transition: none; }
    .wmg-frame.is-drawing .wmg-tile__shape,
    .wmg-frame.is-drawing .wmg-tile text,
    .wmg-frame.is-drawing .wmg-tile__doodle { animation: none; }
    .wmg-popup, .wmg-drawer[open] { animation: none; }
}