*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-base);color:var(--text-primary);font:400 14px/20px var(--font);font-variant-numeric:tabular-nums;display:flex;min-height:100vh}
:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
a{color:inherit}
/* shell */
aside{width:220px;flex:none;background:var(--aside-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:var(--s4) var(--s3)}
.brand{font-size:18px;line-height:24px;font-weight:600;padding:var(--s2) var(--s3) var(--s4)}
nav a{display:flex;align-items:center;gap:var(--s3);height:36px;padding:0 var(--s3);border-radius:var(--r-ctl);color:var(--text-secondary);text-decoration:none;margin-bottom:2px;transition:background var(--t)}
.natiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}.natiles.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.natile{display:grid;gap:4px;justify-items:start;justify-content:stretch;align-content:start;grid-template-columns:minmax(0,1fr);text-align:left;padding:var(--s3);border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-1);color:var(--text-primary);height:auto;min-height:88px}
.natile:hover{background:var(--row-hover)}.natile.on{border-color:var(--text-muted);background:var(--surface-3)}.natile .nasym{font-size:20px;line-height:24px;color:var(--text-secondary)}
.pfill{background:var(--surface-2)}
.xarow{display:flex;align-items:center;gap:4px;padding:6px 0;border-bottom:1px solid var(--border)}
nav .navsep{height:1px;background:var(--border);margin:var(--s2) var(--s3)}
nav a:hover{background:var(--row-hover);color:var(--text-primary)}nav a.on{background:var(--nav-on-bg);color:var(--nav-on-ink);box-shadow:inset 3px 0 0 var(--nav-on-bar)}
.sfoot{margin-top:auto;font-size:12px;line-height:16px;color:var(--text-muted);padding:var(--s3);display:grid;gap:var(--s1)}
.sfoot .stale{color:var(--text-secondary)}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{height:56px;flex:none;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s6);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-base);z-index:5}
header.top h1{font-size:24px;line-height:32px;font-weight:600;margin:0;flex:1}
main{padding:var(--s6);width:100%;max-width:1440px;margin:0 auto}
@media (max-width:1100px){aside{width:64px}.brand .bname,nav a span,.sfoot span.t{display:none}nav a{justify-content:center;padding:0}.sfoot{text-align:center}}
/* grid */
.row12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4);margin-bottom:var(--s4)}
.row12>*{grid-column:span 12;min-width:0}
@media (min-width:1280px){.c8{grid-column:span 8!important}.c4{grid-column:span 4!important}.c6{grid-column:span 6!important}.c3{grid-column:span 3!important}}
/* cards */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5)}
.lbl{font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:0 0 var(--s2);display:flex;justify-content:space-between;align-items:center}
.lbl a{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-secondary);text-decoration:none}.lbl a:hover{color:var(--text-primary)}
.hero{font-size:40px;line-height:44px;font-weight:600}.v24{font-size:24px;line-height:32px;font-weight:600}
h2.sec{font-size:18px;line-height:24px;font-weight:600;margin:0 0 var(--s3)}
.cap{font-size:12px;line-height:16px;color:var(--text-muted)}.sec2{color:var(--text-secondary)}
.sp{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}.sp.b{justify-content:space-between}.grow{flex:1}
.mt{margin-top:var(--s4)!important}.mt2{margin-top:var(--s2)!important}
/* delta pill */
.pill{display:inline-flex;align-items:center;gap:var(--s1);height:20px;padding:0 var(--s2);border-radius:99px;font-size:12px;line-height:16px;font-weight:600;background:var(--surface-2);color:var(--text-secondary)}
.pill.gain{background:var(--gain-bg);color:var(--gain)}.pill.loss{background:var(--loss-bg);color:var(--loss)}
.gain{color:var(--gain)}.loss{color:var(--loss)}
/* controls */
button,input,select,textarea{font:inherit;color:var(--text-primary);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);height:36px;padding:0 var(--s3)}
textarea{height:auto;padding:var(--s2) var(--s3)}
button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background var(--t),border-color var(--t)}
button:hover{border-color:var(--text-muted)}
button.pri{background:var(--pri-bg);color:var(--pri-ink);border-color:var(--pri-bg);font-weight:600}
button.sec{background:var(--surface-1)}button.ghost{background:none;border-color:transparent;color:var(--text-secondary)}button.ghost:hover{color:var(--text-primary)}
button.danger{color:var(--loss);background:none}button.ic{width:32px;height:32px;padding:0}
button:disabled{opacity:.5;cursor:not-allowed}
input,select{width:100%}input[type=checkbox]{width:auto;height:auto}
label.f,span.f{display:block;font-size:12px;line-height:16px;color:var(--text-secondary);margin-bottom:var(--s1)}
.seg{display:inline-flex;height:32px;background:var(--surface-2);border-radius:var(--r-ctl);padding:2px;border:1px solid var(--border)}
.seg button{height:26px;border:0;background:none;color:var(--text-secondary);padding:0 var(--s3);border-radius:6px;font-size:13px}
.seg button.on{background:var(--surface-3);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--sel-ring)}
.chips{display:flex;gap:var(--s1);flex-wrap:wrap}.chip{height:28px;border-radius:99px;padding:0 var(--s3);font-size:12px;background:var(--surface-2);color:var(--text-secondary)}
a.chip,span.chip{display:inline-flex;align-items:center;text-decoration:none}.chip.off{opacity:.45;cursor:default}
.chip.on{background:var(--surface-3);color:var(--text-primary);border-color:var(--text-muted)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s3);align-items:end}
.form.top{align-items:start}                                            /* v0.30.0: fields line up even when a hint wraps */
.err{color:var(--loss);font-size:12px;line-height:16px;margin-top:var(--s1)}
/* tables */
.tw{overflow-x:auto;border-radius:var(--r-ctl)}
table{width:100%;border-collapse:collapse;font-size:13px;line-height:18px}
th,td{height:40px;padding:0 8px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
th{position:sticky;top:0;background:var(--surface-1);color:var(--text-secondary);font-weight:600;font-size:12px;z-index:1}
th:first-child,td:first-child,td.l,th.l{text-align:left}
tbody tr:hover{background:var(--row-hover)}tr.clk{cursor:pointer}
tr.sub td{background:var(--surface-1);color:var(--text-secondary);font-weight:600;border-top:1px solid var(--border)}tr.sub td:first-child{padding-left:28px;color:var(--text-primary)}td.ind{padding-left:44px!important}
tr.grp td{background:var(--surface-2);font-weight:600;cursor:pointer}tr.grp:hover td{background:var(--surface-2)}
tfoot td{position:sticky;bottom:0;background:var(--surface-1);font-weight:600;border-top:1px solid var(--text-muted)}
th button.th{height:auto;border:0;background:none;padding:0;color:inherit;font:inherit;gap:var(--s1)}th button.th:hover{color:var(--text-primary)}
tr.erow{cursor:pointer}tr.erow:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px}.ehint{color:var(--text-muted);opacity:0}tr.erow:hover .ehint,tr.erow:focus-visible .ehint{opacity:1}
td.num{text-align:right}td.act{width:40px;text-align:right}td.act button{opacity:0}tr:hover td.act button,td.act button:focus-visible,td.act button[data-act="undo-move"]{opacity:1}
/* v0.48.7 (beta 0.47.18): on Favorites the row actions are always there, softer until the row is hovered; on a touch screen, always */
table.xfav td.act button{opacity:.6}table.xfav tr:hover td.act button{opacity:1}@media (hover:none){td.act button{opacity:1}}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--s2);vertical-align:middle}
.badge{display:inline-block;font-size:12px;line-height:16px;color:var(--text-secondary);background:var(--surface-2);padding:4px var(--s2);border-radius:var(--r-badge)}
.wbar{display:inline-block;width:24px;height:6px;background:var(--surface-2);border-radius:3px;margin-left:var(--s2);vertical-align:middle;overflow:hidden}.wbar i{display:block;height:100%}
td.spk{width:92px;padding-top:0;padding-bottom:0}svg.spark{display:block;margin-left:auto}
.stale-ic{color:var(--text-muted);margin-left:var(--s1);vertical-align:middle}
/* allocation bar */
.abar{display:flex;height:28px;border-radius:var(--r-ctl);overflow:hidden;position:relative;background:var(--surface-2)}
.abar i{display:block;height:100%}.atick{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--text-primary)}
/* slide-over, toast, tip */
.dim{position:fixed;inset:0;background:var(--overlay);z-index:20}
.slide{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100%;background:var(--surface-1);border-left:1px solid var(--border);box-shadow:var(--elev);z-index:21;display:flex;flex-direction:column}
.slide.wide{width:560px}.slide .shd{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.slide .body{padding:var(--s5);overflow-y:auto;flex:1}.slide footer{padding:var(--s4) var(--s5);border-top:1px solid var(--border);display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
#toast{position:fixed;bottom:var(--s5);left:calc(220px + var(--s5));z-index:40;display:grid;gap:var(--s2)}
@media (max-width:1100px){#toast{left:calc(64px + var(--s5))}}
.toast{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);padding:var(--s3) var(--s4);box-shadow:var(--elev);display:flex;gap:var(--s4);align-items:center}
.toast.bad{border-color:var(--loss)}.toast button{height:28px}
#tip{position:fixed;pointer-events:none;background:var(--surface-2);border:1px solid var(--border);padding:var(--s2) var(--s3);border-radius:var(--r-ctl);font-size:12px;line-height:16px;display:none;z-index:50;box-shadow:var(--elev)}
/* states */
.skel{background:var(--surface-2);border-radius:var(--r-ctl);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.5}}
.empty{text-align:center;padding:var(--s8) var(--s4);color:var(--text-secondary);display:grid;gap:var(--s3);justify-items:center}
/* .priv .money: see v0.24.0 at the end */
/* v0.51.2 (UI/UX I4): compact Holdings rows (the market line beside the code, less padding); the Total return card folded to its
   figure; on a wide screen the table pages (Holdings, Ledger, Dividends) take up to 1800 px */
#hpanel.hcompact table.hold td{padding-top:3px;padding-bottom:3px;height:auto}
#hpanel.hcompact table.hold td.l>.cap{display:inline-block;margin-left:6px;vertical-align:bottom;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v0.51.5 (retest of 0.51.2, L1 and L2): the line beside the name is cut with an ellipsis (whole on hover), so compact rows never widen
   the table past its card; a deposit's interest so far keeps its own line */
#hpanel.hcompact table.hold td.l>.cap.gain{display:block;margin-left:0;max-width:0;min-width:100%}
/* v0.51.9 (retest of 0.51.5, L1): the caption beside a name never widens the first column; pages.js gives it the room the column
   already has after the name (it may be none), measured again when the window changes size */
.warnc{color:var(--warn);font-weight:600}
#hpanel.hcompact table.hold .plp{display:inline;margin-left:4px}
#hpanel.hcompact.hfit1 table.hold .dam{display:none}#hpanel.hcompact.hfit1 table.hold .dam+.plp{margin-left:0}          /* v0.51.11: hcapFit() */
#hpanel.hcompact.hfit2 table.hold .plp{display:block;margin-left:0}
.hsum.fold .tbar,.hsum.fold .tleg,.hsum.fold .trc .cap{display:none}
/* v0.51.11 (retest of 0.51.2): the folded card is one line across the page, with the split beside the total where there is room */
.hsum.two.fold{grid-template-columns:1fr!important}.hsum.fold .trc{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}.hsum.fold .trc>.lbl{margin:0}
@media (min-width:1100px){.hsum.fold .trc .tleg{display:flex;margin:0 0 0 auto;order:1}}.hsum.fold .trc{padding-top:8px;padding-bottom:8px}.hsum.fold .trc .v24{font-size:18px;line-height:24px}
.lbl .hsfold{width:28px;height:28px;min-height:28px;margin:-6px -6px -6px 0}
@media (min-width:1600px){body[data-page="holdings"] main,body[data-page="ledger"] main,body[data-page="dividends"] main{max-width:1800px}}
/* v0.51.1 (UI/UX I3): the Ledger's pick list: a box before each date, filled for a chosen row; the bar stays in view while scrolling */
body.lpicking #view tr.erow td:first-child::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:1.5px solid var(--text-muted);border-radius:3px}
body.lpicking #view tr.erow.on td:first-child::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--surface-1)}
body.lpicking #view tr.erow.on td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
body.lpicking #view tr.erow .ehint{visibility:hidden}
.lselbar{position:sticky;top:0;z-index:5;gap:8px;margin:-4px 0 var(--s3);padding:6px 8px;background:var(--surface-2);border-radius:6px}
.lselbar select{height:32px;max-width:220px}
svg text{fill:var(--text-muted);font-size:calc(12px * var(--k, 1))}svg .grid{stroke:var(--border)}
.legend td,.legend th{height:32px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);margin-bottom:var(--s3)}.tabs button{border:0;border-radius:0;background:none;height:36px;color:var(--text-secondary);border-bottom:2px solid transparent}.tabs button.on{color:var(--text-primary);border-bottom-color:var(--text-primary)}

