/* Spending: "Which should I pick?" and the payoff nudge (2026-10-17, js/80-spend-pick.js; _audits/2026-10-17-spend-pick-mockup.html).
   Theme tokens only. */
#toolView .spend-source-field { position:relative; }
.spend-which { display:inline-flex; align-items:center; gap:6px; margin:8px 0 0; padding:6px 2px; border:0; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
.spend-which i { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor; font-style:normal; font-size:11px; font-weight:700; }
.spend-which:focus-visible, .spend-which-pop button:focus-visible, .spend-nudge a:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; border-radius:8px; }
.spend-which-pop { position:absolute; z-index:900; left:0; width:min(460px, calc(100vw - 32px)); padding:16px 18px 14px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:14px; background:var(--s-card, var(--c-gray-99)); box-shadow:0 12px 32px rgba(var(--s-shadow-rgb, 16,24,40), .16), 0 2px 6px rgba(var(--s-shadow-rgb, 16,24,40), .06); }
.spend-which-pop[hidden], .spend-which-scrim[hidden] { display:none; }
.spend-which-pop::before { content:""; position:absolute; top:-7px; left:var(--sw-arrow, 24px); width:12px; height:12px; background:var(--s-card, var(--c-gray-99)); border-left:1px solid var(--s-line2, var(--c-gray-90)); border-top:1px solid var(--s-line2, var(--c-gray-90)); transform:rotate(45deg); }
.spend-which-pop h4 { margin:0 0 10px; font-size:15.5px; color:var(--s-ink, var(--c-slate-15)); }
.sw-opt { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:4px 12px; padding:10px 0; border-top:1px solid var(--s-line, var(--c-gray-90)); font-size:14px; line-height:1.5; color:var(--s-ink2, var(--c-slate-35)); }
.sw-opt b { color:var(--s-ink, var(--c-slate-15)); }
.sw-opt ul { margin:0; padding:0 0 0 16px; } .sw-opt li { margin:0 0 2px; }
.sw-acts { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.sw-acts button { min-height:40px; padding:7px 14px; border-radius:10px; border:1px solid var(--s-line2, var(--c-gray-90)); background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.sw-acts button.pri { background:var(--s-blue, var(--c-teal-50)); border-color:var(--s-blue, var(--c-teal-50)); color:var(--s-on, var(--c-gray-99)); }
.spend-which-scrim { display:none; }
.spend-nudge { display:flex; align-items:center; gap:10px; margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--s-blue-l, var(--c-teal-90)); font-size:14px; color:var(--s-ink2, var(--c-slate-35)); }
.spend-nudge[hidden] { display:none; }
.spend-nudge svg { flex:none; width:18px; height:18px; stroke:var(--s-blue, var(--c-teal-50)); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spend-nudge a { margin-left:auto; white-space:nowrap; color:var(--s-link, var(--c-teal-45)); font-weight:600; text-decoration:none; }
@media (max-width:760px){
  .spend-which-scrim { display:block; position:fixed; inset:0; z-index:1200; background:rgba(var(--s-shadow-rgb, 16,24,40), .32); }
  .spend-which-pop { position:fixed; z-index:1201; left:0; right:0; bottom:0; top:auto !important; width:100%; max-height:85vh; overflow:auto; border-radius:20px 20px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); }
  .spend-which-pop::before { position:static; display:block; width:40px; height:4px; margin:0 auto 12px; border:0; border-radius:3px; background:var(--s-line2, var(--c-gray-90)); transform:none; }
  .sw-opt { grid-template-columns:1fr; }
  .spend-nudge { display:grid; grid-template-columns:18px minmax(0, 1fr); gap:4px 10px; align-items:start; } .spend-nudge svg { margin-top:2px; } .spend-nudge a { grid-column:2; margin-left:0; }
}
/* the app's layered button rules (compass-app-theme.css): @layer studio is declared first, so its !important wins */
@layer studio {
  html body .spend-which { background:none !important; color:var(--s-link, var(--c-teal-45)) !important; box-shadow:none !important; min-height:0 !important; }
  html body .sw-acts button:not(.pri) { background:var(--s-card, var(--c-gray-99)) !important; color:var(--s-ink, var(--c-slate-15)) !important; }
  html body .sw-acts button.pri { background:var(--s-blue, var(--c-teal-50)) !important; color:var(--s-on, var(--c-gray-99)) !important; }
}