/* Layout: flat Midnight shell. Opaque token surfaces separated by fill, one static navy wash at the top,
   sidebar nav, title + utilities in the top bar. Dark only. */
:root{
  color-scheme:dark;
  /* surfaces: Midnight-tinted near-black, depth from small lightness steps only */
  --bg:#05080d; --sf-1:#0d1520; --sf-2:rgba(140,175,230,.055); --sf-3:rgba(140,175,230,.12);
  /* Glass (v329): every card is a low-opacity blue glass over the moving background. --sf-1 is the solid stand-in for rings and cut-outs. */
  --glass:linear-gradient(160deg,rgba(36,54,78,.34) 0%,rgba(20,31,45,.3) 55%,rgba(14,22,33,.32) 100%);
  --glass-blur:blur(24px) saturate(1.2);
  --glass-dw:linear-gradient(160deg,rgba(24,36,52,.9) 0%,rgba(14,22,33,.9) 100%);
  --glass-pop:rgba(20,30,45,.94);
  --well:rgba(4,9,16,.42);
  --hover:rgba(170,195,235,.04); --press:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --scrim:rgba(2,5,9,.6);
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);
  --sel:rgba(255,255,255,.13);
  --card:var(--sf-1); --card-2:var(--sf-2); --row:var(--sf-3);
  --navy:#0b3b78; /* brand deep navy: the one static wash at the top of the page and the logo tile */
  /* text */
  --fg:#eceef2; --fg-2:#c3c8d0; --muted:#9aa1ab; --dim:#838a95;
  /* meaning: hue text on its own faint tint */
  --accent:#4a8cff; --accent-t:rgba(74,140,255,.14);
  --pos:#4fb58a; --pos-t:rgba(79,181,138,.14);
  --neg:#e0677a; --neg-t:rgba(224,103,122,.14);
  --warn:#d9a24a; --warn-t:rgba(217,162,74,.14);
  --neu-t:rgba(170,195,235,.07); --neu-h:rgba(170,195,235,.11); /* hover on --neu-t controls */
  /* charts */
  --ch-line:var(--fg); --ch-line-2:color-mix(in srgb,var(--fg) 45%,transparent);
  --ch-grid:rgba(255,255,255,.06); --ch-ref:rgba(255,255,255,.24); --ch-zero:rgba(255,255,255,.14); --ch-tag:rgba(255,255,255,.09); --ch-band:rgba(255,255,255,.025);
  --ser-1:var(--accent); --ser-2:#c9894a;
  /* radius: smaller elements get smaller radii */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  /* spacing */
  --sp-hair:2px; /* optical offsets only: nav/tab gaps, sub-line offsets */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px;
  --w-main:none; /* v329: the content fills the whole dashboard width */
  /* control heights */
  --h-sm:28px; --h-md:32px; --h-lg:36px;
  /* type */
  --f-display:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-micro:500 11px/1.3 var(--f-body);
  --t-label:400 12px/1.35 var(--f-body);
  --t-ui:500 13px/1.4 var(--f-body);
  --t-body:400 14px/1.6 var(--f-body);
  --t-title:600 16px/1.3 var(--f-body);
  --t-page:600 20px/1.25 var(--f-display);
  --t-hero:600 32px/1 var(--f-display);
  --lh-num:1; --lh-tight:1.25; --lh-ui:1.4; --lh-prose:1.6;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--t-body);-webkit-font-smoothing:antialiased}
/* Tabular figures in every numeric context (values, cells, axes, live readouts) so columns and hover readouts never jitter.
   Set per context rather than on body: Inter's tnum also widens the hyphen, which spaces out IDs like "LB-0001" in running text */
.num,.hc-bal,#trG.up,#trG.dn,#hbG,.hc-yl,.hc-xl,.ch .yl,.ch .xl,.hx,.hc-tip,.tr-mt td,.tr-tt td,.tr-ir,.tr-sr b,.asl-r .num,
.kp-c b,.rc-k b,.an-stats b,.ax-tile b,.rp-cnt b,.rq-row .val,.ax-row b,.modal .rows div span:last-child,.pop .rows span:last-child{font-variant-numeric:tabular-nums}
/* two-tone values at the same size: "38<span class=t3> / 90</span>" */
.t2{color:var(--muted)} .t3{color:var(--dim)}
button{font:inherit;color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.app{position:relative;z-index:1;min-height:100%;display:grid;grid-template-columns:216px minmax(0,1fr);grid-template-rows:auto 1fr;
  background:radial-gradient(1100px 380px at 50% -220px,color-mix(in srgb,var(--navy) 22%,transparent),transparent 70%)}
/* Moving brand background: close to v327, slightly calmer (v330) */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg);pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(95px);opacity:.8;will-change:transform}
.bg .b1{width:70vw;height:60vh;left:-10vw;top:-18vh;background:radial-gradient(closest-side,rgba(36,92,190,.72),transparent);animation:drift1 52s ease-in-out infinite alternate}
.bg .b2{width:60vw;height:55vh;left:35vw;top:30vh;background:radial-gradient(closest-side,rgba(22,70,150,.6),transparent);animation:drift2 64s ease-in-out infinite alternate}
.bg .b3{width:45vw;height:45vh;left:55vw;top:-10vh;background:radial-gradient(closest-side,rgba(56,112,210,.4),transparent);animation:drift3 72s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(-6vw,0,0)}to{transform:translate3d(38vw,8vh,0)}}
@keyframes drift2{from{transform:translate3d(10vw,0,0)}to{transform:translate3d(-34vw,-10vh,0)}}
@keyframes drift3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-28vw,14vh,0)}}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 100%)}
@media (prefers-reduced-motion:reduce){.bg i{animation:none!important}}

/* Inline links: one style everywhere, accent text that turns ink on hover */
.lnk{border:0;background:none;padding:0;font:inherit;font-weight:500;color:var(--fg);cursor:pointer;text-underline-offset:3px;text-decoration-thickness:1px}
.lnk:hover{color:var(--fg);text-decoration:underline}

/* Sidebar */
.side{grid-row:1/3;padding:var(--sp-5) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-6)}
.brand{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-3);min-height:40px}
.logo-long{height:28px;width:auto;display:block}
.logo-mark{height:26px;width:auto;display:none}
/* Nav at instrument scale: 32px rows, 6px radius, 16px outline icons, neutral active fill */
.nav{display:flex;flex-direction:column;gap:var(--sp-hair)}
.nav button{display:flex;align-items:center;gap:var(--sp-3);width:100%;height:var(--h-md);border:0;background:none;border-radius:var(--r-sm);padding:0 var(--sp-3);font:500 14px/1 var(--f-body);color:var(--fg-2);cursor:pointer;text-align:left;transition:background-color .16s var(--ease),color .16s var(--ease)}
.nav .nv-s{display:none}
.nav button svg{width:16px;height:16px;flex:none;color:var(--muted)}
.nav button:hover{background:var(--hover);color:var(--fg)}
.nav button.on{background:var(--sf-3);color:var(--fg)}
.nav button.on svg{color:var(--fg)}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-10) var(--sp-4);width:100%;min-width:0}
.top h1{margin:0;font:var(--t-page);letter-spacing:-.01em}
.tools{display:flex;align-items:center;gap:var(--sp-2)}
/* Chrome icon buttons: 28px square, 6px radius, no fill until hover, 16px outline icon */
.ib{width:var(--h-sm);height:var(--h-sm);border-radius:var(--r-sm);border:0;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative;transition:background-color .16s var(--ease),color .16s var(--ease)}
.ib:hover{background:var(--press);color:var(--fg)}
.ib svg{width:16px;height:16px}
.ib .ping{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 2px var(--bg)}
/* Top-bar pills: 32px, 6px radius, 13px; the avatar stays the one circle, the wallet icon sits bare */
.pillbtn{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-md);padding:0 var(--sp-2) 0 var(--sp-1);border-radius:var(--r-sm);border:0;background:var(--neu-t);cursor:pointer;font:500 13px/1 var(--f-body);transition:background-color .16s var(--ease)}
.pillbtn:hover{background:var(--neu-h)}
.pillbtn .av{display:none;width:24px;height:24px;border-radius:50%;place-items:center;font-size:11px;font-weight:500;background:var(--sf-3);color:var(--fg)}
/* Account button shows just the name; the initials only appear on phones, where the name is hidden */
#acctBtn{padding-left:var(--sp-3)}
.pillbtn .wi{display:grid;place-items:center;padding-left:var(--sp-1);color:var(--muted)}
.pillbtn .wi svg{width:16px;height:16px}
.pillbtn .caret{width:14px;height:14px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.wrap{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 10px);width:260px;background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:0;border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:var(--sp-4);z-index:20;animation:fadeIn .12s linear}
.pop h4{margin:0 0 var(--sp-1);font:var(--t-micro);color:var(--dim)}
/* v444: the wallet pop-up's heading carries the amount-hider eye */
.pop .w-h{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-1)} .pop .w-h h4{margin:0} .pop .w-h .pa-eye{width:22px;height:22px;margin-left:0}
.pop .tot{font:var(--t-title)}
.pop .rows{margin-top:var(--sp-3);display:flex;flex-direction:column}
.pop .rows div{display:flex;justify-content:space-between;padding:var(--sp-2) 0;border-top:1px solid var(--line);font-size:13px}
.pop .rows div span:first-child{color:var(--muted)}
.menu{display:flex;flex-direction:column;gap:var(--sp-hair)}
.menu button{background:none;border:0;text-align:left;min-height:var(--h-md);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);font-size:13px;color:var(--fg-2);cursor:pointer}
.menu button:hover{background:var(--press)}
/* Menus: 6px padding, 32px rows at 6px radius, 13px; group labels 11px/500 dim; the selected item gets a trailing 14px check, never a fill */
.pop.menu{padding:var(--sp-2)}
.menu .who{padding:var(--sp-2) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.menu .who b{display:block;font-weight:500}
.menu .who span{font-size:13px;color:var(--muted)}

/* Home: activation card */
.main{padding:0 var(--sp-10) var(--sp-16);min-width:0}
/* every page sits in one centred column, at most 1280px wide */
.main>*{max-width:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;border-radius:var(--r-lg);overflow:hidden}
.hero-l{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-10);text-align:center;position:relative}
.hero-l h2{margin:0;font:600 26px/1.15 var(--f-display);letter-spacing:-.015em;text-wrap:balance;max-width:22ch}
.hero-l p{margin:var(--sp-3) auto 0;font-size:14px;line-height:var(--lh-prose);color:var(--muted);max-width:46ch;text-wrap:pretty}
.hero-r{background:none;border-left:1px solid var(--line);padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-1)}
.hero-rh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-3)} .hero-rh h3{margin:0;font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)} .hero-rh span{font:var(--t-label);color:var(--dim);font-variant-numeric:tabular-nums}
.step{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);border-radius:var(--r-sm);border:0;background:none;cursor:pointer;text-align:left;width:100%;transition:background-color .16s var(--ease)}
.step:hover{background:var(--hover)}
.step.cur{color:var(--fg)}
.step.lock{cursor:default}
/* a finished step can't be opened again: no hover, no chevron */
.step.done{cursor:default} .step.done:hover{background:none} .step.done .go{opacity:0}
.step .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-hair)}
.step .tx b{display:block;font-size:13px;font-weight:500;line-height:var(--lh-ui);color:var(--fg)}
.step.lock .tx b{color:var(--muted)}
.step .st{font-size:12px;line-height:var(--lh-ui);text-align:left}
.st.sub{color:var(--dim)} .st.act{color:var(--fg-2)} .st.wait{color:var(--fg)} .st.lock{color:var(--dim)}
.step .go{width:16px;height:16px;color:var(--dim);flex:none}
.step.lock .go{opacity:.35}
/* Setup steps (v335): v327 rows with round icon discs and the status under the title, no rules between rows */
.step{position:relative}
.step::before{content:"";position:absolute;left:var(--sp-2);top:var(--sp-2);bottom:var(--sp-2);width:2px;border-radius:1px;background:var(--line-2)}
.step.done::before{background:color-mix(in srgb,var(--fg) 45%,transparent)} .step.cur::before{background:var(--accent)}

/* Toasts: bottom-right, 36px, opaque --sf-3, a leading glyph and the time; role=status so screen readers announce them */
.toast{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:40;display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-lg);max-width:min(440px,calc(100vw - 2*var(--sp-6)));padding:var(--sp-2) var(--sp-3);background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:0;border-radius:var(--r-md);box-shadow:var(--shadow-pop);font:400 13px/var(--lh-ui) var(--f-body);color:var(--fg);animation:fadeIn .12s linear}
.toast svg{width:14px;height:14px;flex:none;color:var(--muted)}
.toast time{flex:none;margin-left:var(--sp-1);font:var(--t-label);color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:820px){ .toast{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);max-width:none} }
/* Announcement bar (v415; v432 an action bar): what the trader has to do now, on its own line at the foot of the top bar, so it stays in
   view while the page scrolls, until its action is done. No close button */
.top:has(>.ann){flex-wrap:wrap}
/* v416: no icon; the same low-opacity blue glass as the cards, so the bar reads as part of the page rather than a popover */
.ann{flex:1 0 100%;order:9;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r-md)}
.ann-tx{min-width:0;display:flex;flex-direction:column;gap:var(--sp-hair)}
.ann-tx b{font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)}
.ann-tx span{font:400 13px/var(--lh-ui) var(--f-body);color:var(--muted)}
@media (max-width:640px){ .ann{grid-template-columns:minmax(0,1fr) auto;align-items:start;row-gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4)} .ann>.btn{grid-column:1;grid-row:2;justify-self:start} }

