/* Compass — Studio theme (2026-10-08). The design in design/studio-*.html: a soft gray canvas, white cards with a
   hairline border and a soft shadow, pastel icon chips, one button system (36px, white with a thin border; navy for
   the one main action), 40px fields with the name above, segmented controls, and an outlined ⓘ for every
   explanation. Applies under html.studio (js/00-theme.js), on top of the Light theme's color tokens.
   Everything is in the "studio" cascade layer, declared before compassNavTop in index.html, so its !important rules
   win over every other stylesheet; nothing here changes what the page does. Excluded from tools/theme/build.py. */
@layer studio {
html.studio {
  --s-bg:#f5f6f8; --s-card:#fff; --s-line:#eaecf0; --s-line2:#dfe2e8; --s-ink:#101828; --s-ink2:#344054; --s-muted:#667085; --s-faint:#98a2b3;
  --s-navy:#111a2e; --s-navy2:#1d2945; --s-blue:#3d63f5; --s-blue-d:#2c4fd8; --s-blue-rgb:61,99,245; --s-on:#fff; --s-blue-btn:#3d63f5; --s-link:#2c4fd8;
  --s-track:#f0f2f5; --s-soft:#fafbfc; --s-seg2:#eef1fb; --s-off:#d0d5dd; --s-line3:#cfd4dc; --s-dis:#d5ddfd; --s-dis-ink:#8ea3f5; --s-green-ink:#15895f;
  --s-glass:rgba(255,255,255,.94); --s-hover:rgba(255,255,255,.7); --s-shadow-rgb:16,24,40; --s-blue-l:#e8edfe; --s-violet:#8b7cf6; --s-violet-l:#efecfe; --s-orange:#f79042; --s-orange-l:#fef0e6;
  --s-green:#22b07d; --s-green-l:#e3f6ee; --s-red:#e5484d; --s-red-l:#fdeced; --s-amber:#e6a23c; --s-amber-l:#fdf3e2; --s-teal:#14a3a3; --s-teal-l:#e2f5f5;
  --s-r:16px; --s-sh:0 1px 2px rgba(16,24,40,.04),0 6px 20px -12px rgba(16,24,40,.12); --s-xs:0 1px 2px rgba(16,24,40,.05);
  /* icons for chips (masks) */
  --ic-flag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4h11l-2 4 2 4H5'/></svg>");
  --ic-wallet:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='14' rx='3'/><path d='M16 13h2M3 10h18M7 6V4h10v2'/></svg>");
  --ic-bank:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 12 4l9 6M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18'/></svg>");
  --ic-cash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='3'/><circle cx='12' cy='12' r='2.5'/><path d='M6 12h.01M18 12h.01'/></svg>");
  --ic-sliders:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12'/><circle cx='16' cy='6' r='2'/><circle cx='10' cy='12' r='2'/><circle cx='18' cy='18' r='2'/></svg>");
  --ic-cart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h2l2.5 11h10L20 8H6.5'/><circle cx='9' cy='19.5' r='1.3'/><circle cx='17' cy='19.5' r='1.3'/></svg>");
  --ic-share:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='12' r='2.5'/><circle cx='18' cy='6' r='2.5'/><circle cx='18' cy='18' r='2.5'/><path d='m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6'/></svg>");
  --ic-heart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/></svg>");
  --ic-users:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6'/><circle cx='17' cy='7' r='2.5'/><path d='M15.5 14.2c2.9.3 5 2.6 5 5.8'/></svg>");
  --ic-list:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/></svg>");
  --ic-cal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
  --ic-chart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='m7 15 4-4 3 3 5-6'/></svg>");
  --ic-home:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/></svg>");
  --ic-shield:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v5c0 5 3 8.5 7 10 4-1.5 7-5 7-10V6z'/></svg>");
  --ic-receipt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/><path d='M9 8h6M9 12h6'/></svg>");
  --ic-gift:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='5' rx='1'/><path d='M5 13v8h14v-8M12 8v13M12 8c-2-4-6-4-6-1s6 1 6 1 6 2 6-1-4-3-6 1'/></svg>");
  --ic-info:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>");
  --ic-chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --ic-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
  --ic-pencil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9l-4-4L4 16z'/><path d='m13.5 6.5 4 4'/></svg>");
  --ic-trash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>");
  --ic-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --ic-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  --ic-trend:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17 9 11l4 4 8-8'/><path d='M15 7h6v6'/></svg>");
  --ic-coin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M15 9.5c-.5-1-1.6-1.5-3-1.5-1.7 0-3 .8-3 2s1.3 1.7 3 2 3 .8 3 2-1.3 2-3 2c-1.4 0-2.5-.5-3-1.5M12 6v2M12 16v2'/></svg>");
  background:var(--s-bg) !important;
}
html.studio body { background:var(--s-bg) !important; color:var(--s-ink) !important; }
html.studio .wrap { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }

/* ---------- the ⓘ (every .qm, and the dotted-label tips) ---------- */
html.studio .qm { width:16px !important; height:16px !important; min-width:16px !important; padding:0 !important; border:0 !important; border-radius:50% !important;
  background:var(--s-faint) !important; -webkit-mask:var(--ic-info) center/16px no-repeat; mask:var(--ic-info) center/16px no-repeat;
  color:transparent !important; font-size:0 !important; box-shadow:none !important; opacity:1 !important; transform:none !important; vertical-align:-2px !important; }
html.studio .qm:hover, html.studio .qm:focus-visible { background:var(--s-ink2) !important; }
html.studio #tooltipBubble { background:var(--s-navy) !important; color:#fff !important; border:0 !important; border-radius:10px !important; font-size:12.5px !important; line-height:1.5 !important;
  padding:10px 12px !important; box-shadow:0 10px 30px -10px rgba(var(--s-shadow-rgb),.5) !important; max-width:280px !important; }
html.studio #tooltipBubble * { color:#fff !important; }

/* ---------- sidebar ---------- */
html.studio #mainToolNavigation.global-nav { background:var(--s-card) !important; border-right:1px solid var(--s-line) !important; box-shadow:none !important; }
html.studio #mainToolNavigation .sb-hd { font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--s-faint) !important; }
html.studio #mainToolNavigation .global-tab { min-height:36px !important; border-radius:10px !important; border:1px solid transparent !important; background:transparent !important;
  color:var(--s-ink2) !important; font-size:13.5px !important; font-weight:600 !important; box-shadow:none !important; }
html.studio #mainToolNavigation .global-tab svg { color:var(--s-muted) !important; }
html.studio #mainToolNavigation .global-tab:hover { background:var(--s-soft) !important; }
html.studio #mainToolNavigation .global-tab.active { background:var(--s-card) !important; border-color:var(--s-line2) !important; color:var(--s-blue) !important; box-shadow:var(--s-sh) !important; }
html.studio #mainToolNavigation .global-tab.active svg, html.studio #mainToolNavigation .global-tab.active * { color:var(--s-blue) !important; }
html.studio #mainToolNavigation .global-tab.active svg { stroke:currentColor !important; }
html.studio #mainToolNavigation .sb-steps .sb-num { background:var(--s-track) !important; color:var(--s-muted) !important; border:0 !important; }
html.studio #mainToolNavigation .sb-steps strong { color:var(--s-ink2) !important; } html.studio #mainToolNavigation .sb-steps small { color:var(--s-faint) !important; }
html.studio #mainToolNavigation .sb-status, html.studio #mainToolNavigation .sb-guide, html.studio #mainToolNavigation .sb-disp-btn { background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:12px !important; box-shadow:none !important; }

