/* Huntsman web, review 08 (design/agents-v3): light by default, dark or the system's choice on request (Account, Appearance); system sans for the interface, tabular
   numbers, Geist mono only for Huntsman's original ASCII/Mist. No inline styles: the gateway's CSP forbids them. */
@font-face{font-family:Geist;src:url('geistmono.woff2')}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:clip}
html{scrollbar-color:var(--line) var(--bg);caret-color:var(--accent)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:disabled{cursor:default;opacity:.45}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--accent)}
strong,input,.num{font-variant-numeric:tabular-nums}
b,strong,th{font-weight:var(--weight-bold)}
::selection{background:var(--accent);color:var(--bg)}
h1{font-size:var(--text-title);letter-spacing:-1.1px;line-height:1.08;font-weight:var(--weight-bold);margin:var(--space-2) 0 var(--space-3)}
h2{font-size:var(--text-heading);letter-spacing:-.4px;font-weight:var(--weight-bold);margin:var(--space-5) 0 var(--space-3)}
h3{font-size:var(--text-body);font-weight:var(--weight-bold);margin:0;letter-spacing:-.2px}
p{font-size:var(--text-small);line-height:1.5;margin:var(--space-2) 0;color:var(--muted)}
.lead{font-size:var(--text-body);line-height:1.45;color:var(--muted)}
.small{font-size:var(--text-caption);line-height:1.5}
.muted{color:var(--muted)}
.mono{font-family:Geist,monospace}
.up{color:var(--green)}.down{color:var(--red)}
.flex{display:flex;gap:var(--space-3);align-items:center}.between{justify-content:space-between}
.line{height:1px;background:var(--line);margin:var(--space-5) 0}
.skeleton{padding:var(--space-6) var(--space-5);color:var(--muted)}
.empty{color:var(--muted);font-size:var(--text-small);padding:var(--space-3) 0}
.notice{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);font-size:var(--text-small);line-height:1.45;color:var(--ink);margin:var(--space-3) 0}
.error{background:color-mix(in srgb,var(--red) 10%,var(--bg));color:var(--red);border-radius:var(--radius-control);padding:var(--space-3) var(--space-3);font-size:var(--text-small);margin:0 0 var(--space-3);display:flex;gap:var(--space-2);justify-content:space-between;align-items:center}
.error .textbtn{color:var(--red)}

/* App shell: a sidebar on desktop, a tab bar on the phone. */
.web{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:var(--space-6) var(--space-4) var(--space-5);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-6);background:var(--bg);z-index:5}
.brand{font-size:var(--text-heading);font-weight:var(--weight-bold);letter-spacing:-1px;display:flex;align-items:center;gap:var(--space-1);white-space:nowrap}
.brand b{color:var(--accent);font-weight:var(--weight-regular);font-size:var(--text-heading);line-height:1}
.nav{display:flex;flex-direction:column;gap:var(--space-1)}
.nav button{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;padding:var(--space-3) var(--space-3);border-radius:var(--radius-control);font-size:var(--text-body);color:var(--ink)}
.nav button.active{background:var(--panel2);font-weight:var(--weight-medium)}
.ico{width:var(--icon);height:var(--icon);fill:currentColor;flex-shrink:0}
.footnote{margin-top:auto;font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
.orb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-small);padding:var(--space-1) 0}
.orb .art{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-control);background:var(--panel)}
.orb .mist{font-size:var(--mist-2);line-height:2.6px}
.workspace{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.top{height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-7);position:sticky;top:0;background:var(--bg);z-index:4}
.top .crumb{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-small);color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .brand{display:none}
.back{height:var(--control-h);min-width:var(--control-h);font-size:var(--text-heading);color:var(--ink);display:inline-grid;place-items:center}
.account-area{display:flex;align-items:center;gap:var(--space-2);position:relative;flex-shrink:0}
.pill{border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--ink);white-space:nowrap}
.iconbtn{width:var(--control-h);height:var(--control-h);display:grid;place-items:center;border-radius:var(--radius-pill)}
.account-button{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-pill);background:var(--panel2);font-size:var(--text-small);font-weight:var(--weight-bold);display:grid;place-items:center}
.account-button.signin{width:auto;padding:0 var(--space-3);border-radius:var(--radius-pill)}
.account-menu{position:absolute;right:0;top:48px;width:var(--panel-w);background:var(--panel);border-radius:var(--radius-card);box-shadow:0 18px 50px var(--shade);padding:var(--space-4);z-index:20;display:flex;flex-direction:column;align-items:flex-start}
.account-menu p{margin:var(--space-1) 0 var(--space-2);font-size:var(--text-caption)}
.main{padding:var(--space-2) var(--space-7) var(--space-7);flex:1;min-width:0}
.main>section{min-width:0}
.footer{position:sticky;bottom:0;z-index:3;background:var(--bg);border-top:1px solid var(--line);padding:var(--space-3) var(--space-7) var(--space-4)}
/* The footer's row shares the page's column: same left edge, same width, so the action ends on the content's right edge. */
.footin{display:flex;justify-content:flex-end;gap:var(--space-3);align-items:center;max-width:var(--content-max)}
.footin.flow{max-width:var(--flow-max)}
.footin>*{max-width:var(--action-w)}
.footin.flow>*{max-width:none}
.footin.flow>.primary,.footin.flow>.secondary{flex:1}
.footer .primary,.footer .secondary{white-space:nowrap}
.footer .footnote-line{margin:0 auto 0 0;font-size:var(--text-caption);color:var(--muted);max-width:none}
/* Controls */
.primary{background:var(--ink);color:var(--onink);border-radius:var(--radius-pill);min-height:var(--action-h);padding:0 var(--space-5);font-size:var(--text-body);font-weight:var(--weight-bold);width:100%;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.secondary{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-pill);min-height:var(--action-h);padding:0 var(--space-4);font-size:var(--text-small);font-weight:var(--weight-medium);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.textbtn{color:var(--accent);font-size:var(--text-small);padding:var(--space-2) 0;font-weight:var(--weight-medium);text-align:left}
.textbtn.stop,.secondary.stop{color:var(--red)}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{border-radius:var(--radius-pill);border:1px solid var(--line);padding:var(--space-2) var(--space-4);font-size:var(--text-small);min-height:var(--control-h);background:var(--bg)}
.chip.active,.chip[aria-pressed=true]{background:var(--ink);color:var(--onink);border-color:var(--ink)}
.field{display:block;font-size:var(--text-small);color:var(--muted);margin-top:var(--space-4)}
.field input,.field select,.field textarea,.search,.textarea{margin-top:var(--space-2);display:block;width:100%;padding:var(--space-3) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);color:var(--ink);font-size:var(--text-body)}
.check{display:flex;gap:var(--space-2);font-size:var(--text-small);line-height:1.45;margin:var(--space-4) 0;align-items:flex-start;color:var(--ink)}
.check input{width:var(--icon);height:var(--icon);margin-top:var(--space-1);accent-color:var(--accent)}
.auth-switch{display:flex;background:var(--panel);border-radius:var(--radius-pill);padding:var(--space-1);margin:var(--space-1) 0 var(--space-1)}
.auth-switch button{flex:1;min-height:var(--control-h);border-radius:var(--radius-card);font-size:var(--text-small)}
.auth-switch .active{background:var(--bg);box-shadow:0 1px 4px var(--shade);font-weight:var(--weight-bold)}
.authlinks{display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.auth-footnote{font-size:var(--text-caption);text-align:center;margin-top:var(--space-6)}
.screen-auth form .primary,.screen-auth .secondary{margin-top:var(--space-4)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;padding:var(--space-4) 0;font-size:var(--text-body);font-weight:var(--weight-medium);cursor:pointer}
summary::-webkit-details-marker{display:none}
.detailbody{padding-bottom:var(--space-3)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.row>div{min-width:0}
.row p{margin:var(--space-1) 0 0;font-size:var(--text-caption)}
.row strong{font-weight:var(--weight-medium);font-size:var(--text-body)}
.row .num{font-weight:var(--weight-bold);white-space:nowrap}
button.row:hover{background:color-mix(in srgb,var(--panel) 60%,transparent)}
.accountline{font-size:var(--text-small);color:var(--muted)}
.balance{font-size:var(--text-hero);letter-spacing:-1.6px;line-height:1.05;margin:var(--space-1) 0;font-weight:var(--weight-bold)}
.change{font-size:var(--text-small);margin:var(--space-1) 0 var(--space-3);color:var(--muted)}
.heroart{display:flex;justify-content:flex-start;margin:var(--space-1) 0 var(--space-2)}
.heroart .art{width:var(--art-xl);height:110px}
.heroart.compact .art{height:80px}

/* Original Huntsman ASCII/Mist. Fixed alpha classes preserve it under the no-inline-style CSP. */
.art{display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:var(--mist);width:var(--control-h);height:var(--control-h);border-radius:var(--radius-control)}
.mist{font-family:Geist,monospace;font-weight:var(--weight-bold);font-size:var(--mist-2);line-height:2.6px;letter-spacing:0;white-space:pre;margin:0;color:var(--mist);font-variant-ligatures:none}
.mist i{font-style:normal}
.heroart .mist{font-size:var(--mist-5);line-height:6.5px}
.mist-alpha-0{opacity:0}.mist-alpha-1{opacity:.08333}.mist-alpha-2{opacity:.16667}.mist-alpha-3{opacity:.25}.mist-alpha-4{opacity:.33333}.mist-alpha-5{opacity:.41667}.mist-alpha-6{opacity:.5}.mist-alpha-7{opacity:.58333}.mist-alpha-8{opacity:.66667}.mist-alpha-9{opacity:.75}.mist-alpha-10{opacity:.83333}.mist-alpha-11{opacity:.91667}.mist-alpha-12{opacity:1}
/* Agent accents identify agents, never risk or performance. */
.accent-0{--agent:#405cd1}.accent-1{--agent:#c2533f}.accent-2{--agent:#2f8a68}.accent-3{--agent:#8a55c9}.accent-4{--agent:#b8862d}.accent-5{--agent:#3a8fb0}
.tile{background:color-mix(in srgb,var(--agent,var(--accent)) 13%,var(--bg))}
.tile .mist{color:var(--agent,var(--mist))}

/* Charts */
.chart{display:block;width:100%;overflow:visible}
.chart .ln{fill:none;stroke:var(--green);stroke-width:1.8;vector-effect:non-scaling-stroke}
.chart.down .ln{stroke:var(--red)}
.chart .ar{fill:var(--green);opacity:.07}
.chart.down .ar{fill:var(--red)}
.chart .base{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.chart.flat .ln{stroke:var(--muted)}
.chart.flat .ar{fill:var(--muted)}
.spark{width:var(--art-md);height:30px;flex-shrink:0}
.bigchart{height:220px;margin:var(--space-3) 0 var(--space-1)}
.periods{display:flex;justify-content:space-between;gap:var(--space-1);margin:var(--space-1) 0 var(--space-3)}
.periods button{min-height:var(--control-h);min-width:var(--control-h);padding:0 var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-small);color:var(--muted)}
.periods button.active{background:var(--panel2);color:var(--ink);font-weight:var(--weight-bold)}
.periods span{font-size:var(--text-caption);color:var(--muted);align-self:center}
.chartnote{display:flex;justify-content:space-between;font-size:var(--text-caption);color:var(--muted);margin:var(--space-1) 0}
.norecord{border:1px dashed var(--line);border-radius:var(--radius-card);height:150px;display:grid;place-items:center;text-align:center;padding:var(--space-4);margin:var(--space-3) 0;color:var(--muted);font-size:var(--text-small)}
.recordchip{font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--muted);white-space:nowrap}
.recordnum{font-size:var(--text-body);font-weight:var(--weight-bold);white-space:nowrap}

/* Library */
.libhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.libhead h1{margin:var(--space-1) 0}
.tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--line);margin:var(--space-1) 0 var(--space-3)}
.tabs button{padding:var(--space-3) 0;font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--muted);position:relative}
.tabs button.active{color:var(--ink)}
.tabs button.active:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.featurehead{display:flex;justify-content:space-between;align-items:baseline;margin:var(--space-4) 0 var(--space-3)}
.featurehead h2{margin:0}
.featurehead span{font-size:var(--text-caption);color:var(--muted)}
.featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.feature{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4);background:var(--panel);text-align:left;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;min-height:150px}
.feature .cardhead{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.feature .cardhead>span:last-child{min-width:0}
.feature h3{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature small,.agentrow small{display:block;font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-1)}
.feature .result{display:flex;align-items:baseline;gap:var(--space-2);margin-top:auto}
.feature .result strong{font-size:var(--text-title);letter-spacing:-.8px;font-weight:var(--weight-bold)}
.feature .slot{height:34px;border-bottom:1px dashed var(--line);margin-top:calc(-1 * var(--space-1))}
.feature .result.none strong{font-size:var(--text-heading);color:var(--muted);letter-spacing:-.2px}
.shelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-7)}
.shelf h2{margin:var(--space-5) 0 var(--space-1)}
.shelf>p{margin:0 0 var(--space-1);font-size:var(--text-small)}
.agentrow{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) 0;border-bottom:1px solid var(--line);text-align:left}
.agentrow .info{flex:1;min-width:0}
.agentrow h3{font-size:var(--text-body)}
.agentrow small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agentrow .side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.searchbox{margin:0 0 var(--space-2)}
.searchbox[hidden]{display:none}