@media (max-width:1240px){ .hero{grid-template-columns:1fr} .hero-r{border-left:0;border-top:1px solid var(--line)} }
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .side{grid-row:auto;flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);overflow-x:auto}
  .logo-long{display:none} .logo-mark{display:block}
  .nav{flex-direction:row}
  .nav button{white-space:nowrap}
  .top{padding:var(--sp-2) var(--sp-4) var(--sp-3)}
  .pillbtn .nm{display:none} .pillbtn .av{display:grid} #acctBtn{padding-left:var(--sp-1)}
  .main{padding:0 var(--sp-4) var(--sp-8)}
  .hero-l{padding:var(--sp-6) var(--sp-5)}
  .pop{width:min(260px,calc(100vw - 32px))}
}
@media (max-width:520px){ .tools{gap:var(--sp-1)} }
/* the partner nav has six items: in the phone strip (820px and below) they go icon-only (the label stays as aria-label and title), the current page keeps its label */
@media (max-width:820px){ .nav button[data-nav^="p-"]:not(.on) .nv-t{display:none} .nav button[data-nav^="p-"]:not(.on){padding:0 var(--sp-2)} }
@media (max-width:420px){ .nav button[data-nav^="p-"] .nv-t{display:none} .side .nav button[data-nav^="p-"]{padding:0 6px} }
/* ===== DDQ in the dashboard card ===== */
[hidden]{display:none!important}
.ddq{display:grid;grid-template-columns:minmax(0,1fr);height:calc(100vh - 64px - var(--sp-6) - var(--sp-12));height:calc(100dvh - 64px - var(--sp-6) - var(--sp-12));min-height:560px;background:none;border:0;border-radius:var(--r-lg);overflow:hidden}
.ddq.wide{grid-template-columns:minmax(0,1fr) 420px}
.dq-chat{display:flex;flex-direction:column;min-height:0;min-width:0}
.dq-scroll{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.dq-col{padding:var(--sp-6) var(--sp-8)}
.msgs{display:flex;flex-direction:column;gap:var(--sp-5)}
.msg{display:flex;gap:var(--sp-3);align-items:flex-start;max-width:min(720px,78%)}
/* a new message only fades in: 120ms, no rise, no typing dots */
.msg.new{animation:fadeIn .12s linear}
.bot{width:32px;height:32px;border-radius:50%;background:var(--sf-3);display:grid;place-items:center;flex:none;color:var(--fg)}
.bot svg{width:14px;height:14px}
.bub{background:var(--sf-2);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);padding:var(--sp-3) var(--sp-4);font-size:14px;line-height:var(--lh-prose);color:var(--fg-2);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.bub p{margin:0}
.msg.me{align-self:flex-end;max-width:min(620px,70%)}
.msg.me .bub{background:var(--sf-3);border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);color:var(--fg)}
.quick{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-left:calc(var(--h-md) + var(--sp-3))}
.quick.in{margin:var(--sp-1) 0 0}
.qb{border:0;background:var(--neu-t);color:var(--fg);border-radius:var(--r-sm);min-height:var(--h-md);padding:var(--sp-2) var(--sp-3);font:500 13px/var(--lh-ui) var(--f-body);text-align:left;cursor:pointer;transition:background-color .16s var(--ease)}
.qb:hover{background:var(--neu-h)}
.qb.primary{background:var(--fg);color:var(--bg);font-weight:500;border-radius:var(--r-pill);padding:0 var(--sp-4);height:var(--h-md);min-height:0}
.qb.primary:not(:disabled):hover{background:var(--fg);opacity:.9}
.qb:disabled{opacity:.4;cursor:not-allowed}
/* Fixed-choice options in the onboarding chat: selected = a stronger neutral fill, no outline */
/* Choice chips sit right under the assistant's bubble: the row takes the bubble's width (width:0 + min-width:100% keeps it from widening the column) and wraps onto more rows */
.bub-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.bub-col .dq-opts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;width:0;min-width:100%}
.qb.dqc.on{background:var(--sel);color:var(--fg)}
.x{background:none;border:0;color:var(--dim);cursor:pointer;display:grid;place-items:center}
.dq-dock{border-top:1px solid var(--line);background:none}
.dq-dock .dq-col{padding:var(--sp-4) var(--sp-8) var(--sp-5)}
.composer{display:flex;align-items:flex-end;gap:var(--sp-3);background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);transition:border-color .16s var(--ease)}
.composer:focus-within{border-color:rgba(255,255,255,.5)}
.composer textarea{flex:1;background:none;border:0;outline:none;resize:none;color:var(--fg);font:inherit;font-size:14px;line-height:var(--lh-ui);padding:var(--sp-2) 0;min-height:24px;max-height:160px}
.composer .dq-cnt{align-self:center;font-size:12px;color:var(--dim);white-space:nowrap}
.send{width:var(--h-md);height:var(--h-md);border-radius:var(--r-sm);border:0;background:var(--fg);color:var(--bg);display:grid;place-items:center;cursor:pointer;flex:none}
.send:disabled{opacity:.35;cursor:not-allowed}
.dq-done{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:14px;color:var(--muted)}
.dq-panel{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-left:0;display:flex;flex-direction:column;min-height:0}
.dp-body{flex:1;overflow-y:auto;padding:var(--sp-1) var(--sp-6) var(--sp-8);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.dp-sec h4{margin:0 0 var(--sp-2);font-size:12px;font-weight:500;color:var(--dim)}
.dp-sec dl{margin:0}
.chip.upd{margin-left:var(--sp-2);vertical-align:1px}
.dp-close,.dp-open{display:none}
@media (max-width:1180px){
  .ddq.wide{grid-template-columns:minmax(0,1fr)}
  .dq-panel{position:fixed;inset:0;z-index:25;border-left:0;background:var(--glass-dw)}
  .dq-panel:not(.show){display:none}
  .dp-close,.dp-open{display:inline-flex}
}
@media (max-width:820px){
  .ddq{height:calc(100dvh - 150px);border-radius:var(--r-lg)}
  .dq-col{padding:var(--sp-6) var(--sp-4) var(--sp-4)}
  .dq-dock .dq-col{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .quick{margin-left:0}
}
.dq-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-8);border-bottom:1px solid var(--line);background:none}
.dq-who{display:flex;flex-direction:column;gap:var(--sp-1);line-height:var(--lh-ui);min-width:0}
.dq-who b{font-weight:600;font-size:14px}
.dq-who span{font-size:13px;color:var(--muted)}
.dq-prog{margin-left:auto;position:relative;display:flex;align-items:center}
.dqp-btn{display:inline-flex;align-items:center;gap:var(--sp-2);background:none;border:0;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);border-radius:var(--r-sm);color:var(--muted);font-size:12px;cursor:default;font-variant-numeric:tabular-nums}
.dqp-btn:hover,.dq-prog:focus-within .dqp-btn{background:var(--press);color:var(--fg)}
.dqp-bar{display:flex;gap:2.5px;align-items:center;height:12px} .dqp-bar i{width:1.5px;height:10px;border-radius:1px;background:var(--line-2)} .dqp-bar.fine i{height:9px}
.dqp-bar i.done{background:color-mix(in srgb,var(--fg) 55%,transparent)} .dqp-bar i.cur{background:var(--accent)}
.dqp-btn .num{font-variant-numeric:tabular-nums}
.hero-pg{display:inline-flex;align-items:center;gap:var(--sp-2)}
.dqp-pop{position:absolute;top:calc(100% + 8px);right:0;width:260px;padding:var(--sp-4);border-radius:var(--r-md);background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--shadow-pop);z-index:30;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility .12s}
.dq-prog:hover .dqp-pop,.dq-prog:focus-within .dqp-pop{opacity:1;visibility:visible}
.dqp-pop b{display:block;font-size:13px;font-weight:600}
.dqp-pop small{display:block;color:var(--dim);font-size:12px;margin-top:var(--sp-hair)}
.dqp-pop ul{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.dqp-pop li{display:grid;grid-template-columns:16px 1fr auto;gap:var(--sp-3);align-items:center;font-size:13px;color:var(--dim)}
.dqp-pop li i{width:16px;height:16px;border-radius:var(--r-xs);background:var(--neu-t);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:500}
.dqp-pop li.done{color:var(--muted)} .dqp-pop li.done i{background:var(--neu-t);color:var(--fg)}
.dqp-pop li.cur{color:var(--fg)} .dqp-pop li.cur i{background:var(--accent)}
.dqp-pop li em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.dqp-saved{margin:var(--sp-3) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
@media (prefers-reduced-motion:reduce){ .dqp-pop{transition:none} }
.saved{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-2);font-size:12px;color:var(--dim);white-space:nowrap}
.saved i{width:7px;height:7px;border-radius:50%;background:var(--pos)}
@media (max-width:820px){ .dq-bar{padding:var(--sp-3) var(--sp-4)} .saved{display:none} .msg,.msg.me{max-width:100%} }
/* ===== Surfaces: opaque token fills. No glass, no backdrop blur, no decorative gradient or glow ===== */
.hero,.dq-chat,.dq-panel{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;box-shadow:none}
/* ===== DDQ: chat and profile as two separate cards ===== */
.ddq{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;gap:var(--sp-4)}
.dq-chat,.dq-panel{border-radius:var(--r-lg);overflow:hidden}
.dq-bar{min-height:76px}
.dq-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddq.wide .saved{display:none}
.dp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:var(--sp-2);vertical-align:1px}
.dp-dot.ok{background:var(--pos)}
.ddq.wide{grid-template-columns:minmax(0,1fr) 460px!important}
.dp-bar{padding:var(--sp-4) var(--sp-6)}
.dp-sec{padding:var(--sp-5) 0 var(--sp-hair)}
.dp-sec+.dp-sec{border-top:1px solid var(--line);margin-top:var(--sp-3)}
.dp-sh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-3)}
.dp-sh h4{margin:0;font:var(--t-title);color:var(--fg)}
.dp-sh span{font-size:12px;color:var(--dim)}
.dp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-4);padding:var(--sp-2) 0;border-top:0;font-size:13px;line-height:var(--lh-ui)}
.dp-row dt{color:var(--muted)}
.dp-row dd{margin:0;color:var(--fg);font-weight:500}
@media (max-width:1180px){ .dq-panel{border-radius:0} }
/* ===== First visit: no sidebar, content runs edge to edge, logo in the top bar ===== */
.app.first{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
.app.first .side{display:none}
.top-brand{display:flex;align-items:center;min-height:46px}
.top-brand .logo-long{display:block;height:28px}
@media (max-width:820px){ .top-brand .logo-long{height:24px} .app.first .ddq{height:calc(100dvh - 100px)} }
/* ===== Accounts: one account per strategy ===== */
.glass{border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;box-shadow:none}
/* Badges: text-only tinted pills, never a dot. Status map: Assessment = accent, Criteria met / Live = pos, Limit reached = neg,
   Requires action = warn, In desk review = neutral with full-strength text, Not invested / Withdrawn / Archived = neutral muted */
.chip,span.stt,.np-r em{display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-2);border:0;border-radius:var(--r-xs);font:500 11px/1 var(--f-body);letter-spacing:.01em;white-space:nowrap;background:var(--neu-t);color:var(--muted)}
.chip.sm{height:18px;padding:0 var(--sp-2)}
.chip.ready{background:var(--neu-t);color:var(--fg)}
.chip.pos{background:var(--neu-t);color:var(--fg)}
.chip.fail{background:var(--neu-t);color:var(--fg-2)}
.chip.act{background:var(--warn-t);color:var(--warn)}
.chip.wait{background:var(--neu-t);color:var(--fg)}
.chip.mute,.chip.neu{background:var(--neu-t);color:var(--muted)}
/* in list columns a badge keeps one width, centred */
.asl-r .chip,.rc-r>.chip{min-width:72px;justify-content:center}
/* Buttons at instrument scale: 32px grey rectangles at 6px radius, content-width; 28px small; 36px only in drawer footers and auth */
.btn{height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-sm);border:0;background:var(--neu-t);color:var(--fg);font:500 13px/1 var(--f-body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);white-space:nowrap;transition:background-color .16s var(--ease),filter .16s var(--ease)}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm{height:var(--h-sm);padding:0 var(--sp-3);font-size:12px}
.btn.sm svg{width:14px;height:14px}
.btn.lg,.modal .acts .btn{height:var(--h-lg);padding:0 var(--sp-3)}
.btn:hover{background:var(--neu-h)}
/* Primary: the one ink pill per view */
.btn.primary{background:var(--fg);color:var(--bg);font-weight:500;border-radius:var(--r-pill);padding:0 var(--sp-4)}
.btn.primary:not(:disabled):hover{background:var(--fg);opacity:.9}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* Accounts: one card per strategy, stacked so more strategies fit below */
.acc-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.acc-card{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);cursor:pointer}
.acc-head{display:flex;align-items:center;gap:var(--sp-4)}
.acc-nm{flex:1;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;line-height:var(--lh-ui)}
.acc-nm b{font:var(--t-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-head .go{width:16px;height:16px;color:var(--dim);flex:none}
.acc-body{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.acc-bal small{display:block;font-size:12px;color:var(--muted);margin-bottom:var(--sp-2)}
.acc-bal .big{font:var(--t-hero);letter-spacing:-.02em}
.acc-bal .big span{color:var(--dim)}
.acc-bal p{margin:var(--sp-3) 0 0;}
.acc-bal p:first-child{margin-top:0}
.acc-bal p{font-size:14px;color:var(--fg-2);max-width:56ch}
@media (max-width:820px){ .acc-card{padding:var(--sp-5)} .acc-head .chip{display:none} }
/* ===== Home once funded ===== */
/* ===== Assessment ===== */
.as{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-4)}
.as > *{min-width:0}
/* Hero: big balance + interactive chart, key indicators beside it */
/* One hero number per view: Inter Tight 600 32px; cents dimmed at the same size, a unit (%) keeps the number's colour */
.hc-bal{font:var(--t-hero);letter-spacing:-.02em;display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.hc-bal .c{color:var(--dim)} .hc-bal .u{color:inherit}
.hc-bal small{font:500 13px/1 var(--f-body);letter-spacing:0;color:var(--pos)}
.hc-bal small.neg{color:var(--neg)}
.hc-bal small em{font-style:normal;color:var(--dim);font-weight:400;margin-left:var(--sp-1)}
.hc-plot{position:relative}
/* Plot plus a 64px right axis: tick labels right-aligned, value tags flush to the plot */
.hc-grid{display:grid;grid-template-columns:minmax(0,1fr) 64px;column-gap:var(--sp-3)}
.hc-svg{display:block;width:100%;overflow:visible}
/* Chart ink, one spec on every chart: marks are drawn by class from the chart tokens, never with inline colours.
   Grid dashed '2 4', zero solid (the track record's 0% baseline stays dashed), references '3 3', limits red '3 3' */
svg .g{stroke:var(--ch-grid);stroke-dasharray:2 4}
svg .zero{stroke:var(--ch-zero)} svg .zero.base{stroke-dasharray:2 4}
svg .ref{stroke:var(--ch-ref);stroke-dasharray:3 3} svg .ref.start{stroke-dasharray:1 3}
svg .lim{stroke:color-mix(in srgb,var(--neg) 45%,transparent);stroke-dasharray:3 3}
svg .ln-a{stroke:none;pointer-events:none}
svg .ln{fill:none;stroke:var(--ch-line);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
svg .ln.ln-2{stroke:var(--ch-line-2)} svg .ln.ser-1{stroke:var(--ser-1)} svg .ln.ser-2{stroke:var(--ser-2)}
svg .dd{fill:none;stroke:var(--neg);stroke-width:1;stroke-linejoin:round} svg .dd-a{fill:var(--neg-t)}
/* v438: the assessment chart's drawdown panel: one bar per day under the zero line, the panel's name in the gap above it.
   v439: the bars are grey; red is kept for the limit line and tag and for a day at or past the limit (.hit) */
svg rect.ddb{fill:color-mix(in srgb,var(--fg) 32%,transparent)} svg rect.ddb.hit{fill:color-mix(in srgb,var(--neg) 75%,transparent)} .hc-tg.hc-ddt{color:var(--dim)}
.hc-dot.ddn{width:5px;height:5px;background:color-mix(in srgb,var(--fg) 70%,transparent)}
svg path.pa-pjb{fill:color-mix(in srgb,var(--fg) 9%,transparent);stroke:none} i.pa-sq.pa-pjb{background:color-mix(in srgb,var(--fg) 16%,transparent)}
svg path.pj.pa-pjm{stroke-width:1.5;stroke-dasharray:2 3}
svg .pj{fill:none;stroke:var(--ch-line-2);stroke-width:1;stroke-dasharray:1 3;stroke-linecap:round} svg .pj.p50{stroke:color-mix(in srgb,var(--fg) 70%,transparent)}
svg .g,svg .zero,svg .ref,svg .lim,svg .ln,svg .dd,svg .pj,svg .tr-bd{vector-effect:non-scaling-stroke}
.hc-yl{position:relative;font-size:11px;color:var(--dim)}
.hc-yl span{position:absolute;right:0;transform:translateY(-50%);font-variant-numeric:tabular-nums}
.hc-yl span.off{visibility:hidden}
.hc-xl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:var(--sp-3)}
.hc-hit{position:absolute;inset:0 74px 0 0;cursor:crosshair}
/* Hover: a 1px dashed '2 3' crosshair down to the plot's bottom edge and the date as a tag on the x-axis. Values snap, no tweening */
.hc-x{position:absolute;top:0;height:calc(100% - 28px);width:1px;background:repeating-linear-gradient(to bottom,var(--ch-ref) 0 2px,transparent 2px 5px);pointer-events:none;display:none}
/* Value tags on the right axis: neutral for ink series, tinted for a coloured series; 18px like the small badge */
.ch-tag{display:inline-flex;align-items:center;height:18px;padding:0 var(--sp-2);border-radius:var(--r-xs);background:var(--ch-tag);color:var(--fg);font:500 11px/1 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.hc-yl .ch-tag{left:0;right:auto}
.ch-tag.mu{color:var(--muted)} .ch-tag.neg{background:var(--neg-t);color:var(--neg)}
.ch-tag.ser-1{background:color-mix(in srgb,var(--ser-1) 18%,transparent);color:color-mix(in srgb,var(--ser-1) 80%,var(--fg))}
.ch-tag.ser-2{background:color-mix(in srgb,var(--ser-2) 18%,transparent);color:color-mix(in srgb,var(--ser-2) 80%,var(--fg))}
.hc-xt{position:absolute;bottom:0;z-index:3;transform:translateX(-50%);justify-content:center;background:#141d2b;display:none}
/* End and hover dots: 6px ink with a 2px card-coloured ring, no halo; 3px for simulated path ends */
.hc-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ch-line);box-shadow:0 0 0 2px var(--sf-1);transform:translate(-50%,-50%);pointer-events:none;display:none}
.hc-dot.e{display:block}
.hc-dot.ser-1{background:var(--ser-1)} .hc-dot.ser-2{background:var(--ser-2)}
.hc-dot.neg{width:5px;height:5px;background:var(--neg)}
.hc-dot.pj{width:3px;height:3px;background:var(--ch-line-2);box-shadow:none;display:block}
.hc-tip{position:absolute;top:8px;min-width:150px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:0;font-size:12px;pointer-events:none;display:none;box-shadow:var(--shadow-pop)}
.hc-tip b{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:var(--sp-2)}
.hc-tip div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-hair) 0;font-variant-numeric:tabular-nums}
.hc-tip div span:first-child{color:var(--muted)}
.mini{padding:var(--sp-6)}
.mini .card-h{margin-bottom:var(--sp-2)}
.mini .sub{font-size:13px;color:var(--dim);margin:0 0 var(--sp-4)}
/* Bars: positive in 55% ink, negative in 75% red, never amber; significance shows as contrast (.35 vs .8), not colour */
svg rect.b.up{fill:color-mix(in srgb,var(--fg) 55%,transparent)} svg rect.b.dn{fill:color-mix(in srgb,var(--neg) 75%,transparent)}
svg rect.b.lo{fill:color-mix(in srgb,var(--fg) 35%,transparent)} svg rect.b.hi{fill:color-mix(in srgb,var(--fg) 80%,transparent)}
.ch{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:var(--sp-3)}
.ch svg{display:block;width:100%;overflow:visible}
.ch .yl{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--dim);text-align:right}
.ch .xl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:var(--sp-3)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-h h3{margin:0;font:var(--t-title)}
/* v405: chips keep their own 11px; only plain spans in a card header are 13px (an 'In review' chip read larger than every other badge) */
.card-h span:not(.chip){font-size:13px;color:var(--dim)}
/* Item count next to a section title: a small rounded square, not a number on the far right */
.dp-sh .cnt,.card-h .cnt{align-self:center;margin:0 auto 0 var(--sp-2);display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 var(--sp-1);border-radius:var(--r-xs);background:var(--neu-t);color:var(--dim);font:500 11px/1 var(--f-body)}
.card-h .cnt{margin-left:calc(var(--sp-1) * -1)}
.legend{display:flex;flex-wrap:wrap;row-gap:var(--sp-1);column-gap:var(--sp-4);font-size:11px;color:var(--dim)}
/* Legend: 10x1.5px line swatches in the series ink; dashed for reference and limit lines, dotted for simulated paths */
.legend i{display:inline-block;width:10px;height:1.5px;vertical-align:middle;margin-right:var(--sp-2);background:var(--ch-line)}
/* the assessment window: a faint fill between two dashed edges, as on the chart */
.legend i.win{height:10px;background:repeating-linear-gradient(to bottom,var(--ch-ref) 0 2px,transparent 2px 5px) left/1px 100% no-repeat,repeating-linear-gradient(to bottom,var(--ch-ref) 0 2px,transparent 2px 5px) right/1px 100% no-repeat,var(--ch-band)}
.legend i.tr-strip{position:static;height:1px}
.legend i.ln-2{background:var(--ch-line-2)} .legend i.ser-1{background:var(--ser-1)} .legend i.ser-2{background:var(--ser-2)}
.legend i.ref{background:repeating-linear-gradient(90deg,var(--ch-ref) 0 2px,transparent 2px 4px)}
.legend i.lim{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--neg) 70%,transparent) 0 2px,transparent 2px 4px)}
.legend i.pj{background:repeating-linear-gradient(90deg,var(--ch-line-2) 0 1.5px,transparent 1.5px 4px)}
.legend i.pj.p50{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 70%,transparent) 0 1.5px,transparent 1.5px 4px)}
.stt{display:inline-flex;align-items:center;font-size:13px;white-space:nowrap}
/* Evidence outcomes stay neutral (the fixed status map keeps hue for Assessment, Criteria met, Live, Limit reached, Requires action); Deviated reads in full-strength text */
.stt.al,.stt.pa,.stt.un{color:var(--muted)} .stt.de{color:var(--fg)}
span.stt.al,span.stt.pa,span.stt.de,span.stt.un{background:var(--neu-t)}
.tlc{padding:var(--sp-6)}
.tlc ol{list-style:none;margin:0;padding:0}
.tlc li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--sp-3);position:relative;padding-bottom:var(--sp-5)}
.tlc li::before{content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:1px;background:var(--line)}
.tlc li:last-child{padding-bottom:0} .tlc li:last-child::before{display:none}
.tlc li > i{width:13px;height:13px;border-radius:50%;margin-top:var(--sp-hair);border:0;box-shadow:inset 0 0 0 2px var(--muted);background:var(--sf-1)}
.tlc li > i.al{box-shadow:inset 0 0 0 2px var(--pos)} .tlc li > i.pa{box-shadow:inset 0 0 0 2px var(--warn)} .tlc li > i.de{box-shadow:inset 0 0 0 2px var(--neg)} .tlc li > i.un{box-shadow:inset 0 0 0 2px var(--dim)}
/* the assessment's key events use the neutral outcome scale: every ring muted, a deviation in full-strength ink */
.ax-tl li > i.al,.ax-tl li > i.pa{box-shadow:inset 0 0 0 2px var(--muted)} .ax-tl li > i.de{box-shadow:inset 0 0 0 2px var(--fg)}
.tlc small{font-size:12px;color:var(--dim)}
.tlc b{display:block;font-weight:500;font-size:14px;margin:var(--sp-hair) 0}
.tlc p{margin:0;font-size:13px;color:var(--muted)}
.ready.glass{grid-column:1/-1;padding:var(--sp-6) var(--sp-8);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.ready.glass h2{margin:0;font:var(--t-page);letter-spacing:-.01em}
.ready.glass p{margin:0;color:var(--fg-2);font-size:14px;max-width:60ch}
.dw-rec{margin-top:var(--sp-4)}
.dw-rec .rows{margin-top:0}
.dw-why{margin-top:var(--sp-1);padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2);font-size:14px;color:var(--fg-2);line-height:var(--lh-prose)}
@media (max-width:1240px){ .as{grid-template-columns:1fr} }
@media (max-width:820px){ .mini,.tlc{padding:var(--sp-5)} }
/* ===== Account detail: the strategy and its Declared Baseline ===== */
.ad{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);align-items:start}
.ad > *{min-width:0}
.ad-body{display:flex;flex-direction:column;gap:var(--sp-4)}
.ad-body:has(>.sec){gap:0}
.ad-sec{padding:var(--sp-8)}
.ad-sec .card-h{margin-bottom:var(--sp-2)}
.ad-sec .dp-row,.ss .dp-row{border-top:1px solid var(--line);padding:var(--sp-4) 0}
.ad-sec dl,.ss dl{margin:0} .ad-sec .dp-row:first-child,.ss .dp-row:first-child{border-top:0} .ad-sec .dp-row:last-child{padding-bottom:0}
.ad-sec .dp-row,.ss .dp-row{grid-template-columns:minmax(180px,320px) minmax(0,1fr);gap:var(--sp-6)}
@media (max-width:640px){.ad-sec .dp-row,.ss .dp-row{grid-template-columns:1fr;gap:var(--sp-1)}}

.dw-ta{width:100%;min-height:150px;margin-top:var(--sp-2);resize:vertical;background:var(--well);border:0;border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3);color:var(--fg);font:inherit;font-size:13px;line-height:var(--lh-prose);outline:none}
.dw-lbl{display:block;margin-top:var(--sp-5);font-size:13px;color:var(--muted)}
@media (max-width:1240px){ .ad{grid-template-columns:1fr} }
/* ===== Add a strategy: half-height glass tile under the accounts ===== */
.acc-add{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:96px;padding:var(--sp-6) var(--sp-8);border-radius:var(--r-lg);cursor:pointer;text-align:left;color:var(--fg);font:inherit;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;transition:background-color .16s var(--ease)}
.acc-add:hover{background:linear-gradient(var(--sf-2),var(--sf-2)),var(--glass)}
.acc-add .plus{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--neu-t);color:var(--fg)}
.acc-add .plus svg{width:16px;height:16px}
.acc-add .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-hair);line-height:var(--lh-ui)}
.acc-add b{font:var(--t-title)}
.acc-add span.s{font:var(--t-label);color:var(--muted)}
.acc-add .go{width:16px;height:16px;color:var(--dim);flex:none}
.acc-add.locked{cursor:default}
.acc-add.locked:hover{background:var(--glass)}
.acc-add.locked .plus{background:var(--neu-t);color:var(--dim)}
.acc-add.locked b{color:var(--muted)}
.acc-add.locked .btn{flex:none}
.acc-arch{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4) var(--sp-8);border:0;border-radius:var(--r-lg);background:var(--hover);color:var(--muted);font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:background-color .2s var(--ease),color .2s var(--ease)}
.acc-arch span:first-child{flex:1} .acc-arch svg{width:16px;height:16px;color:var(--dim)}
.acc-arch:hover{background:var(--press);color:var(--fg)}
@media (max-width:820px){ .acc-add,.acc-arch{padding-inline:var(--sp-5)} }
.ad-sec .card-h .btn.sm{margin:calc(var(--sp-2) * -1) 0}
.st-list{margin:var(--sp-hair) 0 var(--sp-2)}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;position:relative}
.st-row + .st-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.st-row b{display:block;font-weight:500;font-size:14px}
.np-t{margin:var(--sp-hair) 0 var(--sp-2)}
.np-r{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;position:relative}
.np-r + .np-r::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.np-r.hd{padding:var(--sp-hair) 0 var(--sp-2);font-size:11px;font-weight:500;color:var(--dim)} .np-r.hd span{text-align:center}
.np-r b{display:block;font-weight:500;font-size:14px}
.np-r em{margin-top:var(--sp-2);font-style:normal}
.sw{justify-self:center;position:relative;width:32px;height:18px;cursor:pointer}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-2);transition:background-color .2s var(--ease)}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .2s var(--ease)}
.sw input:checked + i{background:var(--fg)} .sw input:checked + i::after{transform:translateX(14px);background:var(--bg)}
.sw input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.sw.dis{cursor:default} .sw.dis i{opacity:.5}
@media (max-width:640px){ .np-r{grid-template-columns:minmax(0,1fr) 52px 52px;gap:var(--sp-2)} }
/* Manage rows inside the narrow assessment column keep the column's 24px card inset */
.ax-sec .ss{padding-inline:var(--sp-6)}
.au{min-height:calc(100dvh - 64px - var(--sp-6) - var(--sp-12));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-6);padding:var(--sp-6) 0 var(--sp-2)}
.au-card{width:min(440px,100%);padding:var(--sp-10);display:flex;flex-direction:column}
.au-card h2{margin:0 0 var(--sp-2);font:var(--t-page);letter-spacing:-.01em}
.au-sub{margin:0 0 var(--sp-1);font-size:14px;line-height:var(--lh-prose);color:var(--muted)} .au-sub b{color:var(--fg);font-weight:500}
.au-fields{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
.ap-f{display:flex;flex-direction:column;gap:var(--sp-2);font-size:13px;color:var(--muted);min-width:0}
.ap-f > span{display:flex;align-items:center;gap:var(--sp-2)} .ap-f em{font-style:normal;font-size:11px;color:var(--dim)}
.ap-f .dw-in,.ap-f .dw-sel{margin:0;width:100%;height:var(--h-lg)}
.au-ro{color:var(--muted)!important}
.ap-f.bad .dw-in,.ap-f.bad .dw-sel,.ap-f.bad .seg,.ap-f.bad .ap-chips button{box-shadow:inset 0 0 0 1px var(--neg)}
.ap-f.bad > span{color:var(--neg)}
.seg.ap-seg{display:flex;padding:var(--sp-hair);background:var(--sf-2);border-radius:var(--r-md)}
.seg.ap-seg button{flex:1;height:var(--h-md)}
.ap-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.ap-chips button{height:var(--h-md);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:var(--neu-t);color:var(--muted);font:500 13px/1 var(--f-body);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.ap-chips button.on{background:var(--sel);color:var(--fg)}
.ap-err{margin:var(--sp-3) 0 0;font-size:13px;color:var(--neg)}
.ap-consent{margin:var(--sp-3) 0 0;text-align:center;font-size:12px;line-height:var(--lh-prose);color:var(--dim)}
.au-btn{width:100%;height:var(--h-lg);justify-content:center;margin-top:var(--sp-6)}
.au-btn + .au-btn{margin-top:var(--sp-3)}
.au-forgot{align-self:flex-end;margin-top:var(--sp-3);font-size:13px}
.au-card > .chip{align-self:flex-start;margin-bottom:var(--sp-3)}
.au-proto{align-self:center;margin:var(--sp-4) 0 0}
.aq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-4);font-size:13px} .aq-nav .au-link{font-size:13px}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2)}
.otp .dw-in{width:100%;min-width:0;height:44px;padding:0;text-align:center;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;caret-color:var(--fg)}
.otp .dw-in:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.otp.bad .dw-in{box-shadow:inset 0 0 0 1px var(--neg)} .otp.ok .dw-in{box-shadow:inset 0 0 0 1px var(--pos)}
.otp-err{margin:var(--sp-3) 0 0;font-size:13px;color:var(--neg)}
.au-link:disabled{color:var(--dim);cursor:default}
.au-rules{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);font-size:12px;color:var(--dim)}
.au-rules li{display:flex;align-items:center;gap:var(--sp-2)} .au-rules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background-color .2s var(--ease)}
.au-rules li.ok{color:var(--muted)} .au-rules li.ok::before{background:var(--pos)}
.au-legal{margin:0;max-width:380px;text-align:center;font-size:12px;line-height:var(--lh-prose);color:var(--dim)} .au-legal .au-link{color:var(--muted)} .au-legal .au-link:hover{color:var(--fg)}
.au-new{margin:var(--sp-5) 0 0;font-size:13px;color:var(--muted)} .au-new .au-link{font-size:13px}
.dq-exit{margin-left:var(--sp-3)}
/* Restart the intake: a round icon button left of Save & exit, explained by a tooltip on hover or focus */
.dq-rs{position:relative;margin-left:var(--sp-2);display:flex}
.dq-rsb{width:var(--h-md);height:var(--h-md);border-radius:var(--r-sm);border:0;background:var(--neu-t);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background-color .16s var(--ease)}
.dq-rsb:hover{background:var(--neu-h)}
.dq-rsb svg{width:16px;height:16px}
.ddq .dq-bar .dq-rs+.dq-exit{margin-left:calc(var(--sp-2) * -1)}
.dq-tip{position:absolute;top:calc(100% + 8px);right:0;width:260px;padding:var(--sp-3);border-radius:var(--r-md);background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--shadow-pop);z-index:30;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility .12s;pointer-events:none}
.dq-rs:hover .dq-tip,.dq-rs:focus-within .dq-tip{opacity:1;visibility:visible}
.dq-tip b{display:block;font-size:13px;font-weight:600}
.dq-tip small{display:block;color:var(--dim);font-size:12px;line-height:var(--lh-ui);margin-top:var(--sp-hair)}
.kebab{width:var(--h-sm);height:var(--h-sm);margin-left:var(--sp-1)}
.kebab svg{width:16px;height:16px}
.card-menu{width:200px;top:calc(100% + 6px);cursor:default}
.menu button.danger{color:var(--neg)}
.menu button.danger:hover{background:var(--neg-t)}
/* solid red only on the final, irreversible confirm */
.btn.danger{background:var(--neg);color:var(--bg);font-weight:600}
.btn.danger:not(:disabled):hover{background:var(--neg);opacity:.9}
/* Confidentiality note under the DDQ composer */
.conf{display:flex;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-3) var(--sp-1) 0;font-size:12px;line-height:var(--lh-prose);color:var(--dim)}
.conf svg{width:14px;height:14px;flex:none;margin-top:var(--sp-hair);color:var(--muted)}
.conf b{color:var(--muted);font-weight:500}
.dw-list{list-style:none;margin:var(--sp-5) 0 var(--sp-6);padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.dw-list li{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-3)}
.dw-list li svg{width:16px;height:16px;color:var(--muted);margin-top:var(--sp-hair)}
.dw-list b{display:block;font-weight:500;font-size:14px}
.dw-list span{font-size:13px;color:var(--muted)}
/* ===== Assessment, chart-first: data on the left, sticky chart on the right ===== */
.asx{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.asx > *{min-width:0}
.ax-left{display:flex;flex-direction:column;gap:var(--sp-6)}
/* Tabs and segmented controls: no tray, 28px items at 6px radius, dim until hovered, a faint neutral fill when on */
.ax-tabs,.seg{display:inline-flex;flex-wrap:wrap;gap:var(--sp-hair);padding:0;border:0;border-radius:0;background:none}
.ax-tabs button,.seg button{flex:none;height:var(--h-sm);padding:0 var(--sp-2);border:0;border-radius:var(--r-sm);background:none;color:var(--dim);font:500 13px/1 var(--f-body);white-space:nowrap;cursor:pointer}
.ax-tabs button:hover,.seg button:hover{color:var(--fg)}
.ax-tabs button.on,.seg button.on{background:var(--sf-3);color:var(--fg)}
/* range tabs are the small variant */
.seg[aria-label="Time range"] button{height:24px;padding:0 var(--sp-2);font-size:12px}
.ax-sec h4{margin:0 0 var(--sp-3)}
.ax-card{padding:var(--sp-2) var(--sp-6)}
.ax-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line);font-size:13px}
.ax-row:first-child{border-top:0}
.ax-row span:first-child{color:var(--muted)}
.ax-row b{font-weight:500;font-variant-numeric:tabular-nums}
.ax-row b.pos{color:var(--fg)}
.ax-row b{text-align:right}
/* Measures: one card, two stat cells split by an inset divider (the shared stat-cell pattern) */
.ax-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--sp-6) 0}
.ax-tile{position:relative;padding:0 var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1);min-width:0} .ax-tile:first-child{padding-left:var(--sp-6)}
.ax-tile+.ax-tile::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.ax-tile em{font:400 11px/var(--lh-tight) var(--f-body);font-style:normal;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rq{padding:var(--sp-2) var(--sp-6)}
.rq-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.rq-row:first-child{border-top:0}
.rq-row .lbl{font-size:14px;font-weight:500}
.rq-row .val{font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
/* coverage per area: the tick bar used for every share (v374) */
.rq-row .tk{grid-column:1/-1}
.ax-note{margin:var(--sp-2) 0 0;font-size:12px;color:var(--dim);line-height:var(--lh-prose)}
.ax-list{padding:var(--sp-2) var(--sp-3)}
.ax-ev{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;transition:background-color .16s var(--ease)}
/* Divider is a straight inset line, so the rounded hover fill never bends it */
.ax-ev{position:relative}
.ax-ev+.ax-ev::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--line);pointer-events:none}
.ax-ev:hover{background:var(--hover)}
.ax-ev .k{font-size:14px;font-weight:500}
.ax-ev .go{width:16px;height:16px;color:var(--dim)}
/* Evidence filter: the tray-less tab spec (as .ax-tabs) on one line */
.ax-chips{display:flex;gap:var(--sp-hair);flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 0 var(--sp-3)} .ax-chips::-webkit-scrollbar{display:none}
.ax-chips button{flex:none;height:var(--h-sm);padding:0 var(--sp-2);border-radius:var(--r-sm);border:0;background:none;color:var(--dim);font:500 13px/1 var(--f-body);white-space:nowrap;cursor:pointer}
.ax-chips button:hover{color:var(--fg)}
.ax-chips button.on{background:var(--sf-3);color:var(--fg)}
/* the hero chart sits on the canvas, unframed, as on Home */
.ax-right{position:sticky;top:var(--sp-4);padding:var(--sp-2) 0 0;background:none;display:flex;flex-direction:column;gap:var(--sp-4);height:calc(100vh - 112px);height:calc(100dvh - 112px);min-height:560px}
.hc-box{flex:1;min-height:240px;position:relative}
.ax-right .sub2{font-size:13px;color:var(--muted);margin-top:var(--sp-2);display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.ax-right .sub2 .up{color:var(--pos);font-weight:500}
.ax-right .sub2 .dn{color:var(--neg);font-weight:500}
/* Chart card anatomy, the same on every chart: header row (value + qualifier left, provenance stamp right),
   the plot, a control row (range tabs left, legend right) and one left-aligned 11px disclaimer line */
.ch-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.ch-v{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--sp-2);min-width:0}
.ch-hd .ch-v .sub2{margin-top:0}
.ch-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.ch-st{display:flex;align-items:center;gap:var(--sp-2);font:var(--t-micro);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.hc-tabs{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.hc-ctl .legend{margin-left:auto}
@media (max-width:640px){ .ch-st{flex-wrap:wrap;white-space:normal} }
.hc-tabs .tr-mode{margin-right:var(--sp-2)}
/* Show projection: a text toggle beside the range tabs, with the range tab's size and states */
.btn.sm.pj-t{height:24px;padding:0 var(--sp-2);color:var(--dim);background:none}
.btn.pj-t:hover{color:var(--fg);background:none}
.btn.pj-t.on{background:var(--sf-3);color:var(--fg)}
.ax-tl{padding:var(--sp-6)}
@media (max-width:1100px){ .asx{grid-template-columns:1fr} .ax-right{position:static;order:-1;height:auto;min-height:0} .hc-box{flex:none;height:380px} }
@media (max-width:520px){ .ax-pair{grid-template-columns:1fr;row-gap:var(--sp-4)} .ax-tile+.ax-tile::before{display:none} .ax-tile+.ax-tile{padding-left:var(--sp-6)} }
.seg button:disabled{opacity:.35;cursor:not-allowed}
.btn.pj-t:disabled{opacity:.45;cursor:default}
/* Assessment focus mode: sidebar stays, page height is locked to the viewport */
/* Focus mode is an app screen: top bar stays put, the chart fills the height, only the left column scrolls */
.app.focus{height:100vh;height:100dvh;overflow:hidden;grid-template-rows:auto minmax(0,1fr)}
.app.focus .main{min-height:0;overflow:hidden;padding-bottom:var(--sp-6)}
.app.focus .asx{height:100%;align-items:stretch}
.ax-scroll{display:flex;flex-direction:column;gap:var(--sp-12)}
/* Only the content scrolls; it fades out linearly near the tabs and the bottom edge */
.app.focus .ax-left{min-height:0;overflow:hidden;gap:0}
.app.focus .ax-tabs{flex:none;position:relative;z-index:2}
.app.focus .ax-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-6) var(--sp-2) var(--sp-8) 0;margin-right:calc(var(--sp-2) * -1);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 30px),transparent 100%)}
.app.focus .ax-right{position:static;height:auto;min-height:0}
@media (max-width:1100px){ .app.focus .ax-scroll{overflow:visible;padding:0;margin:0;-webkit-mask-image:none;mask-image:none} .app.focus .ax-left{gap:var(--sp-6)} .app.focus{height:auto;overflow:visible} .app.focus .main{overflow:visible} .app.focus .asx{height:auto} .app.focus .ax-left{overflow:visible;padding:0;margin:0} }
#hbT{transition:color .2s var(--ease)}
/* Assessments list */
.asl{display:flex;flex-direction:column;gap:var(--sp-4)}
.asl-t{padding:var(--sp-2) var(--sp-3)}
.asl-r{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.3fr) .7fr .8fr 150px 16px;gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);font-size:13px;cursor:pointer;transition:background-color .16s var(--ease)}
.asl-r:hover{background:var(--hover)}
.asl-r.hd{cursor:default;font-size:11px;font-weight:500;color:var(--dim);padding-top:var(--sp-3);padding-bottom:var(--sp-2)}
.asl-r>:nth-child(3),.asl-r>:nth-child(4),.asl-r>:nth-child(5){text-align:right;justify-content:flex-end}
.asl-r.hd:hover{background:none}
.asl-r .nm{display:flex;flex-direction:column;gap:var(--sp-hair);min-width:0}
.asl-r .nm b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asl-r .pg small{font-size:12px;color:var(--dim)}
.asl-r .pg{display:flex;flex-direction:column;gap:var(--sp-2)}
.asl-r .rt{display:flex;align-items:center;gap:var(--sp-3);color:var(--pos);font-weight:500}
.asl-r .rt svg{width:64px;height:26px;flex:none}
.asl-r .rt{white-space:nowrap}
.asl-r .go{width:16px;height:16px;color:var(--dim)}
.asl-sec h3{margin:var(--sp-2) var(--sp-hair) var(--sp-3);font:var(--t-title)}
.asl-empty{padding:var(--sp-6)}
@media (max-width:1100px){ .asl-r{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-3)} .asl-r.hd{display:none} .asl-r > span:nth-child(n+4):not(.go){display:none} .asl-r .go{display:none} }
.topid{display:flex;align-items:center;gap:var(--sp-3);min-height:46px}
.tb-chev{width:var(--h-sm);height:var(--h-sm);margin-left:calc(var(--sp-2) * -1);border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm)}
.tb-chev:hover{color:var(--fg);background:var(--press)}
.tb-chev svg{width:16px;height:16px}
.topid{min-width:0} .tools{flex:none}
/* Drawers: every dialog slides in from the right, full height */
.modal-bg{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;justify-content:flex-end;padding:var(--sp-2);animation:fade .24s var(--ease)}
.modal-bg.out{animation:fade .2s var(--ease) reverse forwards}
.modal-bg.out .modal{animation:dwOut .2s var(--ease) forwards}
@keyframes fade{from{opacity:0}}
/* Opaque --sf-1 panel with an 8px edge gap and no blur. Widths: .s 440px confirmations, 520px forms (default), .l 640px reading.
   Fixed header and footer, each with one edge-to-edge divider; only .dw-body scrolls (renderModal wraps it) */