#banner:empty{display:none}#banner{padding:var(--s3) var(--s6) 0;max-width:1488px;margin:0 auto;width:100%}
.note{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--text-primary);border-radius:var(--r-ctl);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;z-index:1}
.switch i{position:absolute;inset:0;background:var(--surface-3);border-radius:99px;transition:background var(--t)}.switch i:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-secondary);transition:transform var(--t)}
.switch input:checked+i{background:var(--text-primary)}.switch input:checked+i:after{transform:translateX(20px);background:var(--bg-base)}.switch input:focus-visible+i{outline:2px solid var(--text-primary);outline-offset:2px}
.badge.est{border:1px dashed var(--text-muted)}.badge.ann{color:var(--text-primary)}

.fgrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--s4);align-items:start}      /* v0.38.3 (Q5): the inputs grow with the page, no inner scroll */
.fans{padding:var(--s4) var(--s5)}.fans1{font-size:22px;line-height:30px;font-weight:600;display:flex;align-items:center;gap:10px}.fans2{font-size:16px;line-height:24px;margin-top:4px;color:var(--text-secondary)}
.fdot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--text-muted)}.fans.ok{box-shadow:inset 4px 0 0 var(--gain)}.fans.ok .fdot{background:var(--gain)}
.fans.warn{box-shadow:inset 4px 0 0 var(--warn)}.fans.warn .fdot{background:var(--warn)}.fans.bad{box-shadow:inset 4px 0 0 var(--loss)}.fans.bad .fdot{background:var(--loss)}
.fslim{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.fslim>.card{padding:var(--s3) var(--s4)}
.fbridge{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-2)}.fbridge>i{background:var(--gain)}.fbridge>b{background:var(--loss)}
.fways{margin:var(--s2) 0 0;padding-left:18px;display:grid;gap:6px}
.flist{display:flex;align-items:center;gap:4px;padding:6px 0;border-bottom:1px solid var(--border)}.fform{padding:var(--s3);margin-top:var(--s2);border:1px solid var(--border);border-radius:var(--r-ctl)}
@media (max-width:1279px){.fgrid{grid-template-columns:300px minmax(0,1fr)}}
@media (max-width:899px){.fgrid{grid-template-columns:minmax(0,1fr)}.fgrid>.card:first-child{position:static;max-height:none;order:2}}  /* v0.23.2: results first on narrow screens */
#f_start::placeholder{color:var(--text-secondary);opacity:1}   /* v0.31.11 (Onur, 29 Oct): your net worth fills the box like a typed value; typing replaces it */
.fhead{margin:0 0 var(--s3)}.fgrp{border:0;border-top:1px solid var(--border);margin:var(--s3) 0 0;padding:var(--s3) 0 0;display:grid;gap:var(--s3);min-width:0}.fgrp>legend{padding:0 0 var(--s2);float:left;width:100%}
details.fgrp{display:block}details.fgrp>summary{cursor:pointer}.form.f3{grid-template-columns:repeat(3,minmax(0,1fr))}.form.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.finc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:4px;align-items:center;margin-bottom:var(--s2)}.finc>*{min-width:0}
.fnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}.v18{font-size:18px;line-height:26px;font-weight:600}
.fbar{height:6px;background:var(--surface-2);border-radius:3px;margin-top:var(--s2);overflow:hidden}.fbar>div{height:100%;background:var(--c-total)}
.fgrid .kpis>.c3{grid-column:span 6!important}@media (min-width:1500px){.fgrid .kpis>.c3{grid-column:span 3!important}}
#et{flex-wrap:wrap;height:auto}#et button{padding:0 8px}
.mgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}@media(max-width:1279px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mtile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;height:auto;min-height:96px;padding:var(--s3);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);color:var(--text-primary)}
.mtile:disabled{opacity:.55;cursor:default}.mtile.cur{border-top:2px solid var(--text-primary)}.mtile.on{background:var(--surface-2)}.mtile .lbl{margin:0}.mtile .mtot{font-size:16px;line-height:20px;font-weight:600}
.mchips{display:flex;flex-wrap:wrap;gap:4px}.pchip{display:inline-flex;align-items:center;font-size:12px;line-height:16px;padding:1px 6px;border-radius:var(--r-badge);border:1px solid transparent;color:var(--text-secondary)}
.pchip.paid{background:var(--surface-3);color:var(--text-primary)}.pchip.declared{border-color:var(--text-muted)}.pchip.estimated{border:1px dashed var(--text-muted)}.pchip .dot{margin-right:4px}
tr.subrow td{background:var(--surface-2);color:var(--text-secondary)}table.tight td{padding:6px 4px}svg text.gainf{fill:var(--gain)}svg text.lossf{fill:var(--loss)}
.belln{position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--surface-3);color:var(--text-primary);font-size:11px;line-height:16px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.belln.todo{background:var(--text-primary);color:var(--bg-base)}
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-ctl);margin-top:var(--s2);background:var(--surface-1)}
.alert.action{border-left-color:var(--text-primary)}.alert.warn{border-left-color:var(--text-secondary);border-left-style:dashed}.alert.info{border-left-color:var(--border)}
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:36px;padding:0 var(--s3);border-radius:var(--r-ctl);text-decoration:none;color:var(--text-primary)}a.btn.sec{background:var(--surface-1);border:1px solid var(--border)}
.syncst{margin:auto var(--s3) 0;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-ctl);font-size:12px;line-height:16px;color:var(--text-secondary);background:var(--surface-2)}
.syncst b{color:var(--text-primary);font-weight:600}.syncst .pb{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}.syncst .pb i{display:block;height:100%;background:var(--c-total)}
.syncst + .sfoot{margin-top:var(--s2)}