/* Agent page */
.agenthead{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start}
.agenthead h1{margin:var(--space-1) 0 var(--space-1)}
.agenthead .art{width:var(--art-lg);height:80px;border-radius:var(--radius-card)}
.agenthead .mist{font-size:var(--mist-4);line-height:4px}
.byline{font-size:var(--text-small);color:var(--muted)}
.bigreturn{font-size:var(--text-hero);letter-spacing:-2px;font-weight:var(--weight-bold);line-height:1.05;margin:var(--space-4) 0 var(--space-1)}
.bigreturn.none{font-size:var(--text-title);color:var(--muted);letter-spacing:-.6px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--space-7);align-items:start}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-4) 0;margin:var(--space-2) 0}
.stats small{display:block;font-size:var(--text-caption);color:var(--muted);margin-bottom:var(--space-1)}
.stats strong{font-size:var(--text-heading);font-weight:var(--weight-bold)}
.steps{margin:var(--space-1) 0}
.stepitem{display:flex;gap:var(--space-3);padding:var(--space-2) 0}
.stepitem em{font-size:var(--text-caption);font-style:normal;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-pill);width:var(--mark);height:var(--mark);display:grid;place-items:center;flex-shrink:0}
.stepitem strong{font-size:var(--text-body);font-weight:var(--weight-bold)}
.stepitem p{margin:var(--space-1) 0 0}
.risklevel{display:flex;gap:var(--space-1);margin:var(--space-2) 0}
.risklevel span{flex:1;height:6px;border-radius:var(--radius-control);background:var(--panel2)}
.risklevel span.on{background:var(--ink)}
.floorline{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.badge{font-size:var(--text-caption);font-weight:var(--weight-bold);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);background:var(--panel2);color:var(--ink);white-space:nowrap}
.badge.on{background:color-mix(in srgb,var(--green) 16%,var(--bg));color:var(--green)}
.riskline{font-size:var(--text-small);color:var(--muted)}

