/* TCECC 2412: additions on top of the Corp dashboard's style.css (same tokens, same look). */
:root{--s-op:#2a78d6;--s-res:#eb6834}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-op:#3987e5;--s-res:#d95926}}
:root[data-theme="dark"]{--s-op:#3987e5;--s-res:#d95926}

/* Sidebar wordmark in place of the company logo */
aside.side .wordmark{display:flex;flex-direction:column;gap:2px;padding:2px 8px 0}
aside.side .wm-name{font-family:var(--serif);font-size:24px;line-height:1.05;letter-spacing:-.015em;color:var(--fg)}
aside.side .wm-sub{font-size:11px;color:var(--muted);line-height:1.25}
aside.side .back-corp{font-size:12.5px;color:var(--muted);text-decoration:none}
aside.side .back-corp:hover{color:var(--fg)}
@media (max-width:860px){aside.side .wm-sub{display:none}aside.side .wm-name{font-size:18px}aside.side .back-corp{display:none}}

.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
a.back{color:var(--muted);font-size:13px;text-decoration:none}
button.sm{padding:4px 11px;font-size:12.5px}
.ghost-link{font-size:13px;color:var(--muted);font-weight:500}

/* Year header: title on the left, year switch on the right */
.yearhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap}
.yearhead > div:first-child{min-width:0;flex:1 1 380px}
.yearhead .fyswitch .fy{min-width:96px;padding:6px 12px}
.yearhead .fyswitch .fy .yy{font-size:20px}
.fyswitch .fy .fyr{max-width:110px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.yearhead .fyswitch .fy{min-width:0}}

/* Tabs */
.tabs{display:flex;gap:2px;align-items:center;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:8px 12px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--fg);border-bottom-color:var(--brand)}
.tabs .tabs-end{margin-left:auto;display:flex;gap:10px;align-items:center;padding-bottom:4px}

/* Financial statements */
.statements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.statements{grid-template-columns:minmax(0,1fr)}}
.stmt h2{font-size:17px}
table.fs{table-layout:fixed}
table.fs col.c-amt{width:108px}
table.fs td{padding:4px 8px;border-bottom:0}
table.fs th{border-bottom:1px solid var(--line)}
table.fs tr.head td{padding-top:12px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.fs tr.line td:first-child{padding-left:12px}
table.fs tr.sub td{border-top:1px solid var(--line);font-weight:500}
table.fs tr.sub td:first-child{padding-left:12px}
table.fs tr.total td{border-top:1px solid var(--fg);font-weight:600}
table.fs tr.grand td{border-top:1px solid var(--fg);border-bottom:3px double var(--fg);font-weight:700}
table.fs td.num{white-space:nowrap}
.fnote{display:flex;flex-direction:column;gap:2px}
.fnote p{margin:0;font-size:13.5px;line-height:1.5}
.printhead{display:none}

/* Inputs */
table.inputs td{vertical-align:middle}
table.inputs td:nth-child(1){width:30%}
table.inputs input{max-width:140px;text-align:right;font-variant-numeric:tabular-nums}
table.inputs textarea{font-family:var(--sans);font-size:12.5px;resize:vertical;min-height:32px}
table.inputs td.c,td.c{text-align:center}
table.inputs input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink)}
.sticky-save{position:sticky;bottom:0;background:var(--bg);padding:10px 0;border-top:1px solid var(--line);z-index:5}
.warntext{color:var(--warn)}

/* Lists */
ul.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.todo li{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:8px;background:var(--soft);font-size:13.5px}
ul.todo li.warn{background:var(--warn-soft)}
ul.todo li.bad{background:var(--bad-soft)}
ul.todo li.act{background:color-mix(in srgb,var(--brand) 14%,transparent)}
ul.todo li.done{opacity:.6}
ul.todo li form{margin:0}
button.tick{width:18px;height:18px;padding:0;border-radius:999px;background:transparent;border:1.5px solid var(--muted);margin-top:1px}
button.tick:hover{background:var(--ok-soft);border-color:var(--ok)}
.todo-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}

/* Fund balance chart */
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sw.op{background:var(--s-op)}.sw.res{background:var(--s-res)}
svg.fundchart{width:100%;height:auto;display:block}
svg.fundchart .grid{stroke:var(--line);stroke-width:1}
svg.fundchart .tick{fill:var(--muted);font:11px var(--sans)}
svg.fundchart .bar.op{fill:var(--s-op)}
svg.fundchart .bar.res{fill:var(--s-res)}
svg.fundchart .bar:hover{opacity:.8}
.charttip{position:fixed;z-index:60;pointer-events:none;background:var(--fg);color:var(--bg);font-size:12.5px;padding:5px 9px;border-radius:8px;white-space:nowrap}
table.years td{white-space:nowrap}

/* Ledger */
.ledgergrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:960px){.ledgergrid{grid-template-columns:minmax(0,1fr)}}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fields .span2{grid-column:span 2}
@media (max-width:620px){.fields.three{grid-template-columns:minmax(0,1fr)}.fields .span2{grid-column:auto}}
.lines{display:flex;flex-direction:column;gap:8px}
.eline{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 34px;gap:9px;align-items:end}
@media (max-width:620px){.eline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.addline{align-self:flex-start}
.entryform .dropzone{padding:12px}
table.ledger col.c-date{width:78px}table.ledger col.c-cat{width:220px}table.ledger col.c-acct{width:96px}
table.ledger col.c-amt{width:110px}table.ledger col.c-icons{width:56px}
table.ledger{table-layout:fixed;min-width:600px}
table.ledger td{overflow:hidden;text-overflow:ellipsis}
td.in{color:var(--ok)}
tr.unpaid td{background:var(--warn-soft)}
.cat{font-size:12.5px}
.cat.income{color:var(--ok)}
.cat.transfer,.cat.reserve{color:var(--muted)}
.icons{white-space:nowrap;text-align:right;position:relative;z-index:2}
.icons a.clip{text-decoration:none}
.bankmark{color:var(--ok);font-weight:700;margin-left:4px}
iframe.pdf.small{height:420px}
.receipt-img{max-width:100%;border-radius:8px;border:1px solid var(--line)}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Statement lines */
.figs.boxed{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:0 12px;min-width:min(520px,100%)}
table.stlines{table-layout:fixed;min-width:980px}
table.stlines col.c-date{width:64px}table.stlines col.c-amt{width:100px}table.stlines col.c-act{width:122px}
table.stlines col.c-cat{width:220px}table.stlines col.c-pay{width:170px}table.stlines col.c-unit{width:96px}
table.stlines td{vertical-align:middle}
table.stlines td.desc{font-size:12.5px;overflow-wrap:anywhere}
table.stlines select,table.stlines input{font-size:12.5px;padding:4px 7px}
table.stlines input.svc{margin-top:4px}
table.stlines tr.done td{color:var(--muted)}
table.stlines tr.done td a{color:var(--ok)}
tr.muted-row td{opacity:.6}

/* Statements by month */
table.months td{white-space:nowrap}
.monthdots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:620px){.monthdots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.md{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border-radius:8px;background:var(--soft)}
.md .mn{font-size:12px;font-weight:600}
.dot{font-size:11px;padding:1px 7px;border-radius:999px;color:var(--muted);border:1px dashed var(--line);text-decoration:none}
.dot.have{background:var(--ok-soft);color:var(--ok);border:1px solid transparent}

/* Registers */
table.reg input,table.units input,table.budget input{font-size:13px;padding:5px 8px}
table.reg input.narrow{max-width:64px}
table.reg tr.on td{background:var(--ok-soft)}
table.reg tr.newrow td{background:var(--soft)}
table.reg td{vertical-align:middle}
input.r{text-align:right;font-variant-numeric:tabular-nums}
table.budget{max-width:640px}
table.budget input{max-width:140px}
.feegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}

/* Files */
.ext{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--soft);padding:1px 6px;border-radius:6px}
table.files td{vertical-align:middle}
.doclist li .num{font-size:12px}

