/* Focused investor layer. Brand tokens and financial controls remain shared. */
.retail-product .retail-explore-toggle{display:block;min-height:var(--sp-12);margin:var(--sp-3) 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);background:transparent;color:var(--fg-2);font-size:var(--fs-xs)}
.retail-product .retail-trading-layout.retail-explore-collapsed{display:block}
.retail-product .retail-trading-layout.retail-explore-collapsed>.retail-trade-dialog{width:100%;max-width:560px;margin:0 auto;box-sizing:border-box}
.retail-product .retail-trading-layout>#retail-market[hidden]{display:none}
.retail-product .retail-trade-heading{position:static;display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:0 0 var(--sp-4);margin-bottom:var(--sp-5)}
.retail-product .retail-trade-heading h2{border:0;padding:0;margin:0;flex:1}
.retail-product .retail-trade-heading .retail-actions{gap:var(--sp-1);flex-wrap:nowrap}
.retail-product .retail-trade-heading .retail-actions button{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);border-radius:var(--r-md);background:transparent;font-weight:var(--fw-semibold)}
.retail-product .retail-trade-heading .retail-actions button[aria-pressed=true]{background:var(--accent-wash);color:var(--fg);border-color:var(--border-strong);font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:var(--sp-1)}
.retail-product #retail-market>h2{margin:0 0 var(--sp-5);padding:0 0 var(--sp-4);min-height:var(--sp-12);display:flex;align-items:center}
.retail-product .retail-market-search{display:grid;grid-template-columns:1fr;gap:var(--sp-2);align-items:start}
.retail-product .retail-market-search label{white-space:nowrap}
.retail-product .retail-market-search input{width:100%;max-width:none}
.retail-product .retail-swap-cards{position:relative;display:flex;flex-direction:column;gap:var(--sp-2)}
.retail-product .retail-direction-switch{align-self:center;z-index:1;min-width:var(--sp-12);min-height:var(--sp-12);padding:var(--sp-2);margin:calc(var(--sp-6) * -1) 0;border:var(--sp-1) solid var(--bg-surface);background:var(--bg-sunk);font-size:var(--fs-h3);line-height:var(--lh-tight)}
.retail-product .retail-swap-note-row{align-items:center;min-width:0}
.retail-product .retail-swap-note-row #quantity{flex:1;width:40%;font-size:var(--fs-h2);min-height:var(--sp-12)}
.retail-product .retail-token-selector{flex:1;max-width:60%;min-width:0;font-size:var(--fs-sm);min-height:var(--sp-12);border-radius:var(--r-chip);margin:0;background:var(--bg-surface);color:var(--fg)}
.retail-product .retail-token-badge{padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-chip);white-space:nowrap;background:var(--bg-surface);margin-left:auto}
.retail-product .retail-panel-balance{font-size:var(--fs-2xs);letter-spacing:var(--ls-normal);text-transform:none;line-height:var(--lh-normal);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.retail-product .retail-activity{padding-top:var(--sp-4);margin-top:var(--sp-5);border-top:1px solid var(--border)}
.retail-product .retail-activity>a,.retail-product .retail-activity>button{display:block;margin-top:var(--sp-3)}
.retail-product .retail-wallet-balance{margin:var(--sp-4) 0;font-size:var(--fs-2xs)}
.retail-product .retail-wallet-balance p{font-size:var(--fs-2xs);line-height:var(--lh-normal)}
.retail-trading-layout .retail-trade-dialog:not(:modal){max-height:none;overflow:visible}
.retail-product .shell:has(.retail-trading-layout){max-width:var(--container)}
.retail-trading-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:var(--sp-6);align-items:start}
.retail-trading-layout .retail-trade-dialog:not(:modal){position:static;width:100%;margin:var(--sp-6) 0 0;box-sizing:border-box;box-shadow:none}
.retail-trading-layout #retail-market{min-width:0;overflow:hidden}
.retail-trading-layout .retail-watchlist-table{min-width:0}
.portfolio-guide{margin-top:var(--sp-8)}
.portfolio-guide>summary{font-size:var(--fs-sm)}
/* .product-primary-nav and .product-subnav geometry live only in
   ui/product-nav.css, which loads after this sheet (server-injected, and linked
   by the generated product views). The copies that used to sit here were second
   definitions that agreed with it only by specificity and load order. */