/* Deploy */
.minirow{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0}
.minirow .grow{flex:1;min-width:0}
.minirow .grow strong{display:block;font-size:var(--text-body)}
.choice{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.choice .letter{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-control);background:var(--panel2);display:grid;place-items:center;font-weight:var(--weight-bold);color:var(--accent)}
.choice .grow{flex:1}
.choice .grow strong{display:block;font-size:var(--text-body)}
.choice .tick{width:var(--icon);height:var(--icon);border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);display:grid;place-items:center;font-size:var(--text-small)}
.amount{display:flex;align-items:baseline;gap:var(--space-2);margin:var(--space-1) 0 var(--space-3)}
.amount span{font-size:var(--text-title);color:var(--muted)}
.amount input{border:0;background:none;font-size:var(--text-hero);font-weight:var(--weight-bold);letter-spacing:-2px;width:100%;min-width:0;padding:0;color:var(--ink)}
.amount input:focus-visible{outline:none;border-bottom:2px solid var(--accent)}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-1) 0 var(--space-3)}
.quick button{border:1px solid var(--line);border-radius:var(--radius-pill);min-height:var(--control-h);font-size:var(--text-small)}
.quick button.active{background:color-mix(in srgb,var(--accent) 12%,var(--bg));border-color:var(--accent);color:var(--accent)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-1);margin:var(--space-2) 0}
.keypad button{min-height:var(--action-h);font-size:var(--text-heading);border-radius:var(--radius-control)}
.keypad button:active{background:var(--panel)}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-2) 0}
.levels button{border:1px solid var(--line);border-radius:var(--radius-card);min-height:var(--action-h);padding:var(--space-2);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:var(--space-1)}
.levels button strong{font-size:var(--text-small);overflow-wrap:normal;word-break:keep-all;hyphens:none}
.levels button small{font-size:var(--text-caption);color:var(--muted)}
.levels button.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.guard{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.guard .flex{justify-content:space-between}
.guard p{margin:var(--space-1) 0 0;font-size:var(--text-caption)}

/* Running agent and portfolio */
.statuspill{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font-size:var(--text-small)}
.statuspill i{width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--muted)}
.statuspill.live i{background:var(--green)}
.statuspill.paused i{background:#b8862d}
.switcher{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-1) 0 var(--space-2);scrollbar-width:none}
.switcher::-webkit-scrollbar{display:none}
.mini{flex:0 0 250px;border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-2) var(--space-3);text-align:left;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:var(--space-1) var(--space-2);align-items:center}
.mini.active{background:var(--panel);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.mini .art{width:var(--mark);height:var(--mark);grid-row:span 2;border-radius:var(--radius-control)}
.mini strong{font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .spark{grid-column:2/4;width:100%;height:22px}
.runhead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding:var(--space-3) 0 var(--space-4);border-bottom:1px solid var(--line)}
.runhead .who{display:flex;gap:var(--space-3);align-items:flex-start;min-width:0}
.runhead .who .art{width:var(--art-md);height:var(--art-md);border-radius:var(--radius-control)}
.runhead .who .mist{font-size:var(--mist-3);line-height:3px}
.runhead h1{font-size:var(--text-title);margin:0 0 var(--space-1)}
.runhead .value{text-align:right}
.runhead .value strong{font-size:var(--text-title);letter-spacing:-1px;display:block}
.glance{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-4) var(--space-4);margin-top:var(--space-4)}
.glance h3{margin-bottom:var(--space-1)}
.glance .row{padding:var(--space-3) 0}
.glance .row:last-child{border-bottom:0}
.holdbar{display:flex;gap:var(--space-1);height:9px;border-radius:var(--radius-control);overflow:hidden;margin:var(--space-2) 0}
.holdbar span{flex:1;background:var(--accent);opacity:.85}
.holdbar span:nth-child(2n){opacity:.6}
.holdbar span.cash{background:var(--panel2);opacity:1}
.eventrow{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);align-items:flex-start}
.eventrow i{width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--accent);margin-top:var(--space-1);flex-shrink:0}
.eventrow.quiet i{background:var(--line)}
.eventrow .grow{flex:1;min-width:0}
.eventrow strong{font-size:var(--text-small);font-weight:var(--weight-medium);display:block}
.eventrow small{font-size:var(--text-caption);color:var(--muted)}
.belltoggle{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font-size:var(--text-small)}
.belltoggle[aria-pressed=true]{background:var(--ink);color:var(--onink);border-color:var(--ink)}
.actionsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-3) 0}
.pfhead{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.pfhead h1{margin:var(--space-1) 0}
.accountpill{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);font-size:var(--text-small)}
.accountpill b{width:var(--mark);height:var(--mark);border-radius:var(--radius-pill);background:var(--ink);color:var(--onink);display:grid;place-items:center;font-size:var(--text-caption)}
.pfcols{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:var(--space-3) 0 0}
.pfcols>div{padding:var(--space-3) 0}
.pfcols>div+div{border-left:1px solid var(--line);padding-left:var(--space-4)}
.pfcols small{display:block;font-size:var(--text-caption);color:var(--muted)}
.pfcols strong{display:block;font-size:var(--text-heading);margin:var(--space-1) 0 var(--space-1)}
.agentcard{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) 0;border-bottom:1px solid var(--line);text-align:left}
.agentcard .info{flex:1;min-width:0}
.agentcard h3{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agentcard .state{font-size:var(--text-caption);color:var(--muted)}
.agentcard .right{text-align:right}
.agentcard .right strong{display:block;font-size:var(--text-body)}
.agentcard .right p{margin:var(--space-1) 0 0;font-size:var(--text-caption)}
.portfolio-chart svg{display:block;width:100%;height:180px}
.sample-time{font-size:var(--text-caption);color:var(--muted)}
.receipt{display:flex;gap:var(--space-3);align-items:center;background:var(--panel);border-radius:var(--radius-card);padding:var(--space-3);margin:var(--space-3) 0;font-size:var(--text-small)}
.receipt h2{font-size:var(--text-body);margin:0}
.receipt p{margin:var(--space-1) 0 0;font-size:var(--text-caption)}
.receiptmark{color:var(--accent);font-size:var(--text-heading)}
.valuation-note{color:var(--muted)}
.radio{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.radio i{width:var(--icon);height:var(--icon);border-radius:var(--radius-pill);border:1.5px solid var(--muted);flex-shrink:0;margin-top:0}
.radio[aria-checked=true] i{border:6px solid var(--accent)}
.radio strong{display:block;font-size:var(--text-body)}
.radio p{margin:var(--space-1) 0 0;font-size:var(--text-caption)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0 var(--space-2)}
.pctinput{display:flex;align-items:center;gap:var(--space-1)}
.pctinput input{width:var(--art-md);text-align:center;padding:var(--space-2) var(--space-1);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--bg);font-size:var(--text-body)}
.switch{width:var(--control-h);height:28px;border-radius:var(--radius-card);background:var(--panel2);position:relative;flex-shrink:0}
.switch:after{content:'';position:absolute;top:3px;left:3px;width:var(--icon);height:var(--icon);border-radius:var(--radius-pill);background:var(--bg);box-shadow:0 1px 3px var(--shade);transition:left .15s}
.switch[aria-checked=true]{background:var(--green)}
.switch[aria-checked=true]:after{left:21px}
.selectfield{display:block;width:100%;margin:var(--space-1) 0 var(--space-1);padding:var(--space-3);border:0;border-radius:var(--radius-control);background:var(--panel);font-size:var(--text-body)}
.arrowdown{text-align:center;color:var(--accent);font-size:var(--text-heading);margin:var(--space-1) 0}

/* Builder */
.buildbar{display:flex;justify-content:space-between;font-size:var(--text-small);color:var(--muted)}
.buildbar button{color:var(--muted);padding:var(--space-2) 0}
.ideabox{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4);margin:var(--space-3) 0 var(--space-4)}
.ideabox .art{width:var(--art-md);height:60px}
.ideabox .mist{font-size:var(--mist-3);line-height:3.2px}
.ideabox .grow{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ideabox textarea{width:100%;border:0;background:none;resize:none;font-size:var(--text-body);line-height:1.4;color:var(--ink);padding:var(--space-1) 0;min-height:56px}
.ideabox textarea:focus-visible{outline:none}
.send{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-pill);background:var(--ink);color:var(--onink);display:grid;place-items:center;flex-shrink:0;align-self:flex-end;font-size:var(--text-heading)}
.answers .row{font-size:var(--text-body);color:var(--ink)}
.plancard{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-1) var(--space-4) var(--space-3);margin:var(--space-2) 0}
.planline{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:var(--text-body);line-height:1.5;color:var(--ink)}
.planline:last-of-type{border-bottom:0}
.num-edit{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;font-weight:var(--weight-bold);color:var(--ink);font-size:inherit;padding:0}
.planfoot{font-size:var(--text-caption);color:var(--muted);margin:var(--space-2) 0 0}
.readline{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-small);color:var(--muted);margin:var(--space-1) 0}
.readline .dot{width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--accent);flex-shrink:0}
.diffs{margin:var(--space-2) 0}
.diff{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}
.diff code{font-size:var(--text-small);font-family:Geist,monospace;color:var(--ink)}
.changebox{display:flex;gap:var(--space-2);align-items:center;margin:var(--space-3) 0}
.changebox input{flex:1;min-width:0;padding:var(--space-3) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg);font-size:var(--text-body)}
.draftpill{font-size:var(--text-caption);background:var(--panel2);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);color:var(--muted)}
.strategy-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0}
.strategy-row,.version-row,.trial-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) 0;border-bottom:1px solid var(--line);text-align:left}
.strategy-row span:first-child,.version-row span:first-child,.trial-row span:first-child{min-width:0}
.strategy-row strong,.version-row strong,.trial-row strong{display:block;font-size:var(--text-body);font-weight:var(--weight-medium)}
.strategy-row small,.version-row small,.trial-row small{display:block;font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-1)}
.version-row.selected{background:var(--panel);padding-left:var(--space-2);padding-right:var(--space-2);border-radius:var(--radius-control)}
.version-list{margin:var(--space-1) 0}
.version-stamp{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-3) var(--space-3);margin:var(--space-3) 0}
.version-stamp strong{display:block;font-size:var(--text-small)}
.version-stamp>span{display:block;font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-1)}
.version-stamp details{border:0}
.hash-value{font-family:Geist,monospace;font-size:var(--text-caption);word-break:break-all}
.weight-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.weight-total{font-size:var(--text-small)}
.input-error{color:var(--red)}
.trial-metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-3) 0}
.trial-metrics small{display:block;font-size:var(--text-caption);color:var(--muted)}
.trial-metrics strong{font-size:var(--text-heading)}
.trial-steps{display:flex;flex-direction:column}
.trial-step{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}
.trial-step small{grid-column:1/3;color:var(--muted)}
.dollarinput{display:flex;align-items:center;gap:var(--space-1)}
.dollarinput input{font-size:var(--text-title);font-weight:var(--weight-bold)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.compose{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-3);font-size:var(--text-body);color:var(--ink);margin:var(--space-2) 0}
.question{font-weight:var(--weight-bold);color:var(--ink)}
.plan{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3);margin:var(--space-3) 0}

/* Plans */
.plancards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.plantier{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.plantier.highlight{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.plantier h3{font-size:var(--text-heading);display:flex;justify-content:space-between;gap:var(--space-2);align-items:center}
.plantier .price{font-size:var(--text-heading);font-weight:var(--weight-bold);letter-spacing:-.6px}
.plantier ul{margin:var(--space-2) 0;padding-left:var(--space-4);font-size:var(--text-small);line-height:1.7;color:var(--ink)}
.plantier .offer{font-size:var(--text-caption);color:var(--green);font-weight:var(--weight-bold)}
.plantier .secondary,.plantier .primary{margin-top:auto;width:100%}
.refusal{background:color-mix(in srgb,var(--accent) 9%,var(--panel));border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;color:var(--ink);font-size:var(--text-body)}
.links{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-small);color:var(--muted)}
.segmented{display:inline-flex;background:var(--panel);border-radius:var(--radius-pill);padding:var(--space-1)}
.segmented button{min-height:var(--control-h);padding:0 var(--space-3);border-radius:var(--radius-card);font-size:var(--text-small)}
.segmented button[aria-pressed=true]{background:var(--ink);color:var(--onink)}

.chat-sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.sheetpanel{width:100%;max-width:var(--flow-max);max-height:85vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-card) var(--radius-card) 0 0;box-shadow:0 -14px 80px var(--shade);padding:var(--space-4) var(--space-5) var(--space-6)}
@media (min-width:900px){.chat-sheet{align-items:center;padding:var(--space-5)}.sheetpanel{max-width:var(--auth-max);border-bottom:1px solid var(--line);border-radius:var(--radius-card);padding-bottom:var(--space-5);box-shadow:0 18px 50px var(--shade)}}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1)}
.sheethead h2{margin:0}
.sheetpanel>p{color:var(--muted);margin:0 0 var(--space-4)}
.sheetpanel .primary{width:100%}
.asklist .row{width:100%;text-align:left}
.asklist .row:last-child{border-bottom:0}
.asklist .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.asklist small{color:var(--muted)}
.nowrap{white-space:nowrap}
.fundlater{display:block;margin:var(--space-4) auto 0}
/* Ask on a phone: the sidebar's Ask lives in the top bar, beside the bell (shown under 900 px only). */
.account-area .askbtn{display:none;overflow:hidden}
.askbtn .art{width:var(--control-h);height:var(--control-h);background:none}
.sample{font-size:var(--text-caption);font-family:Geist,monospace;color:var(--muted)}

