/* 2BIT shell: the docked header, the mobile bottom tab bar, the footer
   and the view containers. Components are in base.css. */

/* ---------- page frame ---------- */
body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; min-width:0; }
main:focus-visible{ box-shadow:none; }
/* viewport-fit=cover: keep content clear of the notch in landscape; the
   header and footer bands still run edge to edge */
.hd, main, .ft{
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px);
}

.view{ padding-bottom:var(--s-8); }
/* route change: opacity plus a 6px rise; opacity only (120 ms) when calm */
.view:not([hidden]){ animation:view-in var(--d-route) var(--e-out); }
.view:focus-visible{ box-shadow:none; }
.view h1:focus-visible{ border-radius:var(--r-1); }
@keyframes view-in{ from{ opacity:0; transform:translateY(var(--rise)); } }

/* a view module that failed to load leaves this note in its container */
.empty.is-fault{ margin:var(--s-4); }

/* ---------- header: a docked control panel ---------- */
.hd{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h);
  background:var(--bg-card);
  border-bottom:2px solid var(--house);
}
.hd-in{
  display:flex; align-items:center; gap:var(--s-5);
  height:100%; max-width:var(--page-max); margin:0 auto; padding:0 var(--s-4);
}

.hd-brand{
  display:flex; align-items:center; gap:10px; flex:none;
  color:var(--tx-1); text-decoration:none; border-radius:var(--r-1);
}
.hd-logo{ width:32px; height:32px; display:block; } /* 16-cell pixel mark: keep it at whole multiples */
.hd-word{ font:400 30px/1 var(--f-pix); letter-spacing:.04em; }

/* nav: flat keys; the active one is lit in the house colour and sits lower */
.hd-nav{ display:flex; align-items:center; gap:var(--s-1); }
.nav-key{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; height:40px; padding:0 14px;
  color:var(--tx-2); border-radius:var(--r-1);
  font:700 14px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
}
.nav-key::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--bg-raise); opacity:0; transition:opacity var(--d-2) linear;
}
@media (hover: hover){
  .nav-key:hover{ color:var(--tx-1); }
  .nav-key:hover::before{ opacity:1; }
}
.nav-key[aria-current="page"]{
  color:var(--tx-ink); background:var(--house);
  box-shadow:0 4px 0 0 var(--house-lo);
  transform:translateY(2px);
}
.nav-key[aria-current="page"]::before{ opacity:0; }
.nav-key:focus-visible{ box-shadow:var(--focus); }
.nav-key[aria-current="page"]:focus-visible{ box-shadow:var(--focus), 0 4px 0 0 var(--house-lo); }

.hd-tools{ display:flex; align-items:center; gap:var(--s-2); margin-left:auto; min-width:0; }

/* sound toggle: one icon per state */
#sound-toggle .i-on{ display:none; }
#sound-toggle[aria-pressed="true"] .i-on{ display:block; }
#sound-toggle[aria-pressed="true"] .i-off{ display:none; }

.hd-wallet{ max-width:200px; }   /* room for live's "Connect wallet" */
.hd-wallet.is-addr{ font-family:var(--f-mono); font-weight:500; letter-spacing:0; text-transform:none; }
.hd-wallet[aria-busy="true"]{ cursor:progress; }

/* the X link: an icon up here on wide screens, a text link in the footer on every screen */
@media (max-width: 899px){ .hd-x{ display:none; } }

/* ---------- search (combobox) ---------- */
.hd-search-btn{ display:none; }
.hd-search{ position:relative; width:240px; flex:none; }
.hd-search-box{ position:relative; }
.hd-search-ico{
  position:absolute; left:10px; top:50%; width:18px; height:18px; margin-top:-9px;
  color:var(--tx-3); pointer-events:none;
}
#search-input{
  display:block; width:100%; height:40px; padding:0 40px 0 36px;
  background:var(--bg-raise); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  font:500 14px/1.2 var(--f-ui); letter-spacing:.01em;
  appearance:none; -webkit-appearance:none;
}
#search-input:focus-visible{ border-color:var(--sel); box-shadow:0 0 0 1px var(--sel); }
.hd-search-key{ position:absolute; right:9px; top:50%; margin-top:-11px; pointer-events:none; }
#search-input:focus ~ .hd-search-key{ visibility:hidden; }