/* Settings window (v0.17.0): tabs down the left, the chosen group on the right, over the page you were on */
body.smodal-open{overflow:hidden}
.sdim{position:fixed;inset:0;background:var(--overlay-strong);z-index:15}
.smodal{position:fixed;top:40px;bottom:40px;left:50%;transform:translateX(-50%);width:min(1080px,calc(100vw - 64px));background:var(--bg-base);border:1px solid var(--border);border-radius:16px;box-shadow:var(--elev);z-index:16;display:flex;overflow:hidden}
.stabs{width:232px;flex:none;border-right:1px solid var(--border);padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:2px;background:var(--surface-1)}
.stabs h2{padding:0 var(--s3);margin:0 0 var(--s4)}.stabs .stl{display:flex;flex-direction:column;gap:2px}
.stabs button{display:flex;align-items:center;justify-content:flex-start;width:100%;gap:10px;height:38px;padding:0 var(--s3);border-radius:8px;background:transparent;border:0;color:var(--text-secondary);text-align:left;cursor:pointer;font:inherit;font-size:14px}
.stabs button:hover{background:var(--surface-2);color:var(--text-primary)}
.stabs button.on{background:var(--surface-3);color:var(--text-primary);font-weight:600;box-shadow:inset 0 0 0 1px var(--sel-ring)}
.stabs button:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px}
.sbody{flex:1;display:flex;flex-direction:column;min-width:0}
.sbody .shead{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.sbody .shead h2{margin:0}
.sview{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.sview>[hidden]{display:none!important}
@media (max-width:760px){.smodal{top:0;bottom:0;left:0;transform:none;width:100vw;border-radius:0;flex-direction:column}.stabs{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:var(--s2)}.stabs .stl{flex-direction:row}.stabs h2{display:none}.stabs button span{white-space:nowrap}}

/* Settings at the bottom of the sidebar (v0.17.1) */
.navbottom{margin-top:auto;padding-top:var(--s2)}
.syncst + .navbottom{margin-top:var(--s2)}
.navbottom + .sfoot{margin-top:0}
.syncst[hidden] + .navbottom{margin-top:auto}
/* asset suggestions (v0.17.1) */
.acl{position:absolute;left:0;right:0;top:100%;margin-top:4px;max-height:260px;overflow-y:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);box-shadow:var(--elev);z-index:30}
.acl>div{display:flex;align-items:baseline;gap:8px;padding:6px 10px;cursor:pointer;font-size:13px}
.acl>div span{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.acl>div span.dot{flex:none;align-self:center}   /* v0.25.4: the colour dot keeps its size (the rule above stretched it) */
.acl>div em{font-style:normal;font-size:11px;color:var(--text-muted)}
.acl>div.on,.acl>div:hover{background:var(--surface-3)}

/* labels and reports (v0.17.3) */
.ldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}
.ldots{margin-left:6px;white-space:nowrap}.ldots .ldot{margin-right:3px}
.lchip{display:inline-flex;align-items:center}
.lbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.rgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);margin-top:var(--s3)}
@media (max-width:1279px){.rgrid{grid-template-columns:repeat(3,1fr)}}@media (max-width:700px){.rgrid{grid-template-columns:repeat(2,1fr)}}
.rtile{background:var(--surface-2);border-radius:var(--r-ctl);padding:var(--s3);min-width:0}.rtile .lbl{margin-bottom:var(--s1)}
.v20{font-size:20px;line-height:28px;font-weight:600}.mb4{margin-bottom:var(--s4)}
.lrow{display:grid;grid-template-columns:auto 260px 1fr auto;gap:var(--s2);align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
/* label tags (v0.17.4): a paper tag with a pointed end and a punched hole */
.ltag{--lc:var(--l-stone);display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 14px;border:0;border-radius:4px;background:var(--lc);color:var(--l-ink);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%);position:relative;vertical-align:middle;letter-spacing:.01em}
.ltag::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--ltag-dot)}
.ltag svg{flex:none}.ltag.mini{height:16px;padding:0 4px 0 11px;gap:0}.ltag.mini svg{width:10px;height:10px}.ltag.mini::before{left:4px;width:3px;height:3px;margin-top:-1.5px}
.ltag.off{background:color-mix(in srgb,var(--lc) var(--ltag-off-tint),transparent);color:color-mix(in srgb,var(--lc) var(--ltag-off-ink),var(--text-primary))}.ltag.off::before{background:var(--lc);opacity:.5}
button.ltag{height:26px;padding:0 10px 0 16px;cursor:pointer;transition:background var(--t),color var(--t)}button.ltag:hover{filter:brightness(1.08)}button.ltag.off:hover{background:color-mix(in srgb,var(--lc) calc(var(--ltag-off-tint) + 12%),transparent)}
button.ltag:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.ldots{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
/* one change at a time under net worth (v0.17.4) */
.chg{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;position:relative}
.seg.sm button{height:26px;padding:0 10px;font-size:12px}
/* windows (v0.17.8): a holding, an account or a BES plan opens in the middle of the screen like Settings; a drawer opened from
   one (Add or Edit transaction) slides in on top of it */
.slide.modal{top:40px;bottom:40px;left:50%;right:auto;transform:translateX(-50%);width:min(1080px,calc(100vw - 64px));border:1px solid var(--border);border-radius:16px;background:var(--bg-base);overflow:hidden}
.slide.modal .shd{background:var(--surface-1)}.slide.modal footer{background:var(--surface-1)}
.slide.modal .body:has(> .mwin){padding:0;display:flex;overflow:hidden}
.mwin{display:flex;flex:1;min-height:0;min-width:0}.mwin .stabs[hidden]{display:none}.mwin .stabs{width:200px;padding:var(--s4) var(--s3)}
.mview{flex:1;overflow-y:auto;padding:var(--s5);min-width:0}.mview>[hidden]{display:none!important}
.stabs button .n{margin-left:auto;font-size:12px;color:var(--text-muted);font-weight:400}
#overlay2 .dim{z-index:22}#overlay2 .slide{z-index:23}#overlay.under{visibility:hidden}          /* v0.51.11 (UI/UX B15) */
@media (max-width:760px){.slide.modal{top:0;bottom:0;left:0;transform:none;width:100vw;border-radius:0}.mwin{flex-direction:column}.mwin .stabs{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:var(--s2)}.mwin .stabs button span{white-space:nowrap}}
/* the note of a ledger entry (v0.17.8): one width with or without notes; hover shows it all, a tap opens it */
th.lnote,td.lnote{width:200px;min-width:200px;max-width:200px}td.lnote{overflow:hidden;text-overflow:ellipsis;cursor:default}td.lnote[title]{cursor:pointer}
td.lnote.open{white-space:normal;overflow-wrap:anywhere;height:auto;padding-top:8px;padding-bottom:8px;color:var(--text-secondary)}
.mview td.act button{opacity:1}@media (hover:none){td.act button{opacity:1}}
/* Holdings (v0.17.8): the first column stays narrow; a long line under a name is cut short (hover shows it, the window has it all) */
table.hold td:first-child>.cap{width:fit-content;max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.hold td:first-child>.cap.upx{max-width:none}          /* v0.50.0 (Cila 4 C17): "tane başına ₺8.904,96" is never cut */
table.hold td:first-child>b{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* Ledger filters (v0.17.8): kinds of entry in small groups, the holding and search on the right */
.ltypes{align-items:center;row-gap:6px}
.vsep{width:1px;height:24px;background:var(--border);margin:0 4px}
/* the income calendar's strip (v0.17.8): every month that can be shown, the 12 in view highlighted; click or drag to slide */
.cstripw{overflow-x:auto;margin-bottom:var(--s3)}
.cstrip{display:flex;align-items:stretch;cursor:grab;user-select:none;touch-action:none;border-radius:8px;position:relative}
.cstrip:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.cstrip span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:6px 2px;height:88px;box-sizing:border-box;border:solid transparent;border-width:1px 0}
.cstrip span i{display:block;width:min(60%,24px);border-radius:4px 4px 0 0;box-sizing:border-box}
.cstrip span b{font-size:12px;font-weight:400;color:var(--text-muted);white-space:nowrap}.cstrip span em{font-style:normal;font-size:12px;color:var(--text-secondary);white-space:nowrap}
.cstrip span.in{background:var(--surface-2);border-color:var(--border-strong)}.cstrip span.in b{color:var(--text-secondary)}
.cstrip span.f{border-left-width:1px;border-radius:8px 0 0 8px}.cstrip span.l{border-right-width:1px;border-radius:0 8px 8px 0}.cstrip span.f.l{border-radius:8px}
.cstrip span.now b,.cstrip span.sel b,.cstrip span.sel em{font-weight:600;color:var(--text-primary)}
.mtile.fut .mtot{color:var(--text-secondary)}
.mview th.lnote,.mview td.lnote{width:140px;min-width:140px;max-width:140px}
.plp{font-size:12px;line-height:16px;font-weight:400}
.alink{all:unset;cursor:pointer;display:inline}.alink:hover b,.alink:focus-visible b{text-decoration:underline;text-underline-offset:3px}.alink:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px;border-radius:4px}
/* the Ledger's filters (v0.17.10) */
.tgw{position:relative;display:inline-flex}.tmenu{right:auto;min-width:180px}.tmenu>div b{display:inline-block;width:14px;color:var(--text-primary)}
.lsb{position:relative;display:flex;align-items:center;gap:6px;flex:none;width:300px;height:36px;padding:0 4px 0 6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl)}
.lsb:focus-within{border-color:var(--text-muted)}.lsb input{flex:1;min-width:0;border:0;background:transparent;height:32px;padding:0 4px;outline:none}
.lpick{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 0 0 8px;border-radius:99px;background:var(--surface-3);font-size:12px;white-space:nowrap;max-width:150px;overflow:hidden}.lpick .ic{width:24px;height:24px}
.lsb .acl{left:-1px;right:-1px}
.kpis .hero{font-size:clamp(26px,2.2vw,36px);white-space:nowrap}
/* v0.18.1 Dashboard */
.pill{white-space:nowrap}.pill.loss,.loss{color:var(--loss-text)}
h2.lbl,h3.lbl{font-size:12px;line-height:16px}.lbl a.ttl{text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--text-secondary)}.lbl a.ttl::after{content:" →";letter-spacing:0;opacity:.7}.lbl a.ttl:hover{color:var(--text-primary)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}.stack>.card{flex:1 1 auto}
a.fresh{color:var(--text-secondary);text-decoration:none}a.fresh:hover{color:var(--text-primary)}.warnf{color:var(--warn)}span.lossf{color:var(--loss-text)}
.att{display:flex;flex-direction:column;gap:2px;padding:8px 10px;margin:0 0 6px;border-radius:var(--r-ctl);background:var(--surface-2);border-left:3px solid var(--text-muted);text-decoration:none;color:var(--text-primary);min-height:32px}
.att:hover{background:var(--surface-3)}.att.action{border-left-color:var(--loss-text)}.att.warn{border-left-color:var(--warn)}.att .cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fbar{height:6px;background:var(--surface-2);border-radius:3px;margin:var(--s2) 0;overflow:hidden}.fbar>div{height:100%;background:var(--c-total)}
.asay{margin:0 0 var(--s2);font-size:14px;color:var(--text-primary)}
.linkb{background:none;border:0;padding:0;height:auto;min-height:32px;color:var(--text-secondary);cursor:pointer}.linkb:hover{color:var(--text-primary)}
table.recent td{padding:8px 6px}table.recent tr.erow{cursor:pointer}
.ghost.ic.sm{width:32px;height:32px;min-height:32px;padding:0;color:var(--text-muted)}
#ybars .yb{cursor:pointer}#ybars .yb:focus{outline:none}#ybars .yb:focus rect:last-of-type,#ybars .yb:hover rect:last-of-type{fill:var(--text-primary)!important;fill-opacity:.05}
/* accessibility pack: 32 px targets */
.chip,.seg button,.seg.sm button{min-height:32px}.ghost.ic{min-width:32px;min-height:32px}
#brush rect[tabindex]:focus{outline:none;stroke:var(--text-primary);stroke-width:2}
.sfoot .bk .r{display:none}@media (max-width:1100px){.sfoot .bk .r{display:inline}}
.chip.tog.on::before{content:"✓";margin-right:4px}
@media (min-width:700px) and (max-width:1279px){.kpis>.c3,.kpis>.c4,.kpis>.c6{grid-column:span 6!important}.kpis>.c4:last-child:nth-child(odd){grid-column:span 12!important}}   /* v0.29.0: fewer cards beside Net worth */
/* v0.18.2 */
.dbar{height:6px;background:var(--surface-2);border-radius:3px;margin:var(--s2) 0;overflow:hidden}.dbar i{display:block;height:100%;background:var(--c-total)}
.pastl{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}.pastl a{font-size:12px;color:var(--text-secondary)}
.badge.gainf{color:var(--gain)}.badge.lossf{color:var(--loss-text)}
.olist{display:flex;flex-direction:column;gap:2px;margin-top:var(--s2)}.orow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-ctl);background:none;border:0;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;min-height:32px;width:100%;height:auto}
.orow:hover{background:var(--surface-2)}.orow .cap{white-space:nowrap}
.orow>span:first-child{flex:1;min-width:0}.orow>span:last-child{flex:none;white-space:nowrap}
/* v0.18.3: what changed */
table.wchg td.wcol{width:38%;padding-left:12px;padding-right:12px}.wbx{display:block;position:relative;height:8px;border-left:0}.wbx::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1px solid var(--border)}.wbar{position:absolute;top:0;height:8px;border-radius:2px}.wbar.up{left:50%;background:var(--gain)}.wbar.dn{right:50%;background:var(--loss)}
table.wchg tr.tot td{border-top:1px solid var(--border);font-weight:600}
/* v0.18.3: 24 px click targets for title links, sortable headers and lone links (found by tools/ux_kpi.js) */
.lbl a.ttl,.lbl>a{display:inline-flex;align-items:center;min-height:24px;margin:-4px 0}th button.th{min-height:24px}.sp>a[href]{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:600px){table.wchg td.wcol{display:none}table.wchg .wchgd{display:block}table.wchg td{white-space:normal}}
.lbl .info{cursor:help;color:var(--text-muted);font-weight:400;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin:-4px 0}   /* v0.18.4: the Your return explanation */
/* v0.18.5 Holdings polish */
.tkb{all:unset;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;min-height:24px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;border-radius:4px}
.tkb:hover{text-decoration:underline}.tkb:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.gtog{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;border-radius:4px;vertical-align:middle}
.gtog:focus-visible{outline:2px solid var(--text-primary)}
.conc{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--loss);color:var(--bg-base);font-size:11px;font-weight:700;vertical-align:1px;cursor:help}
.hsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4)}.hsum.five{grid-template-columns:repeat(5,minmax(0,1fr))}.hsum>.card{margin:0;min-width:0}
@media (max-width:1100px){.hsum,.hsum.five{grid-template-columns:repeat(2,minmax(0,1fr))}.hsum.five>.ret{grid-column:1/-1}}
@media (min-width:1101px){.tw.hw:not(.sx){overflow:visible}.tw.hw:not(.sx) table.hold thead th{top:56px}}   /* one scroll area: the header sticks under the top bar, the totals to the bottom of the window */
table.hold .ldots{min-height:24px;align-items:center;position:relative}
table.hold .ldots:focus-visible::after{content:attr(data-names);position:absolute;left:0;top:100%;z-index:3;background:var(--surface-2);color:var(--text-primary);padding:2px 6px;border-radius:4px;font-size:12px;white-space:nowrap}
/* v0.19.0: the ⓘ explanation (UI spec, Explanations) */
.lbl .infob,h2 .infob{vertical-align:middle;margin:-6px 0}
.lbl>.infob{margin-left:4px;margin-right:auto}      /* v0.23.5 (Cila 1): the ⓘ sits beside the title it explains; anything after it stays at the end */
.infop{position:fixed;z-index:60;max-width:min(380px,calc(100vw - 16px));max-height:60vh;overflow:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);box-shadow:var(--elev);padding:var(--s3) var(--s4);font-size:13px;line-height:19px;color:var(--text-secondary);font-weight:400;text-align:left;white-space:normal;letter-spacing:0;text-transform:none}
.infop p{margin:0 0 6px}.infop p:last-child{margin:0}.infop b{color:var(--text-primary)}
.infop ul{margin:0 0 6px;padding-left:16px}.infop li{margin:2px 0}.infop ul:last-child{margin-bottom:0}
.infop p.cap{font-size:12px;color:var(--text-muted)}
/* v0.19.0 (Settings review R10): on/off settings are 24 px switches */
input.sw{appearance:none;-webkit-appearance:none;width:44px;height:24px;min-width:44px;border-radius:99px;background:var(--surface-3);position:relative;cursor:pointer;flex:none;margin:0;transition:background var(--t);vertical-align:middle}
input.sw:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-secondary);transition:transform var(--t)}
input.sw:checked{background:var(--text-primary)}input.sw:checked:before{transform:translateX(20px);background:var(--bg-base)}input.sw:disabled{opacity:.5;cursor:default}
/* v0.19.0: room for the Total return column (Holdings review R4) at 1440 px: tighter cells in the holdings table */
table.hold th,table.hold td{padding:0 6px}table.hold th:first-child,table.hold td:first-child{padding-left:8px}table.hold td.spk{width:76px}
table.hold td.ind{padding-left:32px!important}table.hold tr.sub td:first-child{padding-left:20px;white-space:normal;line-height:16px}table.hold .tkb{max-width:112px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
table.hold tfoot td:first-child{white-space:normal;line-height:16px}
.cap .infob,.kv .infob{width:24px;height:24px;min-width:24px;min-height:24px;margin:-4px 0;vertical-align:middle}
/* v0.19.3: Benchmark is one page with three sections (Markets, Housing, Goals) and a jump strip that stays under the top bar */
.jstrip{position:sticky;top:56px;z-index:4;background:var(--bg-base);display:flex;gap:var(--s1);margin:calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s4);padding:var(--s2) var(--s6);border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap}
.jstrip a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s3);border-radius:99px;font-size:13px;color:var(--text-secondary);text-decoration:none}
.jstrip a:hover{background:var(--row-hover);color:var(--text-primary)}.jstrip a.on{background:var(--surface-3);color:var(--text-primary)}
.jstrip .n{color:var(--text-muted);font-weight:400}.jstrip a{gap:0;margin:0;height:auto}.jstrip .n:not(:empty){margin-left:6px}
.bctl{margin-bottom:var(--s3)}
.ahd{display:grid;gap:6px;margin-top:var(--s2)}
.ahr{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr auto;gap:var(--s2);align-items:center}
.ahn{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}          /* v0.38.8 (G13): the longest label wraps to two lines */.ahv{text-align:right;white-space:nowrap}
.ahb{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;display:block}.ahb i{display:block;height:100%;border-radius:3px}.ahb i.pos{background:var(--gain)}.ahb i.neg{background:var(--loss)}
.lgb[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.htiles{display:grid;gap:var(--s4);align-content:start}
.htile+.htile{border-top:1px solid var(--border);padding-top:var(--s3)}
@media (max-width:1099px) and (min-width:760px){.htiles{grid-template-columns:repeat(3,1fr)}.htile+.htile{border-top:0;padding-top:0;border-left:1px solid var(--border);padding-left:var(--s4)}}
.grows{display:grid;gap:var(--s4)}.grow2{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:var(--s6);align-items:center}.grow2 .gright{min-width:0}.g2x2{grid-template-columns:repeat(2,minmax(0,1fr))}.g2x2 .gv{font-weight:600}
@media (max-width:719px){.grow2{grid-template-columns:1fr}.grow2 .gright{margin-top:var(--s3)}}
.gcard{min-width:0}.gname b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbar{height:6px;background:var(--surface-2);border-radius:3px;margin-top:var(--s2);overflow:hidden}.gbar i{display:block;height:100%;background:var(--c-total)}
.gadd2{display:grid;place-items:center;align-content:center;gap:var(--s1);min-height:200px;border-style:dashed;color:var(--text-secondary);cursor:pointer;text-align:center}
.gadd2:hover{color:var(--text-primary);border-color:var(--text-muted)}
.greached .grow1{padding:var(--s2) 0;border-top:1px solid var(--border)}
/* v0.20.0: Pano's confirmation window, the danger zone, the plain source status */
.askw{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}.askdim{position:absolute;inset:0;background:var(--overlay)}
.ask{position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card,12px);box-shadow:var(--elev);width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:var(--s5);display:grid;gap:var(--s3)}
.ask h2{margin:0}.ask .askb{color:var(--text-secondary);font-size:14px;line-height:20px;display:grid;gap:var(--s2)}.ask footer{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
button.danger.solid{background:var(--loss);color:var(--bg-base);border-color:var(--loss)}
.dzone{border-color:color-mix(in srgb,var(--loss) 55%,var(--border))}.dzone h2.sec{color:var(--loss)}
.verdict{display:flex;gap:10px;align-items:center;font-size:15px;line-height:22px}.verdict .vdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--gain)}.verdict.bad .vdot{background:var(--loss)}.verdict.part .vdot{background:var(--warn)}
.capre{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-word}
/* v0.20.1: the Alerts tab, one row per kind */
.ablk{border-top:1px solid var(--border);padding-top:var(--s3);margin-top:var(--s3)}.ablk summary{cursor:pointer;padding:4px 0;list-style-position:outside}
.arow{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(0,1.4fr) 110px;gap:8px 12px;align-items:center;min-height:44px;padding:4px 0}
.arow.off .afld{opacity:.55}.arow .afld{gap:6px;color:var(--text-secondary);font-size:13px;flex-wrap:wrap}.arow .acnt{text-align:right}
.alab{align-items:center}.ahint{margin:-2px 0 6px 54px}
.atodo{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--text-secondary);font-size:13px}
@media (max-width:760px){.arow{grid-template-columns:1fr auto;padding:8px 0;border-bottom:1px solid var(--border)}.arow .alab{grid-column:1 / -1}.arow .afld{grid-column:1}.arow .acnt{grid-column:2}.ahint{margin-left:0}}
.arow .alab{gap:4px;flex-wrap:nowrap}.arow .infob{width:28px;height:28px;min-width:28px;min-height:28px;flex:none}
@media (max-width:760px){.arow .alab{flex-direction:row;justify-content:flex-start}.arow .alab label{flex-direction:row-reverse;justify-content:space-between;flex:1}}
/* v0.20.2: the ⋯ menu on an alert and the Dismissed list */
.amenu{position:relative}.amenu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center}.amenu>summary::-webkit-details-marker{display:none}
.amenu>summary svg{stroke-width:3}
.amenu-p{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:200px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r2);padding:4px;display:grid;box-shadow:var(--sh-menu)}
.amenu-p button{justify-content:flex-start;text-align:left;height:36px;width:100%;white-space:nowrap}
.drow{padding:6px 0;border-bottom:1px solid var(--border);gap:8px}.drow:last-child{border-bottom:0}
.card.flash{outline:2px solid var(--text-primary);outline-offset:2px;transition:outline-color .6s}
/* v0.20.3 (Dashboard review R1, R8): cards keep their own height; alert text two lines; one-line moves; change and yearly side by side */
.row12{align-items:start}.row12>.stack{align-self:start}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.movers{display:grid;gap:2px;margin-top:4px}
.mover1{display:grid;grid-template-columns:1fr auto 96px;gap:8px;align-items:center;min-height:32px;padding:0 8px;border-radius:6px;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
.mover1:hover{background:var(--row-hover)}.mover1>span:last-child{text-align:right}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.row12.kpis{align-items:stretch}.row12>.stack>.card{flex:none}.c12{grid-column:span 12}
.wgrid table.wchg td.wcol{width:24%;padding-left:6px;padding-right:6px}.wgrid table.wchg .wchgd{display:block}
/* v0.31.1 (Dashboard F7): the split and the yearly bars side by side once the card is wider than 700 px, wherever it sits */
.wcq{container-type:inline-size}@container (min-width:700px){.wgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
/* v0.21.0: the entry panel (transaction entry report Phase 1). Two radio groups for the kind of entry, one column of fields with
   quantity and price side by side, messages under their field, and on a phone a full-screen panel with 44 px controls and 16 px text
   (so an iPhone does not zoom into a field). */
.slide.entry{width:500px}
.etype{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rseg{display:inline-flex;flex-wrap:nowrap;background:var(--surface-2);border-radius:var(--r-ctl);padding:2px;border:1px solid var(--border);max-width:100%;overflow-x:auto}
.rseg button{height:30px;min-height:30px;border:0;background:none;color:var(--text-secondary);padding:0 var(--s3);border-radius:6px;font-size:13px;white-space:nowrap}
.rseg button.on{background:var(--surface-3);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--sel-ring)}.rseg button:disabled{opacity:.4}
#eg button{font-weight:600}
.eform{display:grid;gap:var(--s3)}.eform .r2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
.fld .fe{color:var(--loss-text,var(--loss));font-size:12px;line-height:16px;margin-top:4px}.fld .fe:empty{display:none}
.fld.bad input,.fld.bad select{border-color:var(--loss)}
.abox{position:relative}.apick{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 var(--s3);border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface-2)}
.easset{font-size:12px;line-height:18px;color:var(--text-secondary);margin-top:4px}.easset:empty{display:none}.easset .chip{height:24px;min-height:24px}
.ptog{font-size:12px;color:var(--text-muted);margin-bottom:var(--s1)}.ptog .linkb{color:var(--text-muted);min-height:24px}.ptog .linkb.on{color:var(--text-primary);font-weight:600}
#e_phint{margin-top:4px;min-height:16px}.warnt{color:var(--warn)}
@media (max-width:760px){
  .slide,.slide.entry,.slide.wide{width:100vw;max-width:100vw;left:0;border-left:0}
  .slide.entry .eform .r2{grid-template-columns:1fr}
  .slide.entry input,.slide.entry select,.slide.entry textarea{font-size:16px;height:44px}
  .slide.entry button{min-height:44px}.slide.entry .rseg button{height:40px;min-height:40px}.slide.entry .chip{height:36px;min-height:36px}
  .slide.entry .ghost.ic{min-width:44px;min-height:44px}.slide .shd{padding:var(--s3) var(--s4)}.slide .body{padding:var(--s4)}
  .slide footer{padding:var(--s3) var(--s4)}.slide.entry footer button{flex:1 1 auto}
}
.easset .linkb,#e_phint .linkb{min-height:24px;text-decoration:underline}
.phl{gap:6px;align-items:flex-start;flex-wrap:nowrap}.phl .ptog{margin:0;white-space:nowrap;flex:none}
@media (max-width:760px){.card>.sp.b:has(>#lt){flex-wrap:wrap!important}#lt{flex-wrap:wrap!important}.lsb{width:100%}}   /* v0.21.0: the Ledger's filters wrap on a phone instead of widening the page */
@media (hover:none),(max-width:760px){.khint{display:none}}
.wnew{margin:4px 0 0;padding-left:18px;color:var(--text-secondary);font-size:13px;line-height:20px}.wnew li{margin:2px 0}   /* v0.21.0: what is new, as short points */
/* v0.21.1: the entry in a sentence, warnings before saving, the row just saved */
.esay{margin-top:10px;font-size:13px;color:var(--text-secondary);min-height:18px}.esay b{color:var(--text-primary);font-weight:600}
.ewarn{margin-top:8px}.ewarn .warnt{display:flex;gap:6px;align-items:flex-start;font-size:13px;margin-top:4px}.ewarn .warnt svg{flex:none;margin-top:2px;width:14px;height:14px}
@keyframes lflash{from{background:color-mix(in srgb,var(--accent) 22%,transparent)}to{background:transparent}}tr.erow.flash td{animation:lflash 3.5s ease-out}
.erecent{margin-top:4px;line-height:1.7}
/* v0.21.4: the entry panel docked beside the Ledger (wide screens): no dimming, the list stays usable, quieter columns */
.slide.docked{box-shadow:-1px 0 0 var(--border),var(--sh-dock);z-index:15}
/* v0.31.3 (H3): the panel opens over the Ledger with a light backdrop; the table keeps its width and stays clickable */
.dim.lite{background:color-mix(in srgb,var(--overlay) 55%,transparent);pointer-events:none;z-index:14}
body.docked tr.erow.sel td{background:color-mix(in srgb,var(--accent) 12%,transparent)}body.docked tr.erow.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* v0.21.5: templates in the entry panel */
.etpl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}.etpl:empty{display:none}.tchip{display:inline-flex;align-items:center}.tchip .chip{height:28px}.tchip.due .chip{border-color:var(--warn)}
/* v0.22.0: one search in the top bar, and the window for any instrument */
.gs{position:relative;display:flex;align-items:center;width:340px;max-width:34vw;height:36px;margin-right:var(--s2)}
.gs input{width:100%;height:36px;padding:0 64px 0 34px;border-radius:var(--r-ctl)}
.gs .gsi{position:absolute;left:10px;top:10px;color:var(--text-muted);pointer-events:none;display:flex}
.gs kbd{position:absolute;right:8px;top:8px;font:500 11px/18px var(--font,inherit);color:var(--text-muted);border:1px solid var(--border);border-radius:4px;padding:0 5px;pointer-events:none}
.gs input:focus+kbd{display:none}
.gsl{position:absolute;top:42px;left:0;width:min(520px,92vw);max-height:420px;overflow:auto;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card,8px);box-shadow:var(--elev);z-index:30;padding:4px}
.gsh{font-size:12px;color:var(--text-muted);padding:6px 10px 2px}
.gse{font-size:13px;color:var(--text-secondary);padding:12px}
.gsr{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px 4px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.gsr .gsn{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;max-width:none}          /* v0.50.2 (UI/UX V6): a fund's name uses the row's room */
.gsr .grow{text-align:right;white-space:nowrap;flex:0 0 auto}
.gsr.sel,.gsr:hover{background:var(--surface-2)}
.gsr button.sm{min-height:32px;height:32px}
button.fon,button.fon svg{color:var(--warn)}button.fon svg path{fill:currentColor}
.xret td,.xret th{text-align:right}.xret .l{text-align:left}.xret tr.on td{background:var(--surface-2)}.xret tr.on td.l{font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.xcmp{display:grid;gap:6px}.xcr{display:grid;grid-template-columns:140px 1fr 72px;align-items:center;gap:var(--s3);font-size:14px}.xcr>:last-child{text-align:right}
.xcr.me span:first-child{font-weight:600}.xcb{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}.xcb i{display:block;height:100%}.xcb i.g{background:var(--gain)}.xcb i.l{background:var(--loss)}
@media (max-width:1100px){.gs kbd{display:none}.gs input{padding-right:10px}}
.gs .gsb{display:none}
@media (max-width:760px){.gs{width:auto;max-width:none;margin:0}.gs input,.gs .gsi,.gs kbd{display:none}.gs .gsb{display:inline-flex}
  .gs.open{position:absolute;left:8px;right:8px;top:10px;z-index:31;height:36px}.gs.open input,.gs.open .gsi{display:block}.gs.open .gsi{display:flex}.gs.open .gsb{display:none}.gs.open input{padding:0 10px 0 34px;font-size:16px}
  .gs.open .gsl{width:100%}.gsr .gsn{max-width:120px}.gsr .grow{display:none}}
/* v0.50.0 (Cila 4 C31): on the Ledger below 1100 px the search folds into its button, so Export, Import and Plans leave room for Add */
@media (max-width:1099px){header.top:has(.ltools) .gs{width:auto;max-width:none;margin:0;min-width:0;flex:0 0 auto}header.top:has(.ltools) .gs:not(.open) input,header.top:has(.ltools) .gs:not(.open) .gsi,header.top:has(.ltools) .gs kbd{display:none}
  header.top:has(.ltools) .gs:not(.open) .gsb{display:inline-flex}header.top:has(.ltools) .gs.open{position:absolute;left:8px;right:8px;top:10px;z-index:31;height:36px}header.top:has(.ltools) .gs.open .gsb{display:none}header.top:has(.ltools) .gs.open .gsl{width:100%}}
/* v0.22.1: the Explore page */
.xtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:760px){.xtiles{grid-template-columns:repeat(2,1fr);gap:var(--s2)}}
.xtile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:116px;padding:var(--s3) var(--s4);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card,8px);color:var(--text-primary);font:inherit;height:auto}
button.xtile{cursor:pointer}button.xtile:hover{background:var(--surface-2)}
.xtile .xtv{font-size:20px;line-height:28px;font-weight:600;font-variant-numeric:tabular-nums}.xtile .xtv.cap{font-size:13px;font-weight:400}
.xtile .xts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:20px}.xtile .spark{margin-top:auto}
.xfav td,.xfav th{text-align:right;white-space:nowrap}.xfav .l{text-align:left}.xfav tbody tr{cursor:pointer}.xfav tbody tr:hover{background:var(--surface-2)}
.xfav .xn{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.xfav td.act{width:72px}.xfav td.act button{margin-left:2px}.xfav td.act button.fon{opacity:1}
.xmovers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}.xmovers>div{min-width:0}.xmv>:last-child{flex-shrink:0;white-space:nowrap}
@media (max-width:760px){.xmovers{grid-template-columns:1fr}.xfav .xn{display:none}.xtile{padding:var(--s3)}.xtile .xtv{font-size:17px;line-height:24px}}
.xtile .xtv{white-space:nowrap}
.xmv{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 6px;background:none;border:0;border-radius:6px;color:var(--text-primary);font:inherit;font-size:14px;text-align:left;cursor:pointer;height:auto}
.xmv:hover{background:var(--surface-2)}.xmv .xn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;text-align:left}
.xal{list-style:none;margin:0;padding:0}.xal li{display:flex;align-items:center;gap:8px;min-height:36px;border-bottom:1px solid var(--border)}
/* v0.22.2: Compare and its tray */
.xfav td.act{width:104px}
.ctray{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:25;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:min(900px,calc(100vw - 32px));padding:8px 12px;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--elev)}
.ctc{display:inline-flex;align-items:center;gap:4px;padding-right:2px}.ctc button.sm{min-height:24px;height:24px;min-width:24px}
.cadd{position:relative}.cadd input{height:28px;width:220px;font-size:13px}.cadd .gsl{top:32px}
@media (max-width:760px){.ctray{left:72px;right:8px;transform:none;bottom:8px}.cadd input{width:170px}}
.xret .xn{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}@media (max-width:760px){.xret .xn{display:none}}
/* v0.22.3: Lists */
.lsort{font:inherit;font-size:12px;color:inherit;white-space:nowrap}.lsort.on{color:var(--text-primary);font-weight:600}
.lst .xn{max-width:260px}.lst td.act{width:76px}.lst tr:focus td.act button,.lst tr:focus-within td.act button{opacity:1}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* v0.22.5: favorites in your own order */
.xfav .xgrip{cursor:grab;margin:0 2px 0 -6px;color:var(--text-muted);opacity:.6}.xfav tr:hover .xgrip,.xfav .xgrip:focus-visible{opacity:1}
.xfav tr.drag{opacity:.45}.xfav tr.dover td{box-shadow:inset 0 2px 0 var(--text-primary)}
@media (max-width:599px){.fgrid .kpis>.c3{grid-column:span 12!important}.fchart{overflow-x:auto}.fchart>svg{min-width:560px}}   /* v0.23.2: FIRE at phone width */
/* v0.23.6 (Cila 1): phone shell basics at 390. The title takes its own row; currency, privacy, bell, refresh and a + button share the
   second; a 16 px gutter; the sync panel floats beside the narrow sidebar. The full phone design stays with the native app. */