/* the collapsed sidebar (2026-10-08, the user: keep it collapsible): icons only, centered */
html.studio.sidebar-plus.sb-collapsed #mainToolNavigation .global-tab { width:44px !important; min-height:40px !important; padding:0 !important; justify-content:center !important; font-size:0 !important; gap:0 !important; }
html.studio.sidebar-plus.sb-collapsed #mainToolNavigation .global-tab svg { width:20px !important; height:20px !important; }

/* ---------- header ---------- */
html.studio .compass-workspace-header { background:var(--s-card) !important; border-bottom:1px solid var(--s-line) !important; box-shadow:none !important; }

/* ---------- surfaces ---------- */
html.studio .panel, html.studio #planBar, html.studio .compass-plan-steps, html.studio .dash-card, html.studio .acct-card, html.studio .fan-chart-shell, html.studio .pc-card,
html.studio .nw-card, html.studio .tx-card, html.studio .cf-card {
  background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:var(--s-r) !important; box-shadow:var(--s-sh) !important; }
html.studio .section-title h2, html.studio .section-title .h1, html.studio h2.pg-h1 { color:var(--s-ink) !important; letter-spacing:-.3px !important; }
html.studio .section-icon-wrap { background:var(--s-blue-l) !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; }
html.studio .section-icon-wrap svg * { stroke:var(--s-blue) !important; }

/* ---------- buttons: one system ---------- */
html.studio :is(.preset-btn, .tx-btn, .sb-btn, .plan-bar-btn, .xb-btn, .lb-btn, .aw-btn, .pchg-go, .po-chev, .rn-section-toggle, .dz-link-btn, .page-tour-btn, button.btn-secondary) {
  min-height:36px !important; padding:0 14px !important; border-radius:10px !important; border:1px solid var(--s-line2) !important; background:var(--s-card) !important;
  color:var(--s-ink2) !important; font-size:13px !important; font-weight:600 !important; box-shadow:var(--s-xs) !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.2 !important; }
html.studio :is(.preset-btn, .tx-btn, .sb-btn, .plan-bar-btn, .xb-btn, .lb-btn, .aw-btn, .po-chev, .rn-section-toggle):hover { background:var(--s-soft) !important; border-color:var(--s-line3) !important; }
html.studio :is(.runbtn, .tx-btn-primary, .sb-btn-primary, .xb-btn-primary, .lb-btn.lb-primary, .aw-btn-primary, .sa-btn, .dh-btn, .mf-ab-primary) {
  min-height:36px !important; padding:0 16px !important; border-radius:10px !important; border:1px solid var(--s-blue) !important; background:var(--s-blue) !important; color:var(--s-on) !important;
  font-size:13px !important; font-weight:600 !important; box-shadow:var(--s-xs) !important; text-transform:none !important; letter-spacing:0 !important; }
html.studio :is(.runbtn, .tx-btn-primary, .sb-btn-primary, .xb-btn-primary, .lb-btn.lb-primary, .aw-btn-primary, .sa-btn, .dh-btn, .mf-ab-primary):hover { background:var(--s-blue-d) !important; border-color:var(--s-blue-d) !important; }
html.studio :is(.runbtn, .tx-btn-primary, .sb-btn-primary, .xb-btn-primary, .lb-btn.lb-primary, .aw-btn-primary, .sa-btn, .dh-btn, .mf-ab-primary):focus-visible { outline:none !important; box-shadow:0 0 0 4px rgba(var(--s-blue-rgb),.22) !important; }
html.studio :is(.runbtn, .tx-btn-primary, .sb-btn-primary, .xb-btn-primary, .lb-btn.lb-primary, .aw-btn-primary, .sa-btn, .dh-btn, .mf-ab-primary):disabled { background:var(--s-dis) !important; border-color:var(--s-dis) !important; color:var(--s-dis-ink) !important; box-shadow:none !important; cursor:not-allowed !important; }
html.studio :is(.runbtn, .tx-btn-primary, .sb-btn-primary, .sa-btn, .dh-btn) * { color:var(--s-on) !important; }
/* secondary actions: white with a thin border; the blue ring on focus */
html.studio :is(.preset-btn, .tx-btn, .sb-btn, .plan-bar-btn, .xb-btn, .lb-btn, .aw-btn, .po-chev, .rn-section-toggle):focus-visible { outline:none !important; border-color:var(--s-blue) !important; box-shadow:0 0 0 4px rgba(var(--s-blue-rgb),.18) !important; }
html.studio :is(.preset-btn, .tx-btn, .sb-btn, .plan-bar-btn, .xb-btn, .lb-btn, .aw-btn):disabled { color:var(--s-faint) !important; background:var(--s-soft) !important; box-shadow:none !important; }

/* ---------- fields ---------- */
html.studio input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), html.studio select, html.studio textarea {
  border:1px solid var(--s-line2) !important; border-radius:10px !important; background-color:var(--s-card) !important; color:var(--s-ink) !important; box-shadow:none !important;
  font-size:14px !important; font-weight:600 !important; }
html.studio input:focus, html.studio select:focus, html.studio textarea:focus { border-color:var(--s-blue) !important; box-shadow:0 0 0 3px rgba(var(--s-blue-rgb),.12) !important; outline:none !important; }
html.studio input::placeholder { color:var(--s-faint) !important; font-weight:500 !important; }
/* Plan steps: the name above the box, 40px boxes */
html.studio #toolView .ofl > label:first-child { position:static !important; display:flex !important; align-items:center; gap:5px; max-width:none !important; margin:0 0 6px !important;
  font-size:12.5px !important; font-weight:600 !important; color:var(--s-ink2) !important; text-transform:none !important; letter-spacing:0 !important; text-decoration:none !important;
  background:none !important; padding:0 !important; line-height:1.3 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.studio #toolView .ofl > label .fld-opt { display:none !important; }
html.studio .ofl-box, html.studio #toolView .ofl input:not([type=checkbox]):not([type=radio]), html.studio #toolView .ofl select { padding-top:0 !important; padding-bottom:0 !important; min-height:40px !important; height:40px !important; }
html.studio .ofl > .unit-box > .unit-pre, html.studio .ofl > .unit-box > .unit-suf { top:50% !important; transform:translateY(-50%) !important; color:var(--s-faint) !important; font-weight:500 !important; font-size:13px !important; }
html.studio .unit-box { position:relative !important; }
html.studio #toolView .inputs-grid { gap:14px !important; }
html.studio #toolView .field { margin:0 !important; }

/* the field-name ⓘ (compass-quiet.css draws it as a teal "?"): the outlined ⓘ, kept on the name's line */
html.studio #toolView .ofl > label.has-tip:first-child::after, html.studio #toolView .field > label.has-tip::after {
  content:'' !important; flex:none; width:14px !important; height:14px !important; margin-left:2px !important; border-radius:0 !important; background:var(--s-faint) !important;
  -webkit-mask:var(--ic-info) center/14px no-repeat; mask:var(--ic-info) center/14px no-repeat; font-size:0 !important; }
html.studio #toolView .ofl > label:first-child { min-width:0; }

/* phones and tablets (2026-10-08): iPhone Safari zooms into any box whose text is under 16px when it is tapped, and
   the page then slides sideways — boxes get 16px on touch screens, and the page can't scroll sideways */
@media (hover:none) and (pointer:coarse), (max-width:760px){
  html.studio input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), html.studio select, html.studio textarea { font-size:16px !important; }
  html.studio, html.studio body { overflow-x:clip !important; max-width:100% !important; }
}
@media (max-width:760px){
  html.studio #liveBar.lb { margin-left:0 !important; margin-right:0 !important; }
}

