/* The phone app's one stylesheet (spec 2026-09-24 section 7). Tokens are
   dash.html's :root values, which are design-md's binance.md. Rules from
   that file this sheet keeps, and test_dash_app checks:
     - yellow (--accent) marks the one primary action and the selected tab,
       nothing else, never body text.
     - green/red are price direction and PnL as TEXT or a small badge, never
       a fill.
     - muted text on a card is --ink2 (#929aa5); #707a8a fails contrast there.
   Numbers are tabular everywhere (body), in the system stack: Binance's
   faces are licensed and the CSP allows no font from anywhere else. */
:root{
  --bg:#0b0e11;
  --surface:#181a20;
  --panel:#1e2329;
  --panel-2:#2b3139;
  --grid:#2b3139;
  --ink:#eaecef;
  --ink-hi:#ffffff;
  --ink2:#929aa5;
  --pos:#0ecb81;
  --neg:#f6465d;
  --accent:#fcd535;
  --accent-on:#181a20;
  --info:#3b82f6;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --r-btn:6px;--r-card:8px;--r-sheet:12px;
  --tab-h:56px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);font-variant-numeric:tabular-nums;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px}
.pos{color:var(--pos)}
.neg{color:var(--neg)}

/* top bar: the account switcher and the honesty pills */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--s2);min-height:56px;padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s4) var(--s2);background:var(--bg);border-bottom:1px solid var(--grid)}
.grow{flex:1}
/* account switcher (spec 1.1, audit finding 6): a pill button, not the
   native <select> - opens the same themed #sheet the leg detail uses
   (renderAcctSheet() in app.js), Binance's own pattern for "pick one of
   several related things" (design-md binance.md, Collapsing Strategy). */
.switch-pill{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 var(--s3);border-radius:999px;background:var(--panel);color:var(--ink-hi);font:600 13px var(--sans)}
.pill{padding:2px 10px;border-radius:999px;background:var(--panel);color:var(--ink2);font-size:12px}
.banner{padding:var(--s2) var(--s4);background:var(--panel-2);color:var(--ink);font-size:13px}

/* screens */
main{padding:var(--s4) var(--s4) calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s4))}
.enter{animation:enter 200ms var(--ease-out)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.h{margin:0 0 var(--s3);font-size:20px;color:var(--ink-hi)}
.h2{margin:var(--s5) 0 var(--s2);font-size:15px;color:var(--ink-hi)}
.card{margin-bottom:var(--s3);padding:var(--s4);border-radius:var(--r-card);background:var(--panel)}
.k,dt{font-size:12px;color:var(--ink2)}
dl{margin:0}
dd{margin:0;color:var(--ink)}
.big{font-size:28px;font-weight:600;color:var(--ink-hi)}
.sym{font-weight:600;color:var(--ink-hi)}
.cap{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.empty{padding:var(--s5);text-align:center;color:var(--ink2)}
.grid3,.kv3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.kv>div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--grid)}
.kv dd{text-align:right}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--panel-2);color:var(--ink);font-size:11px;font-weight:600;vertical-align:middle}
.badge.pos{color:var(--pos)}
.badge.neg{color:var(--neg)}
.count{margin-left:auto;font-size:12px;color:var(--ink2)}
.acct-h{display:flex;align-items:center;gap:var(--s2)}
.chg{font-size:14px;font-weight:600;margin-left:6px}
.chg.pos{color:var(--pos)}
.chg.neg{color:var(--neg)}

/* Home hero (spec 1.1, 1.2): range tabs are the one place besides the tab
   bar that gets yellow (spec 6's stated exception), so they use their own
   underline colour instead of .seg's white one. */
.hero-top{display:flex;justify-content:space-between;align-items:center}
.range-tabs{display:flex;gap:var(--s3);font-size:13px;color:var(--ink2)}
/* final review I6: 7D/30D/All measured 19-30px wide at min-height:44px -
   height passed the 44x44 touch-target rule (spec 6), width did not. */
.range-tabs button{min-width:44px;min-height:44px;padding:0 2px}
.range-tabs button[aria-selected="true"]{color:var(--ink-hi);box-shadow:inset 0 -2px 0 var(--accent)}
#home-chart,#a-chart{height:90px;margin:var(--s2) 0}
.h2-row{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s5) 0 var(--s2)}
.h2-row .h2{margin:0}
/* the Home "See all" link into #/accounts (spec 6: 44x44 touch targets) */
.h2-row a{display:flex;justify-content:flex-end;align-items:center;min-width:44px;min-height:44px;color:var(--ink2)}
#home-accts{margin-bottom:var(--s4)}
.acct-scroll{display:flex;gap:var(--s2);overflow-x:auto;margin-top:var(--s2)}
.acct-mini{flex:0 0 138px;padding:var(--s3);border-radius:var(--r-card);background:var(--panel)}
.acct-mini-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.acct-mini-eq{margin-top:4px;font-size:16px;font-weight:600;color:var(--ink-hi)}
.acct-mini-pnl{font-size:12px}
.warn-strip .warn-row:last-of-type{border-bottom:0}

