/* Trade page (section E, 3 Oct): a price block and a chart beside a sticky
   ticket. Only what answers "what do I pay, what do I get, can it execute now,
   is it real". Loaded last on marketplace.html.
   lean: this overrides older retail-*.css rules rather than deleting them; the
   trigger to fold it in is the next change that touches retail-reference.css. */

/* The market side is one panel: price block, then chart. The asset menu's
   list must not be clipped, so the panel does not hide overflow. */
.retail-product .retail-trading-layout #retail-market{display:grid;gap:var(--sp-6);margin:0;padding:var(--sp-6);overflow:visible}
.retail-product #retail-market .retail-chart-card{display:grid;gap:var(--sp-2);margin:0;padding:0;border:0;background:none}

/* Price block. */
.retail-asset-top{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.retail-asset-top>div{display:grid;gap:var(--sp-1);min-width:0}
.retail-asset-top h3{margin:0;font:var(--fw-bold) var(--fs-lg)/1.2 var(--sans);color:var(--fg)}
.retail-asset-sub{margin:0;font-size:var(--fs-xs);color:var(--fg-muted)}
.retail-product .retail-asset-top .select-menu{justify-self:start}
.retail-product .retail-asset-top .select-menu-button{font-size:var(--fs-md);font-weight:var(--fw-bold)}
.retail-price-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.retail-price-actions:empty{display:none}
.retail-product .retail-history-price{margin:var(--sp-2) 0 0;font:var(--fw-bold) var(--fs-h1)/1 var(--sans);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.retail-product .retail-hero-change{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.retail-product .retail-hero-change:empty{display:none}
.retail-hero-change[data-direction=up]{color:var(--ok)}
.retail-hero-change[data-direction=down]{color:var(--bad)}
/* Session, spread and source on one line under the price. */
.retail-price-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.retail-price-meta [hidden]{display:none}
.retail-price-meta .pill{margin:0}
.retail-product .retail-price-meta .retail-price-freshness{margin:0;font-size:var(--fs-xs);color:var(--fg-muted)}
.retail-product .retail-price-meta .retail-price-freshness::before{content:none}
.retail-spread:empty{display:none}
/* Is it real: one line, a link down to the Backing section (I5). */
.retail-backing-line{justify-self:start;display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);text-underline-offset:var(--sp-1)}
.retail-backing-line span{color:var(--ok)}
.retail-backing-line:hover{color:var(--link-hover);text-decoration-color:currentColor}
.retail-backing-line:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px;border-radius:var(--r-sm)}
.retail-backing-line[hidden]{display:none}
/* Load/retry state: only while loading, saved or failed. */
#retail-market .retail-market-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0}
#retail-market .retail-market-toolbar[hidden],#retail-market .retail-market-toolbar [hidden]{display:none}
#retail-market .ui-refresh-status{margin:0;font-size:var(--fs-xs)}

/* Chart: range tabs, then the chart; no caption. */
.retail-chart-panel{display:grid;gap:var(--sp-3);min-width:0}
.retail-chart-panel>.seg{justify-self:start}
.retail-chart{min-height:calc(var(--sp-24) * 2);min-width:0}

/* Desktop: the ticket stays in view beside the chart and backing while the
   market side scrolls, below the sticky header (I4: its measured height,
   --site-top-h from retail-trade.js, + 24 px). */
@media(min-width:901px){
 .retail-product .retail-trading-layout{align-items:start}
 .retail-product .retail-trading-layout>.retail-trade-dialog:not(:modal){position:sticky;top:calc(var(--site-top-h,var(--sp-16)) + var(--sp-6));margin-top:0}
 /* The ticket is first in the DOM (Tab order); it still sits on the right. */
 .retail-product .retail-trading-layout:not(.retail-explore-collapsed)>#retail-market{grid-column:1;grid-row:1}
 .retail-product .retail-trading-layout:not(.retail-explore-collapsed)>.retail-trade-dialog{grid-column:2;grid-row:1}
}
/* Phone and narrow: price, then the ticket, then the chart. */
@media(max-width:900px){
 .retail-product .retail-trading-layout{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4)}
 .retail-product .retail-trading-layout #retail-market{display:contents}
 .retail-product .retail-trading-layout #retail-market>.retail-price-block{order:1}
 .retail-product .retail-trading-layout>.retail-trade-dialog{order:2;position:static;margin:0}
 .retail-product .retail-trading-layout #retail-market>.retail-chart-panel{order:3}
 .retail-product #retail-market>.retail-price-block,.retail-product #retail-market>.retail-chart-panel{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface)}
 .retail-product .retail-history-price{font-size:var(--fs-h2)}
}