.hd-list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:1;
  width:max(100%, 340px); max-height:min(420px, 60vh); overflow:auto; overscroll-behavior:contain;
  padding:var(--s-1);
  background:var(--bg-card);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:0 2px 0 0 var(--shelf), var(--sh-float);
}
.hd-opt{
  display:flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-3);
  border-radius:var(--r-1); cursor:pointer;
}
.hd-opt-sw{ width:8px; height:8px; flex:none; border-radius:1px; }
.hd-opt-t{ flex:none; font:700 14px/1 var(--f-mono); color:var(--tx-1); }
.hd-opt-n{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 13px/1.45 var(--f-ui); color:var(--tx-2);
}
/* a real cabinet's market cap, or a dash while its coin is not listed */
.hd-opt-cap{ flex:none; font:500 13px/1 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--tx-2); }
.hd-opt[aria-selected="true"]{ background:var(--bg-raise); box-shadow:inset 2px 0 0 0 var(--sel); }
.hd-opt-none, .hd-opt-foot{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3); font:500 13px/1.45 var(--f-ui); color:var(--tx-2);
}
.hd-opt-foot{ margin-top:var(--s-1); padding-bottom:var(--s-2); border-top:1px solid var(--line-1); color:var(--tx-3); }

/* below 1200px the field becomes an icon button that opens a full-width
   search row under the header */
@media (max-width: 1199px){
  .hd-in{ gap:var(--s-4); }
  .hd-search-btn{ display:inline-flex; }
  .hd-search{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 2px); width:auto;
    padding:var(--s-2) var(--s-4);
    background:var(--bg-card); border-bottom:1px solid var(--line-1);
    box-shadow:0 2px 0 0 var(--shelf);
  }
  .hd.is-searching .hd-search{ display:block; }
  .hd-search-box{ max-width:640px; margin:0 auto; }
  #search-input{ height:44px; font-size:16px; }
  .hd-list{ left:0; right:0; width:auto; }
  /* no room for live's "Connect wallet": it reads "Connect", the second word stays for screen readers */
  .hd-wallet-w{
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
}

/* ---------- below 900px: 56px header, nav moves to the bottom tab bar ---------- */
.tabbar{ display:none; }

@media (max-width: 899px){
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .hd-in{ gap:var(--s-2); padding:0 var(--s-3); }
  .hd-nav{ display:none; }
  .hd-brand{ gap:var(--s-2); min-width:44px; min-height:44px; }
  .hd-word{ font-size:20px; }
  .hd-tools{ gap:6px; }
  .hd-wallet{ padding:0 10px; font-size:13px; max-width:112px; }
  .hd-search{ padding:var(--s-2) var(--s-3); }

  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabbar);
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background:var(--bg-card); border-top:1px solid var(--line-1);
  }
  .tabbar-i{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    min-width:0; color:var(--tx-2); text-decoration:none;
    font:700 12px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar-i svg{ width:22px; height:22px; }
  .tabbar-i::before{
    content:""; position:absolute; left:var(--s-3); right:var(--s-3); top:-1px; height:3px;
    background:var(--house); opacity:0;
  }
  .tabbar-i[aria-current="page"]{ color:var(--house); }
  .tabbar-i[aria-current="page"]::before{ opacity:1; }
  .tabbar-i:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
}

@media (max-width: 359px){
  .hd-word{ display:none; }
}

/* ---------- footer ---------- */
.ft{
  margin-top:auto;
  background:var(--bg-card); border-top:1px solid var(--line-1);
}
.ft-in{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr) auto; gap:var(--s-6); align-items:start;
  max-width:var(--page-max); margin:0 auto; padding:var(--s-6) var(--s-4);
}
.ft-word{ font:400 30px/1 var(--f-pix); letter-spacing:.04em; color:var(--tx-1); }
.ft-tag{ margin-top:var(--s-2); color:var(--tx-2); }
.ft-copy{ margin-top:var(--s-4); color:var(--tx-3); }
.ft-x{ margin-top:var(--s-3); color:var(--tx-2); }
.ft-note{ color:var(--tx-2); max-width:62ch; }
.ft-note .demo{ margin:0 var(--s-2) 0 0; }
.ft-ctl{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-3); padding-bottom:var(--s-1); }
.ft-ctl p{ max-width:26ch; text-align:right; color:var(--tx-3); }

@media (max-width: 899px){
  .ft-in{ grid-template-columns:minmax(0, 1fr); gap:var(--s-5); padding:var(--s-5) var(--s-3) var(--s-6); }
  .ft-ctl{ align-items:flex-start; }
  .ft-ctl p{ text-align:left; max-width:none; }
}

/* ---------- no JavaScript ---------- */
.noscript{
  max-width:560px; margin:var(--s-7) auto; padding:var(--s-5);
  background:var(--bg-card); color:var(--tx-1);
  border:1px solid var(--line-1); border-radius:var(--r-3);
  box-shadow:var(--sh-card);
}
.noscript p{ margin-top:var(--s-2); color:var(--tx-2); }