/* SIPs styles. Tokens first; light and dark themes share every component.
   Figures use Anek Latin (condensed), text IBM Plex Sans. Wide screens get a
   left menu, narrow ones a tab bar; forms open in panels over the page. */
:root{
  --bg:#F2F3F7; --card:#FFFFFF; --sunk:#F5F6FA; --field:#F5F6FA;
  --ink:#131A2E; --ink-2:#434C69; --ink-3:#646C8C;
  --line:#E1E4EE; --line-2:#CBD1E0;
  --accent:#2E44B2; --on-accent:#FFFFFF; --accent-soft:#E7EAFA; --accent-ink:#2E44B2;
  --gain:#10704E; --gain-soft:#E1F2EA; --loss:#B3304A; --loss-soft:#F8E4E8; --warn:#8A5A00; --warn-soft:#FBF0DA;
  --c1:#2F4BA0; --c2:#B7820A; --c3:#AE3A7C; --c4:#7361C2; --c5:#008C84; --c6:#A0561F; --c-other:#8A93A6;
  --code-bg:#121A2C; --code-gutter:#0D1424; --code-ink:#DCE3F2; --code-muted:#5E6A86;
  --shadow:0 1px 2px rgba(19,26,46,.05),0 12px 32px -20px rgba(19,26,46,.3);
  --shadow-lg:0 24px 60px -24px rgba(19,26,46,.45);
  --scrim:rgba(19,26,46,.36);
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fig:'Anek Latin','IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* names the chart code reads */
  --muted:var(--ink-3); --rule:var(--line); --rule-2:var(--line-2); --sheet:var(--card); --stamp:var(--accent); --wd:var(--loss); --ok:var(--gain); --cond:var(--fig);
  --r:20px; --r-sm:12px; --nav-w:240px; --tab-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1020; --card:#151B2F; --sunk:#10162A; --field:#10162A;
    --ink:#E9ECF6; --ink-2:#B4BBD4; --ink-3:#8F97B3;
    --line:#262E49; --line-2:#36405F;
    --accent:#98A7FF; --on-accent:#0B1020; --accent-soft:#232B52; --accent-ink:#B6C1FF;
    --gain:#5FD3A1; --gain-soft:rgba(95,211,161,.13); --loss:#FF8FA3; --loss-soft:rgba(255,143,163,.13); --warn:#F2C46B; --warn-soft:rgba(242,196,107,.12);
    --c1:#6F8CE0; --c2:#B98918; --c3:#D1528B; --c4:#7A59C3; --c5:#009E95; --c6:#B66028; --c-other:#5C6782;
    --code-bg:#0A101E; --code-gutter:#070C18; --code-ink:#DCE3F2; --code-muted:#56617C;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px -20px rgba(0,0,0,.8);
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.85);
    --scrim:rgba(3,6,14,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1020; --card:#151B2F; --sunk:#10162A; --field:#10162A;
  --ink:#E9ECF6; --ink-2:#B4BBD4; --ink-3:#8F97B3;
  --line:#262E49; --line-2:#36405F;
  --accent:#98A7FF; --on-accent:#0B1020; --accent-soft:#232B52; --accent-ink:#B6C1FF;
  --gain:#5FD3A1; --gain-soft:rgba(95,211,161,.13); --loss:#FF8FA3; --loss-soft:rgba(255,143,163,.13); --warn:#F2C46B; --warn-soft:rgba(242,196,107,.12);
  --c1:#6F8CE0; --c2:#B98918; --c3:#D1528B; --c4:#7A59C3; --c5:#009E95; --c6:#B66028; --c-other:#5C6782;
  --code-bg:#0A101E; --code-gutter:#070C18; --code-ink:#DCE3F2; --code-muted:#56617C;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px -20px rgba(0,0,0,.8);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.85);
  --scrim:rgba(3,6,14,.6);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
a{color:var(--accent-ink)}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:22px;height:22px;flex-shrink:0;vertical-align:middle}
.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.fig,.big{font-family:var(--fig);font-variant-numeric:tabular-nums lining-nums;font-stretch:92%;letter-spacing:-.01em}
.good{color:var(--gain)} .bad{color:var(--loss)} .neg{color:var(--loss)}
.on-dark{display:none}
:root[data-shown="dark"] .on-dark{display:inline-flex} :root[data-shown="dark"] .on-light{display:none}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.app{min-height:100vh}
.sidenav{display:none}
.main{display:block;padding:8px 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom,0px));max-width:1200px;margin:0 auto;outline:none}
.view,#homeBody,#pfBody,#cmpBody,#fcBody{display:flex;flex-direction:column;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--fig);font-size:25px;font-weight:700;font-stretch:95%}
.logo{width:30px;height:30px}
.logo-bg{fill:var(--accent)} .logo-fg{fill:var(--on-accent)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);font-size:12px;font-weight:500;text-decoration:none}
.tb[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.tb:hover{color:var(--ink)}
.desk-only{display:none!important}
@media (min-width:1024px){
  .sidenav{display:flex;flex-direction:column;gap:6px;position:fixed;inset:0 auto 0 0;width:var(--nav-w);padding:24px 16px 20px;background:var(--card);border-right:1px solid var(--line);z-index:20;overflow:auto}
  .sidenav .brand{padding:0 8px 22px;font-size:26px}
  .sidenav .logo{width:32px;height:32px}
  .nav{display:flex;flex-direction:column;gap:4px}
  .nav a{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:12px;color:var(--ink-2);font-weight:500;text-decoration:none}
  .nav a:hover{background:var(--sunk);color:var(--ink)}
  .nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
  .nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
  .main{margin-left:var(--nav-w);padding:32px 40px 56px;max-width:none}
  .view{max-width:1160px;margin:0 auto;gap:20px}
  #homeBody,#pfBody,#cmpBody{gap:20px}
  .tabbar,.phone-only{display:none!important}
  .desk-only{display:revert!important}
  .vhead .vtitle.desk-only{display:block!important}
}
.nav-btn{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font-weight:500;text-align:left}
.nav-btn:hover{background:var(--sunk);color:var(--ink)}
.sync-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);text-align:left;color:var(--ink)}
.sync-card:hover{border-color:var(--line-2)}
.sc-top{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.sc-top .ic{width:18px;height:18px;color:var(--ink-3)}
.sync-card.ok .sc-top .ic{color:var(--gain)} .sync-card.warn .sc-top .ic{color:var(--loss)}
.sc-sub{font-size:12.5px;color:var(--ink-3);line-height:1.35}

/* view headers */
.vhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.vhead.stack{flex-direction:column;align-items:flex-start;gap:2px}
.vtitle{font-family:var(--fig);font-size:28px;font-weight:650;font-stretch:92%}
.vhead .vtitle.desk-only{display:none}
.vhead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vhead .btn-icon{margin-left:-8px}
.vhead.back{justify-content:flex-start;gap:4px}
@media (min-width:1024px){.vtitle{font-size:34px}}

/* ---------- cards and grid ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;min-width:0}
.card.flush{padding:0;overflow:hidden}
.card h2{font-size:17px;font-weight:600}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-head.wrap{flex-wrap:wrap}
.card-head.stack{flex-direction:column;align-items:flex-start;gap:2px}
.card-link{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;margin:4px -16px -16px;border-top:1px solid var(--line);font-size:14px;font-weight:500;text-decoration:none}
.card-link .ic{width:18px;height:18px}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .card{padding:20px 22px}
  .card-link{margin:4px -22px -20px}
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span8{grid-column:span 8} .span4{grid-column:span 4}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08);color:var(--on-accent)}
.btn .ic{width:20px;height:20px}
.btn.quiet{background:var(--accent-soft);color:var(--accent-ink)}
.btn.quiet:hover{color:var(--accent-ink);filter:none;background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent) 20%)}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:12px}
.btn.sm .ic{width:18px;height:18px}
.btn.wide{width:100%}
.btn:disabled{opacity:.55;cursor:default;filter:none}
.btn-icon{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);text-decoration:none}
.btn-icon:hover{background:var(--sunk);color:var(--ink)}
.linkish{border:0;background:none;padding:0;color:var(--accent-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish.danger{color:var(--loss)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
label.btn{cursor:pointer}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;padding:12px 6px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;font-weight:500;line-height:1.25;text-align:center;text-decoration:none}
.act .ic{color:var(--accent-ink)}
.act:hover{border-color:var(--line-2);color:var(--ink)}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;min-width:0;border:0;padding:0}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2)}
.lbl small{font-size:12px;color:var(--ink-3);font-weight:400;text-align:right}
.lbl output{font-family:var(--fig);font-size:15px;font-weight:600;color:var(--ink)}
.box{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--field)}
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.box input,.box select{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;height:44px}
.box.num{min-width:0}
.box.num input{width:5.5em;flex:none}
.pre,.post{color:var(--ink-3);font-size:14px;white-space:nowrap}
.hint{font-size:12.5px;color:var(--ink-3);min-height:0}
.hint.bad,.bad.hint{color:var(--loss)}
.note{font-size:13.5px;color:var(--ink-2);line-height:1.55}
input[type=range]{--fill:50%;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--fill),var(--line) var(--fill))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--fill),var(--line) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--card);border:2px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--accent)}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--sunk);border:1px solid var(--line);gap:2px;max-width:100%}
.seg label{position:relative;flex:1;display:flex}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label>span,.seg .seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-3);font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer}
.seg input:checked+span,.seg .seg-btn[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.seg .ic{width:18px;height:18px}
.seg.block{display:flex;width:100%;padding:2px}
.seg.stack{display:flex;flex-direction:column;width:100%}
.seg.stack label>span{justify-content:flex-start;padding:8px 12px;white-space:normal;text-align:left}
/* The words stay readable by screen readers when only the icons show. */
.seg.ctype label{position:relative}
.seg.ctype .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:1024px){.seg.ctype .t{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
@media (max-width:1279px){.mix-type .seg.ctype .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.wide-seg{display:flex;width:100%}
.switch{position:relative;display:inline-block;width:46px;height:28px;flex-shrink:0}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:14px;background:var(--line-2);transition:background .15s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.radio-line{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14.5px;cursor:pointer}
.radio-line input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
details.how{margin:6px 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;background:var(--sunk)}
details.how summary{min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer}
.steps-mini{margin:0 0 12px;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.steps-mini li+li{margin-top:6px}
code{font-family:var(--mono);font-size:.9em;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:0 4px}

/* the planner's input panel */
.panel-body section+section,.panel-body section+details{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.panel-body h2{font-size:16px;font-weight:600;margin-bottom:12px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-head h2{margin:0}
.swp-fields.off{opacity:.45;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);font-family:var(--fig);font-size:15px;font-weight:600}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.chip button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:17px;line-height:1}
.chip button:hover:not(:disabled){background:var(--line);color:var(--ink)}
.chip button:disabled{opacity:.3;cursor:default}
.add{display:flex;gap:8px;margin-top:8px}
.add .box{flex:1}
.btn-add{min-height:46px;padding:0 16px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
details#conventions{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
details#conventions summary{min-height:44px;display:flex;align-items:center;font-weight:500;color:var(--ink-2);cursor:pointer}

/* ---------- pickers (a friendlier face for a <select>) ---------- */
.box.sel{padding:0}
.pick-native{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px}
.pick-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 12px;border:0;background:transparent;text-align:left;font-weight:500}
.pick-val{display:flex;flex-direction:column;min-width:0}
.pick-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-val small{font-size:12px;color:var(--ink-3);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-btn .chev{width:18px;height:18px;color:var(--ink-3)}
.pick-panel{position:fixed;z-index:80;display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.pick-panel.open{display:flex}
.pick-head{display:none;align-items:center;justify-content:space-between;padding:8px 8px 4px 16px}
.pick-search{display:flex;align-items:center;gap:8px;margin:8px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--field)}
.pick-search .ic{width:18px;height:18px;color:var(--ink-3)}
.pick-search input{flex:1;height:40px;border:0;background:transparent;outline:none;font-size:15px}
.pick-panel ul{list-style:none;margin:0;padding:4px;overflow:auto;outline:none}
.pick-panel li[role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer}
.pick-panel li.is-active{background:var(--sunk)}
.pick-panel li[aria-selected="true"]{color:var(--accent-ink);font-weight:600}
.pick-opt{display:flex;flex-direction:column;min-width:0}
.pick-opt small{font-size:12px;color:var(--ink-3);font-weight:400}
.pick-panel .tick{width:18px;height:18px}
.pick-group{padding:10px 10px 4px;font-size:12px;font-weight:600;color:var(--ink-3)}
.pick-none{padding:14px;color:var(--ink-3)}
.pick-panel.sheet-mode{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:78vh!important;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.pick-panel.sheet-mode .pick-head{display:flex}
.pick-panel.sheet-mode li[role=option]{min-height:48px}
html.pick-sheet-open::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:79}

/* ---------- combo lists (search as you type) ---------- */
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:320px;overflow:auto;list-style:none;margin:0;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.combo-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:9px 10px;border-radius:9px;cursor:pointer;line-height:1.35}
.combo-list li[aria-selected="true"],.combo-list li:hover{background:var(--sunk)}
.combo-list .cl-meta{flex-basis:100%;font-size:12.5px;color:var(--ink-3)}
.combo-list .cl-kind{font-size:11.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:1px 6px}
.combo-list .cl-head{padding:8px 10px 4px;font-size:12px;font-weight:600;color:var(--ink-3);cursor:default}
.combo-list .cl-head:hover{background:none}
.tagp{font-size:11.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:0 5px}
.search{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:48px;padding:6px 12px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);cursor:text}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search .ic{width:18px;height:18px;color:var(--ink-3)}
.search input{flex:1;min-width:160px;height:34px;border:0;background:transparent;outline:none;font-size:16px}
.chips-in{display:contents}
.bench-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.xchip{display:inline-flex;align-items:center;gap:2px;height:32px;max-width:100%;padding:0 2px 0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:600}
.xchip.fund{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.xchip>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xchip button{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit}
.xchip button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.xchip .ic{width:15px;height:15px}

/* ---------- panels: a drawer on wide screens, a sheet on phones ---------- */
.panel{position:fixed;z-index:60;display:flex;flex-direction:column;background:var(--card);box-shadow:var(--shadow-lg);outline:none;
  left:0;right:0;bottom:0;max-height:92vh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheet-up .22s ease-out}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 12px 20px;border-bottom:1px solid var(--line)}
.ph-text{display:flex;flex-direction:column;min-width:0}
.ph-text b{font-size:17px}
.ph-sum{font-size:13px;color:var(--ink-3)}
.panel-body{padding:16px 20px 24px;overflow:auto;overscroll-behavior:contain}
.panel-foot{display:flex;gap:10px;padding:12px 20px;border-top:1px solid var(--line);background:var(--card)}
.panel-foot .btn:first-child{flex:1}
.scrim{position:fixed;inset:0;z-index:55;background:var(--scrim);display:none}
html.panel-open .scrim{display:block}
html.panel-open{overflow:hidden}
@media (min-width:760px){
  .panel{left:auto;top:0;right:0;bottom:0;width:440px;max-height:none;border-radius:22px 0 0 22px;animation:drawer-in .2s ease-out}
  html.panel-open{overflow:visible}
  html.panel-light .scrim{background:color-mix(in srgb,var(--scrim) 30%,transparent)}
}
@keyframes sheet-up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes drawer-in{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.drop{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px;margin:14px 0;border:2px dashed var(--line-2);border-radius:16px;background:var(--sunk);cursor:pointer}
.drop:hover,.drop:focus-within{border-color:var(--accent)}
.drop .ic{width:28px;height:28px;color:var(--accent-ink)}
.drop span{display:flex;flex-direction:column}
.drop small{font-size:13px;color:var(--ink-3)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:11px 10px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.tbl th{border-top:0;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.tbl th:first-child,.tbl td:first-child{text-align:left;padding-left:16px}
.tbl th:last-child,.tbl td:last-child{padding-right:16px}
.card:not(.flush) .tbl th:first-child,.card:not(.flush) .tbl td:first-child{padding-left:0}
.card:not(.flush) .tbl th:last-child,.card:not(.flush) .tbl td:last-child{padding-right:0}
.tbl td.n,.tbl td.strong{font-family:var(--fig);font-size:16px;font-weight:600}
.tbl tr.total td{font-weight:600}
.tbl .dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:8px;vertical-align:1px}
.pick tbody tr{cursor:pointer}
.pick tbody tr:hover{background:var(--sunk)}
.pick tr.is-sel{background:var(--accent-soft)}
.pick .ok{color:var(--gain)} .pick .bad{color:var(--loss)}

/* ---------- charts ---------- */
.chart-box{position:relative;height:260px}
.chart-box.tall{height:320px}
.chart-box.auto{height:auto}
@media (min-width:1024px){.chart-box{height:300px}.chart-box.tall{height:360px}}
.chart-fallback{display:grid;place-items:center;height:100%;color:var(--ink-3);font-size:14px;text-align:center;padding:16px}
.legend-mini{display:flex;gap:14px;font-size:12.5px;color:var(--ink-2)}
.legend-mini span{display:inline-flex;align-items:center;gap:6px}
.legend-mini .ln{width:16px;height:3px;border-radius:2px;background:var(--accent)}
.legend-mini .ln.dash{height:0;border-top:2px dashed var(--c2);background:none}
@media (max-width:520px){.legend-mini{display:none}}
.mix-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center}
.mix-body .mix-chart{height:170px}
@media (min-width:560px) and (max-width:1023px){.mix-body{grid-template-columns:170px minmax(0,1fr)}}
.mix-body.bars{grid-template-columns:minmax(0,1fr)}
.mix-body.bars .mix-chart{height:auto}
.mix-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;min-width:0}
.mix-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:8px}
.mix-legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.mix-legend .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix-legend .v{color:var(--ink-3);font-size:12.5px}
.mix-legend .s{font-family:var(--fig);font-size:15px;font-weight:600;min-width:3.2em;text-align:right}
.mix-legend .tot{border-top:1px solid var(--line);padding-top:7px}
.mix-legend .tot i{background:none}
.mix-type{display:flex;justify-content:flex-end;margin-top:12px}
.mix-by .box{min-height:38px;border-radius:10px}
.mix-by .pick-btn{min-height:36px;font-size:13.5px}
.mix-by{margin:0;min-width:150px}
.bars.mix-body .mix-legend{display:none}

/* ---------- Home ---------- */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:4px 4px 0}
.hero-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.eyebrow{font-size:13.5px;color:var(--ink-3)}
.big{font-size:46px;font-weight:650;line-height:1.05}
.hero-line{font-size:15px}
.hero-line .gain{font-weight:600}
.hero-day{font-size:13.5px;font-weight:600}
.xirr-chip{align-self:flex-start;margin-top:8px;background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600}
.hero-actions{display:flex;gap:10px}
@media (min-width:1024px){.big{font-size:60px}}
.gain{color:var(--gain)} .loss{color:var(--loss)}
.sync-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:500;text-decoration:none}
.sync-chip .ic{width:16px;height:16px;color:var(--gain)}
.sync-chip.busy .ic{color:var(--ink-3)} .sync-chip.warn .ic{color:var(--loss)}
.next-list{list-style:none;margin:0;padding:0}
.next-list li{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.next-list .day{width:44px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.next-list .day b{font-family:var(--fig);font-size:22px;font-weight:650;line-height:1}
.next-list .day small{font-size:11.5px;color:var(--ink-3)}
.next-list .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.next-list .who b{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.next-list .who small{font-size:12.5px;color:var(--ink-3)}
.next-list .amt{font-family:var(--fig);font-size:17px;font-weight:600}
.next-list .none{justify-content:center;color:var(--ink-3);font-size:14px}
/* Home: every SIP this month, done or pending, in a list that scrolls on its own. */
.month-bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin:2px 0 8px}
.month-bar i{display:block;height:100%;background:var(--gain);border-radius:3px}
.month-list{max-height:372px;overflow-y:auto;overscroll-behavior:contain;margin-right:-6px;padding-right:6px}
.month-list:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.month-list .amt-col{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.month-list .st{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px}
.month-list .st .ic{width:12px;height:12px}
.month-list .st.done{background:var(--gain-soft);color:var(--gain)}
.month-list .st.today{background:var(--warn-soft);color:var(--warn)}
.month-list .st.due{background:var(--sunk);color:var(--ink-2)}
.month-list .st-done .day b,.month-list .st-done .amt{color:var(--ink-3)}
#homeNextNote{margin:8px 0 0}
/* Portfolio: SIP debits by day of the month. */
.debit-list{list-style:none;margin:6px 0 0;padding:0}
.debit-list .dgrp{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.debit-list .dgrp[hidden]{display:none}
.dday{width:44px;flex-shrink:0;display:flex;align-items:baseline;justify-content:center;gap:1px;padding-top:1px}
.dday b{font-family:var(--fig);font-size:22px;font-weight:650;line-height:1}
.dday small{font-size:12px;color:var(--ink-3)}
.debit-list ul{flex:1;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.debit-list ul li{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:10px;align-items:center;min-height:26px;font-size:14px}
.debit-list .nm{display:flex;align-items:baseline;gap:6px;min-width:0}
.debit-list .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.debit-list .nm small{flex-shrink:0;font-size:12px;color:var(--ink-3)}
.debit-list .am{font-family:var(--fig);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums}
.debit-list .st{display:grid;place-items:center;color:var(--gain)}
.debit-list .st .ic{width:14px;height:14px}
.debit-list .dsum{border-top:1px dashed var(--line);padding-top:4px;color:var(--ink-3);font-size:13px}
.debit-list .dsum .am{color:var(--ink-2);font-size:14px}
.debit-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin-top:6px}
.debit-foot .linkish{min-height:40px;font-size:14px}
.debit-foot .muted{flex:1 1 220px}
.debit-foot .muted .linkish{min-height:0;font-size:inherit}
/* SIP details panel: the SIP at a glance. */
.sip-facts{margin:0 0 4px;padding:4px 12px;border-radius:12px;background:var(--sunk);display:flex;flex-direction:column}
.sip-facts[hidden]{display:none}
.sip-facts>div{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.sip-facts>div:first-child{border-top:0}
.sip-facts dt{color:var(--ink-3)}
.sip-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.sip-facts small{font-weight:400;color:var(--ink-3)}
/* Transaction history panel. */
.txn-sum{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px;padding:12px;border-radius:12px;background:var(--sunk)}
.txn-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.txn-sum span{font-size:12px;color:var(--ink-3)}
.txn-sum b{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.txn-filter span{height:34px;padding:0 12px;font-size:13px}
.txn-filter small{margin-left:4px;opacity:.75}
.txn-filter[hidden]{display:none}
.txn-list{display:flex;flex-direction:column}
.txn-year{margin:10px 0 0;padding:6px 0;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.txn-list ul{list-style:none;margin:0;padding:0}
.txn{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;align-items:baseline}
.txn .d{font-weight:600}
.txn .a{text-align:right;font-variant-numeric:tabular-nums}
.txn .a.out{color:var(--loss)}
.txn .m{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.txn .m.r{text-align:right;white-space:nowrap}
.tp{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--sunk);color:var(--ink-2)}
.tp-sip{background:var(--accent-soft);color:var(--accent-ink)}
.tp-buy{background:var(--warn-soft);color:var(--warn)}
.tp-sell{background:var(--loss-soft);color:var(--loss)}
.txn-mark{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600}
.txn-mark .ic{width:16px;height:16px;flex-shrink:0}
.txn-mark.up{background:var(--gain-soft);color:var(--gain)}
.txn-mark.down{background:var(--warn-soft);color:var(--warn)}
.welcome{display:flex;flex-direction:column;gap:12px;padding:22px 20px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.welcome h2{font-family:var(--fig);font-size:26px;font-weight:650}
.welcome p{color:var(--ink-2);max-width:62ch}
.welcome-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:6px}
.welcome-links a{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}
.welcome-links a:hover{border-color:var(--line-2)}
.welcome-links .ic{color:var(--accent-ink)}
.welcome-links span{display:flex;flex-direction:column}
.welcome-links small{color:var(--ink-3);font-size:13px}

/* ---------- Portfolio ---------- */
.figs4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
@media (min-width:1024px){.figs4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (max-width:1023px){.figs4>:nth-child(5):last-child{grid-column:1/-1}}
.figs4 .k{font-size:12.5px;color:var(--ink-3)}
.figs4 .v{font-family:var(--fig);font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
.figs4 .d{font-size:12.5px;color:var(--ink-3)}
.pf-scope{margin:0;min-width:200px;flex:1;max-width:340px}
.group-by{display:flex;flex-direction:column;gap:8px}
@media (min-width:760px){.group-by{flex-direction:row;align-items:center;gap:12px}}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative}
.pills input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pills span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer}
.pills input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pills input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.groups{display:flex;flex-direction:column;gap:12px}
.grp{display:flex;flex-direction:column;gap:12px}
.grp-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.grp-head{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;border:0;background:transparent;text-align:left;color:var(--ink)}
.grp-head:hover{background:var(--sunk)}
.grp-bar{width:6px;height:38px;border-radius:3px;background:var(--c);flex-shrink:0}
.grp-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grp-name b{font-size:16px;font-weight:600}
.grp-name small{font-size:12.5px;color:var(--ink-3)}
.grp-fig{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.grp-fig b{font-family:var(--fig);font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
.grp-fig small{font-size:12.5px;font-weight:600}
.grp-head .chev{width:18px;height:18px;color:var(--ink-3);transition:transform .15s}
.grp-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.grp-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px 34px;margin-top:-4px}
.grp-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px;align-items:start}
.grp-body[hidden]{display:none}
/* Each fund is its own card: name and worth, pills, then Overview / SIP / History / Folio tabs. */
.hold{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);min-width:0}
.hold-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hold-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.hold-name{font-size:16px;font-weight:600;line-height:1.3}
.hold-sub{font-size:12.5px;color:var(--ink-3)}
.hold-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hold-worth{font-family:var(--fig);font-size:22px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.1}
.hold-val .pct{font-size:13px;font-weight:600;white-space:nowrap}
.pills-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.pill{display:inline-flex;align-items:center;gap:4px;max-width:100%;font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px;background:var(--sunk);color:var(--ink-2)}
.pill .ic{width:13px;height:13px;flex-shrink:0}
.pill.step{background:var(--accent-soft);color:var(--accent-ink)}
.pill.ok{background:var(--gain-soft);color:var(--gain)}
.hold-tabs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:11px}
.hold-tabs [role="tab"]{min-height:36px;padding:0 4px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hold-tabs [role="tab"]:hover{color:var(--ink)}
.hold-tabs [role="tab"][aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.hold-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hold-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.hold-panel[hidden]{display:none}
.hold-panel>.btn{align-self:flex-start}
.hold-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hold-figs>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.hold-figs span{font-size:12px;color:var(--ink-3)}
.hold-figs b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.hold-nav{margin:0;font-size:12.5px;color:var(--ink-2)}
.hold-nav b{font-weight:600;color:var(--ink);white-space:nowrap}
.sip-steps{display:flex;flex-direction:column;gap:6px}
.sip-steps>b{font-size:13.5px;font-weight:600}
.sip-steps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sip-steps li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.sip-steps li .ic{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.sip-steps li.up .ic{color:var(--gain)}.sip-steps li.down .ic{color:var(--warn)}
.hold-nav b.gain{color:var(--gain)}.hold-nav b.loss{color:var(--loss)}
.hold-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hold-err{margin:0;font-size:13px;color:var(--loss)}
.hold .muted.small{margin:0}
.hold-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.btn-icon.soft{width:44px;height:44px;border-radius:12px;background:var(--sunk);color:var(--ink-2)}
.btn-icon.soft[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.hold-extra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:var(--sunk)}
.hold-extra[hidden]{display:none}
.hold-extra .linkish{min-height:36px;font-size:13.5px}
.hold-hsum{margin:0;font-size:12.5px;color:var(--ink-3)}
.txn-mini{list-style:none;margin:0;padding:0}
.txn-mini .txn:first-child{border-top:0;padding-top:2px}
.hold-dl{margin:0;display:grid;gap:8px;font-size:13px}
.hold-dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px}
.hold-dl dt{color:var(--ink-3)}
.hold-dl dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.hold-dl dd a{display:inline-flex;align-items:center;gap:3px}
.hold-dl dd a .ic{width:13px;height:13px}
.hold-dl .load{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.hold-dl .folio{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
@media (max-width:520px){.hold-dl>div{grid-template-columns:1fr;gap:1px}}
.tagchip{display:inline-flex;align-items:center;gap:4px;min-height:26px;font-size:12px;font-weight:500;border-radius:7px;padding:2px 8px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
.tagchip .ic{width:14px;height:14px}
.tagchip.ok{color:var(--gain);background:var(--gain-soft);border-color:transparent}
.tagchip.warn{color:var(--loss);background:var(--loss-soft);border-color:transparent}
.tagchip.sip-on{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent;font-weight:600}
.tagchip.sip-off{color:var(--ink-3);background:transparent;border-style:dashed}
button.tagchip{cursor:pointer}
.warn-text{color:var(--loss)}
button.tagchip:hover{border-color:var(--line-2);color:var(--ink)}
.login{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.login:hover{color:var(--accent-ink);background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent) 20%)}
.login .ic{width:15px;height:15px}
.goal-edit{display:inline-flex;align-items:center;gap:6px}
.goal-edit input{height:32px;width:170px;padding:0 10px;border:1px solid var(--accent);border-radius:8px;background:var(--field);font-size:14px}
.info-card{display:flex;flex-direction:column;gap:12px}
.ic-row{display:flex;gap:12px;align-items:flex-start}
.ic-row .ic{color:var(--accent-ink);margin-top:2px}
.ic-row div{display:flex;flex-direction:column;gap:3px}
.ic-row span{font-size:13.5px;color:var(--ink-3);line-height:1.45}
.list-card h2{margin-bottom:8px}
.list-card p{margin-top:8px}
.link-list{list-style:none;margin:0;padding:0}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.link-list span{display:flex;flex-direction:column}
.link-list b{font-weight:500}
.link-list small{font-size:12.5px;color:var(--ink-3)}
.link-list .ic{width:18px;height:18px;color:var(--ink-3)}
.notes-list{margin:0;padding:12px 16px 12px 32px;font-size:13px;color:var(--ink-2);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);line-height:1.55}
.notes-list li+li{margin-top:6px}

/* ---------- Explore ---------- */
.filters{display:flex;flex-direction:column;gap:14px}
.filter-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.filters-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font-weight:600;text-align:left}
.filters-toggle .muted{flex:1;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filters-toggle .chev{width:18px;height:18px;color:var(--ink-3);transition:transform .15s}
.filters.more .filters-toggle .chev{transform:rotate(180deg)}
@media (max-width:759px){
  .filters-toggle{display:flex}
  .filters:not(.more) .filter-row{display:none}
  .filters{gap:6px}
  .grp-links{padding:0 14px 12px}
  .figs4 .v{font-size:21px}
}
.figs4 .v{white-space:nowrap}
.filter-row .field{margin:0}
.filter-row .ex-metric{min-width:220px;flex:1 1 220px;max-width:340px}
.filter-row .ex-amc{min-width:180px;flex:1 1 180px;max-width:280px}
.filter-row .linkish{min-height:44px;font-size:14px}
.ex-viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ex-count{font-size:14px;color:var(--ink-2)}
.fresh{font-size:13px;color:var(--ink-3);line-height:1.5}
.fresh details{margin-top:4px}
.fresh summary{cursor:pointer;color:var(--ink-2)}
.fresh .warn{color:var(--warn)}
.fresh .gaps summary{color:var(--ink-2);font-weight:600}
.fresh .gaps ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.fresh .gaps li{color:var(--ink-2)}
.funds td{vertical-align:middle}
.funds .rk{width:36px;color:var(--ink-3);text-align:left}
.funds .cmpc{width:40px}
.funds .cmpc input,.fcard input{width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer}
.funds th.fundh,.funds td.fund{text-align:left;white-space:normal;min-width:250px;max-width:340px}
.funds th,.funds td{padding:10px 8px}
.funds td.cmpc,.funds th.cmpc{padding-left:16px}
.fund .fn{display:block;font-weight:600;font-size:14.5px}
.fund .fa{display:block;font-size:12.5px;color:var(--ink-3)}
.th-sort{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:3px;min-height:32px;white-space:nowrap;border-radius:6px}
.th-sort:hover{color:var(--ink)}
.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.th-sort.on{color:var(--ink);font-weight:600}
.th-sort .arr{font-size:10px;min-width:8px}
.ex-sort{display:flex;align-items:center;gap:8px}
.ex-sort .box.sel{min-width:150px}
.funds th.is-rank{color:var(--ink);font-weight:600}
.funds td.is-rank{font-weight:700}
.funds tbody tr{cursor:pointer}
.funds tbody tr:hover{background:var(--sunk)}
.funds tr.is-sel{background:var(--accent-soft)}
.funds .loading{text-align:left;color:var(--ink-3);padding:18px 16px;white-space:normal}
.gapnote{display:inline-block;margin-top:3px;font-size:12px;color:var(--ink-2);background:var(--sunk);border-radius:6px;padding:2px 7px}
.fcards{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:10px}
.fcard{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.fcard.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.fc-top{display:flex;gap:10px;align-items:flex-start}
.fc-rk{width:30px;height:30px;flex-shrink:0;border-radius:10px;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--fig);font-size:15px;font-weight:650;color:var(--ink-2)}
.fc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fc-main .fn{font-size:15px;font-weight:600}
.fc-main .fa{font-size:12px;color:var(--ink-3)}
.fc-cmp{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);min-height:32px;cursor:pointer}
.fc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-left:40px}
.fc-nums span{display:flex;flex-direction:column}
.fc-nums b{font-family:var(--fig);font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.fc-nums small{font-size:12px;color:var(--ink-3)}
.fc-nums .hl b{color:var(--accent-ink)}
.fcard .gapnote{margin-left:40px}
@media (min-width:1024px){.fcards{display:none}}
@media (max-width:1023px){#exTableWrap{display:none}#exResults{background:transparent;box-shadow:none}.fcards{padding:0}}
.ex-chart{padding:12px 16px}
.ex-more{padding:0 4px}
.method summary{min-height:40px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.method ul{padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.method li+li{margin-top:6px}
.method p{font-size:13.5px;color:var(--ink-2);margin-top:8px}
.dt-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dt-head h3{font-size:19px;font-weight:600}
.dt-sub{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.dt-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0;font-size:13.5px;color:var(--ink-2)}
.dt-facts b{color:var(--ink);font-weight:600}
.dt-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chart-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.dt-note{font-size:13px;color:var(--ink-2)}
.dt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chart-box.sm{height:240px}
.tray{position:fixed;z-index:35;left:12px;right:12px;bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;background:var(--ink);color:var(--bg);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.tray-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tray-text b{font-size:14.5px}
.tray-text span{font-size:12.5px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray .linkish{color:var(--bg);opacity:.85}
.tray-clear{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);background:transparent;color:var(--bg);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.tray-clear:hover{background:color-mix(in srgb,var(--bg) 12%,transparent)}
.tray-clear:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
.tray-clear .ic{width:16px;height:16px}
@media (max-width:400px){.tray-clear span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tray-clear{padding:0 10px}}
@media (min-width:1024px){.tray{left:calc(var(--nav-w) + 40px);right:40px;bottom:20px;max-width:720px;margin:0 auto}}
body:has(.tray:not([hidden])) .main{padding-bottom:calc(var(--tab-h) + 110px)}

/* ---------- Compare ---------- */
.cmp-legend{list-style:none;margin:8px 0 0;padding:0}
.cmp-legend li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.cmp-legend .sw{width:20px;height:0;border-top:3px solid var(--c);flex-shrink:0}
.cmp-legend .sw.dash{border-top-style:dashed;border-top-width:2px}
.cmp-legend .sw.dot{border-top-style:dotted;border-top-width:3px}
.cmp-legend .nm{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
.cmp-legend .nm small{font-size:12px;color:var(--ink-3)}
.cmp-legend .val{display:flex;flex-direction:column;align-items:flex-end}
.cmp-legend .val b{font-family:var(--fig);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.cmp-legend .val small{font-size:12px;color:var(--ink-3)}
.cmp-legend .rm{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);display:grid;place-items:center}
.cmp-legend .rm:hover{background:var(--sunk);color:var(--ink)}
.cmp-legend .rm .ic{width:16px;height:16px}
@media (max-width:759px){
  .cmp-legend li{flex-wrap:wrap;row-gap:4px}
  .cmp-legend .nm{flex:1 1 calc(100% - 70px)}
  .cmp-legend .rm{order:2}
  .cmp-legend .val{order:3;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding-left:30px}
  .cmp-legend .val:empty{display:none}
}
/* ---------- Home: the family summary (read-only) ---------- */
.family-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.family-list li+li{border-top:1px solid var(--line)}
.fam-row{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 4px;cursor:pointer;border-radius:10px}
.fam-row:hover:not([disabled]){background:var(--sunk)}
.fam-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fam-row[disabled]{cursor:default}
.fam-row .who,.fam-funds .nm{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14.5px}
.fam-row .who small,.fam-funds small{font-size:12.5px;color:var(--ink-3);font-weight:400}
.fam-row .fig,.fam-funds .fig{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:none}
.fam-row .fig b,.fam-funds .fig b{font-family:var(--fig);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.fam-figs{margin-bottom:14px}
.fam-funds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fam-funds li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.fam-funds .fig small{max-width:190px}
@media (max-width:759px){.fam-funds li{flex-direction:column;gap:4px}.fam-funds .fig{align-items:flex-start;text-align:left}.fam-funds .fig small{max-width:none}}
#cmpHome{display:flex;flex-direction:column;gap:16px}
#cmpHome[hidden]{display:none}
.cmp-start{display:flex;flex-wrap:wrap;gap:10px}
.cmp-funds{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.cmp-switch{min-height:38px;min-width:220px}
.vhead-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.vhead-title .vtitle{outline:none;overflow-wrap:anywhere}
#panelCmpPick .panel-body{display:flex;flex-direction:column;gap:12px}
#panelCmpPick .bench-chips{margin:0}
.cp-plan{align-self:flex-start;flex-wrap:wrap}
#cpMsg{margin:0}#cpMsg:empty{display:none}
.pick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pick-list .cl-head{padding:10px 4px 4px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pick-list .none{padding:12px 4px;color:var(--ink-3);font-size:14px}
.pick-row{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-top:1px solid var(--line);cursor:pointer;border-radius:8px}
.pick-row:hover{background:var(--sunk)}
.pick-row input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.pick-row .nm{display:flex;flex-direction:column;gap:3px;font-size:14px;min-width:0}
.pick-row small{font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pick-row .tagp{margin:0}
.cmp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:12px}
.cmp-controls .wide-seg{flex:1 1 260px;width:auto}
.cmp-amt{margin:0}
.cmp-amt .box{min-height:40px}
.cmp-amt .box.num input{width:7em}
.cmp-legend .nm .late{color:var(--warn)}
.save-box{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.save-box .btn-row{align-items:center}
.saved-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.saved-list li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}
.saved-list li:first-child{border-top:0}
.saved-list .open{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 4px;cursor:pointer;border-radius:8px}
.saved-list .open:hover b{color:var(--accent-ink)}
.saved-list .open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.saved-list .open b{font-size:14.5px;font-weight:600;color:var(--ink)}
.saved-list .open small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-list li[aria-current="true"] .open b::after{content:" · showing";font-weight:500;color:var(--ink-3)}
.saved-list .rm{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);display:grid;place-items:center;flex:none;cursor:pointer}
.saved-list .rm:hover{background:var(--sunk);color:var(--loss)}
.saved-list .rm .ic{width:16px;height:16px}
.search.boxed{background:var(--field)}
.facts th{white-space:normal;min-width:110px;vertical-align:bottom}
.facts td:first-child{color:var(--ink-2)}
.facts tr.sep td{border-bottom:2px solid var(--line-2)}
.facts .sw{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--c);vertical-align:3px;margin-right:6px}

/* ---------- Plan: your portfolio's forecast, or a plan ---------- */
:root:not([data-plan-mode="forecast"]) #view-forecast{display:none!important}
:root[data-plan-mode="forecast"] #view-plan{display:none!important}
.plan-switch{margin-bottom:14px;max-width:420px}
.fc-inputs{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}
.fc-inputs .field{margin:0}
.fc-inputs .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.fc-inputs .field{min-width:0;max-width:100%}
.fc-inputs .seg{flex-wrap:wrap;max-width:100%}
.fc-inputs .box{min-height:40px}
.fc-inputs .box.num input{width:4.2em}
.fc-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;font-size:13px;color:var(--ink-2)}
.fc-legend li{display:flex;align-items:center;gap:8px}
.fc-legend .sw{width:20px;height:0;border-top:3px solid var(--c)}
.fc-legend .sw.dash{border-top-style:dashed;border-top-width:2px}
.card-head.pad{padding:16px 16px 0}
.fc-table td:first-child{text-align:left;white-space:normal;min-width:200px}
.fc-table th:first-child{text-align:left}
.fc-table .fn{display:block;font-weight:500}
.fc-table td small{display:block;font-size:12px;color:var(--ink-3)}
.fc-table tr.off td{color:var(--ink-3)}
.fc-table tr.total td{font-weight:600;border-top:2px solid var(--line-2)}
.fc-cards{display:none;list-style:none;margin:0;padding:0 16px 8px}
.fc-cards li{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.fcf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fcf-top .fn{display:flex;flex-direction:column;gap:2px;min-width:0}
.fcf-top .fn b{font-size:14.5px;font-weight:600;line-height:1.3}
.fcf-top small,.fcf-figs small{font-size:12px;color:var(--ink-3);font-weight:400}
.fcf-end{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.fcf-end b{font-family:var(--fig);font-size:19px;font-weight:650;font-variant-numeric:tabular-nums}
.fcf-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;border-radius:12px;background:var(--sunk)}
.fcf-figs span{display:flex;flex-direction:column;gap:1px;min-width:0}
.fcf-figs b{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fcf-figs b small{display:block}
.fc-cards li.off .fcf-end b,.fc-cards li.off .fn b{color:var(--ink-2)}
.fc-cards li.total{border-top:2px solid var(--line-2)}
.fc-cards li.total .fcf-figs{background:var(--accent-soft)}
@media (max-width:759px){.fc-wide{display:none}.fc-cards{display:block}}

/* ---------- Plan ---------- */
.sentence{padding:18px}
#planSentence{font-size:19px;line-height:1.75}
.sentence2{margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.in{display:inline;padding:1px 6px 2px;margin:0 1px;border:0;border-bottom:2px solid var(--accent);border-radius:8px 8px 2px 2px;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--fig);font-weight:650;font-size:1.08em;font-stretch:92%;line-height:1.4}
.in:hover{background:color-mix(in srgb,var(--accent-soft) 75%,var(--accent) 25%)}
.sentence2 .out{font-family:var(--fig);font-weight:650;color:var(--ink)}
.sentence2 .out.bad{color:var(--loss)}
.sentence2 .add-swp{margin-top:4px}
.result{display:flex;flex-direction:column;gap:4px;padding:2px 4px}
.result-line{font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:70ch}
.result-line b{color:var(--ink)}
.rates{display:flex;flex-direction:column;gap:8px}
.rate-row{display:flex;flex-wrap:wrap;gap:8px}
.rate-pills{display:contents}
.rate-pill,.rate-add{min-width:62px;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-family:var(--fig);font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.rate-pill i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.rate-pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rate-pill[aria-pressed="true"] i{background:var(--on-accent)}
.rate-add{justify-content:center;border-style:dashed;color:var(--ink-3)}
.plan-legend{list-style:none;margin:10px 0 0;padding:0}
.plan-legend li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;cursor:pointer}
.plan-legend li.on{font-weight:600}
.plan-legend .sw{width:18px;height:3px;border-radius:2px;background:var(--c)}
.plan-legend li.on .sw{height:4px}
.plan-legend .nm{flex:1}
.plan-legend b{font-family:var(--fig);font-size:16px;font-weight:600}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figs .fig{padding:16px;border-top:1px solid var(--line)}
.figs .fig:nth-child(odd){border-right:1px solid var(--line)}
@media (min-width:1024px){.figs .fig{border-right:1px solid var(--line)}.figs .fig:nth-child(4n){border-right:0}.figs:first-child .fig{border-top:0}}
.figs:first-child .fig:nth-child(-n+2){border-top:0}
.figs .fig .k{font-size:12.5px;color:var(--ink-3)}
.figs .fig .v{font-family:var(--fig);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
.figs .fig .v small{font-size:13px;font-weight:500;color:var(--ink-3)}
.figs .fig .v.good{color:var(--gain)} .figs .fig .v.bad{color:var(--loss)}
.figs .fig .d{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.figs-label{padding:12px 16px 0;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}
.notes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:1024px){.notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.note-i h4{font-size:15px;font-weight:600}
.note-i p{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.banner{padding:12px 14px;border-radius:12px;font-size:14px}
.banner.err{background:var(--loss-soft);color:var(--loss)}
.banner.info{background:var(--accent-soft);color:var(--ink)}
.details .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px;overflow-x:auto}
.tab{min-height:44px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-3);font-weight:500;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.ledger-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-size:13px;color:var(--ink-3)}
.scroll.tall{max-height:520px;overflow:auto}
#ledger th,#ledger td{padding:9px 10px;font-size:13.5px}
#ledger td.strong{font-family:var(--fig);font-size:15px}
#ledger tr.open{background:var(--accent-soft)}
#ledger .mrow td{font-size:12.5px;color:var(--ink-2);background:var(--sunk)}
.caret{display:inline-block;width:14px;color:var(--ink-3);transition:transform .15s}
tr.open .caret{transform:rotate(90deg)}
.tag{font-size:11.5px;font-weight:600;border-radius:6px;padding:1px 7px}
.tag.sip{background:var(--accent-soft);color:var(--accent-ink)}
.tag.swp{background:var(--loss-soft);color:var(--loss)}
.tag.wait{background:var(--sunk);color:var(--ink-3)}
.logic-p{font-size:14px;color:var(--ink-2);margin-bottom:10px}
.logic-h{font-size:15px;font-weight:600;margin:14px 0 6px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:12px}
.steps .n{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--fig);font-weight:650}
.steps h4{font-size:15px;font-weight:600}
.steps p{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.formula{display:block;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--sunk);border:1px solid var(--line);font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;overflow-x:auto}
.mono{font-family:var(--mono)}
.lead{font-size:14px;color:var(--ink-2);margin-bottom:10px}
.editor{display:flex;border-radius:12px;overflow:hidden;background:var(--code-bg);height:460px}
.gutter{margin:0;padding:12px 8px;min-width:44px;text-align:right;background:var(--code-gutter);color:var(--code-muted);font-family:var(--mono);font-size:12.5px;line-height:1.55;overflow:hidden;user-select:none}
#code{flex:1;margin:0;padding:12px;border:0;outline:none;resize:none;background:transparent;color:var(--code-ink);font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre;tab-size:2}
.ed-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.status{font-size:13px;color:var(--ink-3)}
.status.ok{color:var(--gain)} .status.err{color:var(--loss)}
.recipes{margin-top:18px}
.recipes h4{font-size:15px;font-weight:600;margin-bottom:6px}
.recipes p{font-size:13.5px;color:var(--ink-2);margin-top:10px}
.foot{font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:80ch}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================== the lock ============================== */
html.locked .app,html.locked .tabbar,html.locked .skip,html.locked .panel,html.locked .scrim{display:none!important}
.lock{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;padding:max(48px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));background:var(--bg)}
.lock-in{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.lock-in.wide{max-width:440px}
.lock-logo{width:56px;height:56px;margin-top:24px}
.lock h1{margin:22px 0 6px;font:650 26px/1.2 var(--fig);text-wrap:balance}
.lock-sub{margin:0;min-height:1.5em;font-size:14px;color:var(--ink-3);line-height:1.5;text-wrap:balance}
.lock-sub.bad{color:var(--loss)}
.lock-pin{width:100%;display:flex;flex-direction:column;align-items:center}
.lock-pin-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dots{display:flex;gap:16px;margin:34px 0 40px}
.dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-3);transition:background .1s,border-color .1s}
.dots span.on{background:var(--accent);border-color:var(--accent)}
.dots.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lock.busy .dots span.on{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.keys{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.keys .key{height:66px;border:0;border-radius:20px;background:var(--card);color:var(--ink);font:500 28px/1 var(--fig);box-shadow:0 1px 2px rgba(19,26,46,.08);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.keys .key:active{background:var(--accent-soft)}
.keys .key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.keys .key.flat{background:transparent;box-shadow:none;color:var(--ink-2)}
.keys .key.flat .ic{width:26px;height:26px}
.keys .key:disabled{opacity:.5}
.lock-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.lock-foot .linkish{min-height:44px;font-size:15px;font-weight:600}
.lock-foot small{font-size:12.5px;color:var(--ink-3);text-wrap:balance}
.lock-form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:26px;text-align:left}
.lock-form .btn.wide{margin-top:6px}
.join-form{margin-top:14px}
.join-form h3{margin:0;font:650 17px/1.3 var(--fig)}
.btn.danger{background:var(--loss);color:#fff}
.lock .btn.danger{margin-top:26px}
.rec-q{display:flex;flex-direction:column;gap:12px}
.code-box{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:18px}
.code-box p{margin:0}
.code{font:600 22px/1.3 var(--mono);letter-spacing:.06em;text-align:center;padding:16px 10px;border-radius:14px;background:var(--sunk);border:1px dashed var(--line-2);color:var(--ink);user-select:all;overflow-wrap:anywhere}
.check{display:flex;align-items:center;gap:10px;font-size:14px;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--accent)}

/* ============================== stale data banner ============================== */
.stale{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--warn-soft);color:var(--warn)}
.stale>.ic{width:22px;height:22px;flex:none}
.stale p{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px;color:var(--ink-2)}
.stale p b{color:var(--ink);font-size:14.5px}

/* ============================== Security and Fund data panels ============================== */
.kv{display:grid;gap:8px;margin:0 0 14px;font-size:14px}
.kv>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.kv .ok{color:var(--gain)} .kv .bad{color:var(--loss)}
.sec{display:flex;flex-direction:column;gap:12px;padding-block:16px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0;padding-top:0}
.sec h3{margin:0;font:650 17px/1.3 var(--fig)}
.sec form{display:flex;flex-direction:column;gap:12px}
.sec .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.state-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.state-line .ic{width:18px;height:18px;color:var(--gain)}
.state-line.off .ic{color:var(--ink-3)}
.qrow{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:var(--sunk)}
.qrow select,.qrow input{width:100%}
.devices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.devices li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.devices li:first-child{border-top:0}
.devices small{display:block;color:var(--ink-3);font-size:12.5px}
.pin-in{letter-spacing:.4em;font:600 18px/1 var(--mono)}
@media (max-width:520px){.kv>div{grid-template-columns:1fr;gap:1px}.sec .row2{grid-template-columns:1fr}}
.lock-form .field,.sec .field,.qrow .field,.rec-q .field{margin:0}
.fresh-act{margin:8px 0 0}
.devices li button{white-space:nowrap;flex:none}.sec details summary{cursor:pointer;min-height:36px;display:flex;align-items:center}
.devices .acts{display:flex;gap:14px;flex:none}
#panelData .panel-body{display:flex;flex-direction:column;gap:12px}#panelData .note,#panelData .kv,#panelData .hint{margin:0}#panelData .hint:empty{display:none}