/* Signed in: the address is already in the header; here it is a quiet line. */
.retail-product .session #wallet{font:var(--fs-xs)/1.4 var(--sans);color:var(--fg-muted);overflow-wrap:anywhere}
/* What blocks a quote right now, on its own short line under the session line. */
.retail-product .retail-ticket-notice{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--fg-2)}
.retail-product .retail-ticket-notice[hidden]{display:none}
/* "Up to N · You hold N": the amount's hint, tight under the amount row. */
.retail-product .retail-swap-card #quantity-limits{margin:var(--sp-1) 0 0}

/* One page per asset (section F): chart type, stats, tabs. */
.retail-chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.retail-chart-head .seg{margin:0}
.retail-chart-mode button{display:inline-flex;align-items:center;gap:var(--sp-1)}
.retail-chart-mode-icon{display:inline-grid;place-items:center;font-size:var(--fs-sm)}
.retail-chart-mode-icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.retail-stat-short{display:none}
/* I11/I12 (4 Oct), phone: range left and an icon-only type toggle right on
   one row; the hours stat shortens to "Opens Mon 00:00". */
@media(max-width:600px){
 .retail-chart-head{flex-wrap:nowrap}
 .retail-chart-mode-word{display:none}
 .retail-product .retail-chart-mode button{padding-inline:var(--sp-2)}
 .retail-stat-long{display:none}
 .retail-stat-short{display:inline}
}

.retail-details{display:grid;gap:var(--sp-5);min-width:0}
.retail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin:0;padding:var(--sp-4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.retail-stats>div{display:grid;gap:var(--sp-1);min-width:0}
.retail-stats>div[hidden]{display:none}
.retail-stats dt{margin:0;font-size:var(--fs-xs);color:var(--fg-muted)}
.retail-stats dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.retail-tabs{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.retail-product .retail-tabs button{appearance:none;min-height:0;height:auto;margin:0 0 -1px;padding:var(--sp-2) 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--fg-muted);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer;box-shadow:none}
.retail-product .retail-tabs button:hover{color:var(--fg)}
.retail-product .retail-tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--fg)}
.retail-pane{display:grid;gap:var(--sp-4);min-width:0}
.retail-pane[hidden]{display:none}
.retail-pane:focus-visible{outline:2px solid var(--accent-ink);outline-offset:var(--sp-1);border-radius:var(--r-sm)}

.retail-backing-card{display:grid;gap:var(--sp-3);padding:0;border:0;background:none;scroll-margin-top:calc(var(--site-top-h,var(--sp-16)) + var(--sp-6))}
.retail-backing-card h3{margin:0;font:var(--fw-semibold) var(--fs-md)/1.3 var(--sans);color:var(--fg)}
/* I6/I7: heading with the proof beside it, then the backing figures and identifiers as one grid (J1). */
.retail-backing-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3)}
.retail-proof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0;font-size:var(--fs-xs);color:var(--fg-2);font-variant-numeric:tabular-nums}
.retail-proof .pill{margin:0}
.retail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-8);margin:0}
.retail-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--border);min-width:0}
.retail-facts dt{margin:0;font-size:var(--fs-xs);color:var(--fg-muted);white-space:nowrap}
.retail-facts dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.retail-addr{display:inline-flex;align-items:center;gap:var(--sp-1)}
.retail-addr a{color:var(--link);text-decoration:none}
.retail-addr a:hover{text-decoration:underline}
.retail-position{grid-template-columns:repeat(2,minmax(0,1fr))}
.retail-position [data-direction=up]{color:var(--ok)}
.retail-position [data-direction=down]{color:var(--bad)}
.retail-pane>.btn{justify-self:start}

