/* ============= RETRO ACCENTS =============
   A warm, 1970s-poster vibe inspired by retro sci-fi game art, tuned to
   Arko's own palette. Mostly colour: earthier page accents (burnt orange,
   mustard, sage, dusty violet) that the ambient light follows, a poster
   palette for charts and card colours, poster type and cream captions. Then a printed texture on
   the cards and panels only (never the whole screen), and a few small
   motifs — corner stripes, banded title underlines, arches behind the
   sign-in card.

   Entirely optional and self-contained: retro.js adds html.arko-retro and
   the decorative elements; everything visual is in this file. To undo,
   remove the retro.css / retro.js includes (or revert the commits that
   added them). Nothing here changes layout or behaviour. */

/* Chunky 1970s grotesk for the small all-caps labels. */
/* Archivo is requested by each page's own Google Fonts link (one request,
   discovered early) rather than an @import here. */

:root {
  --retro-cream: #E8E1D3;
  --retro-blue: #6E8FA3;
  --retro-denim: #4B7AA1;
  --retro-mustard: #D9A441;
  --retro-rust: #C8693A;
}

/* ---- 0. colour: each page's accent shifts to an earthier, poster-print tone ---- */
html.arko-retro {
  --page-bg: #0F1114;            /* ink rather than navy */
  --spend-accent: #DE7744;       /* coral -> burnt orange */
  --brass: #C08A2E;              /* brass -> mustard */
  --brass-bright: #E2AE45;
  --brass-dim: #5E4318;
  --ledger-accent: #E2AE45;
  --ledger-accent-rgb: 226, 174, 69;
  --emerald: #4E9C78;            /* mint -> retro sage */
  --emerald-bright: #74BF97;
  --violet-bright: #AD8CC4;      /* violet -> dusty violet */
  --violet-dim: #8B6FA6;
  --add-bg: #19201B;             /* Log rows: sage / oxblood / brass ink, a touch less saturated */
  --subtract-bg: #221716;
  --transfer-bg: #221E15;
}

/* ---- 1. edges a little darker, like an old print (neutral — no added colour) ---- */
.retro-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(4, 5, 8, 0.42) 100%);
}

/* ---- the ambient lighting takes only the page's own colour ----
   retro.js sets --retro-page-accent per page (matching the accents above);
   both the accent pools and the "neon" pool / streak use it, so a page's
   light is one colour. !important beats ambient.js's inline values. */
html.arko-retro { --amb-page-accent: var(--retro-page-accent, #6E8FA3) !important; }
html.arko-retro .arko-ambient {
  --amb-accent: var(--retro-page-accent, #6E8FA3) !important;
  --amb-neon: var(--retro-page-accent, #6E8FA3) !important;
}
/* The lit strip under the sticky header too — page colour end to end. */
html.arko-retro.arko-ambient-on .dash-header::after {
  background: linear-gradient(90deg, transparent 6%,
    color-mix(in srgb, var(--amb-page-accent) 60%, transparent) 30%,
    color-mix(in srgb, var(--amb-page-accent) 90%, transparent) 50%,
    color-mix(in srgb, var(--amb-page-accent) 60%, transparent) 70%, transparent 94%);
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--amb-page-accent) 35%, transparent);
}

/* ---- 2. speckle grunge on the darker subsections only ----
   A worn-print grain with a scattering of ink specks and dust, on the small
   darker panels and tiles (chart boxes, cash-flow tiles, ledger panels,
   account cards, stat tiles, Coming up rows…). The glass money cards stay
   clean. Judged at full size: fine grain, no clouds or blotches. */
html.arko-retro :is(.spend-section, .merchant-stat, .cashflow-item, .chart-box, .category-panel, .history-item, .vault-chart-box, .account-card, .upcoming-row, .txn-review-empty) { isolation: isolate; }
html.arko-retro :is(.spend-section, .merchant-stat, .chart-box, .history-item, .vault-chart-box, .upcoming-row, .txn-review-empty) { position: relative; }
/* …except the Year summary, which is sticky (any positioning holds the texture). */
html.arko-retro .spend-year-summary { position: sticky; }
.retro-wear {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22t%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20seed%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%221.6%200%200%200%20-0.3%201.6%200%200%200%20-0.3%201.6%200%200%200%20-0.3%200%200%200%200%200.14%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23t)%22%2F%3E%3Cfilter%20id%3D%22s%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.58%22%20numOctaves%3D%221%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.01%200%200%200%200%200.01%200%200%200%200%200.01%2014%200%200%200%20-10.1%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23s)%22%2F%3E%3Cfilter%20id%3D%22l%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.66%22%20numOctaves%3D%221%22%20seed%3D%2214%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.93%200%200%200%200%200.9%200%200%200%200%200.83%2016%200%200%200%20-12.6%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23l)%22%2F%3E%3C%2Fsvg%3E") 0 0 / 220px 220px;
  opacity: 0.6;
  box-shadow: inset 0 0 22px rgba(4, 5, 8, 0.22);
}

