:root{
color-scheme:dark;
/* P6 design foundation. Semantic tokens coexist with the proven P5 names
so each view can migrate incrementally without a visual flag day. */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:24px;--space-6:32px;--space-7:48px;
--type-caption:12px;--type-body-sm:13px;--type-body:15px;
--type-section:18px;--type-title:30px;
--leading-tight:1.2;--leading-body:1.5;--leading-reading:1.65;
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;
--radius-overlay:20px;--radius-round:999px;
--icon-sm:16px;--icon-md:20px;--icon-lg:24px;
--motion-fast:.13s;--motion-standard:.18s;--motion-slow:.26s;
--e:cubic-bezier(.22,1,.36,1);--e-out:cubic-bezier(.33,0,.2,1);
--d1:.26s;--d2:.42s;--d3:.60s;
/* Dark is the safe first-paint default. Three visibly different neutral
layers replace the former pure-black + one-navy split: canvas, primary
card and nested/raised surface. This keeps depth without the harsh OLED
contrast or the old card/cardS ambiguity. */
--ink:#0B0F16;--card:#171E2B;--cardS:#1F2938;--glass:rgba(23,30,43,.94);
--line:#3B475A;--lineS:#2A3445;
--text:#F4F7FB;--dim:#AEB9CA;--faint:#8D99AD;
--up:#42D77D;--down:#FF6B63;--downFill:#C93F3A;--warn:#F2C84B;--warnFill:#F2C84B;--onWarn:#241B00;--act:#63ACFF;--actFill:#1976D2;--onAct:#FFFFFF;
/* P6.8 follow-up — Candle State's own accent set. Bullish/Bearish
Confirmed deliberately reuse --up/--down (they mean the same "verified
direction" thing --up/--down already do everywhere else) rather than
adding two more near-identical greens/reds. Blue/Light-blue/Orange are
the genuinely new hues, chosen to stay visually distinct from --act
(already a blue, used for sync/interactive accents) and from each
other in both themes. Bearish Shift was --cs-pink (#FF375F) until an
Ideas ticker-coloring pass made it sit right next to --down's red
(#FF453A) with nothing but text to tell them apart -- confirmed too
close at a glance (same hue family, both fully saturated, only ~35°
apart). Orange reuses the well-established "early warning, not yet
confirmed" meaning (versus red's "confirmed") instead of another
red/pink shade, and sits clear of --warn's yellow (#FFD60A) too.
--cs-pink itself is left defined, just unused, in case a future state
wants it. */
--cs-blue:#7A78FF;--cs-pink:#FF375F;--cs-lightblue:#64D2FF;--cs-orange:#FF9500;
--inputbg:#101722;--inputLine:#606C84;--btn:#242E3E;--btn2:#303D51;
--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 20px rgba(0,0,0,.32);
--shadowLg:0 18px 44px rgba(0,0,0,.58);
--wash:radial-gradient(1100px 500px at 50% -10%,color-mix(in srgb,var(--act) 12%,transparent),transparent 72%);
/* A smooth two-stop alpha gradient over near-black has too few distinct
8-bit steps for a real OLED panel to render cleanly -- confirmed live
("horizontal lines...seems like a bug", visible in the gaps between
stacked cards on every tab, scrolls with the page, so it's this shared
body wash, not any one screen's own markup). A faint tiled noise layer
underneath breaks up the banding the same way film-grain overlays do on
any other dark gradient UI; at this opacity it's not meant to be
consciously visible, just enough dither that the gradient no longer
quantises into visible rings. Light keeps a much broader, lower-contrast
wash but does not need the texture, so --noise remains none there. */
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--fabShadow:0 10px 26px color-mix(in srgb,var(--actFill) 40%,transparent),0 2px 6px rgba(0,0,0,.35);
--fabRing:rgba(255,255,255,.14);
--primaryTop:#42D77D;--primaryBottom:#249E55;--primaryText:#06150C;--primaryShadow:color-mix(in srgb,var(--up) 25%,transparent);
--focusRing:rgba(10,102,214,.13);--modalScrim:rgba(0,0,0,.45);
--accentTint:color-mix(in srgb,var(--act) 14%,transparent);--accentTintSoft:color-mix(in srgb,var(--act) 11%,transparent);--accentTintStrong:color-mix(in srgb,var(--act) 19%,transparent);--accentBorder:color-mix(in srgb,var(--act) 42%,transparent);
--upTint:color-mix(in srgb,var(--up) 10%,transparent);--upTintStrong:color-mix(in srgb,var(--up) 16%,transparent);--upBorder:color-mix(in srgb,var(--up) 40%,transparent);--upCheckBorder:color-mix(in srgb,var(--up) 27%,transparent);
--downTint:color-mix(in srgb,var(--down) 10%,transparent);--downTintCheck:color-mix(in srgb,var(--down) 12%,transparent);--downTintStrong:color-mix(in srgb,var(--down) 15%,transparent);--downBorder:color-mix(in srgb,var(--down) 38%,transparent);
--warnTint:color-mix(in srgb,var(--warn) 12%,transparent);--warnTintStrong:color-mix(in srgb,var(--warn) 17%,transparent);--warnBorder:color-mix(in srgb,var(--warn) 38%,transparent);--warnBorderStrong:color-mix(in srgb,var(--warn) 44%,transparent);
--chartRef:#535B70;--chartMid:rgba(255,255,255,.08);
/* Update is one visual system: dark mode uses a luminous azure control
with cooler cyan progress, while light mode below switches to deeper
blue for contrast on white. These never use green/red, so refresh state
cannot be mistaken for a trade verdict. */
--syncButtonTop:#72B9FF;--syncButtonMid:#268BF0;--syncButtonBottom:#0D56A7;
--syncButtonSpecular:rgba(255,255,255,.52);--syncButtonRim:rgba(255,255,255,.36);
--syncButtonHighlight:rgba(255,255,255,.58);--syncButtonShade:rgba(0,24,67,.22);
--syncButtonGlow:rgba(38,139,240,.32);--syncButtonContact:rgba(0,0,0,.30);
--syncRingTrack:rgba(255,255,255,.22);--syncPrice:#F7FBFF;--syncBars:#A4EBFF;--syncFiling:#E5CCFF;
--syncProgressStart:#5DAEFF;--syncProgressEnd:#A4EBFF;--syncProgressTrack:rgba(255,255,255,.12);
--syncStatusDot:#5DAEFF;
--sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--surface-canvas:var(--ink);--surface-primary:var(--card);--surface-secondary:var(--cardS);
--surface-input:var(--inputbg);--separator:var(--lineS);
--elevation-raised:var(--shadow);--elevation-overlay:var(--shadowLg);
--status-ready:var(--up);--status-updating:var(--act);--status-generating:var(--act);
--status-stale:var(--warn);--status-insufficient:var(--faint);--status-unavailable:var(--faint);
--status-failed:var(--down);--status-neutral:var(--faint);
}
html[data-theme="light"]{
color-scheme:light;
/* Light mode is deliberately more than an inverted dark palette. A cool
canvas, white cards, a separate nested surface and a sunken input layer
make boundaries readable without depending on heavy shadows. */
--ink:#EDF2F7;--card:#FFFFFF;--cardS:#F2F6FA;--glass:rgba(255,255,255,.94);
--line:#CBD5E1;--lineS:#DEE5EE;
--text:#172033;--dim:#4F5E73;--faint:#5A6A7E;
--up:#176F3A;--down:#B83232;--downFill:#B83232;--warn:#765400;--warnFill:#765400;--onWarn:#FFFFFF;--act:#075FB8;--actFill:#075FB8;--onAct:#FFFFFF;
--cs-blue:#4D3DC9;--cs-pink:#C42361;--cs-lightblue:#0E7C9E;--cs-orange:#B35900;
--inputbg:#EAF0F6;--inputLine:#7D8A9D;--btn:#E3EBF4;--btn2:#D5E1EF;
--shadow:0 1px 2px rgba(15,23,42,.06),0 8px 20px rgba(15,23,42,.10);
--shadowLg:0 16px 38px rgba(15,23,42,.18);
--wash:radial-gradient(900px 420px at 50% -10%,color-mix(in srgb,var(--act) 10%,transparent),transparent 72%);
--noise:none;
--fabShadow:0 10px 24px color-mix(in srgb,var(--actFill) 24%,transparent),0 2px 6px rgba(15,23,42,.16);
--fabRing:rgba(255,255,255,.90);
--primaryTop:#2B844C;--primaryBottom:#176F3A;--primaryText:#FFFFFF;--primaryShadow:color-mix(in srgb,var(--up) 23%,transparent);
--focusRing:rgba(11,111,211,.16);--modalScrim:rgba(15,23,42,.28);
--accentTint:color-mix(in srgb,var(--act) 10%,transparent);--accentTintSoft:color-mix(in srgb,var(--act) 8%,transparent);--accentTintStrong:color-mix(in srgb,var(--act) 15%,transparent);--accentBorder:color-mix(in srgb,var(--act) 34%,transparent);
--upTint:color-mix(in srgb,var(--up) 9%,transparent);--upTintStrong:color-mix(in srgb,var(--up) 13%,transparent);--upBorder:color-mix(in srgb,var(--up) 34%,transparent);--upCheckBorder:color-mix(in srgb,var(--up) 24%,transparent);
--downTint:color-mix(in srgb,var(--down) 9%,transparent);--downTintCheck:color-mix(in srgb,var(--down) 10%,transparent);--downTintStrong:color-mix(in srgb,var(--down) 13%,transparent);--downBorder:color-mix(in srgb,var(--down) 32%,transparent);
--warnTint:color-mix(in srgb,var(--warn) 10%,transparent);--warnTintStrong:color-mix(in srgb,var(--warn) 14%,transparent);--warnBorder:color-mix(in srgb,var(--warn) 32%,transparent);--warnBorderStrong:color-mix(in srgb,var(--warn) 36%,transparent);
--chartRef:#A2ACBA;--chartMid:rgba(15,23,42,.08);
--syncButtonTop:#3A9BEF;--syncButtonMid:#0A66D6;--syncButtonBottom:#084C9E;
--syncButtonSpecular:rgba(255,255,255,.50);--syncButtonRim:rgba(255,255,255,.68);
--syncButtonHighlight:rgba(255,255,255,.62);--syncButtonShade:rgba(0,35,90,.26);
--syncButtonGlow:rgba(10,102,214,.26);--syncButtonContact:rgba(16,24,40,.20);
--syncRingTrack:rgba(255,255,255,.30);--syncPrice:#FFFFFF;--syncBars:#C4F1FF;--syncFiling:#F0DCFF;
--syncProgressStart:#0A66D6;--syncProgressEnd:#24B6D7;--syncProgressTrack:#D9E4F1;
--syncStatusDot:#0A66D6;
}
html[data-theme="dark"]{
color-scheme:dark;
--fabShadow:0 10px 26px color-mix(in srgb,var(--actFill) 40%,transparent),0 2px 6px rgba(0,0,0,.35);
--fabRing:rgba(255,255,255,.14);
--ink:#0B0F16;--card:#171E2B;--cardS:#1F2938;--glass:rgba(23,30,43,.94);
--line:#3B475A;--lineS:#2A3445;
--text:#F4F7FB;--dim:#AEB9CA;--faint:#8D99AD;
--up:#42D77D;--down:#FF6B63;--downFill:#C93F3A;--warn:#F2C84B;--warnFill:#F2C84B;--onWarn:#241B00;--act:#63ACFF;--actFill:#1976D2;--onAct:#FFFFFF;
--cs-blue:#7A78FF;--cs-pink:#FF375F;--cs-lightblue:#64D2FF;--cs-orange:#FF9500;
--inputbg:#101722;--inputLine:#606C84;--btn:#242E3E;--btn2:#303D51;
--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 20px rgba(0,0,0,.32);
--shadowLg:0 18px 44px rgba(0,0,0,.58);
--wash:radial-gradient(1100px 500px at 50% -10%,color-mix(in srgb,var(--act) 12%,transparent),transparent 72%);
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:light){
html:not([data-theme]){
color-scheme:light;
--ink:#EDF2F7;--card:#FFFFFF;--cardS:#F2F6FA;--glass:rgba(255,255,255,.94);
--line:#CBD5E1;--lineS:#DEE5EE;
--text:#172033;--dim:#4F5E73;--faint:#5A6A7E;
--up:#176F3A;--down:#B83232;--downFill:#B83232;--warn:#765400;--warnFill:#765400;--onWarn:#FFFFFF;--act:#075FB8;--actFill:#075FB8;--onAct:#FFFFFF;
--cs-blue:#4D3DC9;--cs-pink:#C42361;--cs-lightblue:#0E7C9E;--cs-orange:#B35900;
--inputbg:#EAF0F6;--inputLine:#7D8A9D;--btn:#E3EBF4;--btn2:#D5E1EF;
--shadow:0 1px 2px rgba(15,23,42,.06),0 8px 20px rgba(15,23,42,.10);
--shadowLg:0 16px 38px rgba(15,23,42,.18);
--wash:radial-gradient(900px 420px at 50% -10%,color-mix(in srgb,var(--act) 10%,transparent),transparent 72%);
--noise:none;
--fabShadow:0 10px 24px color-mix(in srgb,var(--actFill) 24%,transparent),0 2px 6px rgba(15,23,42,.16);
--fabRing:rgba(255,255,255,.90);
--primaryTop:#2B844C;--primaryBottom:#176F3A;--primaryText:#FFFFFF;--primaryShadow:color-mix(in srgb,var(--up) 23%,transparent);
--focusRing:rgba(11,111,211,.16);--modalScrim:rgba(15,23,42,.28);
--accentTint:color-mix(in srgb,var(--act) 10%,transparent);--accentTintSoft:color-mix(in srgb,var(--act) 8%,transparent);--accentTintStrong:color-mix(in srgb,var(--act) 15%,transparent);--accentBorder:color-mix(in srgb,var(--act) 34%,transparent);
--upTint:color-mix(in srgb,var(--up) 9%,transparent);--upTintStrong:color-mix(in srgb,var(--up) 13%,transparent);--upBorder:color-mix(in srgb,var(--up) 34%,transparent);--upCheckBorder:color-mix(in srgb,var(--up) 24%,transparent);
--downTint:color-mix(in srgb,var(--down) 9%,transparent);--downTintCheck:color-mix(in srgb,var(--down) 10%,transparent);--downTintStrong:color-mix(in srgb,var(--down) 13%,transparent);--downBorder:color-mix(in srgb,var(--down) 32%,transparent);
--warnTint:color-mix(in srgb,var(--warn) 10%,transparent);--warnTintStrong:color-mix(in srgb,var(--warn) 14%,transparent);--warnBorder:color-mix(in srgb,var(--warn) 32%,transparent);--warnBorderStrong:color-mix(in srgb,var(--warn) 36%,transparent);
--chartRef:#A2ACBA;--chartMid:rgba(15,23,42,.08);
--syncButtonTop:#3A9BEF;--syncButtonMid:#0A66D6;--syncButtonBottom:#084C9E;
--syncButtonSpecular:rgba(255,255,255,.50);--syncButtonRim:rgba(255,255,255,.68);
--syncButtonHighlight:rgba(255,255,255,.62);--syncButtonShade:rgba(0,35,90,.26);
--syncButtonGlow:rgba(10,102,214,.26);--syncButtonContact:rgba(16,24,40,.20);
--syncRingTrack:rgba(255,255,255,.30);--syncPrice:#FFFFFF;--syncBars:#C4F1FF;--syncFiling:#F0DCFF;
--syncProgressStart:#0A66D6;--syncProgressEnd:#24B6D7;--syncProgressTrack:#D9E4F1;
--syncStatusDot:#0A66D6;
}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{background-color:var(--ink);font-size:100%}
body{background-color:var(--ink);background-image:var(--wash),var(--noise);background-repeat:no-repeat,repeat;
background-attachment:fixed,fixed;color:var(--text);font-family:var(--sans);min-height:100dvh;
-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums;line-height:var(--leading-body);
padding:calc(20px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom))}
/* iOS renders its status bar above page content. Keep a slim glass surface there
while a list is scrolled so app values cannot visually run through the clock. */
body::before{content:"";position:fixed;z-index:51;top:0;right:0;left:0;
height:calc(env(safe-area-inset-top) + 8px);pointer-events:none;
background:color-mix(in srgb,var(--ink) 90%,transparent);
backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
/* min-height:100svh (the SMALLEST the viewport can be, browser chrome fully
shown), not the ambient 100dvh above -- 100dvh is live and grows the
instant Safari's address bar auto-collapses, which a tap-to-submit
interaction commonly triggers; a flex-centered auth card re-centers into
that newly-available space mid-interaction, reading as "the screen
suddenly got bigger." Locking the gate's own centering reference to the
smallest stable height means it never needs to recompute while a login
is in flight -- worst case a little empty space below the card once the
toolbar does eventually hide, an acceptable trade for a short-lived
screen with no reason to reflow under the user's thumb. */
body.gate{padding-bottom:calc(24px + env(safe-area-inset-bottom));display:flex;align-items:center;min-height:100svh}
.wrap{max-width:620px;margin:0 auto;width:100%;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;
margin-bottom:12px;box-shadow:var(--shadow);min-width:0;overflow-wrap:break-word}
.card.flush{padding:0;overflow:hidden}
.title{font-size:30px;font-weight:800;letter-spacing:-.03em}
.sub{font-size:13px;color:var(--faint);margin-top:2px;font-weight:500}
.pill{display:flex;align-items:center;gap:6px;padding:6px 11px;background:var(--card);
border:1px solid var(--line);border-radius:100px;font-size:11px;font-family:var(--mono);color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.dot.auto-refreshing{animation:autoRefreshDot 1.2s cubic-bezier(.22,1,.36,1) infinite;will-change:opacity,box-shadow}
@keyframes autoRefreshDot{0%,100%{opacity:.62;box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 0%,transparent)}
45%{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--up) 16%,transparent)}
70%{opacity:.76;box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 0%,transparent)}}
/* Scenario milestone status dots — five real states, one colour language,
reused nowhere else so a Watch-For dot is never confused with a setup
icon or the auto-refresh dot above. */
.dot.st-confirmed{background:var(--up)}
.dot.st-improving{background:var(--up);opacity:.55}
.dot.st-watching{background:var(--faint)}
.dot.st-deteriorating{background:var(--warn)}
.dot.st-failed{background:var(--down)}
.cap{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.lab{font-size:12px;font-weight:600;color:var(--dim);display:block;margin-bottom:8px;letter-spacing:-.01em}
input,select,textarea{width:100%;background:var(--inputbg);border:1px solid var(--inputLine);color:var(--text);
font-family:var(--mono);font-size:16px;padding:13px 14px;border-radius:13px;outline:none;
-webkit-appearance:none;font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{border-color:var(--act);box-shadow:0 0 0 3px var(--focusRing)}
textarea{resize:vertical;font-size:11px;line-height:1.5}
textarea.big{font-size:14.5px;line-height:1.6;min-height:104px}
.tag.conv{color:var(--warn);border-color:var(--warnBorderStrong)}
.vlist{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:9px}
.vlist div{padding:7px 0 7px 15px;position:relative}
.vlist div:before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--down)}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
button,[role="button"],summary,a,input,select,textarea{touch-action:manipulation}
:where(button,[role="button"],summary,a,input,select,textarea):focus-visible{
outline:3px solid color-mix(in srgb,var(--act) 72%,transparent);outline-offset:3px}
:where(input,select,textarea):focus-visible{outline-offset:1px}
.btn{width:100%;padding:14px;border-radius:14px;font-size:14px;font-weight:600;letter-spacing:-.01em;
position:relative;overflow:hidden;background:var(--btn);color:var(--text);
transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out),
opacity var(--d1) var(--e-out),box-shadow var(--d1) var(--e-out),transform .13s var(--e-out)}
.btn.primary{background:linear-gradient(180deg,var(--primaryTop),var(--primaryBottom));color:var(--primaryText);font-weight:700;
box-shadow:0 6px 20px var(--primaryShadow)}
.btn.blue{background:var(--actFill);color:var(--onAct)}
.btn.ghost{background:var(--card);border:.5px solid var(--line);color:var(--act)}
.btn.danger{background:var(--downTint);color:var(--down);border:1px solid var(--downBorder)}
/* A .btn is width:100% by default so it fills a flex:1 slot with no extra
markup -- but that same width becomes the used flex-basis for any sibling
stuck at flex:0 0 auto (flex-basis:auto falls back to the width property
when it isn't itself auto), so an unmodified .btn placed next to a flex:1
one explodes to the row's full width instead of hugging its own text.
.auto opts a button out of that by giving it a real auto width. */
.btn.auto{width:auto;flex:0 0 auto;padding-left:22px;padding-right:22px}
.btn:disabled{background:var(--btn);opacity:.5;color:var(--faint);cursor:not-allowed;box-shadow:none}
/* Setup broker sync keeps the existing provider-keyed busy state, now with
a visible spinner for the whole account read. Disabled stays blue so the
busy affordance is legible instead of looking like an unavailable action. */
.brokerSyncBtn:disabled,.broker-watchlist-sync-btn[aria-busy="true"]:disabled{
background:var(--actFill);color:var(--onAct);opacity:.78}
.broker-sync-busy{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.broker-sync-spin{display:inline-block;width:14px;height:14px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.42);border-top-color:#fff;
animation:earnCheckSpin .7s linear infinite;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.broker-sync-spin{animation:none}}
/* Setup's provider heading used to give the long status/account string an
inflexible max-content width. On a phone that starved even "Moomoo" down
to two letters per line. Keep the desktop row compact, then put status
beneath the provider name on mobile so both remain readable as one unit. */
.broker-provider-head{display:flex;align-items:center;gap:10px;min-width:0}
.broker-provider-badge{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.broker-provider-name{flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap}
.broker-provider-status{display:flex;align-items:center;justify-content:flex-end;gap:6px;
flex:0 1 auto;min-width:0;max-width:68%}
.broker-provider-status-text{min-width:0;color:var(--dim);font-size:12px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The primary broker action and Disconnect now share the available row
evenly; `.btn.auto` previously made Disconnect hug its label while the
other action absorbed everything else, which looked misaligned. */
.broker-provider-actions>.btn{width:0;flex:1 1 0}
.broker-watchlist-connected{display:flex;align-items:center;min-height:44px;flex:1;color:var(--up);font-size:12px;font-weight:700}
.broker-watchlist-actions{align-items:center}
.moomoo-snapshot-card{margin-top:12px;padding:13px;border:1px solid var(--lineS);border-radius:var(--radius-lg);background:var(--btn)}
.moomoo-snapshot-head{display:flex;align-items:flex-start;gap:10px}
.moomoo-snapshot-head>div{min-width:0;flex:1}.moomoo-snapshot-head b,.moomoo-snapshot-head span{display:block}
.moomoo-snapshot-head b{font-size:13px}.moomoo-snapshot-head>div>span{margin-top:3px;color:var(--faint);font-size:10.5px}
.moomoo-snapshot-card p{margin:10px 0;color:var(--faint);font-size:11px;line-height:1.55}
.moomoo-snapshot-card>.btn{margin-top:10px}
.moomoo-snapshot-meta{margin-top:5px;color:var(--faint);font-size:10.5px;line-height:1.45}
@media(max-width:480px){
.broker-provider-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px}
.broker-provider-badge{grid-column:1;grid-row:1 / span 2;align-self:center}
.broker-provider-name{grid-column:2;grid-row:1}
.broker-provider-status{grid-column:2;grid-row:2;justify-content:flex-start;max-width:100%}
.broker-provider-status-text{white-space:normal;line-height:1.35;overflow:visible;
overflow-wrap:anywhere;text-overflow:clip}
}
@media(max-width:340px){
.broker-provider-actions{flex-direction:column}
.broker-provider-actions>.btn{width:100%;flex:1 1 auto}
}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
min-width:0;font-size:13.5px;margin-top:10px}
.kv span:first-child{min-width:0;color:var(--dim);overflow-wrap:anywhere}
.kv span:last-child{min-width:min-content;max-width:58%;font-family:var(--mono);
font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
/* Setup > Account: one consistent "caption above, value below, full width"
row for every fact (Signed in as, Email, Sync, Plan, Access, ...) instead
of the side-by-side .kv pattern, whose 58%-wide right-aligned value
column has no good place to line-wrap something long and unbroken like
an email (it was breaking mid-domain, e.g. "yahoo.c" / "om"). Full width
removes the wrap problem structurally instead of one-off patching just
the row that happened to overflow, and every row now shares the exact
same shape -- a thin divider between rows does the scanability work the
old label-left/value-right layout relied on column alignment for. */
.acct-row{padding:11px 0;border-bottom:.5px solid var(--lineS)}
.acct-row:first-of-type{padding-top:2px}
.acct-row:last-of-type{border-bottom:none;padding-bottom:2px}
.acct-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.acct-value{margin-top:5px;font-size:14.5px;color:var(--text);font-family:var(--mono);
font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.acct-pill{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:2px 7px;border-radius:100px;flex:0 0 auto}
.hero{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:7px}
.mut{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:4px}
.desk-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.desk-summary-value{font-family:var(--mono);font-size:clamp(22px,7.2vw,36px);font-variant-numeric:tabular-nums;
letter-spacing:-.055em;white-space:nowrap;overflow-wrap:normal}
@media (max-width:350px){.desk-summary-grid{gap:10px}.desk-summary-value{font-size:clamp(20px,6.8vw,24px)}}
/* Pantau's Signal Dock stays above the separate Add action so every tab wins
a crowded tap. Its quiet blue-to-green rim suggests observation becoming
useful without turning the whole navigation into a market-status signal. */
.nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50}
.navin{position:relative;isolation:isolate;display:grid;width:100%;max-width:560px;
grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0 auto;padding:6px;
background:linear-gradient(180deg,color-mix(in srgb,var(--glass) 96%,var(--text) 4%),var(--glass));
backdrop-filter:blur(30px) saturate(1.22);-webkit-backdrop-filter:blur(30px) saturate(1.22);
border:1px solid color-mix(in srgb,var(--line) 78%,var(--act) 22%);border-radius:26px;
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent),var(--shadowLg),
0 0 24px color-mix(in srgb,var(--act) 7%,transparent)}
.navin::before{content:"";position:absolute;z-index:0;top:-1px;right:24px;left:24px;height:2px;
border-radius:99px;background:linear-gradient(90deg,transparent,var(--act) 42%,var(--up) 64%,transparent);
opacity:.72;pointer-events:none}
/* Four fixed observation slots keep labels and 3-digit counts from shifting
the dock. Selection lives in the small icon lens, not a heavy full tile. */
.navin button{position:relative;z-index:1;display:flex;min-width:0;min-height:54px;flex-direction:column;
align-items:center;justify-content:center;gap:3px;padding:5px 3px 7px;border:1px solid transparent;
border-radius:17px;color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:.005em;
transition:color .18s var(--e-out),transform .13s var(--e-out)}
.navin .nl{position:relative;line-height:1;transition:color .18s var(--e-out),font-weight .18s var(--e-out)}
.navin .ic{position:relative;display:flex;width:34px;height:28px;flex:0 0 auto;align-items:center;
justify-content:center;border:1px solid transparent;border-radius:10px;
transition:color .18s var(--e-out),background .18s var(--e-out),border-color .18s var(--e-out),
box-shadow .18s var(--e-out),transform .13s var(--e-out)}
.navin .ic svg{display:block;width:21px;height:21px}
.navin button.on{background:transparent;color:var(--act)}
.navin button.on .ic{border-color:var(--accentBorder);
background:linear-gradient(180deg,var(--accentTintStrong),var(--accentTintSoft));
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 9%,transparent),
0 4px 12px color-mix(in srgb,var(--act) 13%,transparent)}
.navin button.on .nl{color:var(--text);font-weight:800}
.navin button::after{content:"";position:absolute;bottom:3px;left:50%;width:18px;height:2px;
border-radius:99px;background:linear-gradient(90deg,var(--act),var(--up));opacity:0;
transform:translateX(-50%) scaleX(.35);transition:opacity .18s var(--e-out),transform .22s var(--e-out)}
.navin button.on::after{opacity:1;transform:translateX(-50%) scaleX(1)}
/* Counts stay exact but quieter, anchored to the lens so they never resize a
tab. Ideas' priority dot remains a separate gold signal opposite it. */
.navin .ct{position:absolute;top:-5px;right:-8px;min-width:17px;height:17px;padding:0 4px;
border:1px solid color-mix(in srgb,var(--onAct) 28%,transparent);border-radius:100px;
background:var(--actFill);color:var(--onAct);font-family:var(--mono);font-size:8.5px;font-weight:850;
line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--glass),0 2px 7px color-mix(in srgb,var(--actFill) 26%,transparent)}
.navin .nd{position:absolute;top:-3px;left:-5px;width:8px;height:8px;border-radius:50%;
background:var(--warn);box-shadow:0 0 0 2px var(--glass),0 0 8px color-mix(in srgb,var(--warn) 55%,transparent)}
@media(hover:hover){.navin button:not(.on):hover{color:var(--text)}.navin button:not(.on):hover .ic{background:var(--accentTintSoft)}}
/* Add is an action, not a destination — so it stays a button that floats
over Desk rather than a tab of its own, even now that Ideas is one. */
/* Its friendly squircle and shared material make it a companion to the dock,
while blue keeps Add distinct from green trading outcomes. */
.fab{position:fixed;right:max(18px,calc(50vw - 272px));bottom:calc(88px + env(safe-area-inset-bottom));z-index:45;
width:52px;height:52px;border-radius:18px;
background:radial-gradient(120% 110% at 28% 14%,color-mix(in srgb,var(--onAct) 38%,transparent),transparent 43%),
linear-gradient(155deg,color-mix(in srgb,var(--actFill) 86%,var(--onAct)),var(--actFill));color:var(--onAct);
display:flex;align-items:center;justify-content:center;
box-shadow:var(--fabShadow);border:1.5px solid var(--fabRing);
transition:transform .16s var(--e-out),opacity .18s var(--e)}
.fab svg{width:23px;height:23px;display:block}
.fab:active{transform:scale(.9)}
body.hasfab{padding-bottom:calc(172px + env(safe-area-inset-bottom))}
body.ideas-filters-open #fab{opacity:0;pointer-events:none;transform:translateY(8px) scale(.9)}
@media(prefers-reduced-motion:reduce){.navin button,.navin .nl,.navin .ic,.navin button::after,.fab{transition:none}.navin button:active,.fab:active{transform:none!important}}
@media(forced-colors:active){.navin{border-color:CanvasText;background:Canvas;box-shadow:none}.navin::before{display:none}.navin button.on .ic{border:2px solid Highlight;background:Canvas;box-shadow:none}.navin button.on::after{background:Highlight}.navin .ct,.navin .nd{border:1px solid CanvasText;box-shadow:none}}
/* The one button in the tab bar that isn't a destination — its own circle,
larger and coloured, so it still reads as "the action" without needing to
float above the bar to prove it. Earlier versions raised it (first by a
guessed margin-top, then by centring it on the bar's TOP EDGE) and both
read as "too high" — reasonably: half a button hanging off the top of a
pill isn't centred in that pill, it's centred on its rim. This version
centres it on the bar's actual vertical middle instead, the same cross-
axis centre every other tab gets from the row's own alignment — no
transform, no offset to keep in sync with anything. Horizontally it's
simply the middle child of five, flanked by two tabs on each side.
The material is glass, not a flat gradient disc — a soft specular
highlight top-left, a paler rim light, and a shadow stack (inner top
highlight, inner bottom shade, coloured ambient glow, a crisp contact
shadow) rather than one flat drop shadow. That combination — thin
precise ring, translucent white borders, restraint instead of a looping
idle animation — is what was actually meant by "Apple-like": the
material communicates depth on its own, so nothing needs to keep moving
to prove the button is alive. */
.navin .navsync{flex:0 0 auto;width:54px;height:54px;min-height:0;padding:0;
align-self:center;
border-radius:50%;position:relative;
/* The hold gesture sits right on top of iOS's own long-press trigger — the
text-selection magnifier and callout menu popping up over "SYNC" mid-hold
was that default behaviour firing on top of ours, not the ring itself
doing anything wrong. touch-action stops the browser treating this as a
scroll/zoom/select surface at all, so only the pointerdown/up handlers
in events.js ever see the gesture. */
touch-action:manipulation;-webkit-touch-callout:none;
-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
background:
radial-gradient(120% 130% at 32% 18%,var(--syncButtonSpecular),transparent 42%),
linear-gradient(165deg,var(--syncButtonTop),var(--syncButtonMid) 60%,var(--syncButtonBottom));
border:1px solid var(--syncButtonRim);
box-shadow:
inset 0 1px 1px var(--syncButtonHighlight),
inset 0 -7px 11px var(--syncButtonShade),
0 6px 14px var(--syncButtonGlow),
0 1px 3px var(--syncButtonContact);
transition:transform .16s var(--e-out),opacity .18s var(--e),box-shadow .18s var(--e)}
.navin .navsync:active{transform:scale(.93)}
/* The hold gesture's only other tell besides the ring itself — a soft green
glow that grows in over the same HOLD_MS the ring takes to fill, so the
two read as one cue building together rather than the ring alone.
color-mix(var(--up)) rather than a literal rgba: the ring stroke itself
(set inline, in events.js) already resolves to this theme's --up, and a
fixed dark-theme green here made the halo visibly mismatch the ring's own
colour in light mode — one glow, one variable, in both themes now. */
.navin .navsync.charging{box-shadow:
inset 0 1px 1px var(--syncButtonHighlight),
inset 0 -7px 11px var(--syncButtonShade),
0 0 0 7px color-mix(in srgb,var(--up) 22%,transparent),
0 6px 14px var(--syncButtonGlow),
0 1px 3px var(--syncButtonContact);
transition:box-shadow .55s linear}
/* Busy is also marked disabled (a second tap mid-sweep is a no-op, guarded in
updatePrices() itself) but must stay at full strength — the ring is doing
its most important work right there, and dimming it would read as broken
rather than working. Only genuinely idle-with-nothing-to-do dims. */
.navin .navsync:disabled:not(.busy):not(.auto-shining){opacity:.5}
.navin .navsync.empty:not(.busy):not(.auto-shining){opacity:.4}
.navsyncring{position:absolute;inset:0;transition:opacity .18s var(--e)}
.navsyncring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.navsyncbg{fill:none;stroke:var(--syncRingTrack);stroke-width:1.75}
.navsyncarc{fill:none;stroke:var(--syncPrice);stroke-width:1.75;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
/* Automatic refresh is deliberately quieter than an update the person
started -- the dot at the top already tells the truth about background
work, so this button doesn't try to reproduce the ring's exact-progress
read for a run nobody's actively watching. It used to answer with a
diagonal shine sweeping across the whole button; now it fills the icon
itself left-to-right instead (see .navsyncmarkfill below, driven by
animateProgress() in prices.js), a real percent-complete rather than an
ambient loop with no relationship to actual progress. */
.navin .navsync.auto-shining .navsyncring{opacity:0}
/* The mark at rest, the word while busy — same slot, swapped by the one
.busy class shell.js already toggles on the button for the ring/disabled
state. Nothing about the word's own logic changes: whichever ticker is
being read while busy, one flip-in per name so a run of AAPL → MSFT →
NVDA reads as a rotation rather than a flicker. Restarting a CSS
animation from JS needs the class removed, a reflow forced, then
re-added — see the wordEl handling in shell.js. */
.navsyncmarkwrap{position:relative;width:27px;height:27px;flex:0 0 auto}
.navsync.busy .navsyncmarkwrap{display:none}
.navsyncmark{position:absolute;inset:0;display:block;width:27px;height:27px}
/* The fill copy sits on top of the dim track copy, invisible and fully
clipped away until a quiet pull is actually running -- at rest (and
during a MANUAL update, which keeps the ring instead) it never shows,
so it can safely just always exist in the DOM rather than being
mounted/unmounted per state. */
.navsyncmarkfill{clip-path:inset(0 100% 0 0);opacity:0}
.navin .navsync.auto-shining .navsyncmarkfill{opacity:1;transition:clip-path .1s linear}
.navin .navsync.auto-shining .navsyncmark:not(.navsyncmarkfill){opacity:.3}
.navsyncword{position:relative;display:none;color:#fff;font-family:var(--mono);font-weight:800;
font-size:10px;letter-spacing:.02em;text-align:center;line-height:1;
text-shadow:0 1px 2px rgba(0,0,0,.18);
max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navsync.busy .navsyncword{display:block}
.navsyncword.flip{animation:navwordFlip .32s var(--e-out) both}
@keyframes navwordFlip{from{opacity:0;transform:translateY(6px) rotateX(35deg)}to{opacity:1;transform:none}}
/* The ring and its glow both sit directly under a real thumb the whole time
it's held — the one place on this button a press can never actually see.
This floats clear of that: a pill above the button, same visual language
as toast(), that a thumb pressing straight down never covers. The bar
inside mirrors the ring's own fill so there are two independent reads of
"how far along", and the label itself flips at the exact instant a
release would trigger the full sweep — the one moment worth calling out
loudest, since the vibration events.js also fires there is silent on
iOS Safari (the Vibration API was never implemented in WebKit), so this
cannot be the only cue that moment gets. */
.navsynchint{position:absolute;left:50%;bottom:calc(100% + 12px);
transform:translateX(-50%) translateY(6px) scale(.94);opacity:0;pointer-events:none;
transition:opacity .15s var(--e),transform .15s var(--e);
background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:.5px solid var(--line);border-radius:100px;padding:8px 14px 8px 12px;
box-shadow:var(--shadowLg);white-space:nowrap;display:flex;align-items:center;gap:8px;z-index:5}
.navsync.charging .navsynchint{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.navsynchintbar{display:block;width:34px;height:5px;border-radius:100px;background:var(--line);overflow:hidden;flex:0 0 auto}
.navsynchintbar em{display:block;height:100%;width:0;border-radius:100px;background:var(--up)}
.navsynchint b{font-size:12px;font-weight:700;color:var(--dim);white-space:nowrap}
.navsynchint.ready{animation:navHintReady .32s var(--e-out);
background:color-mix(in srgb,var(--up) 18%,var(--glass));border-color:color-mix(in srgb,var(--up) 45%,var(--line))}
.navsynchint.ready b{color:var(--up)}
@keyframes navHintReady{0%{transform:translateX(-50%) translateY(0) scale(1)}45%{transform:translateX(-50%) translateY(0) scale(1.09)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
.seg{display:flex;gap:3px;padding:3px;background:var(--inputbg);border-radius:12px;margin-bottom:16px}
/* A longer or text-scaled label wraps inside its own equal-width control;
navigation meaning is never traded for an ellipsis. */
.seg button{flex:1;padding:10px 6px;min-height:44px;border-radius:10px;font-size:13.5px;font-weight:600;
color:var(--dim);letter-spacing:-.01em;transition:all .2s;
white-space:normal;overflow-wrap:anywhere}
.seg button.on{background:var(--btn2);color:var(--text)}
.tag{font-size:10.5px;padding:2px 7px;border-radius:100px;border:.5px solid var(--line);color:var(--faint)}
.tag.br{color:var(--down);border-color:var(--downBorder)}
.tag.held{color:var(--act);border-color:var(--accentBorder)}
.tag.hit{color:var(--up);border-color:var(--upBorder)}
.tag.reason{color:var(--warn);border-color:var(--warnBorder);text-transform:none;font-size:9.5px}
.session-mini{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
padding:2px 5px;border:1px solid var(--accentBorder);border-radius:100px;background:var(--accentTint);
color:var(--act);font-size:10px;font-weight:800;line-height:1.1;letter-spacing:.04em}
/* This is an information strip, not another card inside a position card. Its
two columns make the comparison readable at a glance without suggesting an
extended-hours print is the same thing as a regular-session close. */
.session-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin-top:12px;
padding:11px 0;border-top:.5px solid var(--lineS);border-bottom:.5px solid var(--lineS)}
.session-price-cell{min-width:0;padding-right:12px}
.session-price-cell+.session-price-cell{padding:0 0 0 14px;border-left:.5px solid var(--lineS)}
.session-price-kicker{display:flex;align-items:center;gap:6px;min-height:14px;color:var(--faint);
font-size:9px;font-weight:800;letter-spacing:.065em;line-height:1.2}
.session-price-tag{display:inline-flex;align-items:center;justify-content:center;height:15px;min-width:24px;
padding:0 5px;border:1px solid var(--accentBorder);border-radius:100px;background:var(--accentTint);
color:var(--act);font-family:var(--sans);font-size:8px;font-style:normal;font-weight:800;letter-spacing:.04em}
.session-price-value{display:block;margin-top:4px;color:var(--text);font-family:var(--mono);font-size:17px;
font-weight:800;line-height:1.15;white-space:nowrap}
.session-price-reading{display:flex;align-items:baseline;gap:7px;min-width:0}
.session-price-change{font-family:var(--mono);font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap;color:var(--faint)}
.session-price-change.is-up{color:var(--up)}
.session-price-change.is-down{color:var(--down)}
.session-price small{display:block;min-width:0;margin-top:4px;color:var(--faint);font-family:var(--mono);
font-size:10.5px;line-height:1.35;overflow-wrap:anywhere}
.session-price-note{margin:7px 0 0;color:var(--faint);font-size:10.5px;line-height:1.4}
@media (max-width:360px){
.session-price{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.session-price-value{font-size:15px}
.session-price-change{font-size:9.5px}
}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:var(--btn);
border-radius:100px;font-size:13px;font-weight:500;margin:0 6px 8px 0}
.chip button{color:var(--faint);font-size:15px;line-height:1;padding:0 2px}
.rail{position:relative;height:10px;margin-top:16px}
.railbar{position:absolute;top:4px;left:0;right:0;height:2.5px;border-radius:2px}
.railentry{position:absolute;top:1px;width:1.5px;height:9px;border-radius:1px;background:var(--faint)}
.raildot{position:absolute;top:0;width:10px;height:10px;border-radius:50%;transform:translateX(-5px);
transition:left .25s cubic-bezier(.25,1,.5,1)}
.bar{height:3.5px;background:var(--inputbg);border-radius:2px;overflow:hidden;flex:1}
.bar>i{display:block;height:100%;border-radius:2px}
.chk{display:flex;gap:12px;align-items:center;margin-bottom:9px;padding:14px;border-radius:14px;
background:var(--inputbg);border:.5px solid transparent;font-size:14px;font-weight:500;
color:var(--dim);letter-spacing:-.01em;transition:background .2s;cursor:pointer}
.chk.on{background:var(--upTint);border-color:var(--upCheckBorder);color:var(--text)}
/* A real native checkbox, but drawn by hand rather than left to
accent-color -- confirmed live ("although it tick, but it doesnt feel
like ticking the box"): native checkbox rendering with accent-color
varies enough across browsers/WebViews that a checked state can read as
a plain filled dot with no clear tick, not the deliberate green-card-plus-
checkmark this app's own .cbx component already draws by hand elsewhere
(see js/views/new.js's fEarnOv). Same fix, applied to the CSS only --
every .chk input stays a real (unchanged
markup, unchanged :checked/onchange wiring everywhere it's used), just
painted consistently instead of however the platform feels like that day. */
.chk input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 auto;
border-radius:6px;border:1.5px solid var(--faint);background:var(--inputbg);
padding:0;margin:0;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.chk input:checked{background:var(--up);border-color:var(--up)}
.chk input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:9px;
border:solid var(--primaryText);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk.warn.on{background:var(--downTintCheck);border-color:var(--downBorder);color:var(--down)}
.chk.warn input:checked{background:var(--downFill);border-color:var(--downFill)}
.chk.warn input:checked::after{border-color:#fff}
.cbx{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--faint);flex:0 0 auto;
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
color:transparent;transition:all .18s;background:transparent}
.cbx.on{background:var(--downFill);border-color:var(--downFill);color:#fff}
.sug{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:5px;background:var(--glass);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:.5px solid var(--line);
border-radius:14px;overflow:hidden;box-shadow:var(--shadowLg)}
/* touch-action:manipulation -- same fix, same reasoning as .navin .navsync
above: without it the browser can spend a moment deciding whether a tap
here is the start of a scroll before ever dispatching pointerdown,
which is what an intermittently-unresponsive suggestion tap looks like
on a real device. */
.sug div{padding:13px 15px;display:flex;align-items:baseline;gap:10px;border-top:.5px solid var(--lineS);
touch-action:manipulation}
.sug div:first-child{border-top:none}
.sug b{font-family:var(--mono);font-size:14px;min-width:56px}
.sug s{font-size:13px;color:var(--dim);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal{position:fixed;inset:0;background:var(--modalScrim);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:56}
.modal .card{background:var(--glass);max-width:380px;width:100%;margin:0}
.chart-modal-panel{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;background:var(--ink)}
.chart-modal-head{flex:0 0 auto;position:relative;z-index:2}
.chart-modal-host{flex:1 1 auto;min-height:0;position:relative;z-index:1}
.chart-modal-host #tvFall{z-index:2}
/* .chart-modal-panel is a rigid height:100% flex column with no scroll
container of its own -- adding the Candle State panel as a second
.chart-lens block meant that, with "Why this state" expanded, the two
lens blocks combined could exceed the viewport with nothing able to
scroll to reach the rest. Capped + independently scrollable so the
TradingView host below always keeps a stable minimum share instead of
being squeezed toward nothing. */
.chart-lens-scroll{flex:0 0 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:min(45vh,420px)}
.chart-lens{flex:0 0 auto;padding:10px 16px 9px;background:var(--cardS);border-bottom:.5px solid var(--lineS)}
.chart-lens-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.chart-lens-head span{font-size:9.5px;font-weight:700;letter-spacing:.07em;color:var(--faint)}
.chart-lens-head b{font-size:11px;font-weight:600;color:var(--dim)}
.chart-lens-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:9px}
.chart-lens-cell{min-width:0;padding:0 9px;border-left:.5px solid var(--lineS)}
.chart-lens-cell:first-child{padding-left:0;border-left:none}
.chart-lens-cell:last-child{padding-right:0}
.chart-lens-cell span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);overflow-wrap:anywhere}
.chart-lens-cell b{display:block;min-width:0;font-family:var(--mono);font-size:11.5px;font-weight:700;
margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.chart-lens-note{font-size:10.5px;color:var(--faint);line-height:1.45;margin-top:7px}
@media (max-width:390px){
.chart-lens-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 0}
.chart-lens-cell:nth-child(3){padding-left:0;border-left:none}
}
.desk-card,.compact-card,.hist-compact-card,.idea-card{cursor:pointer}
/* One compact pill per broker in a horizontally-scrolling row instead of a
stacked full-width row per broker -- scales in WIDTH (a swipe) instead
of HEIGHT (a taller page) as connections grow, same overflow-x:auto
pattern the Portfolio Risk legend row already uses above this. */
.desk-broker-strip{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:0 0 8px;padding:2px 1px 6px}
.desk-broker-pill{position:relative;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
border:1px solid var(--lineS);border-radius:100px;padding:6px 12px 6px 9px;background:var(--cardS);
color:var(--text);font-size:11px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
transition:background var(--d1),border-color var(--d1),transform .12s var(--e-out),opacity var(--d1);
touch-action:manipulation}
.desk-broker-pill:active{transform:scale(.94)}
.desk-broker-pill:disabled{cursor:default}
.desk-broker-pill:not([aria-busy="true"]):disabled{opacity:.5}
.desk-broker-pill-icon{display:inline-flex;flex:0 0 auto;color:var(--act);transition:transform .5s var(--e-out)}
.desk-broker-pill[aria-busy="true"]{background:color-mix(in srgb,var(--act) 16%,var(--cardS));border-color:transparent}
.desk-broker-pill[aria-busy="true"] .desk-broker-pill-icon{animation:earnCheckSpin .8s linear infinite}
@media(prefers-reduced-motion:reduce){
.desk-broker-pill-icon{transition:none}
.desk-broker-pill[aria-busy="true"] .desk-broker-pill-icon{animation:none}
}
/* Mine is the only enabled, private Ideas scope. Detail expands in place so
the compact row and its full evidence/AI card retain one width and rhythm. */
/* P7.1: was a single static "Mine" pill; now a real 3-way universe
selector, stacked above its own subtitle instead of sitting inline
with it -- three 44px-tall segments already fill a 320px row on their
own, so a beside-it caption would crowd. Reuses .workspace-tabs/
.workspace-tab (History's bordered section nav) rather than the
plain .seg pill, for the same look across both tabs. */
.ideas-scope{display:flex;flex-direction:column;gap:5px;margin:2px 2px 10px;color:var(--faint)}
.ideas-scope .workspace-tabs{margin-bottom:0}
.ideas-scope small{font-size:11px;padding:0 2px}
.desk-card,.idea-card{width:100%;min-width:0;overflow:hidden;transform-origin:top center}
.desk-card{scroll-margin-block-start:calc(env(safe-area-inset-top) + 16px);scroll-margin-block-end:calc(104px + env(safe-area-inset-bottom))}
/* Stock-card expand/collapse (Desk/Ideas/History) now animates a REAL
measured height via events.js's animateStockCardHeight/stockCardExpand
helpers, not this opacity+scaleY "opening"/"closing" flash -- scaleY
specifically distorts the card's own text, and neither of these ever
animated height at all (the compact<->expanded swap just snapped).
.opening/.closing still get applied by desk.js/ideas.js/history.js for
OTHER reasons (a brand new trade/idea appearing, say); animation:none
here only stops it from ALSO firing -- a second, conflicting animation --
on top of the new height transition specifically for these three card
families. .card.opening's generic rule (this file, further down) would
otherwise still reach these via their shared base .card class. */
.desk-card.opening,.idea-card.opening,.hist-trade-card.opening,
.desk-card.closing,.idea-card.closing{animation:none}
/* Two different mechanisms share these classes, per events.js:
- animateStockCardReveal() (the primary card the user tapped to open)
animates clip-path only, and never touches height at all -- the
element's real layout height is already final the instant render()
mounts it, so clip-path is a pure GPU-compositor reveal, the same
cost class as the flip card's own transform:rotateY. This is the
actual fix for the animation reading as laggy next to the flip card:
animating `height` is fundamentally layout-triggering (the browser
must reflow the card's own contents on every single frame), and no
amount of contain/will-change scoping removes that -- only NOT
animating height at all does (reported live, still true after the
first contain/will-change pass: "flip is smoother, expand/collapse
laggy").
- animateStockCardHeight() (collapsing -- both the explicit close and
an auto-closed sibling, collapseOtherStockCards) still animates
height for real, because a SHRINKING target has no "extra content"
below it to reveal via clip-path in reverse. Left as a real height
transition deliberately: shrinking has progressively LESS to lay out
each frame, not more, so it was never what read as laggy. */
/* Deliberately NOT an unconditional transition on the base card/row
classes: height and clip-path both need to react ONLY to the explicit
pin-then-target sequence in events.js, during the .scx-animating
window. A transition declared here unconditionally instead applied to
ANY incidental height change too -- a live price tick nudging the
quote text's wrap, a candle-state chart resizing itself after mount,
anything -- silently kicking off an unrelated ~340ms creep completely
outside a real expand/collapse action (confirmed live: measured this
element's height still visibly climbing for a further ~150ms after the
deliberate clip-path reveal had already finished settling).
.scx-animating is added the instant a card's reveal/collapse starts,
so this is the "before" frame a forced reflow commits -- content starts
invisible/offset, never a resting default (a card rendered any other
way never gets this class at all). contain/will-change scope and hint
the (still real) height-collapse path; they're harmless no-ops for the
clip-path reveal path, which needs no such help since it was never
layout-triggering to begin with. Everything here is removed again once
the transition settles (events.js) -- holding a compositing layer, or a
live transition, open permanently for every card would cost real
memory/CPU for no benefit and reintroduce the exact bug this comment
describes.
.scx-revealed follows one frame later, and ONLY the combined selector
below adds opacity/transform to the transition list, so the opacity:0
start itself never animates -- only the reveal into view does. No
scaleY anywhere, so text never distorts, per the interaction spec. Its
duration matches whichever of height/clip-path this instance is
actually animating, so the content-fade and the box's own motion
finish together -- one coordinated motion, not two. */
.desk-card.scx-animating,.idea-card.scx-animating,.hist-trade-card.scx-animating,.pf-risk-card.scx-animating{
opacity:0;transform:translateY(6px);contain:layout style;will-change:height,clip-path;
transition:height .34s cubic-bezier(.4,0,.2,1),clip-path .34s cubic-bezier(.4,0,.2,1)}
.crow.desk-compact-row.scx-animating,.crow.idea-compact-row.scx-animating,.crow.hist-compact-row.scx-animating{
opacity:0;transform:translateY(6px);contain:layout style;will-change:height;
transition:height .28s cubic-bezier(.4,0,.2,1)}
.desk-card.scx-animating.scx-revealed,.idea-card.scx-animating.scx-revealed,.hist-trade-card.scx-animating.scx-revealed,.pf-risk-card.scx-animating.scx-revealed{
opacity:1;transform:none;transition:height .34s cubic-bezier(.4,0,.2,1),clip-path .34s cubic-bezier(.4,0,.2,1),opacity .34s var(--e-out),transform .34s var(--e-out)}
.crow.desk-compact-row.scx-animating.scx-revealed,.crow.idea-compact-row.scx-animating.scx-revealed,.crow.hist-compact-row.scx-animating.scx-revealed{
opacity:1;transform:none;transition:height .28s cubic-bezier(.4,0,.2,1),opacity .28s var(--e-out),transform .28s var(--e-out)}
.desk-card-heading{min-width:0}
.desk-card-identity-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px}
.desk-card-ticker{min-width:0;overflow:hidden;font-size:20px;font-weight:800;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
.desk-card-return{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.desk-card-tag-row{min-width:0;align-items:center;gap:7px}
/* The rail spans the entire card instead of competing with the fixed quote
column. All expanded cards therefore begin their badges at the same point;
only genuinely long badge sets wrap, never the ticker length itself. */
.desk-card-badge-rail{display:flex;width:100%;flex-wrap:wrap;margin-top:7px}
.desk-card-position-row{display:grid;grid-template-columns:minmax(0,1fr) 118px;align-items:center;gap:10px;margin-top:5px}
.desk-card-position-copy{min-width:0}.desk-card-position-summary{color:var(--dim);font-size:12px;line-height:1.4}
.desk-card-quote{min-width:0;text-align:right}.desk-card-quote .px{max-width:100%}
/* Expanded Desk metadata uses one physical badge whether it is a passive
span or a tappable explanation button. This scoped rule does not touch
the compact row's separate 48px decision-chip geometry. */
.desk-card-tag-row .tag{display:inline-flex;min-height:22px;box-sizing:border-box;align-items:center;justify-content:center;padding:2px 7px;font-family:var(--sans);font-size:10.5px;font-weight:500;line-height:1.1;letter-spacing:0;white-space:nowrap;vertical-align:middle}
.desk-card-tag-row .tag.reason{font-size:10.5px}
.desk-card .row,.idea-card .row{min-width:0}
.desk-card .row>*,.idea-card .row>*{min-width:0}
.desk-final-status-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px}.desk-final-status-caption{color:var(--faint);font-size:9px;font-weight:700;letter-spacing:.06em;white-space:nowrap}.desk-final-status-decision{display:flex;min-width:0;align-items:baseline;gap:4px;overflow:hidden;white-space:nowrap}.desk-final-status-action{min-width:0;flex:0 0 auto;font-size:13px;font-weight:800;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}.desk-final-status-inline-meta{min-width:0;flex:1 1 auto;overflow:hidden;color:var(--faint);font-size:8.5px;font-weight:750;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}.desk-final-status-head .tm-details-btn{padding:4px 0;background:transparent;color:var(--act);font-size:11px;font-weight:700;white-space:nowrap}
.desk-plan-needed{margin-top:11px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--warn) 7%,transparent)}
.desk-plan-needed>div{display:flex;align-items:baseline;justify-content:space-between;gap:9px}.desk-plan-needed span{flex:0 0 auto;color:var(--warn);font-size:9.5px;font-weight:850;letter-spacing:.07em}.desk-plan-needed b{color:var(--text);font-size:11.5px;text-align:right}.desk-plan-needed p{margin:6px 0 0;color:var(--dim);font-size:10.5px;line-height:1.4}
.desk-level-notes{margin-top:8px;border-top:1px solid var(--lineS)}.desk-level-notes>summary{display:flex;min-height:38px;align-items:center;justify-content:space-between;cursor:pointer;color:var(--faint);font-size:10.5px;font-weight:700;list-style:none}.desk-level-notes>summary::-webkit-details-marker{display:none}.desk-level-notes>summary i{font-style:normal;font-size:16px;transition:transform var(--d1) var(--e-out)}.desk-level-notes[open]>summary i{transform:rotate(90deg)}.desk-level-notes>div{padding:0 0 4px}.desk-level-notes p{margin:0 0 6px;color:var(--faint);font-size:10.5px;line-height:1.45}
.desk-tech-glance{margin-top:10px;border-radius:13px;background:var(--btn)}.desk-tech-glance>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;min-height:42px;align-items:center;gap:8px;padding:0 12px;cursor:pointer;list-style:none}.desk-tech-glance>summary::-webkit-details-marker{display:none}.desk-tech-glance>summary span{color:var(--faint);font-size:9.5px;font-weight:700;letter-spacing:.07em}.desk-tech-glance>summary b{overflow:hidden;font-size:11.5px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.desk-tech-glance>summary i{color:var(--faint);font-size:16px;font-style:normal;transition:transform var(--d1) var(--e-out)}.desk-tech-glance[open]>summary i{transform:rotate(90deg)}.desk-tech-glance-body{padding:0 12px 11px}
.desk-card-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:10px}.desk-card-actions .btn{display:flex;width:auto;min-width:0;min-height:42px;align-items:center;justify-content:center;gap:3px;padding:7px 3px;overflow:hidden;white-space:nowrap;overflow-wrap:normal;font-size:10.5px}.desk-card-actions .btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.desk-card-actions svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.idea-card-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px}.idea-card-actions .btn{display:flex;width:auto;min-width:0;min-height:42px;align-items:center;justify-content:center;gap:4px;padding:7px 5px;overflow:hidden;white-space:nowrap;font-size:10.5px}.idea-card-actions .btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.idea-card-actions svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.idea-card-actions .watchLog{background:var(--accentTint);color:var(--act);font-weight:750}.idea-card-actions .watchLog.why-blocked{background:var(--btn);color:var(--warn)}
.idea-priority-disclaimer{padding:9px 18px;color:var(--dim);font-size:11px;line-height:1.4}.idea-priority-reason{margin-top:4px;color:var(--faint);font-size:10.5px;line-height:1.4}.idea-priority-tag{display:inline-flex;margin-left:7px;padding:2px 6px;border:1px solid currentColor;border-radius:6px;font-size:9.5px;font-weight:850;letter-spacing:.055em;line-height:1.25;vertical-align:2px}
.idea-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:13px 8px}.idea-summary-cell{min-width:0;padding:0 5px;text-align:center}.idea-summary-cell.has-divider{border-left:.5px solid var(--lineS)}.idea-summary-cell>span,.idea-summary-cell>b,.idea-summary-cell>small{display:block}.idea-summary-cell>span{overflow:hidden;color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.05em;text-overflow:ellipsis;white-space:nowrap}.idea-summary-cell>b{margin-top:5px;font-size:22px;font-weight:800;letter-spacing:-.02em}.idea-summary-cell>small{margin-top:3px;overflow:hidden;font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}.idea-summary-alert{padding:10px 18px;color:var(--down);font-size:11px;line-height:1.45}.idea-summary-alert button{padding:0;background:transparent;color:var(--act);font:inherit;font-weight:750}
.market-regime-card{padding:14px 15px}.market-regime-summary{min-width:0}.market-regime-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.market-regime-head>span{color:var(--dim);font-size:11.5px}.market-regime-verdict{padding:3px 7px;border-radius:99px;font-size:11.5px;font-weight:850;line-height:1.2}.market-regime-verdict.state-risk-on{background:color-mix(in srgb,var(--up) 12%,transparent);color:var(--up)}.market-regime-verdict.state-risk-off{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}.market-regime-verdict.state-neutral{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}.market-regime-verdict.state-not-measured{background:var(--btn);color:var(--faint)}.market-regime-diagram{min-width:0;margin-top:7px}.market-regime-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;color:var(--faint);font-size:8.5px;font-weight:700}.market-regime-labels span:nth-child(2){text-align:center}.market-regime-labels span:last-child{text-align:right}.market-regime-labels .is-active{color:var(--text)}.market-regime-track{position:relative;display:grid;height:7px;margin-top:4px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.market-regime-track>i{min-width:0}.market-regime-track .risk-off{border-radius:99px 3px 3px 99px;background:color-mix(in srgb,var(--down) 44%,var(--btn))}.market-regime-track .neutral{border-radius:3px;background:color-mix(in srgb,var(--warn) 35%,var(--btn))}.market-regime-track .risk-on{border-radius:3px 99px 99px 3px;background:color-mix(in srgb,var(--up) 44%,var(--btn))}.market-regime-marker{position:absolute;top:50%;left:clamp(4px,var(--regime-position),calc(100% - 4px));width:3px;height:15px;transform:translate(-50%,-50%);border-radius:99px;background:var(--regime-tone);box-shadow:0 0 0 3px var(--card),0 0 10px color-mix(in srgb,var(--regime-tone) 55%,transparent)}
.risk-appetite{margin-top:8px;padding-top:8px;border-top:1px solid var(--lineS)}.risk-appetite header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px}.risk-appetite header span{color:var(--dim);font-size:10.5px;font-weight:750}.risk-appetite header b{font-family:var(--mono);font-size:10px;white-space:nowrap}.risk-appetite-evidence{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:6px}.risk-appetite-meter{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}.risk-appetite-meter i{height:6px;border-radius:99px;background:var(--btn)}.risk-appetite-meter i.on{background:var(--up)}.risk-appetite-meter i.off{background:var(--down)}.risk-appetite-meter i.unknown{border:1px dashed var(--line);background:transparent}.risk-personal-history{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}.risk-personal-history small{color:var(--faint);font-size:8.5px}.risk-personal-history b{font-family:var(--mono);font-size:10px}.risk-personal-history em{color:var(--faint);font-size:8px;font-style:normal}.risk-appetite-meta{display:flex;min-width:0;flex-wrap:wrap;gap:3px 8px;margin-top:6px;color:var(--faint);font-size:8.5px;line-height:1.3}.risk-appetite-meta .fresh{color:var(--up)}.risk-appetite-meta .partial{color:var(--warn)}.risk-appetite-meta .stale{color:var(--down)}
.market-rotation-compact{margin-top:9px;padding-top:8px;border-top:1px solid var(--lineS)}.market-rotation-compact>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.market-rotation-compact>header span{min-width:0;color:var(--dim);font-size:10.5px}.market-rotation-compact>header small{flex:0 0 auto;color:var(--faint);font-size:8.5px}.market-rotation-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:6px}.market-rotation-pair.single{grid-template-columns:1fr}.market-rotation-fact{display:grid;min-width:0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:5px;padding:6px 7px;border-radius:9px;background:var(--btn)}.market-rotation-fact>i{font-size:10px;font-style:normal}.market-rotation-fact>i,.market-rotation-fact.leader>em{color:var(--up)}.market-rotation-fact.laggard>i,.market-rotation-fact.laggard>em{color:var(--down)}.market-rotation-fact>b{min-width:0;overflow:hidden;color:var(--text);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.market-rotation-fact>em{font-family:var(--mono);font-size:9px;font-style:normal;font-weight:750;white-space:nowrap}.market-context-toggle{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;margin-top:9px;padding:7px 12px;background:var(--btn);font-size:11.5px}.market-context-toggle-icon{display:inline-flex;transition:transform var(--d1) var(--e-out)}.market-context-toggle.on .market-context-toggle-icon{transform:rotate(180deg)}.market-context-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-3px);pointer-events:none;transition:grid-template-rows var(--d2) var(--e),opacity var(--d1) var(--e-out),transform var(--d1) var(--e-out)}.market-context-reveal.is-open{grid-template-rows:1fr;opacity:1;transform:none;pointer-events:auto}.market-context-reveal-inner{min-height:0;overflow:hidden}.market-context-details{margin-top:10px;padding-top:10px}.market-context-rotation-details{margin-top:10px;padding-top:10px}
.rotation-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}.rotation-fact{min-width:0;padding:8px 9px;border-radius:10px;background:var(--btn)}.rotation-fact span,.rotation-fact b,.rotation-fact small{display:block}.rotation-fact span{color:var(--faint);font-size:8.5px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.rotation-fact b{margin-top:3px;overflow:hidden;color:var(--text);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.rotation-fact small{margin-top:2px;color:var(--dim);font-family:var(--mono);font-size:9px;line-height:1.3}
.idea-filters-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);pointer-events:none;scroll-margin-block-start:calc(env(safe-area-inset-top) + 16px);scroll-margin-block-end:calc(104px + env(safe-area-inset-bottom));transition:grid-template-rows var(--d2) var(--e),opacity var(--d1) var(--e-out),transform var(--d1) var(--e-out)}
.idea-filters-reveal.is-open{grid-template-rows:1fr;opacity:1;transform:none;pointer-events:auto}.idea-filters-reveal-inner{min-height:0;overflow:hidden}.idea-filters{margin:0 0 12px;padding:11px 12px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.idea-filters header{display:flex;align-items:center;justify-content:space-between;gap:10px}.idea-filters header>div{min-width:0}.idea-filters header b,.idea-filters header small{display:block}.idea-filters header b{font-size:12px}.idea-filters header small{margin-top:2px;color:var(--faint);font-size:9.5px;line-height:1.3}.idea-filters header button{flex:0 0 auto;padding:5px 7px;color:var(--act);font-size:10px;font-weight:750}.idea-filters header button:disabled{color:var(--faint);opacity:.55}.idea-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.idea-filter-control{display:block;min-width:0}.idea-filter-control>span{display:block;margin:0 0 4px 2px;color:var(--faint);font-size:9px;font-weight:750;letter-spacing:.035em}.idea-filter-grid label i{font-weight:500;letter-spacing:0}.idea-filter-grid select{width:100%;min-width:0;min-height:40px;padding:9px 30px 9px 10px;border-radius:10px;background-color:var(--inputbg);background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%;background-size:4px 4px;background-repeat:no-repeat;font-size:11px;line-height:1.2}.idea-filter-context-note{margin:9px 2px 0;padding-top:8px;border-top:1px solid var(--lineS);color:var(--faint);font-size:8.5px;line-height:1.4}.idea-filter-guide-link{display:grid;width:100%;min-height:42px;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:9px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--act) 30%,var(--line));border-radius:11px;background:var(--accentTint);color:var(--act);font-size:11px;font-weight:750;text-align:left}.idea-filter-guide-link svg{width:18px;height:18px}.idea-filter-guide-link span{min-width:0}.idea-filter-guide-link i{font-size:18px;font-style:normal}.idea-filter-guide-intro{margin:0 0 12px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--act) 30%,var(--line));border-radius:13px;background:var(--accentTintSoft);color:var(--dim);font-size:12.5px;line-height:1.55}.idea-filter-guide-list{display:grid;gap:10px}.idea-filter-guide-card{padding:12px 13px;border:1px solid var(--lineS);border-radius:13px;background:var(--card)}.idea-filter-guide-card h4{margin:0;color:var(--text);font-size:14px}.idea-filter-guide-card>p{margin:4px 0 9px;font-size:12px;line-height:1.5}.idea-filter-guide-card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.idea-filter-guide-card li{display:grid;grid-template-columns:minmax(92px,.38fr) minmax(0,1fr);gap:9px;padding-top:7px;border-top:1px solid var(--lineS)}.idea-filter-guide-card li b{font-size:11.5px}.idea-filter-guide-card li span{color:var(--dim);font-size:11.5px;line-height:1.45}.idea-tools{min-width:0;flex-wrap:nowrap}.idea-tools select{min-width:0}.idea-tools button small{color:inherit;font-family:var(--mono);font-size:9px;opacity:.75}.idea-card{scroll-margin-block-start:calc(env(safe-area-inset-top) + 16px);scroll-margin-block-end:calc(104px + env(safe-area-inset-bottom))}
.idea-filter-grid select:disabled{opacity:.5;cursor:not-allowed}
.desk-primary-status{flex:0 1 auto;min-width:0;max-width:132px;overflow:hidden;text-overflow:ellipsis}
@media (min-width:860px){
body{padding:36px 24px 120px}
.wrap{max-width:760px}
.nav{left:50%;right:auto;width:min(560px,calc(100% - 48px));transform:translateX(-50%)}
.navin{max-width:560px}.syncbar-row{max-width:760px}
.modal .card{max-width:520px}
/* .wrap's own 760px suits header/filter chrome and genuinely
multi-column surfaces (.pt-workspace's own split layout, 2776 below,
already opts into the width it needs) -- but a position/idea/trade
card or its compact-row is fundamentally a short text line plus a
fixed-width price column (.desk-card-position-row's own
minmax(0,1fr) 118px grid, say). Stretched to 760px, the text side
alone measured 594px wide for a one-line string like "Swing - 10 sh
- in $1,500.00" -- correct per its own grid math, but a large,
purposeless gap before the price on any real laptop, not a smarter
use of the width. Capped back to the same 620px these already read
comfortably at below 860px, centered within the wider .wrap so the
page doesn't look lopsided (chrome above/below still spans the full
760px) -- narrower where the content is short-form and list-like,
full width only where a layout (like .pt-workspace) actually asked
for the extra room. */
.desk-card,.idea-card,.hist-trade-card,
.crow.desk-compact-row,.crow.idea-compact-row,.crow.hist-compact-row{max-width:620px;margin-left:auto;margin-right:auto}
}
@media(max-width:520px){
.idea-tools{gap:6px}.idea-tools select{padding-inline:9px}
.idea-tools button{width:42px;justify-content:center;padding:10px 6px}.idea-tools #ideaFiltersBtn{position:relative;width:42px;gap:0}
.idea-tools #ideaFiltersBtn .idea-filter-match-count{display:none}
.idea-tools #ideaFiltersBtn.has-filters::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border:1.5px solid var(--card);border-radius:99px;background:var(--warn);box-sizing:border-box}
.idea-tools #ideaFiltersBtn.on.has-filters::after{border-color:color-mix(in srgb,var(--act) 65%,var(--card));background:var(--warn)}
.idea-tools .tool-label{display:none}
.idea-primary-status{flex:0 1 auto;min-width:0;max-width:116px;overflow:hidden;text-overflow:ellipsis}
}
/* Common current iPhone widths (393–430 CSS px) keep the original 48px
compact row. The Shariah glyph is the one genuinely lower-priority
diagnostic here (it's still one tap away on the expanded card) and moves
off at this width so ticker + technical icons + one final status + price
+ grade cannot overflow. Setup and Candle State stay -- they're the pair
this row exists to surface at a glance, so they only ever disappear when
there's nothing real to show (setupIconHTML/candleStateIconHTML's own
transparent-slot rule), never for space. */
@media(max-width:430px) and (min-width:391px){
.desk-compact-row .session-mini{display:none}
.desk-compact-main{gap:4px}
.desk-compact-ticker{max-width:66px}
.desk-primary-status{max-width:104px}
.idea-compact-row .session-mini,.idea-compact-row .idea-shariah-icon{display:none}
.idea-compact-ticker{max-width:60px}
.idea-primary-status{max-width:96px}
}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);
z-index:60;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:.5px solid var(--line);border-radius:100px;padding:11px 20px;font-size:13px;font-weight:600;
box-shadow:var(--shadowLg);max-width:90vw;text-align:center}
/* The plain .toast pill (border-radius:100px) reads fine for a short,
single-line message, but a toastUndo/toastAction can carry a much
longer sentence plus a button -- a full capsule shape around wrapped,
multi-element content looked visibly lopsided (caught live: the
rounded caps didn't match the flex layout once the message wrapped to
two lines). A card-style radius reads as a rounded rectangle instead,
which suits variable-length wrapped content the way a stretched pill
doesn't. */
.toast.toast-undo{display:flex;align-items:center;gap:16px;text-align:left;border-radius:20px;max-width:min(92vw,420px)}
.toast.toast-undo button{flex:0 0 auto;background:transparent;color:var(--act);font-weight:800;
font-size:13px;padding:0;letter-spacing:.01em}
/* Update everything's status. This used to be a floating rounded pill with a
heavy drop shadow (var(--shadowLg), an 18-48px blur) — against a dark
theme's near-black page that shadow read as its own dark halo sitting
behind the pill, which is what looked like "a black background" rather
than a status readout. It's a flush, edge-to-edge strip now instead: no
card, no shadow, no blur, no rounded corners floating in the middle of
the screen — a thin bar docked to the true top edge is the whole idea,
the same visual language a browser's own tab-loading indicator uses.
Hiding is still opacity + transform together (a translateY alone would
have the exact same "technically off-screen, visually not" problem a
flat background strip doesn't have shadow bleed to worry about, but
there is no reason to reintroduce the risk). */
.syncbar{position:fixed;top:0;left:0;right:0;z-index:65;
padding-top:env(safe-area-inset-top);
background:var(--card);border-bottom:.5px solid var(--line);
transform:translateY(-100%);opacity:0;pointer-events:none;
transition:transform var(--d2) var(--e),opacity var(--d2) var(--e)}
.syncbar.show{transform:translateY(0);opacity:1}
/* The page's own content used to sit directly behind wherever the old pill
landed, which is exactly why a wide "TICKER · phase" line ran under the
cash pill and menu button — no amount of clever width-capping fixes an
element sharing a header's real estate on purpose. Content gets pushed
down instead, the same padding-swap trick body.hasfab already uses for
the FAB. Shorter now than the old card needed, since a flush strip has no
padding or shadow margin of its own to clear. */
body.syncing{padding-top:calc(50px + env(safe-area-inset-top))}
/* One row, not two — a full-width strip has the room a 240px pill didn't,
so the ticker, the phase, and the count all sit on the same line instead
of stacking. max-width mirrors .wrap so the text column lines up with
every card underneath it once the page settles into place; the coloured
track below stays genuinely edge-to-edge, unconstrained, because a
progress indicator reads as more purposeful spanning the whole screen
than boxed in with the text. */
.syncbar-row{display:flex;align-items:baseline;gap:8px;max-width:620px;margin:0 auto;
padding:8px 18px 7px}
.syncbar-dot{width:6px;height:6px;border-radius:50%;background:var(--syncStatusDot);flex:0 0 auto;align-self:center}
.syncbar-text{font-size:12px;font-weight:700;color:var(--text);font-family:var(--mono);
letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:0 1 auto;max-width:96px}
/* The phase line — which exact step, and how long it's been on it. Turns
amber past 15s on the SAME step: still moving, just slow, is what a filing
fetch genuinely looks like (see FILING_TIMEOUT_MS's own comment in
prices.js) — the colour is the difference between "working" and "stuck"
that a static ticker name alone could never communicate. */
.syncbar-phase{font-size:11px;color:var(--faint);font-family:var(--mono);flex:1;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syncbar-phase.slow{color:var(--warn)}
.syncbar-count{font-size:11px;color:var(--faint);font-family:var(--mono);flex:0 0 auto;white-space:nowrap}
.syncbar-track{height:2px;background:var(--syncProgressTrack);overflow:hidden}
.syncbar-track>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--syncProgressStart),var(--syncProgressEnd))}
.row{display:flex;gap:10px}
.row>*{flex:1;min-width:0}
.exit-reason-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;margin-bottom:8px}
.exit-reason-auto{padding:3px 6px;border-radius:6px;background:var(--accentTint);color:var(--act);font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1.1}
.exit-reason-reset{padding:2px 0;color:var(--act);font-size:10.5px;font-weight:750;line-height:1.2}
.exit-reason-note{display:flex;align-items:flex-start;gap:7px;margin-top:8px;color:var(--faint);font-size:11px;line-height:1.45}
.exit-reason-note .dot{flex:0 0 auto;margin-top:5px}
.hair{border-top:1px solid var(--lineS)}
a{color:var(--act);text-decoration:none}
.prog{position:absolute;left:0;top:0;bottom:0;background:var(--accentTintStrong);overflow:hidden;will-change:width}
.prog.indet{width:100%}
.prog::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:sheen 1.5s infinite}
@keyframes sheen{100%{transform:translateX(100%)}}
@keyframes pulseDot{0%,100%{opacity:.35}50%{opacity:1}}
.pulse{animation:pulseDot 1.1s ease-in-out infinite}
/* The Add form's "Checking the earnings date" row (earningsGateHTML in
js/views/new.js) used to just show a static "…" -- reported live as
having no actual loading feel. A small spinning ring, reused for the
smaller disabled-reason text below the submit button too. */
.earn-check-spin{display:inline-block;width:15px;height:15px;border-radius:50%;
border:1.5px solid var(--lineS);border-top-color:var(--act);
animation:earnCheckSpin .7s linear infinite;flex:0 0 auto}
@keyframes earnCheckSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.earn-check-spin{animation:none}}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:10px 12px;
font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--act)}
.tools{display:flex;gap:8px;margin-bottom:12px}
.tools select{flex:1;padding:10px 12px;font-size:13px;font-family:var(--sans);border-radius:12px}
.tools button{flex:0 0 auto;padding:10px 15px;border-radius:12px;background:var(--btn);
font-size:13px;font-weight:600;color:var(--text);transition:background .15s,color .15s;
display:flex;align-items:center;gap:6px}
.tools button svg{width:14px;height:14px;flex:0 0 auto}
/* A synchronous full re-render on tap (S.ideaManageOpen flips, render() runs
in the same click handler) rebuilds this button before the browser ever
paints the global button:active tap-scale, so relying on that alone left
Manage looking unresponsive -- caught live ("doesn't show I'm clicking").
A persistent color change survives the re-render because it's driven by
state (the .on class), not a transient pseudo-class on a soon-replaced node. */
.tools button.on{background:var(--actFill);color:var(--onAct)}
.crow{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;
background:var(--card);border:1px solid var(--line);margin-bottom:7px;cursor:pointer;box-shadow:var(--shadow)}
.crow .tk{font-size:15px;font-weight:800;letter-spacing:-.01em;min-width:56px}
.crow .mid{flex:1;min-width:0;font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.crow .rr{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Compact Desk rows keep the original 48px one-line density. Optional
context tightens or ellipsizes; it never makes every Desk row taller.
Ideas/History retain their protected narrow-phone wrap below. */
.crow.desk-compact-row,.crow.idea-compact-row,.crow.hist-compact-row{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:48px;white-space:nowrap}
.desk-compact-main{display:inline-flex;flex:1 1 auto;min-width:0;align-items:center;gap:6px}
.desk-compact-main>.dot,.crow.idea-compact-row>.dot,.crow.hist-compact-row>.dot{flex:0 0 auto}
.desk-compact-main .desk-compact-ticker{flex:0 1 auto}
.desk-compact-ticker,.idea-compact-ticker,.hist-compact-ticker{flex:0 0 auto;min-width:0!important;max-width:110px;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;letter-spacing:0!important;white-space:nowrap}
.desk-compact-row .session-mini,.idea-compact-row .session-mini{flex:0 0 auto}
.idea-tech-icons{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px}
.desk-compact-bucket,.idea-compact-bucket,.hist-compact-bucket{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.05em;line-height:1.2;white-space:nowrap}
/* button.desk-src-badge (element+class) deliberately outranks
.tag-help-trigger's own width:auto/min-width:0 -- same specificity as a
bare class selector, so whichever rule happened to load later in the
cascade was winning and stretching this into a tall oval instead of a
circle. White-on-brand-color matches Setup > Your Money's own
brokerBadge() circle (js/broker.js) rather than inventing a second style
for the same identity mark. */
button.desk-src-badge{display:inline-flex;width:16px;height:16px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;font-size:7.5px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.compact-action-tag{display:inline-flex;flex:0 0 auto;align-items:center;min-height:18px;padding:2px 6px;border-radius:6px;background:var(--btn);
font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:1.15;white-space:nowrap}
.desk-compact-tail{display:inline-flex;flex:0 0 auto;min-width:0;align-items:center;gap:6px;margin-left:auto}
.desk-compact-price,.idea-compact-price,.hist-compact-price{flex:0 0 auto;min-width:0;margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:11.5px;font-weight:750;line-height:1.15;white-space:nowrap}
/* A genuinely failed quote's retry affordance, in place of the plain
"No price"/priceHTML text those same compact-row price slots normally
hold -- a real tappable pill instead of silent, indistinguishable
blankness (see S.quoteFailed's own comment in state.js). Sized to drop
into that same slot without visibly changing the row's layout. */
.price-retry-btn{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding:2px 6px;border-radius:100px;background:var(--downTint);color:var(--down);font-family:var(--mono);font-size:10px;font-weight:750;line-height:1.2;white-space:nowrap}
.price-retry-btn:hover{opacity:.8}
.live-tick{display:inline-flex;align-items:center;gap:2px}
.live-tick.is-up{color:var(--up)}
.live-tick.is-down{color:var(--down)}
.live-tick-arrow{flex:0 0 auto;fill:currentColor}
.desk-compact-result,.idea-compact-result,.hist-compact-result{flex:0 0 auto;min-width:0;font-family:var(--mono);font-size:13px;font-weight:800;line-height:1.15;letter-spacing:0;white-space:nowrap}
.conversion-lineage{margin-top:3px;color:var(--faint);font-family:var(--mono);font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.hist-ledger-summary{margin-bottom:12px}
.hist-ledger-summary>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px var(--space-4) 0}.hist-ledger-summary>header>div{min-width:0}.hist-ledger-summary>header h3{margin:5px 0 0;font-size:18px;letter-spacing:-.025em}.hist-ledger-summary>p{margin:7px 0 0;padding:0 var(--space-4);color:var(--faint);font-size:10.5px;line-height:1.45}
.hist-ledger-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:15px;padding:14px var(--space-4) 18px;border-top:1px solid var(--lineS)}
.hist-ledger-summary-grid>div{min-width:0;padding:0 11px;border-left:1px solid var(--lineS)}.hist-ledger-summary-grid>div:first-child{padding-left:0;border-left:0}.hist-ledger-summary-grid>div:last-child{padding-right:0}
.hist-ledger-summary-grid span,.hist-ledger-summary-grid b{display:block}.hist-ledger-summary-grid span{color:var(--faint);font-size:10px;font-weight:750}.hist-ledger-summary-grid b{margin-top:5px;overflow-wrap:anywhere;font-family:var(--mono);font-size:12.5px}
.hist-trade-card{position:relative;margin-bottom:9px;overflow:hidden;scroll-margin-block-start:calc(env(safe-area-inset-top) + 16px);scroll-margin-block-end:calc(104px + env(safe-area-inset-bottom))}
.hist-trade-tone{position:absolute;inset:0 auto 0 0;width:4px}
.hist-trade-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:17px 17px 0 19px}
.hist-trade-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.hist-trade-title>b{font-size:18px;letter-spacing:-.025em}.hist-trade-head>div:first-child>span{display:block;margin-top:4px;color:var(--faint);font-size:10.5px}
.hist-trade-head>div:last-child{text-align:right;flex:0 0 auto}.hist-trade-head strong{display:block;font-family:var(--mono);font-size:20px;letter-spacing:-.035em}.hist-trade-head small{display:block;margin-top:3px;color:var(--faint);font-family:var(--mono);font-size:10px}
.hist-trade-decision{margin:15px 17px 0;padding:12px 13px;border-radius:var(--radius-md);background:var(--btn)}.hist-trade-decision>span{display:block;color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.hist-trade-decision>b{display:block;margin-top:4px;font-size:12.5px}.hist-trade-decision>p{margin:4px 0 0;color:var(--dim);font-size:10.5px;line-height:1.45}
.hist-trade-alert{display:flex;align-items:flex-start;gap:9px;margin:9px 17px 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--down) 32%,transparent);border-radius:12px;background:color-mix(in srgb,var(--down) 8%,transparent)}.hist-trade-alert b{flex:0 0 auto;color:var(--down);font-size:10px}.hist-trade-alert span{color:var(--dim);font-size:10px;line-height:1.4}
.hist-trade-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:14px;padding:0 17px}.hist-trade-facts>div{min-width:0;padding:0 10px;border-left:1px solid var(--lineS)}.hist-trade-facts>div:first-child{padding-left:0;border-left:0}.hist-trade-facts>div:last-child{padding-right:0}.hist-trade-facts span,.hist-trade-facts b{display:block}.hist-trade-facts span{color:var(--faint);font-size:10px}.hist-trade-facts b{margin-top:4px;overflow-wrap:anywhere;font-family:var(--mono);font-size:10.5px}
.hist-trade-audit{margin-top:14px;border-top:1px solid var(--lineS)}.hist-trade-audit>summary{display:flex;min-height:42px;align-items:center;justify-content:space-between;cursor:pointer;padding:0 17px;color:var(--dim);font-size:10.5px;font-weight:700;list-style:none}.hist-trade-audit>summary::-webkit-details-marker{display:none}.hist-trade-audit>summary i{color:var(--faint);font-style:normal;font-size:17px;transition:transform var(--d1) var(--e-out)}.hist-trade-audit[open]>summary i{transform:rotate(90deg)}
.hist-trade-audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 17px 8px}.hist-trade-audit-grid>span{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;background:var(--inputbg);color:var(--faint);font-size:9.5px}.hist-trade-audit-grid b{overflow-wrap:anywhere;color:var(--text);font-family:var(--mono);font-size:9.5px;text-align:right}.hist-trade-audit>p{margin:6px 17px 0;color:var(--faint);font-size:10px;line-height:1.45}
.hist-trade-edit{display:block;width:auto;margin:11px 17px 17px;padding:9px;border-radius:var(--radius-md);background:var(--btn);color:var(--act);font-size:10.5px;font-weight:750;text-align:center}
@media (max-width:390px){
.crow.desk-compact-row{gap:4px;padding:7px 8px;min-height:48px;white-space:nowrap;flex-wrap:nowrap}
.crow.idea-compact-row,.crow.hist-compact-row{
gap:5px 6px;padding:8px 9px;min-height:58px;white-space:normal;flex-wrap:wrap}
.desk-compact-main{gap:4px}
.desk-compact-ticker{font-size:12.5px!important;max-width:66px}
.idea-compact-ticker,.hist-compact-ticker{font-size:13px!important;max-width:82px}
.desk-compact-row .session-mini,.idea-compact-row .session-mini{padding:2px 4px;font-size:10px}
.compact-action-tag{min-height:20px;padding:2px 5px;font-size:10.5px}
.desk-compact-row .compact-action-tag{flex:0 1 auto;min-height:18px;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;font-size:10px}
.compact-os-signal{font-size:10.5px!important}
.desk-compact-bucket{font-size:9.5px}
.idea-compact-bucket,.hist-compact-bucket{font-size:10.5px}
.desk-compact-tail{gap:3px}
.desk-compact-price{font-size:10.5px}.desk-compact-result{font-size:11px}
.idea-compact-price,.hist-compact-price{font-size:11.5px}
.idea-compact-result,.hist-compact-result{font-size:12px}
.hist-ledger-summary-grid,.hist-trade-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
.hist-ledger-summary-grid>div:nth-child(3),.hist-trade-facts>div:nth-child(3){padding-left:0;border-left:0}
.hist-trade-audit-grid{grid-template-columns:minmax(0,1fr)}
}
/* Swipe-to-delete — one shell shared by every Desk/Ideas/History compact row
(see swipeWrap() in utils.js and bindSwipeDelete() in events.js). The red
action sits underneath at a fixed width; the row itself is the layer that
actually moves, so it always fully occludes the action until dragged. */
.swipe-wrap{position:relative;margin-bottom:7px;border-radius:14px;overflow:hidden}
.swipe-wrap .crow{margin-bottom:0}
/* Sized to exactly the revealed sliver (SWIPE_MAX in events.js), not the
whole row — the row itself sits on top and occludes the rest, so a wider
hit target would only ever catch a tap the row's own content already
claimed underneath it. Rounded on every corner, matching the row's own
14px — the wrap's overflow:hidden already rounds the outer (right) edge,
this is what makes the inner (left) edge read as a matching rounded shape
once revealed, instead of a slab with one sharp straight side.
Invisible until events.js adds .active to the wrap for an actual drag —
a row's own open/close and tab-change animations briefly drop its
opacity, which would otherwise let this always-present red layer show
through for a frame on interactions that have nothing to do with it. */
.swipe-action{position:absolute;top:0;right:0;bottom:0;width:84px;display:flex;align-items:center;
justify-content:center;background:var(--downFill);border:none;border-radius:14px;
opacity:0;transition:opacity var(--d1) var(--e-out)}
.swipe-wrap.active .swipe-action{opacity:1}
.swipe-action-label{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.swipe-surface{position:relative;touch-action:pan-y;transform:translate3d(0,0,0);
transition:transform var(--d1) var(--e-out);will-change:transform}
.swipe-surface.dragging{transition:none}
/* History reads as a flatter trading workstation than the rest of the app's
glassy card stack -- same surface tokens, a tighter corner radius and no
floating shadow, scoped to this tab only so Desk/Ideas/Setup keep their
existing card elevation untouched. */
/* Matches Ideas' own "card flush" convention exactly (see the Ideas
breakdown card, .hair rows): a card with zero padding of its own so every
inner section's border-top spans the true full card width edge to edge,
with each section supplying its own left/right inset instead of
inheriting it from the card. Vertical rules WITHIN one section (a stat
row's own column dividers) stay contained inside that section's own
padding -- only the horizontal, section-to-section rules go full-bleed.
Higher specificity than any individual .hist-x{padding:...} rule, so this
alone converts every History card without editing each one's own rule. */
.hist-workspace .card{border-radius:var(--radius-lg);box-shadow:none;padding:0}
.hist-workspace{display:flex;min-width:0;flex-direction:column;gap:var(--space-3);padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom))}
.hist-workspace.closing{animation:cardShut var(--d1) var(--e-out) both;pointer-events:none}
.hist-workspace.opening{animation:cardOpen var(--d2) var(--e) both}
/* The AI/Summary takeover replaces the entire tab, not just an inner pane
-- a slightly deeper settle than the standard cardOpen so entering and
leaving it reads as a real screen change, not just another card. */
@keyframes histTakeoverIn{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes histTakeoverOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.975)}}
.workspace-takeover.opening{animation:histTakeoverIn .38s var(--e) both}
.workspace-takeover.closing{animation:histTakeoverOut .2s var(--e-out) both;pointer-events:none}
@media(prefers-reduced-motion:reduce){.workspace-takeover.opening,.workspace-takeover.closing{animation:none}}
.workspace-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mgmt-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mgmt-tabs .workspace-tab{gap:5px;padding-inline:6px;white-space:nowrap}
.workspace-tab,.hist-subtabs button{min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--btn);color:var(--text);font-size:13px;font-weight:600;transition:background .15s,color .15s,border-color .15s}
.workspace-tab{display:flex;align-items:center;justify-content:center;gap:7px}
.workspace-tab svg,.hist-subtabs button svg,.hist-chart-switch button svg,.hist-action-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.workspace-tab:hover,.hist-subtabs button:hover{background:var(--btn2);color:var(--act)}
.workspace-tab.on,.hist-subtabs button.on{border-color:var(--accentBorder);background:var(--btn2);color:var(--act)}
/* Free accounts still see the Mine scope, but as an honest navigation link
to the Premium preview rather than a tab that could enter paid data. */
.idea-universe-locked{border-color:var(--lineS);background:var(--cardS);color:var(--faint);text-decoration:none;
transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out),border-color var(--d1) var(--e-out),transform .13s var(--e-out)}
.idea-universe-lock{display:grid;width:17px;height:17px;flex:0 0 auto;place-items:center;border-radius:6px;
background:var(--accentTint);color:var(--act)}
.workspace-tab .idea-universe-lock svg{width:10px;height:10px;stroke-width:2.1}
.idea-universe-locked:hover{border-color:var(--accentBorder);background:var(--accentTintSoft);color:var(--dim)}
.idea-universe-locked:active{transform:scale(.985)}
/* A free viewer can see the same Add-to-Mine affordance without receiving
the paid mutation selector or ticker payload. The small lock makes the
destination clear before the tap. */
.idea-add-mine-premium{position:relative;display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;
border:1px solid var(--accentBorder);border-radius:10px;background:var(--accentTintSoft);color:var(--act);text-decoration:none;
transition:background var(--d1) var(--e-out),transform .13s var(--e-out)}
.idea-add-mine-premium:hover{background:var(--accentTint)}.idea-add-mine-premium:active{transform:scale(.96)}
.idea-add-premium-lock{position:absolute;right:-4px;bottom:-4px;display:grid;width:16px;height:16px;place-items:center;
border:2px solid var(--card);border-radius:6px;background:var(--actFill);color:var(--onAct)}
.idea-add-premium-lock svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2}
.premium-gate-card{border-color:var(--accentBorder);background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,var(--act) 4%),var(--card))}
.idea-explore-preview-card{position:relative;overflow:hidden;margin-top:10px;padding:16px}
.idea-explore-preview-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--act),var(--up),transparent 86%)}
.idea-explore-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.idea-explore-preview-card h3{margin:6px 0 0;font-size:17px;letter-spacing:-.02em}
.idea-explore-preview-card p{margin:10px 0 0;color:var(--dim);font-size:12.5px;line-height:1.55}
.idea-explore-preview-more{display:grid;min-width:48px;height:36px;place-items:center;padding:0 9px;border:1px solid var(--accentBorder);
border-radius:11px;background:var(--accentTintSoft);color:var(--act);font-family:var(--mono);font-size:12px;font-weight:800}
.idea-explore-premium-link{display:flex;min-height:44px;align-items:center;justify-content:center;margin-top:12px;text-decoration:none}
@media(prefers-reduced-motion:reduce){.idea-universe-locked,.idea-add-mine-premium{transition:none}}
@media(max-width:360px){.ideas-scope .idea-universe-locked{gap:5px;padding-inline:8px}}
/* Personal AI generating while the AI tab itself isn't the active one --
the .ai-glow-card busy animation only lives inside that panel, invisible
until you actually switch to it. This small dot on the tab button itself
is the "something's happening in here" signal from wherever else you're
looking, reported live as wanted since the glow alone gives no clue
before you tap in. */
.pf-tab-busy-dot{width:6px;height:6px;border-radius:50%;background:var(--act);flex:0 0 auto;animation:pulseDot 1.1s ease-in-out infinite}
.workspace-pane,.hist-active-pane{min-width:0}.workspace-pane{animation:histSurfaceIn var(--d2) var(--e) both}
.hist-subtabs{display:grid;grid-template-columns:repeat(2,44px);gap:8px;width:max-content;max-width:100%;margin:0;padding:0;border:0;background:transparent;justify-self:start}
.hist-subtabs button{display:flex;align-items:center;justify-content:center;padding:0}
.hist-subtabs button.on::after{display:none}
.hist-timeline-toggle{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,240px);gap:var(--space-1)}.hist-timeline-toggle button{gap:5px;padding:0 var(--space-2);border-color:var(--lineS);background:transparent;font-size:11px;font-weight:650}.hist-timeline-toggle button.on{background:var(--btn);box-shadow:none}
.hist-trades-toggle{grid-template-columns:auto;width:auto}.hist-trades-toggle button{gap:5px;padding:0 10px;border-color:var(--lineS);background:transparent;font-size:11px;font-weight:650}.hist-trades-toggle button:hover{background:var(--btn)}
.hist-ledger-tools select{flex:1}
.hist-overview-page{display:grid;min-width:0;gap:var(--space-3)}
/* .card carries a global 12px bottom margin. A grid already owns the
Overview rhythm, so letting that margin survive on only some children
created visibly different gaps (most notably below Personal AI). */
.hist-overview-page>.card{margin:0}
/* Performance/AI physical flip card. .hist-flipcard-wrap owns perspective;
.hist-flipcard-inner is the one element that actually rotates (its own
transition, toggled only by the .flipped class -- never touched by
render()'s innerHTML replace itself, see events.js's flip handlers).
Whichever face ISN'T currently showing is taken out of normal flow
(absolute, overlaid) so the container's own height comes from the ACTIVE
face's real content alone, not an auto-sized track stretched to the
taller of the two permanently (that was the earlier bug here -- a big
blank gap below a short Performance card, sized for a much longer AI
briefing the whole time even while Performance was the one showing).
events.js's syncHistoryFlipCardHeight() sets an explicit inline height
from the active face's scrollHeight on every render and on every flip,
so the height transition below actually has two real numbers to animate
between instead of two "auto"s (which CSS cannot transition at all). */
.hist-flipcard-wrap{perspective:1800px}
.hist-flipcard-inner{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1),height .3s var(--e-out)}
.hist-flipcard-inner.flipped{transform:rotateY(180deg)}
.hist-flipcard-face{min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* A static rotation on the back face itself (not toggled) -- combined with
the inner's own 180deg when flipped, its EFFECTIVE rotation lands back at
360deg/0deg, so its content reads normal/unmirrored the instant it faces
the viewer, per requirement 6. */
.hist-flipcard-face.is-back{transform:rotateY(180deg)}
/* Whichever face is not the current target is overlaid, out of flow --
its own height (even if much taller) never affects the container, and
backface-visibility already makes it fully invisible regardless of size. */
.hist-flipcard-inner:not(.flipped) .hist-flipcard-face.is-back,
.hist-flipcard-inner.flipped .hist-flipcard-face.is-front{position:absolute;top:0;left:0;width:100%}
.hist-flipcard-face>.card{margin:0}
/* Load-bearing, not cosmetic: a continuously-running CSS animation on a
descendant of a 3D-transformed face (the AI-glow ring below) stops the
browser from compositing that face as one flat rotating layer during the
flip transition, which visibly reads as "the box rotates but the text
doesn't" (reported live). [inert] is set on whichever face is about to
face away the instant a flip starts (flipHistoryCard, js/events.js) --
stopping the animation here, keyed off that same attribute, guarantees
it's already stopped before the rotation begins, not just hidden after. */
.hist-flipcard-face[inert] .ai-glow-card::before{animation:none;opacity:0}
.hist-flip-affordance{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding:4px 9px;border-radius:100px;background:var(--btn);color:var(--dim);font-size:10.5px;font-weight:650;line-height:1.3}
.hist-flip-affordance:hover{opacity:.75}
.hist-flip-affordance:focus-visible{outline:2px solid var(--act);outline-offset:2px}
/* Colour-ring "AI is working" tell, same .ai-glow-card/.busy mechanism
already used for News/Scenarios generation elsewhere -- replaces an
earlier plain opacity-pulse blink, which caused a real rendering bug:
a CSS animation actively running on a descendant of the flip card's
3D-transformed face broke the browser's ability to composite that face
as one rotating unit, so flipping mid-blink showed the card's outer box
rotating while its text/content stayed flat (reported live). This ring
is a ::before layer with the exact same risk, so the inert-face rule
below (right after .hist-flipcard-face) is load-bearing, not optional:
it must stop animating (not just become invisible) before a flip starts. */
.hist-flip-affordance.ai-glow-card::before{border-radius:calc(100px + 1.5px)}
@media(prefers-reduced-motion:reduce){.hist-flipcard-inner{transition:none}}
.hist-performance{margin:0;overflow:hidden}
.hist-performance-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4) 0}
.hist-overview-heading,.hist-lens-heading{display:flex;min-width:0;align-items:center;gap:10px}
.hist-overview-icon{display:flex;width:28px;height:28px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:8px;background:var(--btn);color:var(--act)}
.hist-overview-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hist-verified{color:var(--faint);font-family:var(--mono);font-size:11px;white-space:nowrap}
/* The six-number grid that used to live here (NET R/P&L/win rate/
expectancy/trades/max DD) is gone -- reported live as redundant with the
chart directly below, which already shows the active metric's exact
value and lets you switch to see any of the others. .hist-analysis-kpis
(Edge/Execution/Insight's own stat rows) still uses this span recipe. */
.hist-analysis-kpis span{display:block;color:var(--faint);font-size:11px;font-weight:750;letter-spacing:.045em;line-height:1.2}
.hist-performance-chart{height:302px;padding:var(--space-3) var(--space-4) 0;border-bottom:1px solid var(--lineS);contain:layout}
/* Now a single full-width action -- Shiba share moved into the AI/Summary
takeover itself (it only makes sense once there's a result to share),
so this row no longer needs the divider-and-two-columns treatment. */
.hist-ai-action,.hist-summary-action,.hist-share-action{display:grid;min-width:0;min-height:48px;align-items:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);text-align:left;transition:background var(--d1) var(--e-out),transform .13s var(--e-out),box-shadow var(--d1) var(--e-out)}
.hist-ai-action,.hist-summary-action,.hist-share-action{grid-template-columns:32px minmax(0,1fr);gap:9px;padding:7px 10px}.hist-ai-action{width:100%;min-height:58px;grid-template-columns:32px minmax(0,1fr) auto;padding:8px 10px;background:linear-gradient(135deg,var(--accentTint),var(--btn) 62%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent);color:var(--act)}
.hist-ai-action[data-ai-state="needsPremium"]{color:var(--text)}.hist-ai-action[data-ai-state="failed"]{color:var(--text)}.hist-ai-action[data-ai-state="tierUnavailable"]{color:var(--text)}
.hist-ai-action:disabled,.hist-summary-action:disabled,.hist-share-action:disabled{cursor:not-allowed;opacity:.48}.hist-ai-action:not(:disabled):hover,.hist-summary-action:not(:disabled):hover,.hist-share-action:not(:disabled):hover{background:var(--btn)}
.hist-ai-action:not(:disabled):active,.hist-summary-action:not(:disabled):active,.hist-share-action:not(:disabled):active{transform:scale(.985);background:var(--btn2)}
.hist-action-icon{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--accentTint);color:var(--act)}.hist-action-icon svg{width:19px;height:19px}.hist-ai-icon{border:1px solid var(--accentBorder)}.hist-ai-icon svg{width:20px;height:20px}
.hist-ai-action span,.hist-summary-action span,.hist-share-action span{min-width:0}.hist-ai-action b,.hist-ai-action small,.hist-summary-action b,.hist-summary-action small,.hist-share-action b,.hist-share-action small{display:block}
.hist-ai-action b,.hist-summary-action b,.hist-share-action b{font-size:11.5px}.hist-ai-end{display:flex;min-width:0;align-items:center;gap:5px}.hist-ai-status{display:inline-flex;max-width:90px;align-items:center;justify-content:center;padding:3px 6px;border-radius:var(--radius-xs);background:var(--accentTint);color:var(--act);font-size:8.5px;font-style:normal;font-weight:800;letter-spacing:.035em;line-height:1.2;text-align:center;white-space:nowrap}.hist-ai-chevron{display:flex;width:15px;height:15px;align-items:center;justify-content:center;color:var(--faint)}.hist-ai-chevron svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hist-ai-action[data-ai-state="needsPremium"] .hist-ai-status{background:var(--warnTint);color:var(--warn)}.hist-ai-action[data-ai-state="failed"] .hist-ai-status,.hist-ai-action[data-ai-state="tierUnavailable"] .hist-ai-status{background:var(--downTint);color:var(--down)}.hist-ai-action[data-ai-state="generating"] .hist-ai-status,.hist-ai-action[data-ai-state="checking"] .hist-ai-status{animation:pulseDot 1.1s ease-in-out infinite}.hist-ai-action small,.hist-summary-action small,.hist-share-action small{margin-top:3px;color:var(--faint);font-size:10px;line-height:1.2}
/* Overrides .hist-ai-action's own grid/padding/radius so the same button
(same class, same data-ai-state color rules, same ai-glow-card ring)
reads as a standalone full card -- see historyHeroHTML()'s own comment,
js/views/history.js -- instead of a tight embedded pill. */
.hist-ai-card-action{display:grid;width:100%;min-width:0;min-height:68px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px}
.hist-ai-card-action b{font-size:13.5px;line-height:1.25}
.hist-ai-copy{min-width:0}
.hist-ai-copy small{display:-webkit-box;margin-top:3px;overflow:hidden;color:var(--faint);font-size:10px;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hist-ai-end{flex:0 0 auto}
/* .hist-workspace .card{padding:0} (above) expects every card to supply
its own inset per "section" instead of inheriting the card's own --
this button IS its one section, so it supplies its own here. Scoped to
match that rule's own specificity (one ancestor class + one own class)
rather than a bare .hist-ai-card-action{padding:...}, which a bare
single-class selector loses to regardless of source order. */
.hist-workspace .hist-ai-card-action{padding:var(--space-3) var(--space-4)}
/* Same tint construction as every other action icon (.hist-action-icon),
just Shiba's own hue, so it reads as one family of icons with a
distinct accent rather than a mismatched one-off amber badge. */
.hist-share-action .hist-shiba-icon{background:color-mix(in srgb,var(--cs-orange) 12%,transparent);border:1px solid color-mix(in srgb,var(--cs-orange) 38%,transparent);color:var(--cs-orange)}
.hist-performance-context,.hist-insight-lead{display:grid;grid-template-columns:4px minmax(0,1fr);gap:var(--space-3)}
.hist-performance-context{margin:0;padding:var(--space-3) var(--space-4) 14px}
.hist-insight-lead{margin-top:var(--space-3);padding:var(--space-3) var(--space-4) 0;border-top:1px solid var(--lineS)}
/* The Insight KPI row already closes its section, so the lead beneath it
does not need a second rule. Performance follows the chart's own rule
and receives a balanced explicit bottom inset above. */
.hist-analysis-kpis+.hist-insight-lead{border-top:0;padding-top:0}.hist-performance-context>i,.hist-insight-lead>i{width:4px;height:100%;min-height:36px;border-radius:99px}.hist-performance-context b,.hist-performance-context small,.hist-insight-lead b,.hist-insight-lead small{display:block}.hist-performance-context b,.hist-insight-lead b{font-size:13px}.hist-performance-context small,.hist-insight-lead small{margin-top:3px;color:var(--faint);font-size:12px;line-height:1.4}
.hist-review-income{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px var(--space-4) 0;padding:8px 10px;border-radius:10px;background:var(--btn);color:var(--faint);font-size:10px}.hist-review-income b{font-family:var(--mono);color:var(--up)}
.hist-review-trade{display:grid;width:100%;grid-template-columns:6px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px var(--space-4);border-top:1px solid var(--lineS);color:var(--text);text-align:left}.hist-review-trade:first-of-type{margin-top:4px;border-top:0}.hist-review-trade>i{width:6px;height:6px;border-radius:50%}.hist-review-trade b,.hist-review-trade small{display:block}.hist-review-trade b{font-size:11.5px}.hist-review-trade small{margin-top:2px;color:var(--faint);font-size:10px}.hist-review-trade strong{font-family:var(--mono);font-size:11px;white-space:nowrap}
/* Edge/Execution/Insight are now nav cards + a dedicated takeover workspace
per lens (see .hist-lens-card below), not tabs beside the hero -- the old
.hist-analysis-shell/.hist-analysis-tabs/.hist-analysis-workspace wrapper
is gone. historyLensWorkspaceHTML renders a plain .hist-analysis-pane
(semantic only, no styling of its own) inside the same takeover shell
Personal AI/Summary already use. */
/* Edge / Execution / Insight now share one flat surface. Internal dividers
replace three repeated borders, radii and shadows while each destination
remains its own native 44px+ button with the same data-hlens contract. */
/* Collapses the whole lens stack out of view while the Performance/AI card
is flipped to its AI face -- same grid-rows 0fr/1fr collapse idiom as
the feedback thread reveal (.feedback-ticket-reveal). The extra -wrap
layer exists only to own this transition; .hist-lens-stack itself keeps
its own unrelated overflow:hidden for the lens-card dividers below. */
.hist-lens-stack-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--e-out),opacity .3s var(--e-out);opacity:1}
/* .hist-overview-page>.card{margin:0} (below) only ever reaches DIRECT
.card children -- .hist-lens-stack-wrap is new since that rule was
written, so .hist-lens-stack is now one level deeper and was quietly
getting .card's own 12px margin-bottom back on top of the grid's own
gap, doubling the space below Performance (reported live: "why is
there a big gap between Performance and the lens card?"). */
.hist-lens-stack-wrap>.hist-lens-stack{min-height:0;overflow:hidden;margin:0}
.hist-lens-stack-wrap.is-hidden{grid-template-rows:0fr;opacity:0}
@media(prefers-reduced-motion:reduce){.hist-lens-stack-wrap{transition:none}}
.hist-lens-stack{overflow:hidden}
.hist-lens-card{display:block;width:100%;min-width:0;margin:0;padding:0;border:0;border-top:1px solid var(--lineS);background:transparent;color:var(--text);text-align:left;transition:background var(--d1) var(--e-out)}
.hist-lens-card:first-child{border-top:0}
.hist-lens-top{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:10px;padding:var(--space-3) var(--space-4) 0}
.hist-lens-heading{flex:1 1 auto}.hist-lens-heading>span{min-width:0}
.hist-lens-top .cap{display:block}
.hist-lens-top b{display:block;margin-top:2px;font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.hist-lens-end{display:flex;flex:0 0 auto;align-items:center;gap:7px}
.hist-lens-premium{display:inline-flex;min-height:22px;align-items:center;padding:3px 7px;border:1px solid var(--accentBorder);border-radius:999px;background:var(--accentTintSoft);color:var(--act);font-size:8px;font-weight:800;line-height:1;letter-spacing:.055em;text-transform:uppercase}
.hist-lens-chevron{display:flex;flex:0 0 auto;width:18px;height:18px;align-items:center;justify-content:center;color:var(--faint)}
.hist-lens-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hist-lens-metrics{display:grid;grid-template-columns:repeat(var(--hist-lens-columns),minmax(0,1fr));gap:0;padding:10px var(--space-4) 0}
.hist-lens-metrics>span{display:flex;min-width:0;flex-direction:column;gap:3px;padding:0 9px;border-left:1px solid var(--lineS)}
.hist-lens-metrics>span:first-child{padding-left:0;border-left:0}
.hist-lens-metrics>span:last-child{padding-right:0}
.hist-lens-metrics small{display:block;min-height:2.4em;color:var(--faint);font-size:9px;font-weight:750;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;overflow-wrap:anywhere}
.hist-lens-metrics b{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hist-lens-conclusion{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:9px var(--space-4) var(--space-3);border-top:1px solid var(--lineS)}
.hist-lens-conclusion i{width:4px;height:14px;flex:0 0 auto;border-radius:99px}
.hist-lens-conclusion span{min-width:0;color:var(--dim);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.hist-lens-card:hover,.hist-lens-card:active{background:var(--btn)}
.hist-lens-card:active{transform:none}
/* The grouped surface clips its children to the shared outer radius, so the
global positive outline-offset would also clip keyboard focus. Pull this
one ring inward while retaining the same focus colour and clear shape. */
.hist-lens-card:focus-visible{z-index:1;outline:2px solid var(--act);outline-offset:-3px}
/* Correlation heatmap -- the grid scrolls horizontally INSIDE this one
container (the page itself never does); the row-label column stays
sticky so a ticker is always readable while scrolling through the rest
of a wide matrix. A plain
(not a div-grid) so screen readers get
real row/column header semantics for free. */
.corr-heatmap-scroll{overflow-x:auto;margin:0 calc(var(--space-4)*-1);padding:0 var(--space-4);
-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--space-4),#000 calc(100% - 20px),transparent);
mask-image:linear-gradient(to right,transparent,#000 var(--space-4),#000 calc(100% - 20px),transparent)}
/* Segmented Grid/List toggle -- Correlation defaults to the heatmap (Grid)
but a dense NxN matrix is inherently harder to scan on a small phone than
a plain vertical list; List mode skips the grid entirely and shows every
pair as one scrollable column, no horizontal scrolling anywhere. */
.corr-view-toggle{display:flex;gap:6px;margin-bottom:10px}
.corr-view-toggle button{flex:1;padding:8px;border-radius:10px;background:var(--btn);color:var(--dim);font-size:12.5px;font-weight:650}
.corr-view-toggle button.on{background:var(--btn2);color:var(--act)}
.corr-heatmap{border-collapse:separate;border-spacing:3px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.corr-heatmap th,.corr-heatmap td{padding:0}
.corr-heatmap thead th{font-size:9.5px;font-weight:700;color:var(--faint);padding-bottom:4px;min-width:34px;text-align:center;background:var(--card)}
.corr-heatmap tbody th{font-size:9.5px;font-weight:700;color:var(--faint);text-align:right;padding-right:6px;position:sticky;left:0;background:var(--card);white-space:nowrap}
.corr-heatmap .corr-corner{position:sticky;left:0;z-index:1;background:var(--card)}
.corr-cell{display:flex;align-items:center;justify-content:center;width:34px;height:30px;border-radius:6px;font-size:9.5px;font-weight:700;color:var(--text)}
@media(max-width:390px){.corr-cell{width:30px;height:28px}.corr-heatmap thead th{min-width:30px}}
/* UI-polish pass -- collapsed-by-default methodology disclosure shared by
every Stress scenario. Plain / -- native keyboard and
screen-reader support with zero JS needed to open/close it. */
.stress-methodology{margin-top:12px;font-size:11px;color:var(--faint)}
.stress-methodology summary{cursor:pointer;font-weight:700;color:var(--act);list-style:none}
.stress-methodology summary::-webkit-details-marker{display:none}
.stress-methodology summary::before{content:"ⓘ ";}
.stress-methodology[open] summary{margin-bottom:6px}
.stress-methodology p{margin:0;line-height:1.6}
/* Compact scenario chips replacing the old .workspace-tabs grid for Stress
mode selection specifically. Icon-only (label text moved to title/aria-
label -- same pattern .workspace-back already uses for an icon-only
button elsewhere in this app). Styled as ONE cohesive segmented track,
the exact same recipe .seg already uses for the Add-mode/theme pickers
(a single var(--inputbg) rounded rail, equal-width segments, the active
one lifted onto a var(--btn2) pill) rather than 5 separate floating
circles with visible gaps between them -- that read as loose/scattered
("ugly") where a single grouped control reads as one deliberate choice. */
.stress-chip-row{display:flex;gap:3px;padding:3px;background:var(--inputbg);border-radius:14px;margin-bottom:12px}
.stress-chip{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;color:var(--dim);transition:background .2s,color .2s}
.stress-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.stress-chip.on{background:var(--btn2);color:var(--act)}
/* Top-loss-contributor horizontal bars, same track/fill recipe as the
Portfolio Risk card's own top-5 mini-bars (js/views/desk.js) -- one
visual language for "ranked list as bars" across the whole workspace. */
.stress-bar-track{flex:1;height:7px;border-radius:4px;background:var(--inputbg);overflow:hidden}
.stress-bar-fill{display:block;height:100%;border-radius:4px}
/* Icon-only, reuses the calendar prev/next button recipe (.hist-cal-nav) --
no new visual language for "a round icon button that goes back." Serves
two depths (row-list -> Overview, detail -> row-list); events.js tells
them apart by whether S.histAnalysisDetail is currently set. */
.workspace-back{display:flex;width:44px;height:44px;align-items:center;justify-content:center;margin:calc(var(--space-4) - 10px) 0 calc(var(--space-3) - 10px) calc(var(--space-4) - 10px);color:var(--act);transition:opacity .15s var(--e-out)}
.workspace-back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.workspace-back:active{opacity:.5}
.hist-analysis-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 var(--space-4)}.hist-analysis-head h2{margin:3px 0 0;font-size:18px;letter-spacing:-.025em}.hist-analysis-head>small{color:var(--faint);font-family:var(--mono);font-size:11px;white-space:nowrap}
.hist-analysis-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;padding:0 var(--space-4);border-top:1px solid var(--lineS);border-bottom:1px solid var(--lineS)}.hist-analysis-kpis>div{min-width:0;padding:11px 10px;border-top:1px solid var(--lineS);border-left:1px solid var(--lineS)}.hist-analysis-kpis>div:nth-child(-n+2){border-top:0}.hist-analysis-kpis>div:nth-child(odd){padding-left:0;border-left:0}.hist-analysis-kpis>div:nth-child(even){padding-right:0}.hist-analysis-kpis b{display:block;margin-top:5px;font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.hist-analysis-kpis.is-three b{font-size:15px}
/* Insight has 3 metrics, not 4 -- forcing that into the 2-col grid above
orphans the third item alone on its own row. One row of 3 instead. */
.hist-analysis-kpis.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hist-analysis-kpis.is-three>div{padding:12px 10px;border-top:0}
.hist-analysis-kpis.is-three>div:first-child{padding-left:0;border-left:0}
.hist-analysis-kpis.is-three>div:last-child{padding-right:0}
.hist-analysis-list{margin-top:8px}
/* No tap, no navigation -- every evidence section renders in full, stacked.
.hist-analysis-block carries the full-bleed divider between sections
(contained horizontal inset lives on the head and on the bodyBuilder
content below it, same convention as every other flush card in
History); the head is a plain heading, not a button. */
.hist-analysis-block{padding-top:16px;border-top:1px solid var(--lineS)}
.hist-analysis-block:first-child{padding-top:0;border-top:0}
.hist-analysis-block-head{padding:0 var(--space-4) 12px}
.hist-analysis-block-head>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:3px}
.hist-analysis-block-head b{font-size:15px;letter-spacing:-.015em}
.hist-analysis-block-head strong{flex:0 0 auto;color:var(--faint);font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap}
.hist-analysis-block-head small{display:block;margin-top:4px;color:var(--dim);font-size:12px;line-height:1.4}
.hist-personal-ai>header,.hist-formatted-summary>header{padding-bottom:12px;border-bottom:1px solid var(--lineS)}
.hist-personal-ai h3,.hist-formatted-summary h3{margin:3px 0 0;font-size:18px}
/* A plain "‹ Overview" link, not a boxed icon button -- this is a takeover
screen leaving the way it arrived, not a nested detail view that needs a
heavy nav-bar affordance. exitThen (js/shell.js) plays this element's own
closing animation before the next render swaps it back to Overview. */
.hist-summary-return{display:inline-flex;align-items:center;gap:1px;margin-bottom:10px;padding:8px 2px;color:var(--act);font-size:13.5px;font-weight:650}
.hist-summary-return svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hist-summary-return:hover{opacity:.7}
.hist-analysis-empty{padding:22px var(--space-4);color:var(--dim);font-size:13px;line-height:1.5}
/* Both takeover screens (the free formatted summary and the real AI
briefing) share this shape: a one-line verdict, a Desk/Ideas snapshot,
then their own distinct body. */
.hist-summary-verdict{display:grid;grid-template-columns:4px minmax(0,1fr);gap:var(--space-3);margin-top:14px}
.hist-summary-verdict>i{width:4px;height:100%;min-height:36px;border-radius:99px}
.hist-summary-verdict b,.hist-summary-verdict small{display:block}
.hist-summary-verdict b{font-size:16px;letter-spacing:-.01em}
.hist-summary-verdict small{margin-top:4px;color:var(--faint);font-size:12.5px;line-height:1.45}
.hist-summary-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;padding-top:13px;padding-bottom:1px;border-top:1px solid var(--lineS);border-bottom:1px solid var(--lineS)}
.hist-summary-strip>div{min-width:0;padding:0 12px 12px;border-left:1px solid var(--lineS)}
.hist-summary-strip>div:first-child{padding-left:0;border-left:0}
.hist-summary-strip>div:last-child{padding-right:0}
.hist-summary-strip span{display:block;color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.hist-summary-strip b{display:block;margin-top:5px;font-size:14px;letter-spacing:-.01em;overflow-wrap:anywhere}
.hist-summary-strip small{display:block;margin-top:3px;color:var(--dim);font-size:11px;line-height:1.4}
.hist-summary-upgrade{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 2px 0;border-top:1px solid var(--lineS);color:var(--act);text-align:left}
.hist-summary-upgrade b{font-size:13px}
.hist-summary-upgrade small{display:block;margin-top:2px;color:var(--faint);font-size:11px;line-height:1.4;font-weight:400}
.hist-summary-upgrade svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hist-personal-ai,.hist-formatted-summary,.hist-workspace .card.hist-personal-ai,.hist-workspace .card.hist-formatted-summary{margin:0;padding:18px}.hist-personal-ai-body{min-height:90px;margin-top:13px}.hist-personal-ai-body p{margin:0;color:var(--text);font-size:14px;line-height:1.65;white-space:pre-line}.hist-personal-ai-body>small{display:block;margin-top:11px;color:var(--faint);font-size:12px;line-height:1.45}.hist-personal-ai footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:11px;border-top:1px solid var(--lineS)}.hist-personal-ai footer>span{color:var(--faint);font-size:11px}
/* Retry/Refresh (only shown on error or once a briefing exists) and Shiba
share (always shown once there's a result) used to be an either/or in the
same footer slot -- Shiba effectively never appeared once you'd generated
a briefing once. They're two independent actions now, side by side. */
.hist-footer-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hist-personal-ai footer .aiCohortExplainRefresh{width:auto;min-height:44px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--btn);color:var(--act);font-size:11px;font-weight:700}
.hist-ai-blocked{padding:var(--space-3);border:1px solid var(--warnBorder);border-radius:var(--radius-md);background:var(--warnTint)}.hist-ai-blocked>b{color:var(--warn);font-size:13px}.hist-ai-blocked p{margin:5px 0 0;color:var(--dim);font-size:12px;line-height:1.5}.hist-ai-blocked button{min-height:44px;margin-top:var(--space-3);padding:7px 11px;border-radius:var(--radius-md);background:var(--btn);color:var(--warn);font-size:11px;font-weight:750}
.hist-ai-refresh-note{margin-top:11px;padding:9px 10px;border-radius:10px;background:var(--btn);color:var(--faint);font-size:10px;line-height:1.4}.hist-ai-refresh-note.is-error{border:1px solid var(--warnBorder);color:var(--warn)}.hist-ai-refresh-note>b{display:block;margin-bottom:4px;color:var(--text)}
.hist-formatted-rows{margin-top:10px}.hist-formatted-rows>div{display:grid;grid-template-columns:4px minmax(0,1fr);gap:11px;padding:10px 0;border-top:1px solid var(--lineS)}.hist-formatted-rows>div:first-child{border-top:0}.hist-formatted-rows i{width:4px;height:100%;min-height:38px;border-radius:99px}.hist-formatted-rows small,.hist-formatted-rows b{display:block}.hist-formatted-rows small{color:var(--faint);font-size:10px;font-weight:800;text-transform:uppercase}.hist-formatted-rows b{margin-top:3px;font-size:13px}.hist-formatted-rows p{margin:4px 0 0;color:var(--dim);font-size:12px;line-height:1.4}.hist-formatted-summary footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:11px;border-top:1px solid var(--lineS);color:var(--faint);font-size:11px}
.hist-evidence-section{padding:12px var(--space-4) 0;border-top:1px solid var(--lineS)}.hist-evidence-section:first-child{padding-top:0;border-top:0}.hist-evidence-section+section{margin-top:12px}.hist-evidence-section>span{display:block;margin-bottom:6px;color:var(--dim);font-size:11px;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.hist-evidence-rows>div{display:grid;grid-template-columns:4px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px var(--space-4);border-top:1px solid var(--lineS)}.hist-evidence-rows>div:first-child{border-top:0}.hist-evidence-rows i{width:4px;height:100%;min-height:31px;border-radius:99px}.hist-evidence-rows b,.hist-evidence-rows small{display:block}.hist-evidence-rows b{font-size:13px;line-height:1.3}.hist-evidence-rows small{margin-top:3px;color:var(--dim);font-size:11.5px;line-height:1.4}.hist-evidence-rows strong{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.hist-evidence-empty,.hist-evidence-intro{margin:0;padding:11px var(--space-4);color:var(--dim);font-size:12px;line-height:1.5}
.cohort-dim-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--space-4)}.cohort-dim-chip{width:auto;min-height:44px;padding:7px 11px;border:1px solid var(--inputLine);border-radius:var(--radius-md);background:var(--inputbg);color:var(--dim);font-size:10.5px;font-weight:700}.cohort-dim-chip.on{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act)}
.hist-cohort-row{padding:13px var(--space-4);border-top:1px solid var(--lineS)}.hist-cohort-row>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.hist-cohort-row>header>div{min-width:0}.hist-cohort-row>header b,.hist-cohort-row>header small{display:block}.hist-cohort-row>header b{font-size:13px}.hist-cohort-row>header small{margin-top:3px;color:var(--dim);font-size:11.5px}.cohort-tier-badge{flex:0 0 auto;padding:3px 8px;border:1px solid;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.hist-cohort-stats{margin-top:8px}.hist-cohort-row p{margin:8px 0 0;color:var(--dim);font-size:11.5px;line-height:1.45}.hist-cohort-row p.is-warn{color:var(--warn)}
.hist-primary-stage{position:relative;display:grid;height:100%;min-height:0;grid-template-rows:24px 52px minmax(0,1fr)}.hist-primary-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-2)}.hist-primary-head>div{display:flex;min-width:0;align-items:baseline;gap:6px}
/* "EXPECTANCY" is nearly 3x longer than "R" or "P&L" -- without min-width:0
a flex child can never shrink below its own text's intrinsic width, so
the longer mode labels pushed the big value past its own column and
straight over "N verified" next to it. Truncating the label instead of
letting it collide with the number is the fix; the label is secondary
context, the number is the thing that must never be unreadable. */
.hist-primary-head .cap{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;white-space:nowrap}
.hist-primary-head b{flex:0 0 auto;font-family:var(--mono);font-size:18px}.hist-primary-head>span{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.hist-chart-switch{display:grid;height:44px;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:var(--space-2) 0 0}.hist-chart-switch button{display:flex;width:100%;min-width:0;min-height:44px;align-items:center;justify-content:center;padding:4px 2px;border-radius:9px;color:var(--faint);font-size:10.5px;font-weight:700}.hist-chart-switch button span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hist-chart-switch button.on{background:var(--btn2);color:var(--act);box-shadow:inset 0 0 0 1px var(--accentBorder)}
.hist-edge-chart{display:grid;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) 24px;margin:0}.hist-edge-chart.is-empty .hist-hero-empty{display:flex;height:100%;min-height:0;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}.hist-edge-chart svg{display:block;width:100%;height:100%;min-height:0;overflow:visible}.hist-edge-baseline{stroke:var(--faint);stroke-width:1;stroke-dasharray:4 4;opacity:.5}.hist-edge-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.hist-edge-dot{stroke:var(--card);stroke-width:1.5}.hist-edge-dot.is-last{stroke-width:2.5}.hist-edge-axis{display:flex;height:24px;align-items:center;justify-content:space-between;color:var(--dim);font-size:10.5px}.hist-edge-axis b{color:var(--text);font-size:10.5px;font-weight:700}
/* Switching P&L/R/Expectancy/Win%/Drawdown replaces this stage's inner HTML,
but events.js now morphs the actual line/area/dots from their outgoing
shape to the incoming one via the Web Animations API (same point count
every mode -- same trades, just a different value per point) before this
ever runs, so the curve visibly bends into its new shape instead of
popping in. This container itself is deliberately NOT faded/scaled
anymore -- an opacity ramp on the whole box would hide that morph
underneath it for its first ~200ms, and a transform on a box containing
overflow:visible SVG content was the actual cause of an earlier flicker.
The headline number has no shape to morph, so it still crossfades. */
.hist-primary-head b{animation:histChartSwap .22s linear both}
@keyframes histChartSwap{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hist-primary-head b{animation:none}}
.hist-money-summary{margin-top:10px}
.hist-money-summary>header{padding:15px var(--space-4) 0}
.hist-money-summary>header h3{margin:4px 0 12px;font-size:15px}
.hist-money-summary .kv{padding:0 var(--space-4)}
.hist-money-summary .kv:last-child{padding-bottom:16px}
.hist-upcoming{margin-top:10px}.hist-upcoming>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 17px 12px}.hist-upcoming>header h3{margin:4px 0 0;font-size:15px}.hist-event-badge{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border:1px solid var(--warnBorder);border-radius:50%;background:var(--warnTint);color:var(--warn);font-family:var(--mono);font-size:10px;font-weight:800}.hist-upcoming-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 17px;border-top:1px solid var(--lineS)}.hist-upcoming-row:last-of-type{padding-bottom:15px}.hist-upcoming-row>div,.hist-upcoming-row>span{display:flex;flex-direction:column;gap:3px}.hist-upcoming-row>div{min-width:0}.hist-upcoming-row>div>b{font-family:var(--mono);font-size:12px}.hist-upcoming-row>div>small{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:10px}.hist-upcoming-row>div>small i{width:6px;height:6px;flex:0 0 auto;border-radius:50%}.hist-upcoming-row>span{flex:0 0 auto;align-items:flex-end;font-family:var(--mono)}.hist-upcoming-row>span>b{color:var(--warn);font-size:11px}.hist-upcoming-row>span>small{color:var(--faint);font-size:9.5px}
/* hist-dividend-card now rides on hist-trade-card for position/padding/
header/decision styling -- only the footer (two buttons, not one) and the
compact-mode cursor hint are genuinely its own. */
.hist-dividend-card footer{display:flex;gap:7px;margin:11px 17px 17px}.hist-dividend-card footer button{width:auto;min-height:44px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--btn);font-size:10px}.hist-dividend-card footer .divEd{color:var(--act)}.hist-dividend-card footer .divRm{color:var(--faint)}.hist-dividend-expanded{cursor:pointer}
@media(max-width:620px){
.workspace-tabs{gap:6px}.workspace-tab{padding:9px 6px}
.mgmt-tabs{gap:4px}.mgmt-tabs .workspace-tab{gap:4px;padding:9px 3px;font-size:clamp(10.5px,3vw,12px)}.mgmt-tabs .workspace-tab svg{width:13px;height:13px}
.hist-formatted-summary footer,.hist-personal-ai footer{align-items:flex-start;flex-direction:column;gap:8px}.hist-formatted-summary footer b{white-space:normal}
}
@media(max-width:390px){
.hist-performance-chart{height:286px;padding-inline:var(--space-3)}
.hist-performance-head,.hist-performance-context,.hist-workspace .hist-ai-card-action,.hist-lens-top,.hist-lens-conclusion{padding-left:var(--space-3);padding-right:var(--space-3)}
.hist-chart-switch{gap:2px}.hist-chart-switch button{font-size:9.5px}
.hist-ai-status{max-width:72px;overflow:hidden;text-overflow:ellipsis}
.hist-lens-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:var(--space-3);padding-right:var(--space-3)}
.hist-lens-metrics>span:nth-child(odd){padding-left:0;border-left:0}
.hist-lens-metrics>span:nth-child(even){padding-right:0}
.hist-lens-metrics>span:nth-child(n+3){padding-top:9px;border-top:1px solid var(--lineS)}
.hist-lens-metrics>span:last-child:nth-child(odd){grid-column:1/-1;padding-right:0}
}
@media(max-width:350px){
.mgmt-tabs .workspace-tab{gap:3px;padding-inline:2px;font-size:9.5px}.mgmt-tabs .workspace-tab svg{width:12px;height:12px}
}
@media(min-width:700px){
.hist-analysis-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.hist-analysis-kpis>div{padding:12px;border-top:0;border-left:1px solid var(--lineS)}.hist-analysis-kpis>div:first-child{padding-left:0;border-left:0}.hist-analysis-kpis>div:last-child{padding-right:0}
}
@keyframes histSurfaceIn{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes histContentIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hist-workspace.closing,.hist-workspace.opening,.workspace-pane,.hist-timeline-content{animation:none}}
.hist-timeline-card,.hist-workspace .card.hist-timeline-card{margin:0;padding:0;overflow:hidden}.hist-timeline-card-head{display:flex;align-items:center;justify-content:flex-start;padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--lineS)}.hist-timeline-content{min-width:0;padding:0 var(--space-4) var(--space-4);animation:histContentIn .34s var(--e) both}
.hist-calendar{padding:15px 0 0}
.hist-calendar-head{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;text-align:center}
.hist-calendar-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.hist-calendar-head b{font-size:15px;font-weight:760;line-height:1.25}
.hist-cal-nav{width:34px;height:34px;border-radius:var(--radius-md);background:var(--btn);border:1px solid var(--line);color:var(--act);display:flex;align-items:center;justify-content:center}
.hist-cal-nav svg{width:17px;height:17px}
.hist-cal-week,.hist-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hist-cal-week{margin:15px 0 5px}
.hist-cal-week span{text-align:center;color:var(--faint);font-size:10px;font-weight:750}
.hist-cal-grid{grid-auto-rows:42px}
.hist-cal-blank{display:block}
.hist-cal-day{position:relative;min-width:0;height:42px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--dim);font-family:var(--mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out),box-shadow var(--d1) var(--e-out),transform .13s var(--e-out)}
.hist-cal-day:active{transform:scale(.94)}
.hist-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--accentBorder);color:var(--act)}
.hist-cal-day.has-events{background:var(--btn);color:var(--text)}
.hist-cal-day.is-selected{background:var(--accentTint);color:var(--act);box-shadow:inset 0 0 0 1.5px var(--accentBorder)}
.hist-cal-day:hover{background:var(--btn2)}
.hist-cal-day.is-selected:hover{background:var(--accentTint)}
.hist-cal-dots{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:2px;max-width:26px}
.hist-cal-dots i{display:block;flex:0 0 auto;width:5px;height:5px;border-radius:50%}
.hist-cal-key,.hist-graph-key{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 12px;margin:13px 0 12px;color:var(--faint);font-size:10.5px}
.hist-cal-key span,.hist-graph-key span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hist-cal-key i,.hist-graph-key i{width:6px;height:6px;border-radius:50%;background:var(--act)}
.hist-cal-key i.is-win,.hist-graph-key i.is-win{background:var(--up)}
.hist-cal-key i.is-loss,.hist-graph-key i.is-loss{background:var(--down)}
.hist-cal-key i.is-earnings,.hist-graph-key i.is-earnings{background:var(--warn)}
.hist-cal-key i.is-earnings-candidate,.hist-graph-key i.is-earnings-candidate{background:color-mix(in srgb,var(--warn) 55%,var(--faint))}
.hist-cal-key i.is-dividend,.hist-graph-key i.is-dividend{background:var(--up)}
.hist-date-list{margin-top:4px;padding-top:13px;border-top:1px solid var(--lineS)}
.hist-date-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}
.hist-date-list-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.hist-date-list-head>div b{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--text);line-height:1.2;overflow-wrap:anywhere}
.hist-date-list-head>strong{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:800;color:var(--faint);white-space:nowrap}
.hist-date-empty{padding:13px 0 3px;color:var(--faint);font-size:12px;line-height:1.5}
.hist-date-events{min-width:0}
.hist-date-row{display:grid;grid-template-columns:6px minmax(0,1fr) auto;align-items:start;column-gap:8px;padding:8px 0;min-height:31px}
.hist-date-row+ .hist-date-row{margin-top:5px}
.hist-date-row>i{width:6px;height:6px;margin-top:5px;border-radius:50%}
.hist-date-row>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.hist-date-row b{min-width:0;font-size:12px;font-weight:720;line-height:1.35;overflow-wrap:anywhere}
.hist-date-row small{min-width:0;color:var(--faint);font-family:var(--mono);font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.hist-date-row>span{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.05em;white-space:nowrap}
.hist-graph{padding-top:16px}
.hist-equity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hist-equity-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.hist-equity-head>div:last-child{align-items:flex-end;text-align:right}
.hist-equity-head b{font-family:var(--mono);font-size:24px;font-weight:800;line-height:1.1;letter-spacing:0}
.hist-equity-head strong{font-family:var(--mono);font-size:14px;font-weight:800;white-space:nowrap}
.hist-equity-head small{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.hist-equity-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;padding-top:12px;border-top:1px solid var(--lineS)}
.hist-equity-stats span{min-width:0;padding:0 8px;border-left:1px solid var(--lineS)}
.hist-equity-stats span:first-child{padding-left:0;border-left:0}
.hist-equity-stats span:last-child{padding-right:0}
.hist-equity-stats small{display:block;color:var(--faint);font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1.2}
.hist-equity-stats b{display:block;min-width:0;margin-top:5px;font-family:var(--mono);font-size:11px;
font-weight:750;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hist-graph-svg{display:block;width:100%;height:224px;margin:10px 0 0;overflow:visible}
.hist-graph-svg text{fill:var(--faint);font-family:var(--mono);font-size:16px}
.hist-graph-grid{stroke:var(--lineS);stroke-width:1}
.hist-graph-line{fill:none;stroke:var(--act);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.hist-graph-area{stroke:none}
.hist-graph-marker-line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.hist-graph-marker-dot,.hist-graph-money-dot{stroke:var(--card);stroke-width:1.5}
.hist-equity-note{padding-top:1px}
@media(max-width:430px){
.hist-timeline-toggle{width:100%}
.hist-cal-grid{grid-auto-rows:38px}
.hist-cal-day{height:38px;font-size:11px}
.hist-date-row{min-height:38px}
.hist-equity-stats span{padding:0 6px}
}
/* Motion aliases live with the rest of the P6 tokens at the top of this file. */
/* One shimmer, one shape language, used everywhere a real value is on its way
in rather than genuinely unknown — Desk/Ideas compact rows waiting on a
sweep, History's MFE/MAE and community cards waiting on a shared-cache
read. Deliberately never shown for data that's just missing/unmeasured
(a "—" stays a "—" for that); it only ever replaces a spot that is about
to become a real number, so it never promises something isn't coming. */
@keyframes skelShimmer{0%{background-position:-135% 0}100%{background-position:135% 0}}
.skel{display:inline-block;border-radius:6px;background:linear-gradient(90deg,var(--btn) 25%,var(--btn2) 50%,var(--btn) 75%);
background-size:200% 100%;animation:skelShimmer 1.3s ease-in-out infinite;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.skel{animation:none;background:var(--btn)}}
/* AI-card loading state — block-shaped placeholder lines standing in for
the paragraph that's about to arrive, each line's shimmer staggered
slightly so it reads as one soft wave moving down the card rather than
every line flashing in lockstep. Replaces the old flat .prog.indet bar
for the two AI cards specifically; .prog.indet stays as-is everywhere
else it's already used. */
.ai-load-line{height:12px;border-radius:6px;margin-top:9px;
background:linear-gradient(90deg,var(--btn) 25%,var(--btn2) 50%,var(--btn) 75%);
background-size:200% 100%;animation:skelShimmer 1.6s ease-in-out infinite}
.ai-load-line:first-child{margin-top:0}
.ai-load-line:nth-child(1){animation-delay:0ms}
.ai-load-line:nth-child(2){animation-delay:90ms}
.ai-load-line:nth-child(3){animation-delay:180ms}
@media (prefers-reduced-motion:reduce){.ai-load-line{animation:none;background:var(--btn)}}
/* Apple Intelligence/Siri-style animated gradient ring, used ONLY on the
combined News/Scenarios/Filings card (see aiResearchCardHTML in
ideas.js) -- a slow-rotating conic gradient traced along a 1.5px ring
just outside the card, the same visual language iOS uses to mark "an
AI did something here" without a badge or a label competing with the
card's own content. A ::before pseudo-element carries the gradient so
the card's own background/border/padding are completely untouched;
mask-composite:exclude keeps only the ring itself visible, not a solid
gradient fill. @property is what makes the angle animatable at all
(a plain custom property can't be transitioned) -- unsupported browsers
just see a static gradient, not a broken one. */
@property --ai-angle{syntax:'';inherits:false;initial-value:0deg}
.ai-glow-card{position:relative;isolation:isolate}
.ai-glow-card::before{content:"";position:absolute;inset:-1.5px;border-radius:calc(20px + 1.5px);
padding:1.5px;z-index:-1;pointer-events:none;
background:conic-gradient(from var(--ai-angle),#0A84FF,#BF5AF2,#FF375F,#FF9F0A,#30D158,#0A84FF);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:aiGlowRotate 7s linear infinite;opacity:.85;
transition:opacity .3s var(--e-out)}
@keyframes aiGlowRotate{to{--ai-angle:360deg}}
/* History's own cards run a tighter, flatter corner than Ideas' -- the ring
traced just outside the card needs to match that same radius or it reads
as a visibly mismatched curve sitting around a squarer box. */
.hist-workspace .ai-glow-card::before{border-radius:calc(var(--radius-lg) + 1.5px)}
/* The "Personal AI review" entry button (historyHeroHTML) used to be a
small, tighter-cornered nav-row glued onto the bottom of the
Performance card, needing its own var(--radius-sm) override here since
it wasn't a .card and so never matched .hist-workspace .ai-glow-card::
before above (which already gives every OTHER History card's glow ring
the correct flatter var(--radius-lg) to match .hist-workspace .card's
own radius). It's since become its own full standalone .card
(.hist-ai-card-action, above) -- deliberately keeping History's own
flatter card language (see the comment above .hist-workspace .card)
rather than reverting to the rest of the app's 20px, so no override is
needed here any more; removing the old one lets that existing rule
apply cleanly instead of a stale, now-wrong smaller radius winning by
source order. */
/* While a News/Scenarios generation is actually in flight (see the .busy
class toggled in aiResearchCardHTML), the ring spins faster and pulses
brighter -- the same "idle glow" vs "actively thinking" distinction
Siri's own animation draws, so a card that's genuinely waiting on a
provider reads differently from one just sitting there finished. */
.ai-glow-card.busy::before{animation:aiGlowRotate 2.2s linear infinite,aiGlowPulse 1.3s ease-in-out infinite}
@keyframes aiGlowPulse{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
.ai-glow-card::before{animation:none}
.ai-glow-card.busy::before{animation:none;opacity:1}
.hist-ai-action[data-ai-state="generating"] .hist-ai-status,.hist-ai-action[data-ai-state="checking"] .hist-ai-status{animation:none}
}
/* pressable feedback on anything tappable */
html{transition:background-color var(--d2) var(--e-out)}
body{transition:background-color var(--d2) var(--e-out),color var(--d2) var(--e-out),padding-top .42s var(--e)}
/* A saved Light preference should paint as Light on first render, not crossfade
from the default Dark canvas. Once shell.js marks the initial theme ready,
normal in-app theme changes keep their existing smooth transition. */
html:not(.theme-ready),html:not(.theme-ready) body{transition:none!important}
.card,.crow,.navin,input,select,textarea,.pill{
transition:background-color var(--d2) var(--e-out),border-color var(--d2) var(--e-out),
color var(--d2) var(--e-out),box-shadow var(--d2) var(--e-out)}
button,.crow,.setup-nav,.chip,label.chk,.sug div{
transition:transform .13s var(--e-out),background .18s var(--e-out),opacity .18s var(--e-out)}
button:active,.crow:active,.setup-nav:active,label.chk:active,.sug div:active{transform:scale(.975)}
.btn:active{transform:scale(.985)}
.navin button:active{transform:translateY(1px) scale(.97)}
/* modals: backdrop fades, sheet lifts */
@keyframes bgIn{from{opacity:0}to{opacity:1}}
@keyframes bgOut{from{opacity:1}to{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.965)}to{opacity:1;transform:none}}
@keyframes popOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,10px,0) scale(.975)}}
.modal{animation:bgIn var(--d1) var(--e-out) both}
.modal>.card{animation:popIn var(--d2) var(--e) both}
.modal.closing{animation:bgOut var(--d1) var(--e-out) both}
.modal.closing>.card{animation:popOut var(--d1) var(--e-out) both}
/* The chart modal's content is .chart-modal-panel, not .card -- same
entrance/exit language as every other .modal>.card, since the scrim
fading in alone while a full-screen panel just appears with no motion
of its own read as a hard cut, not an open. */
.modal>.chart-modal-panel{animation:popIn var(--d2) var(--e) both}
.modal.closing>.chart-modal-panel{animation:popOut var(--d1) var(--e-out) both}
/* full-screen sheets slide up from the bottom, iOS style */
@keyframes sheetIn{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes sheetOut{from{transform:none}to{transform:translate3d(0,100%,0)}}
.sheet{animation:sheetIn var(--d3) var(--e) both}
.sheet.closing{animation:sheetOut var(--d2) var(--e-out) both}
/* A re-render replaces the overlay's markup, which re-creates these elements
and replays their opening animation. Opening should animate; redrawing the
same sheet you are already looking at should not — without this, typing a
ticker made the whole sheet slide up from the bottom once per keystroke.
.nosheet is the softer case: the sheet itself holds still while its contents
crossfade, which is what switching Add mode should feel like. */
.noanim,.noanim>.card,.noanim .pg-fade{animation:none!important}
.nosheet{animation:none!important}
/* Switching Add modes should feel like one sheet changing its mind, not a
new sheet arriving. The header and form take one short shared beat while
the fixed sheet surface stays under the finger. */
@keyframes addModeSwap{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:none}}
.add-mode-swap{animation:addModeSwap .24s var(--e-out) both}
/* a card expanding out of a compact row grows into place */
@keyframes cardOpen{from{opacity:0;transform:translate3d(0,-6px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes cardShut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-6px,0) scale(.97)}}
.card.opening{animation:cardOpen var(--d3) var(--e) both}
.card.opening>*{animation:pgFade var(--d2) var(--e) both;animation-delay:.06s}
.card.closing{animation:cardShut var(--d1) var(--e-out) both}
/* rows animate only when the page itself changed, or when one is freshly collapsed */
@keyframes rowIn{from{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}to{opacity:1;transform:none}}
.pg-fwd .crow,.pg-back .crow,.pg-fade .crow{animation:rowIn var(--d2) var(--e) both}
.crow.settling{animation:rowIn var(--d2) var(--e) both}
/* suggestions dropdown */
@keyframes sugIn{from{opacity:0;transform:translate3d(0,-8px,0) scale(.98)}to{opacity:1;transform:none}}
.sug{animation:sugIn var(--d1) var(--e) both;transform-origin:top center}
/* toast */
@keyframes toastIn{from{opacity:0;transform:translate3d(-50%,18px,0) scale(.94)}
to{opacity:1;transform:translate3d(-50%,0,0) scale(1)}}
.toast{animation:toastIn var(--d2) var(--e) both}
/* numbers and bars ease rather than snap */
.hero,.rr{transition:color var(--d1) var(--e-out)}
.bar>i{transition:width var(--d3) var(--e)}
.tag{transition:all var(--d1) var(--e-out)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important}
}
@keyframes pgFwd{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes pgBack{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes pgFade{from{opacity:0;transform:translate3d(0,12px,0) scale(.995)}to{opacity:1;transform:none}}
.onboarding-screen{width:min(100%,480px);margin:auto}
.onboarding-screen.ob-enter-fade{animation:obFade var(--d2) var(--e) both}
.onboarding-screen.ob-enter-forward{animation:obForward var(--d3) var(--e) both}
.onboarding-screen.ob-enter-back{animation:obBack var(--d2) var(--e-out) both}
@keyframes obFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes obForward{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes obBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
body.auth-leaving .wrap,body.auth-leaving .nav{opacity:0;transform:translateY(5px);transition:opacity var(--d1) var(--e-out),transform var(--d1) var(--e-out)}
.auth-bootstrap{width:min(100%,360px);margin:auto;text-align:center;padding:24px 18px;animation:pgFade var(--d2) var(--e) both}
.auth-bootstrap .title{font-size:27px;margin-top:13px}
.auth-bootstrap .mut{margin-top:10px}
.auth-bootstrap-line{display:flex;justify-content:center;gap:5px;height:5px;margin-top:18px}
.auth-bootstrap-line span{width:20px;border-radius:999px;background:var(--act);opacity:.28;animation:authBootstrap 1.1s var(--e) infinite}
.auth-bootstrap-line span:nth-child(2){animation-delay:.12s}.auth-bootstrap-line span:nth-child(3){animation-delay:.24s}
@keyframes authBootstrap{0%,100%{opacity:.22;transform:scaleX(.75)}50%{opacity:.9;transform:scaleX(1)}}
/* Onboarding-specific pieces only — cards, buttons and inputs all reuse the
app's normal .card/.btn/input styling so the flow feels like the rest of
Pantau, not a bolted-on wizard. */
.ob-hero{text-align:center;padding:6px 4px 2px}
.ob-mark{width:64px;height:64px;border-radius:50%;background:var(--accentTint);color:var(--act);
display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--accentBorder) inset}
.ob-start{padding:4px 0 10px}
.ob-brand{display:flex;align-items:center;gap:9px;color:var(--text);font-family:var(--mono);font-size:11px;font-weight:850;letter-spacing:.16em}
.ob-brand .ob-mark,.ob-auth-brand .ob-mark{width:36px;height:36px}.ob-brand .ob-mark svg,.ob-auth-brand .ob-mark svg{width:19px;height:19px}
.ob-start-copy{margin-top:30px}.ob-kicker{color:var(--act);font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.11em}
.ob-start-copy h1{margin:9px 0 0;font-size:clamp(34px,9vw,45px);line-height:1.04;letter-spacing:-.045em}
.ob-start-copy h1 span{color:var(--dim)}
.ob-start-copy p{max-width:430px;margin:14px 0 0;color:var(--dim);font-size:14px;line-height:1.6}
.ob-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:7px;margin:24px 0 16px;color:var(--faint)}
.ob-loop>span{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 8px;border:1px solid var(--lineS);border-radius:12px;background:var(--cardS);font-size:11.5px;font-weight:750}
.ob-loop b{display:grid;place-items:center;width:19px;height:19px;flex:0 0 auto;border-radius:50%;background:var(--accentTint);color:var(--act);font-family:var(--mono);font-size:9px}
.ob-loop i{font-style:normal;font-size:11px}
.ob-entry-card{padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.ob-entry-card .btn{margin:0}.ob-entry-card .ob-secondary-action{margin-top:8px;background:var(--btn)}
.ob-entry-divider{display:flex;align-items:center;gap:10px;margin:13px 0 8px;color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.ob-entry-divider::before,.ob-entry-divider::after{content:"";height:1px;flex:1;background:var(--lineS)}
.ob-device-action{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 5px;color:var(--act);font-size:13px;font-weight:700;text-align:left}
.ob-device-action span{font-size:20px;color:var(--faint)}
.ob-entry-card>p{margin:3px 5px 1px;color:var(--faint);font-size:11.5px;line-height:1.5}
.ob-trust{display:flex;justify-content:center;gap:8px 14px;flex-wrap:wrap;margin-top:15px;color:var(--faint);font-size:10px}
.ob-trust span::before{content:"✓";margin-right:4px;color:var(--up);font-weight:800}
.ob-auth-screen{max-width:430px}.ob-auth-progress{margin-bottom:20px}
.ob-auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--dim);font-size:12px;font-weight:750}
.ob-auth-brand span{letter-spacing:.02em}
.ob-steps{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.ob-dot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
background:var(--btn);color:var(--faint);font-size:11px;font-weight:800;flex:0 0 auto;
transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out)}
.ob-step.on .ob-dot{background:var(--actFill);color:var(--onAct)}
.ob-line{flex:1;height:1px;background:var(--line);min-width:10px;transition:background var(--d1) var(--e-out)}
.ob-line.on{background:var(--act)}
.ob-drawback{display:flex;gap:12px;align-items:flex-start;padding:11px 2px}
.ob-drawback+.ob-drawback{border-top:.5px solid var(--lineS)}
.ob-drawback-ic{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--warnTint);
color:var(--warn);display:grid;place-items:center;font-size:12px;font-weight:800;font-style:normal}
.ob-drawback>span:last-child{font-size:12.5px;color:var(--dim);line-height:1.55}
.ob-drawback b{color:var(--text)}
.ob-intro-item{display:flex;gap:14px;align-items:flex-start}
.ob-intro-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--accentTint);
color:var(--act);display:grid;place-items:center}
.ob-intro-ic svg{width:19px;height:19px}
.ob-tab-map{border-block:1px solid var(--separator)}
.ob-tab-map .ob-intro-item{padding:var(--space-3) 2px;border-top:1px solid var(--separator)}
.ob-tab-map .ob-intro-item:first-child{border-top:0}
.ob-action-list{border-block:1px solid var(--separator)}
.ob-action-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px var(--space-3);
width:100%;min-height:64px;padding:var(--space-3) 2px;text-align:left;border-top:1px solid var(--separator)}
.ob-action-list button:first-child{border-top:0}
.ob-action-list b{font-size:15px;line-height:1.3}
.ob-action-list span{grid-column:1;color:var(--dim);font-size:12.5px;line-height:1.45}
.ob-action-list i{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--faint);font-size:21px;font-style:normal}
.ob-action-primary{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;text-align:left}
.ob-action-primary b{font-size:16px}
.ob-action-primary span{font-size:12.5px;font-weight:500;color:color-mix(in srgb,var(--primaryText) 75%,transparent)}
.auth-panel{min-width:0}
.auth-heading{margin-bottom:var(--space-4)}
.auth-heading .title{font-size:28px}
.auth-heading .sub{margin-top:var(--space-2);font-size:14px;line-height:1.5}
.auth-modes{margin-bottom:var(--space-3)}
.auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);border:1px solid var(--line);color:var(--text)}
.auth-oauth svg{flex:0 0 auto}
.auth-divider{display:flex;align-items:center;gap:10px;margin:var(--space-3) 0;color:var(--faint);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-surface{display:grid;gap:var(--space-3)}
.auth-field{display:grid;gap:6px;min-width:0;color:var(--dim);font-size:12.5px;font-weight:650}
.auth-field input{min-width:0}
.auth-password-wrap{position:relative;display:block;min-width:0}
.auth-password-wrap input{padding-right:66px}
.auth-eye{position:absolute;top:50%;right:5px;min-width:54px;min-height:36px;padding:0 8px;
transform:translateY(-50%);border-radius:var(--radius-md);color:var(--act);font-size:12px;font-weight:750}
.auth-message{padding:10px 12px;border-left:3px solid;font-size:12.5px;line-height:1.5}
.auth-message.error{border-color:var(--down);background:var(--downTint);color:var(--down)}
.auth-message.notice{border-color:var(--up);background:var(--upTint);color:var(--text)}
.auth-submit{margin-top:2px}
.auth-link,.auth-back{display:block;width:100%;min-height:44px;padding:10px;color:var(--act);font-size:13px;font-weight:650;text-align:center}
.auth-back{margin-top:var(--space-2);color:var(--faint)}
.pg-fwd{animation:pgFwd var(--d3) var(--e) both}
.pg-back{animation:pgBack var(--d3) var(--e) both}
.pg-fade{animation:pgFade var(--d2) var(--e) both}
.pg-fwd .card,.pg-back .card{animation:pgFade var(--d2) var(--e) both}
.pg-fwd .card:nth-of-type(2),.pg-back .card:nth-of-type(2){animation-delay:.06s}
.pg-fwd .card:nth-of-type(3),.pg-back .card:nth-of-type(3){animation-delay:.12s}
.pg-fwd .card:nth-of-type(n+4),.pg-back .card:nth-of-type(n+4){animation-delay:.17s}
/* Setup > Your money. The total is the visual anchor, but every source is
always visible beneath it so tracking an individual broker never depends
on finding a collapsed breakdown. These are ordinary source-aware values;
no style here changes the reconciliation model. */
.money-dashboard{display:grid;gap:var(--space-3)}
.money-hero-card{position:relative;overflow:hidden;padding:20px;background:
radial-gradient(520px 210px at 100% 0,color-mix(in srgb,var(--act) 20%,transparent),transparent 68%),var(--card)}
.money-hero-head,.money-account-head,.money-section-head{display:flex;align-items:center;gap:10px}
.money-hero-head{justify-content:space-between}
.money-status{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:5px 9px;border-radius:var(--radius-round);
max-width:45%;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--money-tone) 11%,transparent);
color:var(--money-tone);font-size:10.5px;font-weight:750;white-space:nowrap}
.money-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--money-tone);flex:0 0 auto}
.money-total-value{margin-top:12px;font-family:var(--mono);font-size:clamp(31px,8vw,44px);font-weight:800;
font-variant-numeric:tabular-nums;letter-spacing:-.055em;line-height:1.05}
.money-total-note{margin-top:7px;color:var(--dim);font-size:11.5px;line-height:1.5}
.money-total-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;
overflow:hidden;border:1px solid var(--lineS);border-radius:var(--radius-lg);background:var(--lineS)}
.money-total-grid>div{min-width:0;padding:11px;background:color-mix(in srgb,var(--card) 78%,transparent)}
.money-total-grid span,.money-account-metrics span{display:block;color:var(--faint);font-size:10px;font-weight:650}
.money-total-grid b,.money-account-metrics b{display:block;margin-top:4px;font-family:var(--mono);font-size:12.5px;
font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.money-dashboard-help,.money-source-note{padding:0 4px;color:var(--faint);font-size:11.5px;line-height:1.55}
.money-section-head{justify-content:space-between;margin:8px 2px 0}
.money-section-head h3{margin:2px 0 0;font-size:17px;letter-spacing:-.02em}
.money-section-head>span{color:var(--faint);font-size:11px}
.money-account-grid{display:grid;gap:var(--space-3)}
.money-account-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.money-account-head{align-items:flex-start}
.money-account-title{min-width:0;flex:1}
.money-account-title b,.money-account-title span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.money-account-title b{font-size:14px}.money-account-title span{margin-top:3px;color:var(--faint);font-size:10.5px}
.money-account-value{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:18px}
.money-account-value span{color:var(--faint);font-size:11px}
.money-account-value strong{font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.035em;text-align:right}
.money-composition{height:5px;margin-top:11px;overflow:hidden;border-radius:var(--radius-round);background:color-mix(in srgb,var(--act) 30%,var(--btn))}
.money-composition i{display:block;height:100%;border-radius:inherit;background:var(--up)}
.money-account-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.money-account-metrics>div{min-width:0}
.money-account-card footer{margin-top:14px;padding-top:11px;border-top:1px solid var(--lineS);color:var(--faint);font-size:10.5px;line-height:1.45}
.money-account-empty{margin-top:15px;padding:12px;border-radius:var(--radius-md);background:var(--btn);color:var(--faint);font-size:11.5px;line-height:1.55}
.money-snapshot-actions{display:flex;gap:9px;margin-top:13px}.money-snapshot-actions>.btn{width:0;flex:1}
.money-snapshot-actions>.btn.auto{width:auto;flex:0 0 auto}
.money-snapshot-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
.money-snapshot-detail-grid>div{min-width:0;padding:9px;border-radius:11px;background:var(--btn)}
.money-snapshot-detail-grid span,.money-snapshot-detail-grid b{display:block}.money-snapshot-detail-grid span{color:var(--faint);font-size:9px}.money-snapshot-detail-grid b{margin-top:4px;font-family:var(--mono);font-size:10.5px;overflow-wrap:anywhere}.money-snapshot-detail-grid .up{color:var(--up)}.money-snapshot-detail-grid .down{color:var(--down)}
.money-snapshot-currencies{margin-top:8px;padding:8px 10px;border-radius:11px;background:var(--btn)}.money-snapshot-currencies>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:3px 0}.money-snapshot-currencies b{font-size:9.5px}.money-snapshot-currencies span{color:var(--faint);font-size:8.5px;line-height:1.4;text-align:right}
.money-snapshot-holdings{margin-top:14px;border-top:1px solid var(--lineS)}
.money-snapshot-holdings>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 0;list-style:none;color:var(--act);font-size:11.5px;font-weight:700;cursor:pointer}
.money-snapshot-holdings>summary::-webkit-details-marker{display:none}.money-snapshot-holdings>summary i{font-size:18px;font-style:normal;transition:transform var(--d1) var(--e-out)}
.money-snapshot-holdings[open]>summary i{transform:rotate(90deg)}
.money-moomoo-import{display:grid;gap:12px}.money-moomoo-import b,.money-moomoo-import span{display:block}
.money-moomoo-import b{font-size:13.5px}.money-moomoo-import span{margin-top:4px;color:var(--faint);font-size:11px;line-height:1.5}
.money-manual-card{background:color-mix(in srgb,var(--card) 88%,var(--act) 12%)}
.money-manual-badge{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--actFill);color:var(--onAct);font-size:15px;font-weight:800}
.money-reconcile-detail{padding:0;overflow:hidden}
.money-reconcile-detail summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;list-style:none;cursor:pointer}
.money-reconcile-detail summary::-webkit-details-marker{display:none}
.money-reconcile-detail summary span{min-width:0}.money-reconcile-detail summary b,.money-reconcile-detail summary small{display:block}
.money-reconcile-detail summary b{font-size:13.5px}.money-reconcile-detail summary small{margin-top:3px;color:var(--faint);font-size:10.5px}
.money-reconcile-detail summary i{color:var(--faint);font-size:20px;font-style:normal;transition:transform var(--d1) var(--e-out)}
.money-reconcile-detail[open] summary i{transform:rotate(90deg)}
.money-reconcile-body{padding:0 17px 16px;border-top:1px solid var(--lineS)}
.money-reconcile-body p{margin:14px 0 0;color:var(--faint);font-size:11px;line-height:1.55}
.money-ledger-head{margin:24px 2px 10px}
@media(min-width:560px){.money-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){
.money-hero-card{padding:17px}.money-total-grid>div{padding:9px 7px}.money-total-grid b{font-size:11.5px}
.money-status{padding:5px 7px;font-size:9.5px}.money-account-card{padding:14px}
}
.setup-nav{display:flex;align-items:center;gap:12px;width:100%;padding:13px var(--space-4);text-align:left;transition:background var(--d1) var(--e-out)}
.setup-nav:active{background:var(--btn)}
.setup-nav-text{flex:1;min-width:0}
.setup-nav-title{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.setup-nav-sub{font-size:12px;color:var(--faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-nav-chev{flex:0 0 auto;font-size:19px;color:var(--faint);font-style:normal}
.setup-footer{padding:16px var(--space-4) 6px;font-size:11.5px;color:var(--faint);text-align:center}
.setup-shell-detail{padding-bottom:var(--space-6)}
.setup-detail .hist-analysis-head{padding-top:2px;margin-bottom:14px}
.setup-detail-body{padding:0 var(--space-4)}
.setup-empty-detail{display:flex;flex-direction:column;align-items:center;padding:60px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);text-align:center;color:var(--faint);font-size:13px}
.setup-empty-detail-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:16px;background:var(--btn);color:var(--faint)}
.setup-empty-detail-icon svg{width:24px;height:24px}
.setup-empty-detail strong{display:block;color:var(--text);font-size:15px;font-weight:800;letter-spacing:-.01em}
.setup-empty-detail span{display:block;margin-top:6px;max-width:280px;color:var(--faint);font-size:12.5px;line-height:1.5}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Setup > Advanced & diagnostics > Rollout. This is an operator surface,
not a form dumped into two generic cards: the gate's live state stays
prominent while roster detail is disclosed only when it is useful. */
.rollout-page{display:grid;gap:12px;min-width:0;padding-bottom:8px}
.rollout-page>.card{margin:0}
.rollout-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:0 2px 2px}
.rollout-intro>div{min-width:0}.rollout-intro p{margin:3px 0 0;color:var(--faint);font-size:11.5px;line-height:1.45}
.rollout-refresh,.rollout-icon-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:var(--btn);color:var(--act);font-size:11.5px;font-weight:750;transition:background var(--d1) var(--e-out),border-color var(--d1) var(--e-out),transform .13s var(--e-out),opacity var(--d1) var(--e-out)}
.rollout-refresh{gap:7px;padding:0 13px}.rollout-refresh:active,.rollout-icon-btn:active{transform:scale(.97)}
.rollout-refresh:disabled{cursor:not-allowed;color:var(--faint);opacity:.72}.rollout-icon{display:block;width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rollout-overview{padding:17px;overflow:hidden}
.rollout-overview-head,.rollout-form-head,.rollout-roster-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.rollout-overview-head>div,.rollout-form-head>div,.rollout-roster-head>div{min-width:0}
.rollout-overview h3,.rollout-config-form h3,.rollout-roster h3{margin:0;font-size:20px;line-height:1.15;letter-spacing:-.025em}
.rollout-stage-line{display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px}.rollout-stage-line h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rollout-mode,.rollout-status{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:24px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:var(--btn);font-size:9.5px;font-weight:800;letter-spacing:.035em;line-height:1;text-transform:uppercase;white-space:nowrap}
.rollout-mode.is-closed{color:var(--faint)}.rollout-mode.is-waitlist{border-color:var(--warnBorder);background:var(--warnTint);color:var(--warn)}.rollout-mode.is-invite{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act)}.rollout-mode.is-open{border-color:var(--upBorder);background:var(--upTint);color:var(--up)}
.rollout-capacity{margin-top:18px;padding:13px 14px;border:1px solid var(--lineS);border-radius:15px;background:var(--cardS)}
.rollout-capacity-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--dim);font-size:11.5px;font-weight:650}
.rollout-capacity-head strong{color:var(--text);font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums}.rollout-capacity-head small{color:var(--faint);font-size:12px;font-weight:650}
.rollout-capacity-track{height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:var(--inputbg);box-shadow:inset 0 0 0 1px var(--lineS)}
.rollout-capacity-track i{display:block;width:var(--rollout-progress);height:100%;border-radius:inherit;background:var(--rollout-progress-color);transition:width var(--d2) var(--e),background var(--d1) var(--e-out)}
.rollout-capacity-note{margin:8px 2px 0;color:var(--faint);font-size:10.5px;line-height:1.45}.rollout-capacity-note.is-danger{color:var(--down)}
.rollout-metrics-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:15px 2px -7px}.rollout-metrics-head span{color:var(--dim);font-size:10.5px;font-weight:750}.rollout-metrics-head small{color:var(--faint);font-size:8.5px}
.rollout-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:15px;overflow:hidden;border:1px solid var(--lineS);border-radius:14px;background:var(--lineS)}
.rollout-metrics>div{min-width:0;padding:10px 11px;background:var(--cardS)}.rollout-metrics span,.rollout-metrics strong{display:block}.rollout-metrics span{color:var(--faint);font-size:9.5px}.rollout-metrics strong{min-height:18px;margin-top:3px;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}.rollout-metric-skel{width:30px;height:14px;border-radius:5px}
.rollout-overview-foot{display:flex;justify-content:space-between;gap:10px;margin-top:11px;color:var(--faint);font-size:9.5px;line-height:1.4}.rollout-overview-foot span{min-width:0}.rollout-overview-foot span:last-child{text-align:right}
.rollout-config-form{display:grid;gap:14px}.rollout-form-head>.rollout-icon{width:20px;height:20px;color:var(--act)}
.rollout-field{display:block;margin:0}.rollout-field>span,.rollout-premium-date>span{display:block;color:var(--dim);font-size:11.5px;font-weight:750}.rollout-field>small{display:block;margin:3px 0 8px;color:var(--faint);font-size:10.5px;line-height:1.4;font-weight:500}.rollout-field select,.rollout-field input{min-height:46px}
.rollout-field-error,.rollout-field-warning{display:block;margin-top:7px;font-size:10.5px;font-style:normal;line-height:1.45}.rollout-field-error{color:var(--down)}.rollout-field-warning{color:var(--warn)}
.rollout-form-actions,.rollout-inline-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rollout-form-actions{margin-top:2px}.rollout-form-actions .btn,.rollout-inline-actions .btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:10px 8px;font-size:12px;white-space:nowrap}.rollout-form-actions .rollout-icon,.rollout-inline-actions .rollout-icon{width:15px;height:15px}
.rollout-roster{padding:0;overflow:hidden}.rollout-roster-head{padding:17px 17px 11px}.rollout-roster h3 small{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:5px;border-radius:999px;background:var(--btn);color:var(--faint);font-family:var(--mono);font-size:10px;vertical-align:2px}
.rollout-refreshing{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:10px;font-weight:700;white-space:nowrap}
.rollout-search{position:relative;display:block;margin:0 17px 11px}.rollout-search>.rollout-icon{position:absolute;z-index:1;top:50%;left:13px;width:16px;height:16px;color:var(--faint);transform:translateY(-50%);pointer-events:none}.rollout-search input{min-height:44px;padding:10px 12px 10px 39px;font-family:var(--sans);font-size:13px}
.rollout-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 17px 14px;border-bottom:1px solid var(--lineS)}
.rollout-filter{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:7px 5px;border:1px solid var(--line);border-radius:10px;background:var(--btn);color:var(--faint);font-size:9.5px;font-weight:750;white-space:nowrap}.rollout-filter span{min-width:0;overflow:hidden;text-overflow:ellipsis}.rollout-filter b{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--card);font-family:var(--mono);font-size:8.5px}.rollout-filter.is-active{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act)}.rollout-filter.is-active b{background:var(--act);color:var(--onAct)}
.rollout-user-list{display:grid;gap:1px;background:var(--lineS)}
.rollout-user{min-width:0;background:var(--card);--rollout-status-tone:var(--faint);--rollout-status-tint:var(--btn);--rollout-status-border:var(--line)}
.rollout-user.is-active{--rollout-status-tone:var(--up);--rollout-status-tint:var(--upTint);--rollout-status-border:var(--upBorder)}.rollout-user.is-pending{--rollout-status-tone:var(--warn);--rollout-status-tint:var(--warnTint);--rollout-status-border:var(--warnBorder)}.rollout-user.is-invited{--rollout-status-tone:var(--act);--rollout-status-tint:var(--accentTint);--rollout-status-border:var(--accentBorder)}.rollout-user.is-suspended{--rollout-status-tone:var(--down);--rollout-status-tint:var(--downTint);--rollout-status-border:var(--downBorder)}
.rollout-user-summary{display:grid;grid-template-columns:38px minmax(0,1fr) auto 18px;align-items:center;gap:10px;width:100%;min-width:0;min-height:68px;padding:11px 14px;text-align:left;background:var(--card);transition:background var(--d1) var(--e-out)}.rollout-user-summary:active{background:var(--btn)}.rollout-user-summary[aria-disabled="true"]{cursor:wait}
.rollout-avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--rollout-status-border);border-radius:12px;background:var(--rollout-status-tint);color:var(--rollout-status-tone);font-size:13px;font-weight:850}
.rollout-user-identity{display:block;min-width:0}.rollout-user-identity strong,.rollout-user-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rollout-user-identity strong{font-size:12.5px;letter-spacing:-.01em}.rollout-user-identity small{margin-top:3px;color:var(--faint);font-size:9.5px}
.rollout-status{justify-self:end;border-color:var(--rollout-status-border);background:var(--rollout-status-tint);color:var(--rollout-status-tone)}.rollout-status i{width:5px;height:5px;border-radius:50%;background:currentColor}
.rollout-chevron{color:var(--faint);transition:transform var(--d1) var(--e-out)}.rollout-chevron .rollout-icon{width:16px;height:16px}.rollout-user.is-open .rollout-chevron{transform:rotate(90deg)}
.rollout-user-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--d2) var(--e),opacity var(--d1) var(--e-out)}.rollout-user-reveal>div{min-height:0;overflow:hidden}.rollout-user.is-open .rollout-user-reveal{grid-template-rows:1fr;opacity:1}
.rollout-user-detail{padding:0 14px 15px}.rollout-user-stage{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:11px;background:var(--cardS);font-size:10.5px}.rollout-user-stage span{color:var(--faint)}.rollout-user-stage strong{color:var(--dim);font-size:10.5px}
.rollout-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:9px;overflow:hidden;border:1px solid var(--lineS);border-radius:11px;background:var(--lineS)}.rollout-timeline>div{min-width:0;padding:9px 8px;background:var(--cardS)}.rollout-timeline span,.rollout-timeline time{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rollout-timeline div>span:first-child{color:var(--faint);font-size:8.5px;text-transform:uppercase;letter-spacing:.04em}.rollout-timeline time,.rollout-timeline div>span:last-child{margin-top:4px;color:var(--dim);font-family:var(--mono);font-size:9.5px}
.rollout-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}.rollout-actions .btn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;padding:8px 4px;font-size:10px;line-height:1.15;text-align:center;white-space:normal}.rollout-actions .btn span{min-width:0}.rollout-actions .rollout-icon{width:14px;height:14px}.rollout-positive{border:1px solid var(--upBorder);background:var(--upTint);color:var(--up)}
/* Same visual weight as the .btn actions beside it, but not a control --
a Stripe-paying subscriber's Premium can't be revoked from here at all
(see rolloutUserRow's own comment), so this occupies the slot with an
explanation instead of a button that would just error on click. */
.rollout-stripe-note{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;padding:8px 4px;border:1px solid var(--line);border-radius:13px;background:var(--btn);color:var(--faint);font-size:10px;font-weight:650;line-height:1.15;text-align:center;white-space:normal;cursor:help}.rollout-stripe-note .rollout-icon{width:14px;height:14px}.rollout-stripe-note span{min-width:0}
.rollout-row-busy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin-top:10px;border-radius:11px;background:var(--accentTint);color:var(--act);font-size:10.5px;font-weight:700}
.rollout-spinner{display:inline-block;flex:0 0 auto;width:14px;height:14px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:rolloutSpin .8s linear infinite}@keyframes rolloutSpin{to{transform:rotate(360deg)}}
.rollout-confirm,.rollout-premium-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--cardS)}.rollout-confirm{border-color:var(--downBorder);background:var(--downTint)}.rollout-confirm strong{display:block;color:var(--down);font-size:12px}.rollout-confirm p,.rollout-premium-form p{margin:4px 0 10px;color:var(--faint);font-size:10.5px;line-height:1.5}.rollout-confirm .rollout-inline-actions{margin-top:10px}
.rollout-subhead{display:flex;align-items:center;gap:7px;color:var(--act);font-size:12px;font-weight:800}.rollout-subhead .rollout-icon{width:16px;height:16px}.rollout-duration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.rollout-duration-grid button{min-height:44px;padding:7px 5px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--dim);font-size:10.5px;font-weight:650}.rollout-duration-grid button[aria-pressed="true"]{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act);font-weight:800}.rollout-duration-grid button:disabled{opacity:.55;cursor:not-allowed}
.rollout-premium-date{display:block;margin-top:10px}.rollout-premium-date input{min-height:44px;margin-top:6px}.rollout-premium-form>small{display:block;margin:6px 0 0;color:var(--faint);font-size:9.5px;line-height:1.4}.rollout-premium-form>small.is-error{color:var(--down)}.rollout-premium-form>.rollout-inline-actions{margin-top:10px}
.rollout-error{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px;border:1px solid var(--downBorder);border-radius:12px;background:var(--downTint);color:var(--down);font-size:10.5px;line-height:1.45}.rollout-error>div{min-width:0}.rollout-error strong,.rollout-error span{display:block}.rollout-error span{margin-top:2px;color:var(--dim)}.rollout-error>.btn{min-height:44px;padding:8px 12px;border:1px solid var(--downBorder);background:var(--card);color:var(--down);font-size:10.5px}
.rollout-roster>.rollout-error{margin:0 17px 17px}.rollout-roster>.rollout-filters+.rollout-error{margin-top:12px}
.rollout-empty{display:flex;flex-direction:column;align-items:center;padding:30px 18px;background:var(--card);text-align:center}.rollout-empty strong{font-size:12.5px}.rollout-empty span{margin-top:4px;color:var(--faint);font-size:10.5px;line-height:1.45}
.rollout-skeleton{display:grid;gap:10px;padding:5px 0}.rollout-skeleton .skel{display:block;height:16px;border-radius:6px}.rollout-skeleton .skel:nth-child(1){width:42%;height:24px}.rollout-skeleton .skel:nth-child(2){width:100%;height:56px}.rollout-skeleton .skel:nth-child(3){width:100%;height:48px}.rollout-skeleton .skel:nth-child(4){width:64%}.rollout-roster>.rollout-skeleton{padding:4px 17px 17px}
@media (min-width:520px) and (max-width:699px){.rollout-filters{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:370px){.rollout-overview{padding:15px}.rollout-user-summary{grid-template-columns:34px minmax(0,1fr) auto 15px;gap:7px;padding-right:11px;padding-left:11px}.rollout-avatar{width:34px;height:34px;border-radius:10px}.rollout-status{padding-right:6px;padding-left:6px;font-size:8.5px}.rollout-user-detail{padding-right:11px;padding-left:11px}.rollout-filter{font-size:9px}.rollout-refresh{padding-right:10px;padding-left:10px}.rollout-intro p{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.rollout-capacity-track i,.rollout-user-reveal,.rollout-chevron,.rollout-refresh,.rollout-icon-btn{transition:none}.rollout-spinner{animation:none}}
/* Setup > Feedback and Advanced & diagnostics > Feedback inbox. Both use
one compact ticket language: the owner gets a calm composer and history;
admins get the same tickets plus triage context, never a second design. */
.feedback-page{display:grid;gap:12px;min-width:0;padding-bottom:8px}.feedback-page>.card{margin:0}
.feedback-icon{display:block;width:17px;height:17px;flex:0 0 auto}
.feedback-intro{display:flex;align-items:center;gap:12px;min-width:0;padding:2px 3px 3px}.feedback-intro>div{min-width:0}.feedback-intro-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--accentBorder);border-radius:13px;background:var(--accentTint);color:var(--act)}.feedback-intro-icon .feedback-icon{width:20px;height:20px}.feedback-intro h3{margin:2px 0 0;font-size:17px;line-height:1.2;letter-spacing:-.025em}.feedback-intro p{margin:4px 0 0;color:var(--faint);font-size:11px;line-height:1.45}
.feedback-compose{padding:17px;border-color:color-mix(in srgb,var(--act) 24%,var(--line));background:color-mix(in srgb,var(--card) 96%,var(--act) 4%)}
.feedback-section-head,.feedback-inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.feedback-section-head>div,.feedback-inbox-head>div{min-width:0}.feedback-section-head h3,.feedback-inbox-head h3{margin:2px 0 0;font-size:18px;line-height:1.2;letter-spacing:-.025em}.feedback-inbox-head h3 small{display:inline-grid;place-items:center;min-width:23px;height:23px;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--btn);color:var(--faint);font-family:var(--mono);font-size:9px;vertical-align:2px}
.feedback-private{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border:1px solid var(--upBorder);border-radius:999px;background:var(--upTint);color:var(--up);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.feedback-field-label{display:block;margin:16px 0 7px;color:var(--dim);font-size:11.5px;font-weight:750}.feedback-field-label small{margin-left:4px;color:var(--faint);font-size:9.5px;font-weight:600}
.feedback-compose textarea{min-height:132px;padding:12px 13px;font-family:var(--sans);font-size:16px;line-height:1.5;resize:vertical}.feedback-reply textarea{min-height:84px;font-family:var(--sans);font-size:16px;line-height:1.45;resize:vertical}
.feedback-field-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:6px 2px 0;color:var(--faint);font-size:9px;line-height:1.4}.feedback-field-meta span:first-child{min-width:0}.feedback-field-meta span:last-child{flex:0 0 auto;font-family:var(--mono);white-space:nowrap}
.feedback-upload{display:flex;align-items:center;gap:11px;min-height:68px;padding:11px 12px;border:1px dashed var(--inputLine);border-radius:14px;background:var(--cardS);color:var(--act);cursor:pointer;transition:border-color var(--d1) var(--e-out),background var(--d1) var(--e-out),transform .13s var(--e-out)}.feedback-upload:focus-within{border-color:var(--act);box-shadow:0 0 0 3px var(--accentTint)}.feedback-upload:active{transform:scale(.99)}.feedback-upload[aria-disabled="true"]{cursor:not-allowed;color:var(--faint);opacity:.7}.feedback-upload>span:not(.feedback-spinner){min-width:0}.feedback-upload strong,.feedback-upload small{display:block}.feedback-upload strong{font-size:12px}.feedback-upload small{margin-top:3px;color:var(--faint);font-size:9.5px;line-height:1.4}.feedback-upload>.feedback-icon{width:21px;height:21px}
.feedback-preview{display:grid;grid-template-columns:58px minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--cardS)}.feedback-preview img{display:block;width:58px;height:58px;border-radius:10px;background:var(--inputbg);object-fit:cover}.feedback-preview>div{min-width:0}.feedback-preview strong,.feedback-preview span{display:block}.feedback-preview strong{font-size:11.5px}.feedback-preview span{margin-top:3px;color:var(--faint);font-size:9px;line-height:1.4}
.feedback-photo-remove{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--btn);color:var(--down)}.feedback-photo-remove svg{width:17px;height:17px}
.feedback-notice{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;font-size:10.5px;line-height:1.45}.feedback-notice.is-error{border-color:var(--downBorder);background:var(--downTint);color:var(--down)}.feedback-notice.is-success{border-color:var(--upBorder);background:var(--upTint);color:var(--up)}.feedback-notice .feedback-icon{width:15px;height:15px;margin-top:1px}
.feedback-submit{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:14px}.feedback-submit .feedback-icon{width:16px;height:16px}
.feedback-spinner{display:inline-block;width:15px;height:15px;flex:0 0 auto;border:2px solid color-mix(in srgb,currentColor 24%,transparent);border-top-color:currentColor;border-radius:50%;animation:feedbackSpin .8s linear infinite}@keyframes feedbackSpin{to{transform:rotate(360deg)}}
.feedback-list{padding:0;overflow:hidden}.feedback-inbox-head{padding:17px 17px 13px}.feedback-refresh{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:13px;background:var(--btn);color:var(--act)}.feedback-refresh:disabled{color:var(--faint);opacity:.65}.feedback-refresh:disabled .feedback-icon{animation:feedbackSpin .9s linear infinite}
.feedback-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 17px 12px;overflow:hidden;border:1px solid var(--lineS);border-radius:13px;background:var(--lineS)}.feedback-metrics>div{min-width:0;padding:9px 7px;background:var(--cardS)}.feedback-metrics span,.feedback-metrics strong{display:block}.feedback-metrics span{overflow:hidden;color:var(--faint);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.feedback-metrics strong{margin-top:4px;font-family:var(--mono);font-size:13px}.feedback-metrics .is-open strong{color:var(--warn)}.feedback-metrics .is-acknowledged strong,.feedback-metrics .is-wip strong{color:var(--act)}.feedback-metrics .is-completed strong{color:var(--up)}
.feedback-metrics .feedback-count-skel{width:20px;height:13px;margin-top:4px;border-radius:4px}
.feedback-search{position:relative;display:block;margin:0 17px 10px}.feedback-search>.feedback-icon{position:absolute;z-index:1;top:50%;left:13px;width:16px;height:16px;color:var(--faint);transform:translateY(-50%);pointer-events:none}.feedback-search input{min-height:44px;padding:10px 12px 10px 39px;font-family:var(--sans);font-size:13px}
.feedback-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 17px 14px;border-bottom:1px solid var(--lineS)}.feedback-filters button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:7px;border:1px solid var(--line);border-radius:11px;background:var(--btn);color:var(--faint);font-size:9.5px;font-weight:750}.feedback-filters button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback-filters button b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--card);font-family:var(--mono);font-size:8px}.feedback-filters button.is-active{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act)}.feedback-filters button.is-active b{background:var(--actFill);color:var(--onAct)}
.feedback-ticket-list{display:grid;gap:1px;background:var(--lineS)}
.feedback-ticket{min-width:0;background:var(--card);--feedback-tone:var(--faint);--feedback-tint:var(--btn);--feedback-border:var(--line)}.feedback-ticket.is-open{--feedback-tone:var(--warn);--feedback-tint:var(--warnTint);--feedback-border:var(--warnBorder)}.feedback-ticket.is-acknowledged,.feedback-ticket.is-wip{--feedback-tone:var(--act);--feedback-tint:var(--accentTint);--feedback-border:var(--accentBorder)}.feedback-ticket.is-completed{--feedback-tone:var(--up);--feedback-tint:var(--upTint);--feedback-border:var(--upBorder)}
.feedback-thread-toggle{min-height:44px}.feedback-ticket-summary{display:grid;grid-template-columns:4px minmax(0,1fr) auto 17px;align-items:center;gap:9px;width:100%;min-width:0;min-height:76px;padding:11px 13px;text-align:left;background:var(--card)}.feedback-ticket-summary:active{background:var(--cardS)}
.feedback-ticket-rail{align-self:stretch;width:4px;border-radius:99px;background:var(--feedback-tone)}.feedback-ticket-copy{display:block;min-width:0}.feedback-ticket-meta{display:flex;align-items:baseline;gap:7px;min-width:0}.feedback-ticket-meta strong,.feedback-ticket-meta time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback-ticket-meta strong{min-width:0;color:var(--dim);font-size:10px}.feedback-ticket-meta time{flex:0 0 auto;color:var(--faint);font-size:8.5px}.feedback-comment{display:-webkit-box;margin-top:4px;overflow:hidden;overflow-wrap:anywhere;color:var(--text);font-size:11.5px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-wrap}.feedback-ticket-flags{display:flex;gap:6px;margin-top:5px}.feedback-ticket-flags:empty{display:none}.feedback-ticket-flags i{display:inline-flex;align-items:center;gap:3px;color:var(--faint);font-size:8px;font-style:normal}.feedback-ticket-flags .feedback-icon{width:10px;height:10px}
.feedback-status{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:4px 7px;border:1px solid var(--feedback-border);border-radius:999px;background:var(--feedback-tint);color:var(--feedback-tone);font-size:8.5px;font-weight:800;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}.feedback-status.is-open{border-color:var(--warnBorder);background:var(--warnTint);color:var(--warn)}.feedback-status.is-acknowledged,.feedback-status.is-wip{border-color:var(--accentBorder);background:var(--accentTint);color:var(--act)}.feedback-status.is-completed{border-color:var(--upBorder);background:var(--upTint);color:var(--up)}
.feedback-ticket-chevron{color:var(--faint);transition:transform var(--d1) var(--e-out)}.feedback-ticket-chevron .feedback-icon{width:15px;height:15px}.feedback-ticket.is-expanded .feedback-ticket-chevron{transform:rotate(90deg)}
.feedback-ticket-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--d2) var(--e),opacity var(--d1) var(--e-out)}.feedback-ticket-reveal>div{min-height:0;overflow:hidden}.feedback-ticket.is-expanded .feedback-ticket-reveal{grid-template-rows:1fr;opacity:1}.feedback-ticket-detail{padding:0 13px 15px}
.feedback-original{padding:12px;border:1px solid var(--lineS);border-radius:13px;background:var(--cardS)}.feedback-original p{margin:5px 0 0;color:var(--text);font-size:12px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}.feedback-ticket-photo{display:block;width:100%;max-height:340px;margin-top:10px;border:1px solid var(--line);border-radius:11px;background:var(--inputbg);object-fit:contain}.feedback-ticket-exact{margin-top:9px;color:var(--faint);font-size:8.5px;line-height:1.4}.feedback-ticket-exact time{color:var(--dim)}
.feedback-workflow{margin-top:10px;padding:11px;border:1px solid var(--lineS);border-radius:13px;background:var(--cardS)}.feedback-workflow>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.feedback-workflow>div:first-child small{color:var(--faint);font-size:8.5px}
.feedback-admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.feedback-admin-actions .btn{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:8px 6px;font-size:9.5px;line-height:1.2}.feedback-admin-actions .feedback-icon{width:14px;height:14px}
/* The workflow status row (Reopen/Acknowledge/Start work/Complete) reads
better as one line of steps than a 2-column grid that wraps a lone 3rd
button onto its own row -- scoped to .feedback-workflow specifically so
the delete-confirm dialog just above (same .feedback-admin-actions class,
only ever 2 buttons) keeps its own grid untouched. A horizontal scroll is
the fallback on a narrow phone rather than shrinking text past legible or
silently clipping a button. */
.feedback-workflow .feedback-admin-actions{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto}
.feedback-workflow .feedback-admin-actions .btn{flex:1 1 0;min-width:max-content;padding:8px 8px;font-size:9px}
.feedback-status-action{min-height:44px}.feedback-status-action.is-completed{border-color:var(--upBorder);background:var(--upTint);color:var(--up)}.feedback-status-action.is-open{border-color:var(--warnBorder);background:var(--warnTint);color:var(--warn)}
.feedback-completed-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 11px;border:1px solid var(--upBorder);border-radius:12px;background:var(--upTint);color:var(--up);font-size:9.5px;line-height:1.45}.feedback-completed-note .feedback-icon{width:14px;height:14px;margin-top:1px}
.feedback-thread{margin-top:12px;padding-top:12px;border-top:1px solid var(--lineS)}.feedback-thread-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.feedback-thread-head strong{font-size:11.5px}.feedback-thread-head span{color:var(--faint);font-size:8.5px}.feedback-messages{display:grid;gap:7px;margin-top:9px}.feedback-message{max-width:92%;padding:9px 10px;border:1px solid var(--lineS);border-radius:12px;background:var(--cardS)}.feedback-message.is-team{justify-self:end;border-color:var(--accentBorder);background:var(--accentTint)}.feedback-message header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.feedback-message header span{color:var(--faint);font-size:8.5px;font-weight:800}.feedback-message.is-team header span{color:var(--act)}.feedback-message time{color:var(--faint);font-size:8px}.feedback-message p{margin:4px 0 0;color:var(--text);font-size:11px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}.feedback-conversation-empty{margin-top:9px;padding:11px;border-radius:11px;background:var(--cardS);color:var(--faint);font-size:10px;line-height:1.45}
.feedback-reply{display:grid;gap:7px;margin-top:12px}.feedback-reply>label{color:var(--dim);font-size:10.5px;font-weight:750}.feedback-reply .btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px;font-size:11px}.feedback-reply .feedback-icon{width:15px;height:15px}
.feedbackDeleteBtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:12px;border:1px solid var(--downBorder);border-radius:12px;background:transparent;color:var(--down);font-size:10.5px;font-weight:700}.feedbackDeleteBtn[hidden]{display:none}.feedbackDeleteBtn .feedback-icon{width:15px;height:15px}
.feedback-delete-confirm{margin-top:12px;padding:11px;border:1px solid var(--downBorder);border-radius:13px;background:var(--downTint)}.feedback-delete-confirm>div:first-child{display:flex;align-items:flex-start;gap:8px;color:var(--down)}.feedback-delete-confirm>div:first-child>.feedback-icon{width:16px;height:16px;margin-top:1px}.feedback-delete-confirm strong,.feedback-delete-confirm small{display:block}.feedback-delete-confirm strong{font-size:11px}.feedback-delete-confirm small{margin-top:2px;color:var(--dim);font-size:9px}.feedback-delete-confirm .feedbackDeleteConfirmBtn{border-color:var(--downBorder);background:var(--downTintStrong);color:var(--down)}
.feedback-refresh-note{display:flex;align-items:center;gap:7px;margin:0 13px 10px;padding:9px 10px;border:1px solid var(--warnBorder);border-radius:11px;background:var(--warnTint);color:var(--warn);font-size:9.5px;line-height:1.4}.feedback-refresh-note span{min-width:0;flex:1}.feedback-refresh-note .feedback-icon{width:14px;height:14px}.feedback-refresh-note button{min-height:44px;padding:7px;color:var(--warn);font-size:9.5px;font-weight:800}
.feedback-load-error{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;margin:0 17px 17px;padding:12px;border:1px solid var(--downBorder);border-radius:13px;background:var(--downTint);color:var(--down)}.feedback-load-error>div{min-width:0}.feedback-load-error strong,.feedback-load-error span{display:block}.feedback-load-error strong{font-size:11.5px}.feedback-load-error span{margin-top:3px;color:var(--dim);font-size:9.5px;line-height:1.4}.feedback-load-error>.btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;color:var(--down);font-size:10.5px}.feedback-load-error>.feedback-icon{width:16px;height:16px}
.feedback-empty{display:flex;flex-direction:column;align-items:center;padding:30px 18px;background:var(--card);text-align:center}.feedback-empty>.feedback-icon{width:24px;height:24px;color:var(--faint)}.feedback-empty strong{margin-top:9px;font-size:12px}.feedback-empty span{margin-top:4px;color:var(--faint);font-size:9.5px;line-height:1.45}
.feedback-skeleton{display:grid;gap:1px;background:var(--lineS)}.feedback-skeleton>div{display:grid;grid-template-columns:4px minmax(0,1fr) 64px;gap:9px;min-height:76px;padding:12px 13px;background:var(--card)}.feedback-skeleton span{width:4px;height:100%;border-radius:99px}.feedback-skeleton i,.feedback-skeleton b{display:block;border-radius:6px}.feedback-skeleton i{align-self:center;width:80%;height:27px}.feedback-skeleton b{align-self:start;width:64px;height:24px}.feedback-retention{margin:0;padding:12px 17px;border-top:1px solid var(--lineS);color:var(--faint);font-size:9px;line-height:1.45}
.feedback-signedout{display:flex;align-items:flex-start;gap:12px}.feedback-signedout>.feedback-icon{width:21px;height:21px;color:var(--act)}.feedback-signedout h3{margin:0;font-size:15px}.feedback-signedout p{margin:5px 0 0;color:var(--faint);font-size:11px;line-height:1.5}
@media(max-width:370px){.feedback-compose{padding:15px}.feedback-intro{gap:9px}.feedback-intro-icon{width:36px;height:36px}.feedback-ticket-summary{grid-template-columns:4px minmax(0,1fr) 17px;gap:7px;padding-right:10px;padding-left:10px}.feedback-status{grid-column:2;justify-self:start;margin-top:2px}.feedback-ticket-chevron{grid-column:3;grid-row:1/3}.feedback-ticket-detail{padding-right:10px;padding-left:10px}.feedback-preview{grid-template-columns:50px minmax(0,1fr) 44px}.feedback-preview img{width:50px;height:50px}.feedback-metrics{margin-right:13px;margin-left:13px}.feedback-search{margin-right:13px;margin-left:13px}.feedback-filters{padding-right:13px;padding-left:13px}}
@media(prefers-reduced-motion:reduce){.feedback-ticket-reveal,.feedback-ticket-chevron,.feedback-upload,.feedback-refresh{transition:none}.feedback-spinner,.feedback-refresh:disabled .feedback-icon{animation:none}}
@media(max-width:699px){
.setup-shell-detail{display:none}
.setup-shell.has-page .setup-shell-list{display:none}
.setup-shell.has-page .setup-shell-detail{display:block}
}
@media(min-width:700px){
.setup-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.setup-shell-list{position:sticky;top:20px}
.setup-nav.on{background:var(--btn)}
.setup-detail #setupBack{display:none}
.setup-empty-detail{padding:80px var(--space-4)}
}
.pg-none{animation:none}
@media(max-width:390px){
.ob-start-copy{margin-top:22px}.ob-start-copy h1{font-size:33px}
.ob-loop{gap:4px;margin-top:20px}.ob-loop>span{gap:5px;padding:8px 6px;font-size:10.5px}.ob-loop i{font-size:9px}
.ob-entry-card{padding:13px;border-radius:18px}.ob-trust{gap:6px 10px}
}
@media (prefers-reduced-motion:reduce){.onboarding-screen,.auth-bootstrap,.auth-bootstrap-line span,.pg-fwd,.pg-back,.pg-fade,.add-mode-swap{animation:none}.auth-leaving .wrap,.auth-leaving .nav{transition:none}}
.empty{text-align:center;padding:34px 18px;color:var(--dim);font-size:13.5px;line-height:1.65}
.sheet{position:fixed;inset:0;z-index:55;background:var(--ink);display:flex;flex-direction:column}
.sheethd{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;border-bottom:.5px solid var(--line);transition:padding-top var(--d2) var(--e)}
/* The syncbar docks to the true top edge at z-index:65 -- above every sheet
-- on purpose, so background-sync progress is never hidden by whatever's
open. body.syncing already reserves 50px so ordinary page content clears
it, but a sheet is position:fixed/inset:0, its own layer on top of body,
so that padding never reaches it -- its header rendered right under the
bar's live text with no room of its own. Same 50px, applied here too, for
exactly as long as the bar is actually showing. */
body.syncing .sheethd{padding-top:calc(12px + env(safe-area-inset-top) + 50px)}
.sheetbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px calc(30px + env(safe-area-inset-bottom))}
.sheetbody h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:26px 0 8px}
.sheetbody h3:first-child{margin-top:0}
.sheetbody p{font-size:14px;line-height:1.65;color:var(--dim);margin:0 0 11px}
.sheetbody b{color:var(--text)}
/* Moomoo screenshot snapshot import. Images exist only in the module's
transient redacted Blob list; these thumbnails are object URLs for those
already-masked JPEGs, never the original Photo Library Files. */
.moomoo-shot-sheet{z-index:58}
.moomoo-shot-title{font-size:17px;font-weight:800;letter-spacing:-.02em}
.moomoo-shot-sub{margin-top:2px;color:var(--faint);font-size:10.5px}
.moomoo-shot-done{min-height:44px;padding:8px 2px 8px 16px;color:var(--act);font-size:13px;font-weight:700}
.moomoo-shot-sheet .sheetbody{padding-bottom:22px}
.moomoo-shot-privacy{border-color:color-mix(in srgb,var(--act) 35%,var(--line));background:color-mix(in srgb,var(--card) 88%,var(--act) 12%)}
.moomoo-shot-privacy b{display:block;font-size:13.5px}.moomoo-shot-privacy p{margin:7px 0 0;font-size:11.5px;line-height:1.6}
.moomoo-shot-guide{margin-top:12px}.moomoo-shot-guide ol{margin:9px 0 14px;padding-left:20px;color:var(--dim);font-size:11.5px;line-height:1.6}
.moomoo-shot-guide li+li{margin-top:5px}.moomoo-shot-file{display:none}
.moomoo-shot-confirm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px;padding-top:15px;border-top:1px solid var(--lineS)}
.moomoo-shot-confirm-head b{font-size:11.5px}.moomoo-shot-confirm-head span{color:var(--faint);font-size:9.5px;font-weight:650}
.moomoo-shot-attest{display:flex;align-items:flex-start;gap:11px;margin:10px 0;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--btn);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background var(--d1),border-color var(--d1),box-shadow var(--d1),transform .12s var(--e-out)}
.moomoo-shot-attest:active{transform:scale(.995)}
.moomoo-shot-attest.is-checked{border-color:var(--upCheckBorder);background:var(--upTint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 15%,transparent)}
.moomoo-shot-attest:has(input:disabled){opacity:.58;cursor:default}.moomoo-shot-attest:has(input:disabled):active{transform:none}
.moomoo-shot-attest input{appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;flex:0 0 auto;width:22px;height:22px;margin:0;padding:0;border:1.5px solid var(--faint);border-radius:7px;background:var(--inputbg);cursor:pointer;transition:background var(--d1),border-color var(--d1),box-shadow var(--d1)}
.moomoo-shot-attest input:checked{border-color:var(--up);background:var(--up);box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 15%,transparent)}
.moomoo-shot-attest input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--primaryText);border-width:0 2px 2px 0;transform:rotate(45deg)}
.moomoo-shot-attest input:disabled{cursor:default}.moomoo-shot-attest span{min-width:0}.moomoo-shot-attest b,.moomoo-shot-attest small,.moomoo-shot-attest-status{display:block}.moomoo-shot-attest b{font-size:12px;line-height:1.4}.moomoo-shot-attest small{margin-top:3px;color:var(--faint);font-size:10.5px;line-height:1.45}
.moomoo-shot-attest-status{margin-top:7px;color:var(--faint);font-size:11px;font-style:normal;font-weight:750;letter-spacing:.01em}.moomoo-shot-attest.is-checked .moomoo-shot-attest-status{color:var(--up)}
.moomoo-shot-limit{margin-top:8px;color:var(--faint);font-size:10px;text-align:center}
.moomoo-shot-thumb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:17px 2px 8px}
.moomoo-shot-thumb-head b{font-size:12px}.moomoo-shot-thumb-head span{color:var(--faint);font-size:10px}
.moomoo-shot-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,36%);gap:10px;overflow-x:auto;padding:1px 1px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.moomoo-shot-thumbs figure{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#000;scroll-snap-align:start}
.moomoo-shot-thumbs img{display:block;width:100%;aspect-ratio:9/18.5;object-fit:cover;object-position:top;background:#000;-webkit-user-drag:none;user-drag:none}
.moomoo-shot-thumbs figcaption{position:absolute;right:0;bottom:0;left:0;padding:17px 8px 7px;background:linear-gradient(transparent,rgba(0,0,0,.84));color:#fff;font-size:9.5px;font-weight:650}
.moomoo-shot-remove{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.78);color:#fff;font-size:19px;line-height:1}
.moomoo-shot-note,.moomoo-shot-valid{margin-top:11px;padding:10px 12px;border-radius:12px;background:var(--upTint);color:var(--up);font-size:11px;line-height:1.45}
.moomoo-shot-progress{margin-top:14px;padding:13px;border:1px solid color-mix(in srgb,var(--act) 24%,var(--lineS));border-radius:14px;background:color-mix(in srgb,var(--btn) 92%,var(--act) 8%)}
#moomooScreenshotProgress[hidden],#moomooScreenshotError[hidden]{display:none!important}
.moomoo-shot-progress .broker-sync-spin{border-color:color-mix(in srgb,var(--act) 28%,transparent);border-top-color:var(--act)}
.moomoo-shot-progress-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.moomoo-shot-progress-steps span{display:flex;align-items:center;gap:5px;min-width:0;color:var(--faint);font-size:8.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.moomoo-shot-progress-steps span>i{display:grid;place-items:center;flex:0 0 auto;width:17px;height:17px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--faint);font-size:8px;font-style:normal}
.moomoo-shot-progress-steps .is-active{color:var(--text)}.moomoo-shot-progress-steps .is-active>i{border-color:var(--actFill);background:var(--actFill);color:var(--onAct);box-shadow:0 0 0 3px var(--accentTint)}
.moomoo-shot-progress-steps .is-done{color:var(--dim)}.moomoo-shot-progress-steps .is-done>i{border-color:var(--up);background:var(--upTint);color:var(--up)}
.moomoo-shot-progress-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px}
.moomoo-shot-progress b{min-width:0;font-size:11.5px;line-height:1.35}.moomoo-shot-progress-elapsed{color:var(--act);font-family:var(--mono);font-size:9.5px;font-weight:700;white-space:nowrap}
.moomoo-shot-progress small{display:block;margin:6px 0 0 23px;color:var(--faint);font-size:9.5px;line-height:1.45}
.moomoo-shot-progress-track{height:5px;margin:10px 0 0 23px;overflow:hidden;border-radius:99px;background:var(--line)}
.moomoo-shot-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--act);transition:width var(--d1) linear}
.moomoo-shot-progress-track.is-indeterminate i{width:38%;background:linear-gradient(90deg,color-mix(in srgb,var(--act) 35%,transparent),var(--act),color-mix(in srgb,var(--act) 35%,transparent));animation:moomooShotIndeterminate 1.45s linear infinite}
@keyframes moomooShotIndeterminate{0%{transform:translateX(-115%)}100%{transform:translateX(300%)}}
.moomoo-shot-error{margin-top:11px;padding:11px 12px;border:1px solid var(--downBorder);border-radius:12px;background:var(--downTint);color:var(--down);font-size:11.5px;line-height:1.5;overflow-wrap:anywhere}
.moomoo-shot-actions{display:grid;grid-template-columns:minmax(88px,.62fr) minmax(0,1.38fr);gap:9px 10px;padding:9px 16px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--ink) 94%,transparent);box-shadow:0 -12px 28px rgba(0,0,0,.08)}
.moomoo-shot-actions:has(>button:only-child){grid-template-columns:1fr}
.moomoo-shot-action-status{grid-column:1/-1;min-height:16px;color:var(--faint);font-size:11px;font-weight:650;line-height:1.35;text-align:center}.moomoo-shot-action-status.is-ready{color:var(--up)}
.moomoo-shot-actions .btn{min-height:48px;display:flex;align-items:center;justify-content:center}.moomoo-shot-actions .btn.is-busy:disabled,.moomoo-shot-guide .btn.is-busy:disabled{background:var(--actFill);color:var(--onAct);opacity:.82}
.moomoo-shot-source{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin-bottom:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--card) 90%,var(--warn) 10%)}
.moomoo-shot-source span{color:var(--warn);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}.moomoo-shot-source b{font-size:13px;text-align:right}.moomoo-shot-source small{grid-column:1/-1;color:var(--faint);font-size:10.5px}
.moomoo-shot-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--lineS);border-radius:14px;background:var(--lineS)}
.moomoo-shot-summary-grid>div{min-width:0;padding:11px;background:var(--card)}
.moomoo-shot-summary-grid span,.moomoo-shot-summary-grid b{display:block}.moomoo-shot-summary-grid span{color:var(--faint);font-size:9.5px}.moomoo-shot-summary-grid b{margin-top:4px;font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.moomoo-shot-summary-grid b small{font-size:9px;font-weight:650}
.moomoo-shot-summary-grid .up{color:var(--up)}.moomoo-shot-summary-grid .down{color:var(--down)}
.moomoo-shot-currency-rows{margin-top:10px;padding:11px 12px;border-radius:12px;background:var(--btn)}
.moomoo-shot-currency-rows>b{display:block;margin-bottom:5px;font-size:10.5px}.moomoo-shot-currency-rows>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:4px 0;color:var(--faint);font-size:9.5px;line-height:1.4}.moomoo-shot-currency-rows>div span:last-child{text-align:right}
.moomoo-shot-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
.moomoo-shot-checks span{padding:8px 9px;border-radius:10px;background:var(--btn);color:var(--faint);font-size:9.5px;line-height:1.4}
.moomoo-shot-warnings{margin-top:11px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--warn) 36%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--card) 90%,var(--warn) 10%);color:var(--warn);font-size:11px;line-height:1.5}
.moomoo-shot-warnings b{display:block;margin-bottom:4px}.moomoo-shot-warnings div+div{margin-top:3px}
.moomoo-shot-warnings .moomoo-shot-attest{margin:9px 0;color:var(--fg)}
.moomoo-shot-paper-type{display:flex;flex-direction:column;gap:6px;margin-top:11px}
.moomoo-shot-paper-type span{font-size:11px;color:var(--fg)}
.moomoo-shot-paper-type input{box-sizing:border-box;width:100%;padding:11px 12px;border:1.5px solid var(--warn);border-radius:11px;background:var(--inputbg);color:var(--fg);font-family:var(--mono);font-size:14px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.moomoo-shot-paper-type input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.moomoo-shot-position-list{display:grid;gap:1px;overflow:hidden;border:1px solid var(--lineS);border-radius:14px;background:var(--lineS)}
.moomoo-shot-position{display:grid;grid-template-columns:minmax(70px,1fr) repeat(2,minmax(84px,1fr));gap:8px;align-items:center;min-width:0;padding:10px;background:var(--card)}
.moomoo-shot-position>div{min-width:0}.moomoo-shot-position b,.moomoo-shot-position span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moomoo-shot-position b{font-family:var(--mono);font-size:11px}.moomoo-shot-position span{margin-top:3px;color:var(--faint);font-size:8.5px}
.moomoo-shot-position span.up{color:var(--up)}.moomoo-shot-position span.down{color:var(--down)}
.moomoo-shot-position>div:not(:first-child){text-align:right}.moomoo-shot-position-id b{font-family:var(--sans);font-size:12px}
.moomoo-shot-empty{padding:20px;border:1px solid var(--lineS);border-radius:14px;color:var(--faint);font-size:11.5px;text-align:center}
.moomoo-shot-success{text-align:center}.moomoo-shot-success-mark{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;border-radius:50%;background:var(--upTint);color:var(--up);font-size:23px;font-weight:800}
.moomoo-shot-success h3{margin:0 0 9px}.moomoo-shot-success p{margin:12px 0 0;font-size:11.5px}
.moomoo-shot-saved-summary{display:flex;align-items:baseline;justify-content:center;gap:8px}.moomoo-shot-saved-summary b{font-family:var(--mono);font-size:18px}.moomoo-shot-saved-summary span{color:var(--faint);font-size:10.5px}
@media(max-width:480px){.moomoo-shot-position{grid-template-columns:minmax(64px,.8fr) minmax(84px,1fr)}.moomoo-shot-position>div:nth-child(3){display:flex;grid-column:1/-1;align-items:baseline;justify-content:space-between;gap:9px;padding-top:8px;border-top:1px solid var(--lineS);text-align:left}.moomoo-shot-position .moomoo-shot-cost{margin-top:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;text-align:right}}
@media(max-width:360px){.moomoo-shot-actions{grid-template-columns:1fr}.moomoo-shot-progress-steps{gap:3px}.moomoo-shot-progress-steps span{flex-direction:column;gap:3px;text-align:center;white-space:normal}}
@media(prefers-reduced-motion:reduce){.moomoo-shot-progress-track i{transition:none}.moomoo-shot-progress-track.is-indeterminate i{width:62%;transform:none;animation:none}}
@media(forced-colors:active){.moomoo-shot-attest input:checked{background:Highlight;border-color:Highlight}.moomoo-shot-attest input:checked::after{border-color:HighlightText}}
/* Share performance sheet — controls grouped into one card (segmented
period picker, @-prefixed username field, toggle row), and a soft glow
behind the generated canvas preview so it reads as the featured object
rather than a plain image sitting on the sheet background. */
.share-controls .seg{margin-bottom:0}
#shareModeSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.share-premium-note{margin-top:16px;padding:13px;border:1px solid var(--accentBorder);border-radius:13px;background:var(--accentTint)}
.share-premium-note b,.share-premium-note span{display:block}.share-premium-note b{font-size:12px}.share-premium-note span{margin-top:4px;color:var(--dim);font-size:10.5px;line-height:1.45}
.share-username-field{position:relative}
.share-at{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:14px;font-weight:600;pointer-events:none}
.share-username-field input{padding-left:27px}
.share-toggle-row{display:flex;gap:11px;align-items:center;margin-top:16px;padding-top:16px;border-top:.5px solid var(--lineS);cursor:pointer}
.share-toggle-row b{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em}
.share-toggle-row small{display:block;margin-top:1px;font-size:11px;color:var(--faint);line-height:1.4;font-weight:500}
.share-preview-wrap{position:relative;margin-top:20px;display:flex;justify-content:center}
.share-preview-glow{position:absolute;inset:-10% -6%;background:radial-gradient(closest-side,var(--accentTint),transparent 72%);filter:blur(28px);z-index:0;opacity:.85;pointer-events:none}
/* A held thumb on the canvas was triggering the browser's own "long-press
an image" gesture (save-image callout / a draggable ghost you can pan
anywhere on screen, independent of the sheet's own scroll) -- the exact
same class of bug already fixed on .navsync elsewhere in this file, for
the same reason: nothing told the browser this pixel content isn't a
draggable/savable image. */
.share-preview-wrap canvas{position:relative;z-index:1;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}
.share-trade-note{display:flex;align-items:center;justify-content:space-between;gap:12px}
.share-trade-note b{font-size:15px;font-weight:700}
.seg.icon-seg button{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px;font-size:12px}
.seg.icon-seg svg{width:14px;height:14px;flex:0 0 auto;opacity:.7}
.seg.icon-seg button.on svg{opacity:1}
/* Add > Watch: a deterministic Premium gate, not an AI result. The feature
remains guarded by personalAIEntitled() and the mutation path in events.js;
these selectors only give the free-state explanation a useful hierarchy. */
.watch-premium-card{width:100%;max-width:720px;margin-right:auto;margin-left:auto;padding:16px}
.watch-premium-card>.icon-seg{margin-bottom:14px}
.watch-premium-gate{min-width:0;overflow:hidden;border:1px solid var(--accentBorder);border-radius:18px;
background:linear-gradient(145deg,color-mix(in srgb,var(--card) 94%,var(--act) 6%),var(--card));
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
.watch-premium-story{min-width:0;padding:21px}.watch-premium-details{min-width:0;padding:18px 21px 21px}.watch-premium-intro{display:flex;align-items:center;gap:11px}
.watch-premium-intro>div{display:flex;min-width:0;align-items:center;gap:7px;flex-wrap:wrap}
.watch-premium-icon{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border:1px solid var(--accentBorder);
border-radius:14px;background:var(--accentTint);color:var(--act)}
.watch-premium-icon svg,.watch-premium-benefits svg,.watch-premium-trust svg,.watch-premium-cta svg{
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.watch-premium-icon svg{width:22px;height:22px}.watch-premium-badge{display:inline-flex;min-height:24px;align-items:center;
padding:3px 8px;border:1px solid var(--accentBorder);border-radius:999px;background:var(--accentTint);
color:var(--act);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.watch-premium-gate h2{margin:16px 0 0;font-size:24px;line-height:1.13;letter-spacing:-.035em}
.watch-premium-gate #watchPremiumDescription{max-width:560px;margin:8px 0 0;color:var(--dim);font-size:13px;line-height:1.55}
.watch-premium-benefits{display:grid;gap:7px}.watch-premium-benefits>div{display:grid;min-width:0;
min-height:56px;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:9px 11px;
border:1px solid var(--lineS);border-radius:12px;background:var(--cardS)}
.watch-premium-benefits>div>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;
background:var(--accentTintSoft);color:var(--act)}.watch-premium-benefits svg{width:17px;height:17px}
.watch-premium-benefits strong,.watch-premium-benefits small{display:block}.watch-premium-benefits strong{font-size:12.5px;line-height:1.3}
.watch-premium-benefits small{margin-top:2px;color:var(--faint);font-size:11.5px;line-height:1.4}
.watch-premium-trust{display:grid;grid-template-columns:17px minmax(0,1fr);gap:8px;margin-top:15px;padding-top:13px;
border-top:1px solid var(--lineS);color:var(--up)}.watch-premium-trust svg{width:17px;height:17px;margin-top:1px}
.watch-premium-trust p{margin:0;color:var(--dim);font-size:11.5px;line-height:1.5}.watch-premium-trust p strong{color:var(--text)}
.watch-premium-action{min-width:0;padding:18px 21px 20px;border-top:1px solid var(--lineS);
background:color-mix(in srgb,var(--cardS) 90%,var(--act) 10%)}
.watch-premium-action>strong,.watch-premium-action>p,.watch-premium-action>small{display:block}
.watch-premium-action>strong{margin-top:7px;font-size:15px;line-height:1.3}.watch-premium-action>p{margin:5px 0 0;
color:var(--dim);font-size:12px;line-height:1.5}.watch-premium-cta{display:flex;min-height:48px;align-items:center;
justify-content:center;gap:8px;margin-top:14px;text-decoration:none}.watch-premium-cta svg{width:17px;height:17px}
.watch-premium-action>small{margin-top:8px;color:var(--faint);font-size:10.5px;line-height:1.4;text-align:center}
.trade-block-message{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;color:var(--dim);
font-size:12.5px;line-height:1.5;text-align:center}.trade-block-message.is-premium{flex-wrap:wrap;padding:10px 11px;
border:1px solid var(--accentBorder);border-radius:12px;background:var(--accentTintSoft)}
.trade-block-premium{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;
background:var(--actFill);color:var(--onAct);font-size:11.5px;font-weight:800;text-decoration:none;white-space:nowrap}
@media(min-width:700px){.watch-premium-gate{display:grid;grid-template-areas:"story action" "details action";
grid-template-columns:minmax(0,1fr) minmax(225px,.58fr)}.watch-premium-story{grid-area:story;padding-bottom:0}
.watch-premium-details{grid-area:details}.watch-premium-action{grid-area:action;display:flex;flex-direction:column;
justify-content:center;border-top:0;border-left:1px solid var(--lineS)}}
@media(max-width:380px){.watch-premium-card{padding:13px}.watch-premium-story{padding:17px 15px}
.watch-premium-action{padding:16px 15px 18px}.watch-premium-details{padding:16px 15px 18px}
.watch-premium-gate h2{font-size:22px}.watch-premium-benefits>div{padding-right:9px;padding-left:9px}}
/* One context-aware Premium destination for every free-plan gate. It is a
product comparison and an inert Stripe preview, never an entitlement or
payment surface. The source page confirms the tap until navigation wins;
the destination paints as one stable frame rather than stacking a browser
document crossfade with a second page-level fade. */
html.premium-route-pending{cursor:progress}
.premium-route-trigger{cursor:progress!important;opacity:.7!important}
@keyframes premiumRouteToastIn{from{opacity:.72;transform:translate3d(-50%,4px,0) scale(.985)}
to{opacity:1;transform:translate3d(-50%,0,0) scale(1)}}
.premium-route-toast{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
animation:premiumRouteToastIn .11s var(--e-out) both}
.premium-route-toast::before{content:"";width:13px;height:13px;flex:0 0 13px;border:2px solid var(--line);
border-top-color:var(--act);border-radius:50%;animation:premiumRouteSpin .7s linear infinite}
@keyframes premiumRouteSpin{to{transform:rotate(360deg)}}
.premium-preview-page,.premium-page{min-height:100svh;padding:0;background-color:var(--ink);background-image:var(--wash),var(--noise)}
.premium-preview-topbar{display:flex;max-width:1040px;align-items:center;justify-content:space-between;margin:0 auto;
padding:calc(14px + env(safe-area-inset-top)) 18px 14px;border-bottom:1px solid var(--lineS)}
.premium-preview-brand,.premium-preview-close{display:flex;min-height:44px;align-items:center;text-decoration:none}
.premium-preview-brand{gap:9px;color:var(--text);font-size:12px;font-weight:850;letter-spacing:.08em}
.premium-preview-brand>span:first-child{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;
background:var(--actFill);color:var(--onAct)}.premium-preview-brand svg{width:18px;height:18px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.premium-preview-close{gap:5px;padding:7px 4px;color:var(--dim);
font-size:12px;font-weight:700}.premium-preview-close svg{width:16px;height:16px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.premium-preview-shell{display:grid;width:100%;max-width:1040px;gap:22px;margin:0 auto;padding:34px 18px 26px}.premium-preview-lead{display:grid;min-width:0;gap:18px}
.premium-preview-intro{min-width:0;padding:7px 2px 3px}.premium-context-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.premium-preview-eyebrow{display:flex;align-items:center;gap:8px;color:var(--act);font-size:11px;font-weight:800;
letter-spacing:.065em;text-transform:uppercase}.premium-preview-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--act);box-shadow:0 0 0 5px var(--accentTint)}.premium-context-chip{display:inline-flex;min-height:27px;
align-items:center;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--cardS);color:var(--dim);
font-size:10px;font-weight:750;line-height:1.2}.premium-preview-intro h1{max-width:650px;margin:18px 0 0;
font-size:38px;line-height:1.04;letter-spacing:-.05em}.premium-preview-intro>p{max-width:640px;margin:14px 0 0;
color:var(--dim);font-size:14px;line-height:1.65}.premium-preview-promise{display:grid;max-width:640px;
grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;margin-top:24px;padding:13px;border:1px solid var(--upBorder);
border-radius:14px;background:var(--upTint)}.premium-preview-promise>span{display:grid;width:34px;height:34px;place-items:center;
border-radius:10px;background:color-mix(in srgb,var(--upTint) 72%,var(--card) 28%);color:var(--up)}
.premium-preview-promise svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
stroke-linejoin:round}.premium-preview-promise p{margin:0;color:var(--dim);font-size:12px;line-height:1.55}
.premium-preview-promise strong{display:block;margin-bottom:2px;color:var(--text);font-size:12.5px}
.premium-upgrade-card{position:relative;min-width:0;overflow:hidden;padding:20px;border:1px solid var(--accentBorder);
border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 93%,var(--act) 7%),var(--card));
box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.premium-upgrade-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--act),transparent 75%)}
.premium-upgrade-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.premium-upgrade-head h2{margin:5px 0 0;
font-size:21px;letter-spacing:-.03em}.premium-coming-soon{display:inline-flex;min-height:27px;align-items:center;padding:4px 9px;
border:1px solid var(--warnBorder);border-radius:999px;background:var(--warnTint);color:var(--warn);font-size:10px;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.premium-price-line{display:flex;align-items:flex-end;
justify-content:space-between;gap:12px;margin-top:19px;padding:14px 0;border-top:1px solid var(--lineS);border-bottom:1px solid var(--lineS)}
.premium-price-line strong,.premium-price-line span{display:block}.premium-price-line strong{font-size:15px;line-height:1.3}
.premium-price-line span{color:var(--faint);font-size:10.5px;text-align:right}.premium-upgrade-benefits{display:grid;gap:10px;margin:16px 0 0;padding:0;
list-style:none}.premium-upgrade-benefits li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;
color:var(--dim);font-size:12px;line-height:1.4}.premium-upgrade-benefits li>span{display:grid;width:22px;height:22px;place-items:center;
border-radius:7px;background:var(--accentTint);color:var(--act);font-size:11px;font-weight:900}.premium-upgrade-button{display:flex;
width:100%;min-height:50px;align-items:center;justify-content:center;margin-top:19px}.premium-upgrade-caption{margin:8px 0 0;
color:var(--faint);font-size:10.5px;line-height:1.4;text-align:center}.premium-manage-link{display:block;width:100%;
margin-top:10px;padding:6px;background:transparent;border:0;color:var(--act);font-size:11.5px;font-weight:700;
text-align:center}.premium-manage-link[hidden]{display:none}.premium-preview-modal-open{overflow:hidden}
.premium-stripe-preview{position:fixed;z-index:4000;inset:0;display:grid;place-items:center;padding:18px;
padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));
background:color-mix(in srgb,var(--ink) 74%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
animation:premiumBackdropIn .2s ease-out both}.premium-stripe-preview[hidden]{display:none}
.premium-stripe-preview-card{width:min(100%,390px);min-width:0;padding:18px;border:1px solid var(--accentBorder);border-radius:20px;
background:var(--card);box-shadow:var(--shadow);animation:premiumPreviewIn .24s var(--e) both}
.premium-stripe-preview-card>header{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;align-items:center;gap:10px;margin-bottom:14px}
.premium-stripe-preview-card>header>span{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:var(--accentTint);
color:var(--act)}.premium-stripe-preview svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}.premium-stripe-preview b,.premium-stripe-preview small{display:block}
.premium-stripe-preview b{font-size:14px}.premium-stripe-preview small{margin-top:2px;color:var(--faint);font-size:11px;line-height:1.4}
#premiumStripePreviewClose{display:grid;width:44px;height:44px;place-items:center;border-radius:12px;background:var(--btn);color:var(--dim);
font-size:22px;line-height:1}.premium-stripe-preview-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
padding:10px 0;border-top:1px solid var(--lineS);color:var(--dim);font-size:12px}.premium-stripe-preview-card>div strong{
color:var(--text);font-size:13px;text-align:right}.premium-stripe-coming{width:100%;min-height:44px;margin-top:8px}
.premium-stripe-preview-card>p{margin:9px 0 0;color:var(--faint);font-size:11px;line-height:1.45;text-align:center}
.premium-stripe-preview button:focus-visible{outline:2px solid var(--act);outline-offset:3px}#premiumStripeStatus{position:absolute;width:1px;height:1px;margin:-1px;
padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.premium-comparison{min-width:0;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.premium-comparison-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding-bottom:17px}
.premium-comparison-head h2{margin:5px 0 0;font-size:24px;letter-spacing:-.035em}.premium-comparison-head>p{max-width:460px;margin:0;
color:var(--dim);font-size:12px;line-height:1.55;text-align:right}.premium-compare-columns,.premium-compare-row{display:grid;
grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:14px}.premium-compare-columns{padding:9px 12px;
border-radius:10px;background:var(--cardS);color:var(--faint);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.premium-compare-list{margin:0}.premium-compare-row{position:relative;align-items:start;padding:15px 12px;border-bottom:1px solid var(--lineS)}
.premium-compare-row dt{font-size:12.5px;font-weight:750;line-height:1.45}.premium-compare-row dd{margin:0;color:var(--dim);
font-size:12px;line-height:1.5}.premium-compare-row dd>span{display:none}.premium-compare-row.is-context{margin:5px 0;
border:1px solid var(--accentBorder);border-radius:13px;background:var(--accentTintSoft)}.premium-compare-row.is-context dt::after{
content:"Why you’re here";display:block;width:max-content;max-width:100%;margin-top:5px;padding:3px 6px;border-radius:6px;background:var(--accentTint);
color:var(--act);font-size:8px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}.premium-comparison-note{margin:15px 2px 0;
color:var(--faint);font-size:10.5px;line-height:1.55}.premium-preview-foot{display:flex;max-width:1040px;align-items:center;
justify-content:space-between;gap:16px;margin:0 auto;padding:0 18px calc(22px + env(safe-area-inset-bottom));color:var(--faint);
font-size:11px;line-height:1.55}.premium-preview-foot a{flex:0 0 auto;color:var(--act);font-weight:750;text-decoration:none}
/* Secondary link row -- Privacy/Terms/Cancellation/Support -- kept as its
own row below .premium-preview-foot rather than folded into that flex's
existing two-item space-between layout, which isn't built for more than
one link. Reused as-is on the onboarding gate (js/shell.js, .ob-legal-
links) so both of Pantau's public entry points expose the same set of
links with the same visual language. */
.premium-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;max-width:1040px;margin:10px auto 0;
padding:0 18px calc(18px + env(safe-area-inset-bottom));font-size:11px}
.premium-legal-links a{padding:6px 2px;color:var(--act);font-weight:700;text-decoration:none}
.ob-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:12px;font-size:10.5px}
.ob-legal-links a{padding:5px 2px;color:var(--faint);font-weight:700;text-decoration:none}
/* Standalone long-form document pages (privacy/terms/refund) -- same
card/text tokens the rest of the app already uses, so they inherit
dark/light theming automatically with zero new color logic. */
.legal-page{max-width:680px;margin:0 auto;padding:28px 20px calc(48px + env(safe-area-inset-bottom));color:var(--dim);font-size:14px;line-height:1.65}
.legal-page h1{margin:0 0 4px;color:var(--text);font-size:27px;letter-spacing:-.02em}
.legal-page .legal-updated{margin:0 0 26px;color:var(--faint);font-size:12px}
.legal-page h2{margin:26px 0 9px;color:var(--text);font-size:16.5px;letter-spacing:-.01em}
.legal-page p{margin:0 0 13px}
.legal-page ul{margin:0 0 13px;padding-left:20px}
.legal-page li{margin-bottom:6px}
.legal-page a{color:var(--act);font-weight:700;text-decoration:none}
.legal-page strong{color:var(--text)}
@keyframes premiumBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes premiumPreviewIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(min-width:760px){.premium-preview-shell{gap:28px;padding-top:50px}.premium-preview-lead{grid-template-columns:minmax(0,1fr) minmax(330px,370px);
align-items:center;gap:48px}.premium-preview-intro h1{font-size:48px}.premium-upgrade-card{position:sticky;top:20px}}
@media(max-width:650px){.premium-preview-shell{padding-top:23px}.premium-preview-intro h1{font-size:34px}.premium-comparison{padding:16px}
.premium-comparison-head{display:block}.premium-comparison-head>p{margin-top:8px;text-align:left}.premium-compare-columns{display:none}
.premium-compare-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:15px 8px}.premium-compare-row dt{grid-column:1/-1}
.premium-compare-row dd>span{display:block;margin-bottom:4px;color:var(--faint);font-size:8.5px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.premium-preview-foot{display:block;text-align:center}.premium-preview-foot a{display:block;min-height:44px;padding-top:13px}}
@media(max-width:360px){.premium-preview-topbar{padding-inline:14px}.premium-preview-shell{padding-inline:14px}.premium-preview-intro h1{font-size:31px}
.premium-upgrade-card{padding:17px}.premium-upgrade-head{display:block}.premium-coming-soon{margin-top:10px}.premium-price-line{display:block}
.premium-price-line span{margin-top:4px;text-align:left}.premium-compare-row{grid-template-columns:1fr}.premium-compare-row dt,.premium-compare-row dd{grid-column:1}}
@media(prefers-reduced-motion:reduce){.premium-route-toast::before,.premium-stripe-preview,.premium-stripe-preview-card{animation:none}}
/* The six research destinations stay on one horizontal rail. Each keeps a
full-size touch target and its complete icon/label; narrow phones scroll
the rail instead of wrapping or shrinking a word into an empty button. */
.seg.ai-card-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(86px,1fr);gap:3px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg.ai-card-seg::-webkit-scrollbar{display:none}
.seg.ai-card-seg .ai-card-tab{display:inline-flex;min-height:44px;min-width:0;align-items:center;justify-content:center;gap:5px;padding:8px 7px;overflow:visible;scroll-snap-align:center;white-space:nowrap;overflow-wrap:normal;font-size:10.5px}
.seg.ai-card-seg .ai-card-tab svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.seg.ai-card-seg .ai-card-tab.on svg{opacity:1}
/* Expanded-card tag help. A button keeps the exact geometry of the tag/text
it replaces, while giving touch users the explanation title= cannot show. */
.tag-help-trigger{position:relative;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:flex-start;border:0;background:transparent;color:inherit;font-family:inherit;text-align:left;vertical-align:baseline;padding:0;white-space:nowrap}
.tag-help-trigger::after{content:"";position:absolute;inset:-7px -5px}
.tag-help-trigger.tag{padding:2px 7px;border:.5px solid var(--line);border-radius:100px}
.tag-help-trigger.tag.held{border-color:var(--accentBorder);color:var(--act)}
.tag-help-trigger.idea-priority-tag{margin-left:7px;padding:2px 6px;border:1px solid currentColor;border-radius:6px}
.tag-help-trigger.idea-setup-help,.tag-help-trigger.idea-oversold-help{line-height:inherit;white-space:normal}
.tag-help-trigger:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.tag-help-modal .card{max-width:360px;padding:20px}
.tag-help-modal h3{margin:6px 0 0;font-size:19px;letter-spacing:-.025em}
.tag-help-modal p{margin:10px 0 17px;color:var(--dim);font-size:13px;line-height:1.6}
/* Header stock lookup: local holdings render immediately and remote symbols
join the same list. The sheet remains one scroll surface on mobile so the
keyboard cannot trap a second nested pane. */
.stock-search-sheet .sheethd>div{min-width:0}
.stock-search-title{font-size:19px;font-weight:800;letter-spacing:-.025em}
.stock-search-sub{margin-top:2px;color:var(--faint);font-size:10.5px}
#globalSearchClose{padding:9px 4px;color:var(--act);font-size:13px;font-weight:750}
.stock-search-field{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--inputLine);border-radius:13px;background:var(--inputbg);color:var(--faint)}
.stock-search-field svg{width:17px;height:17px}
.stock-search-field input{min-width:0;border:0;background:transparent;padding:12px 0;color:var(--text);font-size:16px;text-transform:uppercase;box-shadow:none}
.stock-search-field input:focus{outline:0}
.stock-search-field button{width:26px;height:26px;border-radius:50%;background:var(--btn);color:var(--dim);font-size:18px;line-height:1}
.stock-search-progress,.stock-search-note,.stock-search-empty{display:flex;align-items:center;gap:8px;margin-top:10px;padding:11px 12px;border-radius:12px;background:var(--btn);color:var(--faint);font-size:11px;line-height:1.45}
.stock-search-progress i{width:13px;height:13px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--act);border-radius:50%;animation:earnCheckSpin .8s linear infinite}
.stock-search-results{display:grid;gap:5px;margin-top:10px}
.globalSearchResult{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid transparent;border-radius:12px;background:var(--btn);text-align:left}
.globalSearchResult.on{border-color:var(--accentBorder);background:var(--accentTint)}
.globalSearchResult>span{min-width:0}.globalSearchResult b,.globalSearchResult small{display:block}.globalSearchResult b{font-family:var(--mono);font-size:13px}.globalSearchResult small{margin-top:2px;overflow:hidden;color:var(--dim);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.globalSearchResult em{flex:0 0 auto;color:var(--faint);font-size:9px;font-style:normal}
.stock-search-record{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--cardS)}
.stock-search-record>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.stock-search-record>header>div{min-width:0}.stock-search-record>header b,.stock-search-record>header span{display:block}.stock-search-record>header b{font-family:var(--mono);font-size:19px}.stock-search-record>header span{margin-top:3px;color:var(--faint);font-size:10px}.stock-search-record>header strong{flex:0 0 auto;font-family:var(--mono);font-size:18px}
.stock-search-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.stock-search-badges span{padding:3px 7px;border-radius:99px;background:var(--btn);color:var(--dim);font-size:9px;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.stock-search-badges .is-owned{color:var(--up)}
.stock-search-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}.stock-search-facts>div{padding:9px 10px;border-radius:10px;background:var(--inputbg)}.stock-search-facts span,.stock-search-facts b{display:block}.stock-search-facts span{color:var(--faint);font-size:8.5px}.stock-search-facts b{margin-top:3px;font-family:var(--mono);font-size:11px}
.stock-search-source{margin:7px 1px 0;color:var(--faint);font-size:9px;line-height:1.4}.stock-search-idea{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--inputbg);font-size:10px}.stock-search-idea span{min-width:0;color:var(--dim)}.stock-search-idea b{flex:0 0 auto;font-family:var(--mono)}
.stock-search-actions{display:flex;flex-wrap:nowrap;gap:6px;margin-top:12px}.stock-search-actions button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:8px 4px;border-radius:10px;background:var(--btn);color:var(--act);font-size:10px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-search-actions button svg{width:14px;height:14px;flex:0 0 auto}
.a11y-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app-topline{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px}.app-topline>.title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header-actions{display:flex;min-width:0;flex:0 1 auto;align-items:center;justify-content:flex-end;gap:6px}.app-header-actions>.pill{min-width:0;max-width:min(34vw,150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header-actions>.modebtn{flex:0 0 auto}
/* Compact trade picker -- a closed-by-default button + row list, standing
in for a native