/* Product shell: the header, section tabs and footer from the approved
   investor-demo design, on our tokens. Loaded after a page's own sheets; every
   property a page sheet might set on a bare `nav` (demo.css does) is stated
   here, so the shell looks the same on every page. */

/* The serif is for the page title only (I30, 4 Oct); every heading below it
   is the sans at 600. */
main h1{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
main :is(h2,h3,h4){font-family:var(--sans);font-weight:var(--fw-semibold);text-wrap:balance}

/* Full-bleed band inside a page's centred container, without a sideways scroll:
   the colour is painted outwards and clipped, the box keeps its width. */
/* The band is painted outwards with a shadow and clipped to the box's height:
   a shadow never widens the page's scroll area. */

.site-top{container-type:inline-size;position:sticky;top:0;z-index:20;margin:0 0 var(--sp-8);background:var(--bg-page);box-shadow:0 0 0 100vmax var(--bg-page);clip-path:inset(0 -100vmax);border-bottom:1px solid var(--border);border-image:linear-gradient(var(--border) 0 0) 0 0 1 0/0 0 1px 0/0 100vmax}
.site-top-in{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sp-2) var(--sp-4);min-height:var(--sp-16)}
/* One row on desktop: the sections give way (and scroll) before the actions wrap. */
.site-top-in>.product-primary-nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.site-top-in>.product-primary-nav::-webkit-scrollbar{display:none}
.site-brand{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--fg);text-decoration:none;flex:none}
.site-logo{display:block;width:calc(var(--sp-20) + var(--sp-1));height:var(--sp-6);background:currentColor;mask:url('/logos/tblocks-wordmark.svg') left center/contain no-repeat;-webkit-mask:url('/logos/tblocks-wordmark.svg') left center/contain no-repeat}
.site-env{font:600 var(--fs-micro)/1 var(--sans);color:var(--warn);background:var(--warn-bg);border-radius:var(--r-chip);padding:var(--sp-1) var(--sp-2);white-space:nowrap;text-decoration:none}
.site-env:hover{text-decoration:underline}

.product-primary-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:0;padding:0;border:0;font:500 var(--fs-sm)/1.2 var(--sans);letter-spacing:normal;text-transform:none;justify-content:flex-start}
.product-primary-nav a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);color:var(--fg-2);font-weight:500;text-decoration:none;white-space:nowrap}
.product-primary-nav a:hover{background:var(--bg-sunk);color:var(--fg)}
/* Colour never carries meaning alone (BRAND.md §2): the current page is also
   heavier and underlined, so it survives forced colours and monochrome print. */
.product-primary-nav a[aria-current=page],
.product-subnav a[aria-current=page]{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--fg);text-decoration-thickness:2px;text-underline-offset:6px}

.site-top-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
/* The theme control keeps its words for assistive technology and shows an icon. */
.site-top-right #theme{width:var(--sp-10);min-width:0;padding:0;font-size:0;border-color:transparent;background:transparent;color:var(--fg-2)}
.site-top-right #theme::before{content:"";width:var(--sp-5);height:var(--sp-5);background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.site-top-right #theme:hover{background:var(--bg-sunk);color:var(--fg)}
.site-net{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--sp-8);padding:0 var(--sp-3);border:1px solid var(--border-subtle);border-radius:var(--r-chip);background:var(--bg-sunk);color:var(--fg-2);font:600 var(--fs-2xs)/1 var(--sans);white-space:nowrap}
.site-net .dot{color:var(--ok)}
.site-net[data-state=wrong]{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.site-net[data-state=wrong] .dot{color:var(--bad)}
.site-wallet{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Page sheets restyle .btn; the header's primary action keeps the product fill. */
.site-top .btn.pri.site-wallet{background:var(--fg);border-color:var(--fg);color:var(--bg-page)}
.site-top .btn.pri.site-wallet:hover{background:var(--fg-2);border-color:var(--fg-2);color:var(--bg-page)}

.product-subnav{display:flex;justify-content:flex-start;gap:var(--sp-1);flex-wrap:wrap;margin:calc(-1 * var(--sp-8)) 0 var(--sp-8);padding:var(--sp-2) 0;border-bottom:1px solid var(--border);font:500 var(--fs-sm)/1.2 var(--sans);letter-spacing:normal}
.product-subnav a{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);color:var(--fg-2);font-weight:500;box-shadow:none;text-decoration:none}
.product-subnav a:hover{background:var(--bg-sunk)}

/* Pages differ in column width, so the header fits itself to its own width, not
   the viewport's: tighter sections first, then the network pill yields. */
@container (max-width:1180px){.product-primary-nav a{padding-inline:var(--sp-2)}.site-top-in{column-gap:var(--sp-3)}}
@container (max-width:1060px){.site-net{display:none}}
/* Narrower than the full header: the sections move to their own row and swipe
   sideways, instead of a menu button that would need a script on every page. */
@media(max-width:1023px){
 .site-top-in{flex-wrap:wrap;padding-top:var(--sp-2)}
 .product-primary-nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-3))}
 .product-primary-nav::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
 .site-net{display:none}
 .site-top-in{column-gap:var(--sp-3)}
 .site-wallet{padding-inline:var(--sp-3)}
}

