/* overlay/v3/css/shell/shell.css */
/* v3 sidebar shell (owner: pixel; iris HC0 to HC4, layouts LH1). Built into /v3/css/shell.css (v3 pages) and appended to /v3/css/chrome.css (World
   chrome pages), so selectors never lean on .v3. Desktop sidebar is CSS only; the Menu sheet (under 64em) is the same nav, opened by core.js. */
:root { --sb-w: 0px; --sb-item: 40px; --sb-sub: 36px; --sb-inset: 20px; --sb-row-m: 48px; --sb-sub-m: 44px; --sb-hb: 40px; }
@media (min-width: 64em) { :root { --sb-w: 240px; } body:has(> .sb) { padding-inline-start: var(--sb-w); } }
@media (pointer: coarse) { :root { --sb-item: 44px; --sb-sub: 44px; --sb-hb: 44px; } }
@media (min-width: 64em) and (max-width: 79.99em) { :root.v3 { --gutter: 24px; } }
@media (min-width: 80em) { :root.v3 { --gutter: 28px; } }

/* World chrome: the galaxy's own :root has another --sans and --hd-h; the shell keeps the v3 values (tokens.css) so the bar is the same on every page */
body > :is(.hd--sb, .sb) { --sans: "DL Inter", "DL Inter Fallback", system-ui, sans-serif; --hd-h: 56px; font-family: var(--sans); }
body > .hd--sb .hd-in { block-size: var(--hd-h); min-block-size: var(--hd-h); }
/* top bar: the kit header row, without its nav; the right group ends on the content edge */
.hd--sb .hd-in { max-width: calc(1224px + 2 * var(--gutter)); }
.hd--sb .hd-act { gap: var(--s-4); }
.hb-x { display: inline-grid; place-items: center; inline-size: var(--sb-hb); block-size: var(--sb-hb); flex: none; background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--step); color: var(--c-text); }
.hb-x:hover, .hb-ca:hover { border-color: var(--c-text); }
.hb-x:active { background: var(--c-surface-2); }
.hb-ca { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--sb-hb); padding: 0 var(--s-4); background: var(--c-surface); border: 1px solid var(--c-control); border-radius: var(--r2); color: var(--c-muted); font: var(--w-strong) var(--t-small)/1 var(--sans); }
.hb-ca .num { color: var(--c-text-read); font-size: var(--t-mono); }
.hb-ca i { inline-size: 1px; align-self: stretch; margin-block: var(--s-3); background: var(--c-edge); }
.hb-ca b { font: var(--w-mono) var(--t-mono) var(--mono); color: var(--c-text-read); }
.hb-ca b::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: var(--s-2); background: var(--c-success); clip-path: polygon(0 50%, 25% 50%, 37% 75%, 75% 0, 100% 0, 37% 100%); }
@media (min-width: 64em) { body > .hd--sb .brand, .sb .hb-ca, .sb-m, .sb-mh { display: none; } }
/* the sidebar logo carries its own type: on the World chrome pages the header rules are scoped to body > .hd only */
.sb-logo { color: var(--c-text); text-decoration: none; }
.ft-h { margin-block-end: var(--s-2); font: var(--w-strong) var(--t-small)/18px var(--sans); color: var(--c-muted); } .sb-logo img { image-rendering: pixelated; }
.sb-logo .brand-name { font-family: var(--head); font-weight: var(--w-head); font-size: var(--t-stat); letter-spacing: var(--tr-head); color: var(--c-text); }
@media (max-width: 63.99em) { .hd--sb .hb-ca { display: none; } }
@media (max-width: 63.99em) { body > .hd--sb .hd-in { gap: var(--s-3); } body > .hd--sb .hd-act { gap: var(--s-3); } body > .hd--sb .wallet-btn { min-height: var(--sb-hb); padding-inline: var(--s-4); } body > .hd--sb .menu-btn { padding-inline: var(--s-2); gap: var(--s-2); min-inline-size: 44px; justify-content: center; font-weight: var(--w-strong, 600); } }
/* the bar holds logo, X, Connect wallet and Menu: under 26em the logo is the mark alone (iris accepted); the wordmark stays its accessible name */
@media (max-width: 25.99em) { body > .hd--sb .brand .brand-name { display: inline !important; position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 22.49em) { .hd--sb .hb-x { display: none; } }
/* iris r2 R6: the base.css under-368 px rule does not load on /world and /studio: Menu keeps its word as the accessible name, the glyph shows at 44 x 44 */
@media (max-width: 23em) { body > .hd--sb .menu-btn > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* sidebar */
.sb { font-family: var(--sans); font-size: var(--t-ui); line-height: 20px; background: var(--c-bg); color: var(--c-muted); }
.sb ul { list-style: none; margin: 0; padding: 0; }
.sb-list a, .sb-more { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-height: var(--sb-item); padding: 0 var(--sb-inset); color: var(--c-muted); font-weight: var(--w-strong); text-align: start; text-decoration: none; background: none; border: 0; cursor: pointer; }
.sb-sub a { min-height: var(--sb-sub); padding-inline-start: 32px; font-weight: var(--w-body); color: var(--c-text-read); }
.sb-list a:hover, .sb-more:hover { color: var(--c-text); background: var(--c-surface-2); }
.sb-list a:active, .sb-more:active { background: var(--c-surface-3); }
.sb a:focus-visible, .sb button:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); outline: none; }
.sb-list a[aria-current="page"] { color: var(--c-text); background: var(--c-surface-2); box-shadow: inset 2px 0 0 var(--c-text); }
.sb-list a[aria-current="page"]:focus-visible { box-shadow: inset 2px 0 0 var(--c-text), inset 0 0 0 2px var(--c-focus); }
.sb-more[aria-expanded="true"] { color: var(--c-text); }
.sb-more[aria-expanded="true"] svg { transform: scaleY(-1); }
.sb-g::before { content: ""; display: block; block-size: 1px; margin: var(--s-4) var(--sb-inset); background: var(--c-line); }
.sb-sub:has([aria-current]) { display: block; }
.sb-mh { margin: var(--s-5) 0 var(--s-2); padding-inline: var(--sb-inset); font: var(--w-strong) var(--t-small)/18px var(--sans); color: var(--c-muted); }
@media (min-width: 64em) {
  body:has(> .v3-ribbon) > .sb { inset-block-start: var(--ribbon-h, 24px); }
  .sb { position: fixed; z-index: 21; inset-block: var(--ribbon-now, 0px) 0; inset-inline-start: 0; inline-size: var(--sb-w); overflow-y: auto; overscroll-behavior: contain; border-inline-end: 1px solid var(--c-line); }
  .sb-logo { display: flex; align-items: center; gap: var(--s-3); block-size: var(--hd-h, 56px); padding-inline: var(--sb-inset); margin-block-end: var(--s-3); }
}