@media (max-width:1100px){.syncst{position:fixed;left:auto;right:16px;bottom:16px;width:240px;margin:0;z-index:20;box-shadow:var(--sh-pop)}}   /* v0.29.2 (Cila 2 M4): bottom right, off the table rows */
@media (max-width:760px){
  header.top{height:auto;flex-wrap:wrap;row-gap:var(--s2);padding:var(--s2) var(--s4)}header.top h1{flex:1 1 100%;font-size:20px;line-height:28px}
  #tools{flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-end;gap:var(--s2)}#tools .atx{display:none}#tools .pri,#tools .sec{padding:0 10px}
  main{padding:var(--s4)}aside{width:52px;padding:var(--s3) 4px}.syncst{left:60px;right:12px;width:auto}
  .chips,.htabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.chips>*,.htabs>*{flex:none}
  .chips,.seg,.sp:has(>.chips){max-width:100%;min-width:0}.seg{overflow-x:auto;scrollbar-width:none}.seg button{flex:none}
  .mgrid{grid-template-columns:repeat(2,1fr)}.jstrip{margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s4);padding:var(--s2) var(--s4)}
}
/* v0.23.9: one quieter switch everywhere (the span.switch and input.sw forms look the same): 36 by 20, a thin track when off, the
   light track of the total line when on, a small knob that slides. The label beside it stays part of the click target. */