/* Footer: every disclosure lives here, once. */
.site-foot{margin-top:var(--sp-16);background:var(--bg-page);box-shadow:0 0 0 100vmax var(--bg-page);clip-path:inset(0 -100vmax);border-top:1px solid var(--border);border-image:linear-gradient(var(--border) 0 0) 1 0 0 0/1px 0 0 0/0 100vmax;color:var(--fg-2);font:var(--fs-sm)/1.5 var(--sans)}
.site-foot-in{display:grid;gap:var(--sp-6);max-width:var(--page-frame);margin-inline:auto;padding:var(--sp-10) var(--sp-5) var(--sp-6)}
.site-foot-cols{display:grid;grid-template-columns:2fr repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.site-foot-brand{display:grid;gap:var(--sp-4);align-content:start}
.site-foot-brand p{margin:0;max-width:34ch;color:var(--fg-muted)}
.site-foot h4{margin:0 0 var(--sp-3);font:700 var(--fs-2xs)/1.2 var(--sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-muted)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.site-foot a{color:var(--fg-2);text-decoration:none}
.site-foot a:hover{color:var(--fg);text-decoration:underline}
.site-status{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs)}
.site-status .dot{color:var(--fg-muted)}
/* The dot follows /api/demo/status (site-header.js); neutral until it answers. */
.site-status[data-state=ok] .dot{color:var(--ok)}
.site-status[data-state=warn] .dot{color:var(--warn)}
.site-status[data-state=bad] .dot{color:var(--bad)}
.site-legal{margin:0;max-width:none;padding-top:var(--sp-6);border-top:1px solid var(--border);font-size:var(--fs-xs);line-height:1.65;color:var(--fg-2)}
.site-legal b{color:var(--fg)}
.site-foot-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center;justify-content:space-between;font-size:var(--fs-xs);color:var(--fg-muted)}
.site-foot-bottom nav{display:flex;gap:var(--sp-5);padding:0;border:0;font:inherit;letter-spacing:normal}
.site-foot-bottom a{color:var(--fg-muted)}
@media(max-width:640px){.site-foot-brand{grid-column:1/-1}}
@media(max-width:640px){.site-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* One page frame on every product page (2 Oct). Pages had six competing
   wrappers (.shell, .funding-shell, .landing-shell across banking, demo,
   retail-shell, retail-reference, retail-focus and admin sheets) with 20, 24,
   28 or 32 px gutters, a 20-28 px band above the sticky header, and a footer
   that sat 20 px inside a wrapper that already had a gutter. The frame is the
   landing page's: the 1100 px app container, a 20 px gutter (16 px on a phone),
   the header flush with the top, and the footer on the same edges.
   `:root:root body` outranks every page sheet without !important. */
:root{--page-gutter:var(--sp-5);--card-pad:var(--sp-6);--page-frame:var(--container-app)}
@media(max-width:640px){:root{--page-gutter:var(--sp-4);--card-pad:var(--sp-5)}}
:root:root body :is(.shell,.funding-shell,.landing-shell){padding:0 var(--page-gutter)}
/* Every page, Trade included, uses this one frame (D5, 2 Oct):
   the trade and admin wrappers' own widths are overridden here. --page-frame is
   resolved once on :root, so admin-dashboard.css raising --container-app to
   1440 px on .admin-product does not widen it. */
:root:root body :is(.shell,.funding-shell,.landing-shell){max-width:var(--page-frame);margin-inline:auto}
:root:root body .site-foot{margin-top:var(--sp-12);padding:0}
:root:root body .site-foot-in{padding-inline:var(--page-gutter)}
/* One top spacing (D6): the page's first line sits the header's (or the
   subnav's) bottom margin below it, on every page. Page headers had added
   12-40 px of their own (faucet, demo, admin hero, asset). */
:root:root body :is(.shell,.funding-shell,.landing-shell) header:has(h1):not(.site-top *){padding-top:0;margin-top:0}
:root:root body :is(.shell,.funding-shell,.landing-shell) header:has(h1):not(.site-top *) h1{margin-top:0}
:root:root body .landing-shell .asset-main{padding-top:0}
/* One heading scale (D7): page title, section heading, card heading. Pages
   had titles at 36 and 48 px, section headings at 20 and 36 px, and card
   headings from 14 px serif to 20 px sans. The home hero, the ticket, stat
   labels and list-item headings keep their own sizes. */
:root{--heading-page:var(--fs-h2);--heading-section:var(--fs-h3);--heading-card:var(--fs-lg)}
:root:root body :is(.shell,.funding-shell,.landing-shell) header:has(h1):not(.site-top *) h1:not(.hero-copy *){font:var(--fw-semibold) var(--heading-page)/var(--lh-tight) var(--serif);letter-spacing:var(--ls-tight)}
:root:root body :is(.shell,.funding-shell,.landing-shell) :is(section,.shead,.admin-section__heading,.hw-flow-head)>h2:not(:is(.card,.panel,.retail-trading-layout,.coming) *){font:var(--fw-semibold) var(--heading-section)/1.3 var(--sans);letter-spacing:normal}
:root:root body #public-paper-history h2,:root:root body :is(.shell,.funding-shell,.landing-shell) :is(.card>h2,.card .admin-section__heading>:is(h2,h3),.retail-backing>h3,.retail-assets>h3):not(.retail-trading-layout .retail-trade-dialog *){font:var(--fw-semibold) var(--heading-card)/1.3 var(--sans);letter-spacing:normal}
/* A footer inside a wrapper already has the wrapper's gutter. */
:root:root body :is(.shell,.funding-shell)>.site-foot .site-foot-in{padding-inline:0}

/* Disclosures: one trailing chevron that turns when open, instead of the
   browser's leading triangle (which sat flush against bordered boxes and
   differed per browser). Rows that are their own layout keep theirs. */
details:not(.activity-row):not(.flow-panel)>summary{list-style:none}
details:not(.activity-row):not(.flow-panel)>summary::-webkit-details-marker{display:none}
details:not(.activity-row):not(.flow-panel)>summary::after{content:"";display:inline-block;width:1em;height:1em;margin-left:var(--sp-2);vertical-align:-.15em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-fast) var(--ease)}
details[open]:not(.activity-row):not(.flow-panel)>summary::after{transform:rotate(180deg)}