@media(max-width:900px){.retail-trading-layout{grid-template-columns:minmax(0,1fr)}.retail-trading-layout .retail-trade-dialog:not(:modal){width:100%;max-width:none}.retail-trading-layout #retail-market{margin-top:0}}
.retail-asset-cell>div{display:inline-block;vertical-align:middle;max-width:170px}
.retail-asset-badge{display:inline-grid;place-items:center;vertical-align:middle;width:38px;height:38px;margin-right:var(--sp-3);background:var(--accent-wash);color:var(--accent-ink);border-radius:var(--r-lg);font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.retail-history-preview{min-width:120px;font-variant-numeric:tabular-nums}
.retail-history-preview svg{display:block;width:120px;height:36px;margin-top:var(--sp-1)}
.retail-history-preview[data-direction="up"]{color:var(--ok)}
.retail-history-preview[data-direction="down"]{color:var(--bad)}
.retail-chart-card{background:var(--bg-sunk);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6);margin:var(--sp-6) 0}
.retail-chart-card h3{font-size:var(--fs-lg);margin:0 0 var(--sp-4)}
/* 32px is the missing --fs-xl (2rem); the 52px ceiling has no token either.
   Literals kept until ui/tokens.css gains --fs-xl. */
.retail-product .retail-history-price{font-size:clamp(32px,5vw,52px);font-weight:var(--fw-semibold);letter-spacing:-.045em;line-height:var(--lh-tight);margin:0 0 var(--sp-2);color:var(--fg)}
.retail-product .retail-history-label{font-size:var(--fs-2xs);color:var(--fg-2);margin:0 0 var(--sp-5)}
.retail-chart-card [aria-label="Underlying one-month daily closing prices"]{min-height:170px}
.retail-chart-card [aria-label="Underlying one-month daily closing prices"]:not(:has(svg)){min-height:0}
.retail-product .retail-quote-summary>div{border-radius:var(--r-xl);padding:var(--sp-6);background:var(--bg-sunk)}
.retail-product .retail-quote-summary>div strong{font-size:clamp(24px,4vw,38px);letter-spacing:-.035em}
.retail-product .retail-quote-summary>div p{text-transform:uppercase;font-size:var(--fs-2xs);letter-spacing:.06em}
.retail-product #quote-form>button{width:100%}
.retail-product .retail-holdings h2{font-size:24px;letter-spacing:-.025em}
.retail-product .holdings-table td:nth-child(2){font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
@media(max-width:600px){.retail-chart-card{padding:var(--sp-4)}.retail-product .retail-chart-card .retail-history-stats{grid-template-columns:1fr 1fr}}
.retail-product{-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* 1080px is the missing narrow app container (--container-retail); --container
   is 1400px and --container-app is 1100px, so neither substitutes byte-for-byte. */
.retail-product .shell,.retail-product .funding-shell{max-width:1080px;padding:28px 28px var(--sp-12)}
.retail-product header h1{font-size:36px;letter-spacing:-.045em;line-height:var(--lh-tight);margin-bottom:var(--sp-2);text-wrap:balance}
.retail-product header .intro,.retail-product header>p{font-size:var(--fs-md)}
.retail-product header .notice,.retail-product header .orders-disclosure{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-2xs);color:var(--accent-ink);background:var(--accent-wash);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-chip)}
.retail-product button,.retail-product .btn{min-height:44px;border-radius:var(--r-lg);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-4);box-shadow:none;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.retail-product #connect,.retail-product #wallet-connect,.retail-product #quote-form>button{background:var(--fg);color:var(--bg-page);border-color:transparent;font-weight:var(--fw-semibold)}
.retail-product input,.retail-product select{min-height:var(--sp-12);border-radius:var(--r-lg);font-size:var(--fs-md)}
.retail-product .session{justify-content:flex-start;flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-2)}
.retail-product #access-description{max-width:60ch;color:var(--fg-2);font-size:var(--fs-xs)}
.retail-product #access-description:empty,.retail-product #message:empty{display:none}
.retail-product #message:empty{display:none}
.retail-product #retail-market,.retail-product .card,.retail-product .panel{border-radius:var(--r-xl);box-shadow:var(--e-1)}
.retail-product #retail-market{margin-top:28px;padding:var(--sp-6)}
.retail-product #retail-market[data-state="locked"]{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.retail-product #retail-market[data-state="locked"]>.retail-actions,
.retail-product #retail-market[data-state="locked"]>.retail-market-search,
.retail-product #retail-market[data-state="locked"]>.retail-market-scroll,
.retail-product #retail-market[data-state="locked"]>.retail-market-toolbar,
.retail-product #retail-market[data-state="locked"]>.retail-chart-caption,
.retail-product #retail-market[data-state="locked"]>details{display:none}
.retail-product #retail-market>h2{font-size:var(--fs-h3);letter-spacing:-.025em}
.retail-product .retail-session{border:0;padding:var(--sp-3) 0;background:none}
.retail-product summary{cursor:pointer;min-height:var(--sp-10);padding:var(--sp-2) 0;color:var(--fg-2);font-size:var(--fs-xs)}
.retail-product .retail-trade-dialog{width:min(480px,calc(100vw - var(--sp-6)));padding:var(--sp-5);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--e-3)}
.retail-product .retail-trade-dialog .retail-trade-heading{padding-top:0}
.retail-product .retail-trade-dialog .retail-trade-heading h2{font-size:var(--fs-h3);letter-spacing:-.025em}
.retail-product .retail-trade-dialog #workspace{margin-top:var(--sp-3)}
.retail-product .retail-trade-dialog .grid>section>h2{display:none}
.retail-product .retail-trade-heading+p:empty{display:none}
.retail-product .retail-trade-dialog .retail-wallet-balance{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.retail-product .retail-trade-dialog .retail-wallet-balance p{margin:0;font-size:var(--fs-2xs)}
.retail-product .retail-trade-dialog form{padding:var(--sp-4);border-radius:var(--r-xl);box-shadow:none}
.retail-product .retail-trade-dialog #quantity{font-size:var(--fs-h2);font-weight:var(--fw-medium);line-height:var(--lh-snug);height:var(--sp-16)}
.retail-product .retail-trade-dialog #quote-form>button{width:100%;margin-top:var(--sp-4);min-height:52px}
.retail-product .retail-trade-dialog #quote-form label{font-size:var(--fs-xs);color:var(--fg-2);margin-top:var(--sp-3)}
.retail-product .retail-trade-dialog .retail-quote-summary>div{border:0;border-radius:var(--r-xl);padding:var(--sp-5)}
.retail-product .retail-trade-dialog .retail-quote-summary strong{font-size:30px;letter-spacing:-.025em}
.retail-product .retail-trade-dialog #pricing-notice{font-size:var(--fs-2xs);line-height:var(--lh-relaxed);padding:var(--sp-3);border-radius:var(--r-lg);background:var(--accent-wash)}
.retail-product #wallet-login{max-width:480px;margin:var(--sp-8) 0;padding:28px}
.retail-product #wallet-login h2{font-size:var(--fs-h3);letter-spacing:-.025em}
.retail-product #wallet-login p{max-width:48ch;font-size:var(--fs-sm);color:var(--fg-2)}
.retail-product .view-status{max-width:1024px;margin-top:var(--sp-10);padding-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:baseline}
.retail-product footer{margin-top:36px;font-size:var(--fs-2xs);color:var(--fg-2);line-height:var(--lh-relaxed)}
.retail-product .order-record>small{display:block;margin:var(--sp-2) 0;color:var(--fg-2)}
.retail-product .order-record>a{display:inline-block;margin:var(--sp-1) var(--sp-4) var(--sp-2) 0;line-height:var(--lh-relaxed)}
.retail-product .order-evidence{margin-top:var(--sp-2);overflow-wrap:anywhere}
@media(max-width:600px){
 .retail-product .shell,.retail-product .funding-shell{padding:var(--sp-5) var(--sp-4) var(--sp-8)}
 .retail-product header h1{font-size:30px}
 .retail-product #retail-market{padding:var(--sp-4)}
 .retail-product .retail-trade-dialog{padding:var(--sp-3);border-radius:var(--r-xl)}
 .retail-product .view-status{gap:var(--sp-2);margin-inline:var(--sp-4)}
}
@media(prefers-reduced-motion:reduce){.retail-product button,.retail-product .btn{transition:none}}
/* Watchlist only. The nested daily price table shares .retail-market-table and
   must keep every column, scrolling inside its own .retail-market-scroll. */
@media(max-width:600px){
 .retail-product .retail-watchlist-table{min-width:0}
 .retail-product .retail-watchlist-table th:nth-child(3),.retail-product .retail-watchlist-table td:nth-child(3),
 .retail-product .retail-watchlist-table th:nth-child(4),.retail-product .retail-watchlist-table td:nth-child(4),
 .retail-product .retail-watchlist-table th:nth-child(5),.retail-product .retail-watchlist-table td:nth-child(5){display:none}
}
.wallet-trade-history{margin:var(--sp-6) 0;padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-surface);min-width:0}
.wallet-trade-history>div>details{padding:var(--sp-4) 0;border-top:1px solid var(--border);overflow-wrap:anywhere}
.wallet-trade-history summary{cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:var(--lh-relaxed)}
.wallet-trade-history>button,.wallet-trade-history>a{margin:var(--sp-3) var(--sp-3) 0 0}
.retail-token-import{margin:var(--sp-3) 0 0;text-align:left}
.retail-token-import[hidden]{display:none}
.retail-token-import>button{margin:0;padding:0;min-height:0;font-size:var(--fs-xs);background:transparent;border-color:transparent;color:var(--accent-ink);font-weight:var(--fw-semibold)}
.retail-token-import>button:hover:not(:disabled){text-decoration:underline;background:transparent}
.retail-token-import>p:empty{display:none}
.retail-product #quote-form .retail-quote-summary{padding:var(--sp-3) 0 0;margin:var(--sp-3) 0 0;gap:var(--sp-2);border:0}
.retail-product #quote-form .retail-fee-breakdown{padding:var(--sp-3) 0;margin:0;gap:var(--sp-2) var(--sp-3)}
.retail-product #quote-form .retail-fee-breakdown dt,
.retail-product #quote-form .retail-fee-breakdown dd{padding:0;border:0;font:var(--fs-2xs)/var(--lh-normal) var(--sans);letter-spacing:var(--ls-normal);text-transform:none}
.retail-product .retail-trade-dialog #quote-panel{padding-top:var(--sp-3)}
.retail-product .retail-trade-dialog #settlement-controls{padding:var(--sp-2) 0}
/* The ticket mirrors the controller's status in its live region. Keep a single
   visible connection action and status; original hooks still drive the flow. */