/* Phone: the sidebar becomes a tab bar; one column; actions sit above the tab bar. */
@media (max-width:899px){
  .web{display:flex;flex-direction:column;min-height:100vh}
  .workspace{order:1;flex:1;min-height:calc(100vh - 72px)}
  .sidebar{order:2;position:sticky;top:auto;bottom:0;height:72px;padding:var(--space-1) var(--space-2) var(--space-2);border-right:0;border-top:1px solid var(--line);flex-direction:row;gap:0;z-index:6}
  .sidebar .brand,.sidebar .footnote,.sidebar .orb{display:none}
  .account-area .askbtn{display:grid}
  .askbar input{scroll-margin-bottom:calc(72px + var(--space-4))}
  .nav{flex-direction:row;width:100%;gap:0}
  .nav button{flex-direction:column;gap:var(--space-1);padding:var(--space-2) 0;font-size:var(--text-caption);justify-content:center;background:none!important;color:var(--muted);border-radius:0}
  .nav button.active{color:var(--ink);font-weight:var(--weight-bold)}
  .top{height:62px;padding:0 var(--space-4)}
  .top .brand{display:flex;font-size:var(--text-heading)}
  .top .crumb .label{display:none}
  .main{padding:var(--space-1) var(--space-4) var(--space-6)}
  .footer{position:sticky;bottom:72px;padding:var(--space-3) var(--space-4)}
  .footin{justify-content:stretch}
  .footin>*{max-width:none;flex:1}
  .footin>:nth-child(3){font-size:var(--text-small);padding:0 var(--space-2)}
  .footin>.primary:first-child:nth-last-child(3){font-size:var(--text-body);padding:0 var(--space-3);flex:1.3}
  .footer .footnote-line{display:none}
  h1{font-size:var(--text-title)}
  .featured{display:flex;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--space-4));padding-right:var(--space-4)}
  .featured::-webkit-scrollbar{display:none}
  .feature{flex:0 0 260px}
  .shelves,.split,.plancards{grid-template-columns:minmax(0,1fr);gap:0}
  .split{gap:var(--space-2)}
  .runhead{flex-direction:column;align-items:flex-start}
  .runhead .value{text-align:left}
  .bigreturn{font-size:var(--text-hero)}
  .amount input{font-size:var(--text-hero)}
  .account-menu{right:-4px}
  .pill{padding:var(--space-2) var(--space-3)}
  .iconbtn{width:var(--control-h)}
}
@media (min-width:900px){.keypad{display:none}}
@media (max-width:380px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.actionsgrid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.switch:after{transition:none}}

/* Onboarding: welcome, the "Almost in" form, the intro, fund your agents, ready. */
.welcome{display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-6)}
.welcomeart .art,.introart .art{width:var(--art-hero);height:170px}
.welcomeart .mist,.introart .mist{font-size:var(--mist-6);line-height:9px}
.welcome h1{font-size:var(--text-hero);max-width:var(--measure)}
.welcomeactions{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.welcomeactions p{text-align:center}
.handle{display:flex;align-items:center;margin-top:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);padding-left:var(--space-3)}
.handle b{font-weight:var(--weight-medium);color:var(--muted)}
.handle input{border:0!important;margin:0 !important;padding-left:var(--space-1) !important;background:none!important}
.handle:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.handle input:focus-visible{outline:none}
.checkline{min-height:20px;margin:var(--space-1) 0 var(--space-1)}
.checkline span{display:inline-flex;gap:var(--space-1);align-items:center}
.checkline .ico{width:var(--icon-sm);height:var(--icon-sm)}
.consents{border-top:1px solid var(--line);margin-top:var(--space-3);padding-top:var(--space-1)}
.consent{margin:var(--space-3) 0}
.intro .progress{display:flex;gap:var(--space-1);margin:var(--space-1) 0 var(--space-2)}
.intro .progress span{flex:1;height:3px;border-radius:var(--radius-control);background:var(--panel2)}
.intro .progress span.on{background:var(--accent)}
.intro h1{max-width:var(--measure)}
.intro .introbody{display:flex;flex-direction:column;text-align:center}
.intro .introbody .heroart{justify-content:center}
.intro .introbody :is(h1,.lead){margin-inline:auto;text-wrap:balance}
.intro .introbody .lead{max-width:var(--measure-body)}
/* The sign-up intro: the progress sits at the top of the column; the page's art and words are centred in the space below. */
.web.bare .main>section.screen-onboard-intro{margin-block:0;flex:1;display:flex;flex-direction:column;padding-top:var(--space-5)}
.web.bare .screen-onboard-intro .intro{flex:1;display:flex;flex-direction:column}
.web.bare .screen-onboard-intro .introbody{margin-block:auto}
.fundchoice{display:flex;gap:var(--space-3);align-items:center;width:100%;text-align:left;background:var(--panel);border-radius:var(--radius-card);padding:var(--space-4);margin:var(--space-3) 0;box-shadow:0 1px 3px var(--shade)}
.fundchoice .grow{flex:1;min-width:0}
.fundchoice strong{display:block;font-size:var(--text-body)}
.fundchoice small{display:block;font-size:var(--text-small);color:var(--muted);margin-top:var(--space-1)}
.buying{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-4);margin:var(--space-4) 0;text-align:center;box-shadow:0 1px 3px var(--shade)}
.buying small{display:block;font-size:var(--text-small);color:var(--muted)}
.buying strong{font-size:var(--text-title);letter-spacing:-1px}
.checklist .row .step{width:var(--mark);height:var(--mark);border-radius:var(--radius-pill);border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.checklist .row.done .step{background:var(--green);border-color:var(--green);color:var(--onink)}
.checklist .row .step .ico{width:var(--icon-sm);height:var(--icon-sm)}
.checklist .row{justify-content:flex-start}
.checklist .row>div{flex:1}
.send .ico,.keypad .ico{width:var(--icon);height:var(--icon)}
.livecard{display:flex;gap:var(--space-2);align-items:center;background:color-mix(in srgb,var(--green) 12%,var(--panel));border-radius:var(--radius-card);padding:var(--space-3) var(--space-3);color:var(--ink);font-size:var(--text-small);margin:0 0 var(--space-3)}
.livecard .ico{color:var(--green)}
.statusrow{display:flex;justify-content:flex-end}

/* Sign-up screens stand alone: no tab bar, sidebar or account controls until the account is ready. */
.web.bare{grid-template-columns:minmax(0,1fr)}
.web.bare .sidebar,.web.bare .account-area .pill,.web.bare .account-area .iconbtn{display:none}
.web.bare .top .brand{display:flex}
.web.bare .workspace{min-height:100vh}
.screen-auth input{display:block;width:100%;margin-top:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);font-size:var(--text-body)}
.screen-auth #identityCode{font-weight:var(--weight-bold);font-size:var(--text-title);line-height:1;font-family:Geist,monospace;letter-spacing:.5em;text-align:center;padding:var(--space-4) var(--space-2)}
.screen-auth .field{margin-top:var(--space-4)}

/* Weekly board and the share card */
.boardrow{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) 0;border-bottom:1px solid var(--line);text-align:left}
.boardrow .rank{width:var(--mark);font-weight:var(--weight-bold);color:var(--muted)}
.boardrow .info{flex:1;min-width:0}
.boardrow .info strong{display:block;font-size:var(--text-body)}
.boardrow small{display:block;font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-1)}
.boardrow .side{text-align:right}
.boardrow .side strong{font-size:var(--text-body)}
.sharecard{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-4);box-shadow:0 2px 10px var(--shade);margin:var(--space-3) 0}
.sharecard .brand{font-size:var(--text-body)}
#shareLink{word-break:break-all}
.inlinelink{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:inherit;padding:0}
.disabledrow strong,.disabledrow .textbtn:disabled{color:var(--muted)} /* readable when off: muted colour, not faded opacity */
.statusrow{gap:var(--space-2);align-items:center}
.featchart{height:44px;width:100%}
.feature .hypo{font-size:var(--text-caption);color:var(--muted)}
.agentrow .sidenum{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.agentrow .side{flex-direction:row;align-items:center;gap:var(--space-2)}

/* Chat tab */
.runtabs{margin-top:var(--space-2)}
.chat{display:flex;flex-direction:column;gap:var(--space-3);min-height:280px;padding:var(--space-2) 0}
.chatintro{text-align:center;margin:var(--space-5) auto;max-width:var(--flow-max)}
.chatintro .row{text-align:left;border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-3) var(--space-3);margin:var(--space-2) 0;background:var(--panel)}
.chatq{align-self:flex-end;background:var(--ink);color:var(--onink);border-radius:var(--radius-card) var(--radius-card) 0 var(--radius-card);padding:var(--space-2) var(--space-3);max-width:80%;font-size:var(--text-body)}
.chata{display:flex;gap:var(--space-2);align-items:flex-start;max-width:90%}
.chata p{color:var(--ink);font-size:var(--text-body);margin:var(--space-1) 0}
.chatmark{width:var(--mark);height:var(--mark);border-radius:var(--radius-control);background:var(--panel)}
.chatmark .mist{font-size:var(--mist-1);line-height:1.8px}
.chatrefusal{background:var(--panel);border-radius:var(--radius-card);padding:var(--space-3) var(--space-3);max-width:90%}
.chatrefusal p{color:var(--ink);margin:0 0 var(--space-2)}
.askbar{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-3)}
.askbar input{flex:1;min-width:0;padding:var(--space-3) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel);font-size:var(--text-body)}
.chatfoot{text-align:center;margin-top:var(--space-2)}