.retail-trades{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.retail-trades th{padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--fg-muted);border-bottom:1px solid var(--border)}
.retail-trades td{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-bottom:1px solid var(--border);color:var(--fg);vertical-align:middle}
.retail-trades .num{text-align:right}
.retail-trades tr>:last-child{padding-right:0}
.retail-trades .pill{margin:0}

@media(max-width:900px){
 .retail-product .retail-trading-layout #retail-market>.market-movers{order:5}
 .retail-product .retail-trading-layout #retail-market>.retail-details{order:4;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface)}
 .retail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .retail-facts,.retail-position{grid-template-columns:1fr}
 /* Trades stack as labelled rows on a phone. */
 .retail-trades thead{display:none}
 .retail-trades tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
 .retail-trades td{padding:0;border:0;text-align:left}
 .retail-trades td::before{content:attr(data-label);display:block;font-size:var(--fs-xs);color:var(--fg-muted)}
 .retail-trades .num{text-align:left}
}
/* Legacy retail-*.css styles every nav, dl/dt/dd and button on this page
   (uppercase labels, rules, 44 px buttons): the section-F parts reset them. */
#retail-market .retail-stats dt,#retail-market .retail-facts dt{padding:0;border:0;letter-spacing:normal;text-transform:none;font-weight:var(--fw-regular)}
#retail-market .retail-stats dd,#retail-market .retail-facts dd{padding:0;border:0}
#retail-market .retail-stats>div,#retail-market .retail-facts>div{margin:0}
#retail-market .retail-stats>div{padding:0;border:0}
/* I9 (4 Oct): explorer and copy icons by an address are one set: 14 px
   (1em at --fs-sm), stroke, --fg-muted, each in a 32 px hit area. */
#retail-market .copy-btn{min-height:0;width:var(--sp-8);height:var(--sp-8);margin:0;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--fg-muted);box-shadow:none;font-size:var(--fs-sm)}
#retail-market .copy-btn:hover{background:var(--bg-sunk);color:var(--fg)}
#retail-market .copy-btn:focus-visible,#retail-market .retail-addr a:focus-visible{outline:2px solid var(--focus-color);outline-offset:0}
#retail-market .copy-btn svg,#retail-market .retail-addr-icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#retail-market .retail-addr{gap:0}
#retail-market .retail-addr a{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--sp-8);border-radius:var(--r-sm)}
#retail-market .retail-addr-icon{display:inline-grid;place-items:center;width:var(--sp-8);height:var(--sp-8);font-size:var(--fs-sm);color:var(--fg-muted)}
#retail-market .retail-addr a:hover .retail-addr-icon{color:var(--fg)}
#retail-market .retail-addr{white-space:nowrap}
/* Desktop stats: one row sized to its content, wrapping only when it must. */
#retail-market dl.retail-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3) var(--sp-6)}
#retail-market dl.retail-stats dd{white-space:nowrap}
#retail-market dl.retail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
 #retail-market dl.retail-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #retail-market dl.retail-stats dd{white-space:normal}
 #retail-market dl.retail-facts{grid-template-columns:minmax(0,1fr)}
 #retail-market .retail-facts dt{white-space:normal}
 #retail-market .retail-facts>div{gap:var(--sp-2)}
}
#retail-market .retail-trades th,#retail-market .retail-trades td:first-child{white-space:nowrap}
/* H7 (4 Oct): company name as the heading, "tAAPL · Nasdaq" under it, and the
   asset switcher as a quiet chevron button beside the name. */