.retail-product:has(.retail-trading-layout) #access-description,
.retail-product:has(.retail-trading-layout) #message,
.retail-product:has(.retail-trading-layout) .session #connect{display:none}
@media(max-width:600px){
 .retail-product .retail-watchlist-table{table-layout:fixed;width:100%}
 .retail-product .retail-watchlist-table th:nth-child(6),.retail-product .retail-watchlist-table td:nth-child(6){display:none}
 .retail-product .retail-watchlist-table th:first-child{width:38%}
 .retail-product .retail-watchlist-table th:nth-child(2){width:34%}
 .retail-product .retail-watchlist-table th:last-child{width:28%}
 .retail-product .retail-watchlist-table td{overflow-wrap:anywhere}
 .retail-product .retail-watchlist-table td:last-child button{padding:var(--sp-2);font-size:var(--fs-2xs);white-space:nowrap;max-width:100%;min-width:0}
 .retail-product .retail-asset-cell>div{max-width:100%}
}

/* Activity: one row per trade; a row opens its stepper and receipts. */
.activity-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.wallet-trade-history .seg button[aria-pressed="true"]{background:var(--bg-surface);color:var(--fg);box-shadow:var(--e-1)}
.activity-row>summary{display:grid;grid-template-columns:9.5rem 3rem 4rem minmax(2.5rem,1fr) minmax(4rem,1fr) 6.5rem;gap:var(--sp-3);align-items:center;list-style:none;font-weight:var(--fw-regular);font-variant-numeric:tabular-nums}
.activity-row>summary::-webkit-details-marker{display:none}
.activity-row>summary>.pill{justify-self:end}
.activity-row time{color:var(--fg-muted);font-size:var(--fs-2xs)}
.activity-side,.activity-token{font-weight:var(--fw-semibold)}
.activity-series{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-regular);color:var(--fg-muted)}
.activity-num{text-align:right}
.activity-body{padding-top:var(--sp-3)}
.activity-pager[hidden]{display:none!important}
.activity-pager{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--fg-muted)}
@media(max-width:600px){.activity-row>summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}.activity-row time{flex-basis:100%}.activity-row>summary>.pill{margin-left:auto}}