/* ---- small all-caps labels in a chunky poster grotesk ---- */
html.arko-retro :is(.card-label, .add-category-label, .link-group-total-label, .spend-total-label, .merchant-list-title,
  .merchant-stat span, .spend-year-month-head, .spend-year-legend-group, .spend-sub-badge, .spend-txn-sub-tag,
  .budget-title-row .budget-eyebrow, .cashflow-item .cf-label, .chart-box-title, .period-status-pill, .history-item-status,
  .ledger-col-heads, .logmirror-amount-label, .vault-title-row .vault-eyebrow, .vault-chart-box-title, .vault-divider,
  .networth-label, .networth-stat .nw-label, .account-card-type-pill, .account-card-live-badge, .account-card-stale-badge,
  .account-card-reconnect-badge, .sav-goal-status-chip, .log-table th, .manual-entry-head-title, .activity-panel-title,
  .notes-panel-title, .palette-section, .txn-sub-badge, .txn-transfer-badge, .txn-cardpayment-badge, .notify-new,
  .upcoming-date small, .feature-preview-tier-badge, .tier-current-badge, .current-pill) {
  font-family: 'Archivo', 'Public Sans', sans-serif;
  font-weight: 700;
  font-stretch: 100%;
}
/* Page eyebrows have room to breathe — a little wider, like poster type. */
html.arko-retro :is(.budget-title-row .budget-eyebrow, .vault-title-row .vault-eyebrow, .spend-total-label, .networth-label) {
  font-stretch: 116%; font-weight: 800;
}