/* A form inside a padded card adds no second indent (the saved-holdings lookup
   on Portfolio and Orders indented its fields a level below their heading). */
.funding-form .funding-form{padding:0}
/* The lookup's status line and results take no grid row until they have content. */
#public-paper-history>:is(p,div):empty{display:none}

/* Header controls are the same size on every page: the landing page drew
   them 35 px tall with an 8 px radius, the retail pages 44 px with 12 px, and
   the wider button pushed "Connect wallet" onto its own row on a phone. */
:root:root body .site-top-right :is(.btn,button){min-height:var(--sp-10);margin:0;border-radius:var(--r-md);font-size:var(--fs-xs)}
:root:root body .site-top-right .site-wallet{padding:0 var(--sp-4)}
@media(max-width:640px){:root:root body .site-top-right .site-wallet{padding:0 var(--sp-3)}}

/* One inner padding for cards on investor pages: they were 18 (retail
   reference), 20 (base) and 28 px (wallet sign-in) side by side. The trading
   ticket keeps its own layout. */
:root:root body.retail-product :is(.card,#wallet-login):not(.retail-trading-layout *):not(.saved-lookup>*){padding:var(--card-pad)}

/* A text input without a type attribute is a text input, but base.css styles
   only input[type=text|email|number|search|password]; typeless ones (admin
   record search, eligibility wallet, asset forms) rendered as raw browser
   boxes. Same values as base.css, which is byte-identical across the four
   repos and is not edited here. */
input:not([type]){width:100%;font-family:var(--sans);font-size:var(--fs-sm);color:var(--fg);background:var(--bg-sunk);border:1px solid var(--border-control,var(--border));border-radius:var(--r-md);padding:calc(var(--sp-2) + 1px) var(--sp-3);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}

/* Shell pass, 2 October (docs/UI-REFINEMENT-TODO-2026-10-02.md A10, A14, C11-C14).
   Phone and tablet header: always two rows, the same on every page. Row one is
   the brand, the environment pill and the actions; row two the sections. Page
   sheets restyled the header's buttons (Verify identity and Get Test USD drew a
   larger Connect wallet that dropped to a third row). */
@media(max-width:1023px){
 :root:root body .site-top-in{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"brand env . actions" "nav nav nav nav";align-items:center;column-gap:var(--sp-2);row-gap:0;padding-top:var(--sp-2)}
 :root:root body .site-top-in>.site-brand{grid-area:brand}
 :root:root body .site-top-in>.site-env{grid-area:env}
 :root:root body .site-top-in>.site-top-right{grid-area:actions;margin:0}
 /* The section row runs edge to edge (it swipes), its first label on the page's left edge. */
 :root:root body .site-top-in>.product-primary-nav{grid-area:nav;margin-inline:calc(-1 * var(--page-gutter));padding-inline:calc(var(--page-gutter) - var(--sp-3))}
 :root:root body .site-top-right .site-wallet{font-size:var(--fs-xs);min-height:var(--ctl-md);padding:0 var(--sp-3)}
}
/* The section row swipes on a phone: the edge with more sections fades
   (site-header.js sets data-more), so a cut-off item reads as "swipe". */
.product-primary-nav[data-more=end]{-webkit-mask-image:linear-gradient(to right,var(--fg) calc(100% - var(--sp-16)),transparent);mask-image:linear-gradient(to right,var(--fg) calc(100% - var(--sp-16)),transparent)}
.product-primary-nav[data-more=start]{-webkit-mask-image:linear-gradient(to left,var(--fg) calc(100% - var(--sp-16)),transparent);mask-image:linear-gradient(to left,var(--fg) calc(100% - var(--sp-16)),transparent)}
.product-primary-nav[data-more=both]{-webkit-mask-image:linear-gradient(to right,transparent,var(--fg) var(--sp-16),var(--fg) calc(100% - var(--sp-16)),transparent);mask-image:linear-gradient(to right,transparent,var(--fg) var(--sp-10),var(--fg) calc(100% - var(--sp-16)),transparent)}
/* A wallet on another network says so on the button (the Sepolia pill is gone). */
:root:root body .site-top .site-wallet[data-state=wrong]{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
/* One page ground (I29, 4 Oct): header, content and footer share --bg-page,
   separated by hairlines, not white/grey/white bands. */
:root:has(.site-foot),:root:has(.site-foot) body{background:var(--bg-page)}
/* One button scale (A14): .sm --ctl-sm 32, default --ctl-md 40, .lg --ctl-lg 48,
   all --r-md. The retail sheets drew every button 36 px with a 6 px radius
   (retail-reference.css) or 44 px with 12 px (retail-focus.css); same selector,
   later file. Controls with their own geometry (ticket segments, chips, the
   trade button, icon buttons) keep it through their more specific rules. */
.retail-product button,.retail-product .btn{min-height:var(--ctl-md);border-radius:var(--r-md)}
.retail-product .btn.sm{min-height:var(--ctl-sm)}
.retail-product .btn.lg{min-height:var(--ctl-lg)}
/* Page sheets bolded the footer links on some pages (Verify identity). */
:root:root body .site-foot a{font-weight:var(--fw-regular)}
/* D10 (2 Oct): on a phone the section row fits without scrolling. "Activity"
   is a section of Portfolio (and stays in the footer), so the row keeps four
   items, spread across the width; below about 380 px it still swipes. */
/* I14 (4 Oct): the four labels sit together from the page's left edge with
   the page gutter on both sides, instead of spread to the screen edge; a
   narrower screen swipes, snapping to whole labels. */
@media(max-width:480px){
 :root:root body .product-primary-nav a[href="/portfolio#trading-history"]{display:none}
 :root:root body .site-top-in>.product-primary-nav{justify-content:flex-start;gap:0;padding-inline:calc(var(--page-gutter) - var(--sp-2));scroll-padding-inline:calc(var(--page-gutter) - var(--sp-2));scroll-snap-type:x proximity;min-width:0;overflow-x:auto;scrollbar-width:none}
 :root:root body .product-primary-nav a{padding-inline:var(--sp-2);scroll-snap-align:start}
}
/* Narrow phones (D10): the first header row needed 388 px, and more with the
   network picker (3 Nov). At 420 px and below the logo shows only the
   wordmark's leading T (same mask, cropped), and the theme toggle, network
   picker and wallet button take the small control size. */
@media(max-width:420px){
 :root:root body .site-top-in>.site-brand .site-logo{width:var(--sp-4);-webkit-mask-size:auto 100%;mask-size:auto 100%}
 :root:root body .site-top-right #theme{width:var(--ctl-sm);min-height:var(--ctl-sm)}
 :root:root body .site-top-right .site-wallet{min-height:var(--ctl-sm);padding:0 var(--sp-2)}
}

/* Wallet chip and menu (E23, 3 Oct): dot · short address · network. */
.site-top-right{position:relative}
:root:root body .site-top-right .site-wallet.site-wallet-chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);background:var(--bg-surface);border:1px solid var(--border);color:var(--fg);font-weight:var(--fw-semibold)}
:root:root body .site-top-right .site-wallet.site-wallet-chip:hover{border-color:var(--border-strong)}
.site-wallet-dot{width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);background:var(--ok);flex:none}
.site-wallet-net{color:var(--fg-muted);font-weight:var(--fw-medium);padding-left:var(--sp-2);border-left:1px solid var(--border)}
@media(max-width:480px){.site-wallet-net{display:none}}
.site-wallet-menu{position:fixed;z-index:var(--z-dropdown);min-width:calc(var(--sp-16) * 3.5);max-width:calc(100vw - var(--sp-4));display:grid;padding:var(--sp-1);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e-2);font-size:var(--fs-sm)}
.site-wallet-menu-head{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) 0;font-variant-numeric:tabular-nums}
.site-wallet-menu-head span{color:var(--fg-muted)}
.site-wallet-balance{margin:0;padding:var(--sp-1) var(--sp-3) var(--sp-2);color:var(--fg-2);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border)}
.site-wallet-item{appearance:none;display:block;width:100%;margin:0;padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--r-sm);background:none;color:var(--fg);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.site-wallet-item:hover,.site-wallet-item:focus-visible{background:var(--bg-sunk)}
/* Copy button after an address (E24). */
.copy-btn{appearance:none;display:inline-grid;place-items:center;width:var(--sp-6);height:var(--sp-6);margin:0 0 0 var(--sp-1);padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--fg-muted);cursor:pointer;vertical-align:middle}
.copy-btn:hover{background:var(--bg-sunk);color:var(--fg)}
.copy-btn svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:480px){:root:root body .site-top-right .site-wallet.site-wallet-chip{gap:var(--sp-1);padding:0 var(--sp-2)}}
@media(max-width:400px){.site-wallet-dot{display:none}}