/* Ticket controls, 2 Oct (owner: "cleaner and more consistent"). One control
   height (--sp-10), one radius per kind (segments --r-sm in a --r-md track,
   chips and token pickers --r-pill), canonical .seg look for every toggle, and
   the brand primary for the trade button. Overrides the blanket
   ".retail-product button" rule above, which made segments separate boxes. */
.retail-product .seg button,
.retail-product .retail-trade-heading .retail-actions button{min-height:0;height:calc(var(--sp-10) - var(--sp-2));margin:0;padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-muted);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-decoration:none;box-shadow:none}
.retail-product .seg button.on,.retail-product .seg button[aria-pressed=true],
.retail-product .retail-trade-heading .retail-actions button[aria-pressed=true]{background:var(--bg-surface);color:var(--fg);font-weight:var(--fw-semibold);text-decoration:none;box-shadow:var(--e-1)}
.retail-product .retail-trade-heading .retail-actions{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);background:var(--bg-sunk);border:1px solid var(--border);border-radius:var(--r-md)}
.retail-product .retail-trade-heading .retail-actions p{display:none}
.retail-product .retail-trade-heading h2{font-size:var(--fs-h3)}
/* Token picker and the cash chip: same height, shape and avatar. */
.retail-product .select-menu.retail-token-selector{flex:none;max-width:60%;min-height:0;margin:0 0 0 auto;background:none;border:0;border-radius:0}
.retail-product .select-menu-button{min-height:var(--sp-10);height:var(--sp-10);padding:0 var(--sp-3) 0 var(--sp-1);border-radius:var(--r-chip);font-size:var(--fs-sm);font-weight:var(--fw-semibold);background:var(--bg-surface)}
.retail-product .select-menu-list [role=option]{min-height:0}
.retail-product .retail-token-badge{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--sp-10);padding:0 var(--sp-4) 0 var(--sp-1);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--bg-surface);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);white-space:nowrap;margin-left:auto}
/* The amount and the picker share one baseline row. */
.retail-product .retail-swap-note-row{min-height:var(--sp-12)}
.retail-product .retail-swap-note-row #quantity,.retail-product .retail-swap-note-row .retail-usd-amount{min-height:0;height:var(--sp-12);line-height:var(--lh-tight);font-weight:var(--fw-semibold)}
.retail-product .retail-swap-amount{font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.retail-product .retail-swap-note-row #quantity:focus-visible,.retail-product .retail-swap-note-row .retail-usd-amount:focus-visible{outline:none;box-shadow:none;border-bottom:2px solid var(--accent-ink);border-radius:0}
/* Unit toggle and quick sizes on one row; chips are compact pills. */
.retail-product .retail-size-chips{flex-wrap:nowrap;gap:var(--sp-1)}
.retail-product .retail-size-chips .btn{margin:0;min-height:0;height:calc(var(--sp-10) - var(--sp-2));min-width:var(--sp-10);padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-chip);background:transparent;color:var(--fg-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.retail-product .retail-size-chips .btn:hover:not(:disabled){border-color:var(--border-strong);color:var(--fg);transform:none;box-shadow:none}
.retail-product .retail-size-chips .btn:disabled{opacity:.45}
.retail-product .retail-swap-card .retail-panel-balance{margin:var(--sp-3) 0 0;color:var(--fg-muted)}
/* Direction switch: a round button that bridges the two cards. */
.retail-product .retail-direction-switch{display:inline-grid;place-items:center;flex:none;width:var(--sp-10);height:var(--sp-10);min-width:0;min-height:0;padding:0;margin:calc(var(--sp-5) * -1) 0;border:var(--sp-1) solid var(--bg-surface);border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--fg)}
.retail-product .retail-direction-switch svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.retail-product .retail-direction-switch:hover:not(:disabled){background:var(--bg-track)}
/* The trade button is the brand primary, as in the header (was --fg: navy in
   light, near-white in dark). */
.retail-product #quote-form>button,.retail-product #quote-form .retail-trade-primary{background:var(--accent-fill);color:var(--accent-on-fill);border-color:var(--accent-fill);border-radius:var(--r-md);font-weight:var(--fw-semibold)}
.retail-product #quote-form>button:hover:not(:disabled),.retail-product #quote-form .retail-trade-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
/* J3 (4 Oct): a button the reader cannot use (market closed, size refused) is
   the neutral disabled control, as base.css draws a disabled field; green stays
   for an action. A trade in progress (aria-busy) reads as working, not as a
   faded action (owner, 4 Oct): full-strength text on the sunk ground. */
.retail-product #quote-form .retail-trade-primary:disabled:not([aria-busy=true]){opacity:1;background:var(--bg-track);border-color:var(--border);color:var(--fg-2)}
.retail-product #quote-form .retail-trade-primary[aria-busy=true]{opacity:1;background:var(--bg-sunk);border-color:var(--border);color:var(--fg)}
.retail-product .retail-explore-toggle{display:inline-flex;align-items:center;min-height:0;height:calc(var(--sp-10) - var(--sp-2));margin:var(--sp-3) 0 var(--sp-4);padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-chip);background:transparent;color:var(--fg-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
@media (prefers-reduced-motion:reduce){.retail-product .retail-direction-switch{transition:none}}

/* Ticket as a swap box (owner, 3 Oct, section E). Pay and receive are both
   editable; the balance and 25% · 50% · Max sit in the card spent from; one
   rate line opens fee, network fee, the held price's time and the route. */
.retail-product .retail-swap-note-row{display:flex;align-items:center;gap:var(--sp-2)}
.retail-product .retail-swap-note-row .retail-usd-amount{flex:1;width:auto;max-width:none;min-width:0;height:var(--sp-12);font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--fg);font-variant-numeric:tabular-nums}
.retail-product .retail-swap-note-row .retail-usd-amount::placeholder{color:var(--fg-disabled)}
.retail-product .retail-swap-note-row[data-state=loading] .retail-usd-amount{background:linear-gradient(90deg,var(--bg-track),var(--bg-sunk),var(--bg-track));background-size:200% 100%;animation:ui-loading-pulse 1.2s ease-in-out infinite;border-radius:var(--r-sm)}
.retail-swap-approx,.retail-swap-currency{flex:none;font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--fg)}
.retail-swap-approx{font-size:var(--fs-h3);color:var(--fg-muted)}
.retail-swap-note-row[data-state=indicative] .retail-swap-currency{color:var(--fg)}
/* J4 (4 Oct): closed market, the amount is an estimate: "Est." and a muted figure. */
.retail-product .retail-swap-note-row[data-state=estimate] :is(.retail-usd-amount,.retail-swap-currency){color:var(--fg-muted)}
.retail-product .retail-swap-note-row[data-state=estimate] .retail-swap-approx{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.retail-size-chips[hidden]{display:none}
.retail-swap-approx[hidden]{display:none}
.retail-product .retail-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-3);min-height:calc(var(--sp-10) - var(--sp-2))}
.retail-product .retail-card-foot:has(.retail-panel-balance:empty):not(:has(.retail-size-chips:not([hidden]))){display:none}
.retail-product .retail-swap-card .retail-card-foot .retail-panel-balance{margin:0;color:var(--fg-muted)}
.retail-product .retail-panel-balance:empty{display:none}
.retail-product .retail-usd-converted{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--fg-2)}
.retail-product .retail-swap-card .retail-size-warning{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--bad)}
.retail-product .retail-swap-card .retail-size-warning[hidden]{display:none}
/* Rate line + details (E14, E15). */
.retail-product .retail-ticket-details{margin:var(--sp-3) 0 0;padding:0;border:0;background:none;box-shadow:none}
.retail-product .retail-ticket-details[hidden]{display:none}
.retail-product .retail-ticket-details>summary{display:flex;justify-content:flex-start;align-items:center;gap:var(--sp-2);min-height:var(--sp-8);padding:0 var(--sp-1);cursor:pointer;list-style:none;font-size:var(--fs-xs);color:var(--fg-2)}
.retail-product .retail-rate{min-height:0;height:auto;margin:0;padding:var(--sp-1) 0;border:0;background:none;color:var(--fg);font-size:var(--fs-xs);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;box-shadow:none}
.retail-product .retail-rate:hover:not(:disabled){background:none;text-decoration:underline;transform:none;box-shadow:none}
.retail-details-dot{flex:none;width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);background:var(--warn)}
.retail-details-dot[hidden]{display:none}
.retail-product .retail-ticket-details dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-4);margin:var(--sp-2) 0 0;padding:var(--sp-3);border:1px solid var(--border-subtle);border-radius:var(--r-md);font-size:var(--fs-xs)}
.retail-product .retail-ticket-details dt,.retail-product .retail-ticket-details dd{padding:0;border:0}
.retail-product .retail-ticket-details dt{margin:0;color:var(--fg-muted);font-weight:var(--fw-regular);text-transform:none;letter-spacing:normal}
.retail-product .retail-ticket-details dd{margin:0;text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
.retail-product .retail-ticket-details dt[hidden],.retail-product .retail-ticket-details dd[hidden]{display:none}
/* The held price's time as a thin bar along the bottom of the button (E19). */
.retail-product #quote-form .retail-trade-primary{position:relative;overflow:hidden}
.retail-product #quote-form .retail-trade-primary.is-held::after{content:'';position:absolute;left:0;bottom:0;height:var(--sp-1);width:calc(var(--held,1) * 100%);background:color-mix(in srgb,var(--accent-on-fill) 55%,transparent);transition:width 1s linear}
/* Status (only when it changes what to do) and the finished trade (E20). */
.retail-product .retail-ticket-status{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--fg-2);text-align:center}
.retail-product .retail-ticket-status[hidden]{display:none}
.retail-product .retail-trade-success{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);text-align:center;font-variant-numeric:tabular-nums}
.retail-product .retail-trade-success[hidden]{display:none}
.retail-product .retail-trade-success a{font-weight:var(--fw-medium);color:var(--link)}
.retail-product .retail-token-import{text-align:center}
/* Price alerts in a modal opened by the price block's bell (E21). */
.retail-alerts-modal{width:min(calc(var(--sp-20) * 5),calc(100vw - var(--sp-8)));padding:var(--sp-5)}
.retail-alerts-modal .retail-alerts-close{float:right;margin:0}
.retail-alerts-modal .price-alerts{margin:0;padding:0;border:0}
.retail-alerts-modal .price-alerts>summary{pointer-events:none;list-style:none;font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.retail-alerts-modal .price-alerts>summary::-webkit-details-marker,.retail-alerts-modal .price-alerts>summary::after{display:none}
.retail-alerts-bell svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.retail-product #quote-form .retail-trade-primary.is-held::after{transition:none}.retail-product .retail-swap-note-row[data-state=loading] .retail-usd-amount{animation:none}}
/* One details row per ticket (E15): the signed terms' fee and network fee are
   in it, so the controller's own "Price details" breakdown is not repeated. */
.retail-product .retail-public-ticket .retail-price-details{display:none}
/* The receipt reads as label/value rows inside the narrow ticket. */
.retail-product .st-receipt dl{grid-template-columns:minmax(0,1fr)}
.retail-product .st-receipt dt{text-transform:none;letter-spacing:normal;font-size:var(--fs-xs);font-weight:var(--fw-regular)}
/* H1 (4 Oct): Buy / Sell is a full-width two-part control across the top of
   the ticket; no empty row or rule under it. */
.retail-product .retail-trade-dialog .retail-trade-heading{display:block;border-bottom:0;padding:0;margin:0 0 var(--sp-4)}
.retail-product .retail-trade-heading .retail-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;box-sizing:border-box}
.retail-product .retail-trade-heading .retail-actions button{width:100%;justify-content:center;height:var(--sp-10);font-size:var(--fs-sm)}
/* H3: "$340.36" as one figure, the unit as a plain label. */
.retail-product .retail-swap-money{flex:1;display:flex;align-items:center;min-width:0;gap:0}
.retail-product .retail-swap-money .retail-swap-currency{margin:0}
.retail-product .retail-token-badge{padding:0 var(--sp-3);gap:0}
/* H5: a data notice is the word "Delayed" beside the rate; the chevron sits next to it. */
.retail-product .retail-details-delayed{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--warn)}
.retail-product .retail-details-delayed[hidden]{display:none}
.retail-product .retail-ticket-details>summary{gap:var(--sp-2)}
.retail-product .retail-ticket-details>summary::after{margin-left:0}
/* K6 (4 Oct): the alerts dialog in the institutional style: a plain title (no
   disclosure chevron), one control height, condition · price · Add on one row
   at every width, the auto-quote option below. */
.retail-product .retail-alerts-modal .price-alerts>summary{min-height:0;padding:0;font-weight:var(--fw-semibold);color:var(--fg)}
.retail-product .retail-alerts-modal .price-alerts>summary::after{display:none}
.retail-product .retail-alerts-modal .price-alerts-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);align-items:stretch}
.retail-product .retail-alerts-modal .price-alerts-form :is(.select-menu-button,input[type=number],button[type=submit]){box-sizing:border-box;height:var(--sp-10);min-height:0;margin:0}
.retail-product .retail-alerts-modal .price-alerts-form input[type=number]{width:100%}
.retail-product .retail-alerts-modal .price-alerts-auto{grid-column:1/-1;font-size:var(--fs-sm)}
.retail-product .retail-alerts-modal .retail-alerts-close{float:none;position:absolute;top:var(--sp-5);right:var(--sp-5)}
.retail-product .retail-alerts-modal .price-alerts>summary{min-height:var(--sp-10);display:flex;align-items:center;margin-bottom:var(--sp-3)}