/* ---------- segmented controls ---------- */
html.studio :is(.pm-seg, .seg-group, .fan-dollar-switch, .yb-seg, .cf-sk-dollars, .nw-segs, .ah-seg) { background:var(--s-track) !important; border:0 !important; border-radius:10px !important; padding:3px !important; gap:2px !important; box-shadow:none !important; }
html.studio :is(.pm-seg, .fan-dollar-switch, .yb-seg, .cf-sk-dollars, .nw-segs, .ah-seg) button { min-height:30px !important; border:0 !important; border-radius:8px !important; background:transparent !important;
  color:var(--s-muted) !important; font-size:12.5px !important; font-weight:600 !important; box-shadow:none !important; }
html.studio :is(.pm-seg, .fan-dollar-switch, .yb-seg, .cf-sk-dollars, .nw-segs, .ah-seg) button:is(.is-on, .active, [aria-pressed="true"], [aria-checked="true"]) { background:var(--s-card) !important; color:var(--s-ink) !important; box-shadow:0 1px 3px rgba(var(--s-shadow-rgb),.12) !important; }

/* ---------- live result bar ---------- */
html.studio #liveBar.lb { background:var(--s-glass) !important; border:1px solid var(--s-line) !important; border-radius:14px !important; box-shadow:0 10px 30px -14px rgba(var(--s-shadow-rgb),.25) !important; backdrop-filter:blur(8px); }

/* ---------- icon chip helper (used by the cards below) ---------- */
html.studio .st-chip, html.studio #toolView .rd-group > .rd-group-h > h3::before {
  content:''; flex:none; width:34px; height:34px; border-radius:10px; background:var(--chip-bg, var(--s-blue-l)); position:relative; }

/* the result card on Projections: a card like the rest in both Studio modes; the verdict in the status color */
html.studio #resultsPanel .dash-banner { border:1px solid var(--s-line) !important; border-radius:var(--s-r) !important; background:var(--s-card) !important; box-shadow:var(--s-sh) !important; --st-st:var(--s-blue); }
html.studio #resultsPanel .dash-banner.warn { --st-st:var(--s-amber); } html.studio #resultsPanel .dash-banner.risk { --st-st:var(--s-red); }
html.studio #resultsPanel .dash-banner, html.studio #resultsPanel .dash-banner * { color:var(--s-ink) !important; }

html.studio .ug-pagehelp, html.studio .sb-guide, html.studio .sb-guide * { color:var(--s-blue) !important; }
html.studio .ug-pagehelp > span:first-child { background:var(--s-blue) !important; color:var(--s-on) !important; }
html.studio.studio-dark { --teal:#8f9bff; --dk-teal:var(--s-blue); --dk-teal-hi:#9aa6ff; }

/* =================== Plan details: stepper =================== */
html.studio .compass-plan-steps { padding:6px !important; }
html.studio .compass-plan-step { border-radius:12px !important; padding:10px 12px !important; background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--s-ink2) !important; font-weight:700 !important; font-size:13.5px !important; }
html.studio .compass-plan-step .compass-step-number { width:28px !important; height:28px !important; border-radius:50% !important; background:var(--s-track) !important; color:var(--s-muted) !important; border:0 !important; font-size:12.5px !important; box-shadow:none !important; }
html.studio .compass-plan-step:is(.active, [aria-current="step"], .is-active) { background:var(--s-blue-l) !important; }
html.studio .compass-plan-step:is(.active, [aria-current="step"], .is-active) .compass-step-number { background:var(--s-blue) !important; color:var(--s-on) !important; }
html.studio .compass-plan-step.is-todo .compass-step-number { background:var(--s-amber-l) !important; color:#a96a0f !important; }
html.studio.studio-dark .compass-plan-step.is-todo .compass-step-number { color:var(--s-amber) !important; }
html.studio .compass-plan-step .compass-step-todo { font-size:11.5px !important; }
html.studio .compass-plan-step:is(.done, .complete, .is-done, .is-complete) .compass-step-number { background:var(--s-green-l) !important; color:var(--s-green-ink) !important; }

/* =================== Plan details: Retirement details as cards =================== */
html.studio #toolView .panel:has(> .rd-group):not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; grid-auto-flow:row dense; gap:16px !important; align-items:start; }
html.studio #toolView .panel:has(> .rd-group) > :not(.rd-group) { grid-column:1 / -1; }
html.studio #toolView .rd-group { background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:var(--s-r) !important; box-shadow:var(--s-sh) !important;
  padding:18px 20px !important; margin:0 !important; min-width:0; }
html.studio #toolView .rd-group.rd-spend { grid-column:1 / -1; }
html.studio #toolView #hhFsNote, html.studio #toolView #hhBox { grid-column:1 / -1 !important; width:100%; } /* under Filing status, full width (2026-10-09) */
html.studio #toolView .rd-group + .rd-group { border-top:1px solid var(--s-line) !important; }
html.studio #toolView .rd-group > .rd-group-h { display:flex !important; align-items:center !important; gap:10px !important; margin:0 0 14px !important; padding:0 !important; border:0 !important; flex-wrap:wrap; }
html.studio #toolView .rd-group > .rd-group-h > h3 { display:flex !important; align-items:center !important; gap:10px !important; margin:0 !important; font-size:15px !important; font-weight:700 !important; color:var(--s-ink) !important; }
html.studio #toolView .rd-group > .rd-group-h > h3::before { -webkit-mask:none; }
html.studio #toolView .rd-group > .rd-group-h > h3::after { content:''; position:absolute; }
html.studio #toolView .rd-group > .rd-group-h > p { display:none !important; }
/* the chip's icon: a second layer painted with the group's color through a mask */
html.studio #toolView .rd-group > .rd-group-h > h3 { position:relative; }
html.studio #toolView .rd-group > .rd-group-h > h3::after { left:8px; top:50%; width:18px; height:18px; margin-top:-9px; background:var(--chip-fg, var(--s-blue)); -webkit-mask:var(--chip-ic) center/18px no-repeat; mask:var(--chip-ic) center/18px no-repeat; }
html.studio #toolView .rd-you { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); --chip-ic:var(--ic-flag); }
html.studio #toolView .rd-saving { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-wallet); }
html.studio #toolView .rd-match { --chip-bg:var(--s-green-l); --chip-fg:var(--s-green); --chip-ic:var(--ic-bank); }
html.studio #toolView .rd-ss, html.studio #toolView .sp-ss { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); --chip-ic:var(--ic-cash); }
html.studio #toolView .rd-assume { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); --chip-ic:var(--ic-sliders); }
html.studio #toolView .rd-spend { --chip-bg:var(--s-red-l); --chip-fg:var(--s-red); --chip-ic:var(--ic-cart); }
html.studio #toolView .rd-heirs { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-gift); }
html.studio #toolView .sp-about { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); --chip-ic:var(--ic-users); }
html.studio #toolView .sp-work { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-wallet); }
html.studio #toolView .sp-survivor { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); --chip-ic:var(--ic-heart); }
html.studio #toolView .oa-cash { --chip-bg:var(--s-green-l); --chip-fg:var(--s-green); --chip-ic:var(--ic-cash); }
html.studio #toolView .oa-ira, html.studio #toolView .oa-brk { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); --chip-ic:var(--ic-chart); }
html.studio #toolView .oa-roth { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-bank); }
html.studio #toolView .oa-hsa { --chip-bg:var(--s-red-l); --chip-fg:var(--s-red); --chip-ic:var(--ic-heart); }
/* fields: three to a row inside a card */
html.studio #toolView .rd-group .inputs-grid:not([style*="display:none"]):not([style*="display: none"]):not([hidden]) { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:14px !important; }
html.studio #toolView .rd-group .rd-spend-grid:not([style*="display:none"]):not([style*="display: none"]):not([hidden]) { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:14px !important; }
html.studio #toolView .rd-group .rd-spend-h { font-size:12.5px !important; font-weight:600 !important; color:var(--s-ink2) !important; margin:0 0 6px !important; }
html.studio #toolView .rd-group .rd-spend-h .fld-opt { display:none !important; }
/* optional fields that are empty sit behind "N more" (js/52) */
html.studio #toolView .rd-group:not(.st-open) .st-opt { display:none !important; }
html.studio .st-more:not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { display:inline-flex !important; align-items:center; gap:6px; margin-top:14px; padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--s-blue); cursor:pointer; grid-column:1 / -1; justify-self:start; }
html.studio .st-more::before { content:''; width:14px; height:14px; background:currentColor; -webkit-mask:var(--ic-chev) center/14px no-repeat; mask:var(--ic-chev) center/14px no-repeat; transition:transform .15s; }
html.studio .rd-group.st-open .st-more::before { transform:rotate(180deg); }
html.studio .st-more:hover { text-decoration:underline; }

