/* ETF Scan: stijl voor de extra onderdelen (plus.js). Zelfde huisstijl: kobalt, crème, zon, roze, inkt. */
.mj-out{display:grid;gap:16px;margin-top:16px}
.mj-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.mj-rows{display:grid;gap:8px}
.mj-row{display:grid;grid-template-columns:minmax(0,1fr) 128px 44px;gap:8px;align-items:center}
.mj-row select{min-width:0;width:100%}
.mj-amt{display:flex;align-items:center;gap:6px;border:3px solid var(--inkt);border-radius:12px;background:var(--wit);padding:0 10px;min-height:48px}
.mj-amt span{font-weight:800}
.mj-amt input{border:0;padding:6px 0;min-height:42px;width:100%;text-align:right;font-size:16px;background:transparent;box-shadow:none}
.mj-amt:focus-within{outline:3px solid var(--kobalt);outline-offset:2px}
.mj-x{width:44px;height:44px;border-radius:50%;border:3px solid var(--inkt);background:var(--wit);font-size:20px;font-weight:800;cursor:pointer}
.mj-x:disabled{opacity:.35;cursor:default}
.mj-kar{margin-top:4px}
.mj-kar .small{display:block}
.mj-pairs{display:grid;gap:8px}
.mj-pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:15px}
.mj-pair .track,.mj-trow .track{display:block;height:14px;border:2px solid var(--inkt);border-radius:999px;background:var(--creme);overflow:hidden}
.mj-pair .fill,.mj-trow .fill{display:block;height:100%;background:var(--kobalt)}
.mj-trow .fill.dbl{background:var(--roze)}
.mj-pv{text-align:right;font-family:var(--display)}
.mj-top{display:grid;gap:8px}
.mj-trow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 78px;gap:10px;align-items:center}
.mj-tn{display:grid;min-width:0}
.mj-tn b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-tn small,.mj-tv small{font-size:12px;color:var(--grijs)}
.mj-tv{display:grid;text-align:right;font-variant-numeric:tabular-nums}
.mj-tv b{font-family:var(--display)}
.mj-key{display:inline-block;width:22px;height:10px;border:2px solid var(--inkt);border-radius:999px;vertical-align:middle;margin-right:4px}
.mj-key.dbl{background:var(--roze)}