/* Menu sheet: the same nav, fixed under the bar; core.js toggles .sb-open, inert on the page and the scroll lock */
@media (max-width: 63.99em) {
  .sb { display: none; }
  .sb.sb-open { display: block; position: fixed; z-index: var(--z-sheet, 60); inset: calc(var(--ribbon-now, 0px) + var(--hd-h, 56px)) 0 0 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--s-8); }
  .sb .sb-logo, .sb .sb-more { display: none; }
  .sb .sb-sub[hidden] { display: block !important; }
  .sb-list a { min-height: var(--sb-row-m); font-size: var(--t-stat); color: var(--c-text); }
  .sb-sub a { min-height: var(--sb-sub-m); font-size: var(--t-body); color: var(--c-text-read); }
  .sb-pin { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-5) var(--sb-inset) 0; }
  .sb-pin > * { display: inline-flex; align-items: center; min-height: var(--sb-sub-m); padding: 0 var(--s-4); background: var(--c-surface-2); border-radius: var(--step); color: var(--c-text); font-weight: var(--w-strong); }
  .sb-hon { padding: var(--s-5) var(--sb-inset) 0; font-size: var(--t-small); line-height: 18px; color: var(--c-muted); }
  html.menu-open { overflow: hidden; }
}
@media (min-width: 22.5em) { .sb-x { display: none !important; } }
/* r16: "My profile" by the wallet button (desktop top bar) and in the menu, shown once a wallet is connected (core.js paintWallet) */
.hd-me, [data-my-profile-box][hidden] { display: none !important; }
@media (min-width: 64em) { .hd-me:not([hidden]) { display: inline-flex !important; align-items: center; min-height: var(--sb-hb); padding-inline: var(--s-3); color: var(--c-text-read); font: var(--w-strong) var(--t-ui)/1 var(--sans); } .hd-me:hover { color: var(--c-text); } }