/* Review findings (Oct 21): 44px touch targets, 12px minimum text, no broken words, dark art, narrow top bar. */
.iconbtn,.back,.chip,.textbtn,.num-edit,.account-button,.segmented button,.periods button,.tabs button{min-height:var(--control-h)}
.iconbtn,.back,.account-button{min-width:var(--control-h)}
.account-button{width:var(--control-h);height:var(--control-h)}
.textbtn{display:inline-flex;align-items:center}
.num-edit{display:inline-flex;align-items:center;min-width:var(--control-h);justify-content:center}
.check{min-height:44px;align-items:center}
.check input{width:var(--icon);height:var(--icon);margin:0;flex-shrink:0}
.buildbar button{min-height:var(--control-h)}
.links a{display:inline-flex;align-items:center;min-height:44px}
.switch{width:var(--switch-w);height:44px;background:none;border-radius:0}
.switch:before{content:'';position:absolute;left:4px;right:4px;top:8px;bottom:8px;border-radius:var(--radius-card);background:var(--panel2)}
.switch:after{top:11px;left:7px}
.switch[aria-checked=true]{background:none}
.switch[aria-checked=true]:before{background:var(--green)}
.switch[aria-checked=true]:after{left:29px}
.nav button{font-size:var(--text-caption)}
.badge,.recordchip,.feature .hypo,.sample,.footnote{font-size:var(--text-caption)}
.badge.on,.offer{color:var(--greenText)}
.levels{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){.levels{grid-template-columns:1fr}.levels button{min-height:var(--action-h);flex-direction:row;justify-content:space-between;align-items:center}}
:root[data-theme=dark] .tile{background:color-mix(in srgb,var(--agent,var(--accent)) 30%,#1b2124)}
:root[data-theme=dark] .mist i{filter:brightness(1.35)}
@media (max-width:260px){.top .brand{display:none}}
.bigamount{font-size:var(--text-hero);font-weight:var(--weight-bold);letter-spacing:-1.6px;line-height:1.05;margin:var(--space-2) 0 var(--space-1)}
.reviewh{font-size:var(--text-heading);margin:0 0 var(--space-2);color:var(--muted);font-weight:var(--weight-medium)}
.reviewchart{height:90px;margin:var(--space-1) 0 var(--space-2)}
.textlink{color:var(--accent);font-weight:var(--weight-medium);font-size:var(--text-small)}
.recordsline{margin:var(--space-1) 0 var(--space-2)}
.stepdot{width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--accent);flex-shrink:0;margin-top:var(--space-2)}
.stepitem{align-items:flex-start}
.checklist .row .step:empty{border:1.5px solid var(--line)}
.profilehead{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-1) 0 var(--space-3);border-bottom:1px solid var(--line)}
.profilehead .avatar{width:var(--action-h);height:var(--action-h);border-radius:var(--radius-pill);background:var(--panel2);display:grid;place-items:center;font-weight:var(--weight-bold);font-size:var(--text-heading)}
.profilehead strong{font-size:var(--text-heading)}
.profilehead p{margin:var(--space-1) 0 0}
.buildsteps{margin:var(--space-3) 0;padding:var(--space-1) 0}
.buildstep{display:flex;gap:var(--space-3);align-items:center;min-height:40px;color:var(--muted);font-size:var(--text-body)}
.buildstep.done{color:var(--ink)}
.buildstep.done .ico{color:var(--green);width:var(--icon);height:var(--icon)}
.buildstep.now{color:var(--ink);font-weight:var(--weight-bold)}
.livepage h1{font-size:var(--text-hero)}
.planstate{margin-top:auto;font-weight:var(--weight-bold);color:var(--ink)}
.amounthint{margin:calc(-1 * var(--space-1)) 0 var(--space-2)}
.sharedagent{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.sharedagent .grow{flex:1;min-width:0}
.auth-switch button{min-height:var(--control-h)}
.textbtn{min-width:var(--control-h);justify-content:center}
.tabs button{min-width:var(--control-h)}
.pctinput input{min-height:44px}
.sidenum{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}

/* ===== The component set (Oct 21 system pass). Every screen is built from these: page, section, row, card, list, button.
   Values come only from tokens.css; later rules here win over the per-screen rules above. ===== */
/* Page: one container, fixed gutters, one max width; narrow flows read in one column. */
.main{padding:var(--space-4) var(--page-gutter) var(--space-7)}
/* One left edge: every screen starts at the gutter; flows are one narrow column, the rest one wide column. */
.main>section{max-width:var(--content-max);margin:0}
.main>section.flow{max-width:var(--flow-max)}
@media (min-width:900px){.main{padding:var(--space-5) var(--space-6) var(--space-7)}.top{padding:0 var(--space-6)}.footer{padding:var(--space-3) var(--space-6)}}
@media (max-width:899px){.top{padding:0 var(--page-gutter)}.footer{padding:var(--space-3) var(--page-gutter)}}
/* Type: six styles. */
body{font-size:var(--text-body)}
h1{font-size:var(--text-title);line-height:1.15;margin:var(--space-2) 0 var(--space-4)}
h2{font-size:var(--text-heading);line-height:1.25;margin:var(--space-6) 0 var(--space-3)}
h3{font-size:var(--text-body)}
p{font-size:var(--text-small);margin:var(--space-2) 0}
.lead{font-size:var(--text-body)}
.small,.chartnote,.recordchip,.badge,.footnote,small{font-size:var(--text-caption)}
.balance,.bigreturn,.bigamount,.amount input{font-size:var(--text-amount);line-height:1.05;overflow-wrap:anywhere}
.bigreturn.none{font-size:var(--text-title)}
/* Section and row. */
.row,.agentrow,.agentcard,.boardrow,.eventrow,.strategy-row,.version-row,.trial-row,.radio,.guard,.floorline,.diff,.planline{padding:var(--space-3) 0}
.row strong,.agentrow h3,.agentcard h3{font-size:var(--text-body)}
.row p,.agentrow small,.agentcard .state,.eventrow small{font-size:var(--text-caption);margin:var(--space-1) 0 0}
/* Card: one surface, one radius, one padding, one elevation (a hairline). */
.feature,.glance,.plantier,.fundchoice,.sharecard,.buying,.notice,.receipt,.refusal,.chatrefusal,.version-stamp,.plancard,.ideabox,.mini,.chatintro .row{border-radius:var(--radius-card);padding:var(--space-4);background:var(--panel);border:1px solid var(--line);box-shadow:none}
.notice,.receipt,.refusal{margin:var(--space-3) 0}
.featured,.plancards,.shelves,.actionsgrid,.pair,.quick,.levels,.chips,.strategy-actions{gap:var(--space-3)}
/* Buttons: one primary, one secondary, one text style; 44px minimum, 52px for the main action. */
.primary{min-height:var(--action-h);font-size:var(--text-body);padding:0 var(--space-5);text-decoration:none}
/* Every main action is 52px: the primary, and a secondary beside it in a pair or the footer. */
.pair .secondary,.footer .secondary{font-size:var(--text-body)}
.chip,.quick button{min-height:var(--control-h);font-size:var(--text-small);padding:0 var(--space-4)}
.secondary{min-height:var(--action-h);font-size:var(--text-small);padding:0 var(--space-4)}
.textbtn{font-size:var(--text-small);padding:0 var(--space-1)}
.actionsgrid,.pair,.strategy-actions{margin:var(--space-4) 0}
.handle{min-height:var(--control-h)}.handle input{min-height:42px;height:42px}
.field input,.field select,.field textarea,.search{min-height:var(--control-h)}
.chart.flat .ar{display:none}
/* Review 2 (Oct 21): the running header row, the value once, "When hit" choices, hints only when wrong, text buttons on
   the gutter, and the review at 200% zoom. */
.runhead{display:block;padding:var(--space-3) 0}
.runhead .who{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.runhead .who .art{width:var(--art-sm);height:var(--art-sm)}
.runhead h1{margin:0;flex:1;min-width:0;font-size:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runvalue{border-bottom:1px solid var(--line);padding:0 0 var(--space-3)}
.runvalue .change{margin:var(--space-1) 0 0}
.whenhit{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2);flex-wrap:wrap}
.guard>.flex{gap:var(--space-3)}
.guard>.flex>strong{flex:1;min-width:0}
.floorline{gap:var(--space-3)}
.amounthint:empty{display:none}
.accountline{margin:0 0 var(--space-3)}
.textbtn{padding:0}
.row,.minirow,.agentrow{gap:var(--space-3)}
.footer .primary{width:100%}
@media (max-width:319px){.minirow .side,.agentrow .side .chart{display:none}}
.runhead{border-bottom:0}
/* Review 3 (Oct 21): sign-in centred on desktop, 200% zoom keeps navigation and names, one segmented control. */
.web.bare .main>section,.web.bare .footin{margin-left:auto;margin-right:auto}
.top .crumb .back{flex-shrink:0}
.top .account-area{flex-shrink:0}
@media (max-width:299px){.top .pill{display:none}}
.runhead .who{flex-wrap:wrap}
.runhead h1{flex:1 1 8em;white-space:normal;overflow:visible;overflow-wrap:anywhere}
@media (max-width:359px){.row:has(>.num){flex-direction:column;align-items:flex-start;gap:var(--space-1)}}
.segmented{display:flex;width:100%}
.segmented button{flex:1}
.whenhit .segmented{width:auto;flex:1}
.plantier .offer{min-height:1.5em}
@media (max-width:899px){.quick{display:none}}
.checklist+.primary{margin-top:var(--space-4)}
.row .segmented{width:auto}
.segmented button[aria-pressed=true]:disabled{opacity:1}

/* ===== Oct 22 auth pass: sign-in, the code, sign-up and the intro (the screens with no sidebar) =====
   One centred 420 px column, equal margins, balanced top to bottom, at every width. One motion language: 150 to 220 ms, eased,
   only for a state change (a step, a press, a sheet), none under reduced motion. Every rule here is for the bare screens (.web.bare)
   or an .auth-* part, so the app screens are untouched. */
.web.bare .main{display:flex;flex-direction:column;padding-bottom:var(--space-7)}
.web.bare .main>section{width:100%;max-width:var(--auth-max);margin-block:auto;margin-inline:auto}
.web.bare .footin{width:100%;max-width:var(--auth-max);margin-inline:auto}
.web.bare .footin>*{max-width:none;flex:1}

/* Title, one line, fields, one full-width action. */
.screen-auth h1,.screen-onboard-form h1{margin:0 0 var(--space-2)}
.screen-auth .lead,.screen-onboard-form .lead{margin:0 0 var(--space-4)}
.auth-who{color:var(--ink);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.screen-auth input:not([type=checkbox]),.screen-onboard-form .field input{min-height:var(--action-h)}
.screen-auth input:focus-visible,.screen-onboard-form input:focus-visible{outline-offset:0;border-color:var(--accent)}
.screen-auth form .primary{margin-top:var(--space-5)}
.screen-auth .auth-switch{margin:0 0 var(--space-3)}
.screen-auth .authlinks{margin-top:var(--space-3);align-items:center}
.screen-auth .field:first-of-type,.screen-onboard-form .field:first-of-type{margin-top:0}
.auth-code{font-weight:var(--weight-bold);font-size:var(--text-title);line-height:1;font-family:Geist,monospace;letter-spacing:.5em;text-align:center;padding:var(--space-4) var(--space-2)}
.auth-hint p{color:var(--ink);margin:var(--space-2) 0 0}
.auth-hintactions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.auth-hintactions .secondary{width:100%;margin:0;overflow-wrap:anywhere;text-align:center}
.auth-whoami{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 var(--space-3);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);margin:0 0 var(--space-4)}
.auth-whoami .auth-who{font-size:var(--text-small);min-width:0}
.auth-fielderr{color:var(--red)}
.auth-fielderr:empty{display:none}
.auth-needs{min-height:20px;margin:var(--space-3) 0 0}
.auth-consents{display:flex;flex-direction:column;border:0;border-top:1px solid var(--line);margin:var(--space-4) 0 0;padding:0}
.auth-consents>.auth-consent,.auth-consent-group{border-bottom:1px solid var(--line)}
.auth-consent{display:flex;gap:var(--space-3);align-items:flex-start;margin:0;padding:var(--space-3) 0;font-size:var(--text-small);line-height:1.45;color:var(--ink);cursor:pointer}
.auth-consent input{width:var(--icon);height:var(--icon);margin:0;flex-shrink:0;accent-color:var(--accent)}
.auth-consent-group{display:grid;grid-template-columns:var(--icon) minmax(0,1fr);column-gap:var(--space-3);align-items:start;padding:var(--space-3) 0}
.auth-consent-group .auth-consent{display:contents}
.auth-consent-group .auth-disclose,.auth-consent-group .auth-linetext{grid-column:2;margin:0}
.auth-consent-group .auth-disclose{justify-self:start}
.auth-consent-group .auth-linetext{padding-bottom:var(--space-1)}
.auth-locked{display:grid;grid-template-columns:var(--icon) minmax(0,1fr);column-gap:var(--space-3);align-items:start;padding:0 0 var(--space-3);border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--text-small);line-height:1.45}
.auth-locked-icon{display:flex;align-items:center;min-height:var(--control-h)}
.auth-locked-icon .ico{width:var(--icon);height:var(--icon)}
.auth-locked-main{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--control-h);min-width:0}
.auth-locked-text{display:flex;flex-direction:column;min-width:0}
.auth-locked-text small{font-size:var(--text-caption)}
.auth-locked .auth-disclose,.auth-locked .auth-linetext{grid-column:2;margin:0}
.auth-locked .auth-disclose{justify-self:start}
.auth-locked .auth-linetext{padding-bottom:var(--space-1)}
.auth-error{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:var(--space-3) 0 0;font-size:var(--text-small);line-height:1.45;color:var(--red)}
.auth-error:empty{min-height:20px} /* the line is kept, so an error never moves the form */
.screen-auth form:has(.auth-hintactions) .primary{display:none} /* the typo question is the only choice while it is open */
.auth-error .textbtn{color:var(--red);font-weight:var(--weight-bold);text-decoration:underline;min-height:var(--control-h)}
.screen-auth form .auth-error+.primary{margin-top:var(--space-3)}