.modal{width:min(520px,100%);height:100%;display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--glass-dw);-webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);animation:dwIn .22s cubic-bezier(.2,0,0,1)}
.modal.s{width:min(440px,100%)} .modal.l{width:min(640px,100%)}
.proto-sim{align-self:flex-start;margin-bottom:var(--sp-5);background:var(--press);color:var(--dim);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:12px;cursor:pointer}
.proto-sim:hover{color:var(--fg)}
@keyframes dwIn{from{transform:translateX(calc(100% + 24px))}}
@keyframes dwOut{to{transform:translateX(calc(100% + 24px))}}
/* Header: a 16px title over a 12px muted context line (strategy · account), a 12px dim timestamp, then the 28px close */
.dw-h{flex:none;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--sp-16);padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);border-bottom:1px solid var(--line)}
.dw-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.dw-ctx{font:var(--t-label);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-ts{flex:none;font:var(--t-label);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.dw-x{flex:none;width:var(--h-sm);height:var(--h-sm);border-radius:var(--r-sm);color:var(--muted)}
.dw-x:hover{background:var(--press);color:var(--fg)}
.modal h3{margin:0;font:var(--t-title)}
/* Body: 24px padding, 20px between blocks, and the blocks carry no margins of their own. Prose is 14px/1.6 --fg-2 */
.modal>.dw-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-6);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.modal>.dw-body>*{margin:0;flex-shrink:0}
.modal p{margin:0;font:var(--t-body);color:var(--fg-2)}
/* A sub-section: 12px/500 dim label (like every group label on the pages) over its content, 12px apart. A form field: label over control, 8px apart */
.dw-sec{display:flex;flex-direction:column;gap:var(--sp-3)}
.modal .dw-sub{margin:0;font:var(--t-ui);color:var(--muted)}
.dw-f{display:flex;flex-direction:column;gap:var(--sp-2)} .dw-f>*{margin:0}
.modal .dw-foot,.modal .dw-note{font:var(--t-label);line-height:var(--lh-prose);color:var(--dim)}
.modal .dw-note{display:flex;gap:var(--sp-2);align-items:flex-start}
/* Key-value rows: a hairline above each row and one under the last */
.modal .rows{border-bottom:1px solid var(--line)}
.modal .rows div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line);font-size:13px}
.modal .rows div span:last-child{text-align:right} .modal .rows div span:last-child:not(.chip){color:var(--fg);font-weight:500}
.modal .rows div span:first-child{color:var(--muted)}
.modal .rows .rs{font-style:normal;font-weight:400;color:var(--dim)}
/* Status: one text-only badge with one short muted line beside it, never a coloured box */
/* Drawer status (v367): the badge sits above its explanation */
.dw-stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.modal .dw-stat p{min-width:0;font:var(--t-label);color:var(--muted)}
/* an error reads at body size, not as fine print */
.modal .dw-stat.al p{font:var(--t-body);color:var(--fg-2)}
/* At most one neutral box per drawer */
.modal .dw-why{padding:var(--sp-4);background:var(--sf-2)}
/* Sources: where a reading drawer's figures come from, always last in the body */
.dw-srcs{padding-top:var(--sp-5);border-top:1px solid var(--line)}
.dw-src{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-6);margin:0}
.dw-src dt{font:var(--t-label);line-height:var(--lh-ui);color:var(--dim)}
.dw-src dd{margin:0;font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg-2)}
/* Footer: 36px buttons on the right. A ghost Cancel or Close with its esc key cap, then at most one ink primary;
   destructive actions are danger-soft, solid --neg only on the final irreversible confirm. Info-only drawers have no footer */
.modal>.acts{flex:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--line)}
.btn.ghost{background:none;color:var(--fg-2)}
.btn.ghost:hover{background:var(--hover);color:var(--fg)}
kbd{display:inline-grid;place-items:center;height:16px;min-width:16px;padding:0 var(--sp-1);border-radius:var(--r-xs);background:var(--neu-t);color:var(--dim);font:var(--t-micro)}
@media (max-width:820px){ .modal-bg{padding:0} .modal,.modal.s,.modal.l{width:100%;border-radius:0} .dw-h{padding-left:var(--sp-4)} .modal>.dw-body{padding:var(--sp-5) var(--sp-4)} .modal>.acts{padding:var(--sp-3) var(--sp-4)} .btn kbd{display:none} }
/* ===== No outlines: surfaces are separated by fill, never by a border ===== */
.glass,.hero,.dq-chat,.dq-panel,.ddq,.pop,.modal,.toast,.hc-tip,.pillbtn,.btn,.qb,.chip,.seg,.ax-tabs,.ax-chips button,
.composer,.dw-ta,.dw-sel,.acc-add,.acc-card,.proto-sim,.pa-sup,.pa-eye,.pa-gc,.pa-col,.pa-card,.pa-bulk,.pa-url,.pa-qr,.pa-tbl,.pa-ck,.pa-th,.pa-swr,.pa-q,.pa-ib,.pa-otp{border:0!important}
.acc-card:hover{background-color:var(--sf-2)}
.composer:focus-within,.dw-ta:focus,.dw-sel:focus{background:rgba(255,255,255,.05)}
/* ===== Motion: every screen is complete on first paint. Only popovers and new chat messages fade (120ms) and drawers slide (220ms) ===== */
@keyframes fadeIn{from{opacity:0}}
.glass,.acc-add,.asl-r,.ax-ev,.step,.nav button,.btn,.seg button,.ax-tabs button,.ax-chips button{transition:background-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease),filter .2s var(--ease)}
/* Exception to no-borders: the DDQ composer keeps an outline so the input is easy to find */
.composer{border:1px solid var(--line-2)!important}
.composer:focus-within{border-color:rgba(255,255,255,.5)!important}
.rq-row .val.pos{color:var(--pos)}
/* Day-90 marker on the balance chart, once the minimum period has passed */
.hc-mk{position:absolute;top:0;height:calc(100% - 28px);width:1px;background:repeating-linear-gradient(to bottom,var(--ch-ref) 0 3px,transparent 3px 6px);pointer-events:none}
/* Marker and reference labels are plain 11px text, no chip: the label in dim, the value (muted) or outcome after it */
.hc-mk em{position:absolute;top:0;left:var(--sp-2);font-style:normal;font-size:11px;line-height:var(--lh-tight);color:var(--dim);white-space:nowrap}
.hc-mk em b{display:block;font-weight:500;color:var(--fg)} .hc-mk.fail em b{color:var(--fg-2)} .hc-mk.wd em b{color:var(--muted)} .hc-mk.end em{text-align:right}
.hc-tg{position:absolute;left:var(--sp-2);transform:translateY(calc(-100% - 4px));font-size:11px;line-height:var(--lh-tight);color:var(--dim);white-space:nowrap;pointer-events:none}
.hc-tg em{font-style:normal;color:var(--muted)} .hc-tg.r{left:auto;right:calc(74px + var(--sp-2))} .hc-tg.dn{transform:translateY(4px)}
.legend span{white-space:nowrap}
/* legend toggles (v363): look like the legend text; off is faded */
.legend .lg-t{display:inline-flex;align-items:center;padding:0;border:0;background:none;font:inherit;color:inherit;white-space:nowrap;cursor:pointer;transition:opacity .16s var(--ease),color .16s var(--ease)}
.legend .lg-t:hover{color:var(--fg-2)} .legend .lg-t.off{opacity:.4}
/* Completed assessment */
.ax-result{flex:none;margin-bottom:var(--sp-4);padding:var(--sp-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.ax-result h2{margin:var(--sp-hair) 0 0;font:var(--t-page);letter-spacing:-.01em}
.ax-result p{margin:0;font-size:14px;line-height:var(--lh-prose);color:var(--fg-2)}
.rq-row .val.ok{color:var(--pos)} .rq-row .val.no{color:var(--neg)}
.rq-row .val small{display:block;font-size:12px;color:var(--dim);margin-top:var(--sp-hair)}
/* What happens next: the shared ledger rows, 8px inside the card */
.ax-next{padding:var(--sp-2) var(--sp-3)}
.hc-mk.end em{left:auto;right:8px}
/* What happens next sits under the result card, above the tabs */
.ax-nextwrap{flex:none;margin-bottom:var(--sp-4)}
/* Finished assessment: result card and next steps open the scroll area under the tabs */
.ax-result,.ax-nextwrap{margin:0!important}
.asl-r .rt.neg{color:var(--neg)}
/* Notifications drawer */
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0;font-size:13px;color:var(--muted)}
.nt-all{padding:var(--sp-2) 0;font-size:13px}
.nt-all:disabled{color:var(--dim);cursor:default}
.nt-list{display:flex;flex-direction:column;gap:var(--sp-2);margin:0 calc(var(--sp-3) * -1)}
.nt{display:grid;grid-template-columns:8px minmax(0,1fr);gap:var(--sp-3);align-items:start;width:100%;padding:var(--sp-3) var(--sp-3);border:0;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background-color .2s var(--ease)}
.nt:hover{background:var(--hover)}
.nt.un{background:var(--sf-3)}
.nt.un:hover{background:color-mix(in srgb,var(--sf-3),var(--fg) 3%)}
.nt > i{width:8px;height:8px;border-radius:50%;margin-top:var(--sp-2);background:transparent}
.nt.un > i{background:var(--fg)}
.nt b{display:block;font-weight:500;font-size:14px;color:var(--muted)}
.nt.un b{color:var(--fg)}
.nt > span > span{display:block;margin-top:var(--sp-hair);font-size:13px;line-height:var(--lh-prose);color:var(--dim)}
.nt.un > span > span{color:var(--fg-2)}
.nt small{display:block;margin-top:var(--sp-2);font-size:12px;color:var(--dim)}
.asl-empty,.nt-empty,.hx-empty,.tr-none,.hn-none{margin:0;font:var(--t-body);color:var(--muted)}
/* Account detail: open "About" text, facts card in the side column */
.ad-about{grid-column:1;grid-row:1;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.ad-about h2{margin:0;font:var(--t-title)}
.ad-hd h2{margin:0;font:var(--t-page);letter-spacing:-.01em}
.ad-hl{min-width:0}
.ad-about p{margin:0;font-size:16px;line-height:var(--lh-prose);color:var(--fg-2);max-width:64ch}
.ad-body{grid-column:1}
@media (max-width:1240px){ .ad-about,.ad-body{grid-column:1;grid-row:auto} }
.cl-list{margin:var(--sp-5) 0 var(--sp-1)}
.cl-list li svg{color:var(--muted)}
.cl-ok{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-5) 0 var(--sp-1);font-size:13px;color:var(--fg-2);cursor:pointer}
/* custom 16px checkbox: 4px radius, a faint fill when empty, ink fill with a dark tick when checked */
.cl-ok input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:1px 0 0;border-radius:var(--r-xs);background:var(--line-2);cursor:pointer;transition:background-color .16s var(--ease)}
.cl-ok input:hover{background:var(--sel)}
.cl-ok input:checked{background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305080d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/14px no-repeat}
.cl-ok input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Sidebar and top bar never scroll with the page */
.side{position:sticky;top:0;height:100vh;height:100dvh;align-self:start;overflow-y:auto}
/* The page body is the only thing that scrolls; it fades out linearly just under the top bar, like the assessment tabs */
.app{height:100vh;height:100dvh;overflow:hidden;grid-template-rows:auto minmax(0,1fr)}
.top{padding-bottom:0}
.main{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:var(--sp-6);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
@media (max-width:820px){ .app{height:auto;overflow:visible} .main{overflow:visible;-webkit-mask-image:none;mask-image:none} }
@media (max-width:820px){ .side{position:static;height:auto;overflow-x:auto;overflow-y:hidden} }
.btn.danger-soft{color:var(--neg);background:var(--neg-t)}
.btn.danger-soft:hover{background:color-mix(in srgb,var(--neg) 22%,transparent)}
/* Archived list: the name and its Archived badge sit on one line */
.nm-row{display:flex!important;align-items:center;gap:var(--sp-2);min-width:0}
.nm-row .chip{flex:none}
/* Strategies list with no strategy yet */
.acc-empty{padding:var(--sp-6) 0 0}
.acc-empty h3{margin:0;font:var(--t-title)}
.acc-empty p{margin:var(--sp-1) 0 0;font-size:14px;line-height:var(--lh-prose);color:var(--muted)}
/* A card with an open overflow menu sits above the cards below it, so the menu is never covered */
.acc-card{position:relative}
.acc-card:has(.card-menu){z-index:20}
.card-menu{z-index:30}
/* Direct baseline edit drawer */
.ed-rows{display:flex;flex-direction:column;gap:var(--sp-5);margin:0}
.ed-row{display:flex;flex-direction:column;gap:var(--sp-2);font-size:13px;color:var(--muted)}
.dw-in{height:var(--h-lg);background:var(--well);border:0;border-radius:var(--r-sm);padding:0 var(--sp-3);color:var(--fg);font:inherit;font-size:13px;outline:none}
.dw-in:focus{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* Baseline change chat in the drawer */
.modal.ec>.ec-comp{margin:0 var(--sp-6) var(--sp-6)} @media (max-width:820px){ .modal.ec>.ec-msgs{padding:var(--sp-5) var(--sp-4)} .modal.ec>.ec-comp{margin:0 var(--sp-4) var(--sp-4)} }
.ec-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:var(--sp-6);scrollbar-width:thin}
.ec .msg{max-width:100%}
.ec .msg.me{max-width:88%}
.ec .bot{width:28px;height:28px}
.ec .bot svg{width:14px;height:14px}
.ec .bub{font-size:14px;padding:var(--sp-3) var(--sp-3)}
.ec-diff{margin-top:var(--sp-1);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-md);background:var(--sf-2)}
.ec-diff small{display:block;font-size:12px;color:var(--muted);margin-bottom:var(--sp-1)}
.ec-diff div{display:flex;align-items:center;gap:var(--sp-3);font-size:14px}
.ec-diff s{color:var(--dim)}
.ec-diff span{color:var(--dim)}
.ec-diff b{color:var(--pos);font-weight:600}
.ec-comp{flex:none}
.ec-comp textarea{flex:1;background:none;border:0;outline:none;resize:none;color:var(--fg);font:inherit;font-size:14px;line-height:var(--lh-ui);padding:var(--sp-2) 0;min-height:24px;max-height:140px}
.ec .bub p{margin:0;color:inherit;font-size:14px}
.dw-info{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2)}
.dw-info svg{width:16px;height:16px;flex:none;margin-top:var(--sp-hair);color:var(--muted)}
.dw-info b{display:block;font-weight:500;font-size:14px;margin-bottom:var(--sp-1)}
.dw-info span{font-size:13px;line-height:var(--lh-prose);color:var(--fg-2)}

/* Home chart plot box and its empty state */
.hc2-plot{position:relative}
.hc2-empty{display:grid;place-items:center;border-radius:var(--r-md);background:var(--ch-band);color:var(--muted);font-size:14px;text-align:center;padding:0 var(--sp-6)}
.ec-why{margin:var(--sp-3) 0 0!important;padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:13px!important;color:var(--fg-2)!important;line-height:var(--lh-prose)}
.ec-why span{display:block;font-size:12px;color:var(--muted);margin-bottom:var(--sp-hair)}
/* Ready step: a plain button to the assessment rules sits where the progress bar was */
.hero-l .hero-btn{margin-top:var(--sp-5);position:relative;z-index:1}
.dw-note svg{width:14px;height:14px;flex:none;margin-top:var(--sp-hair);color:var(--muted)}
.asl-r .pg small{white-space:nowrap}
/* Ledger steppers (Toward the desk, drawer steps, What happens next): an <ol> of hairline rows, the label left and a 12px status right.
   No numbered discs, checkmarks or rail. The current row gets the --sf-2 fill, a 2px accent edge and its status in full-strength text */
.dw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.modal .dw-steps{margin:0 calc(var(--sp-3)*-1)}
.dw-steps li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);row-gap:var(--sp-1);align-items:baseline;padding:10px var(--sp-3);border-top:1px solid transparent}
.dw-steps li+li{border-top-color:var(--line)}
.dw-steps li.cur,.dw-steps li.cur+li{border-top-color:transparent}
.dw-steps li.cur{background:var(--sf-2);border-radius:0 var(--r-sm) var(--r-sm) 0;box-shadow:inset 2px 0 0 var(--accent)}
.dw-steps b{grid-column:1;font-size:14px;font-weight:500;line-height:var(--lh-ui);color:var(--fg)}
.dw-steps em{grid-column:2;grid-row:1;font-style:normal;font-size:12px;line-height:var(--lh-ui);color:var(--dim);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dw-steps li.cur em{color:var(--fg)}
.dw-steps span{grid-column:1;margin-top:var(--sp-hair);font:var(--t-label);color:var(--muted)}
.dw-steps li:not(.done):not(.cur) b{color:var(--muted)}
/* What happens next (v383): rows with room between them; info rows carry no status; the next action sits in its own row */
.dw-steps.wn{gap:var(--sp-2)} .dw-steps.wn li{padding:var(--sp-4)}
.dw-steps em.wn-a{grid-row:1 / span 2;align-self:center}
/* Toward the desk (v343): beside the chart, on the same canvas (no card of its own), set off by a hairline. Steps are rows with a 2px
   segment on the left (done: ink, current: Bridge Blue, still to come: a hairline), a 13px label and a 12px status; the one action below */
.td-side{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);border-left:1px solid var(--line);min-width:0}
.td-sh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);min-width:0}
.td-sh h3{margin:0;font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)}
.td-sh .lnk{font-size:12px;color:var(--muted);white-space:nowrap} .td-sh .lnk:hover{color:var(--fg)}
.td-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.td-st{position:relative;display:flex;flex-direction:column;gap:var(--sp-hair);min-width:0;padding-left:var(--sp-4)}
.td-st::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:1px;background:var(--line-2)}
.td-st.done::before{background:color-mix(in srgb,var(--fg) 45%,transparent)} .td-st.cur::before{background:var(--accent)}
.td-st b{font:500 13px/var(--lh-ui) var(--f-body);color:var(--muted)}
.td-st.done b,.td-st.cur b{color:var(--fg)}
.td-st em{font-style:normal;font:var(--t-label);color:var(--dim);font-variant-numeric:tabular-nums}
.td-st.cur em{color:var(--fg-2)}
.td-sa{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:auto}
@media (max-width:1240px){ .hm3-top{grid-template-columns:1fr} .td-side{border-left:0;border-top:1px solid var(--line);padding:var(--sp-5) 0 0} }
/* The desk (v446, v447): a compact hero with the pitch and the two stages as a strip, progress per strategy behind a switcher, how
   the desk decides as criteria cells and a segment rail, what the desk adds, questions. Surfaces are separated by fill; the only
   lines are list-row dividers. Sections are spaced by gap, so the phone can put progress first (order) */
.dk{display:flex;flex-direction:column;gap:var(--sp-14)}
.dk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);overflow:hidden}
.dk-hl{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-10);min-width:0}
.dk-ey{font:var(--t-label);color:var(--dim)}
.dk-hl h2{margin:0;font:var(--t-hero);line-height:1.12;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.dk-hl p{margin:0;max-width:68ch;font-size:14px;line-height:var(--lh-prose);color:var(--muted);text-wrap:pretty}
.dk-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-2)}
.dk-hr{padding:var(--sp-8) var(--sp-8) var(--sp-8) 0;display:flex;flex-direction:column;justify-content:center;min-width:0}
/* the two stages as a strip of two fills, the desk's a step lighter; one line of what the capital is, on the desk's stage the
   trader's share of the SMA profit on the right; no amounts */