/* I15: operator consoles and procedures stay hidden until the page holds an
   operator credential (ui/operational-evidence.js); their display rules must
   not undo the hidden attribute. */
[data-operator-only][hidden]{display:none}

/* One focus ring on the product pages (J30): 2 px in the focus ink, 2 px out.
   Overrides the older page-level rings (.admin-product 4 px, .retail-product
   3 px, both accent green) and the segmented control's 0 offset, which drew
   the chart Line/Candles ring on the button edge. */
:root[data-product="tblocks-ibkr"] :is(.admin-product,.retail-product) :focus-visible,
:root[data-product="tblocks-ibkr"] .seg button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}

/* Instrument tiles (Public Assets Kit 1.2.1, 4 Oct): ui/asset-tile.js draws
   the SVG and colours it from tokens.css; the host only sizes it. A flag sits
   beside the exchange name, never inside the tile. */
.asset-tile-host{display:inline-flex;flex:none;line-height:0;vertical-align:middle}
.asset-tile-host svg{display:block}
.asset-tile-inline{margin-inline-end:var(--sp-2)}
.exchange-flag{display:inline-block;vertical-align:-1px;margin-right:var(--sp-1);border-radius:var(--r-xs);overflow:hidden;box-shadow:0 0 0 1px var(--border);line-height:0}