/* Motion: a new step eases in; a press gives a little; nothing else moves. */
@keyframes auth-enter{from{opacity:0;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}
.web.bare .main>section.enter{animation:auth-enter var(--dur-2) var(--ease) both}
.web.bare :is(.primary,.secondary,.textbtn,.back,.account-button,.auth-switch button){transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.web.bare :is(.primary,.secondary):active:not(:disabled){transform:scale(.98)}
.web.bare :is(.field input,.handle){transition:border-color var(--dur-1) var(--ease),outline-color var(--dur-1) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .web.bare .main>section.enter{animation:none}
  .web.bare *,.web.bare *::before,.web.bare *::after{transition:none!important}
}

/* The mark in the header lockup, and the welcome screen centred in its one column. */
.brand{gap:var(--space-2)}
.brand .mark{width:var(--mark);height:var(--mark);flex-shrink:0;color:var(--mist);fill:currentColor}
.web.bare .welcome{align-items:center;text-align:center;padding-top:0}
.web.bare .welcome h1{max-width:none}
.web.bare .welcome .welcomeart{align-self:center;justify-content:center}
.web.bare .welcome .welcomeactions{align-self:stretch}
.top .brand{color:var(--ink)}

/* ===== Web design B (Oct 21): Portfolio, Manage, Builder, Plans, Settings, Leaderboard.
   One centred column per page with equal margins, one rhythm (h1, section, card, row), 44px rows, quiet 200ms state changes.
   Component classes here: .pf- portfolio, .mg- manage, .bld- builder, .plan- plans, .set- settings, .lb- leaderboard. ===== */
/* The column: wide pages 960, flows 720, always centred in the space beside the sidebar; the footer row shares the column.
   Sign-in and sign-up (.bare) keep their own narrow column. */
.web:not(.bare) .main>section.wide,.web:not(.bare) .footin.wide{max-width:var(--col-wide);margin-inline:auto}
.web:not(.bare) .main>section.flow,.web:not(.bare) .footin.flow{max-width:var(--col-mid);margin-inline:auto}
.web:not(.bare) .footin{width:100%}
/* One rhythm: the title sits 16 under the top, sections are 32 apart, a card's rows share its 16 padding. */
:is(.screen-portfolio,.screen-running,.screen-limits,.screen-capital,.screen-move,.screen-close,.screen-pause-all,.screen-builder,.screen-plans,.screen-account,.screen-close-account,.screen-restricted,.screen-how,.screen-support,.screen-documents,.screen-document,.screen-board,.screen-board-trader,.screen-board-agent,.screen-share,.screen-inbox)>h1:first-child{margin:var(--space-2) 0 var(--space-4)}
.enter{animation:pageIn var(--motion) var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(var(--space-1))}to{opacity:1;transform:none}}
.row,.agentcard,.boardrow,.chip,.periods button,.tabs button,.segmented button,.secondary,.primary,.mini,.feature,.agentrow,.plan-card{transition:background-color var(--motion) var(--ease),border-color var(--motion) var(--ease),color var(--motion) var(--ease),opacity var(--motion) var(--ease)}
.switch:after{transition:left var(--motion) var(--ease)}
button.row:hover,.agentcard:hover,.boardrow:hover{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.row,.agentcard,.boardrow{min-height:var(--control-h)}
@media (prefers-reduced-motion:reduce){.enter{animation:none}.row,.agentcard,.boardrow,.chip,.periods button,.tabs button,.segmented button,.secondary,.primary,.mini,.feature,.agentrow,.plan-card,.switch:after{transition:none}}

/* Portfolio: big number, chart, two stat cards, three actions, the agents in one card. */
.screen-portfolio .balance{margin:var(--space-2) 0 var(--space-1)}
.screen-portfolio .change{margin:0 0 var(--space-4)}
.screen-portfolio .bigchart,.screen-running .bigchart{height:var(--chart-h);margin:var(--space-3) 0 var(--space-2)}
.screen-portfolio .norecord,.screen-running .norecord{height:var(--chart-h);margin:var(--space-3) 0}
.screen-portfolio .chartnote{margin:0 0 var(--space-4)}
.screen-portfolio .pfcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);border:0;margin:var(--space-4) 0 0}
.screen-portfolio .pfcols>div,.screen-portfolio .pfcols>div+div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4)}
.screen-portfolio .pfcols strong{margin:var(--space-1) 0}
.screen-portfolio .actionsgrid{margin:var(--space-3) 0 var(--space-5)}
/* The row fills its width whatever it holds: one card or two, two actions or three. */
.screen-portfolio .pfcols{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.screen-portfolio .actionsgrid{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}
@media (max-width:380px){.screen-portfolio .actionsgrid{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
.pf-action{padding:0 var(--space-2);white-space:nowrap}
.pf-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:0 var(--space-4)}
.pf-list .agentcard:last-child{border-bottom:0}
.pf-list .agentcard{padding:var(--space-3) 0}
.pf-list .spark{width:var(--art-md)}
.screen-portfolio h2{margin:var(--space-5) 0 var(--space-3)}
.screen-portfolio>.notice{margin:var(--space-2) 0 var(--space-3)}
.screen-portfolio>.notice .textbtn{min-width:var(--control-h)}
@media (max-width:480px){.pf-list .spark{display:none}}

/* Manage: header, value, tabs; the chart and holdings beside one card of actions. */
.screen-running .runhead{padding:var(--space-2) 0 var(--space-3)}
.screen-running .balance{margin:0}
.screen-running .tabs{margin:var(--space-4) 0}
.screen-running .split{gap:var(--space-6);margin-top:var(--space-2)}
.screen-running .split>div:last-child{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-2) var(--space-4) var(--space-3);align-self:start}
.screen-running .split>div:last-child h2{margin:var(--space-3) 0 var(--space-1);font-size:var(--text-body)}
.screen-running .split>div:last-child .row:last-child{border-bottom:0}
.screen-running .split>div:first-child h2:first-of-type{margin-top:var(--space-5)}
.screen-running .holdbar{margin:var(--space-2) 0 var(--space-3)}
.screen-running .receipt{margin:var(--space-2) 0 var(--space-3)}
@media (max-width:899px){.screen-running .split{gap:var(--space-5)}}
/* Manage sub-pages: pair buttons span the column, amounts and fields stay in one rhythm. */
:is(.screen-limits,.screen-capital,.screen-move,.screen-close,.screen-pause-all) .pair{margin:var(--space-5) 0 var(--space-3)}
:is(.screen-limits,.screen-capital,.screen-move,.screen-close,.screen-pause-all)>.small{margin:0 0 var(--space-3)}

/* Builder: idea, the one question, the plan card with tappable numbers, saved agents. */
.screen-builder .buildbar{margin:0 0 var(--space-2)}
.screen-builder .ideabox{margin:var(--space-3) 0 var(--space-4)}
.screen-builder .readline{margin:0 0 var(--space-3)}
.screen-builder .plancard{padding:var(--space-2) var(--space-4) var(--space-3);margin:var(--space-3) 0}
.screen-builder .plancard h3{padding:var(--space-3) 0 var(--space-1);font-size:var(--text-heading)}
.screen-builder .planline{padding:var(--space-3) 0;align-items:baseline;line-height:1.5}
.screen-builder .planline:last-of-type{border-bottom:0}
.screen-builder .planfoot{margin:var(--space-2) 0 0}
.screen-builder .answers{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:0 var(--space-4)}
.screen-builder .answers .row:last-child{border-bottom:0}
.screen-builder .changebox{margin:var(--space-4) 0}
.screen-builder .line{margin:var(--space-5) 0 0}
.screen-builder .strategy-row,.screen-builder .version-row{padding:var(--space-3) 0}
.screen-build-intro .heroart{margin:var(--space-5) 0 var(--space-3)}

/* Plans: four equal cards in a grid, the same rows in each: name, price, one offer line, allowances, button slot. */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:var(--space-4) 0;align-items:stretch}
.plan-card{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4)}
.plan-card.highlight{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--control-h)}
.plan-head h3{font-size:var(--text-heading);letter-spacing:-.4px}
.plan-price{font-size:var(--text-title);font-weight:var(--weight-bold);letter-spacing:-.8px;line-height:1.15}
.plan-offer{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--greenText);min-height:1.5em;line-height:1.5}
.plan-list{list-style:none;margin:var(--space-3) 0 var(--space-4);padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-small);line-height:1.45;color:var(--ink)}
.plan-list li{display:flex;gap:var(--space-2);align-items:flex-start}
.plan-list .ico{width:var(--icon-sm);height:var(--icon-sm);margin-top:var(--space-1);color:var(--green)}
.plan-slot{margin-top:auto;display:flex}
.plan-slot:empty{display:none}
.plan-foot{margin:var(--space-3) 0}
.screen-plans .links{margin:var(--space-2) 0}
.screen-plans>.textbtn{margin-top:var(--space-2)}
@media (max-width:719px){.plan-grid{grid-template-columns:minmax(0,1fr)}}

