/* Task 651 - MaxWealth merge phase 2. The live calculator widget (/js/mwcalc.js), moved out of the
   <style> element the MaxWealth original injected: the CSP here is style-src 'self', so it has to be a
   file. Rules are the original's, with the ink pinned on the white output card so it stays readable
   in dark mode. Plus the tool pages' executive summary (.tool-*). */
.mwl{display:grid;gap:18px 28px;color:var(--ink,#2A1A10);min-width:0}
.mwl h3{grid-column:1/-1;margin:0;font-weight:400;font-size:1.45rem;line-height:1.2}
@media(min-width:820px){.mwl{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.mwl-sliders{display:grid;gap:2px;min-width:0;align-content:start}
.mwl-s{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 10px;margin:0}
.mwl-l{font-size:14px;font-weight:600}
.mwl-s output{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.mwl-s input{grid-column:1/-1;width:100%;margin:0;height:40px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.mwl-s input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#D9BFA0;box-shadow:inset 0 0 0 1px #8C6A50}
.mwl-s input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#A3461E;border:3px solid #fff;box-shadow:0 0 0 1.5px #2A1A10}
.mwl-s input::-moz-range-track{height:8px;border-radius:4px;background:#D9BFA0;box-shadow:inset 0 0 0 1px #8C6A50}
.mwl-s input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#A3461E;border:3px solid #fff;box-shadow:0 0 0 1.5px #2A1A10}
.mwl-s input:focus-visible{outline:2px solid #1F2A5C;outline-offset:2px;border-radius:6px}
.mwl-out{min-width:0;background:#fff;color:#2A1A10;border:2px solid #2A1A10;border-radius:16px;padding:14px}
.mwl-say{margin:0 0 10px;font-size:15px;line-height:1.5}
.mwl-say b.g{color:#1E7A46}
.mwl-say b.r{color:#B3261E}
.mwl-chart{width:100%;overflow:hidden}
.mwl-chart svg{display:block;width:100%;height:auto}
.mwl-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#5B4334;margin-top:8px}
.mwl-key span{display:flex;align-items:center;gap:6px}
.mwl-key i{width:14px;height:14px;border-radius:3px;background:#1E7A46}
.mwl-key i.r{background:#B3261E}
.mwl-key i.d{height:0;border-radius:0;background:none;border-top:2px dashed #1F2A5C;width:20px}
/* Task 725: car finance - cash, bank finance, balloon, lease (dashed) */
.mwl-key i.k1{background:#1E7A46}.mwl-key i.k2{background:#1F2A5C}.mwl-key i.k3{background:#C98A16}
.mwl-key i.k4{height:0;border-radius:0;background:none;border-top:3px dashed #A3461E;width:22px}.mwl-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink-2,#5B4334)}
.mwl-chk{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font-size:14px;font-weight:600;cursor:pointer;min-height:40px}
.mwl-chk input{flex:none;width:22px;height:22px;margin:0;accent-color:#A3461E;cursor:pointer}
.mwl-pg{display:grid;gap:2px;min-width:0;padding-left:12px;border-left:3px solid #D9BFA0}
.mwl-pg[hidden]{display:none}

/* The executive summary a tool page opens on (MaxWealth _ToolSummary). */
.tool-exec{margin:0 0 24px}
.tool-demo{padding:10px 14px;border-radius:10px;border:1px dashed var(--ink-2,#475467);margin:0 0 14px}
.tool-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 14px}
.tool-verdict{font-size:1.5rem;font-weight:700}
.tool-headline{margin:0;font-size:1.05rem}
/* Task 703 - the verdict banner: gauge left, verdict + headline right, full width; stacks on a phone. */
.tool-banner{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:12px 26px;align-items:center}
.tool-banner.no-gauge{grid-template-columns:1fr}
.tool-banner .tool-verdict{margin:0}
.tool-gauge{display:block;width:100%;max-width:280px;height:auto}
@media (max-width:760px){.tool-banner{grid-template-columns:1fr;text-align:center}.tool-gauge{margin:0 auto;max-width:240px}}
.tool-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.tool-tile{border:1px solid var(--ink-2,#475467);border-radius:10px;padding:10px 12px}
.tool-tile-label{font-size:13px;font-weight:600}
.tool-tile-value{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.tool-tile-meaning{font-size:12px;color:var(--ink-2,#475467)}
.tool-live{margin:0 0 24px}
/* Slice 2 - budget/retirement: the score out of 100, the lines form and the category bars. */
.tool-score{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.tool-score-of{font-size:1rem;font-weight:400;color:var(--ink-2,#475467)}
.tool-links{margin:0 0 16px}
.tool-line-form{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;margin:0 0 16px}
.tool-line-form label{display:grid;gap:4px;font-size:14px;font-weight:600}
.tool-table{width:100%;margin:0 0 16px}
.tool-table .num{text-align:right;font-variant-numeric:tabular-nums}
.tool-table form{margin:0}
.tool-barcell{width:35%}
.tool-empty{margin:0 0 16px}
/* Slice 3 - the tool cards on the Overview board (MaxWealth _SummaryCard). */
.tool-board{margin:24px 0}
.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tool-card{display:grid;gap:10px;align-content:start;padding:14px 16px;border:1px solid var(--ink-2,#475467);border-radius:12px;color:inherit;text-decoration:none}
.tool-card:hover,.tool-card:focus-visible{border-color:currentColor}
.tool-card.is-demo{border-style:dashed}
.tool-card.is-soon{border-style:dotted;color:var(--ink-2,#475467)}
.tool-card .tool-head{margin:0}
/* Task 705 - a weak score shouts on its Overview card: red under 40, amber under 70 (_SummaryCard, ToolBoard.SeverityOf). */
.tool-card-banner{align-items:center;padding:10px 12px;border:2px solid;border-radius:10px}
.tool-card-banner.is-critical{background:#FEE4E2;border-color:#B42318;color:#7A271A}
.tool-card-banner.is-warn{background:#FEF0C7;border-color:#B54708;color:#7A2E0E}
/* Task 708 - every card has a banner: calm green when healthy, neutral grey with no score. */
.tool-card-banner.is-ok{background:#ECFDF3;border-color:#A6F4C5;color:#05603A}
.tool-card-banner.is-none{background:#F9FAFB;border-color:#EAECF0;color:var(--ink-2,#475467)}
.tool-card-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;align-items:baseline}
.tool-card-title{font-weight:700;font-size:1.1rem}
.tool-card-ribbon{font-size:12px;color:var(--ink-2,#475467)}
.tool-card-headline{display:block}
.tool-card-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tool-card-tile{display:grid;font-size:12px;color:var(--ink-2,#475467)}
.tool-card-tile strong{font-size:14px;color:var(--ink,inherit);font-variant-numeric:tabular-nums}
/* Task 680 - the tool's own graph in its card (mwcalc.js / slidechart.js mini). Full card width, scaled not
   squeezed: on a phone the cards stack one per row (above), so the graph keeps the whole screen width. */
.tool-card-chart{display:block;width:100%;min-width:0;overflow:hidden}
.tool-card-chart svg{display:block;width:100%;max-width:100%;height:auto;pointer-events:none}

/* Task 665 - phone safety on the tool pages: no grid track or input may be wider than the screen. */
@media (max-width: 48rem) {
    .tool-table input, .tool-table select { max-width: 100%; min-width: 0; box-sizing: border-box; }
    .tool-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
    .tool-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
/* ---- Task 674 round 3 (Johan, chat 929-932) - the dock (mw-split.js). Desktop: the panel is fixed to the
   right edge, full height, scrolling on its own; html.mw-docked pads the page by its width so the graph
   sits to its left, and widens when the panel is closed to its tab. Phone: a drawer from the right. ---- */
:root{--mw-panel-w:clamp(320px,28vw,440px)}
.mwl.mw-dock{grid-template-columns:minmax(0,1fr)}
.mw-dock .mw-panel{position:fixed;top:var(--mw-panel-top,0);right:0;bottom:0;z-index:40;width:var(--mw-panel-w);display:flex;flex-direction:column;background:#fff;color:#2A1A10;border-left:2px solid #2A1A10}
.mw-panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #E6D6C2}
.mw-panel-title{margin:0;font-size:1.15rem;font-weight:700;line-height:1.2}
.mw-panel-close{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid #2A1A10;background:#fff;color:#2A1A10;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.mw-panel-close:focus-visible,.mw-panel-tab:focus-visible,.mw-adjust:focus-visible{outline:3px solid #1F2A5C;outline-offset:2px}
.mw-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 28px}
.mw-panel-help{margin-top:16px;padding-top:12px;border-top:1px dashed #D9BFA0;font-size:14px}
.mw-panel-help[hidden]{display:none}
.mw-adjust,.mw-panel-tab,.mw-backdrop,.mw-dock .mw-split-handle{display:none}
.mw-adjust,.mw-panel-tab{align-items:center;gap:8px;font:inherit;font-weight:700;cursor:pointer;color:#fff;background:#A3461E;border:2px solid #2A1A10}
.mw-adjust{justify-self:start;min-height:44px;padding:8px 18px;border-radius:999px}
.mw-adjust::before,.mw-panel-tab::before{content:"";width:16px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.tool-tile-real{font-size:12px;font-weight:600;color:#5B4334;font-variant-numeric:tabular-nums}
.tool-tile.is-whatif .tool-tile-label::after{content:"what-if";margin-left:6px;padding:1px 7px;border-radius:999px;background:#F3E3C8;color:#7A3412;font-size:10px;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
@media (min-width:900px){
  html.mw-docked .bc-main{padding-right:calc(var(--mw-panel-w) + 28px)}
  .mw-dock .mw-split-handle{display:block;position:fixed;top:var(--mw-panel-top,0);bottom:0;right:var(--mw-panel-w);width:18px;margin-right:-9px;z-index:41;cursor:col-resize;touch-action:none;background:linear-gradient(#D9BFA0,#D9BFA0) center/4px 100% no-repeat}
  .mw-dock .mw-split-handle::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:44px;margin:-22px 0 0 -7px;border-radius:999px;background:#2A1A10}
  .mw-dock .mw-split-handle:hover,.mw-dock .mw-split-handle.is-dragging{background-image:linear-gradient(#A3461E,#A3461E)}
  .mw-dock .mw-split-handle:focus-visible{outline:3px solid #1F2A5C;outline-offset:-3px}
  .mw-split-dragging,.mw-split-dragging *{cursor:col-resize!important;user-select:none}
  .mw-dock.is-closed .mw-panel,.mw-dock.is-closed .mw-split-handle{display:none}
  .mw-dock.is-closed .mw-panel-tab{display:flex;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;writing-mode:vertical-rl;padding:18px 9px;border-right:0;border-radius:12px 0 0 12px}
}
@media (max-width:899.98px){
  .mw-adjust{display:inline-flex;margin-bottom:4px}
  .mw-dock .mw-panel{width:min(88vw,400px);z-index:60;transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
  .mw-dock.is-drawer .mw-panel{transform:none;visibility:visible;transition:transform .25s ease}
  .mw-dock.is-drawer .mw-backdrop{display:block;position:fixed;inset:0;z-index:59;background:rgba(42,26,16,.4)}
  html.mw-drawer-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.mw-dock .mw-panel{transition:none!important}}
/* Round 4 (chat 936) - the shared slider + chart component (_SlideChart) in the same dock: one slider per row. */
.slidechart.mw-dock .mw-panel .slidechart-controls{grid-template-columns:minmax(0,1fr);gap:14px;margin:0}
.slidechart.mw-dock .mw-adjust{margin:4px 0 12px}
.slidechart.mw-dock .slidechart-label{font-size:14px;font-weight:600}
.slidechart.mw-dock .slidechart-label output{font-size:15px}
/* The same thumb and track as /retirement's sliders, so every panel reads as one control set. */
.slidechart.mw-dock .slidechart-slider input[type=range]{width:100%;margin:0;height:40px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.slidechart.mw-dock .slidechart-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#D9BFA0;box-shadow:inset 0 0 0 1px #8C6A50}
.slidechart.mw-dock .slidechart-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#A3461E;border:3px solid #fff;box-shadow:0 0 0 1.5px #2A1A10}
.slidechart.mw-dock .slidechart-slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#D9BFA0;box-shadow:inset 0 0 0 1px #8C6A50}
.slidechart.mw-dock .slidechart-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#A3461E;border:3px solid #fff;box-shadow:0 0 0 1.5px #2A1A10}
.slidechart.mw-dock .slidechart-slider input[type=range]:focus-visible{outline:2px solid #1F2A5C;outline-offset:2px;border-radius:6px}
/* data-needs target hidden (/overview with no statement): the panel's content is the page, inline. */
.mw-dock.is-inline .mw-panel{position:static;display:block;width:auto;transform:none;visibility:visible;border:0;background:none;box-shadow:none;z-index:auto}
.mw-dock.is-inline .mw-panel-head,.mw-dock.is-inline .mw-panel-body{padding:0;border:0;overflow:visible}
.mw-dock.is-inline .mw-panel-close,.mw-dock.is-inline .mw-split-handle,.mw-dock.is-inline .mw-panel-tab,.mw-dock.is-inline .mw-adjust,.mw-dock.is-inline .mw-backdrop{display:none!important}

/* Task 681 - the What-if on /tax (mwcalc.js whatifInit). Stacks on a phone. */
.mwi-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.mwi-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mwi-l{font-size:13px;font-weight:600;color:var(--ink-2,#5B4334)}
.mwi-row select,.mwi-row input{min-height:40px;font:inherit;padding:6px 10px;border:1px solid var(--line,#D9CBBE);border-radius:8px;max-width:100%}
.mwi-row input{width:10em}
.mwi-add,.mwi-del{min-height:40px;font:inherit;padding:6px 14px;border-radius:8px;border:1px solid #A3461E;background:#fff;color:#A3461E;cursor:pointer}
.mwi-say{font-size:15px;line-height:1.5}
.mwi-say b.g{color:#1E7A46}
.mwi-say b.r{color:#B3261E}
.mwi-table{width:100%;border-collapse:collapse;font-size:14px}
.mwi-table th,.mwi-table td{padding:6px 8px;border-bottom:1px solid var(--line,#E7DCD2);text-align:right}
.mwi-table th:first-child,.mwi-table td:first-child{text-align:left}
@media (max-width:560px){.mwi-row input,.mwi-row select{width:100%}.mwi-table{font-size:13px}}

/* Task 684 (Johan, msg 964 #4) - the hover read-out on every tool graph (mwcalc.js MWTip, also slidechart.js). */
.mw-tip-mark { stroke: #5B4334; stroke-width: 1; stroke-dasharray: 3 3; }
.mw-tip-box { fill: #FFFDF9; stroke: #E6CFB2; stroke-width: 1; }
.mw-tip text { font-family: 'Work Sans', system-ui, sans-serif; font-size: 12px; fill: #2A1A10; font-variant-numeric: tabular-nums; }
.mw-tip .mw-tip-title { font-weight: 700; }

/* Task 699: Real only (the task 685 Real | What-if switch is gone) - the controls locked to their source. */
.mw-dock.is-real input:disabled{opacity:.45;cursor:not-allowed}
.mwl-key i.gh{height:0;border-radius:0;background:none;border-top:2.5px dashed #5B4334;width:22px}
.mwl-key em{font-style:normal}
.mwl-none,.slidechart-none{margin:24px 0;color:#5B4334;font-size:14px}

/* Task 686: the refresh button next to a slider with a source - pulls the user's own figure back in. */
.mw-src{margin-left:6px;padding:0 6px;font-size:13px;line-height:18px;border:1px solid #c9ccd6;border-radius:9px;background:#fff;color:#3b3f8f;cursor:pointer;vertical-align:middle}
.mw-src:hover,.mw-src:focus-visible{background:#eef0ff;border-color:#3b3f8f}
.slidechart-label .mw-src{margin-left:auto}
/* Task 709 - "how was this calculated" pop-up (mwcalc.js showWhy) */
.mw-why-dlg{width:min(760px,94vw);max-height:86vh;padding:0;border:1px solid #c9ccd6;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.mw-why-dlg::backdrop{background:rgba(20,22,40,.45)}
.mw-why-head{display:flex;align-items:flex-start;gap:12px;padding:14px 18px 6px}
.mw-why-head h2{margin:0;font-size:17px;flex:1}
.mw-why-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;padding:0 18px 10px;font-size:13px}
.mw-why-meta dt{font-weight:700}
.mw-why-meta dd{margin:0}
.mw-why-scroll{max-height:60vh;overflow:auto;padding:0 18px 16px}
.mw-why-scroll table{width:100%}
.mw-why-scroll td small{display:block;color:#666;font-size:11px}
.mw-why-scroll .num{text-align:right;white-space:nowrap}
/* Task 710: the summary tiles' ? and the inputs / steps parts of the pop-up. */
.mw-why-tile{float:right;margin-top:-1.6em}
.mw-why-tile[hidden]{display:none}
.mw-why-scroll table + table{margin-top:14px}
.mw-why-inputs caption,.mw-why-sub{text-align:left;font-weight:700;font-size:14px;margin:6px 0}
.mw-why-steps{margin:0 0 4px;padding-left:22px;font-size:13px;font-variant-numeric:tabular-nums}
.mw-why-steps li{margin:2px 0}
/* Task 711: section headings in the slider panel (Retirement: Today, Retirement). */
.mwl-sec{grid-column:1/-1;margin:14px 0 2px;padding-bottom:4px;border-bottom:1.5px solid #D9BFA0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5B4334}
.mwl-sec:first-child{margin-top:0}

/* Task 720: solar presets - Household presets button + pop-up of home sizes, Low / Moderate / High price-increase buttons. */
.mwl-presets{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px}
.mwl-pbtn{min-height:40px;padding:6px 16px;border-radius:999px;border:2px solid #2A1A10;background:#fff;color:#2A1A10;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mwl-pbtn:hover{background:#F6EDE2}
.mwl-pnow{font-size:13px;color:#5B4334}
.mwl-quick{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px}
.mwl-qbtn{flex:1 1 0;min-height:36px;padding:4px 8px;border-radius:8px;border:1.5px solid #8C6A50;background:#fff;color:#2A1A10;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.mwl-qbtn b{font-variant-numeric:tabular-nums}
.mwl-qbtn[aria-pressed="true"]{background:#A3461E;border-color:#A3461E;color:#fff}
.mwl-pbtn:focus-visible,.mwl-qbtn:focus-visible,.mw-preset-card:focus-visible{outline:3px solid #1F2A5C;outline-offset:2px}
.mw-presets-dlg{width:min(900px,94vw)}
.mw-preset-lede{margin:0 0 12px;font-size:14px}
.mw-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.mw-preset-card{display:grid;justify-items:start;align-content:start;gap:4px;padding:12px;border:1.5px solid #8C6A50;border-radius:12px;background:#fff;color:#2A1A10;font:inherit;text-align:left;cursor:pointer}
.mw-preset-card:hover{border-color:#A3461E;background:#FBF5EE}
.mw-house{width:80px;height:56px;color:#2A1A10}
.mw-preset-name{font-weight:700;font-size:16px}
.mw-preset-who,.mw-preset-sys{font-size:12px;color:#5B4334}
.mw-preset-vals{display:grid;gap:1px;margin-top:6px;font-size:13px}
.mw-preset-vals b{font-variant-numeric:tabular-nums}
.mw-preset-sys{margin-top:4px}
.mw-preset-note{margin:12px 0 0;font-size:12px;color:#5B4334}
/* Task 721: geyser - a slider shown only for its type (tool.only sets hidden), and the type is picked with the Heat pump / Solar geyser buttons, not dragged. */
.mwl-s[hidden]{display:none}
#mwl-geyser-type{display:none}
/* Task 722: the car type is picked with the Electric (EV) / Hybrid buttons, not dragged. */
#mwl-ev-type{display:none}
/* Task 723: the water source is picked with the Rainwater tank / Borehole buttons, not dragged. */
#mwl-water-type{display:none}
/* Task 729: car finance - headline figures, two charts, year-by-year table */
.mwl-ch{margin:16px 0 4px;font-size:15px;font-weight:600}
.mwl-carheads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 0}
.mwl-carhead{margin:0;padding:8px 10px;border:1px solid #D9C7B2;border-radius:10px;display:grid;gap:2px;min-width:0}
.mwl-carhead span{display:flex;align-items:center;font-size:13px}
.mwl-carhead b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.mwl-carhead small{font-size:12px;color:var(--ink-2,#5B4334)}
.mwl-carhead.is-best{border:2px solid #1E7A46}
.mwl-carhead i,.mwl-carpick i{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px;margin-right:6px}
.mwl-carhead i.k1,.mwl-carpick i.k1{background:#1E7A46}.mwl-carhead i.k2,.mwl-carpick i.k2{background:#1F2A5C}
.mwl-carhead i.k3,.mwl-carpick i.k3{background:#C98A16}.mwl-carhead i.k4,.mwl-carpick i.k4{background:#A3461E}
.mwl-key i.k0{background:#2A1A10}.mwl-key i.ub{background:#F7DAD6;border:1px solid #B3261E}
.mwl-carpick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.mwl-carpick button{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid #D9C7B2;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.mwl-carpick button[aria-pressed="true"]{border:2px solid currentColor;font-weight:600}
.mwl-carscroll{overflow-x:auto}
.mwl-cartable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.mwl-cartable caption{text-align:left;font-size:13px;color:var(--ink-2,#5B4334);padding:0 0 6px}
.mwl-cartable th,.mwl-cartable td{padding:5px 8px;text-align:right;border-bottom:1px solid #E6D6C2;white-space:nowrap}
.mwl-cartable th[scope="row"],.mwl-cartable thead th:first-child{text-align:left}
.mwl-cartable tr.is-sell{background:rgba(201,138,22,.16)}
.mwl-cartable td.r{color:#B3261E}
.mwl-carnote{margin:6px 0 0;font-size:12px;color:var(--ink-2,#5B4334)}
@media (max-width:640px){.mwl-carheads{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Task 735 (Johan, msg 1141): never two sliders side by side - every slider container is one column. */
.mwl-sliders,.mwl-pg,.slidechart-controls,.slidechart.mw-dock .mw-panel .slidechart-controls{grid-template-columns:minmax(0,1fr)}

/* Task 731: rent or buy - headline figures, two charts, table; .mw-n keeps a number on one line. */
.mw-n{white-space:nowrap}
.mwl-rbh{margin:16px 0 4px;font-size:15px;font-weight:600}
.mwl-rbheads{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 0}
.mwl-rbhead{margin:0;padding:8px 10px;border:1px solid #D9C7B2;border-radius:10px;display:grid;gap:2px;min-width:0}
.mwl-rbhead span{display:flex;align-items:center;font-size:13px}
.mwl-rbhead b{font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mwl-rbhead small{font-size:12px;color:var(--ink-2,#5B4334)}
.mwl-rbhead.is-best{border:2px solid #1E7A46}
.mwl-rb i.mwl-sw{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px;margin-right:6px}
.mwl-rb .mwl-key i.mwl-sw{width:14px;height:14px;margin-right:0}
.mwl-rb i.rb-buy,.mwl-rb i.rb-growth{background:#1E7A46}
.mwl-rb i.rb-rentl{height:0;border-radius:0;background:none;border-top:3px dashed #1F2A5C;width:20px}
.mwl-rb i.rb-up{background:#A3461E}.mwl-rb i.rb-intr{background:#B3261E}.mwl-rb i.rb-rl{background:#8C6A50}
.mwl-rb i.rb-mt{background:#5B8BD0}.mwl-rb i.rb-rent{background:#1F2A5C}.mwl-rb i.rb-lost{background:#C98A16}
.mwl-rbscroll{overflow-x:auto}
.mwl-rbtable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.mwl-rbtable caption{text-align:left;font-size:13px;color:var(--ink-2,#5B4334);padding:0 0 6px}
.mwl-rbtable th,.mwl-rbtable td{padding:5px 8px;text-align:right;border-bottom:1px solid #E6D6C2;white-space:nowrap}
.mwl-rbtable th[scope="row"],.mwl-rbtable thead th:first-child{text-align:left}
.mwl-rbtable tr.is-be{background:rgba(30,122,70,.12)}
.mwl-rbtable td.r{color:#B3261E}
.mwl-rbnote{margin:6px 0 0;font-size:12px;color:var(--ink-2,#5B4334)}
.mwl-say b.mw-n.g{color:#1E7A46}.mwl-say b.mw-n.r{color:#B3261E}

/* Task 729d: the Cost to Own legend swatches - classes, not style=, which the app's CSP (style-src 'self') blocks. Same colours as CAR_PARTS. */
.mwl-key i.cp-depr{background:#8C6A50}.mwl-key i.cp-intr{background:#B3261E}.mwl-key i.cp-lease{background:#1F2A5C}.mwl-key i.cp-lost{background:#C98A16}