.retail-product .retail-asset-title{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.retail-product .retail-asset-title h3{margin:0;font:var(--fw-bold) var(--fs-h3)/1.2 var(--sans);color:var(--fg);letter-spacing:-.01em;overflow-wrap:anywhere}
.retail-product .retail-asset-switch{flex:none;justify-self:auto}
.retail-product .retail-asset-switch .select-menu-button{width:var(--sp-8);height:var(--sp-8);min-height:0;padding:0;justify-content:center;border-color:transparent;background:transparent}
.retail-product .retail-asset-switch .select-menu-button:hover:not(:disabled){border-color:var(--border);background:var(--bg-sunk)}
.retail-product .retail-asset-switch .select-menu-label{display:none}
.retail-product .retail-asset-switch .select-menu-chevron{margin:0}
.retail-product .retail-asset-switch .select-menu-list{left:0;right:auto;min-width:var(--sp-30)}
.retail-product .retail-asset-top .tok[hidden]{display:none}
/* I13 (4 Oct): on a phone the ticket is a fixed bottom bar, Buy · Sell, that
   opens as a sheet up to the header; the chart stays above the fold. The
   chevron (retail-trade.js) closes it. */
.retail-sheet-toggle{display:none}
@media(max-width:600px){
 .retail-product .retail-trading-layout>.retail-trade-dialog:not(:modal){position:fixed;left:0;right:0;bottom:var(--tabbar-h,0px);z-index:var(--z-sheet);width:auto;max-width:none;max-height:calc(100dvh - var(--site-top-h,var(--sp-16)) - var(--sp-4) - var(--tabbar-h,0px));overflow:auto;margin:0;padding:var(--sp-3) var(--sp-4);border:0;border-top:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg-surface);box-shadow:var(--e-3)}
 .retail-product .retail-trade-dialog[data-sheet=closed]>:not(.retail-trade-heading){display:none}
 .retail-product .retail-trade-dialog .retail-trade-heading{display:flex;align-items:center;gap:var(--sp-2)}
 .retail-product .retail-trade-dialog[data-sheet=closed] .retail-trade-heading{margin:0}
 .retail-product .retail-trade-heading .retail-actions{flex:1;min-width:0}
 .retail-product .retail-trade-heading .retail-sheet-toggle{display:inline-grid;place-items:center;flex:none;width:var(--sp-10);height:var(--sp-10);min-height:0;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-surface);color:var(--fg);box-shadow:none}
 .retail-sheet-toggle svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 /* K3: the page ends above the bar (handle + Buy · Sell, 87 px), which sits directly on
    the tab bar (product-nav.css, --tabbar-h holds the safe-area inset); padding the body,
    as product-nav.css fixes the shell's padding. Toasts rise above both. */
 :root:root body.retail-product:has(.retail-trading-layout){padding-bottom:calc(var(--sp-24) + var(--tabbar-h,env(safe-area-inset-bottom)))}
 body.retail-product:has(.retail-trading-layout) .toast-region{bottom:calc(var(--sp-24) + var(--tabbar-h,0px) + var(--sp-3))}
}
/* J2 (4 Oct): every backing row is one height, values share one right edge,
   and the ↗ / copy icons sit in their own column after the value. */
#retail-market .retail-backing-card dl.retail-facts{grid-template-columns:minmax(0,1fr)}
#retail-market .retail-backing-card .retail-facts>div{align-items:center;padding:var(--sp-1) 0}
#retail-market .retail-backing-card .retail-facts dt{white-space:nowrap}
#retail-market .retail-backing-card .retail-facts dd{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--sp-8) * 2);align-items:center;min-height:var(--sp-8)}
#retail-market .retail-backing-card .retail-addr{display:contents}
#retail-market .retail-addr-actions{display:inline-flex;justify-content:flex-end}
#retail-market .retail-addr-actions a{min-height:0}
/* J6 (4 Oct): the price-alerts bell is a 32 px ghost icon button level with the title row. */
.retail-product .retail-price-actions{align-self:flex-start}
.retail-product .retail-price-actions .retail-alerts-bell{display:inline-grid;place-items:center;width:var(--sp-8);height:var(--sp-8);min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--fg-2);box-shadow:none}
.retail-product .retail-price-actions .retail-alerts-bell:hover{background:var(--bg-sunk);color:var(--fg)}
.retail-product .retail-price-actions .retail-alerts-bell:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
/* J12 (4 Oct): the phone sheet has a drag handle, and while open it dims the
   page behind it (a tap there closes it, retail-trade.js). */