/* Settings: the profile, then titled groups, each one card of 44px rows. */
.set-group h2{margin:var(--space-5) 0 var(--space-2)}
.set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:0 var(--space-4)}
.set-card .row:last-child,.set-card>.empty{border-bottom:0}
.set-card>.check{margin:var(--space-3) 0}
.set-card>.strategy-actions{margin:var(--space-3) 0}
.set-card>p{margin:var(--space-3) 0}
.set-card .row{padding:var(--space-3) 0}
.set-card .row .segmented{width:auto;min-width:0}
.set-danger{margin:var(--space-5) 0 var(--space-3);display:flex}
.set-danger .secondary{width:100%}
.screen-account .profilehead{padding:var(--space-2) 0 var(--space-2);border-bottom:0}
.screen-account .profilehead .avatar{width:var(--action-h);height:var(--action-h)}
:is(.screen-restricted,.screen-how,.screen-support,.screen-documents,.screen-document)>.lead{margin:0 0 var(--space-3)}
.screen-documents .row,.screen-support .row{padding:var(--space-3) 0}

/* Leaderboard: rank, name, return in one card; the top three get weight, not colour. */
.lb-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:0 var(--space-4);margin:var(--space-3) 0}
.lb-list .boardrow:last-child{border-bottom:0}
.lb-list .boardrow .rank{color:var(--muted);font-variant-numeric:tabular-nums}
.lb-list .boardrow:nth-child(-n+3) .rank{color:var(--ink)}
.screen-board .lead,.screen-board-trader .lead{margin:0 0 var(--space-3)}
.set-card .row>.num{margin-left:auto}
.chart.flat .ln{opacity:.55}
.screen-builder .flex.between{margin:var(--space-2) 0 var(--space-3)}
.screen-builder .flex.between>:is(h1,h2){margin:0}
.screen-builder .readline+.flex.between{margin-top:var(--space-5)}
.screen-builder .plancard+p,.screen-builder .plancard~p.small{margin:var(--space-2) 0 var(--space-3)}
/* A tappable number in the plan reads as text; its 44px hit area grows invisibly around it. */
.screen-builder .planline .num-edit{position:relative;min-width:0;min-height:0;padding:0 var(--space-1)}
.screen-builder .planline .num-edit:after{content:'';position:absolute;inset:-12px -8px}

/* ===== APP SHELL (web-design-a, Oct 21): one centred column, one spacing and type scale, stable bars, one motion rule.
   Owns: the shell (sidebar, top bar, tab bar, page column, footer action), buttons, cards, the account menu, and the
   Library, Agent page and Deploy screens (scoped by .screen-library / .screen-detail / .screen-setup / .screen-review /
   .screen-live). Later rules win over the older per-screen rules above. Values come only from tokens.css. ===== */

/* Shell: clip, never hide, so sticky bars stay stuck (overflow hidden on html and body made them scroll away). */
html,body{overflow-x:clip}
html{scrollbar-gutter:stable}
.skeleton{display:grid;place-items:center;min-height:100vh;padding:var(--space-6) var(--page-gutter);text-align:center}

/* Sidebar and tab bar. */
.sidebar{padding:var(--space-5) var(--space-4)}
.sidebar .brand{padding:0 var(--space-3);min-height:var(--control-h)}
.nav button{min-height:var(--control-h);padding:0 var(--space-3);font-size:var(--text-body);color:var(--muted)}
.nav button.active{color:var(--ink);background:var(--panel2)}
.nav button:hover:not(.active):not(:disabled){background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--ink)}
.orb{min-height:var(--control-h)}
@media (max-width:899px){
  .sidebar{height:var(--tabbar-h);padding:var(--space-1) var(--space-2)}
  .nav button{min-height:var(--control-h);padding:var(--space-1) 0;color:var(--muted);font-size:var(--text-caption)}
  .nav button:hover:not(.active):not(:disabled){background:none!important}
  .workspace{min-height:calc(100vh - var(--tabbar-h))}
  .footer{bottom:var(--tabbar-h)}
}

/* Brand slot: one lockup (mark + wordmark) in the sidebar and the phone top bar. The mark is the inline SVG from the sign-in
   screens; until it is in, the slot stays empty and takes no room. */
.brand-lockup{display:flex;align-items:center;gap:var(--space-2)}
.brand-mark{width:var(--mark);height:var(--mark);flex-shrink:0;display:inline-flex;color:var(--ink)}
.brand-mark:empty{display:none}
.brand-mark svg{width:100%;height:100%;fill:currentColor}
.brand-word{font-size:var(--text-heading);font-weight:var(--weight-bold);letter-spacing:-1px;line-height:1}
.top .brand-lockup{padding:0}