.switch{width:36px;height:20px}.switch i,input.sw{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
input.sw{width:36px;height:20px;min-width:36px}
.switch i:after,input.sw:before{top:3px;left:3px;width:14px;height:14px;background:var(--text-muted);box-shadow:var(--sh-knob);transition:transform var(--t),background var(--t),width var(--t)}
.switch input:checked+i,input.sw:checked{background:var(--c-total);box-shadow:none}
.switch input:checked+i:after,input.sw:checked:before{transform:translateX(16px);background:var(--bg-base)}
.switch input:active+i:after,input.sw:active:before{width:17px}.switch input:checked:active+i:after,input.sw:checked:active:before{transform:translateX(13px)}
.switch:hover i,input.sw:hover{box-shadow:inset 0 0 0 1px var(--text-muted)}.switch:hover input:checked+i,input.sw:checked:hover{box-shadow:none;filter:brightness(1.08)}
input.sw:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface-2);cursor:pointer;min-height:40px}
.swrow .swt{display:grid;gap:2px}.swrow .swt b{font-weight:500}.swrow:hover{border-color:var(--text-muted)}
.dzone h2.lbl{color:var(--loss)}
/* v0.23.5 (Cila 1): from the Dividends, Add transaction and Goals pass */
.infop{z-index:90}.lbl .n{color:var(--text-muted);font-weight:400}.seg button{white-space:nowrap}
@media (max-width:760px){.slide.entry footer{flex-wrap:nowrap}.slide.entry footer .grow{display:none}.slide.entry footer button.ic{flex:none}.chart text.modd,.chart text.mamt{display:none}}
/* v0.23.5 (Cila 1): Dashboard two columns down to 900 px, the chart view as a select on a phone, Holdings columns at 1024 */
@media (min-width:900px) and (max-width:1279px){.row12.dash>.c8{grid-column:span 7!important}.row12.dash>.c4{grid-column:span 5!important}}
.row12>.stack.fill{align-self:stretch}.row12>.stack.fill>.card:last-child{flex:1 1 auto}
.nwvs{display:none}@media (max-width:760px){#nwv{display:none}.nwvs{display:block}}
@media (max-width:1099px){table.hold .c90{display:none}}
@media (min-width:761px) and (max-width:1100px){.hsum.five{grid-template-columns:repeat(6,minmax(0,1fr))}.hsum.five>.card{grid-column:span 2}.hsum.five>.card:nth-child(n+4){grid-column:span 3}}
table.hold .wbar{position:static;height:6px;border-radius:3px}
label.f .infob,span.f .infob,th .infob,summary .infob{width:24px;height:24px;min-width:24px;min-height:24px;margin:-6px 0 -6px 2px;vertical-align:middle}
.lbl .n,summary .n,.slide .shd .n{color:var(--text-muted);font-weight:400}
/* v0.24.0: privacy mode hides each amount behind four dots that slide in (blur could still be read on large figures). The figure
   keeps its place, so nothing jumps; it is transparent and cannot be selected or copied. */
.money{transition:color .25s}
.priv .money{position:relative;display:inline-block;color:transparent!important;user-select:none;white-space:nowrap}
.priv .money *{color:transparent!important;background:transparent!important;border-color:transparent!important}
.priv .money svg{visibility:hidden}.priv .sgn{display:none}          /* v0.51.0 (V8): the ▲ ▼ go with the amount; the percent under it keeps its colour */
.priv .money::after{content:"\2022\2022\2022\2022";position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;color:var(--text-secondary);letter-spacing:.12em;overflow:visible;white-space:nowrap;animation:privin .3s cubic-bezier(.2,.8,.2,1) both}
.priv td:not(.l) .money::after{justify-content:flex-end}
.priv .hero.money::after,.priv .v24.money::after{color:var(--text-primary)}
.priv .money .money::after{content:none}
@keyframes privin{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.priv .money::after{animation:none}.money{transition:none}}
/* v0.24.0: Liquid assets and This month list their parts one per row; the Your return ⓘ opens with its date range */
dl.kvl{margin:0;display:grid;gap:2px}dl.kvl>div{display:flex;justify-content:space-between;gap:var(--s3);font-size:13px;line-height:20px}
dl.kvl dt{color:var(--text-secondary)}dl.kvl dd{margin:0;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.infop p.ihd{color:var(--text-primary);font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
/* v0.24.5: Net worth's change table: the range (or Today) with its amount under it, then the two currencies' pills in columns */
.chgg{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 6px;align-items:center;font-size:13px}.chgg>.chh{font-size:12px;text-align:center;line-height:12px}.chgg>.chh:first-child{white-space:nowrap;text-align:left}          /* v0.50.0 (Cila 4 C33): "Değer değişimi" on one line */
.chgg .chl{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0}.chgg .chl b{font-size:13px;line-height:17px}.chgg .chl .money{white-space:nowrap}
.chgg .pill{justify-content:center;min-width:64px}
.priv svg text.money{opacity:0}
/* v0.24.4: the Dividends chart filters the tabs below */
#incsvg .ihit,#incsvg .iseg{cursor:pointer}#incsvg .iseg,#incsvg .iwh{transition:opacity .15s}
#incsvg [tabindex]:focus{outline:none}#incsvg [tabindex]:focus-visible{outline:2px solid var(--text-primary);outline-offset:1px}
.gse .chips{flex-wrap:wrap!important}      /* v0.24.1: the market choices for an unknown code wrap in the search list */
button.att{width:100%;height:auto;text-align:left;align-items:flex-start;justify-content:flex-start;border:0;border-left:3px solid var(--text-muted);font:inherit;cursor:pointer}button.att.action{border-left-color:var(--loss-text)}button.att.warn{border-left-color:var(--warn)}      /* v0.24.5: Needs attention rows are buttons that open what they are about */
/* v0.24.8: FIRE Assumptions header shows its values and an Edit cue, so it reads as openable */
details.fgrp>summary.fsum{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--s2);list-style:none;min-height:40px;padding:var(--s2) var(--s3);margin:0 calc(-1*var(--s3));border-radius:var(--r-ctl);transition:background var(--t)}
.fsum::-webkit-details-marker{display:none}.fsum .lbl{margin:0}
.fsum .fsumv{flex:1 1 auto;min-width:0;order:3;flex-basis:100%}
@media (min-width:600px){.fsum .fsumv{order:0;flex-basis:auto}}
.fsum .fedit{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:12px;line-height:16px;color:var(--text-secondary)}
.fsum .fchev{flex:none;color:var(--text-secondary);transform:rotate(-90deg);transition:transform var(--t)}
details[open]>.fsum .fchev{transform:none}details[open]>.fsum .fsumv,details[open]>.fsum .fedit{display:none}
.fsum:hover{background:var(--row-hover)}.fsum:hover .fedit,.fsum:focus-visible .fedit,.fsum:hover .fchev{color:var(--text-primary)}
.fsum:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px}
/* v0.24.9: date field, a text box with the calendar button inside its right edge */
.dfield{position:relative;display:block}
.dfield>input{padding-right:40px}
.dfield>.dpick{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.dmsg{color:var(--loss-text,var(--loss));font-size:12px;line-height:16px;margin-top:4px}
.slide.entry .dfield>.dpick{min-width:40px;min-height:40px;width:40px;height:40px}
.slide.entry .dfield>input{padding-right:46px}
/* v0.24.6: Retirement window, answers first, plan as editable lines */
.pans .hero{font-size:32px;line-height:40px}
.psteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.psteps>div{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface-2);min-width:0}
.psteps>div.on{border-color:var(--c-retire)}.psteps>div.on b{color:var(--c-retire-text,var(--c-retire))}
.prow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s2);margin:0 calc(-1 * var(--s2));border-bottom:1px solid var(--border);cursor:pointer;border-radius:var(--r-ctl)}
.prow:hover{background:var(--surface-2)}.prow .grow{min-width:0}
.pedit{padding:var(--s3);margin:var(--s2) 0;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface-2)}
.pfund{border:1px solid var(--border);border-radius:var(--r-ctl);padding:var(--s3);margin-top:var(--s2)}
.pfold>summary{cursor:pointer;color:var(--text-secondary);padding:4px 0}
/* v0.26.5: Explore Sectors tab tiles; v0.26.3 calendar rows */
.xsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:4px}
.xst{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;min-height:44px;height:auto;border:0;border-radius:6px;background:var(--surface-2);color:var(--text-primary);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.xst:hover{outline:1px solid var(--text-muted)}
.xst .cap{font-size:12px;color:var(--text-primary)}
.xst.held{box-shadow:inset 0 0 0 2px var(--text-secondary)}
.xcal td{vertical-align:top}
/* v0.27.1: on a phone the Holdings summary figures (a seven-digit P&L) no longer run out of their cards */
@media (max-width:480px){.hsum .card{min-width:0}.hsum .v24{font-size:20px;line-height:26px;overflow-wrap:anywhere}}

/* v0.27.6: disclaimers shown on the page beside a result, never only behind ⓘ; and printing a review */
.disc{border:1px solid var(--warn);border-radius:var(--r2);padding:8px 12px;color:var(--text-primary);background:var(--surface-1)}
.disc span{color:var(--text-secondary)}
@media print{aside,header.top,#banner,.noprint,.infob{display:none!important}.col{margin:0!important;padding:0!important}.card{break-inside:avoid;box-shadow:none}}
.xbar{display:flex;height:14px;border-radius:var(--r2);overflow:hidden;background:var(--surface-2);margin-top:8px}.xbar i{display:block;height:100%}

/* v0.29.1 (Cila 2 H1): a password box with its eye button inside the right edge */
.pwf{position:relative}.pwf input{width:100%;padding-right:40px}.pwf [data-pweye]{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
/* v0.29.2 (Cila 2 M3): the Holdings tabs stay on one row and scroll inside it when the window is narrow */
.htabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.htabs>*{flex:none}
/* v0.29.2 (Cila 2 M4): on a 1024 px window the Dashboard's chart takes the full width and the cards under it share two balanced
   columns, so neither column ends far below the other */
@media (min-width:761px) and (max-width:1100px){
  .row12.dash{display:block;columns:2;column-gap:var(--s4)}
  .row12.dash>.stack{display:contents}
  .row12.dash>.stack>.card{break-inside:avoid;margin:0 0 var(--s4);display:block;width:100%}
  .row12.dash>.stack:first-child>.card:first-child{column-span:all}
}
/* v0.29.2: below 1200 px the page's own buttons in the top bar show their icon only */
@media (max-width:1199px){#tpage .cl{display:none}}
@media (min-width:761px){#tools{flex-wrap:nowrap;min-width:0}.gs{flex:0 1 340px;min-width:160px;width:auto}header.top h1{white-space:nowrap}}
header.top button{white-space:nowrap}.lbl a.ttl{gap:6px}
/* v0.29.2 (Cila 2 M4): Dividends' top cards two per row on a 1024 px window, not one */
@media (min-width:761px) and (max-width:1279px){.row12.dtop>.c3{grid-column:span 6!important}}
#itabc{min-width:0;max-width:100%}#itabc .tw{max-width:100%}
.tw{position:relative}   /* v0.29.2 (Cila 2 M4): bars inside a scrolling table stay inside it, so the page never scrolls sideways */
.row12.eq,.row12.dtop{align-items:stretch}   /* v0.29.2 (Cila 2 L3): cards side by side share one height */
details.rmenu{display:inline-block;vertical-align:middle}
/* v0.29.3 (Cila 2 M13): the FIRE inputs fade at the bottom while there is more to scroll */
@media (min-width:900px){.fgrid>.card:first-child::after{content:"";position:sticky;bottom:-20px;display:block;height:28px;margin:0 -20px -20px;background:linear-gradient(transparent,var(--surface-1));pointer-events:none}}
.lbl .cap,.lbl .dt{text-transform:none;letter-spacing:normal;font-weight:400}   /* v0.29.4 (Cila 2 L1): dates beside a label in normal case */
/* v0.29.4 (Cila 2 L13): a window opened with the mouse does not ring its ×; a key press brings the ring back */
body[data-mouse] .slide [data-x]:focus-visible{outline:none}

/* v0.31.0 (Settings re-check R32): a label's colour and symbol as swatches */
.lsw>summary{height:32px;padding:0 6px;gap:4px}.lsw-p{left:0;right:auto;min-width:0;width:322px;padding:10px;gap:4px}
.lsw-r{display:flex;flex-wrap:wrap;gap:6px}
.lsw-p .lsw-c{width:24px;height:24px;min-height:0;padding:0;border-radius:50%;border:2px solid transparent;background:var(--lc);cursor:pointer}
.lsw-p .lsw-c.on{border-color:var(--text-primary)}.lsw-c:focus-visible,.lsw-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lsw-p .lsw-i{width:32px;height:32px;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r2);background:transparent;color:var(--text-secondary);cursor:pointer}
.lsw-p .lsw-i.on{border-color:var(--text-primary);color:var(--text-primary);background:var(--surface-2)}
details.fold>summary{list-style:none;cursor:pointer;justify-content:flex-start;gap:6px}details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary>svg{transition:transform var(--t)}details.fold[open]>summary>svg{transform:rotate(90deg)}
.form[hidden]{display:none}          /* v0.31.0 (R24): Tax year's form stays shut until Add a year or Edit */

/* v0.31.1 (Dashboard F1, F6): the Debts and Goals cards; Customize with areas, sketches, Move to and drag handles */
.card[hidden]{display:none!important}.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.gol .gbar{margin-top:4px}
.dsk{flex:none;display:block}.xahd{align-items:center}.xazone{min-height:12px}.xaempty{padding:8px 0;border-bottom:1px solid var(--border)}
.xadrag{cursor:grab;color:var(--text-muted);display:inline-flex;padding:0 2px}.xarow.dragging{opacity:.45}.xarow.dropat,.xazone.dropat>.xaempty{box-shadow:inset 0 2px 0 var(--accent)}
.xamv{width:auto;height:28px;font-size:12px;padding:0 6px;max-width:128px}
/* v0.31.1 (Dashboard F7): shorter rows in Recent activity and the change split, toward the page-height target */
table.recent td,table.wchg td{height:32px}table.recent td{padding-top:4px;padding-bottom:4px}
/* v0.31.1 (Dashboard 9): the account row at the foot of the sidebar */
.sfoot .acct{display:flex;gap:var(--s2);align-items:flex-start;color:inherit;text-decoration:none;border-radius:var(--r-ctl);padding:4px;margin:-4px}.sfoot .acct:hover{background:var(--row-hover)}
.sfoot .ini{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--text-primary);font-size:11px;font-weight:600;letter-spacing:.02em}
.sfoot .acx{display:grid;min-width:0;gap:1px}.sfoot .acx b{color:var(--text-secondary);font-weight:500}.sfoot .acx>div{display:block}
@media (max-width:1100px){.sfoot .acct{justify-content:center;margin:0}.sfoot .acx{display:none}}
/* v0.31.2 (Holdings): two summary cards with a split bar (G3), the More menu (G1), no sideways scroll at 1024 and 1280 (G4), the account row's summary line in the window (G7) */
.hsum.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hsum.two>.card{grid-column:auto!important}
.trc .tbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-2);margin-top:var(--s2);gap:2px}.trc .tbar i{display:block;height:100%}
.trc .tleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;color:var(--text-secondary)}
.hmore{position:relative}.hmore>summary{list-style:none;cursor:pointer}.hmore>summary::-webkit-details-marker{display:none}.hmore .amenu-p{min-width:180px}
table.hold .ldots{min-width:24px;justify-content:center}
@media (max-width:1280px){table.hold td,table.hold th{padding-left:6px;padding-right:6px}table.hold td:first-child .tkb{max-width:150px!important}table.hold .aat{display:none}table.hold td.ind{padding-left:24px!important}}
@media (max-width:1100px){table.hold .wbar{display:none}table.hold td{font-size:13px}table.hold .plp{font-size:12px}}
@media (max-width:1100px) and (min-width:761px){table.hold th,table.hold td{padding-left:3px;padding-right:3px}}          /* v0.50.2 (UI/UX V1): Total fits at 960 px */
@media (max-width:1100px){.sfoot a.t{display:none}}
@media (max-width:1100px){table.hold td:first-child .tkb{max-width:116px!important}table.hold td:first-child>.cap{max-width:110px}table.hold input[data-bal]{width:104px!important}}
.hsline{font-size:13px;color:var(--text-secondary);margin-top:4px}.hsline b{color:var(--text-primary);font-weight:600}
.hmore>summary{gap:4px}