.dk-st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.dk-st li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);row-gap:var(--sp-hair);align-items:start;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--sf-2);min-width:0}
.dk-st li.up{background:var(--sf-3)}
.dk-st small{grid-column:1;font:var(--t-micro);color:var(--dim)} .dk-st b{grid-column:1;font:var(--t-ui);color:var(--fg)}
.dk-st span{grid-column:1;margin-top:var(--sp-hair);font-size:12px;line-height:var(--lh-ui);color:var(--muted);text-wrap:pretty}
.dk-st em{grid-column:2;grid-row:1/span 3;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-hair);font-style:normal;text-align:right}
.dk-st em i{font-style:normal;font:var(--t-micro);color:var(--dim)} .dk-st em strong{font:600 18px/1 var(--f-display);color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
/* switcher: one tab per strategy with its status and record; the selected one a step lighter, never accent */
.dk-seg{display:flex;gap:var(--sp-hair);padding:var(--sp-hair);background:var(--sf-2);border-radius:var(--r-md);width:max-content;max-width:100%}
.sec>.dk-seg+.dk-pg{margin-top:var(--sp-3)}
.dk-seg button{display:flex;flex-direction:column;gap:var(--sp-hair);min-width:180px;max-width:280px;padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer;transition:background-color .16s var(--ease)}
.dk-seg button:hover{background:var(--hover)} .dk-seg button[aria-selected="true"]{background:var(--sf-3)}
.dk-seg b,.dk-seg small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-seg b{font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg)} .dk-seg .ar b{color:var(--muted)} .dk-seg small{font:var(--t-label);color:var(--muted)}
/* progress card: name, status chip and the one button; the state line; the stage rail; record next to assessments */
.dk-pg{padding:var(--sp-8);min-width:0}
.dk-none{font-size:14px;color:var(--muted)}
.dk-pg-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t c b" "n n n" "s s s";align-items:start;column-gap:var(--sp-3)}
.dk-pg-t{grid-area:t;min-width:0} .dk-pg-t h3{margin:0;font:var(--t-title);overflow-wrap:anywhere} .dk-pg-t p{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted)}
.dk-pg-h>.chip{grid-area:c;min-width:72px;justify-content:center;margin-top:6px}
.dk-pg-b{grid-area:b;display:flex;gap:var(--sp-2)} .dk-pg-b:empty{display:none}
.dk-pg-n{grid-area:n;margin:var(--sp-2) 0 0;font-size:13px;line-height:var(--lh-prose);color:var(--muted);max-width:72ch;text-wrap:pretty}
.dk-pg-s{grid-area:s;margin-top:var(--sp-3)} .dk-pg-s .proto-sim{margin:0}
.dk-rail{list-style:none;margin:var(--sp-6) calc(var(--sp-2)*-1) 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dk-rail li{display:flex;min-width:0}
.dk-sg{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-hair);padding:var(--sp-4) var(--sp-2) var(--sp-2);border:0;border-radius:var(--r-sm);background:none;text-align:left;color:inherit}
.dk-sg::before{content:"";position:absolute;left:var(--sp-2);right:var(--sp-2);top:0;height:2px;border-radius:1px;background:var(--line-2)}
.dk-sg.done::before{background:color-mix(in srgb,var(--fg) 45%,transparent)} .dk-sg.cur::before{background:var(--accent)}
button.dk-sg{cursor:pointer;transition:background-color .16s var(--ease)} button.dk-sg:hover{background:var(--hover)}
.dk-sg b{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg)} .dk-sg:not(.done):not(.cur) b{color:var(--muted)}
.dk-sg .go{display:inline-flex;color:var(--dim);flex:none} .dk-sg .go svg{width:16px;height:16px}
.dk-sg>span{font-size:12px;line-height:var(--lh-ui);color:var(--muted)} .dk-sg.cur>span{color:var(--fg)}
.dk-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:var(--sp-8);margin-top:var(--sp-8)}
.dk-trk,.dk-asl{display:flex;flex-direction:column;min-width:0}
.dk-bh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.dk-bh h4,.dk-now h4{margin:0;font:var(--t-ui);color:var(--fg)} .dk-bh p{margin:var(--sp-hair) 0 0;font:var(--t-label);color:var(--muted)} .dk-bh .lnk{font-size:13px;flex:none}
.dk-ch{padding-top:var(--sp-6)}
.dk-bl{position:absolute;top:0;display:flex;flex-direction:column;gap:var(--sp-hair);padding:var(--sp-1) var(--sp-2);font:var(--t-micro);color:var(--dim);white-space:nowrap;pointer-events:none} .dk-bl b{font-weight:500;color:var(--fg-2)}
.dk-ph{flex:1;min-height:200px;font-size:13px;line-height:var(--lh-prose)}
.dk-emp{margin:0;font-size:13px;line-height:var(--lh-prose);color:var(--muted)}
/* assessment rows: period, three figures, result, chevron; the number stays in the accessible name and on the chart bands */
.dk-ar{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.75fr)) 96px 16px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;font-size:13px;line-height:var(--lh-ui)}
.dk-ar+.dk-ar{border-top:1px solid var(--line)}
.dk-ar.hd{padding-top:0;font:var(--t-label);color:var(--dim);white-space:nowrap} .dk-ar.hd>span:nth-child(n+2):nth-child(-n+4){text-align:right}
.dk-ar[role="button"]{cursor:pointer} .dk-ar[role="button"]:hover .dk-ap b{text-decoration:underline;text-underline-offset:3px}
.dk-ap{min-width:0} .dk-ap b{display:block;font-weight:500;color:var(--fg)} .dk-ap small{display:block;margin-top:var(--sp-hair);font:var(--t-label);color:var(--muted)}
.dk-af{display:contents} .dk-af>span{text-align:right;white-space:nowrap} .dk-af small{display:none} .dk-af b{font-weight:500;color:var(--fg)}
.dk-af b.up{color:var(--pos)} .dk-af b.dn{color:var(--neg)}
.dk-ar .chip{min-width:72px;justify-content:center;justify-self:start}
.dk-ar .go{display:inline-flex;color:var(--dim)} .dk-ar .go svg{width:16px;height:16px} .dk-ar[role="button"]:hover .go{color:var(--fg)}
.dk-now{margin-top:var(--sp-6)} .dk-now h4{margin-bottom:var(--sp-4)}
.dk-now .ca-m{grid-template-columns:104px minmax(0,1fr) max-content}
/* how the desk decides: the four criteria as cells, then the path from criteria met to a decision as a segment rail */
.dk-dec2{padding:var(--sp-8)}
.dk-dec2>h3{margin:0;font:var(--t-title)} .dk-dec2>p{margin:var(--sp-2) 0 0;font-size:13px;line-height:var(--lh-prose);color:var(--muted);max-width:72ch;text-wrap:pretty}
.dk-band{margin-top:var(--sp-8)} .dk-b2{margin-top:var(--sp-10)}
.dk-bt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);min-width:0} .dk-bt h4{margin:0;font:500 13px/var(--lh-ui) var(--f-body);color:var(--muted);flex:none}
.dk-bt span{min-width:0;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-crit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.dk-c{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--r-md);background:var(--sf-2);min-width:0}
.dk-c>small{font:var(--t-label);color:var(--dim)}
.dk-c-f{font:600 28px/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--fg);text-wrap:balance}
/* a word figure (Declared Baseline) stays on one line at the height of the others, so the four cells share a baseline: it scales
   with its cell (container units) up to the figure size */
.dk-c{container-type:inline-size} .dk-c-f.w{white-space:nowrap;font-size:min(28px,12cqi);line-height:28px}
.dk-c-s{font-size:12px;line-height:var(--lh-ui);color:var(--muted)}
.dk-c-a{margin:auto 0 0;padding-top:var(--sp-4);font-size:12px;line-height:var(--lh-ui);color:var(--fg-2)}
.dk-note{margin:var(--sp-4) 0 0;font-size:13px;line-height:var(--lh-prose);color:var(--muted);max-width:72ch;text-wrap:pretty} .dk-b2 .dk-note{margin-top:var(--sp-6)}
.dk-flow{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.dk-fn{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-4);min-width:0}
.dk-fn::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:var(--line-2)}
.dk-fn.done::before{background:color-mix(in srgb,var(--fg) 45%,transparent)} .dk-fn.cur::before{background:var(--accent)} .dk-fn.goal::before{background:var(--sf-3)}
.dk-fn em{min-height:15px;font-style:normal;font:var(--t-micro);color:var(--dim);font-variant-numeric:tabular-nums} .dk-fn.cur em{color:var(--fg)}
.dk-fn b{font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)} .dk-fn span{font:var(--t-label);line-height:var(--lh-prose);color:var(--muted);text-wrap:pretty}
/* when the desk invests, and questions */
.dk-val{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.dk-v{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)} .dk-v b{font:var(--t-title);text-wrap:balance} .dk-v p{margin:0;font-size:13px;line-height:var(--lh-prose);color:var(--muted)}
.dk-faq{padding:var(--sp-2) var(--sp-8)}
.dk-q+.dk-q{border-top:1px solid var(--line)}
.dk-q summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:52px;font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg);list-style:none;cursor:pointer}
.dk-q summary::-webkit-details-marker{display:none}
.dk-q .go{display:inline-flex;color:var(--dim);flex:none;transition:transform .16s var(--ease)} .dk-q .go svg{width:16px;height:16px} .dk-q[open] .go{transform:rotate(90deg)}
.dk-q p{margin:0 0 var(--sp-4);font-size:13px;line-height:var(--lh-prose);color:var(--muted);max-width:72ch}
/* the partner environment's card grids reuse this grid (v434) */
.dk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
/* the criteria go to two columns from 1360px, before the word figure has to shrink much; from 1240px the hero stacks and the two
   stages sit side by side under the pitch */
@media (max-width:1360px){ .dk-crit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1240px){ .dk-hero{grid-template-columns:minmax(0,1fr)} .dk-hl{padding-bottom:var(--sp-6)} .dk-hr{padding:0 var(--sp-10) var(--sp-8)}
  .dk-st{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1100px){ .dk-hl{padding:var(--sp-8) var(--sp-8) var(--sp-6)} .dk-hr{padding:0 var(--sp-8) var(--sp-8)} .dk-body{grid-template-columns:minmax(0,1fr)} .dk-val{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-flow{grid-template-columns:minmax(0,1fr)} .dk-fn{padding:0 0 0 var(--sp-5)} .dk-fn::before{left:0;right:auto;top:var(--sp-1);bottom:var(--sp-1);width:2px;height:auto} .dk-fn em:empty{display:none} }
/* phone shell: a trader with a strategy gets progress first, the pitch after it (the jump link has nothing left to jump to) */
@media (max-width:820px){ .dk-pg{padding:var(--sp-5)} .dk.has>#sec-dk-prog{order:-1} .dk.has [data-dkjump]{display:none}
  .dk-pg-h{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "c" "n" "b" "s"} .dk-pg-h>.chip{justify-self:start;margin-top:var(--sp-2)} .dk-pg-b{margin-top:var(--sp-4)}
  .dk-ar{grid-template-columns:minmax(0,1fr) auto 16px;row-gap:var(--sp-2)} .dk-ar.hd{display:none} .dk-ar.hd+.dk-ar{border-top:0} .dk-ar .go{grid-column:3;grid-row:1}
  .dk-ar .chip{grid-column:2;grid-row:1;justify-self:end} .dk-af{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)} .dk-af>span{text-align:left}
  .dk-af small{display:inline;font:var(--t-label);color:var(--dim)} }
@media (max-width:640px){ .dk-grid{grid-template-columns:1fr} .dk-val{grid-template-columns:minmax(0,1fr)}
  .dk-hl{padding:var(--sp-6) var(--sp-5) var(--sp-5)} .dk-hl h2{font-size:24px} .dk-hr{padding:0 var(--sp-5) var(--sp-5)} .dk-st{grid-template-columns:minmax(0,1fr)} .dk-st li{padding:var(--sp-3) var(--sp-4)}
  .dk-seg{flex-direction:column;gap:0;width:100%} .dk-seg button{min-width:0;max-width:none;width:100%} .dk-seg button+button{border-top:1px solid var(--line)}
  .dk-rail{grid-template-columns:minmax(0,1fr)} .dk-sg{padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5)} .dk-sg::before{left:var(--sp-2);right:auto;top:var(--sp-2);bottom:var(--sp-2);width:2px;height:auto}
  .dk-bl:not(:last-of-type){display:none} .dk-now .ca-m{display:flex;flex-direction:column}
  .dk-dec2{padding:var(--sp-5)} .dk-faq{padding:var(--sp-1) var(--sp-5)}
  .dk-crit{grid-template-columns:minmax(0,1fr);gap:0;padding:0 var(--sp-4);border-radius:var(--r-md);background:var(--sf-2)}
  .dk-c{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-3);row-gap:var(--sp-hair);padding:var(--sp-3) 0;border-radius:0;background:none} .dk-c+.dk-c{border-top:1px solid var(--line)}
  .dk-c>small{grid-column:1;grid-row:1;align-self:baseline;font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg)}
  .dk-c-f,.dk-c-f.w{grid-column:2;grid-row:1;align-self:baseline;font-size:15px;line-height:var(--lh-ui);text-align:right} .dk-c-s,.dk-c-a{grid-column:1/-1} .dk-c-a{padding-top:0} }
.ad-note{margin:calc(var(--sp-hair) * -1) 0 var(--sp-3);font-size:13px;line-height:var(--lh-prose);color:var(--muted)}
/* Strategy page: settings as rows with their action on the right */
/* v407 strategy Overview: a little more air under the description; Balances and Commercial terms side by side at one height (the account facts
   sit at the bottom of Balances so both cards end on a row list); Track record at a glance above them since v408 (cells without dividers) */
.ad-desc+.ov-pair,.ad-desc+.ad-sec{margin-top:var(--sp-4)}
/* the left column is rounded to a whole pixel so the right card's tick bars never start on a half pixel */
.ov-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:round(down,calc((100% - var(--sp-4)) / 2),1px) minmax(0,1fr);gap:var(--sp-4);align-items:stretch}
/* both panels share one row rhythm: the same head height and the same bar columns, so the tick rows line up across the pair */
.ov-pair .cm-ah,.ov-pair .bl-t{min-height:44px} .ov-pair .cm-m{grid-template-columns:136px minmax(0,1fr) 104px}
.ov-pair>.ad-sec{display:flex;flex-direction:column;min-width:0} .ov-pair .cm-acc{flex:1} .ov-pair .cm-a{height:100%}
.bl .card-h{margin-bottom:var(--sp-5)}
.ov-tr .card-h{margin-bottom:var(--sp-5)}
.ov-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}
.ov-k div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0} .ov-k small{font:var(--t-label);color:var(--dim)} .ov-k b{font:600 16px/var(--lh-tight) var(--f-body);color:var(--fg)} .ov-k span{font:400 11px/var(--lh-tight) var(--f-body);color:var(--dim)}
@media (max-width:1280px){ .ov-pair{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .cm-m,.ov-pair .cm-m,.cm-m.bl-m{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-2)} .cm-r .tk{grid-column:1/-1;grid-row:2} .cm-r+.cm-r{margin-top:var(--sp-2)} .cm-dl div{grid-template-columns:minmax(0,1fr);gap:var(--sp-hair)} }
@media (max-width:640px){ .ov-k{grid-template-columns:repeat(2,minmax(0,1fr))} }
.bl-t small{display:block;margin:0 0 var(--sp-1);font:var(--t-label);color:var(--dim)} .bl-t b{display:block;font:600 20px/24px var(--f-body);color:var(--fg)}
.cm-m.bl-m{grid-template-columns:136px minmax(0,1fr) 104px}
@media (max-width:760px){ .cm-m.bl-m{grid-template-columns:120px minmax(0,1fr) 96px} }
/* v412: Account setup on a strategy page uses the Home setup hero (left: current step, right: 400px step column) */
.ov-setup .hero-l h2{font-size:22px} .ov-setup .hero-l{padding:var(--sp-10) var(--sp-8)} .ov-setup .step[aria-disabled="true"]{cursor:default} .ov-setup .step[aria-disabled="true"]:hover{background:none} .ov-setup .step[aria-disabled="true"] .go{opacity:0}
/* Settings: each group is a list card under its section title; the rows bring their own height */
.ss{display:flex;flex-direction:column;padding:var(--sp-3) var(--sp-8)}
@media (max-width:900px){ .ss{padding-inline:var(--sp-5)} }
.ss-r{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.ss-r:first-child{border-top:0}
.ss-r b{display:block;font-size:14px;font-weight:500}
.ss-r .btn{flex:none;margin:0}
.ss-r.stack{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.ss-a{display:flex;gap:var(--sp-2);flex:none}
.ad-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;min-height:var(--h-md)}
.rc-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--sp-1) 0 var(--sp-4)}
.rc-n{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted)}
.tr-tiph{margin-top:var(--sp-2);font-size:11px;color:var(--dim)}
.hc-tip div.tr-tiph{justify-content:flex-start;align-items:center;gap:var(--sp-1)} .tr-tiph kbd{margin:0 1px}
.rc-r{display:grid;align-items:center;cursor:pointer}
/* Strategy record: a real table. One 11px header row, then a 48px row per assessment: name, period, three right-aligned tabular figures, outcome */
.rc-list>.rc-r{position:relative;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) repeat(3,84px) 120px 16px;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-2);margin:0 calc(var(--sp-2)*-1);border-top:0;border-radius:var(--r-sm);font-size:13px;transition:background-color .16s var(--ease)}
.rc-list>.rc-r::before{content:"";position:absolute;left:var(--sp-2);right:var(--sp-2);top:0;height:1px;background:var(--line);pointer-events:none}
.rc-list>.rc-r:hover{background:var(--hover)}
.rc-list>.rc-r.hd{min-height:0;padding-top:var(--sp-3);padding-bottom:var(--sp-2);font:var(--t-micro);color:var(--dim);cursor:default}
.rc-list>.rc-r.hd::before{display:none} .rc-list>.rc-r.hd:hover{background:none}
@media (min-width:641px){ .rc-list>.rc-r>:nth-child(6){margin-left:var(--sp-4)} }
.rc-r .r{text-align:right} .rc-r .up{color:var(--pos)} .rc-r .dn{color:var(--neg)} .rc-r>.chip{justify-self:start} .rc-r .go{width:16px;height:16px;color:var(--dim)}
.rc-nm{min-width:0} .rc-nm b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-p{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .rc-list>.rc-r{grid-template-columns:minmax(0,1fr) auto 16px} .rc-list>.rc-r.hd,.rc-list>.rc-r>.rc-p,.rc-list>.rc-r>.r{display:none} }
.tl-lnk{display:inline-block;margin-top:var(--sp-1);font-size:12px}
.tl-lnks{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.tr-fi[data-hx]{cursor:pointer} .tr-fi[data-hx]:hover b{text-decoration:underline;text-underline-offset:3px}
.tr-fe{display:flex;align-items:center;gap:var(--sp-2);flex:none} .tr-fe .go{display:inline-flex;width:16px;height:16px;color:var(--dim)} .tr-fe .go svg{width:16px;height:16px}
@media (max-width:640px){ .rc-k{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ad{grid-template-rows:auto 1fr} @media (max-width:1240px){ .ad{grid-template-rows:none} }
/* Desk letter: a reading drawer (.l, 640px) opened from its notification or the Timeline. Strategy chip, 20px title, a date-led lead,
   the status line, one row of stat cells with inset dividers (neutral values), the letter as plain prose, then its sources */
.an-hd{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.an-t{margin:0;font:var(--t-page);letter-spacing:-.01em;text-wrap:balance}
.modal .an-lead{font:400 16px/var(--lh-prose) var(--f-body);color:var(--fg);text-wrap:pretty}
.an-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:var(--sp-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.an-stats div{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);padding:0 var(--sp-4)}
.an-stats div:first-child{padding-left:0} .modal>.dw-body>.an-stats:first-child{padding-top:0;border-top:0}
.an-stats div+div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.an-msg{display:flex;flex-direction:column;gap:var(--sp-3)}
/* a hairline between the letter's heading block and the letter itself (Not accepted letter, which has no stat row to separate them) */
.an-rule{margin:0;height:1px;border:0;background:var(--line)}
.an-msg p{margin:0;font-size:14px;line-height:var(--lh-prose);color:var(--fg-2)}
.an-msg p b{font-weight:600;color:var(--fg)}
.an-msg .an-sig{color:var(--dim);font-size:13px}
.an-ol{margin:0;padding-left:var(--sp-5);font-size:14px;line-height:var(--lh-prose);color:var(--fg-2)} .an-ol li + li{margin-top:var(--sp-2)}
.ad-tabs{align-self:flex-start}
/* Commercial terms (v379): two account panels on a fill (no outline), a profit-share split in tick bars, terms as divided rows */
.cm .card-h{margin-bottom:var(--sp-5)} .cm-sub{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted)}
.cm-acc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
/* v423: a lone Commercial terms card (before the first deposit) lets its split run the full width of the panel; next to Balances the
   pair's shared bar columns apply */
.ov-pair .cm-acc .cm-m{max-width:520px}
.cm-a{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-6);border-radius:var(--r-md);background:var(--sf-2);min-width:0}
.cm-ah{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)} .cm-ah b{display:block;font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)} .cm-ah small{display:block;margin-top:var(--sp-hair);font:var(--t-label);color:var(--muted)}
.cm-m{display:grid;grid-template-columns:104px minmax(0,1fr) 40px;row-gap:var(--sp-3);column-gap:var(--sp-4)}
.cm-r{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center} .cm-r .k{font-size:13px;color:var(--muted)} .cm-r .v{text-align:right;font:500 13px/1.3 var(--f-body);color:var(--fg)}
.cm-dl{margin:0} .cm-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line);font-size:13px;line-height:var(--lh-ui)} .cm-dl div:last-child{padding-bottom:0}
.cm-dl dt{color:var(--muted)} .cm-dl dd{margin:0;color:var(--fg)}
.rc-k.cm-k{margin:0}
.cm-note{margin:var(--sp-5) 0 0;font-size:12px;line-height:var(--lh-prose);color:var(--dim);max-width:72ch}
@media (max-width:900px){ .cm-acc{grid-template-columns:minmax(0,1fr)} }
.ad-desc{margin:0;padding:0;font-size:16px;line-height:var(--lh-prose);color:var(--fg-2);max-width:64ch}
.ad-tl{padding:var(--sp-2) 0 0}
.modal .dw-why p{margin:0} .modal .dw-why p + p{margin-top:var(--sp-3)}
.acc-card.s2{gap:var(--sp-5)}
.acc-head .proto-sim{flex:none}
.btn.btn-wait{cursor:default;color:var(--muted);background:var(--hover)}
.btn.btn-wait:hover{background:var(--hover)}
.acc-head > .btn{flex:none}
/* Cents on big amounts: dimmed at the same size as the whole number, never shrunk */
.acc-bal .big span,.hc-bal .c{font-size:1em;letter-spacing:inherit}
/* Assessment report */
/* v395: a small label above a group of tallies on Conviction (Occurrences, Checks by status) */
.rp-lbl{margin:var(--sp-4) 0 var(--sp-2);font:var(--t-label);color:var(--dim)} .ax-sec h4+.rp-lbl{margin-top:0} .rp-lbl+.rp-cnt{margin-top:0}
/* v395: the info tooltip on a report section heading opens to the right, so it stays inside the report column */
.ax-sec h4 .wtip{vertical-align:middle;margin-left:var(--sp-1)} .ax-sec h4 .wtip-b{left:-14px;right:auto}
.rp-cnt{display:grid;grid-template-columns:repeat(3,auto);gap:var(--sp-5) 0;padding:var(--sp-6) 0;margin-top:var(--sp-3)}
.rp-cnt div{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start;padding:0 var(--sp-4)} .rp-cnt div:nth-child(3n+1){padding-left:var(--sp-6)}
.rp-cnt div:not(:nth-child(3n+1))::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.fb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 58px;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;font-size:13px}
.fb-l{display:flex;flex-direction:column;min-width:0} .fb-l small{font-size:12px;color:var(--dim)}
/* Diverging tick bar: same 1.5px-on-4px ticks as .tk, mirrored from the zero line; each half's ticks start at the centre so a fill always ends on a whole tick.
   The track is right-aligned at an even whole-pixel width with an 8px gap, so both halves start on whole pixels: otherwise the 1fr label column leaves the ticks on a fraction of a pixel and they render blurred and look thicker than .tk */
.fb-t{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:8px;height:10px;justify-self:end;width:100%;width:round(down,100%,2px)}
.fb-t::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ch-zero)}
.fb-t>span{position:relative;width:100%;width:round(down,100%,4px);background:repeating-linear-gradient(90deg,var(--ch-tag) 0 1.5px,transparent 1.5px 4px)}
.fb-t>span:first-child{justify-self:end;background:repeating-linear-gradient(270deg,var(--ch-tag) 0 1.5px,transparent 1.5px 4px)}
.fb-t i{position:absolute;top:0;bottom:0;width:max(4px,calc(var(--f) * 100%));width:max(4px,round(nearest,calc(var(--f) * 100%),4px))}
.fb-t i.up{left:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 55%,transparent) 0 1.5px,transparent 1.5px 4px)}
.fb-t i.dn{right:0;background:repeating-linear-gradient(270deg,color-mix(in srgb,var(--neg) 75%,transparent) 0 1.5px,transparent 1.5px 4px)}
.fb b{text-align:right;font-weight:500}
.hx{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:var(--sp-2)}
.rp-l{margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);border-radius:var(--r-lg);background:var(--sf-2);display:flex;flex-direction:column;gap:var(--sp-2);font-size:13px;line-height:var(--lh-prose);color:var(--fg-2)}
/* Accounts list in the wallet popup */
.w-acc{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);display:flex;flex-direction:column}
.w-acc small{font-size:12px;color:var(--muted);margin-bottom:var(--sp-1)}
.w-a{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:var(--sp-3);align-items:center;width:100%;padding:var(--sp-2) var(--sp-2);margin:0 calc(var(--sp-2) * -1);width:calc(100% + 16px);border:0;border-radius:var(--r-sm);background:none;color:var(--fg);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.w-a:hover{background:var(--hover)}
.w-a b{display:block;font-weight:500;white-space:normal}
.w-a em{font-style:normal;font-size:12px;color:var(--dim)}
.w-a svg{width:14px;height:14px;color:var(--dim)}
/* Info tooltip on "Awaiting first trade" */
.wtip{position:relative;display:inline-grid;place-items:center;margin-left:var(--sp-hair);color:var(--dim);cursor:help;outline:none}
.wtip svg{width:14px;height:14px}
.wtip:hover,.wtip:focus-visible{color:var(--fg)}
.wtip-b{position:absolute;top:calc(100% + 12px);right:-14px;width:260px;padding:var(--sp-3);border-radius:var(--r-md);background:var(--glass-pop);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--shadow-pop);font-size:13px;font-weight:400;line-height:var(--lh-prose);color:var(--fg-2);white-space:normal;text-align:left;opacity:0;pointer-events:none;transition:opacity .12s linear;z-index:40}
.wtip:hover .wtip-b,.wtip:focus-visible .wtip-b{opacity:1}
.acc-card:has(.wtip:hover),.acc-card:has(.wtip:focus-visible){z-index:25}
.au-logo{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;margin-bottom:var(--sp-6);background:var(--navy)}
.au-logo svg{width:22px;height:22px}
.ap-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3)}
/* Drawer content never squeezes: long drawers scroll instead of shrinking fields */
.modal > *{flex-shrink:0}
.modal.ec > .ec-msgs{flex-shrink:1}
/* One field style everywhere: selects look like inputs (36px, 6px radius, own chevron) */
.dw-sel{appearance:none;-webkit-appearance:none;width:100%;height:var(--h-lg);margin-top:var(--sp-2);padding:0 var(--sp-8) 0 var(--sp-3);border:0;border-radius:var(--r-sm);color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
background:var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
.dw-sel:focus{outline:none;background-color:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.dw-ta:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* Required badge sits right after the topic name */
.np-r b{display:flex;align-items:center;gap:var(--sp-2)} .np-r b em{margin-top:0;font-weight:400}
/* One top bar height everywhere: title, back + strategy name and logo all sit in the same 42px row, so fixed items never jump */
.top h1,.topid,.top-brand{height:42px;min-height:0;display:flex;align-items:center}
.top h1[hidden],.topid[hidden],.top-brand[hidden]{display:none}
/* The top bar and its menus always sit above the page content (e.g. the onboarding chat header) */
.top{position:relative;z-index:35}
/* v420 mini-header: overlays the top of the page under the top bar (no layout shift) and fades in once the header is gone. It floats
   over scrolling content: v421 blue glass at ~65% with a strong blur, so it reads as glass while the text stays clear (the card glass
   at ~30% let the cards behind show through; the near-opaque popover fill of v420 felt too heavy) */
.tr-mini{position:absolute;left:var(--sp-10);right:var(--sp-10);top:calc(100% + var(--sp-2));display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);background:linear-gradient(160deg,rgba(40,60,88,.62) 0%,rgba(18,28,42,.68) 100%);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;z-index:2}
.tr-mini.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease),transform .18s var(--ease)} .tr-mini:empty{display:none}
.trm-l{display:flex;align-items:baseline;gap:var(--sp-3);min-width:0} .trm-l b{font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .trm-l span{font:var(--t-label);color:var(--dim);white-space:nowrap}
.trm-r{display:flex;align-items:center;gap:var(--sp-2);flex:none}
@media (max-width:820px){ .tr-mini{display:none} }
@media (prefers-reduced-motion:reduce){ .tr-mini,.tr-mini.on{transition:none;transform:none} }
/* The topbar sits above the track record header (30) so its menus are never covered; toasts (40) and drawers (50) stay on top */
/* Password field with a show / hide eye */
.pw-wrap{position:relative;display:block}
.pw-wrap .dw-in{width:100%;padding-right:calc(var(--h-sm) + var(--sp-3))}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:var(--h-sm);height:var(--h-sm);border:0;border-radius:var(--r-sm);background:none;color:var(--dim);display:grid;place-items:center;cursor:pointer}
.pw-eye:hover{color:var(--fg);background:var(--press)}
.pw-eye svg{width:16px;height:16px}
.au-forgot{margin-top:var(--sp-3)}
/* Wallet popup: the divider above Accounts keeps the same rhythm as the rows above it */
.pop .w-acc{margin-top:0}
/* With the profile panel open the "Saved as you go" label hides; Save still sits at the far right of the chat header */
.ddq.wide .dq-exit{margin-left:var(--sp-3)}
/* Home: one large balance chart, metric tiles under it */
/* Home: the strategy header, 24px to the chart row, the key-figure strip 16px under it, then the sections 48px apart */
.hm3{display:flex;flex-direction:column}
.hm3>*+*{margin-top:var(--sp-5)}
.hm3>.tr-head+*{margin-top:var(--sp-6)}
.hm3>.sec{margin-top:var(--sp-14)}
/* Section anatomy, the same on every page: a small grey title outside the card with an optional 28px action on the right,
   12px down to the first card, cards 16px apart, sections 48px apart. A card that spans the column is wide (24px 32px), a two-up card 24px */