/* Print the statements: just the four statements and the notes */
@media print{
  aside.side,.tabs,.yearhead .fyswitch,.flash,.toast,.sticky-save,button{display:none!important}
  body.with-side{padding-left:0}
  body{background:#fff;color:#000;font-size:11px}
  main{max-width:none;padding:0}
  .printhead{display:block;text-align:center;margin-bottom:8px;font-size:13px}
  .yearhead .sub{display:none}
  .statements{grid-template-columns:minmax(0,1fr)}
  .panel{border:0;padding:0;break-inside:avoid;page-break-inside:avoid}
  .stmt{page-break-after:always}
  .muted,table.fs td.muted{color:#444}
}

/* Sign-in: the TCECC wordmark in place of the company logo */
.login .login-mark{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--fg);margin-top:4px}
.login .login-title{margin:2px 0 6px}

/* ===== Wealthsimple-style layout: wide page, big left column, card rail on the right ===== */
:root{--bg:#f3f3f2;--panel:#fff;--soft:#f1f0ee;--line:#e9e8e5;--radius:20px;--side:216px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121211;--panel:#1b1b1a;--soft:#262625;--line:#2b2b29}}
:root[data-theme="dark"]{--bg:#121211;--panel:#1b1b1a;--soft:#262625;--line:#2b2b29}

/* DM Sans (SIL Open Font License), kept in this folder: lower and rounder than the system font, close to Wealthsimple's */
@font-face{font-family:"DM Sans";src:url("/static/fonts/dm-sans-latin-wght.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
:root{--display:"DM Sans",var(--sans)}
h1,h2,aside.side .org b,a.pillbtn,.statrow .k,.statrow .v,.statuschip{font-family:var(--display)}
.statrow .v{font-weight:600;letter-spacing:-.01em}

main,body.wide main{max-width:1560px;padding:28px clamp(16px,2.6vw,44px) 72px;gap:22px}
h1{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em}
h2{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em}
.panel{border:0;padding:22px 24px;gap:14px}
/* Sidebar in the Stripe style: white column, org header, icon + label rows, small section labels, accent on the open page */
:root{--nav:#5b52e8;--nav-soft:#f1f0ff;--side:232px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nav:#a29bff;--nav-soft:#242240}}
:root[data-theme="dark"]{--nav:#a29bff;--nav-soft:#242240}
aside.side{background:var(--panel);gap:6px;padding:14px 12px 12px;border-right:1px solid var(--line)}
aside.side .org{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:10px;border-radius:10px;text-decoration:none;color:var(--fg)}
aside.side .org:hover{background:var(--soft)}
aside.side .org .mark{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);
  font-weight:700;font-size:12px;letter-spacing:.02em}
aside.side .org .orgtext{display:flex;flex-direction:column;min-width:0;line-height:1.2}
aside.side .org b{font-size:14px;font-weight:650;letter-spacing:-.01em}
aside.side .org small{font-size:11.5px;color:var(--muted)}
aside.side nav{gap:2px}
aside.side nav a,aside.side .foot > a{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;font-size:14px;font-weight:500;
  color:var(--fg);text-decoration:none}
aside.side nav a svg,aside.side .foot > a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
aside.side nav a:hover,aside.side .foot > a:hover{background:var(--soft)}
aside.side nav a.on,aside.side .foot > a.on{background:var(--nav-soft);color:var(--nav);font-weight:600}
aside.side nav a.on svg,aside.side .foot > a.on svg{color:var(--nav)}
aside.side .navlabel{margin:16px 10px 4px;font-size:12px;color:var(--muted);font-weight:500}
aside.side .foot{align-items:stretch;gap:4px;padding:0;border-top:1px solid var(--line);padding-top:10px}
aside.side .footrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px 0}
@media (max-width:860px){
  aside.side .org small,aside.side .navlabel,aside.side .footrow form{display:none}
  aside.side{gap:8px}aside.side .org{margin:0;flex:none}
  aside.side .foot{border:0;padding:0;margin:0 0 0 auto;flex-direction:row;align-items:center}
  aside.side nav a span{white-space:nowrap}
}
.tabs{border-bottom:0;gap:6px}
.tabs a{border:0;margin:0;padding:7px 14px;border-radius:999px}
.tabs a.on{background:var(--ink);color:var(--on-ink)}
.tabs a:not(.on):hover{background:var(--soft)}

.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.split > .main-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.split > .rail{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1180px){.split{grid-template-columns:minmax(0,1fr)}}

/* Headline number */
.hero{display:flex;flex-direction:column;gap:6px;padding:4px 0 2px}
.hero .big{font-family:var(--display);font-size:clamp(36px,4vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.hero .big .unit{font-size:.34em;letter-spacing:0;font-weight:500;color:var(--fg);margin-left:6px}
.hero .sub{margin:0}
.heroactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
a.pillbtn{display:inline-block;padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:14px;text-decoration:none}
a.pillbtn.alt{background:var(--panel);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
a.pillbtn:hover{opacity:.88}

/* Card heads with the round arrow */
.qhead h2{margin:0}
a.arrow{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--soft);text-decoration:none;font-size:16px}
a.arrow:hover{background:var(--line)}

/* Rail cards */
.rail .panel{gap:12px;padding:20px 22px}
.rail .panel > h2{font-size:15px}
.statrows{display:flex;flex-direction:column;gap:8px}
a.statrow,div.statrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 15px;border-radius:14px;background:var(--soft);
  color:var(--fg);text-decoration:none;min-width:0}
a.statrow:hover{background:var(--line)}
.statrow .k{font-weight:600;font-size:14px}
.statrow .s{font-size:12.5px;color:var(--muted);margin-top:1px}
.statrow .v{font-weight:600;font-size:16px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;text-align:right}
.statrow.alert .v{color:var(--bad)}
.statrow .swd{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px}

/* Status list with icons */
ul.status{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
ul.status li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.4}
ul.status li > div{flex:1;min-width:0}
ul.status li b{display:block;font-weight:600}
ul.status li .ic{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px;background:var(--soft);color:var(--muted)}
ul.status li.ok .ic{background:var(--ok);color:#fff}
ul.status li.warn .ic{background:var(--warn-soft);color:var(--warn)}
ul.status li.bad .ic{background:var(--bad-soft);color:var(--bad)}
ul.status li.act .ic{background:var(--ink);color:var(--on-ink)}
ul.status li form{margin:0}
ul.status li button.tick{margin:0}
ul.status li .when{display:block;font-size:11.5px;color:var(--muted)}
.statuschip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.statuschip.bad{background:var(--bad-soft);color:var(--bad)}
.statuschip.warn{background:var(--warn-soft);color:var(--warn)}

/* Statements, one per card, stacked in the wide column */
.statements{grid-template-columns:minmax(0,1fr)}
table.fs col.c-amt{width:128px}
table.fs td,table.fs th{padding-left:10px;padding-right:10px}
.fyswitch{background:var(--panel)}
.fyswitch .fy.on{background:var(--ink);color:var(--on-ink)}
.fyswitch .fy.on .fyr{color:inherit;opacity:.7}

table.years th{white-space:normal;line-height:1.25;vertical-align:bottom}
table.years td{padding-left:6px;padding-right:6px}
.rail .entryform .fields.three{grid-template-columns:minmax(0,1fr)}
.rail .entryform .fields .span2{grid-column:auto}
.rail .eline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rail .eline > label:first-child{grid-column:1 / -1}
@media print{.split{display:block}.split > .rail{position:static}.noprint{display:none!important}}

/* ===== DM Sans throughout; deep red for the condo's accents; soft Wealthsimple card shadows ===== */
:root{--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
  --brand:#9b1c24;--on-brand:#fff;--nav:#9b1c24;--nav-soft:#faeced;--s-res:#b3262e;
  --shadow:0 1px 2px rgba(20,20,20,.04),0 6px 20px rgba(20,20,20,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#e5636a;--on-brand:#1a0709;--nav:#ff8f95;--nav-soft:#361a1d;--s-res:#e5636a;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--brand:#e5636a;--on-brand:#1a0709;--nav:#ff8f95;--nav-soft:#361a1d;--s-res:#e5636a;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.35)}
body{font-size:14.5px}
table{font-size:14px}
th{font-size:12px}
.note{font-size:13px}
.statrow .s{font-size:13px}
.sub{font-size:14.5px}
button,input,select,textarea{font-family:var(--sans)}
.panel,.fyswitch,a.card{box-shadow:var(--shadow)}
.rail .statrow{box-shadow:none}
.login .passkey-btn{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* DM Sans has no tabular figures, so amounts in tables use the system font to keep the decimal points in line */
:root{--figs:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif;--side:252px}
td.num,th.r,td.r,table.fs td.num,table.years td.r,table.ledger td.r,input.r,table.inputs input{font-family:var(--figs);font-variant-numeric:tabular-nums}

/* ===== Owners and fees ===== */
.feecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.feecards{grid-template-columns:minmax(0,1fr)}}
.feecard{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.feecard .k{font-size:13px;color:var(--muted);font-weight:500}
.feecard .v{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:2px 0}
.feecard .s{font-size:13px;color:var(--muted)}
.unitlist{display:flex;flex-direction:column}
.unitrow{padding:18px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.unitrow:first-child{border-top:0;padding-top:4px}
.uhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.uname{font-size:15px}.uname .addr{color:var(--muted)}
.uowner{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.barwrap{position:relative;padding:4px 0}
.bar{height:14px;border-radius:999px;background:var(--soft);display:flex;overflow:hidden}
.bar i{display:block;height:100%}
.bar .b-paid{background:var(--ink)}
.bar .b-gap{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 45%,transparent) 0 4px,transparent 4px 8px)}
.bar .b-extra{background:var(--ok)}
.b-due{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fg);border-radius:2px;opacity:.7}
.barnote{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.barnote b{color:var(--fg);font-weight:600}
details.upays summary{cursor:pointer;font-size:13px;color:var(--muted);width:max-content}
details.upays ul{margin-top:8px}
.legendbar{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);padding-top:4px}
.legendbar .lg{display:inline-block;width:12px;height:8px;border-radius:3px;margin-right:6px;vertical-align:0}
.lg.paid{background:var(--ink)}.lg.extra{background:var(--ok)}
.lg.gap{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 45%,transparent) 0 2px,transparent 2px 4px);outline:1px solid var(--line)}
.lg.due{width:2px;height:12px;background:var(--fg);border-radius:2px;vertical-align:-2px}
/* Setup */
form.setup{display:flex;flex-direction:column;gap:16px;max-width:980px}
label.inline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
input.short{width:90px}
.ownerlist{display:flex;flex-direction:column;gap:8px}
.ohead,.orow{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;align-items:center}
.ohead{font-size:12px;color:var(--muted);font-weight:500}
.orow.new input{border-style:dashed}

/* ===== Budget document ===== */
.yearhead-end{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.draftbar{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--warn-soft)}
.draftbar h2{margin:0 0 2px}.draftbar .note{color:var(--fg)}
.draftacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.draftacts form{margin:0}
.paperwrap{padding:34px clamp(16px,4vw,56px)}
.paper{font-family:Arial,"Liberation Sans",Helvetica,sans-serif;font-size:14px;line-height:1.35;max-width:760px;margin:0 auto;width:100%;color:var(--fg)}
.paper .ptitle{font-family:inherit;font-weight:700;font-size:15px;text-align:center;letter-spacing:.01em;margin:0}
.paper .ptitle.underline{text-decoration:underline;text-underline-offset:3px;margin:6px 0 26px}
.paper .psub{text-align:center;margin:2px 0 26px;font-size:14.5px}
.pblock{margin-bottom:20px}
.phead{font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-bottom:6px}
.pline,.ptotal{display:grid;grid-template-columns:minmax(0,1fr) 112px 112px;align-items:baseline}
.pline > :first-child{padding-left:26px}
.pline .a1{text-align:right;padding-right:14px}
.ptotal{font-weight:700;margin-top:2px}
.ptotal .a2{text-align:right;border-top:1px solid var(--fg);padding-top:1px;margin-left:0}
.ptotal.big{text-decoration:none}
.ptotal.big > :first-child{text-decoration:underline;text-underline-offset:3px}
.pline.note-line{font-size:13px;color:var(--muted);margin-top:4px}
.pschedule{font-family:inherit;text-align:center;text-decoration:underline;text-underline-offset:3px;font-size:14px;margin:30px 0 12px}
table.sched{font-size:12.5px;width:100%;border-collapse:collapse}
table.sched th{font-weight:400;text-align:center;border-bottom:1px solid var(--fg);padding:0 4px 4px;white-space:nowrap}
table.sched th.l,table.sched td.l{text-align:left;padding-left:0}
table.sched td{text-align:center;border:0;padding:5px 4px;vertical-align:bottom}
table.sched th.r,table.sched td.r{text-align:right}
table.sched tr.tot td{border-top:1px solid var(--fg);font-weight:700;padding-top:6px}
.paper.notes .n1,.paper.notes .n2,.paper.notes .n3{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:0 8px;align-items:baseline}
.paper.notes .n1{font-weight:700;text-decoration:underline;text-underline-offset:3px;margin:12px 0 10px}
.paper.notes .n1 .nt{text-decoration:underline}
.paper.notes .n1.gap{margin-top:30px}
.paper.notes .n2{margin:14px 0 8px;padding-left:34px;grid-template-columns:34px minmax(0,1fr) auto}
.paper.notes .n3{margin:12px 0 4px;padding-left:68px;grid-template-columns:34px minmax(0,1fr) auto}
.paper.notes .n1 .nn{text-decoration:none}
.paper.notes .na{text-align:right}
.paper.notes .ntext{padding-left:110px;margin-bottom:8px}
.paper.notes .ntext p{margin:0 0 9px;text-align:left}
.paper.notes .n3.gen{margin:8px 0}
table.bva td,table.bva th{padding:5px 6px}
table.bva th:first-child,table.bva td:first-child{padding-left:0}

/* Budget builder */
table.builder{table-layout:auto}
table.builder tr.head td{padding-top:16px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
table.builder td{vertical-align:middle;padding:6px 8px}
table.builder td.basis{font-size:12.5px;color:var(--muted);max-width:280px}
table.builder input{width:96px;text-align:right}
table.builder input.pct{width:64px}
table.builder tr.subtotal td{border-top:1px solid var(--fg);padding-top:10px}
.notebox{border-top:1px solid var(--line);padding:8px 0}
.notebox summary{cursor:pointer;font-weight:500}
.notebox textarea{width:100%;margin-top:8px;font:inherit;line-height:1.45}
label.feein{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.money{display:flex;align-items:center;gap:6px}.money b{color:var(--fg)}
.money input{max-width:120px}

/* Reserve fund study */
.studysummary{font-size:14px;line-height:1.55;max-width:80ch;margin:0}
.studytable{max-height:620px;overflow:auto}
table.years tr.hl td{background:var(--nav-soft)}
.uploadrow{display:flex;flex-direction:column;gap:8px}
.statrow.on{box-shadow:inset 0 0 0 1.5px var(--nav)}
table.study input{max-width:130px}
table.study input.short{width:70px;max-width:70px}

/* Charts: lines and the Gantt */
.sw.ln{height:3px;width:16px;border-radius:2px;vertical-align:3px}
.sw.ln.actual{background:var(--s-res)}.sw.ln.study{background:var(--fg);opacity:.55}.sw.ln.plan{background:var(--s-op)}
svg.linechart .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.linechart .ln.actual{stroke:var(--s-res)}
svg.linechart .ln.study{stroke:var(--fg);opacity:.55;stroke-dasharray:6 5;stroke-width:2}
svg.linechart .ln.plan{stroke:var(--s-op);stroke-dasharray:2 5;stroke-width:2.5}
svg.linechart .dot{fill:var(--panel);stroke:var(--s-res);stroke-width:2.5}
svg.linechart .dot:hover{fill:var(--s-res)}
.charttip{white-space:pre;line-height:1.4}
.ganttwrap{overflow-x:auto}
svg.gantt{min-width:900px;width:100%;height:auto;display:block;font-family:var(--sans)}
svg.gantt .gcol{fill:transparent;stroke:var(--line);stroke-width:1}
svg.gantt .gcol.exp{fill:color-mix(in srgb,var(--bad) 9%,transparent)}
svg.gantt .gyear{fill:var(--muted);font-size:11px}
svg.gantt .gsec{fill:var(--fg);font-size:12px;font-weight:600}
svg.gantt .glabel{fill:var(--fg);font-size:12px}
svg.gantt .gline{stroke:var(--muted);stroke-width:1}
svg.gantt .gnow{stroke:var(--s-res);stroke-width:1.5;stroke-dasharray:4 3}
svg.gantt .gnowl{fill:var(--s-res);font-size:11px;font-weight:600}
svg.gantt .gnote{fill:var(--muted);font-size:10.5px}
svg.gantt .gbar rect{fill:var(--gc);stroke:none}
svg.gantt .gbar .gdia{fill:var(--gc);stroke:var(--panel);stroke-width:1.5}
svg.gantt .gbar .gedge{fill:var(--panel);opacity:.9}
svg.gantt .gbar:hover rect,svg.gantt .gbar:hover .gdia{filter:brightness(1.12)}
svg.gantt .gbar.held{--gc:#5b6f8f}.gbar.held.matured{opacity:.45}
svg.gantt .gbar.p1{--gc:#7c5cd6}.gbar.p2{--gc:#d49a1a}
svg.gantt .gbar.later rect,svg.gantt .gbar.late rect,svg.gantt .gbar.due rect{opacity:.55}
svg.gantt .gbar.due rect{stroke:var(--gc);stroke-width:1.5;stroke-dasharray:4 3;opacity:.8}
svg.gantt .gbar.late rect{stroke:var(--bad);stroke-width:1.5;opacity:.7}
svg.gantt .fup{fill:var(--ok)}svg.gantt .fdn{fill:var(--bad)}svg.gantt .fhit{fill:transparent}
.legend.gl .sw{border-radius:3px}
.sw.held{background:#5b6f8f}.sw.p1{background:#7c5cd6}.sw.p2{background:#d49a1a}
.sw.bought{background:var(--fg);opacity:.75}.sw.dia{background:var(--fg);transform:rotate(45deg) scale(.8);border-radius:1px}
form.linkform{display:flex;gap:6px;align-items:center}form.linkform select{max-width:150px}
table.planned td{vertical-align:middle}

/* PDF viewer popup */
dialog.pdfdialog{border:0;padding:0;border-radius:20px;width:min(1100px,94vw);height:90vh;background:var(--panel);color:var(--fg);box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}
dialog.pdfdialog[open]{display:flex;flex-direction:column}
dialog.pdfdialog::backdrop{background:rgba(10,10,10,.55)}
.pdfbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pdfacts{display:flex;gap:14px;align-items:center}
dialog.pdfdialog iframe{flex:1;width:100%;border:0;background:#fff}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.cards3{grid-template-columns:minmax(0,1fr)}}
.main-col.wide{display:flex;flex-direction:column;gap:22px;min-width:0}

/* Unit bars: green for paid, plain grey for what's still owed */
.bar{background:color-mix(in srgb,var(--fg) 9%,var(--panel))}
.bar .b-paid{background:var(--ok)}
.bar .b-gap{background:transparent}
.bar .b-extra{background:color-mix(in srgb,var(--ok) 55%,var(--panel))}
.lg.paid{background:var(--ok)}
.lg.gap{background:color-mix(in srgb,var(--fg) 9%,var(--panel));outline:0}
.lg.extra{background:color-mix(in srgb,var(--ok) 55%,var(--panel))}

/* Ledger: one card per bank statement period */
.ledgercard .stlinks{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:13px}
.ledgercard .stlinks a{white-space:nowrap}
.ledgercard .qhead{align-items:flex-start}
table.ledger col.c-cat{width:190px}table.ledger col.c-acct{width:84px}table.ledger col.c-amt{width:100px}

/* Attach an invoice to a statement line */
.attach{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.attach.busy{opacity:.55;pointer-events:none}
label.plus{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;border:1.5px dashed var(--muted);color:var(--muted);
  cursor:pointer;font-size:16px;line-height:1;font-weight:500;transition:background .15s,color .15s,border-color .15s}
label.plus:hover{background:var(--soft);color:var(--fg);border-color:var(--fg)}
span.plus.off{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;border:1.5px dashed var(--muted);color:var(--muted);font-size:16px;line-height:1;opacity:.45;cursor:not-allowed}
button.plus{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border-radius:999px;border:1.5px dashed var(--muted);background:none;color:var(--muted);
  cursor:pointer;font-size:16px;line-height:1;font-weight:500;box-shadow:none}
button.plus:hover{background:var(--soft);color:var(--fg);border-color:var(--fg)}
label.plus input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.achip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:2px 4px 2px 9px;border-radius:999px;background:var(--ok-soft);font-size:12px}
.achip a{color:var(--ok);text-decoration:none;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achip .x{padding:0 6px;border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1.2}
.achip .x:hover{color:var(--bad);opacity:1}

/* Statement lines: keep the attach "+" and its chips on the description's own line */
table.stlines td.desc .attach{display:inline-flex;margin:0 0 0 8px;vertical-align:middle;flex-wrap:nowrap}
table.stlines td.desc .achip a{max-width:180px}
table.stlines td .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Statement line description: one line, cut off with an ellipsis to fit the column (hover shows all of it) */
table.stlines td.desc{overflow:hidden;overflow-wrap:normal}
.descline{display:flex;align-items:center;gap:8px;min-width:0}
.descline .dtext{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.descline .attach{flex:none;margin:0}

/* Bank statements: one card per account, side by side */
.acctgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1150px){.acctgrid{grid-template-columns:minmax(0,1fr)}}
.legendline{margin:0 2px}
.panel.acct{border-top:4px solid var(--s-op);padding-top:20px}
.panel.acct.res{border-top-color:var(--s-res)}
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.acct-head h2{font-size:20px;display:flex;align-items:center;gap:10px}
.acct-head h2 .sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.acct-head .note{margin-top:2px}
.acct-chips{display:flex;gap:6px;flex-wrap:wrap}
table.months td,table.months th{padding-left:6px;padding-right:6px}
.panel.acct .acct-head h2 + p{margin-top:6px}
/* Statements cards: plain cards, no colour edge */
.panel.acct,.panel.acct.res{border-top:0;padding-top:22px}

/* Owners' fee payments on statement lines: unit and the year it applies to, side by side */
[hidden]{display:none!important}
.feecell{display:flex;gap:6px;align-items:center}
.feecell select{min-width:0}
table.stlines col.c-unit{width:170px}

/* Unit bars: the full bar is the year's fees; the green fill has a rounded end; » marks paying past the full year */
.barwrap{position:relative}
.bar{position:relative;overflow:hidden}
.bar .b-paid{border-radius:999px}
.b-over{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;font-size:14px;line-height:1;letter-spacing:-.08em;pointer-events:auto}
.legendbar .lgover{color:var(--ok);font-size:14px;letter-spacing:-.08em;margin-right:2px}
.b-over{display:flex;align-items:center;right:10px}
.b-over svg{display:block}
.legendbar .lgover{display:inline-flex;vertical-align:middle;margin-right:4px}

/* Bars sit inset, with the "paid more than the year" arrows just outside their right end */
.barwrap{padding:4px 26px}
.b-over{position:absolute;right:5px;left:auto;top:50%;transform:translateY(-50%);color:var(--ok);display:flex;align-items:center}
.legendbar .lgover{color:var(--ok)}

/* Unit rows: all text and the bars share the same inset; the arrows sit in the right margin beside the bar's end */
.unitlist{padding:0 26px}
.legendbar{padding-left:26px;padding-right:26px}
.barwrap{padding:4px 0}
.b-over{right:-22px}

/* Budget vs actual */
.bar .b-paid.cut{border-radius:999px 0 0 999px}
.bar .b-bad{display:block;height:100%;background:var(--bad);border-radius:0 999px 999px 0;margin-left:2px}
.lg.bad{background:var(--bad)}
.statuschip.muted{background:var(--soft);color:var(--muted)}
.fundhero{display:flex;flex-direction:column;gap:2px}
.fundhero .big{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.fundhero .sub{margin:0;color:var(--muted);font-size:13.5px}
table.fundtable td.fbar{width:130px;padding-left:14px}
td.fbar i{display:block;height:8px;border-radius:99px;background:var(--ok)}
td.fbar i.neg{background:var(--bad)}

/* Insurance and GICs tables */
td.polfiles .attach{flex-wrap:nowrap;margin-top:0}
td.polfiles .achip a{max-width:150px}
table.reg td:first-child input{min-width:150px}
.flagtext.bad{color:var(--bad);font-weight:600}
table.builder td:nth-child(4){white-space:nowrap}
#budgetform > .feecards{margin-bottom:22px}
.autocell{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.autoval{font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.lockbtn{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border-radius:999px;border:0;background:var(--soft);color:var(--muted);cursor:pointer;box-shadow:none}
.lockbtn:hover{color:var(--fg)}
.lockbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
tr[data-autorow] .i-open,tr[data-autorow].locked .i-lock{display:none}
tr[data-autorow].locked .i-open{display:block}
tr[data-autorow]:not(.locked) .i-lock{display:block}
tr[data-autorow].locked input.amt,tr[data-autorow].locked input.pct{display:none}
tr[data-autorow]:not(.locked) .autoval{display:none}
table.builder tr[data-autorow] td.basis div{margin-top:2px}
table.builder tr.autonote td{padding-top:0;font-size:12.5px;color:var(--muted)}
table.builder tr.autonote td div{margin-top:2px}

/* Amounts use DM Sans like the cards (it has no tabular figures, but amounts are right-aligned with two decimals, so they stay in line) */
:root{--figs:var(--sans)}
td.num,th.r,td.r,table.fs td.num,table.years td.r,table.ledger td.r,input.r,table.inputs input{font-variant-numeric:lining-nums}

/* Create budget: one line per row; explanations fold away behind an arrow */
table.builder td,table.builder th{white-space:nowrap}
table.builder th.c,table.builder td.c{text-align:center}
table.builder td.lbl .chev{vertical-align:middle;margin-right:4px}
.chev{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;box-shadow:none}
.chev:hover{background:var(--soft);color:var(--fg)}
.chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.chev.open svg{transform:rotate(90deg)}
.flag{display:inline-block;width:12px;height:12px;border-radius:999px;background:var(--ok);vertical-align:middle}
.flag.bad{background:var(--bad)}
.flag.warn{background:var(--warn)}
table.builder tr.detail td{white-space:normal;padding:0 8px 10px 36px;font-size:12.5px;color:var(--muted)}
table.builder tr.detail td div{margin-top:2px}
table.builder td,table.builder th{padding-left:6px;padding-right:6px}
table.builder input{width:88px}
table.builder input.pct{width:56px}
h3.subhead{font-size:14px;font-weight:600;margin:20px 0 8px}
form.inlineform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
form.inlineform input[name=note]{flex:1;min-width:160px}
form.inlineform input.narrow{width:72px}
form.inlineform input.r{width:100px}
table.builder th{white-space:normal;vertical-align:bottom;line-height:1.2}
table.builder td,table.builder th{padding-left:4px;padding-right:4px}
table.builder input{width:80px}
table.builder input.pct{width:48px}
form.inlineform select{width:auto}

/* Fund goal bars on the budget page */
.fundbar{margin:2px 0 8px;max-width:640px}
.fundbar .fbrow{display:flex;align-items:center;gap:16px}
.fundbar .barwrap{flex:1;padding:4px 0}
.fundbar .bar .b-paid{border-radius:999px}
.fundbar .bar .b-paid.cut{border-radius:999px 0 0 999px}
.fundbar .bar .b-top{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ok) 55%,var(--panel)) 0 4px,color-mix(in srgb,var(--ok) 25%,var(--panel)) 4px 8px);border-radius:0 999px 999px 0}
.fundbar label.goalin{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.fundbar .money input{width:84px}
.fundbar .barnote{margin-top:2px}
.fnotetext{margin-top:6px;font-size:12.5px;color:var(--muted)}
.fundbar label.goalin{flex-direction:row;align-items:center}.fundbar label.goalin .money{flex-direction:row}

/* Fund goal bars: amounts sit inside their segments */
.fundbar{max-width:none}
.fundbar .fbrow{gap:12px}
.fundbar .bar.fbar{flex:1;height:28px;border-radius:999px;overflow:hidden;display:flex}
.fundbar .seg{display:flex;align-items:center;justify-content:center;height:100%;min-width:0;overflow:hidden;font-style:normal;font-size:12.5px;font-weight:600;white-space:nowrap;border-radius:0}
.fundbar .seg span{pointer-events:none}
.fundbar .seg.paid{background:var(--ok);color:#fff}
.fundbar .seg.top{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ok) 50%,var(--panel)) 0 4px,color-mix(in srgb,var(--ok) 25%,var(--panel)) 4px 8px);color:var(--fg)}
.fundbar .seg.rest{background:transparent;color:var(--muted);font-weight:500}
.fundbar .barnote{margin-top:4px}
table.builder tr.detail td{padding:0 4px 10px 30px}
.chevsp{display:inline-block;width:22px;height:22px;margin-right:4px;vertical-align:middle}
table.builder td.over{color:var(--bad);font-weight:600}
.fundbar .bar.fbar{height:14px}
.fundbar .seg{font-size:10px;line-height:14px;font-weight:600}
.fundbar .bar.fbar{height:21px}
.fundbar .seg{line-height:21px}

/* Funds page */
form.stackform{display:flex;flex-direction:column;gap:10px;margin-top:8px}
form.stackform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
form.stackform .two{display:grid;grid-template-columns:1fr 90px;gap:10px}
form.stackform .money input{max-width:none;width:100%}
form.inline{display:inline;margin-left:8px}
.unitrow .fundbar{margin-top:10px}
.unitrow .fundbar .barnote{margin-top:4px}

/* Fields are pills like the buttons (text areas get a softer curve so the corners don't eat the text) */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]),select{border-radius:999px;padding-left:14px}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]){padding-right:14px}
textarea{border-radius:16px;padding:10px 14px}

/* Funds page: the two tables inside a fund are separated and headed */
.unitrow details.notebox{margin-top:14px}
.unitrow details.notebox .tablewrap{margin-bottom:6px}
h3.subhead.first{margin-top:12px}
.unitrow details.notebox h3.subhead{margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.unitrow details.notebox h3.subhead.first{margin-top:10px;padding-top:0;border-top:0}
table.expt{table-layout:fixed;width:100%}
table.expt col.c-year{width:56px}table.expt col.c-date{width:92px}table.expt col.c-amt{width:104px}table.expt col.c-x{width:36px}
table.expt td,table.expt th{white-space:normal;vertical-align:top}
table.expt td.num{white-space:nowrap}

/* Statement page: title with a status pill, balances as cards */
.headrow h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.statuschip.headchip{font-size:13px;padding:5px 12px;font-family:var(--display)}
.feecards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin:4px 0 20px}
.feecards.two .feecard .v{font-size:28px}

/* The year selector keeps both arrows so the window never changes width; the one that can't go further is dimmed */
.fyswitch .fyarrow.off{opacity:.28;pointer-events:none}

/* Sidebar items are pills like the buttons */
aside.side nav a,aside.side .foot > a{border-radius:999px;padding-left:14px;padding-right:14px}

/* Budget vs actual: the three headline cards stack in the right column */
.feecards.stack{grid-template-columns:minmax(0,1fr)}

/* Budget vs actual: each row is one tight block (heading, budget, bar, spent), with more room between rows */
.unitlist.track .unitrow{gap:6px;padding:26px 0}
.unitlist.track .unitrow:first-child{padding-top:6px}
.unitlist.track .uhead{margin-bottom:-2px}
.unitlist.track .barwrap{padding:0}

/* Funds page: each fund is one tight block (name, description, bar, caption), with room between funds */
.unitlist.funds .unitrow{gap:6px;padding:24px 0}
.unitlist.funds .unitrow:first-child{padding-top:6px}
.unitlist.funds .unitrow .fundbar{margin:0}
.unitlist.funds .fundbar .barnote{margin-top:6px}
.unitlist.funds .uhead{margin-bottom:-2px}

.chipgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chipgroup form{margin:0}

/* Fund-aware bars and suggestions */
.bar .b-fund{display:block;height:100%;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ok) 50%,var(--panel)) 0 4px,color-mix(in srgb,var(--ok) 25%,var(--panel)) 4px 8px)}
.bar .b-fund.cut{border-radius:0}
.legendbar .lg.fundpaid{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ok) 50%,var(--panel)) 0 3px,color-mix(in srgb,var(--ok) 25%,var(--panel)) 3px 6px)}
.suggest{margin-top:6px;font-size:13px;color:var(--fg)}
.suggest.muted{color:var(--muted)}
.suggest button{margin-left:6px}
.fundbar label.goalin input.due{width:76px}

.feein .money{flex-wrap:nowrap}
.feein .money input{flex:0 1 90px;min-width:0}
.feein .money button{margin-left:6px;white-space:nowrap}

/* Balance Budget: a black button as tall as the fee box beside it */
.feein .money{align-items:stretch}
.feein .money b{align-self:center}
.feein .money input{height:auto}
.feein .money button.balfee{padding:0 16px;font-size:13.5px;margin-left:8px;border-radius:999px;background:var(--ink);color:var(--on-ink);border:1px solid var(--ink)}

.savestate{min-height:1.2em;margin-top:2px}

/* Confirmation dialog */
dialog.cdialog{border:0;border-radius:24px;padding:28px 28px 22px;max-width:420px;width:calc(100% - 32px);background:var(--panel);color:var(--fg);box-shadow:0 24px 70px rgba(20,20,20,.28)}
dialog.cdialog::backdrop{background:rgba(20,19,18,.42);backdrop-filter:blur(3px)}
dialog.cdialog form{display:flex;flex-direction:column;gap:12px;margin:0}
dialog.cdialog h2{margin:0;font-size:20px;letter-spacing:-.01em}
dialog.cdialog p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
dialog.cdialog .cdacts{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
dialog.cdialog .cdacts button{padding:9px 20px}
button.restore{width:100%;margin-top:8px}

/* ===== Dark mode in Wealthsimple's palette: neutral near-black page, charcoal cards, white text, white primary buttons ===== */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0e0e;--panel:#1c1c1c;--soft:#282828;--line:#333333;--fg:#ffffff;--muted:#a1a1a1;
  --ink:#ffffff;--on-ink:#0e0e0e;--accent:#ffffff;--accent-soft:#282828;
  --ok:#5ccf93;--ok-soft:#163323;--warn:#e8c53a;--warn-soft:#3b3410;--bad:#ff6b63;--bad-soft:#3d1717;
  --nav-soft:#2a1b1d;
  --shadow:none}}
:root[data-theme="dark"]{
  --bg:#0e0e0e;--panel:#1c1c1c;--soft:#282828;--line:#333333;--fg:#ffffff;--muted:#a1a1a1;
  --ink:#ffffff;--on-ink:#0e0e0e;--accent:#ffffff;--accent-soft:#282828;
  --ok:#5ccf93;--ok-soft:#163323;--warn:#e8c53a;--warn-soft:#3b3410;--bad:#ff6b63;--bad-soft:#3d1717;
  --nav-soft:#2a1b1d;
  --shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .panel,:root:not([data-theme="light"]) .feecard,:root:not([data-theme="light"]) .fyswitch{border:1px solid var(--line)}}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .feecard,:root[data-theme="dark"] .fyswitch{border:1px solid var(--line)}

/* Submit and Restore: the same large pill, stacked and centred under the cards */
.submitstack{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
.submitstack button,.submitstack button.restore{width:100%;max-width:300px;margin:0;padding:12px 28px;font-size:14.5px;font-weight:600;border-radius:999px}

/* The current page in the sidebar: no red. Light: the soft grey of the cards, black text. Dark: a white pill, black text. */
aside.side nav a.on,aside.side .foot > a.on{background:var(--soft);color:var(--fg)}
aside.side nav a.on svg,aside.side .foot > a.on svg{color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) aside.side nav a.on,:root:not([data-theme="light"]) aside.side .foot > a.on{background:#fff;color:#0e0e0e}
  :root:not([data-theme="light"]) aside.side nav a.on svg,:root:not([data-theme="light"]) aside.side .foot > a.on svg{color:#0e0e0e}}
:root[data-theme="dark"] aside.side nav a.on,:root[data-theme="dark"] aside.side .foot > a.on{background:#fff;color:#0e0e0e}
:root[data-theme="dark"] aside.side nav a.on svg,:root[data-theme="dark"] aside.side .foot > a.on svg{color:#0e0e0e}

/* Receipt marker in the ledger: a page with a folded corner */
a.clip{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--muted);text-decoration:none;vertical-align:middle}
a.clip:hover{color:var(--fg)}
a.clip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Plan actions: a to-do style tick */
.boughtcell{white-space:nowrap}
button.tickbtn{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:none;margin-right:8px}
button.tickbtn:hover{background:var(--soft)}
button.tickbtn .tick{width:16px;height:16px;border-radius:999px;border:1.5px solid var(--muted);display:inline-block}
dialog.cdialog form.stackform{gap:12px}
dialog.cdialog .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
dialog.cdialog label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
dialog.cdialog label .money input{max-width:none;width:100%}

/* Plan table: a circle on the left that fills green when the GIC is bought; estimated rates in grey */
table.planned td.tickcol,table.planned th.tickcol{width:36px;padding-right:0}
button.tickbtn{display:inline-block;width:22px;height:22px;padding:0;margin:0;border-radius:999px;border:1.5px solid var(--muted);background:transparent;cursor:pointer;box-shadow:none}
button.tickbtn:hover{background:var(--soft);border-color:var(--fg)}
button.tickbtn.due{border-color:var(--warn)}
button.tickbtn.late{border-color:var(--bad)}
span.tickdone{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--ok);color:var(--on-ink)}
span.tickdone svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
table.planned td.est{color:var(--muted)}

/* Plan table: columns shrink to their content so the GIC box gets the room; the maturity date has a fixed width */
table.planned th,table.planned td{white-space:nowrap;width:1%}
table.planned td:nth-child(2),table.planned th:nth-child(2){white-space:normal;width:auto}
table.planned th.mat,table.planned td.mat{width:104px;min-width:104px}
table.planned td:last-child,table.planned th:last-child{width:30%}
table.planned td:last-child form{display:flex;gap:6px;align-items:center}
table.planned td:last-child select{flex:1;min-width:190px}

/* Plan table: When, Principal, Rate, Term and Maturity Date are centred */
table.planned th:nth-child(n+3):nth-child(-n+7),table.planned td:nth-child(n+3):nth-child(-n+7){text-align:center}

/* Plan table: this year's purchases (and any missed earlier ones) are highlighted; later years are dimmed so nothing is ticked by mistake */
table.planned tr.cur td{background:var(--soft)}
table.planned tr.fut td{opacity:.5;transition:opacity .15s}
table.planned tr.fut:hover td{opacity:.9}

/* Overview: the to-do list leads the page, and the total sits above the Funds card without a card of its own */
.rail .hero{padding:4px 4px 10px}
.rail .hero .big{font-size:clamp(34px,3.2vw,44px)}
.rail .hero .heroactions{display:flex;flex-wrap:wrap;gap:8px}

/* Overview: the name sits over the left column, the total over the right, and both columns start on the same line below them */
.split.ovgrid{row-gap:20px;align-items:start}
.ovgrid .ovtitle{align-self:center;min-width:0}
.ovgrid .ovtitle h1{margin:0}
.ovgrid > .hero{margin:0}

/* Overview: the name stays at the top; in the total, the label is centred and the figures sit to the right */
.ovgrid .ovtitle{align-self:start}
.ovgrid > .hero > .sub:first-child{text-align:center}
.ovgrid > .hero .big,.ovgrid > .hero .big + .sub{text-align:right}

/* Overview: the name has the first row to itself on the left; both columns, the total included, start together below it */
.ovgrid > .ovtitle{grid-column:1;grid-row:1}
.ovgrid > .main-col{grid-column:1;grid-row:2}
.ovgrid > .rail{grid-column:2;grid-row:2}
.ovgrid .rail .hero > .sub:first-child{text-align:center}
.ovgrid .rail .hero .big,.ovgrid .rail .hero .big + .sub{text-align:right}

/* Overview: the headline runs the full width, with about an inch below it before the cards begin */
.ovgrid > .ovtitle{grid-column:1 / -1;margin-bottom:76px}

/* Overview chart: a line through each fund's yearly balance, with a dot at every year */
svg.fundchart .line{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
svg.fundchart .line.op{stroke:var(--s-op)}
svg.fundchart .line.res{stroke:var(--s-res)}
svg.fundchart .pt{stroke:var(--panel);stroke-width:2}
svg.fundchart .pt.op{fill:var(--s-op)}
svg.fundchart .pt.res{fill:var(--s-res)}
svg.fundchart .pt:hover{r:6}

/* Inputs and Sources: room between the cards and under the intro, and notes that show their whole text */
form.inputs-form{display:flex;flex-direction:column;gap:22px;margin-top:6px}
form.inputs-form > p.note{margin:6px 0 0;max-width:72ch}
table.inputs td:nth-child(1){width:28%}
table.inputs textarea{field-sizing:content;min-height:36px;overflow:hidden;resize:none;padding:7px 12px;width:100%;line-height:1.4}
table.inputs td:last-child{width:34%}

/* Create New Budget: the button to the historic expenses, and that page's charts */
.headacts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.histgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:14px}
@media (max-width:1000px){.histgrid{grid-template-columns:minmax(0,1fr)}}
.histcard .qhead{margin-bottom:2px}
.histcard p.note{margin:2px 0 8px}
svg.histchart{width:100%;height:auto;display:block}
svg.histchart .grid{stroke:var(--line);stroke-width:1}
svg.histchart .tick{fill:var(--muted);font:10.5px var(--sans)}
svg.histchart .hline{fill:none;stroke:var(--s-res);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
svg.histchart .hdash{fill:none;stroke:var(--s-res);stroke-width:2.25;stroke-dasharray:6 5;stroke-linecap:round;stroke-linejoin:round}
svg.histchart .hpt{fill:var(--s-res);stroke:var(--panel);stroke-width:2}
svg.histchart .hpt.proj{fill:var(--panel);stroke:var(--s-res);stroke-width:2}
.histlegend{margin:0 0 4px}
.legendbar .lg.line{background:var(--s-res);height:3px;border-radius:2px;width:18px}
.legendbar .lg.dash{background:repeating-linear-gradient(90deg,var(--s-res) 0 5px,transparent 5px 9px);height:3px;width:18px}

/* Historic expenses: charts stacked in the wide column, summary in the narrow one */
.histgrid{display:block}
.main-col > .histcard svg.histchart{margin-top:4px}

/* Historic expenses: three kinds of line */
svg.histchart .hline.budget,svg.histchart .hdash.budget{stroke:var(--s-op)}
svg.histchart .hline.fund,svg.histchart .hdash.fund{stroke:var(--ok)}
svg.histchart .hline.budget{stroke-width:1.9}
svg.histchart .hpt.budget{fill:var(--s-op)}
svg.histchart .hpt.fund{fill:var(--ok)}
svg.histchart .hpt.proj.budget{fill:var(--panel);stroke:var(--s-op)}
svg.histchart .hpt.proj.fund{fill:var(--panel);stroke:var(--ok)}
.legendbar .lg.line.budget{background:var(--s-op)}
.legendbar .lg.line.fund{background:var(--ok)}
.histlegend{flex-wrap:wrap;gap:6px 14px}

/* Historic expenses: timeline pills and a stacked legend */
nav.spantabs{margin-top:6px;gap:6px}
nav.spantabs a{padding:6px 14px}
.histlegend.stack{flex-direction:column;align-items:flex-start;gap:9px;margin:2px 0 10px}

.submitstack a.pillbtn{display:block;width:100%;max-width:300px;text-align:center;padding:12px 28px;font-size:14.5px;box-sizing:border-box}
.submitstack form{width:100%;max-width:300px;margin:0}
.submitstack form button{width:100%;max-width:none}
.submitstack button[disabled]{opacity:.45;cursor:not-allowed}

/* Notes tab */
.notesform{display:flex;flex-direction:column;gap:18px;max-width:900px}
.noteslist{display:flex;flex-direction:column;gap:18px}
.notecard .qhead{align-items:center;gap:12px}
.notecard input.notetitle{flex:1;font-weight:600;font-size:15px}
.notecard textarea.notebody{width:100%;field-sizing:content;min-height:84px;line-height:1.5;resize:vertical;margin-top:6px}
.notecard .noteopts:not(:has(*)){display:none}
.notecard .noteopts{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:13px;color:var(--muted)}
.notecard .noteopts label{display:flex;align-items:center;gap:6px}
.notecard button.noteundo[hidden]{display:none}
.notecard button.noteundo,.notecard button.notesave{flex:none;width:34px;height:34px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--muted)}
.notecard button.noteundo:hover,.notecard button.notesave:hover{color:var(--ink);border-color:var(--ink)}
.notecard label.trash{display:flex;align-items:center;flex:none;position:relative;width:34px;height:34px;border-radius:50%;justify-content:center;border:1px solid var(--line);cursor:pointer;color:var(--muted)}
.notecard label.trash:hover{color:var(--ink);border-color:var(--ink)}
.notecard label.trash input{position:absolute;opacity:0;pointer-events:none}
.notecard:has(label.trash input:checked){opacity:.45}
.notecard:has(label.trash input:checked) label.trash{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Statements that aren't approved yet carry a faint DRAFT, like the PDF */
.panel.draftmark{position:relative;overflow:hidden}
.panel.draftmark::after{content:"DRAFT";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-35deg);font-size:clamp(70px,13vw,150px);font-weight:700;letter-spacing:.06em;color:var(--ink);opacity:.045;pointer-events:none;white-space:nowrap}
@media print{.panel.draftmark::after{display:none}}

/* Two-factor setup */
.qrbox{display:inline-block;background:#fff;padding:0;border-radius:12px;margin:8px 0;overflow:hidden;line-height:0}
.qrbox svg.qr{display:block;max-width:100%;height:auto;shape-rendering:crispEdges}
pre.recovery{font-family:var(--mono);font-size:15px;line-height:1.7;background:var(--soft);border-radius:12px;padding:14px 18px;display:inline-block;margin:6px 0}
#twofa form{margin-top:10px}

/* Six-digit code boxes: one real input laid over six boxes */
.otp{position:relative;display:flex;gap:8px;justify-content:center;margin:10px auto;width:fit-content;max-width:100%}
.otp[hidden]{display:none}
.otp-box{flex:0 1 46px;width:46px;min-width:0;height:54px;border:1px solid var(--line);border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--fg);font-variant-numeric:lining-nums tabular-nums}
.otp-box.active{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.otp .otp-input{position:absolute;inset:0;width:100%;height:100%;opacity:1;font-size:16px;border:0;background:transparent;color:transparent;caret-color:transparent;letter-spacing:40px;z-index:1;cursor:text}
form.otpform{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
form.otpform .otp{justify-content:flex-start}
.login .recovery-input[hidden]{display:none}
@media (max-width:420px){.otp{gap:6px}.otp-box{height:50px}}

/* Server storage */
.usebars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.userow{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;align-items:center;gap:14px;font-size:14px}
.userow .ulabel{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userow .utrack{height:12px;background:var(--soft);border-radius:999px;overflow:hidden}
.userow .ufill{display:block;height:100%;background:var(--fg);opacity:.85;border-radius:999px}
.userow .uval{text-align:right;font-variant-numeric:lining-nums tabular-nums}
.userow .uval small{display:block;font-size:11px;color:var(--muted)}
.diskbar{display:flex;height:12px;background:var(--soft);border-radius:999px;overflow:hidden;margin:12px 0 6px}
.diskbar .other{background:var(--line)}
.diskbar .mine{background:var(--fg);opacity:.85}
.diskkey{font-size:12px;color:var(--muted);margin:0}
.diskkey i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px}
.diskkey i:first-child{margin-left:0}
.diskkey .k-mine{background:var(--fg);opacity:.85}.diskkey .k-other{background:var(--line)}
@media (max-width:560px){.userow{grid-template-columns:100px minmax(0,1fr) 84px;gap:10px}}

/* Settings: the Security card's blocks */
.secblock + .secblock{border-top:1px solid var(--line);margin-top:22px;padding-top:6px}
.secblock h3.subhead{margin-top:16px}
dialog.cdialog input:not([type=file]){width:100%}

/* Settings: security card layout and dialog fields */
.secblock .tablewrap.half{width:50%;min-width:360px;margin-top:12px}
.secblock .passkey-add{margin-top:10px}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dlgfields{display:flex;flex-direction:column;gap:18px;margin:20px 0 14px}
.cdialog .otp{margin:20px 0 14px}
.cdialog h2{margin-bottom:6px}

/* Code dialogs opened without modal mode (see floating.js) */
.dlgmask{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.cdialog.floating{position:fixed;inset:0;margin:auto;height:fit-content;z-index:1001}
.otp .otp-input:-webkit-autofill,.otp .otp-input:autofill{-webkit-text-fill-color:transparent;transition:background-color 600000s 0s,color 600000s 0s}

/* The code input is only a transparent layer over the boxes: no pill, ring or fill of its own, and room to its right for the password manager's icon */
.otp .otp-input,.otp .otp-input:focus,.otp .otp-input:focus-visible,.otp .otp-input:hover{outline:none;box-shadow:none;border:0;border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;width:100%;padding:0}

/* the code boxes sit left-aligned in the Settings setup form */
form.otpform .otp{margin-left:0;margin-right:0}

/* a little room after the last box, inside the row (so the input is exactly as wide as the row) for the password manager's icon */
.otp{padding-right:20px;box-sizing:content-box}

/* Settings: a narrower page, and Password beside Two-Factor with Passkeys underneath */
.setpage{max-width:740px;display:flex;flex-direction:column;gap:22px}
.secrow{display:flex;flex-wrap:wrap;gap:12px 64px;align-items:flex-start}
.secrow .secblock + .secblock{border-top:0;margin-top:0;padding-top:0}
.secrow + .secblock{border-top:0;margin-top:6px;padding-top:0}
.secrow .btnrow{margin-top:0}
.secblock .tablewrap.half{width:100%;min-width:0}

/* Settings: accounts and sign-in activity */
.linkbox{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:var(--soft)}
.linkbox .linkrow{display:flex;gap:10px}
.linkbox .linkrow input{flex:1;font-family:var(--mono);font-size:12.5px}
table.accts td{vertical-align:middle}
table.accts tr.off td{color:var(--muted)}
table.accts td.acts{white-space:nowrap}
table.accts td.acts form{display:inline;margin:0 0 0 4px}
form.acctadd{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
form.acctadd input{flex:1 1 180px;width:auto}
form.acctadd select{width:auto}
form.acctadd select[hidden]{display:none}
table.activity tr.bad td{color:var(--bad)}
table.activity td{font-size:13px}

/* DM Sans throughout: every remaining use of the serif now resolves to it, and the sign-in name is set in it */
:root{--serif:var(--sans)}
.login .login-mark{font-family:var(--sans);font-weight:600;font-size:32px;letter-spacing:-.025em}
.login .login-title{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.005em;color:var(--muted)}
aside.side .wm-name{font-weight:600}
a.card .v,.tile .v,.netcard .v,.figs .v,.fytotals .v,.qsums .v{font-weight:600}

/* The real code input is only a transparent layer over the boxes. Chrome paints a filled-in field yellow and shows its text, so the
   whole layer is hidden with a filter (not with opacity, which password managers read as "not a visible field") */
.otp .otp-input{filter:opacity(0)}
.otp .otp-input:-webkit-autofill{-webkit-text-fill-color:transparent!important;box-shadow:none!important;transition:background-color 600000s 0s,color 600000s 0s!important}

/* After signing in: two square cards to choose the portal */
.chooser{width:min(100%,460px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.chooser .login-title{margin-bottom:18px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.choosecard{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;border-radius:var(--radius);
  background:var(--panel);color:var(--fg);border:0;box-shadow:var(--shadow);cursor:pointer;text-align:center;font-family:var(--sans)}
.choosecard:hover{background:var(--soft);opacity:1}
.choosecard svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.choosecard b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.choosecard span{font-size:12.5px;color:var(--muted);line-height:1.35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .choosecard{border:1px solid var(--line)}}
:root[data-theme="dark"] .choosecard{border:1px solid var(--line)}
.chooseout{margin-top:22px}
.login .panel form{margin-top:6px}
/* Sidebar: the director's link to the owners' portal */
aside.side .switchform{margin:0}
aside.side .switchform button{width:100%;display:flex;align-items:center;gap:11px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;
  background:transparent;color:var(--fg);border:0;text-align:left;cursor:pointer}
aside.side .switchform button:hover{background:var(--soft);opacity:1}
aside.side .switchform button svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}

/* The portal chooser: twice the size */
.chooser{width:min(100%,720px);gap:8px}
.chooser .login-mark{font-size:clamp(34px,5vw,46px)}
.chooser .login-title{font-size:clamp(15px,2vw,18px);margin-bottom:28px}
.cards2{gap:clamp(12px,2.4vw,24px)}
.choosecard{gap:12px;padding:clamp(14px,3vw,32px);border-radius:28px}
.choosecard svg{width:clamp(44px,8vw,72px);height:clamp(44px,8vw,72px);margin-bottom:10px;stroke-width:1.4}
.choosecard b{font-size:clamp(17px,3vw,26px)}
.choosecard span{font-size:clamp(12.5px,2vw,16px);max-width:22ch}
.chooseout{margin-top:32px}

/* ===== Sign-in in the style of Wealthsimple's: left-aligned headline, labels inside the fields, full-width buttons ===== */
.login > .panel{aspect-ratio:auto;align-items:stretch;justify-content:flex-start;text-align:left;width:min(100%,460px);padding:44px 40px 40px;gap:0}
.login > .panel .login-mark{font-size:clamp(30px,6vw,38px);font-weight:700;letter-spacing:-.03em;margin:0}
.login > .panel .login-title{font-size:16px;font-weight:500;color:var(--muted);margin:6px 0 28px}
.login > .panel .flash{margin:0 0 16px}
.login .field{position:relative;margin-bottom:16px}
.login .field input{width:100%;height:58px;padding:24px 52px 6px 18px;border-radius:16px;border:1px solid transparent;background:var(--soft);color:var(--fg);font-size:16px}
.login .field input:hover{border-color:var(--line)}
.login .field input:focus,.login .field input:focus-visible{outline:none;border-color:var(--fg);box-shadow:none}
.login .field input[readonly]{color:var(--muted)}
.login .field label{position:absolute;left:18px;top:50%;transform:translateY(-50%);margin:0;color:var(--muted);font-size:16px;font-weight:600;pointer-events:none;
  transition:top .12s,font-size .12s,transform .12s}
.login .field input:focus + label,.login .field input:not(:placeholder-shown) + label,.login .field input:-webkit-autofill + label{top:11px;transform:none;font-size:12px;font-weight:500}
.login .field input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--soft) inset!important;-webkit-text-fill-color:var(--fg)!important;caret-color:var(--fg)}
.login .field .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center}
.login .field .eye:hover{background:var(--line);color:var(--fg);opacity:1}
.login .field .eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login .field .eye[aria-pressed="true"]{color:var(--fg)}
.login button.primary,.login button.outline{width:100%;height:56px;border-radius:999px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}
.login button.primary{background:var(--ink);border:1px solid var(--ink);color:var(--on-ink);margin-top:8px}
.login button.outline{background:transparent;border:1px solid var(--muted);color:var(--fg);margin-top:12px}
.login button.outline:hover{background:var(--soft);opacity:1}
.login button.outline svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login > .panel .note{margin:14px 0 0;text-align:left}
.login > .panel .otp{margin:8px 0 22px;justify-content:flex-start}
.login > .panel .pw-toggle{align-self:flex-start;margin-top:16px}
.login > .panel .recovery-input{margin-bottom:16px}
/* The sign-in pages sit in a wider, centred column (the older rule capped it at 360px, which also held the portal chooser back) */
main.login{max-width:820px;align-items:center}
/* Sign-in at 80% of that size: card, headline, fields and buttons scaled together; the text inside the fields and the headline nudged right */
.login > .panel{width:min(100%,368px);padding:35px 32px 32px}
.login > .panel .login-mark{font-size:clamp(24px,5vw,30px);padding-left:8px}
.login > .panel .login-title{font-size:13px;margin:5px 0 22px;padding-left:8px}
.login > .panel .flash{margin:0 0 13px;font-size:12.5px}
.login .field{margin-bottom:13px}
.login .field input{height:46px;padding:19px 42px 4px 22px;border-radius:13px;font-size:13px}
.login .field label{left:22px;font-size:13px}
.login .field input:focus + label,.login .field input:not(:placeholder-shown) + label,.login .field input:-webkit-autofill + label{top:8px;font-size:10px}
.login .field .eye{right:9px;width:29px;height:29px}
.login .field .eye svg{width:16px;height:16px}
.login button.primary,.login button.outline{height:45px;font-size:13px;gap:8px}
.login button.primary{margin-top:6px}
.login button.outline{margin-top:10px}
.login button.outline svg{width:16px;height:16px}
.login > .panel .note{margin:11px 0 0;font-size:12px}
.login > .panel .otp{margin:6px 0 18px}
/* The general rule for text fields (padding-left 14px) is more specific than the sign-in field's, so it won first: name the same exclusions */
.login .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]){padding-left:28px;padding-right:44px}
.login .field label{left:28px}
/* Sign-in button labels 2pt bigger (13px to about 15.7px) */
.login button.primary,.login button.outline{font-size:15.7px}
.login button.outline svg{width:18px;height:18px}
/* The sign-in and code cards are one size (the sign-in card measures 370px, the code card 366px), so moving between them doesn't resize the card */
.login > .panel{min-height:376px}
/* The chooser's Sign out: the same size and outline look as the sign-in page's buttons */
.chooseout{width:304px;max-width:100%;margin-top:32px}
.chooseout button.outline{margin-top:0}
/* Highlighting a portal card inverts it: black with white text (white with black text in dark mode) */
.choosecard{transition:background .15s,color .15s,border-color .15s,transform .1s}
.choosecard:hover,.choosecard:focus-visible{background:var(--ink);color:var(--on-ink);border-color:var(--ink);opacity:1;outline:none}
.choosecard:hover span,.choosecard:focus-visible span{color:var(--on-ink);opacity:.72}
.choosecard:active{transform:scale(.99)}

/* ===== Owner's Portal: the same look as the management portal, plus its own few pieces ===== */
.feecard{gap:18px}
.feetiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.feetile{background:var(--soft);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.feetile .k{font-size:13px;font-weight:600;color:var(--muted)}
.feetile .v{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.feetile .s{font-size:12.5px;color:var(--muted)}
.feetile.next{background:var(--ink);color:var(--on-ink)}
.feetile.next .k,.feetile.next .s{color:var(--on-ink);opacity:.72}
@media (max-width:720px){.feetiles{grid-template-columns:minmax(0,1fr)}}
.legend .sw.due{background:none;height:0;border-top:2px dashed var(--fg);border-radius:0;width:14px;vertical-align:3px}
svg.feechart .bar.op{fill:var(--s-op)}
svg.feechart .bar.res{fill:var(--s-res)}
svg.feechart .due{stroke:var(--fg);stroke-width:2;stroke-dasharray:5 4}
svg.feechart .hit{fill:transparent}
svg.feechart .fq:hover .hit{fill:var(--soft)}
svg.feechart .fq:hover .bar{opacity:.85}
.profileform{display:flex;flex-direction:column;gap:22px}
.pfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:4px}
.pfields > label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
.pfields > label input,.pfields > label select,.pfields > label textarea{width:100%;font-weight:400;color:var(--fg)}
.pfields > label input[readonly]{color:var(--muted)}
.pfields .span2{grid-column:1 / -1}
.pfields > p.note{margin:-6px 0 0}
@media (max-width:620px){.pfields{grid-template-columns:minmax(0,1fr)}}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:14px}
.checkline input{margin-top:3px}
.formacts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.formacts .note{margin:0}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.fsnotes h3{font-size:14px;margin:14px 0 4px}
.fsnotes h3:first-child{margin-top:0}
.fsnotes p{margin:0;white-space:pre-line;font-size:14px;color:var(--fg)}
.feecard .statrow .v{font-size:15px;display:flex;align-items:center;gap:8px}
.feecard .statrows{gap:6px}
label.checkline{flex-direction:row!important;align-items:flex-start;font-weight:400;color:var(--fg)}
label.checkline input{width:auto!important;flex:none;margin:3px 0 0}