/* Account (owner, 4 Oct): a quiet icon + label at the header's right, beside
   the wallet, while a wallet session exists; the phone tab bar carries it there. */
:root:root body .site-top-right .site-account{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--ctl-md);padding:0 var(--sp-2);border-radius:var(--r-md);color:var(--fg-2);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-decoration:none}
:root:root body .site-top-right .site-account:hover,:root:root body .site-top-right .site-account[aria-current=page]{color:var(--fg);background:var(--bg-sunk)}
:root:root body .site-top-right .site-account[hidden]{display:none}
.site-account svg{width:var(--sp-5);height:var(--sp-5);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.site-account:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
/* Phone (owner, 4 Oct): the header is one row (brand, environment, theme and
   wallet) and the sections sit in a fixed tab bar at the bottom: Markets ·
   Portfolio · Trade (filled) · Account, four equal columns. It replaces
   J11's Menu button. --tabbar-h is what the page keeps clear at its foot. */
.site-tabbar{display:none}
/* "Connect" + "wallet" are two children of a flex button: one word space between them, no gap. */
:root:root body .site-top-right .site-wallet:has(.site-wallet-more){gap:0}
.site-wallet-more{margin-left:var(--sp-1)}
@media(max-width:600px){
 :root{--tabbar-h:calc(var(--sp-16) + env(safe-area-inset-bottom))}
 :root:root body .site-top-in{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"brand env . actions";grid-template-rows:var(--sp-16);padding-top:0;min-height:0;column-gap:var(--sp-1)}
 :root:root body .site-top-in>.product-primary-nav{display:none}
 :root:root body .site-top-in>.site-env{margin-left:var(--sp-1)}
 :root:root body .site-top-in .site-top-right{gap:var(--sp-1)}
 :root:root body .site-top-in .site-top-right #theme{width:var(--ctl-sm);min-height:var(--ctl-sm)}
 :root:root body .site-top-right .site-wallet .site-wallet-more{display:none}
 :root:root body .site-top-right .site-account{display:none}
 /* :root:root body outranks the page sheets' bare nav rules (demo.css: padding, letter-spacing, bold links). */
 :root:root body .site-tabbar{display:grid;grid-template-columns:repeat(4,minmax(min-content,1fr));gap:0;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);height:var(--tabbar-h);margin:0;padding:0 var(--sp-1) env(safe-area-inset-bottom);border:0;border-top:1px solid var(--border);background:var(--bg-page);font:var(--fw-medium) var(--fs-micro)/1.2 var(--sans);letter-spacing:normal}
 :root:root body .site-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);min-width:0;height:var(--sp-16);margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--fg-muted);font:inherit;letter-spacing:normal;text-decoration:none;white-space:nowrap}
 :root:root body .site-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 :root:root body .site-tabbar a:hover{color:var(--fg)}
 /* The current tab: ink label, semibold, and a bar on its top edge (not colour alone). */
 :root:root body .site-tabbar a[aria-current=page]{color:var(--fg);font-weight:var(--fw-semibold);box-shadow:inset 0 2px 0 var(--fg)}
 .site-tabbar svg{flex:none;width:var(--sp-5);height:var(--sp-5);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
 /* Trade is the one filled control: the product's trade green, as on the ticket's button. */
 .site-tabbar .site-tab-trade svg{box-sizing:content-box;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);background:var(--accent-fill);color:var(--accent-on-fill)}
 :root:root body .site-tabbar .site-tab-trade[aria-current=page]{box-shadow:none}
 :root:root body .site-tabbar a:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px;border-radius:var(--r-md)}
 :root:root body:has(.site-tabbar){padding-bottom:var(--tabbar-h)}
 .toast-region{bottom:calc(var(--tabbar-h) + var(--sp-3))}
}

/* Page audit 19 (4 Oct): the theme button shows a sun in dark (the theme it
   leaves for), carries aria-pressed (site-header.js), and footer links read at
   one size on every page with a 32 px tap height on phones. */
:root[data-theme=dark] .site-top-right #theme::before{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .site-top-right #theme::before{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat}}
.site-top-right #theme[aria-pressed=true]{color:var(--fg)}
:root:root body .site-foot-cols{font-size:var(--fs-sm)}
@media(max-width:640px){.site-foot ul a{display:inline-flex;align-items:center;min-height:var(--ctl-sm)}.site-foot ul{gap:0}}
/* Network picker beside the wallet button (site-header.js, shown only with Solana enabled). */
/* Same size as the wallet chip beside it; pinned so a page's own select rule (.retail-product select) cannot resize it. */
:root:root body .site-top-right .site-network{width:auto;min-height:var(--sp-10);margin:0;padding:0 var(--sp-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}
.site-network:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
@media(max-width:640px){:root:root body .site-top-right .site-network{min-height:var(--ctl-md);padding:0 var(--sp-1)}}
@media(max-width:420px){:root:root body .site-top-right .site-network{min-height:var(--ctl-sm)}} /* with the wallet button (narrow phones above) */