.sec{display:flex;flex-direction:column;min-width:0}
.sec>*+*{margin-top:var(--sp-5)}
.sec>.sec-h+*{margin-top:var(--sp-4)}
.sec+.sec{margin-top:var(--sp-14)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--h-sm)}
.sec-h h2{margin:0}
.sec-h h2,.ax-sec h4{font:500 14px/var(--lh-ui) var(--f-body);color:var(--muted)}
.sec>.tr-card{padding-inline:var(--sp-8)}
/* Home as track record: same glass cards and chart language as the assessment page, longer */
.tr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding:0;position:relative;z-index:30}
.tr-head h2{margin:0;font:var(--t-title)}
.tr-tags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.tr-meta,.ad-about .tr-meta{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--dim)}
.tr-tags+.tr-meta{margin-top:var(--sp-2)}
.tr-hl{min-width:0;flex:1 1 420px}
.rf-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.rf-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--r-sm);background:var(--neu-t);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.rf-opt:hover{background:var(--neu-h)}
.rf-opt.on{background:var(--sel)}
.rf-opt b{display:block;font-size:14px;font-weight:500}
.rf-st{padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2)}
.rf-st b{display:block;font-size:14px;font-weight:500} .rf-st p{margin:var(--sp-2) 0 0;font-size:13px;line-height:var(--lh-prose);color:var(--muted)}
.rf-a{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)} .rf-a .proto-sim{margin:0}
.fd-h{align-items:flex-start!important} .fd-a{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end} .fd-h p{margin:var(--sp-1) 0 0;font-size:13px;color:var(--muted)}
.tr-hb{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.tr-sw{display:inline-flex;align-items:center;gap:var(--sp-2);max-width:340px}
.tr-sw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-sw svg{width:16px;height:16px;flex:none;opacity:.7}
/* a chosen view clears with the × inside the same box; it sits over the button's right padding, outside the menu trigger */
/* v418: with a custom period or an assessment window chosen, the × takes the chevron's place (the label still opens the menu) */
.tr-swc{display:inline-flex} .tr-swc .tr-sw{padding-right:calc(var(--sp-1) + 24px)}
.tr-swx{position:absolute;right:var(--sp-1);top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border:0;border-radius:var(--r-xs);background:none;color:var(--dim);display:grid;place-items:center;cursor:pointer}
.tr-swx:hover{background:var(--neu-h);color:var(--fg)}
.pop.tr-menu{width:260px;left:auto;right:0}
/* rule events in the evidence drawer (v375, ledger layout v376, timeline v377): one entry per occurrence */
.evx{list-style:none;margin:0;padding:0} .evx li{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid var(--line)} .evx li:first-child{border-top:0;padding-top:var(--sp-1)}
.evx-d{display:flex;flex-direction:column;gap:var(--sp-hair);font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg)} .evx-d span{font:var(--t-label);color:var(--dim);font-variant-numeric:tabular-nums}
.evx-b{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.evx-v{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);font:400 13px/var(--lh-ui) var(--f-body);color:var(--muted)} .evx-v b{font-weight:500;color:var(--fg)}
.evx-b p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-2)}
.evx-b .evx-a{display:flex;gap:var(--sp-2);color:var(--fg)} .evx-a svg{flex:none;width:14px;height:14px;margin-top:3px;color:var(--dim)}
.evx-b small{font:var(--t-label);color:var(--dim)}
.evx-k b{font-size:14px;color:var(--fg)}
.ax-ev.evl{grid-template-columns:76px minmax(0,1fr) 16px;column-gap:var(--sp-4);row-gap:0;align-items:start;padding:var(--sp-4) var(--sp-3)} .ax-ev.evl .go{margin-top:2px}
.ax-evn{margin:0 0 var(--sp-3)}
/* the view lens bar under the header (v370): which assessment the page shows, and the way back */
.tr-lens{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-6);font:var(--t-ui);font-weight:400;color:var(--fg-2)}
.tr-lens i{width:2px;height:14px;border-radius:1px;background:var(--accent)} .tr-lens .lnk{font-size:13px}
.tr-menu h4{margin:0;padding:var(--sp-2) var(--sp-3) var(--sp-1);font:var(--t-micro);color:var(--dim)}
/* Custom period popover (v387): From and To under the period control; opens up from the assessment chart's control */
.pop.cus-pop{width:min(296px,calc(100vw - 32px));display:flex;flex-direction:column;gap:var(--sp-3);text-align:left;white-space:normal}
.pop.cus-pop.k-as{left:0;right:auto}
/* the view menu and its custom popover open from the left edge of the view button, so they stay on screen when the header wraps */
[data-cusw="lens"]>.pop{left:0;right:auto}
.pop.cus-pop.k-as{top:auto;bottom:calc(100% + 8px)}
.pop.cus-pop h4{margin:0}
.cus-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2)}
.cus-f label{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;font:var(--t-label);color:var(--muted)}
.cus-f .dw-in{width:100%;min-width:0;padding:0 var(--sp-2);font-variant-numeric:tabular-nums}
.cus-f .dw-in::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.cus-m{margin:0;font:var(--t-label);color:var(--muted)}
.cus-a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.cus-a .lnk{font-size:13px}
.hm3-top:has(.cus-pop),.sec-h:has(.cus-pop),.hc-ctl:has(.cus-pop){position:relative;z-index:30}
.tr-menu button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.tr-menu button b{display:block;font-weight:500;font-size:14px;color:var(--fg)}
.tr-menu button small{display:block;font-size:12px;color:var(--dim);margin-top:var(--sp-hair)}
.tr-menu button svg{width:14px;height:14px;flex:none;color:var(--fg)}
.tr-menu button[disabled]{cursor:default;opacity:.55;flex-direction:column;align-items:flex-start;gap:var(--sp-hair)}
.tr-menu button[disabled]:hover{background:none}
.tr-mdiv{height:1px;background:var(--line);margin:var(--sp-2) 0}
.tr-menu button.tr-ob svg{color:var(--dim)}
/* Assessment windows: the same faint neutral fill for every outcome, 1px dashed '2 3' edges and a two-line plain label
   (assessment, then the outcome) that drops the word 'Assessment' under 110px, the id under 70px, and hides only under 40px */
.tr-band{fill:var(--ch-band)}
svg .tr-bd{stroke:var(--ch-ref);stroke-dasharray:2 3}
.tr-bl{position:absolute;top:var(--sp-2);display:block;padding:0;font:400 11px/var(--lh-tight) var(--f-body);white-space:nowrap;color:var(--dim);pointer-events:none;container-type:inline-size}
.tr-bl>span{display:block;padding-left:var(--sp-2)} .tr-bl b{display:block;font-weight:500;color:var(--fg)} .tr-bl.fail b{color:var(--fg-2)} .tr-bl.decl b,.tr-bl.wd b{color:var(--muted)}
@container (max-width:109px){ .tr-bl .w{display:none} }
@container (max-width:69px){ .tr-bl .id{display:none} }
@container (max-width:39px){ .tr-bl>span{display:none} }


.tr-card{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.tr-ch{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.tr-ch h3{margin:0;font:var(--t-title);display:inline-block;vertical-align:middle}
/* the definition tooltip opens under the widget header, from its left edge, and never runs past the card */
.tr-ch .wtip{position:static;vertical-align:middle;margin-left:var(--sp-1)} .tr-ch .wtip-b{left:0;right:auto;top:calc(100% + var(--sp-2));width:min(260px,100%)}
.tr-ch p{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted);max-width:62ch}
.tr-tw{overflow-x:auto}
/* Monthly returns: a real table. 36px hairline rows, right-aligned 12px tabular cells, no tiles; signed returns are plain coloured text.
   An empty month shows a dim dash; the 2px line under a month still shows when an assessment ran */
.tr-strip{position:absolute;bottom:6px;height:3px;border-radius:var(--r-xs)}
.tr-strip.run{background:var(--accent)} .tr-strip.pass{background:var(--pos)} .tr-strip.fail{background:var(--neg)} .tr-strip.decl,.tr-strip.wd{background:var(--dim)}
.tr-mt{width:100%;min-width:860px;border-collapse:separate;border-spacing:var(--sp-1);font-size:13px}
.tr-mt th{font:var(--t-micro);color:var(--dim);padding:0 var(--sp-1) var(--sp-2);text-align:center;white-space:nowrap}
.tr-mt tbody th{padding:0 var(--sp-3) 0 0;text-align:left;font:500 13px/1 var(--f-body);color:var(--fg)}
.tr-mt td{position:relative;height:48px;padding:0 var(--sp-1);text-align:center;border-radius:var(--r-sm);background:var(--sf-2)}
.tr-mt td.up{color:var(--pos)} .tr-mt td.dn{color:var(--neg)} .tr-mt td.mu{color:var(--dim);background:color-mix(in srgb,var(--sf-2) 45%,transparent)} .tr-mt tbody td:hover{background:var(--sf-3)}
.tr-mt td.yr{font-weight:500;background:var(--neu-t)} .tr-mt td>.tr-strip{bottom:var(--sp-2);height:1px;border-radius:0}
.tr-mt td .tr-strip{left:0}
.tr-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.tr-in{display:flex;flex-direction:column}
.tr-ir{display:grid;grid-template-columns:minmax(56px,1fr) minmax(0,280px) 64px 96px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;font-size:13px}
.tr-ir+.tr-ir{box-shadow:inset 0 1px 0 var(--line)}
.tr-ir .s{font-weight:500}
/* Share as a row of separate ticks, kept quiet: 1.5px tick on a 4px rhythm, 10px high, text colour at 55%; the filled part always ends on a whole tick */
.cm-r .tk,.tr-ir .tk,.ca-r .tk,.rq-row .tk{position:relative;height:10px;width:100%;width:round(down,100%,4px);background:repeating-linear-gradient(90deg,var(--ch-tag) 0 1.5px,transparent 1.5px 4px)}
.cm-r .tk i,.tr-ir .tk i,.ca-r .tk i,.rq-row .tk i{position:absolute;left:0;top:0;bottom:0;width:max(4px,calc(var(--f) * 100%));width:max(4px,round(nearest,calc(var(--f) * 100%),4px));background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 55%,transparent) 0 1.5px,transparent 1.5px 4px)}
.tr-ir .sh{text-align:right;color:var(--muted)} .tr-ir .p{text-align:right}
.tr-ir .up,.tr-tt .up{color:var(--pos)} .tr-ir .dn,.tr-tt .dn{color:var(--neg)}
.tr-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-8)}
.tr-st h4{margin:0 0 var(--sp-1);font-size:12px;font-weight:500;color:var(--dim)}
.tr-sr{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;font-size:13px}
.tr-sr+.tr-sr{box-shadow:inset 0 1px 0 var(--line)}
.tr-sr span{color:var(--muted)} .tr-sr b{font-weight:500;text-align:right}
.tr-tt{width:100%;min-width:820px;border-collapse:collapse;font-size:13px}
.tr-tt th{font:var(--t-micro);color:var(--dim);text-align:left;padding:0 var(--sp-2) var(--sp-2)}
.tr-tt td{height:40px;padding:0 var(--sp-2);border-top:1px solid var(--line);white-space:nowrap} .tr-tt tbody tr:hover>td{background:var(--hover)}
.tr-tt tr>:first-child{padding-left:0} .tr-tt tr>:last-child{padding-right:0}
.tr-tt .r{text-align:right} .tr-tt .mu{color:var(--dim)} .tr-tt b{font-weight:500}
.tr-more{display:flex;justify-content:flex-start}
.tr-ai{display:flex;flex-direction:column} .tr-ai .tr-sr b{font-variant-numeric:normal}
.tr-fr{display:flex;flex-direction:column}
.tr-fi{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0}
.tr-fi+.tr-fi{box-shadow:inset 0 1px 0 var(--line)}
.tr-rule{margin:0;font-size:13px;color:var(--muted);background:var(--sf-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.tr-fi b{display:block;font-size:14px;font-weight:500}

@media (max-width:1000px){ .tr-2,.tr-st{grid-template-columns:1fr} }
@media (max-width:640px){ .tr-ir{grid-template-columns:80px minmax(0,1fr) 48px 84px;gap:var(--sp-3)} }
/* v344: two cards side by side inside a section (Risk: Drawdown + Daily returns; Trading: Instruments + Long & short).
   Two-up above 1240px like the top row, stacked below; the cards in a row share one height */
.tr-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5) var(--sp-4);align-items:stretch}
/* v361: pairs switch on the section's own width (945px at a 1241px window), so a zoomed or embedded view with room for two still gets two */
.sec:has(> .tr-pair){container-type:inline-size}
@container (min-width:940px){ .tr-pair{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Risk: both headers as tall as Drawdown's (its Max / Now block), so the two plots start level */
.tr-pair.rk .tr-ch{min-height:47px}
/* v364: both Risk cards end in a stat row; it sits at the bottom so the two rows line up */
.tr-pair.rk .tr-card{display:flex;flex-direction:column} .tr-pair.rk .tr-sx{margin-top:auto}
/* Long & short: per side the Instruments row (share of trades as ticks, net result), then its trade figures as hairline rows */
.tr-pair .tr-ir{grid-template-columns:minmax(88px,1fr) minmax(0,280px) 64px 96px}
@media (max-width:640px){ .tr-pair .tr-ir{grid-template-columns:80px minmax(0,1fr) 48px 84px} }
.tr-ls{display:flex;flex-direction:column}
.tr-ls>*+*{box-shadow:inset 0 1px 0 var(--line)}
.tr-ls>.tr-ir:not(:first-child){margin-top:var(--sp-4)}
.tr-ls .tr-sr b.up{color:var(--pos)} .tr-ls .tr-sr b.dn{color:var(--neg)}
/* A compact stat row under a chart: small grey label over the value, hairline between the figures, like the KPI strip */
.tr-sx{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));row-gap:var(--sp-4);padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--line)}
.tr-sx>div{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);padding:0 var(--sp-3);min-width:0}
.tr-sx>div:first-child{padding-left:0} .tr-sx>div:last-child{padding-right:0}
.tr-sx>div+div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.tr-sx small{font:var(--t-label);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-sx b{font:500 14px/var(--lh-tight) var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-sx b em{font-style:normal;font-weight:400;font-size:12px;color:var(--dim);margin-left:var(--sp-1)}
@media (max-width:640px){ .tr-sx{grid-template-columns:repeat(2,minmax(0,1fr))} .tr-sx>div:nth-child(2n+1){padding-left:0} .tr-sx>div:nth-child(2n+1)::before{display:none} }
/* Daily returns histogram: 0.25% bands with an overflow band at each end; the x-axis labels sit on the band edges */
.tr-hx{position:relative;display:block;height:14px}
/* v438 Monthly returns chart: green gains, red losses (the table's colours); the assessment lines sit in a row under the bars */
svg rect.b.pos{fill:color-mix(in srgb,var(--pos) 70%,transparent)}
.tr-mbs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));height:8px;margin-top:var(--sp-1)} .tr-mbs span{position:relative;display:block;margin:0 1px} .tr-mbs .tr-strip{bottom:2px;height:2px}
.tr-mb .hc-xl.tr-hx{margin-top:var(--sp-2)} .tr-mb .hc-tip .up{color:var(--pos)} .tr-mb .hc-tip .dn{color:var(--neg)}
.hc-tip div.tr-mba{color:var(--muted);font-size:11px}
.tr-hx span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
@media (max-width:640px){ .tr-hx span.h{visibility:hidden} }
svg.tr-hs rect.b{transition:opacity .15s var(--ease)}
svg.tr-hs.hov rect.b{opacity:.35} svg.tr-hs.hov rect.b.on{opacity:1}
.tr-hsb{fill:var(--ch-band);display:none}
/* side by side the histogram stays 92px so the card ends level with Drawdown; stacked it gets the room back */
@container (max-width:939px){ svg.tr-hs{height:140px!important} }
/* a full-width card on a phone: three of the five dates, so none wraps */
@media (max-width:640px){ .tr-xl5 span{white-space:nowrap} .tr-xl5 span:nth-child(2n){display:none} }
svg.tr-hs.hov .tr-hsb{display:block}
/* Open positions and Cash flows: the trade table, with a total row; cash flows has four columns so it needs less width */
.tr-tt tfoot td{font-weight:500}
.tr-tt .sub{color:var(--dim);margin-left:var(--sp-2)}
.tr-tt.cf{min-width:560px}
/* a fact line keeps each fact whole: a signed amount never breaks after its sign */
.tr-ch p .nw{white-space:nowrap}
/* on a phone the four columns fit without scrolling; the added buying power is in Balances right above */
@media (max-width:1000px){ .tr-tt.cf{min-width:0} .tr-tt.cf td:nth-child(2){white-space:normal} .tr-tt.cf th .w{display:none} }
@media (max-width:640px){ .tr-tt.cf .sub{display:none} }
.hb{padding:var(--sp-6) var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
.hb .sub2{margin-top:var(--sp-3)}
.hb .sub2{display:flex;gap:var(--sp-2);align-items:baseline;font-size:13px;color:var(--muted)} .hb .sub2 #trG.tw{margin-right:calc(var(--sp-1) * -1)} .hb .sub2 .up{color:var(--pos);font-weight:500} .hb .sub2 .dn{color:var(--neg);font-weight:500}
.hb .hc-tip{min-width:200px}
.hb .hc-tip i{display:inline-block;width:10px;height:1.5px;margin-right:var(--sp-2);vertical-align:middle}
.hb .hc-tip .tot{margin-top:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid var(--line);font-weight:500}
/* Track record key figures: one strip of six cells split by inset 1px dividers, left-aligned like every stat cell.
   Label 12px dim, value 16px/600 neutral (the sign carries direction), sub-line 11px dim on one line */
.kp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:var(--sp-5);padding:var(--sp-6) var(--sp-2)}
.kp-c{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--sp-1);padding:0 var(--sp-5);min-width:0}
.kp-c::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.kp-c:nth-child(6n+1)::before{display:none}
.kp-c small,.kp-c b{white-space:nowrap}
.kp-c b.up,.kp-c b.dn{color:var(--fg)}
.kp-c span{font:400 11px/var(--lh-tight) var(--f-body);color:var(--dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1359.98px){.kp{grid-template-columns:repeat(3,minmax(0,1fr))}.kp-c:nth-child(6n+1)::before{display:block}.kp-c:nth-child(3n+1)::before{display:none}}
@media (max-width:640px){.kp{grid-template-columns:repeat(2,minmax(0,1fr))}.kp-c:nth-child(3n+1)::before{display:block}.kp-c:nth-child(2n+1)::before{display:none}}
/* Row sub-lines, one rule everywhere: the second line under a row title is 12px muted, 2px under it */
.st-row small,.np-r small,.rq-row .lbl small,.ax-ev .k small,.asl-r .nm small,.tr-fi small,.ss-r small,.acc-nm span,.rf-opt small{display:block;margin:var(--sp-hair) 0 0;font:var(--t-label);color:var(--muted)}
/* Stat cells, one pattern for every figure row: 12px dim label over a 16px/600 neutral value, 4px apart */
.kp-c small,.rc-k small,.an-stats small,.ax-tile small,.rp-cnt small{display:block;margin:0;font:var(--t-label);color:var(--dim)}
.kp-c b,.rc-k b,.an-stats b,.ax-tile b,.rp-cnt b{display:block;font:600 16px/var(--lh-tight) var(--f-body);letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums}
.rc-k>div{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);padding:0 var(--sp-4);min-width:0}
.rc-k>div:first-child{padding-left:0}
.rc-k>div+div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
@media (max-width:640px){ .rc-k{row-gap:var(--sp-4)} .rc-k>div:nth-child(2n+1){padding-left:0} .rc-k>div:nth-child(2n+1)::before{display:none} }
/* Home: chart with next steps to its right; account overview under the tiles */
.hm3-top{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--sp-4) var(--sp-8);align-items:stretch}
.hm3-top > *{min-width:0}
/* the hero chart sits on the canvas, unframed; Toward the desk beside it keeps its surface */
.hm3-top .tr-main{background:none;padding:var(--sp-2) 0 0}
.hn{padding:var(--sp-6);display:flex;flex-direction:column;gap:0}
.hn h3{margin:0 0 var(--sp-2);font:var(--t-title)}
.hn-i{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-4) 0}
.hn-i+.hn-i{border-top:1px solid var(--line)}
.hn-i b{font-size:14px;font-weight:500}
.hn-i p{margin:0;font-size:13px;line-height:var(--lh-prose);color:var(--muted)}
.hn-a{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1)}
.hn .hn-none{margin-top:var(--sp-3)}
@media (max-width:1240px){ .hm3-top{grid-template-columns:1fr} }
.hn-u{margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-hair)}
.hn-uh{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.hn-uh h4{margin:0;font:var(--t-label);font-weight:500;color:var(--dim)}
.hn-uh .lnk{font-size:13px}
.hn-n{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-hair);padding:var(--sp-3) var(--sp-3);margin:0 calc(var(--sp-3) * -1);border:0;border-radius:var(--r-sm);background:none;text-align:left;font:inherit;color:var(--fg);cursor:pointer}
.hn-n:hover{background:var(--hover)}
.hn-n b{font-size:13px;font-weight:500}
.hn-n small{font-size:12px;color:var(--dim)}
/* Prototype menu in the topbar, same surface as the account menu */
.pt-btn{gap:var(--sp-2);padding:0 var(--sp-2) 0 var(--sp-3)}
.pt-btn .pt-v{font-size:13px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.pop.pt-pop{width:260px;max-height:calc(100vh - 96px);overflow-y:auto;padding:var(--sp-2)}
.pt-pop[hidden]{display:none!important}
.pt-pop .pt-h{margin:var(--sp-3) var(--sp-3) var(--sp-1);font:var(--t-micro);color:var(--dim)}
.pt-pop .who+.pt-h{margin-top:var(--sp-1)}
.pt-pop button{padding:var(--sp-2) var(--sp-3);font-size:13px}
.pt-pop button.on{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);color:var(--fg)}
.pt-pop button.on::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.pt-pop .pt-llm{display:block;margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-1);border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-decoration:none}
.pt-pop .pt-llm:hover{color:var(--fg)}
/* v437: the DDQ Lab artifact was deleted; the live-LLM test now only exists on Vercel, where split.py shows this link */
.pt-pop .pt-llm[hidden]{display:none}
.pt-btn .pt-i{display:none}
/* Phones: an icon-only pill, the menu full width under the topbar */
@media (max-width:720px){ .pt-btn{width:var(--h-lg);padding:0;gap:0;justify-content:center} .pt-btn .pt-v,.pt-btn .caret{display:none} .pt-btn .pt-i{display:grid;place-items:center;color:var(--muted)} .pt-btn .pt-i svg{width:16px;height:16px} .pop.pt-pop{position:fixed;top:var(--pt-top,72px);left:12px;right:12px;width:auto;max-height:calc(100vh - var(--pt-top,72px) - 12px)} }
/* Help & support: a menu at the bottom of the sidebar, same surface as the topbar menus; it opens upwards */
.side-help{position:relative;z-index:36;margin-top:auto}
.side-help .pop.hp-pop{left:0;right:0;top:auto;bottom:calc(100% + 8px);width:auto;padding:var(--sp-2)}
.hp-pop[hidden]{display:none!important}
.hp-pop button{padding:var(--sp-2) var(--sp-3);font-size:13px}
@media (max-width:820px){ .side-help{margin-top:0} .side-help .hp-l{display:none} .side-help .pop.hp-pop{position:fixed;top:var(--hp-top,64px);bottom:auto;left:12px;right:12px;width:auto} }