/* v0.31.3 Ledger overhaul */
@media (min-width:1024px){.tw.lw{overflow:visible}.tw.lw thead th{top:56px;z-index:3}}   /* H1: the header sticks under the top bar */
.lbar{flex-wrap:nowrap;gap:8px;align-items:center}.lbar .lsb{width:280px}.lbar .lsb>svg{flex:none;color:var(--text-muted)}
.lbar .chip{white-space:nowrap}.lbar>.chips{flex-wrap:nowrap}
@media (max-width:1439px){.lbar{flex-wrap:wrap;row-gap:8px}.lbar .grow{display:none}.lbar .lsb{flex:1 0 100%;width:auto}}
.lmon{flex-wrap:nowrap}.lmon>.cap{font-weight:400;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lsum{white-space:normal}.ltools{flex-wrap:nowrap}.ltools .tgw{position:relative}
@media (max-width:1599px){.ltools .lfull{display:none}}@media (min-width:1600px){.ltools .lshort{display:none}}.ltools .tmenu{right:0;left:auto;min-width:160px}
.badge.anote{cursor:help;color:var(--text-muted)}      /* v0.44.4 (Cila 3 L4): 4.5:1 or more in both themes */
.idrop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:88px;padding:16px;border:1.5px dashed var(--border);border-radius:var(--r-ctl);background:var(--surface-2);cursor:pointer;text-align:center}
.idrop:hover,.idrop:focus-visible,.idrop.over{border-color:var(--accent)}.idrop u{color:var(--accent)}
.tw.iwrap td,.tw.iwrap th{white-space:normal;height:auto;padding-top:6px;padding-bottom:6px}
/* v0.31.4 Dividends overhaul */
.nextc .tw table{max-width:520px}   /* W6: ticker and amount stay close when the card is full width */
#itabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sfoot .acct{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--border);border-radius:0 0 var(--r-ctl) var(--r-ctl);align-items:center}   /* v0.31.5 (O11) */

/* v0.31.7 Review: the bridge, the what-if widths, the % inside the size box, total rows */
.brow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 12px}.brg{display:flex;flex-direction:column;gap:2px}.brow .op{color:var(--text-muted);font-size:18px;line-height:24px}
@media (min-width:1280px){.rcur>.c5{grid-column:span 5!important}.rcur>.c7{grid-column:span 7!important}}
.insfx{position:relative;display:inline-block}.insfx input{padding-right:22px}.insfx i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--text-muted);pointer-events:none}
.rcur td.nw{white-space:nowrap}table.hold tfoot tr.tot td{border-top:1px solid var(--border);font-weight:600}
/* v0.31.8 Benchmark: hero bars stay near their labels; the goal chart's legend */
.ahd{max-width:360px}
.insfx.full{display:block}.insfx.full input{width:100%}
/* v0.31.10 Add transaction: the summary bar above the buttons, the close chip in the Price box, chips for Recent, Start from and selling part */
.esum{position:sticky;bottom:calc(-1 * var(--s5));margin:var(--s3) calc(-1 * var(--s5)) calc(-1 * var(--s5));padding:10px var(--s5);background:var(--surface-2);border-top:1px solid var(--border);z-index:3}
.esum .esay{margin-top:0;min-height:0}.esum .ewarn:empty,.esum #resbox:empty{display:none}
.efig{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:6px}.efig b{font-size:13px}
.pbox .pchip{position:absolute;right:26px;top:50%;transform:translateY(-50%);height:24px;padding:0 8px;border-radius:99px;border:1px solid var(--border);background:var(--surface-3);color:var(--text-secondary);font-size:12px;white-space:nowrap;cursor:pointer}
.pbox .pchip:hover,.pbox .pchip:focus-visible{color:var(--text-primary)}.pbox.hasc input{padding-right:190px}
.erecent{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none}.rchip{font-size:12px;min-height:26px;padding:0 8px;white-space:nowrap}
.estart .chips{flex-wrap:wrap;gap:6px;margin-top:4px}.sellq{gap:6px;margin-top:6px}.sellq .chip{min-height:26px;font-size:12px}
.pbox .pchip[hidden]{display:none}
/* v0.31.12 Asset and group windows */
.kv4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s4)}
.kv4 .klab,.kv .klab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:24px;display:flex;align-items:center;gap:2px}
.kv4 .kval,.kv .kval{font-size:18px;line-height:24px}
.nw{white-space:nowrap}.kval .gain,.kval .loss{white-space:nowrap}
.kv4 .kval{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:2px;min-width:0}
.plsrc{border:1px solid var(--border);border-radius:8px;padding:var(--s3);background:var(--surface-2);max-width:520px}
.plsrow{display:flex;justify-content:space-between;gap:var(--s3);padding:3px 0;font-size:14px}.plsrow b{font-weight:600;white-space:nowrap}
.plsrow.tot{border-top:1px solid var(--border);margin-top:4px;padding-top:6px}
.whyl{display:flex;align-items:baseline;gap:6px;min-width:0;border-top:1px solid var(--border);padding-top:var(--s3)}.whyl .wtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.svd{font-weight:400;margin-left:6px;color:var(--gain)}
.slide .shd .tnm{font-weight:400}
.wback{display:block;margin:0 0 2px;padding:0;height:auto;min-height:0;text-align:left}
.mview .tw.atx{overflow:visible}.mview .tw.atx thead th{top:calc(-1 * var(--s5));z-index:2}
.stabs button.on .n{color:var(--text-secondary)}
#pchart .chart,#gchart .chart,#xch .chart{max-height:300px}
@media (max-width:760px){.kv4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v0.31.13: the split form waits behind one line in an asset window; FIRE's two- and three-box rows keep each label on one line */
details.axadd>summary{cursor:pointer;color:var(--text-secondary)}details.axadd>summary:hover{color:var(--text-primary)}
.form.nowl label.f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v0.31.13 (Onur, option B): the status dot on the account initials */
.sfoot .ini{position:relative}.sfoot .sdot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface-1);background:var(--gain)}
.sfoot .sdot.late{background:var(--warn)}.sfoot .sdot.bad{background:var(--loss)}

