/* Rent vs. Buy — tool-specific layer (styles/app.css)
   Layer 6 of the v2 theme contract: pon7ryr kit → hfg-tokens → hfg-tool-shell
   → hfg-report-v2 → hfg-input-v2 → this file → auth.css → embed.css. Only what
   is unique to THIS tool lives here; every input, card, report and mobile shape
   comes from the kit. The auth gate lives in styles/auth.css and the
   portal-embed overrides in styles/embed.css, because tutorial.html needs both
   and does NOT load this file.
   Colors only via var(--…) tokens. No inline styles anywhere (CSP). */

/* The rate field uses the kit's .spin chevrons — hide the native (tiny)
   number spinner so there aren't two sets of arrows. */
#rate::-webkit-inner-spin-button,#rate::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#rate{-moz-appearance:textfield;appearance:textfield;}

/* A hint that has become a limit message (seller credit over the program's
   interested-party contribution cap) — the one red, per the standard. */
#pg1 .inp-hint.warn{color:var(--rp-red);}

/* ═══════════ HERO ACTION PILLS (tutorial + saved scenarios) ═══════════
   Both entry points live at the bottom of .hero-copy, inside the navy hero
   tile, as translucent outlined pills — never a full-width strip under the
   hero, and never two strips stacked. (The designer's copy shipped the tutorial
   as a .pg1-tut-btn strip; that is the shape the v2 kit replaced. The kit's
   .pg1-tut-btn rules are left alone — they are shared, and other tools may
   still be on the old shape.) The kit does not own these; they are the tool's
   own layer.

   .hero-btn styles BOTH an <a> and a <button>, so every default either element
   brings has to be reset explicitly (text-decoration, font-family, cursor). */
#pg1 .hero-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
#pg1 .hero-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 15px;box-sizing:border-box;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.26);border-radius:10px;
  color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:-.1px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
