/* mobile.css - phone layer. Linked with media="(max-width:700px)" and scoped to html.m,
   which mobile.js sets. Uses the colour variables of style.css (light and dark). */

/* hide the PC interface; the PC view comes back only for the fallback (html.m-fb) */
html.m:not(.m-fb) #app{display:none!important}
html.m.m-fb #m,html.m.m-fb #mst{display:none!important}
html.m body{max-width:none;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%;overflow-x:hidden}
html.m.m-fb body{padding:var(--gap) 16px 40px}

html.m #m{--mp:16px;display:block;min-height:100dvh;color:var(--fg);background:var(--bg)}
html.m #m *{box-sizing:border-box}
html.m #m button{font:inherit;margin:0;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.m #m svg{height:auto;color:inherit}
html.m #m svg.mi,html.m #m svg.ic{width:22px;height:22px;flex:none}

/* header */
html.m #m .mh{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--mp) 10px;background:var(--bg)}
html.m #m .mh h1{margin:0;font:500 1.5rem/1.2 "DM Sans",Inter,system-ui,sans-serif;letter-spacing:-.01em}
html.m #m .mt{display:flex;gap:10px}
html.m #m .mib{width:44px;height:44px;padding:0;border-radius:14px;border:1px solid var(--bd);background:transparent;color:var(--fg);display:grid;place-items:center}
html.m #m .mib.on{background:var(--ac);color:var(--onac)}

/* page */
html.m #m .mv{padding:4px var(--mp) calc(96px + env(safe-area-inset-bottom))}
html.m #m .card{margin:0;padding:16px;border-radius:18px}
html.m #m .card h2{margin:0;font:500 1.15rem/1.3 "DM Sans",Inter,system-ui,sans-serif}
html.m #m .pad{padding:8px 0;margin:0}
html.m #m .mu{color:var(--mu);font-size:.9rem}
html.m #m .pos{color:var(--pos)}html.m #m .neg{color:var(--neg)}

/* tiles (swipeable) */
html.m #m .tiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--mp);margin:0 calc(var(--mp)*-1);padding:2px var(--mp);scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.m #m .tiles::-webkit-scrollbar{display:none}
html.m #m .tile{flex:0 0 78%;scroll-snap-align:start;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:16px 18px;min-height:112px}
html.m #m .tl{color:var(--mu);font-size:.9rem}
html.m #m .tv{font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
html.m #m .ts{color:var(--mu);font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.m #m .dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
html.m #m .dots i{width:6px;height:6px;border-radius:50%;background:var(--bd);transition:background .2s,width .2s}
html.m #m .dots i.on{width:18px;border-radius:3px;background:var(--mu)}

/* segmented control and chips */
html.m #m .sgc{display:flex;gap:4px;padding:4px;background:var(--card);border:1px solid var(--bd);border-radius:14px}
html.m #m .sgc button{flex:1;min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--mu);font-size:.95rem;font-weight:500}
html.m #m .sgc button.on{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
html.m #m .chips{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--mp)*-1);padding:2px var(--mp);scrollbar-width:none}
html.m #m .card .chips{margin:12px -16px 0;padding:2px 16px}
html.m #m .chips::-webkit-scrollbar{display:none}
html.m #m .chips button{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--bd);background:transparent;color:var(--fg);font-size:.92rem;font-weight:500;white-space:nowrap}
html.m #m .chips button.on{background:var(--ac);color:var(--onac);border-color:transparent}

/* performance card */
html.m #m .ch-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
html.m #m .mixb{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 4px;border:0;background:transparent;color:var(--mu);font-size:.92rem}
html.m #m .mixb svg{width:16px;height:16px}
html.m #m .chw{margin-top:12px}
html.m #m svg.ch{width:100%;touch-action:pan-y;cursor:default;color:var(--mu)}
html.m #m svg.ch text{opacity:.75}
html.m #m svg.ch polyline.ln{fill:none;stroke-width:2}
html.m #m .mlg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.92rem}
html.m #m .mlg i{font-style:normal;font-weight:600}

/* positions */
html.m #m .plist{padding:0 2px}
html.m #m .grp{margin:18px 0 4px;color:var(--mu);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
html.m #m .pr{border-bottom:1px solid var(--bd)}
html.m #m .prh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;padding:14px 0;border:0;background:transparent;color:var(--fg);text-align:left}
html.m #m .pl{display:flex;flex-direction:column;gap:3px;min-width:0}
html.m #m .pn{font-size:1.05rem;font-weight:500;overflow-wrap:anywhere}
html.m #m .psb{color:var(--mu);font-size:.88rem}
html.m #m .pv{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;font-variant-numeric:tabular-nums}
html.m #m .pa{font-size:1.05rem;font-weight:500}
html.m #m .pp{font-size:.9rem;color:var(--mu)}
html.m #m .pp i{font-style:normal;color:var(--mu)}
html.m #m .pp.pos{color:var(--pos)}html.m #m .pp.neg{color:var(--neg)}
html.m #m .pd{display:none;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin:0 0 14px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--fg) 6%,transparent);font-variant-numeric:tabular-nums}
html.m #m .pr.open .pd{display:grid}
html.m #m .pd div{display:flex;flex-direction:column;gap:3px;min-width:0}
html.m #m .pd span{color:var(--mu);font-size:.8rem}
html.m #m .pd b{font-size:.98rem;font-weight:500;white-space:nowrap}