/* How it works: drawer body. Kit tokens only; fills are subtle tints of the tokens and of the accent.
   Everything is scoped under .hw-doc so it beats the kit's ".dw-body p / h3" defaults. No motion, no JS.
   Dynamic hooks: .hw-dd wraps the drawdown limit (10%), .hw-bp wraps the buying-power multiple ("ten times"). */

/* rhythm: tight inside a chapter, generous between chapters */
.hw-doc{padding-bottom:var(--sp-1)}
.hw-doc p{margin:var(--sp-3) 0 0;font-size:14px;line-height:var(--lh-prose);color:var(--muted);text-wrap:pretty} /* v360: body grey, so the white headings, lede and key terms carry the hierarchy */
.hw-doc .hw-lede{margin:var(--sp-hair) 0 0;font:500 16px/var(--lh-prose) var(--f-body);color:var(--fg);text-wrap:balance}
.hw-doc .hw-stand{margin-top:var(--sp-3);font-size:14px;line-height:var(--lh-prose)}
.hw-doc .hw-h{margin:var(--sp-12) 0 0;font:600 14px/var(--lh-tight) var(--f-body);color:var(--fg);text-wrap:balance}
.hw-doc .hw-h + p{margin-top:var(--sp-2)}
.hw-em{color:var(--fg);font-weight:500}

/* the pull-out: one neutral well */
.hw-pull{margin:var(--sp-12) 0 0;padding:var(--sp-6);border-radius:var(--r-md);background:var(--sf-2)}
.hw-doc .hw-pull .hw-h{margin:0;font-size:14px;line-height:var(--lh-tight)}
.hw-pull .hw-h span{color:var(--fg)}
.hw-doc .hw-pull p{margin-top:var(--sp-3)}

/* the four criteria on one 365-day scale; day 90 sits at 90/365 */
.hw-fig{--hw-k:124px;--hw-gap:14px;--hw-d90:24.66%;margin:var(--sp-4) 0 0;padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2)}
.hw-chart{position:relative}
.hw-chart::after{content:"";position:absolute;top:-4px;bottom:0;width:1px;left:calc(var(--hw-k) + var(--hw-gap) + (100% - var(--hw-k) - var(--hw-gap)) * .2466);background:var(--ch-ref);pointer-events:none}
.hw-crit{display:grid;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.hw-crit li{display:grid;grid-template-columns:var(--hw-k) 1fr;column-gap:var(--hw-gap);align-items:center}
.hw-crit-k{font-size:13px;font-weight:500;line-height:var(--lh-tight);color:var(--fg)}
.hw-crit-k small{display:block;margin-top:var(--sp-hair);font-size:12px;font-weight:400;line-height:var(--lh-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.hw-track{position:relative;height:6px}
.hw-seg{position:absolute;top:0;bottom:0;border-radius:var(--r-xs)}
.hw-seg-pre{left:0;width:var(--hw-d90);background:var(--fg);opacity:.6}
.hw-seg-post{left:calc(var(--hw-d90) + 3px);right:0}
.hw-seg-all{left:0;right:0;background:var(--fg);opacity:.26}
.hw-seg-win{background:var(--fg);opacity:.12}
.hw-seg-ret{background:var(--fg)}
.hw-axis{display:grid;grid-template-columns:var(--hw-k) 1fr;column-gap:var(--hw-gap);margin-top:var(--sp-3)}
.hw-axis-t{position:relative;height:16px;font-size:11px;line-height:16px;color:var(--dim);font-variant-numeric:tabular-nums}
.hw-axis-t span{position:absolute;top:0;white-space:nowrap}
.hw-at1{left:0}
.hw-at90{left:calc(var(--hw-d90) + 6px);color:var(--fg);font-weight:500}
.hw-at365{right:0}

/* outcomes: text-only pills, the product badge (hue text on its own tint) */
.hw-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 0;padding:0;list-style:none}

/* one worked example, set like a specimen, with a gauge on a 0 to 3.5x scale */
.hw-spec{margin:var(--sp-3) 0 0;padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2)}
.hw-spec-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:500;color:var(--fg)}
.hw-spec-h span{font-size:12px;font-weight:400;color:var(--muted)}
.hw-spec-g{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:var(--sp-3);margin-top:var(--sp-3)}
.hw-spec-g small{display:block;font-size:12px;color:var(--muted)}
.hw-spec-g strong{display:block;margin-top:var(--sp-hair);font:600 16px/var(--lh-tight) var(--f-body);color:var(--fg);font-variant-numeric:tabular-nums}
.hw-key{display:inline-block;vertical-align:middle;margin:calc(var(--sp-hair) * -1) var(--sp-2) 0 0}
.hw-key-tick{width:2px;height:10px;border-radius:var(--r-xs);background:var(--fg)}
.hw-key-bar{width:10px;height:4px;border-radius:var(--r-xs);background:var(--muted)}
.hw-gauge{position:relative;height:6px;margin-top:var(--sp-4);border-radius:var(--r-xs);background:var(--neu-t)}
.hw-gauge i{position:absolute;left:0;top:0;bottom:0;width:77.14%;border-radius:var(--r-xs);background:var(--muted)}
.hw-gauge b{position:absolute;left:85.71%;top:-4px;width:2px;height:14px;margin-left:-1px;border-radius:var(--r-xs);background:var(--fg)}

/* the desk sequence: the real status labels on a quiet rail */
.hw-steps{margin:var(--sp-4) 0 0;padding:0;list-style:none}
.hw-steps li{padding:var(--sp-3) 0}
.hw-steps li+li{border-top:1px solid var(--line)}
.hw-step-k{display:block;font:500 14px/var(--lh-ui) var(--f-body);color:var(--fg)}
.hw-step-d{display:block;margin-top:var(--sp-hair);font-size:14px;line-height:var(--lh-prose);color:var(--muted)}

.hw-doc .hw-turn{margin-top:var(--sp-5);font:500 16px/var(--lh-prose) var(--f-body);color:var(--fg)}

.hw-doc .hw-fine{margin-top:var(--sp-12);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:13px;line-height:var(--lh-prose)}

@media (max-width:420px){
  .hw-pull{padding:var(--sp-5) var(--sp-4)}
  .hw-fig{--hw-k:100px;--hw-gap:12px;padding:var(--sp-4) var(--sp-3) var(--sp-3)}
}
/* Touch: at 820px and below every control keeps a 36px hit target */
@media (max-width:820px){
  /* phone stack: nav row, top bar, page; only the page row grows (the desktop rule above would stretch the top bar on short pages) */
  .app,.app.focus{grid-template-rows:auto auto 1fr}
  .btn,.btn.sm,.pillbtn,.qb,.nav button,.menu button,.ap-chips button,.ax-chips button{min-height:var(--h-lg)}
  .qb.primary{height:var(--h-lg)}
  .ax-tabs button,.ax-chips button,.seg button,.seg[aria-label="Time range"] button{height:var(--h-lg);padding:0 var(--sp-3)}
  .ax-tabs{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none} .ax-tabs::-webkit-scrollbar{display:none}
  .ib,.kebab,.dw-x,.tb-chev,.dq-rsb,.pw-eye{width:var(--h-lg);height:var(--h-lg)}
  :root{--t-hero:600 28px/1 var(--f-display)}
  .tr-card,.ad-sec,.dk-v{padding:var(--sp-5)} .sec>.tr-card{padding-inline:var(--sp-5)} .au-card{padding:var(--sp-6) var(--sp-5)}
  .sw input{inset:-9px -2px}
}
/* Phones: the strategy identity (when shown) takes its own full-width row under the tools (the tools stay put on row 1);
   drawer timestamps drop under the title; account names wrap; the nav strip goes text-only so Help stays on screen;
   the onboarding chat header puts its title on row 1 and progress + actions on row 2 */
@media (max-width:640px){
  .top{flex-wrap:wrap;row-gap:var(--sp-1)} .top .tools{margin-left:auto}
  .nav .nv-l{display:none} .nav .nv-s{display:inline}
  .dw-h{flex-wrap:wrap;row-gap:var(--sp-1)} .dw-ts{order:3;flex-basis:100%}
  .acc-nm b{white-space:normal}
  .side>.nav button svg{display:none}
  .side>.nav button[data-nav^="p-"] svg{display:block}
  .dq-chat>.dq-bar{flex-wrap:wrap;row-gap:var(--sp-3)} .dq-chat>.dq-bar .dq-who{flex:1 1 calc(100% - var(--sp-12))} .dq-chat>.dq-bar .dq-prog{margin-left:0;margin-right:auto} .dq-chat>.dq-bar .dqp-pop{right:auto;left:0}
}
/* v330: phones keep the tighter card padding; the extra air is for desktop */
@media (max-width:640px){.tr-card,.hn,.ad-sec,.acc-card{padding:var(--sp-5)} .kp{padding:var(--sp-4) var(--sp-1)} .hero-r{padding:var(--sp-3)} .ss-r{padding:var(--sp-4) 0} .tr-mt td{height:var(--h-lg)}}
/* ===== Assessment summary (v394; the Assessment summary of v336–v393). The result card above every report tab ends with its
   row and Open summary, which opens the reading drawer: a fixed header (title, strategy · assessment, the Generated stamp, Download PDF,
   close) and one scrolling body in a single column, without a chart, a section nav or a footer ===== */
.as-row{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:nowrap;margin-top:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.as-row-t{display:flex;flex-direction:column;gap:var(--sp-hair);min-width:0} .as-row .btn{flex:none}
.as-meta{font-size:13px;line-height:var(--lh-ui);color:var(--muted);font-variant-numeric:tabular-nums}
/* v431: booking the risk interview (a Calendly placeholder): the meeting line, a row of day tiles and a grid of times; the chosen one in
   the brand blue tint. Fill only */
.iv-hd{display:flex;flex-direction:column;gap:var(--sp-1)} .modal .iv-note{margin:0;font:var(--t-body);color:var(--fg-2)} .iv-hd b{font:500 15px/var(--lh-ui) var(--f-body);color:var(--fg)} .iv-hd span{font:var(--t-label);color:var(--muted)}
.iv-nav{display:flex;align-items:center;gap:var(--sp-2)} .iv-nav .dw-sub{margin:0;margin-right:auto} .iv-span{font:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums} .iv-nav .ib:disabled{opacity:.35;cursor:default}
.iv-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2)}
.iv-days button,.iv-slots button{border:0;border-radius:var(--r-sm);background:var(--neu-t);color:var(--fg-2);cursor:pointer;font:500 13px/1 var(--f-body);font-variant-numeric:tabular-nums}
.iv-days button{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2) 0} .iv-days small{font:var(--t-label);color:var(--muted)}
.iv-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--sp-2)} .iv-slots button{height:var(--h-md)}
.iv-days button:hover,.iv-slots button:hover{background:var(--neu-h);color:var(--fg)}
.iv-slots button.now{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:auto;min-height:var(--h-md);padding:var(--sp-1) 0;cursor:default;background:var(--sf-1);color:var(--muted)} .iv-slots button.now small{font:var(--t-label);font-size:10px}
.iv-days button.on,.iv-slots button.on{background:var(--accent-t);color:var(--fg)} .iv-days button.on small{color:var(--fg-2)}
.iv-days button:focus-visible,.iv-slots button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Drawer: 800px, narrower than a document page so the lines stay readable. Download PDF sits in the header next to close; the body
   has no padding of its own (the text sets it) */
.modal.asum{width:min(800px,100%)}
.as-hacts{flex:none;display:flex;align-items:center;gap:var(--sp-2)}
.modal.asum>.dw-body{padding:0;gap:0}
.modal.asum>.dw-body>.as-doc{flex:1 0 auto}
/* v425: one AI-written text. The opening paragraph at 16px, then sections 32px apart, each under a small muted heading; prose at
   15px/1.65, at most 68ch. Fill only, no rules, tables or badges */