/* account page / Fees crumb (spec 3, 5) */
.crumb{margin-bottom:var(--s2)}
.crumb .btn{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--ink2);font-size:13px}

/* rows: every tappable one is at least 44px tall (spec 6) */
.list{margin:0;padding:0;list-style:none}
.pos-h,.leg,.warn-row,.mkt-row,.hist-row,.order-row,.acct-card,.acct-sheet-row{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;text-align:left}
.leg,.mkt-row,.hist-row,.order-row,.acct-sheet-row{justify-content:space-between;border-bottom:1px solid var(--grid)}
.legs{margin-top:var(--s3);border-top:1px solid var(--grid)}
.warn-row{padding:var(--s2) 0}
.warn-row .ico{width:18px;height:18px;color:var(--neg)}
.mkt-row{min-height:56px;border-bottom:0}
/* column header above the list (spec 4, owner screenshot): no sort carets -
   nothing here sorts, so a caret would be a fake affordance. */
.mkt-head{display:flex;align-items:center;gap:var(--s2);padding:0 0 var(--s2);color:var(--ink2);font-size:12px}
.mkt-head-name{margin-right:auto}
.mkt-head-px{text-align:right}
.mkt-head-chg{width:76px;flex:none;text-align:right}
.mkt-badge{position:relative;overflow:hidden;display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel-2);color:var(--ink-hi);font-weight:600;font-size:13px}
/* the coin logo sits over the letter fallback (owner override of "no
   third-party assets", 2026-09-25): absolutely positioned so a slow or
   failed load never resizes the badge or reflows the row. */
.mkt-badge img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.mkt-name{display:flex;flex-direction:column;margin-right:auto;min-width:0}
/* a long fsym + Perp/open badges shrinks before the fixed price/pill columns
   do (see flex:none below), so it ellipsises instead of pushing them out of
   alignment at 375px (spec 4: header labels must line up with their column). */
.mkt-name>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mkt-price{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.mkt-px{color:var(--ink-hi);font-size:16px;font-weight:500}
/* the 24h change pill (spec 4): Binance mobile's Futures-list geometry, a
   fixed-width block (flex:none, so it can't shrink) so pills line up as a
   column - but the owner asked for its layout only, so the fill stays
   neutral panel-2 and direction is text colour (trading colours are never
   a fill); ink2 when chg is null. */
.mkt-chg{display:flex;flex:none;align-items:center;justify-content:center;width:76px;height:32px;border-radius:var(--r-btn);background:var(--panel-2);color:var(--ink2);font-size:14px;font-weight:600}
.mkt-chg.pos{color:var(--pos)}
.mkt-chg.neg{color:var(--neg)}
.hist-row>span:last-child,.order-row>span:last-child{text-align:right}
.acct-sheet-eq{color:var(--ink2);font-size:13px}
.acct-sheet-eq .badge{margin-left:6px}

/* tap feedback (spec 6): every tappable row/card/chip/button gets a pressed
   state within 100ms; prefers-reduced-motion (bottom of this file) keeps the
   colour step but drops the transition. */
.leg,.pos-h,.warn-row,.mkt-row,.hist-row,.order-row,.acct-card,.acct-sheet-row,
.switch-pill,.tabbar a,.tf button,.seg button,.more,.close,.range-tabs button,.acct-mini{
  transition:background-color 100ms var(--ease-out);
}
.leg:active,.pos-h:active,.warn-row:active,.mkt-row:active,.hist-row:active,
.order-row:active,.acct-card:active,.acct-sheet-row:active,.switch-pill:active,
.tabbar a:active,.tf button:active,.seg button:active,.more:active,.close:active,
.range-tabs button:active,.acct-mini:active{
  background-color:var(--panel-2);
}

/* sub-tabs and timeframes: selected is white, not yellow (yellow is the tab
   bar's alone) */
.seg{display:flex;gap:var(--s4);margin-bottom:var(--s3);border-bottom:1px solid var(--grid);overflow-x:auto}
.seg button{min-height:44px;color:var(--ink2);font-weight:600;white-space:nowrap}
.seg button[aria-selected="true"]{color:var(--ink-hi);box-shadow:inset 0 -2px 0 var(--ink-hi)}
.tf{display:flex;gap:var(--s1);margin:var(--s3) 0}
.tf button{flex:1;min-height:44px;border-radius:var(--r-btn);color:var(--ink2)}
.tf button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink-hi)}
.more{width:100%;min-height:44px;margin-top:var(--s3);border-radius:var(--r-btn);background:var(--panel-2)}

/* chart */
.c-head .big{display:block}
#chart{height:320px}
.credit{display:inline-block;margin:var(--s1) 0 var(--s3);font-size:11px;color:var(--ink2)}

/* the one primary action on any page */
.primary{width:100%;min-height:44px;padding:0 var(--s5);border-radius:var(--r-btn);background:var(--accent);color:var(--accent-on);font-weight:600;transition:opacity 100ms var(--ease-out)}
.primary:active{opacity:.85}

/* bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--surface);border-top:1px solid var(--grid)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:var(--tab-h);font-size:11px;color:var(--ink2)}
.tabbar a[aria-current="page"]{color:var(--accent)}

/* bottom sheets: native <dialog>s - the leg sheet, and #act on top of it
   for acting (spec 2026-09-24 phase 2a, section 7) */
#sheet,#act{width:100%;max-width:none;max-height:85dvh;margin:auto 0 0;padding:0;border:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--panel);color:var(--ink);overflow:auto}
#sheet[open],#act[open]{animation:sheet 250ms var(--ease-drawer)}
@keyframes sheet{from{transform:translateY(100%)}}
#sheet::backdrop,#act::backdrop{background:rgba(0,0,0,.6)}
.sheet-in{padding:var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))}
.grab{width:36px;height:4px;margin:0 auto var(--s2);border-radius:2px;background:var(--panel-2)}
.sheet-top{display:flex;align-items:center;justify-content:space-between}
.sheet-top h2{margin:0;font-size:17px;color:var(--ink-hi)}
.close{display:grid;place-items:center;width:44px;height:44px}

/* acting (phase 2a): Binance's button-secondary-on-dark for every step but
   the money one, which is .primary - the only yellow on the sheet. Menus,
   picks and errors are neutral: green and red stay price and PnL. */
.btn2{min-height:44px;padding:0 var(--s4);border-radius:var(--r-btn);background:var(--panel-2);color:var(--ink-hi);font-weight:600}
.btn2:active,.primary:active,.coin:active{opacity:.75}
.btn2[disabled],.primary[disabled]{opacity:.4;cursor:default}
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.coin{flex:none;min-height:44px;padding:0 var(--s3);border-radius:var(--r-btn);background:var(--panel-2);color:var(--ink-hi);font-size:12px;font-weight:600}
.menu{margin:var(--s2) 0 0;padding:0;list-style:none}
.menu button{display:flex;align-items:center;width:100%;min-height:48px;padding:0 var(--s2);border-bottom:1px solid var(--grid);text-align:left;color:var(--ink-hi)}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.act-text{white-space:pre-line}
.act-legs .leg{cursor:default}
.act-err{margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--r-card);background:var(--panel-2);color:var(--ink-hi)}
.field{display:block;margin-top:var(--s3)}
.field input{width:100%;min-height:44px;margin-top:var(--s1);padding:0 var(--s4);border:1px solid var(--grid);border-radius:var(--r-card);background:var(--bg);color:var(--ink-hi);font:16px var(--sans)}
.field input[aria-invalid="true"]{border-color:var(--ink2)}
.hint{min-height:18px;margin:var(--s1) 0 0;font-size:12px;color:var(--ink2)}
.foot{display:grid;gap:var(--s2);margin-top:var(--s4)}
/* the kill switch (spec 7, owner decision 15): neutral grey progress fill,
   never yellow (the one primary action elsewhere) or red (price/PnL only).
   The fill's own scaleX is set frame-by-frame in JS from real elapsed time,
   not a CSS transition, so it needs no prefers-reduced-motion override here.
   touch-action:pan-y (not none, review round 1 Important 2): a vertical
   scroll starting on this full-width button must still win, which fires
   pointercancel and cancels the hold - "none" held the touch hostage for
   the full 2 s instead of ever letting it become a scroll. */
.kill{position:relative;overflow:hidden;width:100%;min-height:52px;margin-top:var(--s3);border-radius:var(--r-btn);background:var(--panel-2);color:var(--ink-hi);font-weight:600;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kill-fill{position:absolute;inset:0;background:var(--ink2);opacity:.35;transform:scaleX(0);transform-origin:left}
.kill span:last-child{position:relative}
.bot-link{display:flex;align-items:center;width:fit-content;min-width:44px;min-height:44px;margin-left:auto;color:var(--ink2)}
.log-row{display:grid;gap:2px;padding:var(--s2) 0;border-bottom:1px solid var(--grid)}

/* loading */
.skel{height:14px;margin:var(--s2) 0;border-radius:var(--r-btn);background:var(--panel-2);animation:pulse 1.2s ease-in-out infinite alternate}
.skel.w40{width:40%}
.skel.w60{width:60%}
.skel.w80{width:80%}
.skel.tall{height:120px}
@keyframes pulse{to{opacity:.4}}

/* sign-in pages (login.html) */
body.signin{display:flex;align-items:center;justify-content:center;padding:calc(var(--s5) + env(safe-area-inset-top)) calc(var(--s4) + env(safe-area-inset-right)) calc(var(--s5) + env(safe-area-inset-bottom)) calc(var(--s4) + env(safe-area-inset-left))}
.signin-card{width:100%;max-width:340px;text-align:center}
.signin-card .mark{width:56px;height:56px;border-radius:14px}
.signin-card h1{margin:var(--s4) 0 var(--s2);font-size:19px;color:var(--ink-hi)}
.signin-card p{color:var(--ink2)}
.note{padding:var(--s3);border:1px solid var(--grid);border-radius:var(--r-card);background:var(--panel);color:var(--ink)}
.signin-card footer{margin-top:var(--s5);font-size:11px;color:var(--ink2)}

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