/* v0.31.16: measuring a period on a chart */
.pkg .pkl{stroke:var(--accent);stroke-width:1.5}.pkg .pkb{fill:var(--accent);fill-opacity:.10}
.cpick{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.wccy{display:inline-flex;margin-left:var(--s3);vertical-align:middle}.wccy .seg button{padding:2px 10px;font-size:12px}
.fbuy{display:grid;gap:6px;padding:var(--s2) 0;border-bottom:1px solid var(--border)}.fbuy:last-child{border-bottom:0}
.fbr{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.fbr input,.fbr select{flex:1 1 90px;min-width:0}.fbr input[data-b=name]{flex:2 1 140px}.fbr .ghost.ic{flex:0 0 auto}
.fbf{display:grid;gap:2px;flex:1 1 100px;min-width:0}.fbf.w2{flex:2 1 150px}.fbf.w0{flex:0 1 84px}.fbf input,.fbf select{width:100%}.fbsell{gap:6px;align-self:end;padding-bottom:8px;white-space:nowrap}
.fbr input[type=checkbox]{flex:0 0 auto}
/* v0.32.1 (audit M4, L3): the top bar never runs past the window. The Ledger's own buttons take room, so Open an account
   keeps only its icon there below 1440 px, and everywhere below 1100 px; the search box shrinks first and drops its Ctrl K hint */
@media (max-width:1439px){header.top:has(.ltools) #tools [data-openacct] .atx{display:none}header.top:has(.ltools) #tools [data-openacct]{padding:0 10px}}
@media (max-width:1099px) and (min-width:761px){#tools [data-openacct] .atx{display:none}#tools [data-openacct]{padding:0 10px}.gs{min-width:120px}}
@media (max-width:1599px) and (min-width:761px){.gs kbd{display:none}.gs input{padding-right:10px}}
/* v0.32.3 (Part B): the brand is the way home; v0.32.2 (audit L9): a skip link, shown only when it has keyboard focus */
a.brand{display:block;color:var(--text-primary);text-decoration:none;border-radius:var(--r-ctl)}a.brand:focus{outline:none}a.brand:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.skip{position:fixed;left:8px;top:-48px;z-index:100;background:var(--surface-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-ctl);padding:8px 12px;text-decoration:none}.skip:focus{top:8px}
main#view:focus{outline:none}
.alink{display:inline-block;min-height:24px;line-height:24px;vertical-align:middle}   /* v0.32.2 (audit L9): a target at least 24 px tall */
.priv .money{min-width:3.4em}
.priv input[data-bal]:not(:focus){color:transparent}          /* v0.47.20 (beta test H6): a balance typed in place hides too until you click into it */       /* v0.32.2 (audit L7): the four dots fit inside the hidden amount, so they never run past a card's edge */
/* v0.34.0 (Customize C2-C4): a ⋯ menu at the right end of each Dashboard card's header; the title truncates first */
.dkh{position:relative;min-width:0;gap:6px}.dkh>.dkm{flex:none;margin:-6px -8px -6px auto;opacity:0;transition:opacity .12s}
.dkc:hover .dkm,.dkc:focus-within .dkm,.dkm[aria-expanded="true"]{opacity:1}
@media (hover:none){.dkh>.dkm{opacity:1}}
.dkh>a.ttl,.dkh>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkmenu{top:calc(100% + 2px);font-size:14px;line-height:20px;text-transform:none;letter-spacing:0;font-weight:400}.dksep{height:1px;background:var(--border);margin:4px 0}
.dkend{display:flex;justify-content:center;margin-top:var(--s5)}
/* v0.34.1 (currency pair P2): the switch shows your two currencies with a ▾ that opens "Your two currencies" */
.ccyw{position:relative;display:inline-flex;align-items:center;gap:2px}
.ccypop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:360px;max-width:calc(100vw - 32px);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px 12px;box-shadow:var(--sh-menu)}
.xasep{border:0;border-top:1px solid var(--border);margin:var(--s5) 0}

/* v0.35.1: the Panel mark beside the name; the mark alone when the sidebar is narrow */
a.brand{display:flex;align-items:center;gap:10px}.bmark{width:24px;height:24px;flex:none;display:block;content:var(--logo)}          /* v0.49.0: Leaf shows the green logo */
.sarr{color:var(--text-muted)}          /* v0.49.0: the ↕ on a column that can be sorted, readable (it was 35% see-through) */
@media (max-width:1100px){a.brand{justify-content:center;padding-left:0;padding-right:0}}

/* v0.35.7: flags drawn as pictures (start.js FLAG_SVG): text size beside a name, larger on the welcome page */
.flag{display:inline-block;width:1.4em;height:.93em;vertical-align:-.1em;border-radius:2px;outline:1px solid var(--flag-edge);outline-offset:-1px;overflow:hidden}.flag.fg{display:inline-flex;align-items:center;justify-content:center;outline:0;color:var(--text-secondary)}.flag.fg svg{width:100%;height:100%}
.flagbig{display:inline-flex;font-size:28px;line-height:1}.flagbig .flag{width:42px;height:28px;border-radius:3px}
/* v0.35.7: the top bar's Add transaction with its ▾ menu, and refresh beside the price time in the sidebar footer */
.splitb{display:inline-flex}.splitb>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.splitb .splitc{border-top-left-radius:0;border-bottom-left-radius:0;padding:0 10px;margin-left:1px;min-width:0}
.addpop{position:fixed;z-index:60;min-width:260px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card,10px);box-shadow:var(--sh-menu);padding:6px;display:grid;gap:2px}
.addpop button{display:flex;width:100%;justify-content:flex-start;gap:10px;align-items:flex-start;text-align:left;background:none;border:0;border-radius:var(--r-ctl);padding:8px 10px;color:var(--text-primary);cursor:pointer;height:auto}
.addpop button:hover,.addpop button:focus-visible{background:var(--row-hover)}.addpop button>span{display:grid;gap:1px;justify-items:start}.addpop b{font-weight:500}
#sfoot{position:relative}.sfoot .acct{padding-right:34px}.sfoot .frefresh{position:absolute;right:var(--s3);bottom:calc(var(--s3) + 2px);width:28px;height:28px}
@media (max-width:1100px){.sfoot .acct{padding-right:4px}.sfoot .frefresh{position:static;justify-self:center}}
/* v0.35.8: Explore → Sectors as a map: boxes sized by market value, coloured by today's change; the sector menu */
.tmap{position:relative;overflow:hidden;border-radius:var(--r2);background:var(--bg-base);user-select:none}
.tmh{position:absolute;height:18px;padding:0 6px;font-size:11px;font-weight:600;line-height:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmh span{font-weight:500;color:var(--text-secondary)}
.tmb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;margin:0;min-width:0;border:0;border-radius:0;color:var(--tm-ink);font:inherit;line-height:1.1;cursor:pointer;overflow:hidden;text-shadow:var(--tm-shade)}
.tmb b{font-weight:700}.tmb span{font-size:.62em;font-variant-numeric:tabular-nums}
.tmb:hover,.tmb:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px;z-index:2}
.tmb.held{box-shadow:var(--tm-held)}
.tmleg{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:12px}.tmleg span{padding:2px 8px;color:var(--tm-ink);text-shadow:var(--tm-shade);border-radius:3px;font-variant-numeric:tabular-nums}
.tmleg span.cap{color:var(--text-secondary);text-shadow:none}
.secpop{min-width:240px;overflow:auto}.secopt{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 10px;border-radius:var(--r-ctl);cursor:pointer}
.secopt:hover{background:var(--row-hover)}.secopt input{margin:0}
.secpop>div:first-child{display:flex;gap:6px}.secpop>div:first-child button{flex:1;justify-content:center;align-items:center;padding:6px 8px}
/* v0.37.0 (welcome-flow W2-W3): the welcome screen and the guest line in the sidebar */
.gline{padding:var(--s1) var(--s3) 0;color:var(--text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px}.gline .linkb{min-height:24px;text-decoration:underline;color:var(--text-secondary)}
.sfoot .gline{padding:0 0 var(--s2);margin-bottom:var(--s1);border-bottom:1px solid var(--border)}@media (max-width:1100px){.sfoot .gline{display:none}}
/* v0.38.0 (retirement trial, BES 3): the employer's three figures on one row, their labels the same height */
.erow3 label.f{min-height:36px;display:flex;align-items:flex-end}
@media (max-width:640px){.erow3{grid-template-columns:1fr!important}.erow3 label.f{min-height:0}}
/* v0.38.1: a US plan's yearly room */
.usbar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}.usbar>i{display:block;height:100%;background:var(--accent)}

/* v0.38.4 (entry trial E10, E22): the suggested amount received is grey until you type; the close chip sits beside the Price box; Recent wraps;
   the chosen tile's caption meets contrast */
input.sugg{color:var(--text-muted)}
.pricew{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pricew>.pbox{flex:1 1 120px;min-width:120px}.pricew>.pchip{position:static;transform:none;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface-3);color:var(--text-secondary);font-size:12px;white-space:nowrap;cursor:pointer}
.pricew>.pchip[hidden]{display:none}.pricew .pbox.hasc input{padding-right:22px}
.erecent{flex-wrap:wrap;overflow-x:visible}
.natile.on .cap{color:var(--text-secondary)}

/* v0.38.5 (welcome trial N1, N3, N5): the welcome on its own, two columns; step 2's chips; the setup checklist */
body.bare aside, body.bare header.top, body.bare #banner { display: none !important; }
body.bare main { margin-left: auto !important; margin-right: auto; padding-top: 0 !important; }          /* v0.53.13: centred on a wide screen (it stuck to the left) */
.welc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s8); align-items: center; max-width: 1180px; margin: 0 auto; min-height: calc(100vh - 64px); padding: var(--s8) var(--s6); }
.welc2 .wname { font-size: 22px; font-weight: 600; }
.welc2 .whead { font-size: 32px; line-height: 40px; margin: var(--s6) 0 var(--s4); font-weight: 600; }
.wprom { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.wprom li { display: flex; gap: 10px; align-items: flex-start; line-height: 22px; }
.wok { color: var(--gain, var(--c-total)); font-weight: 700; }
.wbtn { display: grid; gap: var(--s3); margin-top: var(--s6); width: min(320px, 100%); }
.wpic { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-pic); }
@media (max-width: 1023px) { .welc2 { grid-template-columns: 1fr; min-height: 0; padding: var(--s8) var(--s4); } .welc2 .wr { display: none; } }
.ownchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.ownchips button { height: 56px; justify-content: flex-start; text-align: left; }
.setupc .setupl { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s2) var(--s6); }
.setupc .setupl li { display: flex; gap: 8px; }
.setupc .setupl li .cap { display: block; }
.setupc .ok { color: var(--gain); }
/* v0.40.3: Learn Pano's bar in the sidebar */
.navlearn{display:block;margin:auto var(--s3) 0;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-ctl);font-size:12px;line-height:16px;color:var(--text-secondary);text-decoration:none}
.navlearn[hidden]{display:none}.navlearn:hover{color:var(--text-primary);background:var(--surface-2)}
.navlearn:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.navlearn .fbar{display:block;height:3px;margin:6px 0 0}.navlearn .fbar>span{display:block;height:100%;background:var(--c-total)}
@media (min-width:1101px){.navlearn:not([hidden]) + .syncst{margin-top:var(--s2)}.navlearn:not([hidden]) + .syncst[hidden] + .navbottom{margin-top:var(--s2)}}
@media (max-width:1100px){.navlearn{display:none!important}}          /* the narrow sidebar has no room; the Dashboard keeps the list */
.setupc .setupl li.done { color: var(--text-muted); }