.as-doc{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-8) var(--sp-10) var(--sp-12);min-width:0}
.as-s{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.as-s>h4{margin:0;font:500 13px/var(--lh-ui) var(--f-body);color:var(--muted)}
.modal .as-s>p{margin:0;font:400 15px/1.65 var(--f-body);color:var(--fg-2);text-wrap:pretty}
.modal .as-s.lead>p{font-size:16px;line-height:1.6;color:var(--fg)}
.modal .as-foot{margin:0;font:var(--t-label);color:var(--dim)}
/* generating (v430): one line in the body's column, 14px, dim, with a lighter band (the foreground colour, a touch of the brand blue)
   running through the letters from left to right every 1.6 s; it crossfades between its three texts */
.as-gen{display:flex;flex-direction:column;min-width:0}
.modal .as-shine{margin:0;align-self:flex-start;font:var(--t-ui);color:var(--dim);background:linear-gradient(90deg,var(--dim) 0%,var(--dim) 38%,color-mix(in srgb,var(--fg) 88%,var(--accent)) 50%,var(--dim) 62%,var(--dim) 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:asShine 1.6s linear infinite;transition:opacity .18s var(--ease)}
.modal .as-shine.out{opacity:0}
@keyframes asShine{from{background-position:100% 0}to{background-position:0 0}}
/* words stay inline, so the lines break exactly as in the finished text; the heading also rises 4px */
.as-w{animation:asW .55s cubic-bezier(.2,.7,.2,1) both} .as-in{animation:asIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes asW{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
@keyframes asIn{from{opacity:0;filter:blur(8px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){ .as-w,.as-in{animation:none} .modal .as-shine{animation:none;-webkit-text-fill-color:currentColor;background:none;transition:none} }
@media (max-width:820px){ .modal.asum{width:100%;border-radius:0} .as-doc{padding:var(--sp-6) var(--sp-4) var(--sp-10)} }
@media (max-width:640px){ .modal.asum .as-hacts{order:4;flex-basis:100%} }
/* Download PDF: print only the summary drawer, A4, one column, in the app's own colours, without blur or shadows; the header
   controls hidden. Screen styles are untouched */
@media print{
  /* only while the review is open: other pages print as before */
  @page asum{size:A4;margin:0}
  html:has(.modal.asum),body:has(.modal.asum){height:auto!important;overflow:visible!important;background:var(--bg)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:has(.modal.asum),body:has(.modal.asum) #modal,#modal .modal.asum{page:asum}
  body:has(.modal.asum)>*:not(#modal){display:none!important}
  body:has(.modal.asum) #modal{position:static;display:block;padding:0;background:var(--bg);animation:none}
  #modal .modal.asum{display:block;width:auto;height:auto;overflow:visible;padding:12mm 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:0;box-shadow:none;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .modal.asum>.dw-h{min-height:0;padding:0 16mm 5mm;border-bottom:1px solid var(--line)}
  .modal.asum .as-hacts,.modal.asum .dw-x{display:none!important}
  .modal.asum>.dw-body{overflow:visible;flex:none;display:block}
  .as-doc{padding:8mm 16mm 0}
  /* a heading stays with its first paragraph; a paragraph is not split */
  .as-s>h4{break-after:avoid} .as-s>p{break-inside:avoid}
}
/* Intake: on desktop the page never scrolls; the intake card fills the space under the top bar and only the conversation scrolls */
@media (min-width:821px){ .main:has(.ddq){display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--sp-6)} .main:has(.ddq) .ddq{flex:1 1 auto;height:auto;min-height:0} }
/* Intake typing: three soft dots while the assistant 'thinks'; extras stay hidden until the reply has streamed in */
.dq-dots{display:inline-flex;gap:4px;align-items:center;height:22px} .dq-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.35;animation:dqDot 1s ease-in-out infinite}
.dq-dots i:nth-child(2){animation-delay:.15s} .dq-dots i:nth-child(3){animation-delay:.3s}
@keyframes dqDot{0%,100%{opacity:.25}50%{opacity:.9}}
#msgs .msg.typing .dq-opts,#msgs .msg.typing~.quick,#msgs .msg.typing .bub .quick{visibility:hidden}
/* Charts (v351): a minimal dot matrix only behind the two hero charts (the Home track record and the assessment chart). Tiny dots that fade out
   well before the edges; a ::before in the plot's own grid cell, so it matches the plot area exactly and sits under the line */
.tr-main .hc-grid>svg,#hcBox .hc-grid>svg{grid-column:1;grid-row:1}
.tr-main .hc-grid:has(>svg)::before,#hcBox .hc-grid:has(>svg)::before{content:"";grid-column:1;grid-row:1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.13) .45px,transparent .8px);background-size:6px 6px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 55% 55%,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);mask-image:radial-gradient(ellipse 55% 60% at 55% 55%,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%)}
/* Sign-in screens (v353): fields are the content here, so they are larger than drawer fields (44px, 14px text, 8px radius) and line up with
   the full-width button. A disabled primary is a quiet neutral block everywhere, never a faded white pill */
.au-card .au-fields{gap:var(--sp-5)}
.au-card .ap-f .dw-in,.au-card .ap-f .dw-sel{height:44px;padding:0 var(--sp-4);font-size:14px;border-radius:var(--r-md)}
.au-card .pw-wrap .dw-in{padding-right:calc(var(--h-sm) + var(--sp-4))} .au-card .pw-eye{right:var(--sp-2)}
.au-card .au-btn{height:44px;font-size:14px}
.btn.primary:disabled,.qb.primary:disabled{opacity:1;background:var(--neu-t);color:var(--dim)}
/* Links (v355): white, medium weight, underline on hover; secondary links (forgot password, legal, how we protect it) are grey and turn white.
   Bridge Blue stays for the current step and the running assessment only */
.au-forgot,.conf-more,.au-legal .lnk,.dw-legal .lnk{color:var(--muted);font-weight:400} .au-forgot:hover,.conf-more:hover,.au-legal .lnk:hover,.dw-legal .lnk:hover{color:var(--fg)}
/* Toward the desk show/hide (v357): the column slides out to the right and the chart takes the full width; a pill in the chart header brings it back */
.hm3-top{transition:grid-template-columns .25s var(--ease),column-gap .25s var(--ease)}
.td-side{transition:opacity .2s var(--ease),transform .25s var(--ease)}
.hm3-top.td-off{grid-template-columns:minmax(0,1fr) 0px;column-gap:0}
.hm3-top.td-off .td-side{opacity:0;transform:translateX(24px);pointer-events:none;visibility:hidden;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
/* v359: the column keeps its own 280px width while the track animates, so its text never re-wraps mid-slide (that made the row
   jump when it came back); hidden it takes no height, and the container clips it sideways only */
@media (min-width:1241px){ .hm3-top{overflow-x:clip;overflow-clip-margin:6px} .hm3-top .td-side{width:280px;justify-self:start} .hm3-top.td-off .td-side{height:0;align-self:start} }
.td-sh-a{display:flex;align-items:center;gap:var(--sp-2)}
.td-x{width:var(--h-sm);height:var(--h-sm);display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:none;color:var(--dim);cursor:pointer}
.td-x:hover{background:var(--hover);color:var(--fg)} .td-x svg{width:16px;height:16px}
.td-open{display:none;align-items:center;gap:var(--sp-2);height:var(--h-sm);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:var(--neu-t);color:var(--fg-2);font:500 12px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.td-open:hover{background:var(--neu-h);color:var(--fg)}
.td-open i{width:2px;height:12px;border-radius:1px;background:var(--accent)}
.hm3-top.td-off .td-open{display:inline-flex}
@media (max-width:1240px){ .hm3-top.td-off{grid-template-columns:1fr} .hm3-top.td-off .td-side{display:none} }
@media (prefers-reduced-motion:reduce){ .hm3-top,.td-side,.hm3-top.td-off .td-side{transition:none} }
/* Current assessment (v360): criteria tick bars beside the running curve */
.ca .card-h{align-items:flex-start;margin-bottom:var(--sp-6)} .ca .card-h p{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted)}
.ca-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-10,40px);align-items:end}
.ca-m{display:grid;grid-template-columns:112px minmax(0,1fr) max-content;gap:var(--sp-4)}
/* one shared grid: every bar is as long, and each value sits right after its bar (v360b) */
.ca-r{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.ca-r .k{font:var(--t-ui);font-weight:400;color:var(--muted)}
.ca-r .v{text-align:left;font:500 13px/1.3 var(--f-body);color:var(--fg);white-space:nowrap} .ca-r .v .t3{color:var(--dim);font-weight:400}
.ca-r .v .up{color:var(--pos)} .ca-r .v .dn{color:var(--neg)}
.ca-r .tk.now i::after{content:"";position:absolute;right:2.5px;top:0;bottom:0;width:1.5px;background:var(--accent)}
.ca-cv{position:relative}
.ca-ch .hc-xl{margin-top:var(--sp-2)}
@media (max-width:1100px){ .ca-b{grid-template-columns:1fr;gap:var(--sp-6)} }
@media (max-width:640px){ .ca .card-h{flex-wrap:wrap} .ca-m{display:flex;flex-direction:column} .ca-r{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4)} .ca-r .tk{grid-column:1/-1;grid-row:2} }
/* Trades card (v358): History | Open positions tabs at the right of the header */
.tr-tabs{flex:none;align-self:flex-start} .tr-tabs .cnt{margin-left:var(--sp-1)}
/* Trade history filters (v368) */
.tr-flt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin:var(--sp-5) 0 var(--sp-2)}
.tr-fsel{appearance:none;-webkit-appearance:none;height:var(--h-sm);padding:0 28px 0 var(--sp-3);border:0;border-radius:var(--r-sm);color:var(--fg);font:500 12px/1 var(--f-body);cursor:pointer;
background:var(--neu-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/12px}
.tr-fsel:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)} .tr-fsel option{color:#000}
.tr-freset{font-size:12px} #trTrades .tr-none{margin:var(--sp-4) 0 0}
/* ===== Partner environment (spec: partner/design.md). Prefix pa- only; nothing here touches a trader selector ===== */
:root{--ser-0:color-mix(in srgb,var(--fg) 45%,transparent);--ser-3:#8f86d9}
/* series ink for the group colours: lines, bars, legend swatches, tags and dots */
svg .ln.ser-0{stroke:var(--ser-0)} svg .ln.ser-3{stroke:var(--ser-3)}
svg rect.b.ser-0{fill:color-mix(in srgb,var(--fg) 30%,transparent)} svg rect.b.ser-1{fill:color-mix(in srgb,var(--ser-1) 50%,transparent)}
svg rect.b.ser-2{fill:color-mix(in srgb,var(--ser-2) 50%,transparent)} svg rect.b.ser-3{fill:color-mix(in srgb,var(--ser-3) 50%,transparent)}
/* accrued money (not yet settled) is drawn light with a dashed edge; solid fills are settled money only */
svg rect.b.pa-acc{fill:color-mix(in srgb,var(--accent) 18%,transparent);stroke:color-mix(in srgb,var(--accent) 80%,transparent);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.legend i.ser-0{background:var(--ser-0)} .legend i.ser-3{background:var(--ser-3)}
.ch-tag.ser-3{background:color-mix(in srgb,var(--ser-3) 18%,transparent);color:color-mix(in srgb,var(--ser-3) 80%,var(--fg))}
.hc-dot.ser-0{background:var(--ser-0)} .hc-dot.ser-3{background:var(--ser-3)}
/* square legend keys for bars (lines keep the 10x1.5 key) */
.legend i.pa-sq,.hc-tip i.pa-sq{width:8px;height:8px;border-radius:2px;vertical-align:-1px}
i.pa-sq.up{background:color-mix(in srgb,var(--fg) 55%,transparent)} i.pa-sq.lo{background:color-mix(in srgb,var(--fg) 35%,transparent)}
i.pa-sq.dn{background:color-mix(in srgb,var(--neg) 75%,transparent)} i.pa-sq.acc{background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent)}
i.pa-sq.ser-0{background:color-mix(in srgb,var(--fg) 30%,transparent)} i.pa-sq.ser-1{background:color-mix(in srgb,var(--ser-1) 50%,transparent)}
i.pa-sq.ser-2{background:color-mix(in srgb,var(--ser-2) 50%,transparent)} i.pa-sq.ser-3{background:color-mix(in srgb,var(--ser-3) 50%,transparent)}
/* bar charts: the hovered month stays at full ink with a faint slot behind it */
svg.pa-bars g.pa-m{transition:opacity .15s var(--ease)}
svg.pa-bars.hov g.pa-m{opacity:.35} svg.pa-bars.hov g.pa-m.on{opacity:1}
.pa-hb{fill:var(--ch-band);display:none} svg.pa-bars.hov .pa-hb{display:block}
/* the "Partner" label top left in the sidebar brand: orientation, not a control */
.pa-env{font:var(--t-micro);color:var(--muted);letter-spacing:.02em;margin-left:calc(var(--sp-1) * -1);align-self:flex-end;padding-bottom:5px;white-space:nowrap}
/* the environment segment in the profile pop-up, and the partner ID line */
.pop .pa-seg{margin:var(--sp-3) 0 0}
.pop .pa-seg .seg.ap-seg button{height:var(--h-sm);font-size:13px}
/* v435: the dashboard switcher in the profile pop-up: two rows under the name, a divider after them; the current row filled, its
   icon tile in the brand blue and a tick on the right. Fill only */
.pop.menu:has(.pa-envl){width:280px}
.menu .pa-envl{display:flex;flex-direction:column;gap:var(--sp-hair);padding-bottom:var(--sp-2);margin-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.menu .pa-envl>.pa-envr{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:0;padding:var(--sp-2);border:0;border-radius:var(--r-md);background:none;color:var(--fg-2);text-align:left;cursor:pointer}
.menu .pa-envl>.pa-envr:hover{background:var(--press)} .menu .pa-envl>.pa-envr.on{background:var(--sf-2);color:var(--fg);cursor:default}
.menu .pa-envl>.pa-envr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-envi{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--neu-t);color:var(--muted)} .pa-envi svg{width:16px;height:16px}
.pa-envr.on .pa-envi{background:var(--accent-t);color:var(--accent)}
.pa-envt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .pa-envt b{font:500 13px/var(--lh-ui) var(--f-body);color:inherit} .pa-envt small{font:var(--t-label);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-envc{flex:none;display:grid;place-items:center;width:16px;color:var(--accent)} .pa-envc svg{width:14px;height:14px}
.pop .pa-id{margin:var(--sp-2) 0 0;font:var(--t-micro);color:var(--dim);font-variant-numeric:tabular-nums}
/* prototype menu: the back-end switch row (a label, so it does not close the menu) */
.pt-sw{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--h-md);padding:0 var(--sp-3);font-size:13px;color:var(--fg-2);cursor:pointer;border-radius:var(--r-sm)}
.pt-sw:hover{background:var(--press)}
.pt-pop button[data-pa][aria-pressed="true"]{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);color:var(--fg)}
.pt-pop button[data-pa][aria-pressed="true"]::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
/* the hero: the dot matrix comes with .tr-main; a label row over the value with the eye toggle */
.pa-hl{display:flex;align-items:center;gap:var(--sp-1);font:var(--t-label);color:var(--muted)}
.pa-main .sub2 span:empty{display:none}
.pa-kv .pa-hlv{display:block;margin-bottom:var(--sp-2);color:var(--fg)} .pa-kv>div>span:nth-child(2) .dw-sel.pa-hls{max-width:100%}
.pa-ms .pa-rows span.num{white-space:nowrap}
.pa-2w>.pa-health{align-self:start}
@media (max-width:480px){ .pa .hc-xl.tr-hx span:nth-child(even):not(:last-child){display:none} .pa-mk em{display:none} }
.pa-eye{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:var(--sp-1);border:0;border-radius:var(--r-sm);background:none;color:var(--dim);cursor:pointer}
.pa-eye:hover{background:var(--press);color:var(--fg)} .pa-eye svg{width:14px;height:14px}
.pa .hc-xl.tr-hx span{white-space:nowrap} .pa .hc-xl.tr-hx span:first-child{transform:none}
.pa-mk em{top:var(--sp-1)}
.pa-empty{display:grid;place-items:center} .pa-empty p{margin:0 0 var(--sp-3)}
/* side panel: next payout and tier */
.pa-side{gap:var(--sp-6)}
.pa-sb{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pa-sb+.pa-sb{padding-top:var(--sp-6);border-top:1px solid var(--line)}
.pa-sb h3{margin:0;font:var(--t-label);font-weight:500;color:var(--dim)}
.pa-big{font:600 24px/var(--lh-tight) var(--f-display);letter-spacing:-.01em}
.pa-big .t3{color:var(--dim)}
.pa-sl{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:13px;color:var(--fg-2)}
.pa-sm{margin:0;font:var(--t-label);color:var(--muted);line-height:var(--lh-prose)}
.pa-tn{margin:0;font-size:13px;color:var(--fg-2)} .pa-tn b{font-weight:600;color:var(--fg)}
.pa-tier{position:relative;height:6px;border-radius:var(--r-pill);background:var(--sf-2);overflow:hidden;margin-top:var(--sp-1)}
.pa-tier i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:inherit;background:color-mix(in srgb,var(--fg) 55%,transparent)}
.pa-tl{display:flex;justify-content:space-between;font:var(--t-micro);color:var(--dim)} .pa-tl b{color:var(--fg);font-weight:600}
/* setup card for a new partner */
.pa-setup .hero-l{align-items:flex-start;text-align:left}
.pa-setup .hero-l p{margin-left:0}
/* KPI strip: the info tip sits in the label */
.pa-kp .kp-c small{display:flex;align-items:center;gap:var(--sp-hair)} .pa-kp .wtip svg{width:12px;height:12px}
/* two-up row: a wide card and a narrow one */
.pa-2w{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--sp-4);align-items:stretch}
.pa-2w>*{min-width:0}
@media (max-width:1100px){ .pa-2w{grid-template-columns:minmax(0,1fr)} }
.sec>.pa-2w+*{margin-top:var(--sp-4)}
/* card controls on the right of the header */
.pa-ctl{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.pa-ctl .tr-fsel{max-width:200px}
.pa-note{margin:0;font:var(--t-label);color:var(--muted);line-height:var(--lh-prose);max-width:72ch}
/* funnel rows: stage | tick bar (count over sign-ups) | count | conversion | median days */
.pa-fn{display:flex;flex-direction:column}
.pa-fr{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(0,1fr) 56px 128px 88px;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;font-size:13px}
.pa-fr+.pa-fr{box-shadow:inset 0 1px 0 var(--line)}
.pa-fr .s{font-weight:500;white-space:nowrap} .pa-fr b{font-weight:500;text-align:right} .pa-fr .mu{color:var(--muted);text-align:right}
.pa-fh{font:var(--t-micro);color:var(--dim);padding-top:0} .pa-fh span:nth-child(n+3){text-align:right}
.pa-fr .tk{position:relative;height:10px;width:100%;width:round(down,100%,4px);background:repeating-linear-gradient(90deg,var(--ch-tag) 0 1.5px,transparent 1.5px 4px)}
.pa-fr .tk i{position:absolute;left:0;top:0;bottom:0;width:max(4px,calc(var(--f) * 100%));width:max(4px,round(nearest,calc(var(--f) * 100%),4px));background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 70%,transparent) 0 1.5px,transparent 1.5px 4px)}
.pa-fr .tk.off{visibility:hidden}
@media (max-width:820px){ .pa-fr{grid-template-columns:minmax(0,1fr) 48px 96px;row-gap:var(--sp-1)} .pa-fr .tk{grid-column:1/-1;grid-row:2} .pa-fr>span:last-child{display:none} .pa-fh span:nth-child(2){display:none} }
/* key-value rows in cards (same hairlines as the drawer rows) */
.pa-rows{display:flex;flex-direction:column}
.pa-rows div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;font-size:13px}
.pa-rows div+div{box-shadow:inset 0 1px 0 var(--line)}
.pa-rows div span:first-child{color:var(--muted)} .pa-rows div span:last-child{text-align:right;color:var(--fg)}
.pa-rows em{font-style:normal;color:var(--dim)}
/* stamps under aggregate figures */
.pa-ps,.pa-cmp{margin:0;font:var(--t-micro);color:var(--dim);line-height:var(--lh-prose);max-width:90ch}
.pa-cmp{font:var(--t-label);color:var(--muted)}
/* suppressed state: no numbers leak */
.pa-sup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-6);border-radius:var(--r-md);background:var(--ch-band);text-align:center;min-height:120px}
.pa-sup b{font:500 13px/var(--lh-ui) var(--f-body);color:var(--fg-2)} .pa-sup span{font:var(--t-label);color:var(--muted)}
/* group colour: a 3x14 bar in legends and name cells; never inside a badge */
.pa-gsw{display:inline-block;width:3px;height:14px;border-radius:var(--r-xs);vertical-align:-2px;margin-right:var(--sp-2);flex:none}
.pa-gsw.s0{background:var(--ser-0)} .pa-gsw.s1{background:var(--ser-1)} .pa-gsw.s2{background:var(--ser-2)} .pa-gsw.s3{background:var(--ser-3)}
/* top groups rows (a narrow card): name, deposits and money on one line, the tick bar under them */
.pa-tg .tr-ir{grid-template-columns:minmax(0,1fr) auto auto;column-gap:var(--sp-4);row-gap:var(--sp-2)} .pa-tg .tr-ir .p{min-width:72px;white-space:nowrap}
.pa-tg .tr-ir .tk{grid-column:1/-1;grid-row:2}
.pa-tg .tr-ir .s{display:flex;align-items:center;min-width:0} .pa-tg .tr-ir .s span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-ir[role="button"]{cursor:pointer;border-radius:var(--r-sm)} .pa-ir[role="button"]:hover{background:var(--hover)}
.pa-tg .mu{color:var(--muted)} .pa-oth .s{color:var(--muted);font-weight:400}
/* performance: scope tabs wrap under the header */
.pa-sc{max-width:100%}
.seg button[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.pa-ref em{top:var(--sp-1)}
/* activity feed (the notification row metrics, no unread mark) */
.pa-fl{display:flex;flex-direction:column}
.pa-fi{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);padding:var(--sp-3) 0}
.pa-fi+.pa-fi{box-shadow:inset 0 1px 0 var(--line)}
.pa-fi b{font-size:13px;font-weight:500;color:var(--fg)} .pa-fi span{grid-column:1;font:var(--t-label);color:var(--muted)}
.pa-fi small{grid-column:2;grid-row:1;font:var(--t-label);color:var(--dim);white-space:nowrap}
/* events */
.pa-evl{display:flex;flex-direction:column}
.pa-evi{display:flex;flex-direction:column;gap:var(--sp-hair);padding:var(--sp-4) 0}
.pa-evi+.pa-evi{box-shadow:inset 0 1px 0 var(--line)} .pa-evi:first-child{padding-top:0}
.pa-evi small{font:var(--t-micro);color:var(--dim)} .pa-evi b{font-size:13px;font-weight:500} .pa-evi span{font:var(--t-label);color:var(--muted)}
.pa-evi>div{margin-top:var(--sp-2)}
/* standing and milestones */
.pa-sr{display:flex;flex-direction:column}
.pa-sr div{display:flex;justify-content:space-between;padding:var(--sp-2) var(--sp-3);font-size:13px;border-radius:var(--r-sm);color:var(--fg-2)}
.pa-sr div.me{background:var(--sf-3);color:var(--fg);font-weight:500}
.pa-sr .rk{display:inline-block;min-width:36px;color:var(--dim)} .pa-sr div.me .rk{color:var(--fg-2)} .pa-sr div.gap{padding-top:0;padding-bottom:0;color:var(--dim)}
.pa-next{display:flex;flex-direction:column;gap:var(--sp-hair);margin:0} .pa-next small{font:var(--t-micro);color:var(--dim)} .pa-next b{font-size:13px;font-weight:500}
.pa-st .tr-ch p{max-width:62ch}
.sec>.pa-st{margin-top:var(--sp-4)}
/* projection: a slider on a quiet track */
.pa-rng{display:flex;flex-direction:column;gap:var(--sp-2);font:var(--t-label);color:var(--muted)}
.pa-rng b{color:var(--fg);font-weight:600;margin-left:var(--sp-1)}
.pa-rng input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--r-pill);background:var(--sf-3);margin:var(--sp-2) 0}
.pa-rng input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fg);cursor:pointer}
.pa-rng input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--fg);cursor:pointer}
.pa-pjo{margin:0;font-size:14px;color:var(--fg-2)} .pa-pjo b{color:var(--fg);font-weight:600} .pa-pjo span{color:var(--muted)}
/* wallet pop-up action */
.pop .pa-wgo{margin-top:var(--sp-3);width:100%}
/* footer disclaimer on every partner page */
.pa-foot{margin:var(--sp-10) 0 0;max-width:72ch;font:var(--t-label);color:var(--dim);line-height:var(--lh-prose)}
.hm3>.pa-foot{margin-top:var(--sp-10)}
@media (max-width:820px){
  .nav:not([aria-label="Help"]){overflow-x:auto;scrollbar-width:none}
  .pa-env{align-self:center;padding:0;margin-left:0}
  .pa-ctl .tr-fsel{max-width:100%}
}
/* ---- Members, Communities and group detail (stage 2) ---- */
/* page header row: a muted line left, the page actions right (one ink pill per view) */
.pa-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.pa-ph p{margin:0;font:var(--t-body);color:var(--muted);max-width:68ch;display:flex;align-items:center}
.pa-ph small{display:block;margin-top:var(--sp-1);font:var(--t-label);color:var(--dim)}
.pa-pa{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.pa-pa .btn.dis{opacity:.45;cursor:not-allowed}
.pa-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.pa-tabs::-webkit-scrollbar{display:none}
.pa-flt{margin:0}
.pa-q{height:var(--h-sm);width:200px;font-size:12px}
.pa-gn{display:inline-flex;align-items:center;min-width:0}
.pa-gn b{font-weight:500}
/* selection bar */
.pa-bulk{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);background:var(--sf-3);font-size:13px;animation:fadeIn .12s var(--ease);flex-wrap:wrap}
.pa-bulk b{font-weight:500;margin-right:auto}
/* checkboxes: the filled square of the trader drawers (.cl-ok), never an outline */
.pa-ck{appearance:none;-webkit-appearance:none;display:inline-block;width:16px;height:16px;margin:0;border-radius:var(--r-xs);background:var(--line-2);cursor:pointer;vertical-align:middle;transition:background-color .16s var(--ease)}
.pa-ck:hover{background:var(--sel)}
.pa-ck:checked{background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305080d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/14px no-repeat}
.pa-ck:indeterminate{background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305080d' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E") center/14px no-repeat}
.pa-ck:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* members table: 44px rows, hairline row dividers only */
.pa-tbl{width:100%;min-width:820px;border-collapse:collapse;font-size:13px}
.pa-tbl td.gp small.pa-via{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.pa-tbl th{font:var(--t-micro);color:var(--dim);text-align:left;padding:0 var(--sp-2) var(--sp-2);white-space:nowrap}
.pa-tbl td{height:44px;padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.pa-tbl tr>:first-child{padding-left:0;width:24px} .pa-tbl tr>:last-child{padding-right:0}
.pa-tbl th .wtip{margin-left:var(--sp-1);vertical-align:-3px} .pa-tbl th .wtip svg{width:12px;height:12px}
.pa-tbl tbody tr{cursor:pointer} .pa-tbl tbody tr:hover>td{background:var(--hover)} .pa-tbl tbody tr.sel>td{background:var(--sel)}
.pa-tbl tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-tbl .mu,.pa-tbl b.pv{color:var(--dim)} .pa-tbl b{font-weight:500}
.pa-tbl td.pg small{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted)}
.pa-tbl td.rs span{display:block;font:var(--t-micro);color:var(--muted)} .pa-tbl td.rs span:first-child{font:var(--t-label);color:var(--fg-2)}
.pa-tbl td.sh{color:var(--muted)}
.pa-th{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.pa-th:hover,th[aria-sort="ascending"] .pa-th,th[aria-sort="descending"] .pa-th{color:var(--fg)}
.pa-th i{font-style:normal}
.pa-th:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.pa-pin{display:inline-flex;margin-left:var(--sp-1);color:var(--dim);vertical-align:-2px} .pa-pin svg{width:12px;height:12px}
.pa-m2,.pa-m2j{display:none}
.pa-more{align-items:center;gap:var(--sp-3)} .pa-more span{font:var(--t-label);color:var(--dim)}
.pa-empty0{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.pa-mc .tr-none{margin:var(--sp-2) 0 0}
/* board: one filled column per group, glass cards inside */
.pa-bh{margin-top:calc(var(--sp-2) * -1)}
.pa-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--sp-3);overflow-x:auto;padding-bottom:var(--sp-1)}
.pa-col{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-3);border-radius:var(--r-lg);background:var(--sf-2);transition:background-color .15s var(--ease)}
.pa-col.over{background:var(--sf-3)}
.pa-col header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-2);font-size:13px}
.pa-col header .num{font:var(--t-label);color:var(--dim)}
.pa-cards{display:flex;flex-direction:column;gap:var(--sp-2);max-height:560px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.pa-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;padding:10px;border-radius:var(--r-md);background:var(--glass);cursor:grab;font-size:13px}
.pa-card:hover{background:linear-gradient(var(--sf-2),var(--sf-2)),var(--glass)}
.pa-card.sel{background:linear-gradient(var(--sel),var(--sel)),var(--glass)}
.pa-card b{min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pa-card b.pv{color:var(--dim)}
.pa-card .pa-cm{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp-2);font:var(--t-micro);color:var(--dim);white-space:nowrap}
.pa-card.drag{opacity:.5}
.pa-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pa-card .pa-mv{height:24px;padding:0 var(--sp-2);font-size:12px}
/* group cards: a 2px colour strip on the left edge (a filled bar, not a border) */
.pa-gg{align-items:stretch}
.pa-gc{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;padding:var(--sp-6);cursor:pointer}
.pa-gc::before{content:"";position:absolute;left:0;top:var(--sp-4);bottom:var(--sp-4);width:2px;border-radius:0 2px 2px 0;background:var(--sw);pointer-events:none}
.pa-gc:hover{background:linear-gradient(var(--sf-2),var(--sf-2)),var(--glass)}
.pa-gc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-gh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-width:0}
.pa-gh h3{margin:0;font:var(--t-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-gd{margin:calc(var(--sp-2) * -1) 0 0;font:var(--t-label);color:var(--muted)}
.pa-gc .ov-k{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.pa-gp{margin:0;font:var(--t-label);color:var(--fg-2)}
.pa-spk{display:flex;flex-direction:column;gap:var(--sp-1)} .pa-spk svg{display:block;width:100%;height:36px}
.pa-spl{display:flex;justify-content:space-between;font:var(--t-micro);color:var(--dim)} .pa-spl b{color:var(--fg-2);font-weight:500;margin-left:2px}
.pa-gfa{display:inline-flex;align-items:center;gap:var(--sp-2)} .pa-gf .lnk{font:inherit}
.pa-share .pa-sm{display:flex;align-items:center} .pa-share .pa-url{margin:0}
.pa-tx{color:var(--fg-2)}
.pa-tge{height:160px}
.pa-gf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto;font:var(--t-label);color:var(--dim)}
.pa-gf .go{display:inline-flex;color:var(--dim)} .pa-gf .go svg{width:16px;height:16px}
.pa-gc.arch .pa-gh h3,.pa-gc.arch .ov-k b{color:var(--fg-2)}
.pa-gadd{min-height:0;height:100%;align-items:center}
@media (max-width:1240px){ .pa-gg{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .pa-gg{grid-template-columns:minmax(0,1fr)} .pa-gc{padding:var(--sp-5)} }
/* group page */
.pa-gph p .pa-gsw{background:var(--sw)}
.pa-grp>.pa-tabs{align-self:flex-start}
/* comparison and other tables */
.pa-cmpt{min-width:840px} .pa-cmpt th{white-space:normal;vertical-align:bottom} .pa-cmpt th .pa-th{text-align:right}
.pa-cmpt tbody tr[data-pgrp]{cursor:pointer}
.pa-cmpt tbody tr[data-pgrp]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-cmpt .mu{color:var(--dim)}
.pa-cmpt th .pa-th{justify-content:flex-end}
.pa-cmpt tr.pa-oth td{color:var(--muted)}
.pa-cmpt tfoot td{height:40px;padding:0 var(--sp-2);border-top:1px solid var(--line-2);font-weight:500} .pa-cmpt tfoot tr>:first-child{padding-left:0} .pa-cmpt tfoot tr>:last-child{padding-right:0}
tr[data-plk]{cursor:pointer}
.pa-sim{margin:0}
/* retention by deposit quarter: tint by retention, never by a line */
.tr-mt.pa-coh{min-width:620px}
.pa-coh thead th:first-child{text-align:left}
.pa-coh td{height:40px}
.pa-coh td.t4{background:color-mix(in srgb,var(--pos) 26%,transparent);color:var(--fg)} .pa-coh td.t3{background:color-mix(in srgb,var(--pos) 17%,transparent);color:var(--fg)}
.pa-coh td.t2{background:color-mix(in srgb,var(--pos) 9%,transparent);color:var(--fg)} .pa-coh td.t1{background:var(--sf-2);color:var(--fg-2)}
.pa-coh td.pa-cn{background:none}
/* rules list */
.pa-rl{display:flex;flex-direction:column}
.pa-rr{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0}
.pa-rr+.pa-rr{box-shadow:inset 0 1px 0 var(--line)}
.pa-rn{display:flex;flex-direction:column;gap:var(--sp-hair);min-width:0} .pa-rn b{font-size:13px;font-weight:500} .pa-rn span{font:var(--t-label);color:var(--muted)}
.pa-rm{font:var(--t-label);color:var(--dim);white-space:nowrap}
/* drawers */
.pa-2f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.modal .pa-2f .dw-lbl{margin-top:0}
.pa-sws{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pa-swr{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--sf-2);font-size:13px;color:var(--fg-2);cursor:pointer}
.pa-swr input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pa-swr i{width:12px;height:12px;border-radius:var(--r-xs)}
.pa-swr i.s0{background:var(--ser-0)} .pa-swr i.s1{background:var(--ser-1)} .pa-swr i.s2{background:var(--ser-2)} .pa-swr i.s3{background:var(--ser-3)}
.pa-swr:has(input:checked){background:var(--sf-3);color:var(--fg)}
.pa-swr:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pa-sel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pa-sel li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:13px}
.pa-sel li+li{box-shadow:inset 0 1px 0 var(--line)} .pa-sel li span{color:var(--dim)} .pa-sel li.mu{color:var(--dim)}
.modal .dw-why p{margin:0} .modal .dw-why p+p{margin-top:var(--sp-2)}
.modal .mu{color:var(--dim)}
.pa-rdel{align-self:flex-start}
@media (max-width:820px){
  .pa-tbl{min-width:0}
  .pa-tbl .jv,.pa-tbl .rs,.pa-tbl .sh,.pa-tbl .gp{display:none}
  .pa-m2{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted);white-space:normal}
  .pa-m2 .pa-gsw{height:10px;margin-right:var(--sp-1)}
  .pa-tbl td.mb{white-space:normal}
  .pa-board{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .pa-card{cursor:default}
  .pa-q{width:100%}
  .pa-rr{grid-template-columns:minmax(0,1fr) auto auto} .pa-rm{grid-column:1;grid-row:2}
}
@media (max-width:560px){ .pa-tbl .pg,.pa-tbl .jd{display:none} .pa-m2j{display:inline} .pa-2f{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .pa-bulk{animation:none} .pa-col,.pa-ck{transition:none} }
@media (prefers-reduced-motion:reduce){ svg.pa-bars g.pa-m{transition:none} }
/* Partner: Links (§3.4) and Earnings (§3.5) */
.pa-ph .pa-strip{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2);font:var(--t-label);color:var(--dim)}
.pa-strip .wtip svg{width:12px;height:12px}
.pa-ph .pa-strip .lnk{font-size:12px}
.pa-2e{align-items:stretch}
/* link chart: clicks labels on the left, inside the plot, on the shared gridlines */
.pa-yl2{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.pa-yl2 span{position:absolute;left:0;transform:translateY(calc(-100% - 2px));font:var(--t-micro);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.hc-dot.pa-d2{background:var(--ch-line-2)}
svg path.ln.pa-part{stroke-dasharray:4 4}
.pa-sug{margin-top:var(--sp-3);align-items:end}
.pa-sul{display:flex;flex-direction:column;font:var(--t-micro);color:var(--dim);white-space:nowrap} .pa-sul b{font:var(--t-label);color:var(--fg-2);font-weight:500}
svg.pa-bars.hov g.pa-m{opacity:.35} svg.pa-bars.hov g.pa-m.on{opacity:1}
.legend i.pa-dl{width:14px;height:0;border-top:1.5px dashed var(--ch-line);background:none;border-radius:0}
/* by channel */
.pa-chr{grid-template-columns:minmax(96px,1fr) minmax(0,220px) 64px 80px 104px}
.pa-chr .s small{display:block;font:var(--t-micro);font-weight:400;color:var(--dim)}
.pa-chb{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:var(--sp-2)} .pa-chb b{font-weight:500;text-align:right}
.pa-chh{font:var(--t-micro);color:var(--dim);padding-top:0} .pa-chh span:nth-child(n+3){text-align:right}
.pa-ins{margin:0;font-size:13px;color:var(--fg-2);line-height:var(--lh-prose)}
@media (max-width:640px){ .pa-chr{grid-template-columns:minmax(0,1fr) 56px 64px 72px;row-gap:var(--sp-1)} .pa-chr .pa-chb{grid-column:1/-1;grid-row:2} .pa-chh>span:nth-child(2){display:none} }
/* links table */
.pa-ltb{min-width:820px}
.pa-ltb td.nm small.pa-lsub{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted)}
.pa-ltb th.ac,.pa-ltb td.ac{position:sticky;right:0;background:linear-gradient(90deg,transparent,var(--sf-1) 12px)}
.pa-ltb tbody tr:hover>td.ac{background:linear-gradient(90deg,transparent,var(--sf-1) 12px)}
.pa-ltb th.r .pa-th{justify-content:flex-end}
.pa-ltb td.gp small{display:block;font:var(--t-micro);color:var(--warn)}
.pa-ltb .mu{color:var(--dim)}
.pa-ltb tbody tr{cursor:pointer}
.pa-ltb tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-ltb td.ac{text-align:right;width:96px}
.pa-lt2{display:none} .pa-lt4{display:none}
.pa-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pa-ib{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;vertical-align:middle}
.pa-ib:hover{background:var(--press);color:var(--fg)} .pa-ib svg{width:16px;height:16px}
.pa-ib:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pa-ib[aria-expanded="true"]{background:var(--press);color:var(--fg)}
.pop.pa-lm{position:fixed;right:auto;top:0;left:0;width:196px;padding:var(--sp-2);z-index:45;text-align:left}
.pa-lm button{width:100%}
/* link drawers */
.pa-land .rf-opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.pa-land .rf-opt[aria-disabled="true"]:hover{background:var(--neu-t)}
.pa-land{margin-top:0}
.pa-lck{flex:none;font:var(--t-micro);color:var(--dim)}
.pa-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.dw-foot.neg{color:var(--neg)}
.pa-adv summary{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);font-size:13px;color:var(--fg-2);cursor:pointer;list-style:none}
.pa-adv summary::-webkit-details-marker{display:none}
.pa-adv summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s var(--ease)}
.pa-adv[open] summary::before{transform:rotate(45deg)}
.pa-adv summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.pa-adv .pa-2f{margin-top:var(--sp-3)}
.pa-url.mu{color:var(--dim);font-family:inherit}
.pa-url{margin:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--well);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--fg-2);word-break:break-all}
.pa-cap{font-size:13px}
.pa-dr em{font-style:normal;color:var(--dim)}
.pa-qrw{display:flex;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap}
.pa-qri{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;min-width:220px}
/* the one white surface in the product: QR codes need it to scan */
.pa-qr{position:relative;display:grid;place-items:center;flex:none;width:176px;height:176px;padding:8px;box-sizing:border-box;border-radius:var(--r-md);background:#fff}
.pa-qr svg{display:block;width:160px;height:160px}
.pa-qr.off svg{opacity:.18}
.pa-qr.off span{position:absolute;inset:0;display:grid;place-items:center;padding:var(--sp-4);text-align:center;font:500 12px/1.4 var(--f-body);color:#222}
.pa-cpy{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pa-shr{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font:var(--t-label);color:var(--dim)} .pa-shr span{margin-right:var(--sp-1)}
.pa-ex{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:var(--sp-2);font-size:14px;color:var(--fg-2);line-height:var(--lh-prose)}
/* earnings */
.pa-ern>.pa-tabs,.pa-lnk>.pa-tabs{align-self:flex-start}
.pa-band .ov-k b{font:600 20px/var(--lh-tight) var(--f-display);letter-spacing:-.01em}
.pa-band .ov-k small{display:flex;align-items:center;gap:var(--sp-hair)} .pa-band .wtip svg{width:12px;height:12px}
.pa-band .ov-k span{line-height:var(--lh-prose)}
.pa-egr{grid-template-columns:minmax(0,1fr) minmax(0,200px) 88px 88px}
.pa-egr .s{display:flex;align-items:center;min-width:0} .pa-egr .s span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-egt{grid-template-columns:minmax(0,1fr) 88px} .pa-egt .s{color:var(--muted);font-weight:500}
.pa-egr .sh{color:var(--muted)}
@media (max-width:640px){ .pa-egr{grid-template-columns:minmax(0,1fr) auto auto;row-gap:var(--sp-2)} .pa-egr .tk{grid-column:1/-1;grid-row:2} .pa-egt{grid-template-columns:minmax(0,1fr) auto} }
.pa-tc .tr-ch p b{color:var(--fg);font-weight:600}
.pa-tt{display:flex;flex-direction:column}
.pa-ttr{display:grid;grid-template-columns:88px 64px 72px 80px minmax(0,1fr);gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) var(--sp-3);font-size:13px;color:var(--fg-2);border-radius:var(--r-sm)}
.pa-ttr+.pa-ttr:not(.me){box-shadow:inset 0 1px 0 var(--line)} .pa-ttr.me+.pa-ttr{box-shadow:none}
.pa-ttr.me{background:var(--sf-3);color:var(--fg)}
.pa-ttr b{font-weight:500;color:var(--fg)} .pa-ttr em{font-style:normal;color:var(--dim)} .pa-ttr .pk{font:var(--t-label);color:var(--muted)} .pa-ttr.me .pk{color:var(--fg-2)}
.pa-tth{font:var(--t-micro);color:var(--dim);padding-top:0}
@media (max-width:640px){ .pa-ttr{grid-template-columns:minmax(0,1fr) 56px 56px 64px;row-gap:var(--sp-1)} .pa-ttr .pk{grid-column:1/-1} .pa-tth>span:last-child{display:none} }
.pa-pja{margin-top:calc(var(--sp-2) * -1)} .pa-pja div span:first-child{max-width:44ch}
.pa-lgt{min-width:820px}
.pa-lgt th.r .pa-th{justify-content:flex-end}
.pa-lgt td.bs{white-space:normal;max-width:340px}
.pa-lgt tbody tr[data-pstm]{cursor:pointer}
.pa-lgt tbody tr[data-pstm]:focus-visible,.pa-pht tbody tr:focus-visible,.pa-stt tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-lgt tfoot td{height:40px;padding:0 var(--sp-2);border-top:1px solid var(--line-2);font-weight:500}
.pa-lgt td.dn,.pa-stt td.dn,.pa-stl .dn{color:var(--neg)}
.pa-tf{color:var(--muted)}
.pa-pht tbody tr,.pa-stt tbody tr{cursor:pointer}
.pa-pht .mu,.pa-stt .mu,.pa-lgt .mu{color:var(--dim)}
.pa-np .pa-big{font-size:28px}
.pa-np .pa-sup{min-height:0}
.pa-kv{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.4fr) auto;column-gap:var(--sp-3)}
.pa-kv>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;font-size:13px}
.pa-kv>div+div{box-shadow:inset 0 1px 0 var(--line)}
.pa-kv>div>span:first-child{color:var(--muted)} .pa-kv>div>span:nth-child(2){color:var(--fg)}
@media (max-width:640px){ .pa-kv>div{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-1)} .pa-kv>div>span:nth-child(2){grid-column:1;grid-row:2} .pa-kv>div>span:nth-child(3){grid-column:2;grid-row:1/3} }
.pa-stl>div{align-items:flex-start}
.pa-stl b{display:block;font-weight:500;color:var(--fg)} .pa-stl small{display:block;margin-top:2px;font:var(--t-label);color:var(--muted)}
.pa-stl .pa-stt2{box-shadow:inset 0 1px 0 var(--line-2)}
.pa-otp{width:180px;text-align:center;font-size:18px;font-weight:600;letter-spacing:.35em;font-variant-numeric:tabular-nums}
.pa-ph .pa-eye{width:32px;height:32px} .pa-ph .pa-eye svg{width:16px;height:16px}
@media (max-width:820px){
  .pa-ltb,.pa-lgt,.pa-pht,.pa-stt{min-width:0}
  .pa-ltb .gp,.pa-ltb .lp,.pa-ltb .cd,.pa-ltb .chn,.pa-ltb .cr,.pa-ltb .rt{display:none}
  .pa-ltb td.nm,.pa-lgt td.sr{white-space:normal}
  .pa-lt2{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted);white-space:normal}
  .pa-lt2 .pa-gsw{height:10px;margin-right:var(--sp-1)}
  .pa-lgt .bs,.pa-lgt .rt,.pa-lgt .gp{display:none}
  .pa-pht .mt,.pa-pht .rf,.pa-stt .vt{display:none}
  .pa-ltb td.ac{width:auto}
  .pa-ib{width:36px;height:36px}
  .pa-qr{width:160px;height:160px} .pa-qr svg{width:144px;height:144px}
}
@media (max-width:560px){ .pa-pht .sx,.pa-pht .sm,.pa-stt .pdf,.pa-stt td:nth-child(2),.pa-stt th:nth-child(2){display:none} .pa-pht td{white-space:normal} .pa-stt td,.pa-stt th{padding-left:var(--sp-1);padding-right:var(--sp-1)} .pa-lgt .sx{display:none} .pa-lt2 .pa-lt4{display:inline} .pa-lgt td.mo{white-space:normal;width:76px} .pa-ltb .sx,.pa-ltb .su,.pa-ltb .dp,.pa-ltb .pa-ibx{display:none} .pa-ttr{padding:var(--sp-2)} }
@media (prefers-reduced-motion:reduce){ .pa-adv summary::before{transition:none} }
/* Partner: Resources (§3.6) and Partner settings (§3.7) */
.pa-cl{font:var(--t-label);color:var(--muted)}
.pa-kb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
.pa-kv>div>span:nth-child(2) small{display:block;margin-top:var(--sp-hair);font:var(--t-label);color:var(--dim)}
.pa-kv>div>span:nth-child(2) .dw-sel{width:100%;max-width:420px}
.pa-kv>div>span:first-child{color:var(--muted)}
.pa-kv.pa-lv>div{align-items:start}
.pa-2w.pa-2p{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){ .pa-2w.pa-2p{grid-template-columns:minmax(0,1fr)} }
/* a narrow card stacks label, then value, with the chip on the right (the card's own width decides, not the viewport) */
.pa-pd{container-type:inline-size}
@container (max-width:560px){ .pa-pd .pa-kv>div{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-1)} .pa-pd .pa-kv>div>span:nth-child(2){grid-column:1;grid-row:2} .pa-pd .pa-kv>div>span:nth-child(3){grid-column:2;grid-row:1/3} }
.pa-kv.pa-lv>div>span:first-child{color:var(--fg);font-weight:500}
/* marketing kit cards: a preview tile on the well, title and format, the approval line, actions */
.dk-grid.pa-kit{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:stretch}
.pa-kc{gap:var(--sp-4);padding:var(--sp-6)}
.pa-kt{position:relative;display:flex;align-items:center;justify-content:center;height:148px;border-radius:var(--r-md);background:var(--well);overflow:hidden}
.pa-kf{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;border-radius:var(--r-sm);background:var(--sf-2);color:var(--muted);overflow:hidden}
.pa-kf i{display:block;flex:none;height:5px;width:min(64px,100%);border-radius:var(--r-pill);background:color-mix(in srgb,var(--fg) 22%,transparent)}
.pa-kf i.s{width:min(40px,70%);background:color-mix(in srgb,var(--fg) 12%,transparent)}
.pa-kt em{position:absolute;right:10px;bottom:8px;font:var(--t-micro);font-style:normal;color:var(--dim)}
.pa-kf.vid{align-items:center}
.pa-kf.vid svg{width:28px;height:28px}
.pa-kf.txt{width:170px;height:auto;padding:14px 16px}
.pa-kf.br{position:relative;justify-content:flex-end;gap:4px;padding:12px;background:radial-gradient(120% 90% at 85% 0%,rgba(84,132,214,.38),transparent 60%),linear-gradient(160deg,#0f1b2b,#070b12);color:#fff;text-align:left}
.pa-kf.br .pa-klm{position:absolute;left:12px;top:12px;width:16px;height:15px;color:#fff;opacity:.9}
.pa-kf.br b{font:600 13px/1.15 var(--f-display);letter-spacing:-.01em;color:#fff;max-width:90%}
.pa-kf.br.tall{justify-content:center} .pa-kf.br.tall b{font-size:11px}
.pa-kf.br small{font:500 8px/1 var(--f-body);letter-spacing:.04em;color:rgba(255,255,255,.55)}
.pa-kf.br .pa-kpl{position:absolute;right:12px;top:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14)} .pa-kf.br .pa-kpl svg{width:12px;height:12px}
.pa-ktx{font:12px/1.45 var(--f-body);color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pa-kf.txt small{margin-top:6px;font:var(--t-micro);color:var(--dim)}
.pa-kcp{margin:0;font:var(--t-label);color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pa-kx summary{cursor:pointer;font:var(--t-label);color:var(--muted)} .pa-kx summary:hover{color:var(--fg)} .pa-kx .pa-capb{margin-top:var(--sp-2)}
.pa-kf.txt i{width:100%} .pa-kf.txt i.s{width:60%}
.pa-kh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.pa-kh h3{margin:0;font:var(--t-title)}
.pa-kh p{margin:var(--sp-1) 0 0;font:var(--t-label);color:var(--muted)}
.pa-ka{margin:0;font:var(--t-label);color:var(--dim)}
.pa-kc .pa-kb{margin-top:auto}
.pa-kn{margin-top:var(--sp-3)}
.sec-h .pa-ctl{flex-wrap:nowrap} .sec-h .pa-ctl .pa-cl{white-space:nowrap} .sec-h .pa-ctl .tr-fsel{max-width:220px}
/* disclosure text and the checker */
.pa-capb{margin:0;padding:var(--sp-4);border-radius:var(--r-md);background:var(--sf-2);font-size:13px;line-height:var(--lh-prose);color:var(--fg-2)}
.pa-chkf{display:flex;flex-direction:column;gap:var(--sp-2)}
.pa-chkf .dw-ta{margin-top:0;min-height:120px}
.pa-chks{font:var(--t-label);color:var(--muted)}
.pa-chk{display:flex;flex-direction:column}
.pa-chk>div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--sp-2);padding:var(--sp-3) 0;font-size:13px}
.pa-chk>div+div{box-shadow:inset 0 1px 0 var(--line)}
.pa-chk .g{font-weight:600;line-height:var(--lh-ui)}
.pa-chk .ok .g{color:var(--pos)} .pa-chk .no .g{color:var(--neg)}
.pa-chk b{font-weight:500}
.pa-chk small{display:block;margin-top:var(--sp-hair);font:var(--t-label);color:var(--muted);line-height:var(--lh-prose)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pa-rl2 div span:last-child{color:var(--fg-2)}
/* content review table: no forced width, the note wraps */
.tr-tt.pa-rvt,.tr-tt.pa-tmt{min-width:0}
.pa-rvt td.ti,.pa-rvt td.rn,.pa-tmt td.nm{white-space:normal}
.pa-rvt td{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.pa-rvt td.ti small,.pa-tmt small{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted)}
.pa-rvt td.rn{min-width:200px;max-width:360px;color:var(--fg-2)}
.pa-rvt td.ti{min-width:180px}
.pa-rvh{display:none}
@media (max-width:1100px){ .pa-rvt .chn{display:none} .pa-rvh{display:inline} }
.pa-rvt .mu,.pa-tmt .mu{color:var(--dim)}
.pa-rsb{display:block;margin-top:var(--sp-1);font-size:12px}
.pa-rv2,.pa-tm2{display:none}
.pa-l13{font-size:13px}
.pa-rsd{display:block;margin-top:var(--sp-1);font:var(--t-micro);color:var(--dim)}
.pa-tmt small.pa-tm2{display:none}
/* programme terms */
.pa-tnl{margin:0;font:500 15px/var(--lh-ui) var(--f-body);color:var(--fg)}
.pa-tir{display:flex;flex-direction:column;font-size:13px}
.pa-tir>div{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.5fr) minmax(0,2.2fr);gap:var(--sp-3);align-items:start;padding:var(--sp-3) var(--sp-2)}
.pa-tir>div+div{box-shadow:inset 0 1px 0 var(--line)}
.pa-tir>div.hd{padding-top:0;font:var(--t-micro);color:var(--dim)}
.pa-tir>div.on{background:var(--sel);border-radius:var(--r-sm);box-shadow:none}
.pa-tir>div.on+div{box-shadow:none}
.pa-tir .tn{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)} .pa-tir .tn b{font-weight:500}
.pa-tir small{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted)}
.pa-tir .pk{color:var(--fg-2);line-height:var(--lh-prose)}
.pa-hi span{color:var(--fg)!important;font-weight:500}
.pa-ol{margin:0;padding-left:var(--sp-5);font-size:13px;line-height:var(--lh-prose);color:var(--fg-2);display:flex;flex-direction:column;gap:var(--sp-2)}
/* settings */
.pa-np{margin:0}
.pa-swl{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.pa-swl b{display:block;font-weight:500;font-size:14px}
.pa-swl small{display:block;margin-top:var(--sp-hair);font:var(--t-label);color:var(--muted);line-height:var(--lh-prose);max-width:56ch}
.pa-swl .sw{flex:none;margin-top:2px}
.pa-roles{margin-top:0}
.modal .pa-warn{color:var(--warn)}
@media (max-width:1100px){ .pa-tir>div{grid-template-columns:minmax(130px,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr)} .pa-tir .pk{grid-column:1/-1} .pa-tir>div.hd span:last-child{display:none} }
@media (max-width:820px){
  .pa-tir>div.hd{display:none}
  .pa-tir>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-3)}
  .pa-tir>div+div{box-shadow:inset 0 1px 0 var(--line)}
  .pa-tir .tn,.pa-tir [data-l="Rate"],.pa-tir .pk{grid-column:1/-1}
  .pa-tir [data-l]::before{content:attr(data-l);display:block;font:var(--t-micro);color:var(--dim);margin-bottom:2px}
  .pa-kv>div>span:nth-child(2) .dw-sel{max-width:100%}
}
@media (max-width:640px){
  .pa-kc{padding:var(--sp-5)}
  .pa-rvt .sd,.pa-tmt .gp,.pa-tmt .adt{display:none}
  .pa-rv2,.pa-tmt small.pa-tm2{display:inline}
  .pa-tmt small.pa-tm2{display:block}
  .pa-rvt td.rn{max-width:none;min-width:0}
  .pa-tir>div{padding-left:0;padding-right:0}
  .pa-tir>div.on{padding-left:var(--sp-2);padding-right:var(--sp-2)}
  .sec-h .pa-ctl{width:100%} .sec-h .pa-ctl .tr-fsel{max-width:100%;flex:1}
}
.pa-rvn{display:none}
@media (max-width:560px){ .pa-rvt td.ti{min-width:0} .pa-rvt th.rn,.pa-rvt td.rn{display:none} .pa-rvt td.ti .pa-rvn{display:block;margin-top:var(--sp-1);font:var(--t-label);color:var(--fg-2);line-height:var(--lh-prose)} .pa-rvn .pa-rsb{margin-left:0;display:block;margin-top:var(--sp-1)} }
/* Partner responsive pass: tables that fit their card instead of scrolling sideways */
.tr-tt.pa-hst{min-width:0} .pa-hst td{white-space:normal}
@media (max-width:1240px){ .pa-cmpt{min-width:0} .pa-cmpt th{white-space:normal;vertical-align:bottom} .pa-cmpt td:first-child{white-space:normal;min-width:120px} }
/* on a phone the 9-column comparison keeps a readable width and scrolls inside its card */
@media (max-width:560px){ .pa-cmpt{min-width:600px} }
/* between 821 and 1240px the main column is as narrow as on a tablet: tables fold their secondary columns into a second line
   (the same rules as at 820px) instead of scrolling sideways inside the card */