/* Top bar: full width, one fixed gutter, the same on every page so nothing shifts between screens. */
.top{height:var(--topbar-h);padding:0 var(--page-gutter);border-bottom:1px solid transparent}
.top .crumb{gap:var(--space-2);font-size:var(--text-small)}
.account-menu{top:calc(var(--control-h) + var(--space-2));border:1px solid var(--line);box-shadow:0 12px 32px var(--shade)}

/* Page column: one centred column with equal margins. 960 for app screens, 1120 for the library grid, 520 for flows. */
.main{padding:var(--space-5) var(--page-gutter) var(--space-7)}
.main>section{width:100%;max-width:var(--content-max);margin-inline:auto}
.main>section.flow{max-width:var(--flow-max)}
.main>section.screen-library{max-width:var(--library-max)}
.footer{padding:var(--space-3) var(--page-gutter) var(--space-4)}
.footin{margin-inline:auto;max-width:var(--content-max)}
.footin.flow{max-width:var(--flow-max)}
.footin>*{max-width:var(--action-w)}
.footer .footnote-line{white-space:nowrap}
@media (max-width:899px){.footin>*{max-width:none}}

/* Type: headings share one rhythm everywhere. */
h1{margin:0 0 var(--space-4)}
h2{margin:var(--space-6) 0 var(--space-3)}

/* Buttons: one height, radius, weight; hover, pressed, disabled and loading look the same everywhere. */
.primary,.secondary,.chip,.quick button,.keypad button,.periods button,.tabs button,.textbtn,.iconbtn,.account-button,.back,.nav button,.row,.feature,.agentrow{-webkit-tap-highlight-color:transparent}
.primary:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.primary:active:not(:disabled),.secondary:active:not(:disabled){background:color-mix(in srgb,var(--ink) 72%,var(--bg))}
.secondary:hover:not(:disabled),.chip:hover:not(:disabled):not([aria-pressed=true]),.quick button:hover:not(:disabled):not(.active){background:var(--panel)}
.secondary:active:not(:disabled){background:var(--panel2);color:var(--ink)}
.chip:active:not(:disabled):not([aria-pressed=true]){background:var(--panel2)}
.iconbtn:hover:not(:disabled),.back:hover:not(:disabled),.account-button:hover:not(:disabled),.periods button:hover:not(:disabled):not(.active){background:var(--panel2)}
.tabs button:hover:not(.active){color:var(--ink)}
.textbtn:hover:not(:disabled){text-decoration:underline}
.primary:disabled,.secondary:disabled{opacity:.4}
button[aria-busy=true]{position:relative;color:transparent}
button[aria-busy=true]:after{content:'';position:absolute;width:var(--icon);height:var(--icon);border:2px solid var(--onink);border-top-color:transparent;border-radius:var(--radius-pill)}
.chips{gap:var(--space-2)}
.periods{gap:var(--space-1)}
.keypad button{font-size:var(--text-title);font-weight:var(--weight-regular)}
.keypad button:hover{background:var(--panel)}
.keypad button:active{background:var(--panel2)}

/* Cards: tappable ones lift their border on hover; focus rings follow the corner radius. */
.feature,.agentrow,.row{transition-property:border-color,background-color}
.feature:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
.agentrow:hover{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.feature:focus-visible{outline-offset:2px;border-radius:var(--radius-card)}
.agentrow:focus-visible{outline-offset:-2px;border-radius:var(--radius-control)}

/* Library */
.screen-library .libhead h1{margin:0}
.screen-library .tabs{margin:var(--space-3) 0 var(--space-4)}
.screen-library .searchbox{margin:var(--space-3) 0}
.screen-library .chips{margin:0}
.screen-library .featurehead{margin:var(--space-6) 0 var(--space-3)}
.screen-library .featurehead h2,.screen-library .shelf h2{margin:0}
.screen-library .shelf>.featurehead{margin:var(--space-6) 0 var(--space-2)}
.screen-library .featured{gap:var(--space-4)}
.screen-library .feature{min-height:0;gap:var(--space-3)}
.screen-library .periods{justify-content:flex-start;gap:var(--space-2);margin:var(--space-3) 0 var(--space-2)}
.screen-library .recordsline{margin:0 0 var(--space-2)}
.screen-library .shelves{gap:0 var(--space-7)}
.screen-library .agentrow{min-height:calc(var(--control-h) + var(--space-5));padding:var(--space-3) var(--space-1)}
.screen-library .agentrow .side{flex-direction:row;align-items:center;gap:var(--space-3)}
.screen-library .agentrow .spark{width:var(--art-md)}
@media (min-width:640px) and (max-width:899px){
  .screen-library .featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-right:0;padding-right:0}
  .screen-library .feature{flex:none}
  .screen-library .shelves{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-5)}
}

/* Agent page: chart and numbers on the left, how it works on the right; one column under 1280 px. */
.screen-detail .split{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
@media (min-width:1280px){.screen-detail .split{grid-template-columns:minmax(0,1fr) var(--aside-w);gap:var(--space-7)}}
.screen-detail .agenthead{align-items:center;gap:var(--space-4)}
.screen-detail .agenthead h1{margin:0 0 var(--space-1)}
.screen-detail .agenthead .art{width:var(--art-md);height:var(--art-md);border-radius:var(--radius-card)}
.screen-detail .bigreturn{margin:var(--space-5) 0 var(--space-1)}
.screen-detail .bigchart{margin:var(--space-4) 0 var(--space-2)}
.screen-detail .periods{margin:var(--space-2) 0 var(--space-3)}
.screen-detail .stats{margin:var(--space-3) 0 0;padding:var(--space-4) 0;gap:var(--space-4)}
.screen-detail h2{margin:var(--space-6) 0 var(--space-3)}
.screen-detail .split>div:last-child>h2:first-child{margin-top:var(--space-5)}
@media (min-width:1280px){.screen-detail .split>div:last-child>h2:first-child{margin-top:0}}
.screen-detail .stepitem{padding:var(--space-2) 0}

/* Deploy: account, amount, review, live. A narrow centred column; the amount is the one big number. */
.screen-setup h1,.screen-review .reviewh{text-align:center}
.screen-setup h1{font-size:var(--text-heading);font-weight:var(--weight-medium);margin:var(--space-2) 0 var(--space-6)}
.screen-setup .amount{justify-content:center;align-items:center;margin:0 0 var(--space-2)}
.screen-setup .amount span{font-size:var(--text-title)}
.screen-setup .amount input{width:auto;max-width:100%;text-align:center;field-sizing:content;min-width:var(--space-7)}
@supports not (field-sizing:content){.screen-setup .amount input{width:100%}}
.screen-setup{padding-top:var(--space-6)}
.screen-setup .amounthint{text-align:center;min-height:var(--space-5)}
.screen-setup .accountline{text-align:center;margin:0 0 var(--space-5)}
.screen-setup .notice{margin:0 0 var(--space-4)}
.screen-setup .quick{gap:var(--space-2);margin:0 0 var(--space-4)}
.screen-setup .quick button{background:var(--bg)}
.screen-setup .quick button.active{background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.screen-review .bigamount{text-align:center;margin:var(--space-2) 0 var(--space-1)}
.screen-review .reviewh{margin:0 0 var(--space-5)}
.screen-review .minirow{padding:var(--space-3) 0}
.screen-review .minirow .spark{display:none}
.screen-review .reviewchart{margin:var(--space-2) 0 var(--space-3)}
.screen-live{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:var(--space-7)}
.screen-live .heroart{justify-content:center;margin:0 0 var(--space-5)}
.screen-live .livepage{display:flex;flex-direction:column;align-items:center}

/* Motion: state changes only (150 to 250 ms, one easing). Nothing animates under prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .primary,.secondary,.chip,.quick button,.keypad button,.periods button,.tabs button,.textbtn,.iconbtn,.account-button,.back,.nav button,.agentrow,.feature,.row{transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
  .primary:active:not(:disabled),.secondary:active:not(:disabled){transform:scale(.98)}
  .app-enter{animation:app-enter var(--dur-3) var(--ease) both}
  .account-menu{animation:app-pop var(--dur-2) var(--ease) both}
  .chat-sheet{animation:scrim-in var(--dur-2) var(--ease) both}
  .sheetpanel{animation:app-enter var(--dur-2) var(--ease) both}
  button[aria-busy=true]:after{animation:app-spin 700ms linear infinite}
  .stepdot,.risklevel span,.holdbar span{transition:background-color var(--dur-2) var(--ease)}
}
@keyframes app-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@keyframes app-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes app-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Back: the first thing in the content column, top left, a 44 px target; the icon lines up with the page's left edge. The old
   text-button backs inside the builder pages are covered by it. */
.app-back{display:inline-grid;place-items:center;margin:calc(-1 * var(--space-2)) 0 var(--space-2) calc(-1 * var(--space-3));color:var(--ink);border-radius:var(--radius-pill)}
.app-back+.textbtn,.app-back+.error+.textbtn{display:none}
.top .crumb{gap:var(--space-2)}
/* ===== end APP SHELL ===== */

/* Sign-up form footer (Oct 22): flush at the bottom on the bare screens (no tab bar there), safe-area padding, the reason the button is off shown above it. */
.web.bare .footer{bottom:0}
.web.bare .footer::after{content:"";display:block;height:var(--safe-bottom)}
.footform{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.footneed{margin:0;min-height:20px;font-size:var(--text-small);line-height:20px;color:var(--muted);text-align:center}
.footform .primary{width:100%}