#pg1 .hero-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(188,214,74,.6);}
/* .on is the pressed look scenarios.js toggles while the panel is open */
#pg1 .hero-btn.on{background:rgba(188,214,74,.16);border-color:var(--rp-pill,#bcd64a);}
#pg1 .hero-btn .hb-ico{display:flex;align-items:center;color:var(--rp-pill,#bcd64a);font-size:13px;font-weight:800;}
#pg1 .hero-btn .scen-count{
  font-size:9.5px;font-weight:800;letter-spacing:.6px;
  color:var(--rp-pill-ink,#16290a);background:var(--rp-pill,#bcd64a);
  border-radius:5px;padding:2px 6px;margin-left:2px;
}
#pg1 .scen-count[hidden]{display:none;}
@media print{ #pg1 .hero-acts{display:none!important;} }


/* ── MOBILE: live wealth-gap banner (this tool's hero) ── */
#mv .rv-banner{margin:6px 0 4px;padding:24px 22px 20px;text-align:center;color:var(--ink);position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:linear-gradient(158deg,var(--panel2),var(--panel) 78%);}
#mv .rv-banner .bk{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);}
#mv .rv-banner .rvgap{font-size:44px;font-weight:800;letter-spacing:-1.6px;line-height:1.02;margin:6px 0 2px;color:var(--lime);font-variant-numeric:tabular-nums;}
#mv .rv-banner .rvtag{font-size:13px;color:var(--ink2);font-weight:600;}
#mv .rv-banner .rvwin{display:inline-block;margin-top:12px;background:var(--lime);color:#06243c;font-weight:800;font-size:12px;border-radius:30px;padding:7px 15px;}
#mv .rv-banner .rvwin.lose{background:var(--bg2);color:var(--ink);}
#mv .rv-stat2{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:14px;margin-top:15px;overflow:hidden;}
#mv .rv-stat2 .c{flex:1;padding:11px 8px;text-align:center;}
#mv .rv-stat2 .c + .c{border-left:1px solid var(--line);}
#mv .rv-stat2 .c .l{font-size:11px;color:var(--ink2);font-weight:700;}
#mv .rv-stat2 .c .v{font-size:17px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
#mv .rv-stat2 .c.rent .v{color:var(--red);}
#mv .rv-stat2 .c.buy .v{color:var(--lime);}

/* ═══════════════════════════════════════════════════════════════════
   SAVED SCENARIOS (scripts/scenarios.js)

   Ported from net-proceeds (feat/net-proceeds-v2-reskin, 2026-07-27 — the newest
   shipped copy). The hero pill + count chip are in the HERO ACTION PILLS block above;
   what follows is the panel, the rows, the buttons, the toasts and the popover.

   §1c-ii KIT-VERSION NOTE — .scen-btn ships as class="btn-secondary scen-btn",
   so part of its look arrives from whichever hfg-tool-shell.css the tool
   carries. THIS tool's shell DOES include the later "command-center" layer
   (--cc-ink at :727, .btn-secondary{border:2px solid var(--cc-ink);
   border-radius:12px;box-shadow:3px 3px 0 var(--cc-ink)} at :762 and the
   translate-on-hover press-in at :763), so the hard offset shadow would arrive
   by inheritance here. It is restated below anyway — with the ink as a literal
   fallback so no kit token is redefined in a tool stylesheet — because the
   compact metrics have to be restated regardless and a component whose look
   depends on an un-restated inherited property is exactly the silent
   kit-version dependency that rule exists to prevent.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the panel the hero button toggles ──
   A plain card in the form flow, directly above "The sale" so it sits next to
   the fields a Load writes into. No header of its own: the hero button IS the
   header. */
#pg1 .scen-panel{
  margin:18px 0 0;padding:15px 17px 16px;
  background:#fff;border:1px solid var(--rp-line,#e4e0d6);
  border-left:4px solid var(--rp-pill,#bcd64a);border-radius:11px;
  box-shadow:0 2px 8px rgba(16,50,79,.07);
}
/* The panel's children are display:flex, which outranks the UA [hidden] rule —
   restate it or the collapsed panel renders wide open. */
#pg1 .scen-panel[hidden]{display:none;}
#pg1 .scen-hint{
  margin:0 0 13px;padding:10px 13px;border-radius:9px;
  background:var(--rp-card,#fbfaf7);border:1px solid var(--rp-line,#e4e0d6);
  border-left:3px solid var(--rp-lime,#7f9a16);
  font-size:11px;font-weight:700;line-height:1.5;color:var(--rp-ink2,#41607a);
}

/* ── load confirmation: one-shot highlight on the first card ──
   After a Load the panel's own note is scrolled off above, so this is what
   confirms the values changed at the place the officer is now looking. A brief
   lime ring, then back to normal. `forwards` is deliberately NOT used: the card
   must end on its own styling. */
@keyframes scenFlash{
  0%  {box-shadow:0 0 0 0 rgba(188,214,74,0);    border-color:var(--rp-line,#e4e0d6);}
  18% {box-shadow:0 0 0 4px rgba(188,214,74,.45);border-color:var(--rp-lime,#7f9a16);}
  100%{box-shadow:0 0 0 0 rgba(188,214,74,0);    border-color:var(--rp-line,#e4e0d6);}
}
#pg1 .fcard.scen-flash{animation:scenFlash 1.15s ease-out;}
@media (prefers-reduced-motion:reduce){ #pg1 .fcard.scen-flash{animation:none;} }
/* revealDeal() focuses #dealSection programmatically when framed — no ring for
   that, but a keyboard user keeps their indicator. Same for the hero h1, which
   showPage() focuses on the way back to page 1. (#pg2Heading and the tutorial
   headline get the same treatment in styles/embed.css.) */
#pg1 #dealSection:focus:not(:focus-visible),
#pg1 .hero-title:focus:not(:focus-visible){outline:none;}

/* ── the list ── */
#pg1 .scen-list{display:flex;flex-direction:column;gap:8px;}
#pg1 .scen-empty{
  padding:16px 14px;border:1px dashed var(--iv-line,#dfe4e9);border-radius:10px;
  font-size:11.5px;font-weight:700;color:var(--rp-mut,#7a8a98);text-align:center;
}
#pg1 .scen-empty b{color:var(--rp-ink2,#41607a);}
#pg1 .scen-row{
  display:flex;align-items:center;gap:14px;padding:11px 14px;
  background:var(--rp-card,#fbfaf7);border:1px solid var(--iv-line,#dfe4e9);
  border-radius:10px;
}
#pg1 .scen-meta{flex:1;min-width:0;}
#pg1 .scen-nm{
  font-size:12.5px;font-weight:800;color:var(--rp-ink,#10324f);letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pg1 .scen-sub{font-size:10px;font-weight:700;color:var(--rp-mut,#7a8a98);margin-top:2px;font-variant-numeric:tabular-nums;}
#pg1 .scen-acts{display:flex;gap:7px;flex:0 0 auto;}

/* ── buttons: a compact variant of .btn-secondary, with the layered look ──
   border-radius IS restated (what would otherwise arrive from the shell's
   .btn-secondary is a 12px command-center rect at 2px border); box-shadow is
   restated to REPRODUCE the shell's offset rather than to remove it. See the
   kit-version note at the top of this block. */
#pg1 .scen-btn,#pg2 .scen-btn{
  padding:7px 13px;font-size:11px;font-weight:800;border-radius:8px;
  letter-spacing:.2px;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--iv-line,#dfe4e9);color:var(--rp-ink2,#41607a);
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);
  transition:background .15s,border-color .15s,color .15s,box-shadow .16s,transform .14s;
}
#pg1 .scen-btn:hover,#pg2 .scen-btn:hover{background:#fff;border-color:var(--rp-grad1,#1d5c84);color:var(--rp-ink,#10324f);}

/* THE PRESS-IN, scoped to the two places that carry the compact metrics: the
   panel rows on page 1, and the popover pair on either page. Deliberately NOT
   written as a bare `#pg2 .scen-btn:hover` — the results-bar TRIGGER is
   restyled to match #backBtn further down, and a broad press-in would fight
   that rule on a specificity tie. Scoping keeps the outcome independent of
   source order. */
#pg1 .scen-btn:hover,#pg2 .scen-pop .scen-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);}
#pg1 .scen-btn:active,#pg2 .scen-pop .scen-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
/* A disabled trigger must not look pressable — but must not look flat either. */
#pg1 .scen-btn:disabled,#pg2 .scen-btn:disabled{opacity:.5;cursor:not-allowed;}
#pg1 .scen-btn:disabled{transform:none;box-shadow:3px 3px 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-btn,#pg1 .scen-btn:hover,#pg1 .scen-btn:active,
  #pg2 .scen-pop .scen-btn:hover,#pg2 .scen-pop .scen-btn:active{transform:none;transition:none;}
}
/* Destructive actions take the one red — never a second warning hue. The offset
   shadow stays navy (inherited from the rule above). */
#pg1 .scen-btn.danger,#pg2 .scen-btn.danger{color:var(--rp-red,#c4503e);border-color:var(--rp-redline,#e6c4bd);}
#pg1 .scen-btn.danger:hover,#pg2 .scen-btn.danger:hover{background:var(--rp-redpale1,#fbeeea);border-color:var(--rp-red,#c4503e);color:var(--rp-red,#c4503e);}

/* The popover's own primary. Restates geometry so it does not inherit a slab
   inside a 290px popover, and carries the same offset shadow so the popover
   reads as one pair rather than one raised + one flat.

   ⚠ Specificity, both pages. On page 1 the kit's
   `#pg1 .submit-wrap > .btn-primary` (1,2,0) sits between this rule and the
   button — that selector was a plain descendant space until this merge, which
   made it match the popover's Save and repaint it as the full lime Generate
   button; the child combinator is what confines it to #generateBtn. On page 2
   the shell's `.pg2-actions .btn-primary` (0,2,0) loses to the (1,1,0) below,
   so no change was needed there. */
#pg1 .scen-btn-go,#pg2 .scen-btn-go{
  padding:7px 15px;font-size:11px;font-weight:800;border-radius:8px;
  border:1px solid var(--rp-navy,#103a5c);background:var(--rp-navy,#103a5c);color:#fff;
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);cursor:pointer;font-family:inherit;letter-spacing:.2px;
  transition:background .15s,border-color .15s,box-shadow .16s,transform .14s;
}
#pg1 .scen-btn-go:hover,#pg2 .scen-btn-go:hover{
  background:var(--rp-grad1,#1d5c84);border-color:var(--rp-grad1,#1d5c84);
  transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);
}
#pg1 .scen-btn-go:active,#pg2 .scen-btn-go:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-btn-go,#pg1 .scen-btn-go:hover,#pg1 .scen-btn-go:active,
  #pg2 .scen-btn-go,#pg2 .scen-btn-go:hover,#pg2 .scen-btn-go:active{transform:none;transition:none;}
}

/* ── results bar: the TRIGGER matches "Edit Inputs" ──
   Unlike the tools whose hfg-report-v2.css rebuilds .pg2-actions as a uniform
   40px band, this tool's results bar still comes from the shell's
   command-center layer: #backBtn is a .btn-secondary at 9px/18px, 13px label,
   12px radius, 2px --cc-ink border and a 3px offset shadow. The Save-scenario
   trigger is the same rank, so it reproduces exactly that computed result
   rather than the compact #pg1 metrics above. (Reproducing it here is
   deliberate — importing a newer shell would also repaint the report and the
   cards, per §1c-ii.)

   ⚠ THE FULL CHILD PATH IS LOAD-BEARING, not tidiness. `.scen-save-wrap` holds
   BOTH the trigger and the popover, and every button in that popover is also a
   `.scen-btn`. Written as the obvious `#pg2 .pg2-actions .scen-btn` this rule
   is (1,2,0), so it would match the popover's Cancel as well and beat the
   compact `#pg1 .scen-btn,#pg2 .scen-btn` at (1,1,0) — giving a full-size
   Cancel next to a compact Save inside a 290px popover. Spelling out
   `> .scen-save-wrap >` confines it to the trigger, and the popover's pair
   falls back to the compact rules where it belongs. (1,3,0) also beats (1,1,0)
   OUTRIGHT rather than tying — a tie resolved by source order is the trap. */
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn{
  padding:9px 18px;font-size:13px;border-radius:12px;letter-spacing:.2px;
  background:transparent;border:2px solid var(--cc-ink,#13283a);color:var(--cc-ink,#13283a);
  box-shadow:3px 3px 0 var(--cc-ink,#13283a);
}
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn:hover{
  background:var(--hfg-blue,#0f4369);color:#fff;border-color:var(--cc-ink,#13283a);
  transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cc-ink,#13283a);
}
#pg2 .pg2-actions > .scen-save-wrap > .scen-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cc-ink,#13283a);}
@media (prefers-reduced-motion:reduce){
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn,
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn:hover,
  #pg2 .pg2-actions > .scen-save-wrap > .scen-btn:active{transform:none;transition:none;}
}
#pg2 .pg2-actions .scen-save-wrap{flex:0 0 auto;}
/* A narrow viewport otherwise crushes the three controls onto stacked lines. */
#pg2 .pg2-actions{flex-wrap:wrap;}

/* ── footer: clear-all + its two-step inline confirm ── */
#pg1 .scen-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--iv-line2,#eceff2);}
#pg1 .scen-foot[hidden]{display:none;}
#pg1 .scen-confirm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;font-weight:800;color:var(--rp-red,#c4503e);}
#pg1 .scen-confirm[hidden]{display:none;}
#pg1 .scen-confirm .ct{flex:1 1 100%;line-height:1.4;}

/* ── status line, shared by the panel and both save popovers ──
   Transient: scenarios.js makeNote() clears it after ~5s, and a pg1 ⇄ pg2
   switch clears it immediately (showPage() calls Scenarios.dismissNotes()), so
   a confirmation can never sit on a view it does not belong to. Warnings are
   sticky and exempt. Removal is instant, because `hidden` is binary and cannot
   be transitioned out. */
@keyframes scenNoteIn{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:translateY(0);}
}
#pg1 .scen-msg,#pg1 .scen-save-msg,#pg2 .scen-save-msg{
  margin-top:11px;padding:8px 12px;border-radius:8px;
  background:var(--rp-limebg,#f2f6df);border:1px solid var(--rp-limeline,#d6e29a);
  font-size:11px;font-weight:700;line-height:1.5;color:var(--rp-lime-ink,#5f7414);
  animation:scenNoteIn .18s cubic-bezier(.2,.7,.2,1);
}
/* flex:0 0 100% only means "own row" inside a parent that WRAPS. Both of these
   sit in a wrapping parent on purpose — #scenSaveMsg in .submit-wrap and
   #scenSaveMsg2 in .pg2-bar, never inside the button rows. Put either in
   .pg2-actions and it becomes an unshrinkable full-width item that collapses
   the buttons onto two and three lines for as long as the message shows. */
#pg1 .scen-save-msg,#pg2 .scen-save-msg{flex:0 0 100%;}
@media (prefers-reduced-motion:reduce){
  #pg1 .scen-msg,#pg1 .scen-save-msg,#pg2 .scen-save-msg{animation:none;}
}
#pg1 .scen-msg.warn,#pg1 .scen-save-msg.warn,#pg2 .scen-save-msg.warn{
  background:var(--rp-redpale1,#fbeeea);border-color:var(--rp-redline,#e6c4bd);color:var(--rp-redink,#9a5448);
}
#pg1 .scen-msg[hidden],#pg1 .scen-save-msg[hidden],#pg2 .scen-save-msg[hidden]{display:none;}

/* ── the naming popover ──
   Anchored absolutely to its trigger, NOT position:fixed: framed in the portal
   there is no local viewport, so a fixed overlay centres against the entire
   document height and can land off-screen. Default opens upward (the submit bar
   is at the page bottom); .scen-pop--below flips it for the results-page bar. */
#pg1 .scen-save-wrap,#pg2 .scen-save-wrap{position:relative;display:flex;flex:0 0 auto;}
#pg1 .scen-pop,#pg2 .scen-pop{
  position:absolute;bottom:calc(100% + 9px);right:0;z-index:60;width:290px;
  display:flex;flex-direction:column;gap:7px;padding:15px 16px 14px;
  background:#fff;border:1px solid var(--iv-line,#dfe4e9);border-radius:12px;
  box-shadow:0 10px 28px rgba(16,50,79,.16);text-align:left;
}
#pg1 .scen-pop--below,#pg2 .scen-pop--below{bottom:auto;top:calc(100% + 9px);}
#pg1 .scen-pop[hidden],#pg2 .scen-pop[hidden]{display:none;}
#pg1 .scen-pop .scen-pl,#pg2 .scen-pop .scen-pl{
  font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--rp-mut,#7a8a98);
}
/* The page-1 popover's input is inside #pg1, so #pg1 input{…} from
   hfg-input-v2.css at (1,0,1) applies. These restate what differs at (1,2,1)
   so they win. */
#pg1 .scen-pop input,#pg2 .scen-pop input{
  width:100%;box-sizing:border-box;height:36px;padding:0 11px;
  border:1px solid var(--iv-line,#dfe4e9);border-radius:9px;background:var(--iv-fill,#fbfaf7);
  font-family:inherit;font-size:13px;font-weight:700;color:var(--rp-ink,#10324f);
}
#pg1 .scen-pop input:focus,#pg2 .scen-pop input:focus{
  outline:none;border-color:var(--rp-grad1,#1d5c84);box-shadow:0 0 0 3px rgba(29,92,132,.14);
}
#pg1 .scen-pop-acts,#pg2 .scen-pop-acts{display:flex;justify-content:flex-end;gap:7px;margin-top:4px;}

/* ── PRINT: the panel and both save controls are screen-only chrome ── */
@media print{
  #pg1 .scen-panel,#pg1 .scen-save-wrap,#pg2 .scen-save-wrap,
  #pg1 .scen-save-msg,#pg2 .scen-save-msg{display:none!important;}
}

/* ── mobile saved scenarios (#mv dark shell) ──
   The drawer reuses the shell's own .card / .ch.tog / .chev section-header
   pattern, so only the rows and the inline save form need styling here. */
#mv .scen-hint{font-size:11.5px;color:var(--mut);font-weight:600;line-height:1.4;margin-bottom:11px;}
#mv .scen-empty{
  padding:14px 12px;border:1px dashed var(--line);border-radius:12px;
  font-size:12px;font-weight:600;color:var(--mut);text-align:center;
}
#mv .scen-empty b{color:var(--ink2);}
#mv .scen-row{
  display:flex;align-items:center;gap:11px;padding:11px 13px;margin-bottom:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:13px;
}
#mv .scen-meta{flex:1;min-width:0;}
#mv .scen-nm{font-size:13px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mv .scen-sub{font-size:10.5px;font-weight:600;color:var(--mut);margin-top:2px;font-variant-numeric:tabular-nums;}
#mv .scen-acts{display:flex;gap:6px;flex:0 0 auto;}
/* 44px minimum hit target — the mobile floor for anything interactive. */
#mv .scen-acts button{
  min-height:44px;padding:0 12px;border-radius:10px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink2);
  font-family:inherit;font-size:11.5px;font-weight:800;
}
#mv .scen-acts button.danger{color:var(--red);border-color:var(--red);}
#mv .scen-msg{
  margin-top:10px;padding:9px 12px;border-radius:11px;
  background:rgba(188,214,74,.10);border:1px solid rgba(188,214,74,.35);
  font-size:12px;font-weight:700;line-height:1.45;color:var(--lime);
  animation:scenNoteIn .18s ease-out;   /* transient, same as desktop */
}
@media (prefers-reduced-motion:reduce){ #mv .scen-msg{animation:none;} }
#mv .scen-msg.warn{background:rgba(196,80,62,.12);border-color:var(--red);color:var(--red);}
#mv .scen-msg[hidden]{display:none;}
#mv .scen-inline{display:flex;flex-direction:column;gap:9px;margin-top:10px;}
#mv .scen-inline[hidden]{display:none;}
#mv .scen-inline-acts{display:flex;gap:9px;}
#mv .scen-inline-acts .mbtn{flex:1;}
#mv .scen-confirm{display:flex;flex-direction:column;gap:9px;margin-top:10px;}
#mv .scen-confirm[hidden]{display:none;}
#mv .scen-confirm .ct{font-size:12.5px;font-weight:800;color:var(--red);line-height:1.4;}
/* The destructive drawer buttons ship class="mbtn ghost danger", and the shell
   defines .mbtn and .mbtn.ghost but NOT a danger variant — so without this they
   render as neutral ghost buttons and "Clear all saved scenarios" looks like any
   other action. Same gap in the reference tool's shell, so this belongs upstream
   in the kit rather than only here. Destructive actions take the one red. */
#mv .mbtn.ghost.danger{color:var(--red);border-color:var(--red);}
#mv .mbtn.ghost.danger:active{transform:translateY(1px);}