/* Hashlock shell: top-bar navigation, shared by Explore (public/explore.html) and the app (public/index.html).
 *
 * Operator 2026-10-09: "remove the left side nav tree". There is no docked column any more. The primary destinations are
 * plain text links in the top bar (public/ent-shell.js writes them, one list for both pages); everything else the tree
 * held lives in the "More" panel, which is the old #sidebar element restyled, so every id and handler the pages already
 * use (#ls-coins, #ls-deploys, #ls-username, goto(), toggleNav()) keeps working. Phones keep their bottom tab bar and
 * get a "More" tab that opens the same panel as a sheet.
 *
 * Loaded after app-skin.css on the app and after the inlined skin on Explore; the html:root body prefix and the
 * !important flags are there because the inherited Kickback/ORO sheets position the sidebar with both.
 */

/* ---------- no docked column: content takes the full width ---------- */
html:root{--side-w:0px;--sidebar-w:0px}
@media(min-width:1024px){html:root body{padding-left:0!important}}
html:root body .main-wrap{margin-left:0!important}
html:root body .hamburger{display:none!important}
html:root body .tb-wm{display:flex!important;flex:none}
html:root body .topbar-left{display:flex;align-items:center;min-width:0}

/* ---------- top-bar links (desktop) ---------- */
.ent-topnav{display:none;align-items:center;margin-left:18px;min-width:0}
@media(min-width:1024px){.ent-topnav{display:flex}}
.ent-topnav :is(a,button){display:inline-flex;align-items:center;min-height:44px;padding:0 9px;margin:0;border:0;border-radius:0;
  background:transparent!important;color:var(--ent-ink-2);font:500 11.5px/1 var(--ent-mono)!important;letter-spacing:0;text-decoration:none;
  white-space:nowrap;cursor:pointer;box-shadow:none}
.ent-topnav :is(a,button):hover{color:var(--ent-ink);text-decoration:underline;text-underline-offset:4px}
.ent-topnav .is-on,.ent-topnav .ent-more-btn[aria-expanded="true"]{background:var(--ent-ink)!important;color:var(--ent-on-ink);text-decoration:none}
.ent-topnav :is(a,button):focus-visible{outline:2px solid var(--ent-ink);outline-offset:-2px}
.ent-topnav .is-on:focus-visible{outline-color:var(--ent-ion)}
.ent-topnav .ent-more-btn::after{content:"+";margin-left:6px}
.ent-topnav .ent-more-btn[aria-expanded="true"]::after{content:"-"}
/* Between 1024 and 1199 px the bar has no room for the sixth link; it stays in More there. */
@media(max-width:1199px){.ent-topnav [data-nv="how"]{display:none}}

/* ---------- the More panel (the former sidebar) ---------- */
html:root body .left-sidebar{position:fixed!important;transform:none!important;transition:none!important;display:none!important;
  flex-direction:column;width:300px!important;height:auto!important;bottom:auto!important;right:auto;
  max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px!important;
  background:var(--ent-sheet)!important;border:1px solid var(--ent-ink)!important;border-radius:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:80!important}
html:root body .left-sidebar.open{display:flex!important}
html:root body .left-sidebar :is(.ls-logo,.ls-close){display:none!important}
html:root body .left-sidebar .ls-item{border-radius:0!important;min-height:44px;margin:0!important}
html:root body .left-sidebar .ls-item:focus-visible{outline:2px solid var(--ent-ink);outline-offset:-2px}
html:root body .left-sidebar .ls-learn>summary{pointer-events:none}          /* always open here (ent-shell.js); it is a label, not a toggle */
html:root body .left-sidebar .ls-learn>summary svg{display:none}
/* An entry that is already a top-bar link (desktop) or a bottom tab (phone) is not repeated in the panel. */
@media(min-width:1024px){html:root body .left-sidebar .nv-top{display:none!important}}
@media(min-width:1200px){html:root body .left-sidebar .nv-top-wide{display:none!important}}
@media(max-width:1023px){
  html:root body .left-sidebar .nv-tab{display:none!important}
  html:root body .left-sidebar{left:0!important;right:0!important;top:auto!important;width:auto!important;
    bottom:var(--ent-tab-h,64px)!important;max-height:min(70vh,560px);border-width:1px 0 0!important}
  /* Explore hid its tab bar while the old drawer was open; the sheet sits above the bar, so the bar stays. */
  html:root body.nav-open #mbottom{visibility:visible!important}
  html:root body .scrim.open{display:block!important;z-index:60!important}
}
@media(min-width:1024px){html:root body .scrim{display:none!important}}

/* ---------- "More" tab in the phone tab bars ---------- */
.ent-more-tab[aria-expanded="true"]{color:var(--ent-ink)!important}

/* ---------- app shell: square corners through the radius tokens ----------
   Operator 2026-10-09 asked for a square, DOS-like Explore; the top bar is shared, so the app shell follows it at the
   token level only (corners), without touching its component styles. Landing, /how and the legal pages keep the
   design system's radii: this block is scoped to the two shells and public/ent/theme.css is unchanged. */
html:root body:is(.kb-app,.fd-public){
  --kr-5:0px;--kr-6:0px;--kr-7:0px;--kr-8:0px;--kr-9:0px;--kr-10:0px;--kr-11:0px;--kr-12:0px;--kr-13:0px;--kr-14:0px;--kr-15:0px;
  --kr-16:0px;--kr-17:0px;--kr-18:0px;--kr-20:0px;--kr-22:0px;--kr-99:0px;
  --r:0px;--r-btn:0px;--r-card:0px;--r-input:0px;
  --ent-r-chip:0px;--ent-r-ctl:0px;--ent-r-panel:0px}
/* Many app components carry literal radii (pills, 50% avatars, the vault cards built in script), so the corner rule is
   a blanket one, as on Explore. Shadows and fills in the app are left alone: the operator asked for the Explore page. */
html:root body.kb-app *,html:root body.kb-app *::before,html:root body.kb-app *::after{border-radius:0!important}
html:root body.kb-app .spinner{border-radius:50%!important}
html:root body.kb-app :is(.topbar,.fd-tabbar){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html:root body.kb-app .topbar{background:var(--ent-plate)!important;border-bottom:1px solid var(--ent-ink)!important}
html:root body.kb-app .fd-tabbar{background:var(--ent-sheet)!important;border-top:1px solid var(--ent-ink)!important}
html:root body.kb-app .fd-tabbar .fd-tb{font-family:var(--ent-mono);border-radius:0!important}
html:root body.kb-app :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ent-ink)!important;outline-offset:1px;box-shadow:none!important}
/* The wallet button on the sign-in card carries an id-level radius. */
html:root body.kb-app #fd-gate #fd-phantom-btn.fd-wallet-wide{border-radius:0!important}