/* v0.38.6: the sample portfolio's bar */
.samplebar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s6); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tmb.side{flex-direction:row;gap:.3em}.tmb.side span{font-size:.75em}          /* v0.38.8 (G10) */
.lsw.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}          /* v0.38.8 (G8) */
table.hold td:first-child>.cap{white-space:normal;overflow:visible;max-width:180px}@media (max-width:1100px){table.hold td:first-child>.cap{max-width:150px}}          /* v0.38.12 (Z4): the line under a name wraps instead of being cut ("expos…", "Roth IR") */
.wrapt td { white-space: normal; }          /* v0.38.13: a short read-only table that wraps rather than scrolls */
/* v0.38.14: the type of a debt as a small tag in its own colour */
.dkind{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:4px;background:color-mix(in srgb, var(--dk) 16%, transparent);color:var(--text-primary);font-size:12px;font-weight:600;white-space:nowrap}
.dkind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dk)}
#dchart .yb{cursor:pointer}#dchart .yb:focus{outline:none}#dchart .yb:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px}#dchart .yb.on text{fill:var(--text-primary);font-weight:600}
.hsum.three{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:760px){.hsum.three{grid-template-columns:1fr}}
/* v0.38.15: a BES card payment on its way to the plan, striped */
.pendrow{padding:6px 10px;border-radius:var(--r2);margin-top:6px;background:color-mix(in srgb,var(--c-retire) 12%,transparent);border:1px dashed color-mix(in srgb,var(--c-retire) 70%,transparent)}          /* v0.38.18 (C1): soft, not striped */
/* v0.38.18 (charts redesign C1): legend swatches, the key numbers above a chart, the calendar strip */
.csw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;box-sizing:border-box}.csw.ln{width:14px;height:0;border-radius:0;vertical-align:3px}
.chart .ftag{font-size:11px;letter-spacing:.06em;fill:var(--text-muted)}
.dstrip{display:flex;gap:2px;align-items:flex-end;height:18px;margin:4px 0 0 auto;width:max-content}.dstrip i{display:block;width:6px;border-radius:1px}
.lgnd{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:var(--s2)}.lgnd .lgi{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.cstats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s3) 0 var(--s2)}.cstats>div{min-width:0}.cstats .k{font-size:12px;color:var(--text-muted)}.cstats .v{font-size:18px;font-weight:600;color:var(--text-primary)}
.gchip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--border);border-radius:12px;font-size:12px;color:var(--text-secondary);white-space:nowrap}
/* v0.40.1: the Help page; v0.44.6 (Help look H1-H7): one search box, the index in balanced stacks, titles as block links, the article with a rail */
.hsearch{position:relative;max-width:760px}.hsearch .hsi{position:absolute;left:14px;top:14px;color:var(--text-muted);display:flex;pointer-events:none}
.hsearch input{height:44px;font-size:15px;padding-left:40px;background:var(--surface-2);width:100%}
.hquick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:12px;max-width:760px}.hquick .grow{flex:1}.hquick .sec svg{vertical-align:-2px}
.hcols{display:grid;grid-template-columns:repeat(var(--hc,3),minmax(0,1fr));gap:16px;align-items:start}.hcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.hsl{display:flex;align-items:center;justify-content:flex-start;gap:8px}.hcols[hidden]{display:none}.hrh{font-size:13px;font-weight:600;color:var(--text-secondary);margin:0 0 6px}.hsl svg{color:var(--text-muted);flex:none}
.hlist{list-style:none;margin:0;padding:0}
.hlist .hit{display:block;padding:7px 8px;border-radius:8px;text-decoration:none;color:inherit}.hlist a.hit:hover{background:var(--row-hover)}
.hlist .ht{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--text-primary)}
.hlist .hl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hlist .hstub .ht{color:var(--text-muted);font-weight:400}
.hres{max-width:760px}.hres .hit{display:grid;grid-template-columns:1fr auto;gap:0 12px}.hres .hit>.ht,.hres .hit>.hl{grid-column:1}
.hres .hsec{grid-column:2;grid-row:1;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:3px;white-space:nowrap}
.hart{display:grid;grid-template-columns:minmax(0,760px) 260px;gap:20px;align-items:start}
@media (max-width:1179px){.hart{grid-template-columns:minmax(0,760px)}.hrail{display:none}}
.hcrumb{font-size:13px;color:var(--text-muted)}
.hthead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:6px 0 12px}.hthead h2{font-size:24px;line-height:30px;font-weight:600;margin:0}.hthead .sec{flex:none;font-size:13px}
.hbody{font-size:15px;line-height:1.6}.hbody p{margin:12px 0}.hbody .hh{margin:18px 0 6px}.hbody ul,.hbody ol{padding-left:22px}.hbody li{margin:4px 0}
.hbody .hq{margin:12px 0;padding:8px 14px;border-left:3px solid var(--border);color:var(--text-secondary)}          /* v0.45.5 (L19) */
.harticle code{font-family:var(--mono);background:var(--surface-2);padding:0 4px;border-radius:var(--r2)}
.hfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--border);margin-top:20px;padding-top:12px}.hfoot .grow{flex:1}
.hfb{display:flex;gap:8px;align-items:center;color:var(--text-secondary)}
.hrail{position:sticky;top:76px;align-self:start;padding:12px 8px}.hrail .lbl{padding:0 8px 6px}
.hrail a{display:block;font-size:13.5px;line-height:19px;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--text-secondary)}.hrail a:hover{background:var(--row-hover)}
.hrail a.on{background:var(--surface-3);font-weight:600;color:var(--text-primary)}
.infop .hmore{margin-top:8px}
/* v0.40.2: tours (Driver.js) in Pano's colours, and the one-time cards */
.driver-popover{background:var(--surface-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow-pic)}
.driver-popover-title{font-size:15px;font-weight:600}.driver-popover-description{color:var(--text-secondary);font-size:13px}
.driver-popover-progress-text{color:var(--text-muted)}
.driver-popover-footer button{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border);text-shadow:none;border-radius:var(--r2);padding:4px 10px;font:inherit;font-size:13px}
.driver-popover-close-btn{color:var(--text-muted)}
.driver-popover-arrow-side-left{border-left-color:var(--surface-1)}.driver-popover-arrow-side-right{border-right-color:var(--surface-1)}.driver-popover-arrow-side-top{border-top-color:var(--surface-1)}.driver-popover-arrow-side-bottom{border-bottom-color:var(--surface-1)}
.hcard{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.hcb{display:flex;gap:8px}
.ipv[data-f="error"] tr[data-st]:not([data-st="error"]),.ipv[data-f="duplicate"] tr[data-st]:not([data-st="duplicate"]){display:none}          /* v0.51.10 (UI/UX P18) */
.hcard.quiet{justify-content:flex-start;gap:10px;margin:-4px 0 12px}.hcard.quiet .hcb{gap:12px}          /* v0.51.10 (UI/UX B3) */
.driver-popover-footer button:hover,.driver-popover-footer button:focus{background:var(--surface-3);color:var(--text-primary)}
.driver-popover-footer button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* v0.40.3: Do it with me lets you use the whole form while it shows a field */
body.withme-on.driver-active *{pointer-events:auto}body.withme-on .driver-overlay{pointer-events:none}
.driver-popover.withme .driver-popover-next-btn:disabled{opacity:.5;cursor:default}

/* v0.42.0: Premium tag, and a Premium part shown as a locked preview */
.ptag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:999px;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);vertical-align:middle}
.plockwrap{position:relative}
.plock{filter:blur(5px);opacity:.55;pointer-events:none;user-select:none;max-height:420px;overflow:hidden}
.plockcard{position:absolute;inset:0;margin:auto;height:max-content;width:max-content;max-width:min(360px,90%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:var(--s4) var(--s5);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--elev)}
/* v0.44.3 (Cila 3 H2, M2): Markets' Compare chips wrap at any width; an empty More menu stays hidden */
#gbar{flex-wrap:wrap}#gbar .chips{flex-wrap:wrap!important;overflow:visible;min-width:0}.hmore[hidden]{display:none}

/* v0.44.7 (Settings look S1, S2, S4, S12): one row system for Settings. The name with one line under it at the left, the control in a
   300 px column at the right; equal segments; folds with a ▸; the top bar's currency panel in two rows */
.sview>.card{padding:16px 20px}.sview>.card>.lbl{margin-bottom:4px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:center;min-height:48px;padding:8px 0;border-top:1px solid var(--border)}
.srow:first-child,.lbl+.srow{border-top:0;padding-top:0}.srow:last-child{padding-bottom:0}
.srow .sl{min-width:0}.srow .sl>b{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary)}.srow .sl>b label{font:inherit;color:inherit;margin:0}
.srow .sl>.cap{display:block;font-size:12px;line-height:16px;color:var(--text-muted);margin-top:2px}
.srow .sl code{font-family:var(--mono);overflow-wrap:anywhere;background:none;padding:0}
.srow .sc{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.srow .sc>select,.srow .sc>.seg,.srow .sc>input:not(.num){width:100%}.srow .sc>input.num{width:120px;text-align:right}
.srow .seg,.seg.eq{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;height:36px;padding:3px}.seg.eq{width:320px;max-width:100%}
.srow .seg button,.seg.eq button{height:28px;min-height:28px;padding:0 6px;white-space:nowrap}
.srow .sc .sm,.sview .ghost.sm:not(.ic){height:32px;min-height:32px;padding:0 12px;font-size:13px}
.srow .sl .infob{width:24px;height:24px;min-width:24px;min-height:24px;margin:-4px 0;vertical-align:middle}
.srow .verdict{font-size:14px;line-height:20px;gap:8px}
.sfold{border-top:1px solid var(--border);padding:12px 0 0;margin-top:8px}.sfold>summary{list-style:none;cursor:pointer;font-size:13px;color:var(--text-secondary)}
.sfold>summary::-webkit-details-marker{display:none}.sfold>summary::before{content:"\25B8";display:inline-block;width:16px;transition:transform var(--t)}.sfold[open]>summary::before{transform:rotate(90deg)}
.sfold+.sfold{margin-top:12px}
.ccypop:focus{outline:none}.ccypop>.lbl{margin:0 0 4px}
.pairr .ppr{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;min-height:42px}.pairr .ppr+.ppr{border-top:1px solid var(--border)}
.pairr .ppr label{font-size:13px;color:var(--text-secondary);margin:0}.pairr .err:not(:empty){margin-top:6px}
.ppfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--border);margin-top:8px;padding-top:10px}
.ppfoot a{font-size:12px;color:var(--text-secondary)}
.ccypop .ppfoot button.pri{height:32px;min-height:32px;padding:0 14px;border:1px solid var(--pri-bg);background:var(--pri-bg);color:var(--pri-ink);border-radius:var(--r-ctl);font-size:13px}          /* the panel sits inside the switch, whose buttons are plain */
@media (max-width:760px){.srow{grid-template-columns:minmax(0,1fr);gap:8px}.srow .sc{justify-content:flex-start}}

/* v0.44.14 (sign-in look A1-A5): the account window */
.accw{position:relative;background:var(--surface-1);border:1px solid var(--border);border-radius:16px;box-shadow:var(--elev);width:min(400px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 28px 24px;display:grid;gap:18px}
.accw-x{position:absolute;top:10px;right:10px}
.accw-h{display:grid;justify-items:center;text-align:center;gap:6px}.accw-h img{margin-bottom:4px}
.accw-h h2{margin:0;font-size:20px;line-height:26px;font-weight:600;color:var(--text-primary)}
.accw-h p{margin:0;font-size:13px;line-height:18px;color:var(--text-secondary);max-width:30em}
.accw-f{display:grid;gap:14px}.accw-f label.f{font-size:13px;color:var(--text-secondary)}
.accw-f input{height:40px;width:100%}.accw-f .pwf input{height:40px}
.accw-f input.bad{border-color:var(--loss)}
.accw-lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.accw-lab a{font-size:13px;color:var(--text-primary)}
.accw-rule{font-size:12px;line-height:16px;margin-top:6px;color:var(--text-muted)}.accw-rule.ok{color:var(--gain)}.accw-rule.bad{color:var(--loss)}
.ferr{font-size:12px;line-height:16px;margin-top:6px;color:var(--loss)}.ferr a{color:inherit;text-decoration:underline}
.accw-f .err:empty{display:none}
.accw-go{width:100%;height:40px;font-size:14px;justify-content:center}
.accw-match{font-size:20px;letter-spacing:2px;font-variant-numeric:tabular-nums}          /* v0.53.4 (M-4): the number to pick on the other device */
.accw-read{display:grid;gap:6px;font-size:12px;line-height:16px;color:var(--text-secondary)}.accw-read p{margin:0}.accw-read a{font-size:13px}
.accw-read label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-primary);cursor:pointer}.accw-f .accw-read input{width:16px;height:16px;margin:0;flex:none}
.accw-u{margin:0;font-size:12px;line-height:16px;text-align:center;color:var(--text-secondary)}
.accw-foot{display:grid;gap:6px;text-align:center;font-size:13px;line-height:18px;color:var(--text-secondary)}.accw-foot p{margin:0}
.accw a,.accw .linkb{color:var(--text-primary)}.accw .linkb{font-size:13px}.accw .linkb:disabled{color:var(--text-muted);cursor:default;text-decoration:none}
.accw-code{height:52px!important;font:500 24px/1 var(--mono);letter-spacing:.35em;text-align:center;padding-left:.35em}
@media (max-width:760px){.accw{width:100%;padding:20px}}
/* A9: the language on the welcome screen */
.wlang{position:fixed;top:20px;right:24px;z-index:5}.wlang>summary{height:32px;gap:6px;padding:0 10px;font-size:13px}
.wlang .amenu-p{min-width:160px}.wlang .amenu-p button{gap:8px}.wltick{width:14px;display:inline-block;color:var(--text-primary)}

/* v0.50.2 (UI/UX V9): a long account name is cut with its whole name on hover, never pushing the table out of its card */
table.hold button.tkb,table.hold .amenu-p button{max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* v0.50.2 (UI/UX V10): on a short window the entry panel's summary is one line, so the fields have room */
@media (max-height:700px){.slide.entry #resbox .efig{display:none}}
/* v0.53.9: the web view's shared-computer card (Onur: design it, and make it stand out); blue and marked when it is on */
.wshare { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; margin-top: var(--s6); max-width: 460px;
  padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color var(--t), background var(--t); }
.wshare:hover { border-color: var(--accent); }
.wshare .wsico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.wshare .wstx { display: grid; gap: 4px; }
.wshare .wstx b { font-size: 15px; line-height: 20px; }
.wshare .wstx span { color: var(--text-secondary); font-size: 13px; line-height: 19px; }
.wshare.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); }
.wshare .switch input:checked + i { background: var(--accent); }
.wshare + .wbtn { width: min(460px, 100%); margin-top: var(--s5); }          /* the buttons line up with the card */
/* v0.53.13 (Onur: a very big screen): the welcome and the web view's sign-in grow a little on wide screens, centred */
@media (min-width: 1800px) {
  body.bare main { max-width: 1680px; }
  .welc2 { max-width: 1560px; gap: var(--s12); }
  .welc2 .whead { font-size: 40px; line-height: 48px; }
  .welc2 .wl > p { font-size: 17px; line-height: 26px; }
  .welc2 .wshare, .welc2 .wshare + .wbtn { max-width: 520px; width: min(520px, 100%); }
}