html.studio #matchLive { display:inline-flex !important; align-items:center; gap:6px; flex-wrap:wrap; max-width:none !important; margin:14px 0 0 !important; padding:7px 12px !important; border:0 !important; border-radius:9px !important; background:var(--s-green-l) !important; color:var(--s-ink2) !important; font-size:13px !important; }
html.studio #matchLive[hidden] { display:none !important; }
html.studio #matchLive[hidden] { display:none; }
html.studio #matchLive b { color:var(--s-ink); }

/* =================== Plan details: Plan options as tiles =================== */
html.studio #planOptionsList .po-group { margin:4px 0 10px !important; padding:0 !important; border:0 !important; }
html.studio #planOptionsList .po-group-name { font-size:12px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--s-muted) !important; }
html.studio #planOptionsList .po-sec { margin:0 0 22px !important; }
html.studio #planOptionsList .po-sec-rows { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:14px !important; }
html.studio #planOptionsList .po-row { margin:0 !important; background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:14px !important; box-shadow:var(--s-sh) !important; min-width:0; }
html.studio #planOptionsList .po-row.po-suggested { background:var(--s-soft) !important; border-style:dashed !important; border-color:var(--s-line2) !important; box-shadow:none !important; }
html.studio #planOptionsList .po-row:has(.po-main[aria-expanded="true"]) { grid-column:1 / -1; }
html.studio #planOptionsList .po-head { display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; grid-template-rows:auto auto; align-items:start !important; gap:10px 8px !important; padding:16px !important; min-height:132px; }
html.studio #planOptionsList .po-main { grid-column:1; grid-row:1 / span 2; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding:0 !important; background:none !important; border:0 !important; text-align:left !important; min-width:0; }
html.studio #planOptionsList .po-icon { width:34px !important; height:34px !important; border-radius:10px !important; display:grid !important; place-items:center !important; background:var(--s-teal-l) !important; border:0 !important; box-shadow:none !important; }
html.studio #planOptionsList .po-icon svg { width:18px !important; height:18px !important; }
html.studio #planOptionsList .po-text strong { display:block; font-size:14px !important; font-weight:700 !important; color:var(--s-ink) !important; }
html.studio #planOptionsList .po-text { min-width:0; max-width:100%; white-space:normal !important; }
html.studio #planOptionsList .po-text .po-sum, html.studio #planOptionsList .po-text small { white-space:normal !important; overflow:hidden !important; text-overflow:clip !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding-right:64px; margin-top:4px; font-size:12.5px !important; line-height:1.45 !important; color:var(--s-muted) !important; font-weight:500 !important; }
html.studio #planOptionsList .po-switch { grid-column:2; grid-row:1; background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
html.studio #planOptionsList .po-switch-text { display:none !important; }
html.studio #planOptionsList .po-switch-track { width:38px !important; height:22px !important; border-radius:999px !important; background:var(--s-off) !important; border:0 !important; position:relative !important; display:block !important; }
html.studio #planOptionsList .po-switch-knob { position:absolute !important; top:3px !important; left:3px !important; width:16px !important; height:16px !important; border-radius:50% !important; background:#fff !important; box-shadow:0 1px 2px rgba(var(--s-shadow-rgb),.2) !important; transform:none !important; transition:left .15s !important; }
html.studio #planOptionsList .po-switch[aria-checked="true"] .po-switch-track { background:var(--s-blue) !important; }
html.studio #planOptionsList .po-switch[aria-checked="true"] .po-switch-knob { left:19px !important; }
/* Edit: a small square button with a pencil; a chevron to close while the settings are open (2026-10-08) */
html.studio #planOptionsList .po-chev { grid-column:2; grid-row:2; align-self:end; justify-self:end; width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important;
  font-size:0 !important; color:transparent !important; transform:none !important; border-radius:10px !important; position:relative; }
html.studio #planOptionsList .po-chev::before { content:'' !important; position:absolute; inset:0; margin:auto; width:16px; height:16px; background:var(--s-ink2); transform:none !important;
  -webkit-mask:var(--ic-pencil) center/16px no-repeat; mask:var(--ic-pencil) center/16px no-repeat; }
html.studio #planOptionsList .po-chev::after { content:none !important; }
html.studio #planOptionsList .po-chev:hover::before { background:var(--s-blue); }
html.studio #planOptionsList .po-row:has(.po-main[aria-expanded="true"]) .po-chev::before { -webkit-mask-image:var(--ic-chev); mask-image:var(--ic-chev); transform:rotate(180deg) !important; }
html.studio #planOptionsList .po-body { grid-column:1 / -1; padding:0 16px 16px !important; border-top:1px solid var(--s-line) !important; }
/* Add to your plan: tiles with a + */
html.studio #planOptionsList .po-chips { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:12px !important; }
html.studio #planOptionsList .po-chip:not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { position:relative; display:flex !important; align-items:center !important; gap:10px !important; min-height:56px !important; padding:12px 46px 12px 12px !important;
  border:1px solid var(--s-line) !important; border-radius:12px !important; background:var(--s-card) !important; box-shadow:none !important; color:var(--s-ink) !important; font-size:13px !important; font-weight:700 !important; text-align:left !important; }