@media (max-width:1240px){
  .pa-tbl{min-width:0}
  .pa-tbl .jv,.pa-tbl .rs,.pa-tbl .sh,.pa-tbl .gp{display:none}
  .pa-m2{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted);white-space:normal}
  .pa-m2 .pa-gsw{height:10px;margin-right:var(--sp-1)}
  .pa-tbl td.mb{white-space:normal}
  .pa-ltb,.pa-lgt,.pa-pht,.pa-stt{min-width:0}
  .pa-ltb .gp,.pa-ltb .lp,.pa-ltb .cd,.pa-ltb .chn,.pa-ltb .cr,.pa-ltb .rt{display:none}
  .pa-ltb td.nm,.pa-lgt td.sr{white-space:normal}
  .pa-lt2{display:block;margin-top:2px;font:var(--t-micro);color:var(--muted);white-space:normal}
  .pa-lt2 .pa-gsw{height:10px;margin-right:var(--sp-1)}
  .pa-lgt .bs,.pa-lgt .rt,.pa-lgt .gp{display:none}
  .pa-pht .mt,.pa-pht .rf,.pa-stt .vt{display:none}
  .pa-ltb td.ac{width:auto}
}
/* partner pages on a phone: buttons, tabs and segments are at least 36px tall to tap */
@media (max-width:640px){ .pa .btn.sm,.pa .seg button,.pa .pa-tabs button,.pa .tr-fsel,.pa .pa-eye{min-height:36px} .pa .lg-t,.pa .pa-th,.pa .pa-rsb{min-height:36px;display:inline-flex;align-items:center} }
/* a tab row never wraps: it scrolls inside itself, and the selected tab is scrolled into view (paBind4) */
.pa-tabs{flex-wrap:nowrap} .pa-tabs>button{flex:none}

/* ---- v442 phone shell (820px and below) ----
   The main nav leaves the top of the page and becomes a tab bar fixed to the bottom of the screen, so it stays in reach while
   the page scrolls: one tab per page (icon over a short label) plus Help. The top bar becomes one tidy row (logo mark left,
   the tools right) with the page title on its own line under it. Desktop is unchanged */
.top-mark,.hp-s{display:none}
/* v443: the logo mark, the onboarding logo, the back chevron and the tools sit in .top-row so phones can pin that row; on wider
   screens the row is transparent (display: contents) and the top bar lays out exactly as before */
.top-row{display:contents} .top .tools{order:2}
.tb-prof,.trm-ic{display:none}
/* v445: one re-render without motion (the amount-hider eye) */
/* v448: the moving background (.bg) is left out, or its drift would restart from the start each time the eye is used */
.na *:not(.bg,.bg *),.na *:not(.bg,.bg *)::before,.na *:not(.bg,.bg *)::after{animation:none!important;transition:none!important}
@media (max-width:820px){
  .app,.app.focus{grid-template-rows:auto 1fr}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;height:auto;flex-direction:row;align-items:stretch;gap:0;
    padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));overflow:visible;
    background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
    box-shadow:inset 0 1px 0 var(--line)}
  .side .brand{display:none}
  /* the tabs share the width evenly; on a tablet they stay a 560px group in the middle (v443: Help is no longer a tab, the side-help
     rules below only apply if it ever comes back) */
  .side{padding-inline:max(var(--sp-2),calc((100vw - 560px) / 2))}
  .side>.nav,.side .nav:not([aria-label="Help"]){flex:1 1 auto;display:flex;flex-direction:row;gap:0;overflow:visible;min-width:0}
  .side>.nav{flex:3 1 0} .app:has(#envTag:not([hidden])) .side>.nav{flex:6 1 0}
  .side-help{flex:1 1 0;display:flex;justify-content:center;margin:0}
  .side-help>.nav{display:flex}
  /* v443: icons only (the label text stays in the button, at font-size 0, as its accessible name); the current page gets a
     soft fill behind its icon */
  .side>.nav,.side .nav:not([aria-label="Help"]){justify-content:space-around}
  /* flex, not grid: a trader tab's hidden label is a bare text node, and as a grid row it took half the free height and pushed
     the icon up (v445) */
  .side .nav button,.side .nav button[data-nav^="p-"],.side .nav button[data-nav^="p-"]:not(.on){flex:0 0 auto;width:52px;min-width:0;height:40px;min-height:40px;
    display:flex;align-items:center;justify-content:center;gap:0;padding:0;margin:var(--sp-1) 0;border-radius:var(--r-md);font-size:0;line-height:0;color:var(--muted);background:none}
  .side .nav button[hidden]{display:none}
  .side .nav button svg,.side>.nav button svg{display:block;width:21px;height:21px;color:inherit}
  .side .nav button .nv-t,.side .nav button .hp-l,.side .nav button .hp-s{display:none}
  .side .nav button:hover{background:none;color:var(--fg)}
  .side .nav button.on,.side .nav button[aria-expanded="true"]{background:var(--sf-3);color:var(--fg)}
  .side .nav button.on svg{color:var(--fg)}
  /* Help opens upwards from the tab bar, as wide as the screen */
  .side-help .pop.hp-pop{position:fixed;top:auto;bottom:calc(60px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto}
  /* the page clears the tab bar; toasts sit above it */
  .app:not(.first) .main,.app.focus:not(.first) .main{padding-bottom:calc(var(--sp-8) + 64px + env(safe-area-inset-bottom))}
  .main{padding-top:var(--sp-4)}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
  /* v443 top bar: the row with the logo mark and the tools is pinned to the top of the screen (sticky, the same glass as the tab
     bar); the page title and an action bar sit under it and scroll away with the page. .top itself steps out of the layout
     (display: contents) so the row can stick for the whole page */
  .app,.app.focus,.app.first{grid-template-rows:none;grid-auto-rows:auto}
  .top{display:contents}
  .top-row{display:flex;align-items:center;gap:var(--sp-2);position:sticky;top:0;z-index:35;min-width:0;
    padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-4) var(--sp-2);
    /* no backdrop-filter here: it would become the backdrop root of the wallet and profile pop-ups inside the row, and their own
       glass would then show the page through unblurred. A near-opaque fill instead */
    background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:inset 0 -1px 0 var(--line)}
  .top-mark{display:flex;align-items:center;height:42px;flex:none} .top-mark svg{height:22px;width:auto}
  .top-row:has(#topBack:not([hidden])) .top-mark,.top-row:has(#topBrand:not([hidden])) .top-mark{display:none}
  .app:has(#envTag:not([hidden])) .top-mark::after{content:"Partner";margin-left:var(--sp-2);font:var(--t-micro);color:var(--muted);letter-spacing:.02em}
  .top-row .tools{margin-left:auto}
  .top h1{height:auto;min-height:0;margin:0;padding:var(--sp-4) var(--sp-4) 0;font-size:22px}
  .top h1:empty{display:none}
  .top>.ann{margin:var(--sp-3) var(--sp-4) 0;order:0}
  /* v445: the profile is the last tab of the bottom bar; its pop-up opens upwards from there. The top-bar profile button hides */
  .top-row #acctBtn{display:none}
  .tb-prof{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-width:0;border:0;background:none;padding:0;cursor:pointer}
  .tb-prof .av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sf-3);color:var(--fg-2);font:500 11px/1 var(--f-body)}
  .tb-prof[aria-expanded="true"] .av{background:var(--fg);color:var(--bg)}
  .app:has(#envTag:not([hidden])) .side .nav button{width:44px}
  #acctPop .pop{position:fixed;top:auto;right:12px;left:auto;bottom:calc(64px + env(safe-area-inset-bottom));width:min(300px,calc(100vw - 24px))}
  /* v445: Full track record and Account become two icon buttons in the pinned row on Home (the mini bar, #trMini); the same
     switches in the page header hide. Their menus open full width under the row */
  .top-row .tr-mini{position:static;display:flex;flex:none;margin-left:var(--sp-1);padding:0;background:none;box-shadow:none;border:0;opacity:1;visibility:visible;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:none;will-change:auto;transition:none}
  .top-row .tr-mini:empty{display:none}
  .top-row .tr-mini .trm-l{display:none}
  .top-row .tr-mini .trm-r{gap:var(--sp-1)}
  .top-row .tr-mini .tr-sw,.top-row .tr-mini .tr-swc .tr-sw{width:var(--h-lg);height:var(--h-lg);min-height:var(--h-lg);padding:0;justify-content:center;gap:0}
  .top-row .tr-mini .tr-sw>span,.top-row .tr-mini .tr-sw>svg,.top-row .tr-mini .tr-swx{display:none}
  .top-row .tr-mini .trm-ic{display:grid;place-items:center;color:var(--muted)} .top-row .tr-mini .trm-ic svg{width:17px;height:17px}
  .top-row .tr-mini .tr-swc .tr-sw,.top-row .tr-mini .tr-sw[aria-expanded="true"]{background:var(--sf-3)} .top-row .tr-mini .tr-swc .trm-ic,.top-row .tr-mini .tr-sw[aria-expanded="true"] .trm-ic{color:var(--fg)}
  .top-row .tr-mini .pop{position:fixed;left:12px;right:12px;top:calc(64px + env(safe-area-inset-top));width:auto;max-height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}
  .app:has(.top-row .tr-mini:not(:empty)) .tr-head .tr-hb{display:none}
  /* the pinned row sits above the tab bar (45) so its pop-ups are never covered by it; the prototype menu stops above the bar */
  .top-row{z-index:46}
  .pop.pt-pop{max-height:calc(100dvh - var(--pt-top,72px) - 64px - env(safe-area-inset-bottom))}
  #acctPop .pop,#walletPop .pop{max-height:calc(100dvh - 72px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}
  /* the full-screen data-points panel of the onboarding chat sits in the chat's own stacking context, so a z-index can't lift
     it over the pinned row: the row steps aside (keeps its space, takes no taps) while the panel is open */
  .app:has(.dq-panel.show) .top-row{visibility:hidden}
  /* focus never lands under the pinned row or the tab bar */
  html{scroll-padding-top:calc(64px + env(safe-area-inset-top));scroll-padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}