/* allocation */
html.m #m .pieh{display:flex;justify-content:center;padding:20px 16px}
html.m #m .pieh svg{width:min(76vw,300px);overflow:visible}
html.m #m .alist{padding:0 2px}
html.m #m .al{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--bd);font-variant-numeric:tabular-nums}
html.m #m .al i{width:12px;height:12px;border-radius:50%}
html.m #m .an{font-size:1.02rem;min-width:0;overflow-wrap:anywhere}
html.m #m .ap{color:var(--mu);min-width:3.4em;text-align:right}
html.m #m .av{min-width:5.4em;text-align:right;font-weight:500}

/* more + empty state */
html.m #m .list{background:var(--card);border:1px solid var(--bd);border-radius:18px;overflow:hidden}
html.m #m .li{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 16px;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--fg);font-size:1rem;text-align:left}
html.m #m .li:last-child{border-bottom:0}
html.m #m .lab{margin:20px 0 -4px;color:var(--mu);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
html.m #m .empty .go{margin-top:14px;min-height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--ac);color:var(--onac);font-weight:500}

/* bottom tab bar */
html.m #m .mb{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--bd)}
html.m #m .mb button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:50px;padding:4px 0;border:0;background:transparent;color:var(--mu);font-size:.6rem;font-weight:500;min-width:0;letter-spacing:-.01em}
html.m #m .mb button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.m #m .mb button.on{color:var(--fg)}

/* index picker sheet */
html.m #m .sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;background:rgba(5,8,16,.55)}
html.m #m .sh{width:100%;max-height:80dvh;overflow:auto;padding:14px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--card);border-top:1px solid var(--bd)}
html.m #m .sht{padding:4px 0 10px;color:var(--mu);font-size:.85rem}
html.m #m .so{display:block;width:100%;min-height:50px;padding:0 4px;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--fg);font-size:1.02rem;text-align:left}
html.m #m .so.on{font-weight:600}

/* loading bar */
#mst{position:fixed;left:0;right:0;top:0;z-index:40;padding:6px 12px;background:var(--ac);color:var(--onac);font:500 .8rem Inter,system-ui,sans-serif;text-align:center}

/* spacing between stacked blocks (kept last so it beats the .card margin reset) */
html.m #m .mv>*+*{margin-top:12px}
html.m #m .mv>.lab{margin-top:20px}

/* chart x-axis: keep only first and last date so labels never overlap on a phone */
html.m #m svg.ch text[text-anchor="middle"]{display:none}

html.m #m .note{margin:10px 0 0;color:var(--mu);font-size:.85rem}

/* ---- Transactions, Dividends, Contribution, Wealth builder, Users ---- */
html.m #m .sgc.mini{flex:none;gap:2px}
html.m #m .sgc.mini button{flex:none;min-height:36px;padding:0 14px;font-size:.9rem}
html.m #m .mon{margin:16px 0 2px;color:var(--mu);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
html.m #m .sortl{display:flex;justify-content:space-between;align-items:center;color:var(--mu);font-size:.88rem}
html.m #m .more{display:block;width:100%;min-height:46px;margin-top:8px;border:1px solid var(--bd);border-radius:14px;background:transparent;color:var(--fg);font-weight:500}
html.m #m .cs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
html.m #m .cs.three{grid-template-columns:repeat(3,1fr);margin-top:0}
html.m #m .cs>div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
html.m #m .cs span{color:var(--mu);font-size:.76rem}
html.m #m .cs b{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.m #m .cr{padding:10px 0;border-bottom:1px solid var(--bd)}
html.m #m .cl{display:flex;justify-content:space-between;gap:10px;font-size:.98rem}
html.m #m .cl b{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
html.m #m .cbar{height:6px;margin-top:8px;border-radius:3px;background:color-mix(in srgb,var(--fg) 8%,transparent)}
html.m #m .cbar i{display:block;height:100%;border-radius:3px;background:var(--pos)}
html.m #m .cbar i.neg{background:var(--neg)}
html.m #m .cr.tot{border-bottom:0;font-weight:600}
html.m #m .card .grp{margin-top:14px}
html.m #m .pd .wide{grid-column:1/-1}
html.m #m .pd .wide b{white-space:normal;font-size:.9rem}
html.m #m svg.dv{width:100%;touch-action:pan-y;color:var(--mu)}
html.m #m svg.dv text{opacity:.85}
html.m #m .tip{min-height:1.4em;margin-top:8px;color:var(--mu);font-size:.85rem}
html.m #m .tip b{color:var(--fg)}
html.m #m svg.wbs{color:var(--mu)}
html.m #m .wg{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:14px}
html.m #m .wf{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--mu);font-size:.8rem}
html.m #m .wf.wide{grid-column:1/-1}
html.m #m .inp{width:100%;margin:0;padding:12px;border:1px solid var(--bd);border-radius:12px;background:transparent;color:var(--fg);font:inherit;font-size:1rem}
html.m #m .wf input[type=range]{padding:0;border:0;accent-color:var(--ac)}
html.m #m .chk{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.95rem}
html.m #m .chk input{width:20px;height:20px;margin:0;accent-color:var(--ac)}
html.m #m .li small{display:block;margin-top:2px;color:var(--mu);font-size:.8rem}
html.m #m .ur{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-bottom:1px solid var(--bd)}
html.m #m .ui small{display:block;margin-top:2px;color:var(--mu);font-size:.8rem}
html.m #m .uc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html.m #m .uc .chips{margin:0;padding:0}
html.m #m .uc .chips button{min-height:34px;padding:0 12px;font-size:.82rem}
html.m #m section .go{margin-top:16px;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--ac);color:var(--onac);font-weight:500}
html.m #m .note.neg{color:var(--neg)}