/* Vriend */
.vs-banner{background:#FFF9E6;border-color:var(--inkt)}
.vs-banner .phead .small{display:block}
.vs-cmp{background:#F3F4FE}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.vs-col{display:grid;justify-items:center;gap:4px}
.vs-col b{font-family:var(--display);font-size:16px;line-height:1.15}
.vs-col small{font-size:12.5px;color:var(--grijs);font-weight:700}
.vs-col .psticker.b{background:var(--roze)}
.vs-x{font-family:var(--display);font-weight:800;font-size:22px}
.vs-rows{display:grid;border-top:2px solid #E9DCC4}
.vs-row{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:8px;padding:9px 0;border-bottom:2px solid #E9DCC4;text-align:center}
.vs-l{font-size:13px;font-weight:700;color:var(--grijs)}
.vs-v{font-family:var(--display);font-weight:800;font-size:16px;display:grid}
.vs-v small{font-family:var(--body,inherit);font-size:11.5px;font-weight:700;color:#1E7A3A}
.vs-v.win{color:var(--inkt)}
.vs-v.win::before{content:"";justify-self:center;width:10px;height:10px;border-radius:50%;background:var(--zon);border:2px solid var(--inkt);margin-bottom:2px}

/* Vlakverdeling */
.tree-mode{justify-self:start}
.tree-wrap{border:3px solid var(--inkt);border-radius:16px;overflow:hidden;background:var(--creme)}
.tree{display:block;width:100%;height:auto}
.tree .tcell{cursor:pointer;outline:none}
.tree .tcell rect{stroke:var(--inkt);stroke-width:1.5;transition:opacity .15s}
.tree .tcell:hover rect,.tree .tcell:focus rect{opacity:.85}
.tree .tcell.on rect{stroke:var(--zon);stroke-width:4}
.tree text{font-family:var(--display);font-weight:800;font-size:12px;pointer-events:none}
.tree text.tv{font-family:inherit;font-weight:700;font-size:11px}
.tree .tl{fill:#fff}.tree .td{fill:var(--inkt)}
.tree-info{margin:0;font-size:15px;min-height:1.4em}

/* Wat veranderde er */
.chg-g{display:grid;gap:6px}
.chg-g .label.up{color:#1E7A3A}.chg-g .label.down{color:#B4232B}
.chg-l{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid #E9DCC4}
.chg-l li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:2px solid #E9DCC4;font-size:15px}
.chg-l .cn{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-l .cv{flex:none;font-variant-numeric:tabular-nums;color:var(--grijs)}
.chg-l .cv b{color:var(--inkt)}

/* Pensioensparen */
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-grid select{width:100%}
.pe-adv{border:2px dashed #E9DCC4;border-radius:12px;padding:8px 12px}
.pe-adv summary{cursor:pointer;font-weight:700}
.pe-adv[open]{display:grid;gap:10px}
.pe-chart{display:block;width:100%;height:auto}
.pe-chart .gl{stroke:#E9DCC4;stroke-width:1}
.pe-chart .ax{font-size:11px;fill:var(--grijs)}
.pe-chart .pa{fill:none;stroke:var(--roze);stroke-width:4;stroke-linejoin:round}
.pe-chart .pb{fill:none;stroke:var(--kobalt);stroke-width:4;stroke-linejoin:round}
.tm-legend .sw-a{display:inline-block;width:20px;height:5px;border-radius:3px;background:var(--roze);margin-right:6px;vertical-align:middle}
.tm-legend .sw-b{display:inline-block;width:20px;height:5px;border-radius:3px;background:var(--kobalt);margin-right:6px;vertical-align:middle}
.pe-tab .ov-row{grid-template-columns:1fr 1fr;row-gap:2px}
.pe-tab .ov-row .n{grid-column:1/-1;font-weight:700}
.pe-tab .ov-row.head span:first-child{display:none}
.pe-tab .ov-row > span:not(.n){text-align:left}
.pe-tab .up{color:#1E7A3A;font-weight:700}.pe-tab .down{color:#B4232B;font-weight:700}
.pe-notes{display:grid;gap:8px}
.pe-notes .small{margin:0}

@media (max-width:420px){
  .mj-row{grid-template-columns:minmax(0,1fr) 108px 44px}
  .mj-trow{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) 72px}
  .pe-grid{grid-template-columns:1fr}
}

/* Keuzeknoppen met vier opties (Eén ETF, Mandje, Duel, Tijdmachine) passen op één regel */
.seg-ctrl:has(> button:nth-child(4)) button{white-space:nowrap;padding-inline:6px;font-size:14px}
@media (max-width:380px){.seg-ctrl:has(> button:nth-child(4)) button{font-size:13px;padding-inline:4px}}

/* De 10 beste dagen gemist */
.best{border:3px solid var(--inkt);border-radius:16px;background:#FFF9E6}
.best summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600}
.best summary::-webkit-details-marker{display:none}
.best-go{flex:none;width:30px;height:30px;border-radius:50%;border:3px solid var(--inkt);background:var(--zon);display:grid;place-items:center;font-weight:800}
.best[open] .best-go{transform:rotate(45deg)}
.best-body{display:grid;gap:10px;padding:0 14px 14px}
.best-row{display:flex;align-items:center;gap:12px}
.best-k{display:grid;line-height:1.05}
.best-k small{font-size:12.5px;color:var(--grijs);font-weight:600}
.best-k b{font-family:var(--display);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.best-k.miss b{background:var(--roze);border-radius:8px;padding:0 8px}
.best-arr{font-size:22px;font-weight:800;color:var(--grijs)}
.best-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:14px}
.best-list li{display:flex;justify-content:space-between;border-bottom:2px solid #E9DCC4;padding:4px 0}
.best-list b{color:#1E7A3A;font-variant-numeric:tabular-nums}