html.studio #planOptionsList .po-chip:hover { border-color:var(--s-line2) !important; box-shadow:var(--s-sh) !important; }
html.studio #planOptionsList .po-chip > span[aria-hidden] { order:2; position:absolute; right:12px; top:50%; margin-top:-13px; width:26px; height:26px; border-radius:8px; border:1px solid var(--s-line2); font-size:0 !important; display:grid; place-items:center; }
html.studio #planOptionsList .po-chip > span[aria-hidden]::after { content:''; width:14px; height:14px; background:var(--s-ink2); -webkit-mask:var(--ic-plus) center/14px no-repeat; mask:var(--ic-plus) center/14px no-repeat; }
html.studio #planOptionsList .po-chip::before { content:''; flex:none; width:30px; height:30px; border-radius:9px; background:var(--chip-bg, var(--s-blue-l)); }
html.studio #planOptionsList .po-chip::after { content:''; position:absolute; left:19px; top:50%; width:16px; height:16px; margin-top:-8px; background:var(--chip-fg, var(--s-blue)); -webkit-mask:var(--chip-ic, var(--ic-plus)) center/16px no-repeat; mask:var(--chip-ic, var(--ic-plus)) center/16px no-repeat; }
html.studio .po-chip[data-st="pension"] { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); --chip-ic:var(--ic-cash); }
html.studio .po-chip[data-st="annuity"] { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-shield); }
html.studio .po-chip[data-st="tips"] { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); --chip-ic:var(--ic-list); }
html.studio .po-chip[data-st="part"] { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); --chip-ic:var(--ic-cal); }
html.studio .po-chip[data-st="self"] { --chip-bg:var(--s-green-l); --chip-fg:var(--s-green); --chip-ic:var(--ic-chart); }
html.studio .po-chip[data-st="rental"] { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); --chip-ic:var(--ic-home); }
html.studio .po-chip[data-st="once"] { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-flag); }
html.studio .po-chip[data-st="give"] { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); --chip-ic:var(--ic-heart); }
html.studio .po-chip[data-st="glide"] { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); --chip-ic:var(--ic-trend); }

/* ---------- the page frame: edge to edge, sidebar full height (2026-10-08) ---------- */
html.studio body { padding:0 !important; margin:0 !important; }
html.studio .wrap { margin:0 !important; max-width:none !important; width:100% !important; min-height:100vh; }
html.studio .site-header { background:var(--s-card) !important; border-radius:0 !important; border:0 !important; border-right:1px solid var(--s-line) !important; box-shadow:none !important; }
html.studio #mainToolNavigation.global-nav { border-radius:0 !important; }
@media (min-width:1001px){ html.studio #mainToolNavigation.global-nav { height:calc(100vh - 84px) !important; max-height:none !important; overflow-y:auto; } }
html.studio .compass-workspace-header { border-radius:0 !important; }
html.studio #toolView, html.studio [id$="View"] { background:transparent !important; border-radius:0 !important; }
html.studio .app-footer { background:transparent !important; border:0 !important; }
/* choices (Spending: one amount / itemize; withdrawal strategy): a segmented control — icon + one or two words,
   the chosen one filled with the app's blue; the longer description is in the ⓘ tip (js/52 sets data-st-label) */
html.studio #toolView .toggle-row.spend-source-row { display:inline-flex !important; flex-wrap:wrap; gap:4px !important; padding:4px !important; border-radius:12px !important; background:var(--s-seg2) !important; border:0 !important; width:auto !important; max-width:100%; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn { display:inline-flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; gap:7px !important; min-height:36px !important; height:auto !important; padding:0 14px !important; margin:0 !important; flex:none !important; width:auto !important; min-width:0 !important;
  border:0 !important; border-radius:9px !important; background:transparent !important; box-shadow:none !important; color:var(--s-ink2) !important; font-size:13.5px !important; font-weight:600 !important; text-align:left !important; cursor:pointer; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn:hover { background:var(--s-hover) !important; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn[data-st-label] > * { display:none !important; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn[data-st-label]::after { content:attr(data-st-label); }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn::before { content:'' !important; display:block !important; position:static !important; width:16px !important; height:16px !important; flex:none; border:0 !important; border-radius:0 !important; background:currentColor !important; opacity:1 !important; transform:none !important; -webkit-mask:var(--st-ic, var(--ic-list)) center/16px no-repeat !important; mask:var(--st-ic, var(--ic-list)) center/16px no-repeat !important; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn.active { background:var(--s-blue) !important; color:var(--s-on) !important; box-shadow:0 4px 10px -4px rgba(var(--s-blue-rgb),.55) !important; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn.active * { color:var(--s-on) !important; }
html.studio #toolView .toggle-row.spend-source-row > .toggle-btn:focus-visible { outline:none !important; box-shadow:0 0 0 3px rgba(var(--s-blue-rgb),.3) !important; }
html.studio #spendSourceGoal { --st-ic:var(--ic-cash); } html.studio #spendSourcePlanner { --st-ic:var(--ic-list); }
html.studio #wdFixed { --st-ic:var(--ic-coin); } html.studio #wdPercent { --st-ic:var(--ic-chart); } html.studio #wdGuardrails { --st-ic:var(--ic-shield); }
html.studio #toolView .panel:has(> .rd-group) { align-items:stretch !important; }

/* ---------- phones: the plan steps' summary rows (js mf-row) and the Back / Next bar ---------- */
html.studio .mf-row { background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:14px !important; box-shadow:var(--s-sh) !important; padding:14px !important; gap:12px !important; }
html.studio .mf-row { position:relative !important; }
html.studio .mf-row::before { content:''; flex:none; width:34px; height:34px; border-radius:10px; background:var(--chip-bg, var(--s-blue-l)); }
html.studio .mf-row::after { content:''; position:absolute; left:22px; top:50%; width:18px; height:18px; margin-top:-9px; background:var(--chip-fg, var(--s-blue)); -webkit-mask:var(--chip-ic, var(--ic-list)) center/18px no-repeat; mask:var(--chip-ic, var(--ic-list)) center/18px no-repeat; }
html.studio .mf-row .mf-row-main strong { color:var(--s-ink) !important; font-size:14.5px !important; font-weight:700 !important; }
html.studio .mf-row .mf-row-main small { color:var(--s-muted) !important; font-size:12.5px !important; font-weight:500 !important; }
html.studio .mf-row .mf-check { background:var(--s-green-l) !important; color:var(--s-green-ink) !important; border:0 !important; }
html.studio .mf-row .mf-chev { color:var(--s-faint) !important; }
html.studio .mf-row[data-fold="you"] { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); --chip-ic:var(--ic-flag); }
html.studio .mf-row[data-fold="saving"] { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-wallet); }
html.studio .mf-row[data-fold="match"] { --chip-bg:var(--s-green-l); --chip-fg:var(--s-green); --chip-ic:var(--ic-bank); }
html.studio .mf-row[data-fold="ss"] { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); --chip-ic:var(--ic-cash); }
html.studio .mf-row[data-fold="assume"] { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); --chip-ic:var(--ic-sliders); }
html.studio .mf-row[data-fold="spending"] { --chip-bg:var(--s-red-l); --chip-fg:var(--s-red); --chip-ic:var(--ic-cart); }
html.studio .mf-row[data-fold="heirs"] { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); --chip-ic:var(--ic-gift); }
html.studio .mf-actionbar { background:var(--s-glass) !important; border-top:1px solid var(--s-line) !important; box-shadow:0 -8px 24px -18px rgba(var(--s-shadow-rgb),.25) !important; backdrop-filter:blur(8px); }
html.studio .mf-ab-btn { min-height:44px !important; border-radius:12px !important; font-size:14px !important; font-weight:600 !important; box-shadow:var(--s-xs) !important; }
html.studio .mf-ab-secondary { background:var(--s-card) !important; border:1px solid var(--s-line2) !important; color:var(--s-ink2) !important; }

