/* ==========================================================================
   RWA STREET ON PHONES
   Scoped by html[data-layout], which src/mobile/layout.js sets from the
   viewport shape:
     portrait   the phone shell: tab bar, scrolling panels, bottom sheets
     landscape  the desktop structure with a compact HUD
     desktop    only the no-WebGL still and the boot help apply; the
                shell's nodes stay hidden
   The identity is the district's own: forest green, cream, brass, Georgia
   titles and monospace labels. No glass, no gradients, no emoji. Phone text
   is at least 12px and every control is at least 44px in both directions.
   ========================================================================== */

#m-view,#m-tabs,#m-fundbar,#m-still,.m-exchange-head,.m-sort,.m-mode,.m-place-icon{display:none}
#m-shell [hidden],.m-sort[hidden]{display:none!important}
:root{--m-bg:#10231b;--m-card:#152c21;--m-card-2:#1b3628;--m-rule:#a4b39330;--m-rule-2:#a4b39359;--m-paper:#f0ebdc;--m-text:#dde3d4;--m-muted:#b0bcab;--m-faint:#98a594;--m-brass:#c9ad74;--m-gold:#dcc794;--m-sage:#d1e0b9;--m-ink:#152a1d;--m-up:#a6dcb8;--m-down:#efae94;--m-serif:Georgia,"Times New Roman",serif;--m-sans:"Helvetica Neue",Arial,sans-serif;--m-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* --------------------------------------------------------------------------
   Without WebGL (or after the GPU drops its context) the street is a still
   captured from the scene itself.
   -------------------------------------------------------------------------- */
:root[data-render=static] #c{display:none!important}
:root[data-render=static]:not([data-layout=portrait]) #m-still{display:block;position:fixed;inset:0;z-index:0;background:#aacadd url("../public/street-hero.webp") center 38%/cover no-repeat}
:root[data-render=static] .m-hero{background:#aacadd url("../public/street-hero.webp") center 30%/cover no-repeat}
/* the scene hints describe tapping doors and desks; only the street's still
   has doors to press (mobile/shell.js lays a button over each one) */
:root[data-render=static] #hint{display:none!important}
:root[data-render=static]:not([data-layout=portrait]) body[data-scene=district]:has(#gate.hide) #hint:not(:empty){display:block!important}
.m-still-door{display:none}
:root[data-render=static]:not([data-layout=portrait]) body[data-scene=district]:has(#gate.hide) .m-still-door{display:block;position:absolute;padding:0;border:0;border-radius:3px;background:none;cursor:pointer;-webkit-tap-highlight-color:#f4efdf33}
:root[data-render=static] .m-still-door:focus-visible{outline:3px solid #cbef9a;outline-offset:2px}
@media (hover:hover){:root[data-render=static] .m-still-door:hover{background:#f4efdf14;box-shadow:inset 0 0 0 2px #f4efdfaa}}

/* The boot watchdog's help, shown only when the app could not start. */
.boot-help{display:grid;gap:14px;justify-items:center;max-width:420px;padding:0 24px;font:14px/1.6 var(--m-sans);color:#c9d0c3;text-align:center}
.boot-help p{margin:0}
.boot-help div{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.boot-help button,.boot-help a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #f1f2f055;border-radius:3px;background:none;color:#f1f2f0;font:600 13px/1 var(--m-sans);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.boot-help button{background:#f1f2f0;color:#080b0b}

/* ==========================================================================
   SHARED PHONE RULES (both orientations)
   ========================================================================== */
:root:is([data-layout=portrait],[data-layout=landscape]){--m-gutter:max(16px,env(safe-area-inset-left,0px))}
:root:is([data-layout=portrait],[data-layout=landscape]) #gate #enter{min-height:48px}
/* The landing's own auto margins center it; when a short screen cannot fit it,
   it starts at the top and scrolls instead of pushing the wordmark off screen. */
:root:is([data-layout=portrait],[data-layout=landscape]) #gate{justify-content:flex-start}
:root:is([data-layout=portrait],[data-layout=landscape]) #gate #landing-profile{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-top:6px;color:#b9c0bb;font-size:13px;text-underline-offset:5px}
:root:is([data-layout=portrait],[data-layout=landscape]) .gate-fund{font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .gate-fund a{display:inline-flex;align-items:center;min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-token-row a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-token-copy{min-width:88px;min-height:44px;padding:0 12px 0 calc(12px + .18em);font-size:12px}

/* Touch screens keep :hover on the spot last tapped ("sticky hover"). A sheet
   or panel button that takes the place of the one just tapped (the stepper's
   Next, Back after Back, Close) would keep the hover fill and read as pressed,
   or turn a ghost button into a second primary. Where there is no hover, sheet
   and panel buttons keep their own colors; disabled ones keep their opacity. */
@media (hover:none){
  :root:is([data-layout=portrait],[data-layout=landscape]) :is(.sheet>footer,.side) .btn:hover{transform:none;box-shadow:none;border-color:#99aa8655;background:var(--paper);color:var(--ink)}
  :root:is([data-layout=portrait],[data-layout=landscape]) :is(.sheet>footer,.side) .btn.go:hover{background:#d1e0b9;color:#162919}
  :root:is([data-layout=portrait],[data-layout=landscape]) :is(.sheet>footer,.side) .btn.ghost:hover{background:transparent;color:var(--paper)}
  :root:is([data-layout=portrait],[data-layout=landscape]) :is(.sheet>footer,.side) .btn.sell:hover{background:var(--red);color:#1a0503}
}

/* Toasts and the chain banner read at arm's length. */
:root:is([data-layout=portrait],[data-layout=landscape]) .toast{font-size:13px;line-height:1.5;padding:11px 16px;max-width:calc(100vw - 32px)}
:root:is([data-layout=portrait],[data-layout=landscape]) .toast small{font-size:12px;letter-spacing:.06em}
/* The status strip sits under each layout's top bar (the fund page: at the top)
   and the surfaces below move down by its height (--chain-status-height). */
:root:is([data-layout=portrait],[data-layout=landscape]) #chain-status{gap:10px;min-height:0;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));align-items:flex-start}
:root:is([data-layout=portrait],[data-layout=landscape]) #chain-status .cs-mark{width:20px;height:20px;margin-top:2px}
:root:is([data-layout=portrait],[data-layout=landscape]) #chain-status .cs-mark svg{width:20px;height:20px}
:root:is([data-layout=portrait],[data-layout=landscape]) #chain-status .cs-copy{font-size:13px;line-height:1.5}
:root:is([data-layout=portrait],[data-layout=landscape]) #chain-status .cs-lead{font-size:15px}
:root[data-layout=portrait] #chain-status{top:var(--m-top)}
:root[data-layout=portrait] #chain-status .cs-lead{display:block;margin:0 0 2px}
:root[data-layout=landscape] #chain-status{top:44px;padding-top:7px;padding-bottom:7px}
:root:is([data-layout=portrait],[data-layout=landscape]) body[data-scene=fund] #chain-status{top:0}
:root[data-layout=portrait] #m-view,:root[data-layout=landscape] #hint{margin-top:var(--chain-status-height)}
:root[data-layout=portrait] .m-office-slot #right,:root[data-layout=landscape] #backbtn{margin-top:0}
/* A paused action's reason, at arm's length. */
:root:is([data-layout=portrait],[data-layout=landscape]) .pause-note{font-size:13px;line-height:1.6}
:root:is([data-layout=portrait],[data-layout=landscape]) .gate-fund .gate-pause{font-size:13px}

/* ---------- the fund directory: cards in portrait, the table in landscape ---------- */
:root[data-layout=portrait] :is(table.scr,table.scr tbody){display:block;width:100%}
:root[data-layout=portrait] table.scr thead{display:none}
:root[data-layout=portrait] table.scr tbody{display:grid;gap:10px}
:root[data-layout=portrait] table.scr tbody tr{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"name name ret" "curve curve curve" "aum holders access" "mark mark cap" "mine mine act";align-items:center;gap:0 12px;padding:14px 16px 14px 14px;border:1px solid var(--m-rule);border-radius:4px;background:var(--m-card);cursor:pointer}
:root[data-layout=portrait] table.scr tbody tr:active{background:var(--m-card-2)}
@media (hover:hover){:root[data-layout=portrait] table.scr tbody tr:hover{background:var(--m-card-2)}}
:root[data-layout=portrait] table.scr tbody tr.mine{border-color:#a6dcb866}
:root[data-layout=portrait] table.scr td{display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;font-size:13px}
:root[data-layout=portrait] table.scr td:is([data-column=rank],[data-column=top],[data-column=fees]){display:none}
:root[data-layout=portrait] table.scr td[data-column=name]{grid-area:name}
:root[data-layout=portrait] table.scr td[data-column=name]::after{content:attr(data-manager);display:block;margin:5px 0 0 16px;font:12px/1.45 var(--m-mono);color:var(--m-faint);letter-spacing:.02em}
:root[data-layout=portrait] table.scr td[data-column=name]:is(:not([data-manager]),[data-manager=""])::after{display:none}
:root[data-layout=portrait] .scr .vname{align-items:stretch;gap:12px}
:root[data-layout=portrait] .scr .swatch{width:4px;height:auto;min-height:38px;border-radius:1px}
/* A registered fund's photo is its manager's profile photo: a square beside
   the ticker (the fund's tint while the manager has none). */
:root[data-layout=portrait] .scr .swatch.manager-photo{width:40px;height:40px;min-height:0;align-self:start;border-radius:6px}
:root[data-layout=portrait] table.scr td[data-column=name]:has(.swatch.manager-photo)::after{margin-left:52px}
:root[data-layout=portrait] .scr .vname b{display:inline;max-width:none;font:600 16px/1.3 var(--m-mono);letter-spacing:.04em;color:var(--m-paper)}
:root[data-layout=portrait] .scr .vname > span:last-child{font-size:13px;color:#a6dcb8}
:root[data-layout=portrait] .scr .vname .sub{font:14px/1.4 var(--m-sans);letter-spacing:0;color:var(--m-text);margin-top:3px}
:root[data-layout=portrait] .scr .vname .sub[data-house-fund]{font:12px/1.4 var(--m-mono);letter-spacing:.04em;color:var(--m-gold)}
:root[data-layout=portrait] .scr .vname .sub.pause-sub{color:var(--m-gold)}
:root[data-layout=portrait] .scr .fund-name-link{color:inherit}
/* The whole card is the fund link; the action button sits above it. */
:root[data-layout=portrait] .scr .fund-name-link::after{content:'';position:absolute;inset:0;z-index:1}
:root[data-layout=portrait] table.scr td[data-column=ret]{grid-area:ret;align-self:start;justify-self:end;text-align:right;font:600 18px/1.25 var(--m-mono)}
:root[data-layout=portrait] table.scr td[data-column=ret]::after{content:'Since start';display:block;margin-top:3px;font:12px/1.3 var(--m-mono);color:var(--m-faint);letter-spacing:.02em;white-space:nowrap}
:root[data-layout=portrait] table.scr td[data-column=curve]{grid-area:curve;display:block!important;margin:12px 0 10px}
:root[data-layout=portrait] table.scr td[data-column=curve] canvas.spark{width:100%;height:40px}
:root[data-layout=portrait] table.scr td[data-column=aum]{grid-area:aum;font:13px/1.4 var(--m-mono);color:var(--m-paper)}
:root[data-layout=portrait] table.scr td[data-column=aum]::after{content:' AUM';color:var(--m-faint)}
:root[data-layout=portrait] table.scr td[data-column=holders]{grid-area:holders;font:13px/1.4 var(--m-mono);color:var(--m-paper)}
:root[data-layout=portrait] table.scr td[data-column=holders]::after{content:' holders';color:var(--m-faint)}
:root[data-layout=portrait] table.scr td[data-column=access]{grid-area:access;justify-self:end}
:root[data-layout=portrait] table.scr td[data-column=access]:not(:has(.acc)){display:none}
:root[data-layout=portrait] table.scr td[data-column=mark]{grid-area:mark;margin-top:10px;display:flex;align-items:center;gap:0}
:root[data-layout=portrait] table.scr td[data-column=mark]:not(:has(.state)){display:none}
:root[data-layout=portrait] table.scr td[data-column=cap]{grid-area:cap;margin-top:10px;justify-self:end}
:root[data-layout=portrait] table.scr td[data-column=mine]{grid-area:mine;margin-top:10px;font:13px/1.4 var(--m-mono);color:var(--m-paper)}
:root[data-layout=portrait] table.scr td[data-column=mine]::before{content:'Your position ';color:var(--m-faint)}
:root[data-layout=portrait] table.scr td[data-column=mine]:not(:has(.sub)){display:none}
:root[data-layout=portrait] table.scr td[data-column=mine] .sub{display:inline!important;margin-left:8px;font-size:12px!important}
:root[data-layout=portrait] table.scr td[data-column=act]{display:none}
:root[data-layout=portrait] .scr .state,:root[data-layout=portrait] .scr .acc{font-size:12px;padding:5px 10px;letter-spacing:.05em}
:root[data-layout=portrait] .scr .ddbar{display:none}
:root[data-layout=portrait] .scr .cap-mini{flex-direction:row;align-items:center;gap:10px;min-width:0;white-space:nowrap}
:root[data-layout=portrait] .scr .cap-mini b{font-size:13px;order:2}
:root[data-layout=portrait] .scr .cap-mini b::after{content:' full';color:var(--m-faint)}
:root[data-layout=portrait] .scr .cap-mini u{width:64px;order:1}
:root[data-layout=portrait] .scr .cap-mini s{display:none}
:root[data-layout=portrait] .scr .scr-act{position:relative;z-index:2;min-height:44px;padding:0 16px;font-size:12px;letter-spacing:.08em}
/* Examples carry a target mix and illustrative fees, never balances. */
:root[data-layout=portrait] table.scr tbody tr[data-planned=true]{grid-template-areas:"name name name" "fees fees fees"}
:root[data-layout=portrait] table.scr tr[data-planned=true] td:is([data-column=ret],[data-column=curve],[data-column=aum],[data-column=holders],[data-column=mark],[data-column=cap],[data-column=mine],[data-column=access]){display:none!important}
:root[data-layout=portrait] table.scr tr[data-planned=true] td[data-column=fees]{display:block!important;grid-area:fees;margin-top:12px;font:13px/1.4 var(--m-mono);color:var(--m-paper)}
:root[data-layout=portrait] table.scr tr[data-planned=true] td[data-column=fees] .sub{display:inline!important;margin-left:8px;font-size:12px!important;color:var(--m-faint)}
:root[data-layout=portrait] table.scr tr[data-planned=true] td[data-column=name]::after{color:var(--m-up)}
:root:is([data-layout=portrait],[data-layout=landscape]) .scr-empty{display:block;padding:40px 12px;font-size:13px}
:root[data-layout=portrait] table.scr tbody tr.scr-empty-row{cursor:default}
:root[data-layout=portrait] table.scr tbody tr.scr-empty-row:is(:hover,:active){background:var(--m-card)}
:root:is([data-layout=portrait],[data-layout=landscape]) .scr-status{font-size:13px;color:#c3cdbb}
:root:is([data-layout=portrait],[data-layout=landscape]) .scr-legend{grid-template-columns:minmax(0,1fr);gap:14px;font-size:13px;line-height:1.7;margin-top:22px}
:root:is([data-layout=portrait],[data-layout=landscape]) #screener .chip{min-height:44px;padding:0 16px;font-size:12px;letter-spacing:.06em;flex-shrink:0}
:root[data-layout=portrait] .m-sort{display:flex;align-items:center;gap:8px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
:root[data-layout=portrait] .m-sort::-webkit-scrollbar{display:none}
:root[data-layout=portrait] .m-sort > span{flex-shrink:0;font:12px var(--m-mono);letter-spacing:.14em;color:var(--m-faint);margin-right:2px}
:root[data-layout=portrait] .m-sort .chip[data-direction=down]::after{content:' ↓'}
:root[data-layout=portrait] .m-sort .chip[data-direction=up]::after{content:' ↑'}

:root[data-layout=landscape] table.scr th{font-size:12px;letter-spacing:.1em;padding-top:0;padding-bottom:0}
:root[data-layout=landscape] .scr-status{margin-bottom:8px}
:root[data-layout=landscape] .scr-sort{min-width:44px}
:root[data-layout=landscape] table.scr td{font-size:13px;padding:10px 10px}
:root[data-layout=landscape] .scr .vname b{font-size:13px}
:root[data-layout=landscape] .scr .vname .sub{font-size:12px;letter-spacing:.02em}
:root[data-layout=landscape] .scr :is(.state,.acc){font-size:12px;padding:4px 9px}
:root[data-layout=landscape] .scr :is(.cap-mini b,.cap-mini s){font-size:12px}
:root[data-layout=landscape] .scr .sub[style]{font-size:12px!important}
:root[data-layout=landscape] .scr .scr-act{min-height:44px;padding:0 14px;font-size:12px}
:root[data-layout=landscape] .scr-legend{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ---------- the fund page ---------------------------------------------- */
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail :is(.fd-eyebrow,.fd-label,.fd-chart-source,.fd-return-label,.fd-y-axis,.fd-x-axis,.fd-chart-note,.fd-metrics span,.fd-metrics small,.fd-invest-position>span,.fd-invest-position small,.fd-invest-disclosure,.fd-cap-foot,.fd-cap-legend,.fd-donut-title,.fd-donut-subtitle,.fd-donut-note,.fd-asset-name,.fd-asset-quantity,.fd-asset-class,.fd-fee-reference,.fd-fee-columns small,.fd-fee-policy,.fd-fee-details details,.fd-fee-details details p,.fd-footer>span,.fd-footer p,.fd-fund-address,.fd-profile-link-note,.fd-manager-address,#fund-intro-status,.fd-note,.fd-wordmark>span,.fd-intro-heading,.fd-chart-tooltip span,.fd-allocation-classes span,.fd-holdings-table thead th,.fd-holdings-table thead .fd-currency,.fp-opening,.fp-section-label,.fp-manager small,.fp-donut-heading,.fp-donut-caption,.fp-asset-name,.fp-launch-note,.fp-fee-rates small,.fp-fee-split>span,.fp-fee-split small,.fp-section-note,.fp-allocation-note){font-size:12px!important;line-height:1.6}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail .fd-invest-terms>div{font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail :is(.fd-house,.fd-mode){font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .asset-logo-monogram{font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail :is(.fd-manager,.fd-manager strong,.fd-invest-terms .fd-currency,.fp-launch-button){font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail :is(.fd-asset-value,.holding-percent,.fd-asset-heading){font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail :is(.fd-range-bar button,#fund-intro-edit,.fd-manage,.fd-profile-edit,.fd-fee-details summary,.fd-profile-links a,#fund-view-floor){min-height:44px;min-width:44px;font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail .fd-range-bar{min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail .fd-nav button{font-size:14px;min-width:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail .fd-footer code{display:block}
/* Stacked on a phone, the cash row would say "Cash reserve" twice: its name
   already does, so its quantity line steps aside. */
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail tr[data-asset-class=cash] .fd-asset-quantity{display:none}
/* Two-sentence headings ("Clear fees. / Shared outcomes.") keep their break:
   the narrow-screen rules hide it, which ran the sentences together. */
:root:is([data-layout=portrait],[data-layout=landscape]) :is(.fd-invest,.fd-fees,.fp-invest) h2 br{display:inline}
:root:is([data-layout=portrait],[data-layout=landscape]) body.m-fundpage .rwa-fund-detail{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
#m-fundbar{position:fixed;z-index:130;gap:10px}
:root:is([data-layout=portrait],[data-layout=landscape]) body.m-fundbar-on #m-fundbar{display:flex}
#m-fundbar button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:3px;font:600 15px/1.2 var(--m-sans);letter-spacing:.01em;cursor:pointer}
#m-fundbar .m-fund-primary{flex:1 1 60%;border:0;background:var(--m-sage);color:var(--m-ink)}
#m-fundbar .m-fund-secondary{flex:1 1 40%;border:1px solid var(--m-rule-2);background:#132a20;color:var(--m-paper)}
#m-fundbar[data-kind=example] .m-fund-primary{background:#e7e5cf;color:#20372b}
#m-fundbar button:disabled{background:#56645a;color:#e2e6da;border-color:transparent;cursor:not-allowed}
#m-fundbar[data-kind=paused] .m-fund-primary{border:1px solid #dcc79466;background:#1b2f23;color:#efe6c9;font-weight:500}
#m-fundbar[data-kind=paused] button{padding:0 14px;font-size:14px}
#m-fundbar[data-kind=paused] .m-fund-primary{flex:1 1 auto;min-width:0}
#m-fundbar[data-kind=paused] .m-fund-secondary{flex:0 0 auto;white-space:nowrap}

/* ---------- an unavailable fund route ------------------------------------ */
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-missing{margin:0 auto;padding:max(28px,env(safe-area-inset-top,0px)) var(--m-gutter) 40px}
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-missing :is(a,p){font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-missing a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
:root:is([data-layout=portrait],[data-layout=landscape]) .fund-missing .btn{min-height:48px;font-size:13px}

/* ---------- sheets ------------------------------------------------------- */
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet :is(label,.precheck-mark,.asset-choice small,.asset-trade-choice small,.asset-trade-choice em,.asset-search-label,.asset-result-note,.asset-choice em,.asset-cash-row small,.asset-cash-row p,.catalog-status,.catalog-row small,.catalog-address,.catalog-request,.asset-request summary,.asset-filters button,.precheck b,.fund-token-pons){font-size:12px!important;line-height:1.55}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet :is(.note,.creation-note,.precheck p,p){font-size:13px;line-height:1.65}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet header p{font-size:12px;letter-spacing:.06em}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .form-eyebrow{font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .asset-pill{font-size:12px;line-height:1.5}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .content{font-size:14px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet :is(.btn,.quick button){min-height:48px;font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet :is(.catalog-address,.launch-doc-link,.catalog-request){display:flex;align-items:center;min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .fund-token-pons{display:inline-flex;align-items:center;min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .asset-choice input[type=checkbox]{width:24px!important;height:24px;min-height:24px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .kv{font-size:14px}
/* A native menu keeps its own height in some engines whatever min-height says.
   On phones every menu in a ticket is drawn by this sheet and is 44px tall. */
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet select{-webkit-appearance:none;appearance:none;min-height:44px;padding:9px 38px 9px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d2c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;font-size:16px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet-footer-reason{min-height:44px;font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .settlement-next{font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) #action-wait{font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .sheet .asset-choice{text-transform:none}
:root[data-layout=portrait] .sheet #nf-mults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

/* ---------- office and floor cards --------------------------------------- */
:root:is([data-layout=portrait],[data-layout=landscape]) .side .card>h4{font-size:12px;letter-spacing:.1em}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .card .body{font-size:13px;line-height:1.75}
:root:is([data-layout=portrait],[data-layout=landscape]) .side :is(.row,.kv){font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .side :is(.row .s,.history-note,.holding-note,.profile-note,.fund-summary small,.fund-overview label,.fund-overview code,.holding-heading span,.fund-holding small){font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .row{min-height:52px;align-items:center}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .btn{min-height:48px;font-size:13px!important}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .profile-edit{min-height:44px;min-width:44px;font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .fund-room-link{min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .office-photo-row :is(b,small){font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .side .office-photo-row b{font-size:13px}

/* ---------- the profile page ----------------------------------------------- */
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-profile :is(.profile-eyebrow,.profile-wallet>span,.profile-nav>span,.profile-note){font-size:12px!important}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-profile .profile-nav button{font-size:14px;min-width:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-profile a{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   PORTRAIT: THE PHONE SHELL
   ========================================================================== */
:root[data-layout=portrait]{--m-top:calc(56px + env(safe-area-inset-top,0px));--m-tabs:calc(60px + env(safe-area-inset-bottom,0px));--m-hero:clamp(200px,40dvh,440px)}
:root[data-layout=portrait] body{background:var(--m-bg)}
:root[data-layout=portrait] :is(#places,#placeplate,#hint,#backbtn,#left,#tape,#directory-btn,#fund-token-link,#mode,#scene-fade){display:none!important}

/* top bar: wordmark and environment, wallet, profile */
:root[data-layout=portrait] #topbar{height:var(--m-top);padding:env(safe-area-inset-top,0px) max(10px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));gap:6px;background:#0d1e17;border-bottom:1px solid var(--m-rule);backdrop-filter:none}
:root[data-layout=portrait] #topbar .brand{margin-right:auto;min-width:0;gap:9px;font-size:12px;letter-spacing:.14em;color:var(--m-paper)}
:root[data-layout=portrait] #topbar .brand > div{min-width:0;white-space:nowrap}
:root[data-layout=portrait] #topbar .brand small:not(.m-mode){display:none}
:root[data-layout=portrait] .m-mode{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;font:12px/1.2 var(--m-mono);letter-spacing:.02em;color:#9fb09a}
:root[data-layout=portrait] .brand-mark{width:30px;height:34px;flex:none;font-size:23px}
:root[data-layout=portrait] #wallet{gap:8px;font-size:12px}
:root[data-layout=portrait] #wallet .bal{font:13px var(--m-mono);color:var(--m-up)}
:root[data-layout=portrait] #wallet .bal.is-paused{color:var(--m-gold);letter-spacing:.02em}
:root[data-layout=portrait] #wallet .cta{min-height:44px;padding:0 12px;border-radius:3px;font-size:12px;letter-spacing:.04em}
:root[data-layout=portrait] #profile-open-button{position:relative;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--m-rule-2);border-radius:50%;font-size:0;color:transparent}
:root[data-layout=portrait] #profile-open-button::before{content:'';position:absolute;inset:11px;background:#e0d2ab;-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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:389px){:root[data-layout=portrait] .m-mode{display:none}}
/* Before launch the top bar's action is its longest ("VIEW AVAILABILITY →"):
   it tightens, and on narrow phones the R mark stands alone beside it. */
:root[data-layout=portrait] #wallet #launch-info{padding:0 10px;letter-spacing:.01em}
:root[data-layout=portrait] #topbar:has(#launch-info) .m-mode{letter-spacing:0}
@media (max-width:389px){:root[data-layout=portrait] #topbar:has(#launch-info) .brand > div{display:none}}
@media (max-width:359px){:root[data-layout=portrait] #topbar .brand > div{display:none}:root[data-layout=portrait] #wallet .cta{padding:0 10px}}

/* the scrolling view that holds the Street, Registry and Office panels */
:root[data-layout=portrait] body:has(#gate.hide) #m-view{display:block}
:root[data-layout=portrait] #m-view[data-panel=""]{display:none!important}
#m-view{position:fixed;left:0;right:0;top:var(--m-top);bottom:var(--m-tabs);z-index:100;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--m-bg);color:var(--m-text);font:15px/1.6 var(--m-sans)}
#m-view .m-panel{padding-bottom:28px}
.m-head{padding:22px var(--m-gutter) 4px}
.m-head .m-eyebrow{margin:0;font:12px/1.4 var(--m-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-brass)}
.m-head h1{margin:8px 0 6px;font:400 34px/1.08 var(--m-serif);letter-spacing:-.02em;color:var(--m-paper)}
.m-head .m-lede{margin:0;font:13px/1.5 var(--m-mono);letter-spacing:.02em;color:var(--m-muted)}
.m-copy{margin:0;padding:12px var(--m-gutter) 0;font:15px/1.65 var(--m-sans);color:var(--m-text)}
.m-status{margin:16px var(--m-gutter) 0;padding:12px 14px;border-left:2px solid var(--m-brass);background:#172d22;font:13px/1.6 var(--m-sans);color:#d3d9c8}
.m-status:empty{display:none}
.m-token{margin:12px var(--m-gutter) 0;font:13px/1.6 var(--m-mono);color:var(--m-muted);overflow-wrap:anywhere}
.m-token code{color:#cbef9a;font:inherit}

/* the street as a hero */
.m-hero{position:relative;height:var(--m-hero);overflow:hidden;background:#aacadd;border-bottom:1px solid #bda36655}
:root[data-layout=portrait] .m-hero #c{position:absolute;inset:0;display:block}
.m-hero-labels{position:absolute;inset:0;pointer-events:none}
.m-hero-label{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:1px solid #bda366;border-radius:999px;background:#0f2219;color:var(--m-paper);font:500 14px/1 var(--m-sans);letter-spacing:.01em;white-space:nowrap;pointer-events:auto;cursor:pointer;box-shadow:0 4px 14px #06120c66}
.m-hero-label span{color:var(--m-gold);font-size:15px}
.m-hero-label.m-hero-corner{left:auto;top:auto;right:12px;bottom:12px}
.m-hero:not(.is-anchored) .m-hero-labels{display:flex;flex-wrap:wrap;align-content:flex-end;gap:8px;padding:12px}
.m-hero:not(.is-anchored) .m-hero-label{position:static;transform:none!important}

/* destination cards */
.m-cards{display:grid;gap:10px;padding:20px var(--m-gutter) 0}
.m-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:78px;padding:14px 16px;border:1px solid var(--m-rule);border-radius:4px;background:var(--m-card);color:var(--m-paper);text-align:left;cursor:pointer}
.m-card:active{background:var(--m-card-2)}
.m-card-number{align-self:start;margin-top:4px;font:12px var(--m-mono);letter-spacing:.1em;color:var(--m-brass)}
.m-card-text b{display:block;font:400 21px/1.2 var(--m-serif);color:var(--m-paper)}
.m-card-text > span{display:block;margin-top:3px;font:14px/1.45 var(--m-sans);color:var(--m-muted)}
.m-card-text em{display:block;margin-top:7px;font:normal 12px/1.4 var(--m-mono);letter-spacing:.04em;color:var(--m-up)}
.m-card-arrow{font:19px var(--m-sans);color:var(--m-gold)}
.m-links{display:flex;flex-wrap:wrap;gap:8px;padding:20px var(--m-gutter) 0}
.m-links :is(a,button){display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--m-rule-2);border-radius:999px;background:none;color:var(--m-text);font:14px var(--m-sans);text-decoration:none;cursor:pointer}
.m-links span{color:var(--m-gold)}

/* registry */
.m-steps-list{list-style:none;counter-reset:m-step;margin:18px var(--m-gutter) 0;padding:0;border-top:1px solid var(--m-rule)}
.m-steps-list li{counter-increment:m-step;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:14px 0;border-bottom:1px solid var(--m-rule)}
.m-steps-list li::before{content:counter(m-step);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border:1px solid #bda36699;border-radius:50%;font:13px var(--m-mono);color:var(--m-gold)}
.m-steps-list b{font:500 16px/1.35 var(--m-sans);color:var(--m-paper)}
.m-steps-list span{font:14px/1.5 var(--m-sans);color:var(--m-muted)}
.m-terms{margin:18px var(--m-gutter) 0;padding:4px 16px;border:1px solid var(--m-rule);border-radius:4px;background:var(--m-card)}
.m-terms div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--m-rule)}
.m-terms div:last-child{border-bottom:0}
.m-terms dt{font:12px/1.5 var(--m-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--m-faint)}
.m-terms dd{margin:0;font:14px/1.5 var(--m-sans);color:var(--m-paper);text-align:right}
.m-sticky{position:sticky;bottom:0;z-index:2;margin-top:18px;padding:12px var(--m-gutter) 14px;background:var(--m-bg);border-top:1px solid var(--m-rule)}
.m-primary{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;padding:0 20px;border:0;border-radius:3px;background:var(--m-sage);color:var(--m-ink);font:600 16px/1 var(--m-sans);cursor:pointer}
.m-primary.is-paused{background:#dcc7940d;border:1px solid #dcc79466;color:#efe6c9;font-weight:500}
.m-primary.is-paused span:last-child{color:var(--m-gold)}
.m-secondary{display:inline-flex;align-items:center;min-height:48px;margin-top:12px;padding:0 18px;border:1px solid var(--m-rule-2);border-radius:3px;background:none;color:var(--m-paper);font:500 14px var(--m-sans);cursor:pointer}

/* office */
.m-section{padding:20px var(--m-gutter) 0}
.m-section h2{margin:0 0 12px;font:12px/1.4 var(--m-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-brass)}
.m-empty{margin:0;font:14px/1.6 var(--m-sans);color:var(--m-muted)}
.m-wallet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:14px 16px;margin-bottom:10px;border:1px solid var(--m-rule);border-radius:4px;background:var(--m-card)}
.m-wallet span{font:12px/1.6 var(--m-mono);letter-spacing:.06em;color:var(--m-faint);text-transform:uppercase}
.m-wallet b{font:500 14px/1.6 var(--m-mono);color:var(--m-paper);text-align:right}
.m-position{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 2px;border:0;border-bottom:1px solid var(--m-rule);background:none;color:var(--m-paper);text-align:left;cursor:pointer}
.m-position > span{display:grid;gap:2px;min-width:0}
.m-position b{font:600 15px/1.3 var(--m-mono)}
.m-position small{font:13px/1.4 var(--m-sans);color:var(--m-muted);overflow-wrap:anywhere}
.m-position-value{text-align:right}
.m-position .is-up{color:var(--m-up)}.m-position .is-down{color:var(--m-down)}
:root[data-layout=portrait] .m-office-slot #right{position:static;inset:auto;display:flex;flex-direction:column;gap:12px;width:auto;height:auto;overflow:visible;z-index:auto}
:root[data-layout=portrait] .m-office-slot #right.hidden{display:none}
:root[data-layout=portrait] .m-office-slot #right .card{background:var(--m-card);border-color:var(--m-rule);border-radius:4px;backdrop-filter:none}
:root[data-layout=portrait] .m-office-slot #right .card>h4{padding:14px 16px;font-size:12px;color:#c8d3bd}
:root[data-layout=portrait] .m-office-slot #right .card .body{padding:14px 16px;font-size:14px}
:root[data-layout=portrait] .m-office-slot #right .card .btn{width:calc(100% - 32px)!important;margin:0 16px 14px!important;padding:0!important;min-height:48px;font-size:13px!important}
/* a button inside a card's text (the prelaunch office) already has the body's padding */
:root[data-layout=portrait] .m-office-slot #right .card .body .btn{width:100%!important;margin:14px 0 0!important}
:root[data-layout=portrait] .m-office-slot #right .row{padding:12px 16px;font-size:14px}
:root[data-layout=portrait] .m-office-slot #right .rows{max-height:none;overflow:visible}
:root[data-layout=portrait] .m-section:has(#right.hidden),:root[data-layout=portrait] .m-section:has(.m-office-slot:empty){display:none}

/* the tab bar, in the thumb zone */
:root[data-layout=portrait] body:has(#gate.hide):not([data-scene=fund]) #m-tabs{display:grid}
#m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:150;grid-template-columns:repeat(4,minmax(0,1fr));height:var(--m-tabs);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#0c1c15;border-top:1px solid #bda3663d}
#m-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:56px;padding:0;border:0;background:none;color:#9aa895;font:12px/1 var(--m-mono);letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
#m-tabs svg{width:22px;height:22px}
#m-tabs span{max-width:100%;overflow:hidden;white-space:nowrap}
#m-tabs button[aria-current=page]{color:var(--m-paper)}
#m-tabs button[aria-current=page] svg{color:var(--m-gold)}
#m-tabs button[aria-current=page]::before{content:'';position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--m-gold)}

/* the Exchange tab is the fund directory */
:root[data-layout=portrait] #screener{inset:var(--m-top) 0 var(--m-tabs) 0;z-index:105;background:var(--m-bg);backdrop-filter:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
:root[data-layout=portrait] #screener.on{display:flex;flex-direction:column}
:root[data-layout=portrait] #screener :is(.m-exchange-head,#scr-q,#scr-collections,.m-sort,#scr-chips,#scr-count,.scr-wrap){flex-shrink:0}
:root[data-layout=portrait] .m-exchange-head{display:block;order:0}
:root[data-layout=portrait] #screener .scr-bar{display:contents}
:root[data-layout=portrait] #screener .scr-bar h2,:root[data-layout=portrait] #directory-close{display:none!important}
:root[data-layout=portrait] #scr-q{order:1;flex:none;display:block;width:auto;min-height:48px;margin:16px var(--m-gutter) 0;padding:0 14px 0 42px;border:1px solid var(--m-rule-2);border-radius:4px;background:#0c1d15 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3bfad' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") 13px center/20px no-repeat;color:var(--m-paper);font:16px var(--m-sans)}
:root[data-layout=portrait] #scr-collections{order:2;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:12px var(--m-gutter) 0;padding:0;border:1px solid var(--m-rule-2);border-radius:4px;overflow:hidden}
:root[data-layout=portrait] #scr-collections[hidden]{display:none}
:root[data-layout=portrait] #scr-collections button{min-height:44px;border:0;font:14px var(--m-sans)}
:root[data-layout=portrait] .m-sort{order:3;margin:12px 0 0;padding:0 var(--m-gutter)}
:root[data-layout=portrait] #scr-chips{order:4;display:flex;flex-wrap:nowrap;gap:8px;margin:8px 0 0;padding:0 var(--m-gutter);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
/* examples have no returns to filter; the directory hides the reference chips */
:root[data-layout=portrait] #scr-chips[hidden]{display:none}
:root[data-layout=portrait] #scr-chips::-webkit-scrollbar{display:none}
:root[data-layout=portrait] #scr-count{order:5;display:block;margin:14px var(--m-gutter) 0;font:12px var(--m-mono);letter-spacing:.1em;color:var(--m-faint)}
:root[data-layout=portrait] #screener .scr-wrap{order:6;flex:none;overflow:visible;padding:10px var(--m-gutter) 24px}
:root[data-layout=portrait] #scr-status{margin:0 0 10px}

/* the fund page: its own nav on top, the action bar in the thumb zone */
:root[data-layout=portrait] .rwa-fund-detail .fd-nav{min-height:60px;padding:6px max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}
:root[data-layout=portrait] .rwa-fund-detail .fd-wordmark>span{display:none}
:root[data-layout=portrait] .rwa-fund-detail .fd-wordmark{font-size:12px;letter-spacing:.16em}
:root[data-layout=portrait] .rwa-fund-detail :is(#fund-view-floor,#fund-preview-floor){display:none!important}
:root[data-layout=portrait] .rwa-fund-detail .fd-nav button{white-space:nowrap}
@media (max-width:374px){:root[data-layout=portrait] .rwa-fund-detail .fd-wordmark{display:none}}
:root[data-layout=portrait] #m-fundbar{left:0;right:0;bottom:0;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#0d1e17;border-top:1px solid #bda3663d;animation:m-bar-in .18s cubic-bezier(.2,.8,.2,1)}
@keyframes m-bar-in{from{transform:translateY(100%)}to{transform:none}}

/* bottom sheets */
:root[data-layout=portrait] #modal{align-items:flex-end;padding:0;background:#030806bb;backdrop-filter:none}
:root[data-layout=portrait] #modal .sheet{width:100%;max-width:680px;max-height:calc(100% - max(44px,env(safe-area-inset-top,0px) + 20px));border-radius:14px 14px 0 0;border-width:1px 0 0;background:#14271e}
:root[data-layout=portrait] #modal.on .sheet{animation:m-sheet .24s cubic-bezier(.2,.8,.2,1)}
@keyframes m-sheet{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
:root[data-layout=portrait] .sheet>header{padding:20px var(--m-gutter) 14px}
:root[data-layout=portrait] .sheet>header h3{font-size:26px;line-height:1.15}
:root[data-layout=portrait] .sheet>.content{padding:16px var(--m-gutter) 18px;gap:14px}
:root[data-layout=portrait] .sheet>footer{gap:10px;padding:12px var(--m-gutter) calc(12px + env(safe-area-inset-bottom,0px))}
:root[data-layout=portrait] .sheet>footer .btn{flex:1;min-width:0;min-height:52px;padding:0 12px;white-space:normal;line-height:1.25}
/* The deposit and order tickets lead with the numbers, two to a row. */
:root[data-layout=portrait] .sheet:is(:has(#dp-amt),:has(#tk-qty))>.content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}
:root[data-layout=portrait] .sheet:is(:has(#dp-amt),:has(#tk-qty))>.content>*{grid-column:1/-1}
:root[data-layout=portrait] .sheet:has(#dp-amt)>.content>.kv{grid-column:auto;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--m-rule);border-radius:3px;background:#112219}
:root[data-layout=portrait] .sheet:has(#dp-amt)>.content>.kv span{font-size:12px;line-height:1.4}
:root[data-layout=portrait] .sheet:has(#dp-amt)>.content>.kv b{font:500 16px/1.3 var(--m-mono)}
/* Registration opened in portrait: five steps, one at a time. */
:root .sheet.m-stepped .m-step{display:grid;gap:18px}
.sheet.m-stepped .m-step:not(.is-active){display:none}
.sheet.m-stepped .m-step-title{margin:0;font:400 22px/1.2 var(--m-serif);color:var(--m-paper);outline:none}
.sheet.m-stepped .m-step-issue{margin:0;font:13px/1.6 var(--m-sans);color:#f2c3a6}
.sheet.m-stepped .m-step-issue:empty{display:none}
.sheet.m-stepped .m-progress ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:14px 0 0;padding:0;list-style:none}
.sheet.m-stepped .m-progress button{display:block;width:100%;min-height:44px;padding:0;border:0;background:none;cursor:pointer}
.sheet.m-stepped .m-progress button::before{content:'';display:block;height:4px;border-radius:2px;background:#a4b39333}
.sheet.m-stepped .m-progress button.is-done::before{background:#a6dcb8aa}
.sheet.m-stepped .m-progress button[aria-current=step]::before{background:var(--m-gold)}
.sheet.m-stepped .m-progress button:disabled{cursor:default}
.sheet.m-stepped .m-progress p{margin:0;font:12px/1.4 var(--m-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--m-muted)}
.sheet.m-stepped[data-step="1"] .m-step-back,.sheet.m-stepped:not([data-step="1"]) footer [data-close],.sheet.m-stepped:not([data-step="5"]) #nf-open,.sheet.m-stepped[data-step="5"] .m-step-next{display:none}
.sheet.m-stepped .m-recap{display:grid;gap:0;margin:0;padding:4px 14px;border:1px solid var(--m-rule);border-radius:4px;background:#112219}
.sheet.m-stepped .m-recap div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--m-rule)}
.sheet.m-stepped .m-recap div:last-child{border-bottom:0}
.sheet.m-stepped>footer :is(.m-step-next,#nf-open){flex:3 1 0}
.sheet.m-stepped>footer .btn:not(.m-step-next,#nf-open){flex:2 1 0}
@media (max-width:359px){.sheet.m-stepped .m-next-to{display:none}}
.sheet.m-stepped .m-recap dt{font:12px/1.5 var(--m-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--m-faint)}
.sheet.m-stepped .m-recap dd{margin:0;font:14px/1.5 var(--m-sans);color:var(--m-paper);overflow-wrap:anywhere}
.sheet.m-stepped .m-fix{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;padding:0 12px;border:1px solid #f2c3a666;border-radius:3px;background:none;color:#f7d4bd;font:600 13px var(--m-sans);cursor:pointer}
:root[data-layout=portrait] #modal .sheet.m-stepped{max-height:100%;height:100%;border-radius:0}
/* The step title carries the context; the form's own eyebrow and subtitle give
   their height back to the fields. */
.sheet.m-stepped>header :is(.form-eyebrow,p:not([aria-live])){display:none}
:root[data-layout=portrait] #modal:has(.m-stepped){padding-top:env(safe-area-inset-top,0px);background:#14271e}

/* toasts, chain banner and the page itself */
:root[data-layout=portrait] #toast{bottom:calc(var(--m-tabs) + 14px);width:calc(100% - 32px)}
:root[data-layout=portrait] body.m-fundbar-on #toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}

/* ==========================================================================
   LANDSCAPE PHONES: THE COMPACT HUD
   The street keeps the whole screen. The top bar is 44px and carries the
   place name, navigation is a small floating pill, panels are side sheets.
   ========================================================================== */
/* A 320px-tall in-app browser fits the whole landing. */
@media (max-height:360px){
  :root[data-layout=landscape] #gate{padding:12px 20px}
  :root[data-layout=landscape] .gate-title{font-size:24px}
  :root[data-layout=landscape] .gate-title span{margin-top:4px;font-size:15px}
  :root[data-layout=landscape] .gate-chain{margin-top:10px}
  :root[data-layout=landscape] #gate #enter{margin-top:14px}
  :root[data-layout=landscape] #gate .pitch{margin-top:10px}
  :root[data-layout=landscape] .gate-links{margin-top:0}
  :root[data-layout=landscape] .gate-link{width:44px;height:44px}
  :root[data-layout=landscape] #gate #landing-profile{margin-top:0}
}
:root[data-layout=landscape] #topbar{height:44px;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:10px;background:#0c1b15;border-bottom:1px solid #82928038;backdrop-filter:none}
:root[data-layout=landscape] #topbar .brand > div{display:none}
:root[data-layout=landscape] .brand-mark{width:26px;height:30px;font-size:20px}
:root[data-layout=landscape] #topbar .brand{margin-right:auto}
:root[data-layout=landscape] :is(#directory-btn,.chrome-button){display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-bottom:0;font-size:12px;letter-spacing:.06em}
:root[data-layout=landscape] #wallet{gap:8px;font-size:12px}
:root[data-layout=landscape] #wallet .bal{font-size:13px}
:root[data-layout=landscape] #wallet .cta{position:relative;z-index:0;min-height:44px;padding:0 14px;background:none;border:0;color:#14271c;font-size:12px;letter-spacing:.06em}
:root[data-layout=landscape] #wallet .cta::before{content:'';position:absolute;inset:6px 0;z-index:-1;border-radius:2px;background:#d9e4ca}
:root[data-layout=landscape] #profile-open-button{position:relative;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;font-size:0;color:transparent}
:root[data-layout=landscape] #profile-open-button::before{content:'';position:absolute;inset:10px;border:1px solid #9f906999;border-radius:50%;background:#e0d2ab;-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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-layout=landscape] #fund-token-link{display:inline-flex;align-items:center;min-height:44px}
:root[data-layout=landscape] #fund-token-link[hidden]{display:none}
/* The place name moves into the top bar, beside the R. */
:root[data-layout=landscape] #placeplate{left:0;bottom:0;z-index:112;max-width:none;text-shadow:none}
:root[data-layout=landscape] #placeplate:before{display:none}
:root[data-layout=landscape] :is(#place-eyebrow,#place-desc,#district-total){display:none}
:root[data-layout=landscape] #place-name{position:fixed;top:0;left:calc(max(12px,env(safe-area-inset-left,0px)) + 38px);z-index:111;display:flex;align-items:center;height:44px;max-width:calc(100vw - 460px);margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:20px;line-height:1;color:var(--m-paper)}
:root[data-layout=landscape] body:not([data-scene=district]) #topbar .brand{margin-left:42px}
:root[data-layout=landscape] body:not([data-scene=district]) #place-name{left:calc(max(12px,env(safe-area-inset-left,0px)) + 80px)}
:root[data-layout=landscape] #place-name .fund-room-link{min-height:44px;overflow:hidden;text-overflow:ellipsis}
:root[data-layout=landscape] #place-action{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));min-height:44px;margin:0;padding:0 16px;border-radius:999px;font-size:12px;letter-spacing:.08em;box-shadow:0 4px 14px #0a211955}
:root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]) #place-action{display:none}
:root[data-layout=landscape] #backbtn{top:0;left:max(8px,env(safe-area-inset-left,0px));z-index:112;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:0;background:none;font-size:0}
:root[data-layout=landscape] #backbtn .arw{transform:scale(1.2)}
:root[data-layout=landscape] #backbtn .arw i{background:var(--m-paper)}
:root[data-layout=landscape] #backbtn .arw u{border-right-color:var(--m-paper)}
/* navigation as a floating pill, centered over whatever the side sheet leaves */
:root[data-layout=landscape] #places{right:max(12px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));gap:2px;padding:4px;border:1px solid #ad986966;border-radius:999px;background:#0e2119;box-shadow:0 8px 24px #0a1f1566}
:root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]):has(#right:not(.hidden)) #places{right:auto;left:calc((100vw - min(330px,44vw)) / 2);transform:translateX(-50%)}
:root[data-layout=landscape] #places button{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;font-size:12px;letter-spacing:.06em}
:root[data-layout=landscape] #places small{display:none}
:root[data-layout=landscape] .m-place-icon{display:block;width:18px;height:18px;flex:none}
/* Where the labels do not fit beside the place action or the side sheet,
   the pill keeps its icons and each button keeps its name for screen readers. */
@media (max-width:719px){
  :root[data-layout=landscape] #places button{font-size:0;padding:0 13px}
  :root[data-layout=landscape] #places .m-place-icon{width:20px;height:20px}
}
@media (max-width:899px){
  :root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]):has(#right:not(.hidden)) #places button{font-size:0;padding:0 13px}
  :root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]):has(#right:not(.hidden)) #places .m-place-icon{width:20px;height:20px}
}
:root[data-layout=landscape] #hint{top:52px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 140px);padding:7px 14px;border-radius:999px;font-size:12px;line-height:1.4;letter-spacing:.1em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#11281bf0}
:root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]) #hint{left:calc((100vw - min(330px,44vw)) / 2);max-width:calc(100vw - min(330px,44vw) - 40px)}
/* toasts too, so a notice never lands on the side panel */
:root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]):has(#right:not(.hidden)) #toast{left:calc((100vw - min(330px,44vw)) / 2)}
:root[data-layout=landscape] body:is([data-scene=office],[data-scene=fund-floor]):has(#right:not(.hidden)) .toast{max-width:calc(100vw - min(330px,44vw) - 32px);white-space:normal}
/* office and trading floor panels become a side sheet */
:root[data-layout=landscape] .side{top:44px;bottom:0;right:0!important;width:min(330px,44vw);gap:10px;padding:10px max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) 10px;background:#0f2119;border-left:1px solid #a4b39333}
:root[data-layout=landscape] .side .card{background:#152c21;backdrop-filter:none}
:root[data-layout=landscape] .side .card>h4{padding:11px 12px}
/* the directory keeps its table (header sorting, wide numbers) under a compact header */
:root[data-layout=landscape] #screener{inset:44px 0 0;background:var(--m-bg);backdrop-filter:none}
/* One grid for the whole header: title and count share the first row with the
   search, and a directory without filters (the examples) lifts its collection
   switch into the filter row, so the list gets the height. */
:root[data-layout=landscape] #screener.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px) auto;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"title search close" "filters filters filters" "collections collections collections" "wrap wrap wrap";column-gap:10px;padding:8px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
:root[data-layout=landscape] #screener .scr-bar{display:contents}
:root[data-layout=landscape] #screener .scr-bar h2{grid-area:title;align-self:start;margin:0;font:400 19px/1.2 var(--m-serif);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout=landscape] #scr-q{grid-area:search;width:100%;min-height:44px;font:16px var(--m-sans)}
:root[data-layout=landscape] #directory-close{grid-area:close;margin:0;font-size:12px}
/* on the narrowest landscape phones the close keeps its accessible name and
   shows only its mark, so the directory title is never cut short */
@media (max-width:719px){
  :root[data-layout=landscape] #directory-close{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;padding:0;font-size:0}
  :root[data-layout=landscape] #directory-close::after{content:"×";font-size:24px;line-height:1}
}
:root[data-layout=landscape] #scr-count{grid-area:title;align-self:end;text-align:left;font-size:12px;line-height:1.2;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout=landscape] #scr-chips{grid-area:filters;flex-wrap:nowrap;min-width:0;margin-top:6px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x pinch-zoom;overscroll-behavior:contain}
:root[data-layout=landscape] #scr-chips::-webkit-scrollbar{display:none}
:root[data-layout=landscape] #scr-collections{grid-area:collections;margin-top:6px;padding:0}
:root[data-layout=landscape] #screener:has(#scr-chips[hidden]) #scr-collections{grid-area:filters}
:root[data-layout=landscape] #scr-collections button{min-height:44px;font-size:13px}
:root[data-layout=landscape] #screener .scr-wrap{grid-area:wrap;min-height:0;padding:8px 0 max(20px,env(safe-area-inset-bottom,0px))}
/* the fund page keeps its landscape layout; the action is a floating pair */
:root[data-layout=landscape] #m-fundbar{right:max(12px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));padding:6px;border:1px solid #bda36655;border-radius:6px;background:#0d1e17;box-shadow:0 10px 30px #04100a88}
:root[data-layout=landscape] #m-fundbar button{min-height:44px;padding:0 16px;font-size:14px;flex:none}
:root[data-layout=landscape] body.m-fundpage .rwa-fund-detail{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
:root[data-layout=landscape] body.m-fundbar-on #toast{bottom:74px}
/* tickets and forms open as a full-height sheet on the right, so the street
   stays in view beside them; the notch side pads the content, not the sheet.
   The entrance scales toward the right edge and never crosses the viewport. */
:root[data-layout=landscape] #modal{justify-content:flex-end;padding:0;background:#030806a8;backdrop-filter:none}
:root[data-layout=landscape] #modal .sheet{width:min(560px,74vw);height:100%;max-height:100%;border-width:0 0 0 1px;border-radius:0;box-shadow:-24px 0 60px #0007}
:root[data-layout=landscape] #modal .sheet>:is(header,.content,footer){padding-right:max(18px,env(safe-area-inset-right,0px))}
/* a full-height sheet keeps its actions on the bottom edge however short it is */
:root[data-layout=landscape] #modal .sheet>.content,:root[data-layout=portrait] #modal .sheet.m-stepped>.content{flex:1 1 auto}
:root[data-layout=landscape] #modal.on .sheet{transform-origin:100% 50%;animation:m-side .2s cubic-bezier(.2,.8,.2,1)}
@keyframes m-side{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}

/* a quiet pointer to the landscape street; never a wall */
.m-rotate{display:none}
:root[data-layout=portrait] .m-rotate{display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px;border-bottom:1px solid #bda36633;color:#c9d2c4;font:12px/1.4 var(--m-mono,ui-monospace,monospace);letter-spacing:.04em}
:root[data-layout=portrait] .m-rotate svg{flex:none;width:18px;height:18px;color:var(--m-gold,#c4aa71)}
:root[data-render=static] .m-rotate{display:none}
body{font-variant-emoji:text}
/* Fund status on phones: chips at the phone's type size, 44px targets. */
:root:is([data-layout=portrait],[data-layout=landscape]) .scr .acc.shutdown-badge{font-size:12px;padding:5px 10px}
:root[data-layout=portrait] table.scr td[data-column=cap]:not(:has(.cap-mini)){display:none}
:root[data-layout=portrait] .m-position .acc{justify-self:start;margin-top:6px;font-size:12px;padding:4px 9px}
:root:is([data-layout=portrait],[data-layout=landscape]) .office-status-row{font-size:13px}
:root:is([data-layout=portrait],[data-layout=landscape]) .office-status-actions .btn{min-height:44px;font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ik-lead{font-size:16px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ik-list b{font-size:14px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ik-list small,:root:is([data-layout=portrait],[data-layout=landscape]) .ik-forfeit{font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ik-list .btn{min-height:44px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ik-forfeit input{min-width:24px;min-height:24px}
:root:is([data-layout=portrait],[data-layout=landscape]) .ticket-status .acc,:root:is([data-layout=portrait],[data-layout=landscape]) #fund-floor-status .acc{font-size:12px}
:root:is([data-layout=portrait],[data-layout=landscape]) .rwa-fund-detail .fd-status{font-size:12px}