/* ---- poster details ---- */
/* Toasts read like a poster's cream caption strip: ink type on cream. */
html.arko-retro .arko-toast {
  background: rgba(232, 225, 211, 0.97); color: #17181C;
  border-color: rgba(23, 24, 28, 0.18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 225, 211, 0.25);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.arko-retro .arko-toast-msg { font-weight: 600; }
html.arko-retro .arko-toast-btn {
  background: #17181C; border-color: #17181C; color: #E8E1D3;
  font-family: 'Archivo', 'Public Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem;
}
html.arko-retro .arko-toast-btn:hover { background: #2A2C33; box-shadow: none; }
html.arko-retro .arko-toast-close { color: #6B6A66; }
html.arko-retro .arko-toast-close:hover { color: #17181C; background: rgba(23, 24, 28, 0.07); }
html.arko-retro .arko-toast-bar { background: linear-gradient(90deg, var(--retro-rust), var(--retro-mustard)); }
html.arko-retro .arko-toast-btn:focus-visible, html.arko-retro .arko-toast-close:focus-visible { outline-color: #17181C; }

/* Status tags go flat and solid in their own colour, ink lettering on top —
   the colour stays in `color`, so the fill follows each state. */
html.arko-retro :is(.period-status-pill, .sav-goal-status-chip, .notify-new, .spend-sub-badge, .txn-sub-badge, .account-card-live-badge) {
  background-color: color-mix(in srgb, currentColor 88%, transparent);
  -webkit-text-fill-color: #15161A;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}
/* "Synced via Plaid" was plain text with a live dot, so it needs the pill
   shape the other tags already have — and an ink dot on the green. */
html.arko-retro .account-card-live-badge { padding: 2px 8px 2px 7px; border-radius: 999px; }
html.arko-retro .account-card-live-badge .dot { background: #15161A; box-shadow: none; }

/* Selected text: mustard highlighter. */
html.arko-retro ::selection { background: rgba(226, 180, 78, 0.85); color: #15161A; -webkit-text-fill-color: #15161A; }

/* ---- racing stripes in a card's corner, in that card's own colour ----
   Four diagonal bands, 70s-poster style; the Total card wears all four
   poster colours. */
/* The cards that carry them become their own layer (no clipping, so menus,
   tooltips and the Investments ring glow are untouched); the stripes take
   the card's corner radius instead. */
html.arko-retro :is(.sav-goal-card, .spend-total-card, .networth-card, .inv-ring-card) { position: relative; isolation: isolate; }
.retro-stripes {
  position: absolute; right: 0; bottom: 0; z-index: -1;
  border-bottom-right-radius: inherit;
  width: min(62%, 132px); aspect-ratio: 120 / 100;
  pointer-events: none;
  background-color: var(--cat-accent, var(--retro-blue));
  /* A soft glint runs along the stripes now and then (staggered per card by
     retro.js), only while the lighting is on. */
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 248, 235, 0.95) 50%, transparent 58%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Cpath%20d%3D%22M40%20112L92%200L101%200L49%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M57%20112L109%200L118%200L66%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M74%20112L126%200L135%200L83%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M91%20112L143%200L152%200L100%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat right bottom / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Cpath%20d%3D%22M40%20112L92%200L101%200L49%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M57%20112L109%200L118%200L66%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M74%20112L126%200L135%200L83%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M91%20112L143%200L152%200L100%20112Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat right bottom / contain;
  opacity: 0.16;
  transition: opacity 0.35s ease;
}
.card:hover > .retro-stripes, .sav-goal-card:hover > .retro-stripes,
.spend-total-card:hover > .retro-stripes, .networth-card:hover > .retro-stripes,
.inv-ring-card:hover > .retro-stripes { opacity: 0.26; }
/* Each page's hero card takes that page's own accent. */
.spend-total-card > .retro-stripes { background-color: var(--spend-accent, #DE7744); }
.networth-card > .retro-stripes { background-color: var(--emerald-bright, #74BF97); }
.inv-ring-card > .retro-stripes { background-color: var(--violet-bright, #AD8CC4); }
/* Goal cards are full of centred text — smaller and quieter there. */
.sav-goal-card > .retro-stripes { background-color: rgb(var(--goal-glow, 110, 143, 163)); width: min(44%, 92px); opacity: 0.11; }
.sav-goal-card:hover > .retro-stripes { opacity: 0.18; }
/* The Total card gets the full four-colour band. */
.card-total > .retro-stripes {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Cpath%20d%3D%22M40%20112L92%200L101%200L49%20112Z%22%20fill%3D%22%236E8FA3%22%2F%3E%3Cpath%20d%3D%22M57%20112L109%200L118%200L66%20112Z%22%20fill%3D%22%23E8E1D3%22%2F%3E%3Cpath%20d%3D%22M74%20112L126%200L135%200L83%20112Z%22%20fill%3D%22%23D9A441%22%2F%3E%3Cpath%20d%3D%22M91%20112L143%200L152%200L100%20112Z%22%20fill%3D%22%23C8693A%22%2F%3E%3C%2Fsvg%3E") no-repeat right bottom / contain;
  -webkit-mask: none; mask: none;
  opacity: 0.2;
}
.card-total:hover > .retro-stripes { opacity: 0.32; }
@keyframes retroGlint {
  0%, 8%   { background-position: 160% 0; }
  22%, 100% { background-position: -60% 0; }
}
html.arko-ambient-on .retro-stripes { animation: retroGlint 11s ease-in-out infinite; animation-delay: var(--glint-delay, 0s); }
.card-total > .retro-stripes { animation: none !important; }
/* Phones: cards are shorter, so keep the stripes tucked into the corner
   rather than behind the balance. */
@media (max-width: 600px) {
  .retro-stripes { width: min(44%, 80px); opacity: 0.14; }
  .card-total > .retro-stripes { opacity: 0.18; }
}

/* ---- page titles: the underline becomes a banded stripe — the page's own
   accent, cream, then mustard (rust on Budget, whose accent is already brass) ---- */
html.arko-retro :is(.overview-section-title, .budget-title-row h1, .vault-title-row h1, .log-title)::after {
  width: 54px; height: 3px;
  background: linear-gradient(90deg,
    var(--retro-band, var(--retro-blue)) 0 28%, transparent 28% 36%,
    var(--retro-cream) 36% 64%, transparent 64% 72%,
    var(--retro-band-end, var(--retro-mustard)) 72% 100%) !important;
  opacity: 0.85;
  transform-origin: left center;
  animation: retroBandIn 0.95s cubic-bezier(.2, .8, .2, 1) 0.3s both;
}
/* The banded underline sweeps in from the left as the page opens. */
@keyframes retroBandIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 0.85; } }
.spend-title { --retro-band: var(--spend-accent, #DE7744); }
.sav-title { --retro-band: #6EC4B8; }
.inv-title { --retro-band: var(--violet-bright, #AD8CC4); }
.budget-title-row h1 { --retro-band: var(--brass-bright, #D8BC7A); --retro-band-end: var(--retro-rust); }
.vault-title-row h1 { --retro-band: var(--emerald-bright, #63D9AA); }

/* ---- sign-in pages + plans: big, faint racing stripes sweeping up behind the card ---- */
.retro-arches {
  position: fixed; left: 50%; bottom: 0; z-index: -1; pointer-events: none;
  width: min(1100px, 150vw); aspect-ratio: 2 / 1;
  translate: -50% 22%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20300%22%20preserveAspectRatio%3D%22xMidYMax%20meet%22%3E%3Cpath%20d%3D%22M150%20320L300%200L336%200L186%20320Z%22%20fill%3D%22%236E8FA3%22%2F%3E%3Cpath%20d%3D%22M208%20320L358%200L394%200L244%20320Z%22%20fill%3D%22%23E8E1D3%22%2F%3E%3Cpath%20d%3D%22M266%20320L416%200L452%200L302%20320Z%22%20fill%3D%22%23D9A441%22%2F%3E%3Cpath%20d%3D%22M324%20320L474%200L510%200L360%20320Z%22%20fill%3D%22%23C8693A%22%2F%3E%3Cpath%20d%3D%22M382%20320L532%200L568%200L418%20320Z%22%20fill%3D%22%23E8E1D3%22%2F%3E%3C%2Fsvg%3E") no-repeat center bottom / contain;
  opacity: 0.07;
}
@media (max-width: 600px) { .retro-arches { translate: -50% 18%; opacity: 0.06; } }

/* ---- the tour: ink card, poster button ----
   Slide accents and drawings take the poster tones via ArkoRetro.retone(C)
   in tour.js; this swaps the navy surfaces for ink and the neon "Next" for
   a solid poster button with a hard printed shadow. */
html.arko-retro .arko-tour-card {
  background: linear-gradient(165deg, rgba(28, 30, 34, 0.97), rgba(14, 15, 18, 0.98));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tour-accent) 10%, transparent),
    0 0 40px color-mix(in srgb, var(--tour-accent) 10%, transparent),
    0 30px 80px rgba(0, 0, 0, 0.6);
}
html.arko-retro .arko-tour-stage {
  border-color: #25282D;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--tour-accent) 12%, transparent), transparent 72%),
    radial-gradient(rgba(232, 225, 211, 0.035) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #0E0F12;
}
html.arko-retro .arko-tour-eyebrow { font-family: 'Archivo', 'Public Sans', sans-serif; font-weight: 800; font-stretch: 116%; }
html.arko-retro .arko-tour-next {
  background: var(--tour-accent); border-color: transparent; color: #141416;
  font-family: 'Archivo', 'Public Sans', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tour-accent) 40%, #000);
}
html.arko-retro .arko-tour-next:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--tour-accent) 40%, #000); }
html.arko-retro .arko-tour-next:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tour-accent) 40%, #000); }

/* ---- poster buttons ----
   Primary actions everywhere get the tour's treatment: a solid fill in
   their own colour (no gradient, no neon bloom), ink lettering in Archivo
   caps, and a hard printed edge underneath that presses in on tap. Each
   button keeps its own size and corner radius; only --pb (the fill)
   varies. Toggle "selected" states and badges are left alone — they
   aren't actions. Secondary buttons beside them take the same caps. */
html.arko-retro {
  --poster-ink: #141416;
}
html.arko-retro :is(.trial-notice:not(.urgent):not(.reconnect-notice):not(.payment-notice):not(.recap-notice)) { --tn: #6C9AC0; }
html.arko-retro .trial-notice.recap-notice { --tn: #D8BC7A; } /* last month in review: gold */
html.arko-retro .trial-notice.payment-notice { --tn: #D9673F; } /* a failed renewal: the danger rust */
/* Fill colours. :where() keeps these at equal weight, so order decides:
   the general poster blue first, then the specific colours after it. */
html.arko-retro :where(.btn-primary, .envelope-picker-save-btn, .txn-approve-all-btn, .mfa-verify-btn, .idle-stay-btn,
  .mfa-banner-setup-btn, .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"], .tier-2-cta, .log-print-go) { --pb: #6C9AC0; }
html.arko-retro :where(.panel-add .btn-primary, .btn-vault-solid, .new-accounts-add-btn, .manage-cat-save-btn,
  .txn-approve-btn, .envelope-picker-add-btn) { --pb: #74BF97; }
html.arko-retro :where(.panel-subtract .btn-primary, .arko-dialog-overlay.arko-dialog-danger .arko-dialog-btn-confirm) { --pb: #D9673F; }
html.arko-retro :where(.panel-transfer .btn-primary, .btn-brass-solid, .recurring-review-approve, .expense-log-submit,
  .ledger-lock-cta, .tier-3-cta, .ucf-go) { --pb: #E2AE45; }
html.arko-retro :where(.account-reconnect-btn) { --pb: #E0B25C; }
html.arko-retro :where(.trial-notice-plans) { --pb: var(--tn); }
html.arko-retro :where(.inv-scope-empty-tag-btn) { --pb: #AD8CC4; }
html.arko-retro :where(.sav-empty-cta) { --pb: #6EC4B8; }
html.arko-retro :where(.spend-retrieve-btn) { --pb: #DE7744; }
html.arko-retro :where(.btn-login) { --pb: #E8E1D3; }

html.arko-retro :is(.btn-primary, .panel-add .btn-primary, .panel-subtract .btn-primary, .panel-transfer .btn-primary,
  .envelope-picker-save-btn, .txn-approve-all-btn, .mfa-verify-btn, .idle-stay-btn, .mfa-banner-setup-btn,
  .arko-dialog-btn-confirm, .arko-dialog-overlay.arko-dialog-danger .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"],
  .btn-vault-solid, .new-accounts-add-btn, .manage-cat-save-btn, .txn-approve-btn, .envelope-picker-add-btn,
  .btn-brass-solid, .recurring-review-approve, .expense-log-submit, .ledger-lock-cta, .tier-2-cta, .tier-3-cta, .ucf-go,
  .account-reconnect-btn, .trial-notice-plans, .inv-scope-empty-tag-btn, .sav-empty-cta, .spend-retrieve-btn, .log-print-go, .btn-login) {
  background: var(--pb, #6C9AC0);
  border-color: transparent;
  color: var(--poster-ink);
  -webkit-text-fill-color: var(--poster-ink);
  text-shadow: none;
  font-family: 'Archivo', 'Public Sans', sans-serif;
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pb, #6C9AC0) 40%, #000);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
/* The big single actions (plan cards, sign-in, empty-state calls) read a step larger. */
html.arko-retro :is(.tier-2-cta, .tier-3-cta, .btn-signup, .auth-form button[type="submit"], .sav-empty-cta,
  .ledger-lock-cta, .mfa-verify-btn, .spend-retrieve-btn) { font-size: 0.82rem; }
html.arko-retro :is(.btn-primary, .envelope-picker-save-btn, .txn-approve-all-btn, .mfa-verify-btn, .idle-stay-btn,
  .mfa-banner-setup-btn, .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"], .btn-vault-solid,
  .new-accounts-add-btn, .manage-cat-save-btn, .txn-approve-btn, .envelope-picker-add-btn, .btn-brass-solid,
  .recurring-review-approve, .expense-log-submit, .ledger-lock-cta, .tier-2-cta, .tier-3-cta, .ucf-go,
  .account-reconnect-btn, .trial-notice-plans, .inv-scope-empty-tag-btn, .sav-empty-cta, .spend-retrieve-btn, .log-print-go, .btn-login):is(:hover, :focus-visible):not(:disabled) {
  background: color-mix(in srgb, var(--pb, #6C9AC0) 88%, #fff);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pb, #6C9AC0) 40%, #000);
}
html.arko-retro :is(.btn-primary, .envelope-picker-save-btn, .txn-approve-all-btn, .mfa-verify-btn, .idle-stay-btn,
  .mfa-banner-setup-btn, .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"], .btn-vault-solid,
  .new-accounts-add-btn, .manage-cat-save-btn, .txn-approve-btn, .envelope-picker-add-btn, .btn-brass-solid,
  .recurring-review-approve, .expense-log-submit, .ledger-lock-cta, .tier-2-cta, .tier-3-cta, .ucf-go,
  .account-reconnect-btn, .trial-notice-plans, .inv-scope-empty-tag-btn, .sav-empty-cta, .spend-retrieve-btn, .log-print-go, .btn-login):active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pb, #6C9AC0) 40%, #000);
}
html.arko-retro :is(.btn-primary, .mfa-verify-btn, .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"],
  .btn-vault-solid, .btn-brass-solid, .expense-log-submit, .tier-2-cta, .tier-3-cta, .txn-approve-btn,
  .txn-approve-all-btn, .manage-cat-save-btn, .new-accounts-add-btn):disabled {
  box-shadow: none; transform: none;
}
/* Locked-feature preview: each page's script paints its fill in that
   feature's colour, so it takes the lettering and a neutral printed edge. */
html.arko-retro .feature-preview-cta {
  color: var(--poster-ink); -webkit-text-fill-color: var(--poster-ink);
  font-family: 'Archivo', 'Public Sans', sans-serif; font-weight: 800; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
html.arko-retro .feature-preview-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
html.arko-retro .feature-preview-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
/* The plans page's "Your free trial" tag: poster blue, not neon. */
html.arko-retro .tier-card.tier-trial .tier-current-badge { background: #6C9AC0; color: var(--poster-ink); }
/* Their quieter partners pick up the same lettering. */
html.arko-retro :is(.trial-notice-later, .arko-dialog-btn-cancel, .mfa-cancel-btn, .btn-brass, .arko-tour-back, .arko-tour-skip) {
  font-family: 'Archivo', 'Public Sans', sans-serif;
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
}

/* Keyboard focus: a ring in the button's own colour, clear of its printed edge. */
html.arko-retro :is(.btn-primary, .envelope-picker-save-btn, .txn-approve-all-btn, .mfa-verify-btn, .idle-stay-btn, .mfa-banner-setup-btn, .arko-dialog-btn-confirm, .btn-signup, .auth-form button[type="submit"], .btn-vault-solid, .new-accounts-add-btn, .manage-cat-save-btn, .txn-approve-btn, .envelope-picker-add-btn, .btn-brass-solid, .recurring-review-approve, .expense-log-submit, .ledger-lock-cta, .tier-2-cta, .tier-3-cta, .ucf-go, .account-reconnect-btn, .trial-notice-plans, .inv-scope-empty-tag-btn, .sav-empty-cta, .spend-retrieve-btn, .log-print-go, .btn-login, .feature-preview-cta, .arko-tour-next):focus-visible {
  outline: 2px solid var(--pb, var(--tour-accent, #6C9AC0));
  outline-offset: 4px;
}

/* The very narrowest phones (320px): "Confirm all" tightens its lettering a
   touch to fit its share of the row. */
@media (max-width: 340px) {
  html.arko-retro .txn-review-head-actions > .txn-approve-all-btn.txn-approve-all-btn { letter-spacing: 0.02em; font-size: 0.72rem; }
}

/* motion off */
@media (prefers-reduced-motion: reduce) {
  .retro-stripes { animation: none !important; }
  html.arko-retro :is(.overview-section-title, .budget-title-row h1, .vault-title-row h1, .log-title)::after { animation: none; }
}

/* Dashboard "This budget" parts in the poster palette. */
html.arko-retro .period-glance-tile { --tone: #D9A441; }
html.arko-retro .period-glance-tile.t-bills { --tone: #C8693A; }
html.arko-retro .period-glance-tile.t-sd { --tone: #6C9AC0; }