/* =================== Projections (design/studio-projections.html) =================== */
html:not(.studio) .st-tile, html:not(.studio) .st-qm, html:not(.studio) .st-more { display:none !important; }
html:not(.studio) .st-hid { display:contents; }
html.studio .st-hid { display:none !important; }
html.studio #toolView [data-st-label], html.studio #resultsView button[data-st-label] { font-size:0 !important; }
html.studio #resultsView button[data-st-label]::after { content:attr(data-st-label); font-size:13px; font-weight:600; }
/* the cards sit on the canvas: the results panel is no longer a card around cards */
html.studio #resultsPanel > .panel { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:16px !important; }
html.studio #resultsPanel > .panel > :is(#improveCard, #dashDownturn, .fan-chart-shell, #resultsDetails) { margin:0 !important; background:var(--s-card) !important; border:1px solid var(--s-line) !important; border-radius:var(--s-r) !important; box-shadow:var(--s-sh) !important; padding:18px 20px !important; }
html.studio #resultsPanel > .panel > #resultActions { margin:0 !important; }
/* result card: the facts as tiles */
html.studio #dashBanner { padding:20px 22px !important; }

html.studio #dashExplain { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; }
html.studio #dashExplain .dx-h { grid-column:1 / -1; margin:0 !important; padding:0 !important; border:0 !important; font-size:15px !important; font-weight:700 !important; color:var(--s-ink) !important; }
html.studio #dashExplain .dx-h span { font-size:12.5px !important; font-weight:500 !important; color:var(--s-muted) !important; float:right; }
html.studio #dashExplain .dx-h .dx-dot { display:none !important; }
html.studio #dashExplain .dx-row.st-tiled { position:relative; display:flex !important; align-items:center !important; gap:12px !important; margin:0 !important; padding:14px !important; border:1px solid var(--s-line) !important; border-radius:12px !important; background:var(--s-card) !important; min-width:0; }
html.studio #dashExplain .dx-row.st-tiled > p { display:none !important; }
html.studio #dashExplain .dx-row .dx-ic { flex:none; width:34px !important; height:34px !important; padding:8px; box-sizing:border-box; border-radius:10px; background:var(--chip-bg, var(--s-blue-l)); color:var(--chip-fg, var(--s-blue)) !important; stroke-width:2 !important; }
html.studio #dashExplain .dx-spend { --chip-bg:var(--s-orange-l); --chip-fg:var(--s-orange); }
html.studio #dashExplain .dx-income { --chip-bg:var(--s-blue-l); --chip-fg:var(--s-blue); }
html.studio #dashExplain .dx-spouse { --chip-bg:var(--s-teal-l); --chip-fg:var(--s-teal); }
html.studio #dashExplain .dx-savings { --chip-bg:var(--s-violet-l); --chip-fg:var(--s-violet); }
html.studio #dashExplain .dx-risk { --chip-bg:var(--s-red-l); --chip-fg:var(--s-red); }
html.studio #dashExplain .dx-more { grid-column:1 / -1; margin:0 !important; padding:2px 0 0 !important; border:0 !important; font-size:13px !important; color:var(--s-muted) !important; }
html.studio #dashExplain .dx-more .dx-ic { width:18px !important; height:18px !important; padding:0; background:none; color:var(--s-blue) !important; }
html.studio #dashExplain .st-tile { display:flex; flex-direction:column; min-width:0; }
html.studio #dashExplain .st-k { font-size:12.5px; font-weight:600; color:var(--s-muted); }
html.studio #dashExplain .st-v { margin-top:2px; font-size:20px; font-weight:700; letter-spacing:-.4px; color:var(--s-ink); white-space:normal; /* wraps (2026-10-12: "savings pay everything …" was cut) */ font-variant-numeric:tabular-nums; }
html.studio #dashExplain .st-v small { font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--s-muted); }
html.studio #dashExplain .dx-row > .st-qm { position:absolute !important; top:12px; right:12px; }
/* Room to spare */
html.studio #improveCard .ic-tabs { display:inline-flex !important; gap:2px !important; padding:3px !important; border-radius:10px !important; background:var(--s-track) !important; border:0 !important; margin:0 0 14px !important; width:auto !important; }
html.studio #improveCard .ic-tab { white-space:nowrap !important; width:auto !important; flex:none !important; min-height:32px !important; padding:0 14px !important; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; color:var(--s-muted) !important; font-size:13px !important; font-weight:600 !important; }
html.studio #improveCard .ic-tab small { display:none !important; }
html.studio #improveCard .ic-tab.is-on { background:var(--s-card) !important; color:var(--s-ink) !important; box-shadow:0 1px 3px rgba(var(--s-shadow-rgb),.12) !important; }
html.studio #safeAgeBox { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
html.studio #safeAgeBox .sa-head { display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; gap:12px !important; align-items:start !important; }
html.studio #safeAgeBox .sa-tiles { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:16px !important; }
html.studio #safeAgeBox .sa-tile { padding:16px !important; border-radius:12px !important; background:var(--s-soft) !important; border:1px solid var(--s-line) !important; }
html.studio #safeAgeBox .sa-k { display:flex !important; align-items:center; gap:6px; font-size:12.5px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--s-muted) !important; }
html.studio #safeAgeBox .sa-big { font-size:30px !important; font-weight:800 !important; letter-spacing:-.8px !important; color:var(--s-ink) !important; margin:6px 0 2px !important; }
html.studio #safeAgeBox .sa-none { font-size:22px; letter-spacing:-.3px; color:var(--s-ink2); }
html.studio #safeAgeBox .sa-sub { font-size:12.5px !important; color:var(--s-muted) !important; }
html.studio #safeAgeBox .sa-seg { display:inline-flex !important; padding:3px !important; gap:2px !important; border-radius:10px !important; background:var(--s-track) !important; border:0 !important; }
html.studio #safeAgeBox .sa-t { min-height:30px !important; padding:0 12px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--s-muted) !important; font-size:12.5px !important; font-weight:600 !important; box-shadow:none !important; }
html.studio #safeAgeBox .sa-t.is-on { background:var(--s-card) !important; color:var(--s-ink) !important; box-shadow:0 1px 3px rgba(var(--s-shadow-rgb),.12) !important; }
html.studio #cashflowView .st-moved, html.studio #paycheckView .st-moved, html.studio #rothView .st-moved, html.studio #taxesView .st-moved, html.studio #networthView .st-moved, html.studio #seqRiskSummary .st-moved, html.studio #safeAgeBox .sa-line.st-moved, html.studio #safeAgeBox .sa-foot.st-moved { display:none !important; }
html.studio #safeAgeBox .sa-acts { display:flex !important; flex-wrap:wrap; gap:8px !important; margin:12px 0 0 !important; }
html.studio #safeAgeBox .sa-note { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:12px 0 0 !important; padding:12px 14px !important; border:1px solid var(--s-line) !important; border-radius:12px !important; background:var(--s-card) !important; font-size:13.5px !important; color:var(--s-ink2) !important; }
html.studio #safeAgeBox .sa-note.sa-warn { background:var(--s-amber-l) !important; border-color:transparent !important; }
html.studio #safeAgeBox .sa-note > b { color:var(--s-ink) !important; font-weight:700 !important; }
html.studio #safeAgeBox .sa-note > .st-qm { margin:0 !important; }
html.studio #dashHelp .dh-sub.st-moved { display:none !important; }
html.studio #safeAgeBox .sa-note .sa-acts { margin:0 0 0 auto !important; }
html.studio #safeAgeBox .sa-note > button, html.studio #safeAgeBox .sa-note .sa-link { margin-left:auto !important; }
html.studio #safeAgeBox .sa-note .sa-acts button:not(:first-child) { background:var(--s-card) !important; border:1px solid var(--s-line2) !important; color:var(--s-ink2) !important; }
html.studio #safeAgeBox .sa-note .sa-acts button:not(:first-child)::after { color:var(--s-ink2); }
html.studio #safeAgeBox .sa-link { min-height:30px !important; padding:0 12px !important; border:1px solid var(--s-line2) !important; border-radius:8px !important; background:var(--s-card) !important; color:var(--s-ink2) !important; font-size:12.5px !important; font-weight:600 !important; text-decoration:none !important; }
/* What would help most */
html.studio #dashHelp { background:transparent !important; border:0 !important; box-shadow:none !important; padding:16px 0 0 !important; margin-top:16px !important; border-top:1px solid var(--s-line) !important; border-radius:0 !important; }
html.studio #dashHelp .dh-h { font-size:15px !important; font-weight:700 !important; color:var(--s-ink) !important; }
html.studio #dashHelp .dh-sub { font-size:13px !important; color:var(--s-muted) !important; }
html.studio #dashHelp .dh-btn { width:auto !important; }
/* the rows that open (every change tested, look closer, details) */
html.studio #improveCard .ic-more > summary, html.studio #resultsDetails summary { display:flex !important; align-items:center !important; gap:10px; min-height:48px; padding:0 4px !important; border-top:1px solid var(--s-line) !important; font-size:13.5px !important; font-weight:600 !important; color:var(--s-ink) !important; background:none !important; }
html.studio #improveCard .ic-more > summary small, html.studio #resultsDetails summary small { color:var(--s-muted) !important; font-weight:500 !important; }
html.studio #resultActions { display:flex !important; gap:10px !important; justify-content:flex-end; }
html.studio #resultActions button { flex:none !important; width:auto !important; }
/* early fall */
html.studio #dashDownturn :is(.dd-stat, .dd-grid > div) { border-radius:12px !important; background:var(--s-soft) !important; border:1px solid var(--s-line) !important; }
@media (max-width:760px){
  html.studio #dashExplain { grid-template-columns:minmax(0, 1fr) !important; }

  html.studio #safeAgeBox .sa-head, html.studio #safeAgeBox .sa-tiles { grid-template-columns:minmax(0, 1fr) !important; }
}