.retail-sheet-handle,.retail-sheet-scrim{display:none}
@media(max-width:600px){
 .retail-product .retail-trade-dialog[data-sheet]>.retail-sheet-handle{display:block;position:relative;width:var(--sp-10);height:var(--sp-1);margin:0 auto var(--sp-2);border-radius:var(--r-pill);background:var(--border-strong);touch-action:none;cursor:grab}
 .retail-product .retail-trade-dialog>.retail-sheet-handle::before{content:"";position:absolute;inset:calc(var(--sp-3) * -1) calc(var(--sp-6) * -1)}
 .retail-product .retail-trading-layout>.retail-sheet-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:calc(var(--z-sheet) - 1);background:var(--scrim)}
}
/* K1 (4 Oct): on a phone the attested figure and its time stack, both on the value column's right edge. */
@media(max-width:600px){
 #retail-market .retail-fact-parts>span:not(.retail-fact-sep){display:block}
 #retail-market .retail-fact-parts>.retail-fact-sep{display:none}
 #retail-market .retail-fact-parts>span:last-child{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--fg-muted)}
}
/* Portfolio value above the ticket (owner, 4 Oct): one quiet row, the whole row
   a link to Portfolio; on a phone it is the open sheet's first line. */
.retail-product .retail-trade-dialog .ticket-portfolio-value{display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0 0 var(--sp-3);border-bottom:1px solid var(--border);color:var(--fg-2);font-size:var(--fs-sm);text-decoration:none}
.retail-product .retail-trade-dialog .ticket-portfolio-value[hidden]{display:none}
.retail-product .retail-trade-dialog .ticket-portfolio-value strong{margin-left:auto;color:var(--fg);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.retail-product .retail-trade-dialog .ticket-portfolio-value>span[aria-hidden]{color:var(--fg-muted)}
.retail-product .retail-trade-dialog .ticket-portfolio-value:hover strong{text-decoration:underline}
.retail-product .retail-trade-dialog .ticket-portfolio-value:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
/* While the sheet shows an order, its chevron sits on the order's title row (owner, 4 Oct). */
@media(max-width:600px){
 .retail-product .retail-trade-dialog[data-trading]>.retail-trade-heading{position:absolute;top:calc(var(--sp-3) + var(--sp-1) + var(--sp-2));right:var(--sp-4);z-index:var(--z-raised);background:none}
 .retail-product .retail-trade-dialog[data-trading] .retail-order-title{padding-right:var(--sp-12)}
}

/* Watch star and Market movers (colleague's D02, 4 Oct). The star fills while
   the asset is on the viewer's watchlist (aria-pressed). */
.retail-watch{display:inline-flex}
/* One row with the bell (.retail-asset-top>div is a grid). */
.retail-asset-top>.retail-price-actions:not(:empty){display:flex}
/* The bell's quiet icon button (I-section), with a star. */
.retail-product .retail-price-actions .watch-star{display:inline-grid;place-items:center;width:var(--sp-8);height:var(--sp-8);min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--fg-2);box-shadow:none;cursor:pointer}
.retail-product .retail-price-actions .watch-star:hover{background:var(--bg-sunk);color:var(--fg)}
.retail-product .retail-price-actions .watch-star:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.retail-product .watch-star svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.retail-product .watch-star[aria-pressed=true] svg{fill:currentColor}
.market-movers{display:grid;gap:var(--sp-2);margin-top:var(--sp-6)}
.market-movers[hidden]{display:none}
/* Until its reads finish the block takes no room (it is read when it nears the viewport). */
.market-movers[data-state=loading]{margin:0}
.market-movers[data-state=loading]>*{display:none}
.market-movers-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.market-movers-head h3{margin:0;font-size:var(--fs-md)}
.market-movers-head a{color:var(--link);font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-decoration:none}
.market-movers-head a:hover{text-decoration:underline}
.market-movers-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.market-movers-list li{border-bottom:1px solid var(--border)}
.market-mover{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;color:var(--fg);text-decoration:none}
.market-mover:hover b:first-child{text-decoration:underline}
.market-mover[aria-current=page]{font-weight:var(--fw-semibold)}
.market-mover-text{display:grid;gap:var(--sp-1);min-width:0}
.market-mover-sub{display:flex;align-items:center;gap:var(--sp-1);color:var(--fg-muted);font-size:var(--fs-xs)}
.market-mover-figures{display:grid;gap:var(--sp-1);justify-items:end;font-size:var(--fs-sm)}
.market-mover-figures .num{font-variant-numeric:tabular-nums}
.market-mover [data-direction=up]{color:var(--ok)}
.market-mover [data-direction=down]{color:var(--bad)}