/* =================== Expense Planner =================== */
html.studio #expensesView .xb-badge { background:color-mix(in srgb, var(--bdg, var(--s-blue)) 14%, var(--s-card)) !important; border-radius:10px !important; box-shadow:none !important; }
html.studio #expensesView .xb-badge svg, html.studio #expensesView .xb-badge svg * { stroke:var(--bdg, var(--s-blue)) !important; }
html.studio #expensesView .xb-badge svg [fill]:not([fill="none"]) { fill:var(--bdg, var(--s-blue)) !important; }
html.studio #expensesView .xb-chips { gap:10px !important; }
html.studio #expensesView .xb-chip { min-height:36px !important; padding:0 14px !important; border:1px solid var(--s-line2) !important; border-radius:10px !important; background:var(--s-card) !important; color:var(--s-ink2) !important; font-size:13px !important; font-weight:600 !important; box-shadow:var(--s-xs) !important; }
html.studio #expensesView .xb-chip:hover { border-color:var(--s-blue) !important; color:var(--s-blue) !important; }
html.studio #expensesView .xb-events-desc.st-moved { display:none !important; }

/* =================== Roth, Taxes =================== */
html.studio #rothView .st-say { display:flex; align-items:center; gap:6px; margin:12px 0 0; font-size:14px; color:var(--s-ink); }
html:not(.studio) .st-say { display:none !important; }
html.studio #networthView .tx-insight.st-folded > :first-child { display:flex !important; align-items:center; gap:6px; }
html.studio :is(#taxesView, #networthView) .tx-insight.st-folded { padding:14px 16px !important; border-radius:12px !important; }
html.studio #taxesView .tx-insight.st-folded > :first-child { display:flex !important; align-items:center; gap:6px; margin:0 !important; }

html.studio #scenariosView .runbtn { width:auto !important; flex:none !important; }

/* account editor (2026-10-09): its Next / Use this mix / Done is the main action — blue, like every other Next */
html.studio .aw-foot .aw-btn:not(.aw-btn-q) { background:var(--s-blue) !important; border:1px solid var(--s-blue) !important; color:var(--s-on) !important; }
html.studio .aw-foot .aw-btn:not(.aw-btn-q):hover { background:var(--s-blue-d) !important; border-color:var(--s-blue-d) !important; }
html.studio .aw-foot .aw-btn:not(.aw-btn-q):disabled { background:var(--s-dis) !important; border-color:var(--s-dis) !important; color:var(--s-dis-ink) !important; box-shadow:none !important; }
html.studio .aw-arow .aw-edit { min-height:28px; padding:0 10px; border:1px solid var(--s-line2) !important; border-radius:8px !important; background:var(--s-card) !important; color:var(--s-ink2) !important; font-size:12.5px !important; font-weight:600 !important; display:inline-flex; align-items:center; }

/* the balance box: one box, the $ and the number inside it (Studio's field border was drawing a second box) */
html.studio .aw-money input, html.studio .aw-money input:focus { border:0 !important; box-shadow:none !important; background:transparent !important; height:auto !important; min-height:0 !important; padding:0 !important; }
/* One box, not two (2026-10-10): an input inside a box that already draws the border — the account balance, Net
   Worth's home value, the User Guide search — has no border of its own, in every theme. ":root :is(…) input:not(…)×4"
   outranks the theme's general field rule (html.studio input:not(…)×4; Focus's is in a later layer). */
:root :is(.aw-money, .nw-q-in, .ug-search) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
:root :is(.aw-money, .nw-q-in, .ug-search) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus {
  border:0 !important; box-shadow:none !important; background:transparent !important; outline:none !important; border-radius:0 !important; }
html.studio .aw-money { border-color:var(--s-line2) !important; border-radius:12px !important; background:var(--s-card) !important; }
html.studio .aw-money:focus-within { border-color:var(--s-blue) !important; box-shadow:0 0 0 3px rgba(var(--s-blue-rgb),.12) !important; }

html.studio #hcBox .hc-line select { width:auto !important; display:inline-block !important; height:32px !important; min-height:32px !important; padding:0 28px 0 10px !important; font-size:13px !important; line-height:30px !important; }

/* =================== Accounts step =================== */
/* Edit / Delete: square icon buttons (pencil, trash); the words stay as their labels for screen readers */
html.studio #toolView .mm-act { width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; padding:0 !important; border:1px solid var(--s-line2) !important; border-radius:9px !important;
  background:var(--s-card) !important; font-size:0 !important; color:transparent !important; position:relative; box-shadow:var(--s-xs) !important; }
html.studio #toolView .mm-act::before { content:''; position:absolute; inset:0; margin:auto; width:15px; height:15px; background:var(--s-ink2); -webkit-mask:var(--ic-pencil) center/15px no-repeat; mask:var(--ic-pencil) center/15px no-repeat; }
html.studio #toolView .mm-act.mm-del::before { -webkit-mask-image:var(--ic-trash); mask-image:var(--ic-trash); }
html.studio #toolView .mm-act:hover { border-color:var(--s-blue) !important; } html.studio #toolView .mm-act:hover::before { background:var(--s-blue); }
html.studio #toolView .mm-act.mm-del:hover { border-color:var(--s-red) !important; } html.studio #toolView .mm-act.mm-del:hover::before { background:var(--s-red); }
/* Add another account: white buttons with a + */
html.studio #toolView .acct-presets { gap:10px !important; }
html.studio #toolView .acct-chip { display:inline-flex !important; align-items:center; gap:6px; min-height:36px !important; padding:0 14px 0 10px !important; border:1px solid var(--s-line2) !important; border-radius:10px !important;
  background:var(--s-card) !important; color:var(--s-ink2) !important; font-size:13px !important; font-weight:600 !important; box-shadow:var(--s-xs) !important; }
html.studio #toolView .acct-chip::before { content:''; width:14px; height:14px; background:var(--s-blue); -webkit-mask:var(--ic-plus) center/14px no-repeat; mask:var(--ic-plus) center/14px no-repeat; }
html.studio #toolView .acct-chip:hover { border-color:var(--s-blue) !important; color:var(--s-blue) !important; }

/* =================== phones =================== */
@media (max-width:1100px){
  html.studio #toolView .panel:has(> .rd-group):not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { grid-template-columns:minmax(0, 1fr) !important; }
  html.studio #planOptionsList .po-sec-rows { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  html.studio #planOptionsList .po-chips { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width:760px){
  html.studio #toolView .rd-group { padding:14px !important; }
  /* an opened section joins its row: one card, the row as its header (no repeated title) */
  html.studio #toolView .mf-row[aria-expanded="true"] { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; border-bottom-color:transparent !important; box-shadow:none !important; margin-bottom:0 !important; }
  html.studio #toolView .mf-row[aria-expanded="true"] + .rd-group { margin-top:-16px !important; border-top:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; padding-top:4px !important; }
  html.studio #toolView .mf-row[aria-expanded="true"] + .rd-group > .rd-group-h { margin-bottom:8px !important; justify-content:flex-end; }
  html.studio #toolView .mf-row[aria-expanded="true"] + .rd-group > .rd-group-h > h3 { font-size:0 !important; gap:0 !important; }
  html.studio #toolView .mf-row[aria-expanded="true"] + .rd-group > .rd-group-h > h3::before, html.studio #toolView .mf-row[aria-expanded="true"] + .rd-group > .rd-group-h > h3::after { display:none !important; }

  html.studio #toolView .rd-group .inputs-grid:not([style*="display:none"]):not([style*="display: none"]):not([hidden]) { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  html.studio #planOptionsList .po-sec-rows { grid-template-columns:minmax(0, 1fr) !important; }
  html.studio #planOptionsList .po-head { min-height:0; }
  html.studio #planOptionsList .po-chips { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}

/* =================== Studio Dark (2026-10-08): the same design on deep navy, the blue accent (the user's example) ===== */
html.studio.studio-dark {
  --s-bg:#0b101b; --s-card:#111a28; --s-line:#1e2838; --s-line2:#283346; --s-line3:#364257; --s-ink:#eef2f8; --s-ink2:#c8d0dc; --s-muted:#8e99ab; --s-faint:#6b778b;
  --s-navy:#1b2536; --s-navy2:#243045; --s-blue:#5b6cff; --s-blue-d:#7381ff; --s-blue-rgb:91,108,255; --s-on:#fff; --s-blue-l:rgba(91,108,255,.16);
  --s-violet:#a99bff; --s-violet-l:rgba(169,155,255,.15); --s-orange:#ffa95c; --s-orange-l:rgba(255,169,92,.14); --s-green:#34d399; --s-green-l:rgba(52,211,153,.13);
  --s-red:#ff5f73; --s-red-l:rgba(255,95,115,.13); --s-amber:#f5b942; --s-amber-l:rgba(245,185,66,.14); --s-teal:#2dd4bf; --s-teal-l:rgba(45,212,191,.13);
  --s-track:#172131; --s-soft:#141e2d; --s-seg2:#172131; --s-off:#2c374b; --s-dis:#26306a; --s-dis-ink:#7f8aea; --s-green-ink:#34d399;
  --s-glass:rgba(17,26,40,.94); --s-hover:rgba(255,255,255,.06); --s-shadow-rgb:0,0,0;
  --s-blue-btn:#4352e6; --s-link:#9aa6ff; /* 2026-10-13 audit: white on --s-blue was 4.17:1, --s-blue text on the card 4.19:1 */
  --s-sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6); --s-xs:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}
html.studio.studio-dark ::selection { background:rgba(91,108,255,.35); }
html.studio.studio-dark #tooltipBubble { background:#1b2536 !important; border:1px solid var(--s-line2) !important; }
html.studio.studio-dark #planOptionsList .po-switch-knob { background:#eef2f8 !important; }
/* Light / Dark switch at the bottom of the sidebar (js/52) */
html.studio .st-mode { grid-column:1 / -1; display:flex; gap:4px; padding:4px; margin:0 0 6px; border-radius:12px; background:var(--s-track); }
html.studio .st-mode button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; border:0; border-radius:9px; background:transparent; color:var(--s-muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
html.studio .st-mode button::before { content:''; width:14px; height:14px; background:currentColor; -webkit-mask:var(--st-ic) center/14px no-repeat; mask:var(--st-ic) center/14px no-repeat; }
html.studio .st-mode button[data-st-mode="studio"] { --st-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>"); }
html.studio .st-mode button[data-st-mode="studio-dark"] { --st-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/></svg>"); }
html.studio .st-mode button.on { background:var(--s-card); color:var(--s-blue); box-shadow:var(--s-xs); }
html:not(.studio) .st-mode { display:none; }
html.studio.sb-collapsed .st-mode { flex-direction:column; } html.studio.sb-collapsed .st-mode button { font-size:0; gap:0; }
}

/* =================== Edit and delete, the same everywhere (2026-10-15) =================== */
/* User: "the edit and delete should be the same throughout the app. replace all button that say edit and the x with the ones
   used in the accounts section." The accounts list's square pencil / trash (.mm-act, above) for every Edit and every remove
   button; the words stay as their labels for screen readers. Close buttons (the drawer's ✕, a note's ×) are left alone. */
html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit, .glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove) {
  display:inline-grid !important; place-items:center; flex:none !important; width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; padding:0 !important;
  border:1px solid var(--s-line2) !important; border-radius:9px !important; background:var(--s-card) !important; box-shadow:var(--s-xs) !important;
  font-size:0 !important; line-height:0 !important; letter-spacing:0 !important; color:transparent !important; text-decoration:none !important; position:relative !important; inset:auto !important; overflow:hidden; cursor:pointer; }
html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit, .glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove)::before {
  content:'' !important; display:block !important; position:absolute !important; inset:0 !important; margin:auto !important; width:15px !important; height:15px !important; border:0 !important; border-radius:0 !important;
  background:var(--s-ink2) !important; -webkit-mask:var(--ic-pencil) center/15px no-repeat; mask:var(--ic-pencil) center/15px no-repeat; }
html.studio body :is(.glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove)::before { -webkit-mask-image:var(--ic-trash) !important; mask-image:var(--ic-trash) !important; }
html.studio body .prop-head .prop-x { margin-left:6px !important; }
html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit):hover { border-color:var(--s-blue) !important; } html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit):hover::before { background:var(--s-blue) !important; }
html.studio body :is(.glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove):hover { border-color:var(--s-red) !important; } html.studio body :is(.glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove):hover::before { background:var(--s-red) !important; }
html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit, .glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove):focus-visible { outline:2px solid var(--s-blue) !important; outline-offset:2px !important; }
/* on a phone, finger-sized (and the accounts list's too) */
@media (max-width:700px){
  html.studio body :is(.prop-edit:is([data-pc-edit], [data-dc-edit]), .ib-edit, .glide-rm, .nw-a-del, .xb-x, .pc-del, .sc-x, .xm-rm, .aw-x, .ib-del, .acct-del, .rn-exp-remove), html.studio #toolView .mm-act { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; }
}