/* The shell every page sits in: the dark frame with the sidebar, the inset
   sheet, the header floating over it, and the page inside. Pages only fill
   .page; everything here is the same on every page. */

/* ───────── Frame ───────── */

.app {
  display: grid;
  grid-template-columns: var(--sb-w) minmax(0, 1fr);
  height: 100dvh;
  background: var(--frame);
  overflow: hidden;
  transition: grid-template-columns 260ms var(--ease);
}
.app.collapsed {
  --sb-w: var(--sb-w-collapsed);
}
.skip {
  position: fixed;
  z-index: var(--z-skip);
  left: 16px;
  top: -60px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #111;
}
.skip:focus {
  top: 12px;
}

/* ───────── Sidebar ───────── */

.sidebar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 12px 10px 10px;
  color: var(--frame-text);
}
.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 2px 0 8px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff;
  white-space: nowrap;
}
/* The wordmark; collapsed, its T. */
.sb-brand .tb-word {
  display: block;
  width: 156px;
  height: 14px;
  flex-shrink: 0;
}
.sb-brand .tb-mark {
  display: none;
  width: 18px;
  height: 18px;
}
.sb-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--frame-muted);
  transition:
    background 150ms,
    color 150ms;
}
.sb-icon-btn:hover {
  background: var(--frame-hover);
  color: #fff;
}
.sb-middle {
  flex: 1;
  min-height: 0;
  margin: 0 -10px 10px;
  padding: 0 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.sb-middle::-webkit-scrollbar {
  display: none;
}
.sb-nav {
  display: grid;
  gap: 1px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--frame-text);
  font-size: var(--text-lg);
  font-weight: 450;
  text-align: left;
  white-space: nowrap;
  transition:
    background 150ms,
    color 150ms;
}
.sb-item .i {
  width: 18px;
  height: 18px;
  color: #85858c;
  transition: color 150ms;
}
.sb-item:hover {
  background: var(--frame-hover);
  color: #ececee;
}
.sb-item.active {
  background: var(--frame-active);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    0 1px 2px rgb(0 0 0 / 40%);
}
.sb-item.active .i,
.sb-item:hover .i {
  color: #fff;
}
.sb-item .sb-kbd,
.sb-item .sb-badge {
  margin-left: auto;
}
.sb-kbd {
  font: var(--weight-medium) var(--text-xs) / 18px var(--font);
  color: var(--frame-muted);
  letter-spacing: 0.02em;
}
.sb-badge {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: #2a2a2e;
  color: #c9c9ce;
  font: var(--weight-medium) var(--text-xs) / 18px var(--font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sb-badge.violet {
  background: rgb(149 133 255 / 18%);
  color: var(--violet-ink);
}
.sb-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  margin: 16px 0 2px;
  padding: 0 4px 0 10px;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--frame-muted);
  white-space: nowrap;
}
.sb-bottom {
  position: relative;
  flex-shrink: 0;
}
/* Who's signed in: the Whop mark, verified, and the email on file below a
   hairline. */
.sb-member {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #19191c 0%, #151518 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 0 0 1px #0a0a0a;
  text-align: left;
  transition: background 150ms;
}
.sb-member:hover {
  background: linear-gradient(180deg, #1e1e21 0%, #19191c 100%);
}
.sb-member-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sb-member-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: radial-gradient(120% 120% at 30% 0%, rgb(250 70 22 / 16%), transparent 70%), #101012;
  box-shadow: inset 0 0 0 1px rgb(250 70 22 / 22%);
}
.sb-member-mark .whop {
  width: 19px;
  height: auto;
  fill: var(--whop);
}
.sb-member-text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}
.sb-member-text strong {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: #f0f0f2;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.sb-member-text .verified {
  width: 14px;
  height: 14px;
  color: var(--whop);
}
.sb-member-text small {
  overflow: hidden;
  color: var(--frame-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-member-top > .i {
  color: var(--frame-muted);
}
.sb-member-mail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 2px 0;
  border-top: 1px solid var(--frame-line);
  color: var(--frame-text);
  font-size: var(--text-md);
}
.sb-member-mail .i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--frame-muted);
}
.sb-member-mail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-bottom .tb-menu {
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 0;
}

/* Collapsed, the sidebar keeps only the icons. */
.app.collapsed .sidebar {
  padding-left: 10px;
  padding-right: 10px;
}
.app.collapsed .sb-brand .tb-word {
  display: none;
}
.app.collapsed .sb-brand .tb-mark {
  display: block;
}
.app.collapsed .sb-item span,
.app.collapsed .sb-item .sb-kbd,
.app.collapsed .sb-item .sb-badge,
.app.collapsed .sb-label,
.app.collapsed .sb-member-text,
.app.collapsed .sb-member-top > .i,
.app.collapsed .sb-member-mail {
  display: none;
}
.app.collapsed .sb-top {
  flex-direction: column;
  height: auto;
  gap: 10px;
  padding: 0;
}
.app.collapsed .sb-item,
.app.collapsed .sb-member {
  justify-content: center;
  padding: 0;
}
.app.collapsed .sb-member {
  display: flex;
  height: 44px;
}
.app.collapsed .sb-member-top {
  justify-content: center;
}
.app.collapsed .sb-label {
  display: block;
  height: 1px;
  margin: 12px 8px;
  padding: 0;
  background: var(--frame-line);
}
.app.collapsed .sb-label * {
  display: none;
}

/* ───────── Sheet ───────── */

.sheet {
  /* Always the last column (beside the sidebar's, or alone on a phone and in Stream's audience view): before shell.js has
     put the sidebar in, the sheet is already where it will stay. */
  grid-column: -2 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: var(--sheet-gap) var(--sheet-gap) var(--sheet-gap) 0;
  border-radius: var(--r-sheet);
  background: var(--sheet);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 3%),
    0 24px 60px -24px rgb(0 0 0 / 80%);
}
/* The page scrolls under the header; the header's height is its padding. */
.scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  padding-top: var(--hdr-h);
  scroll-padding-top: calc(var(--hdr-h) + 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2e2e33 transparent;
}
/* The ask bar (and Stream's and a run's player bar) floats over the bottom of the sheet on a wide screen: what a Tab or
   an anchor scrolls into view stops above it, never under it. (On a phone the sheet ends above the bar.) */
@media (min-width: 761px) {
  .scroll {
    scroll-padding-bottom: 88px;
  }
}
.scrim {
  display: none;
}

/* ───────── Header ───────── */
/* Search first, then how fresh the page is and the drop alerts. It floats
   over the page, and what scrolls under it blurs. */

.topbar {
  position: absolute;
  z-index: var(--z-header);
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--hdr-h);
  padding: 0 12px 0 14px;
  background: rgb(18 18 20 / 80%);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition:
    background 200ms,
    box-shadow 200ms;
}
.topbar.scrolled {
  background: rgb(18 18 20 / 72%);
  box-shadow:
    inset 0 -1px 0 var(--line-soft),
    0 14px 30px -22px rgb(0 0 0 / 90%);
}
.menu-btn,
.search-btn {
  display: none;
}
.hdr-search {
  flex: 0 1 440px;
  height: var(--control-h-bar);
  padding: 0 7px 0 11px;
  border-radius: 10px;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* How fresh the page is, and the time in New York. */
.hdr-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h-bar);
  padding: 0 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hdr-pulse .i {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
}
.hdr-pulse #clock-time {
  color: var(--ink-2);
  font-weight: 450;
}
.hdr-pulse small {
  margin-left: -3px;
  color: var(--ink-3);
  font-size: var(--text-xs);
}
.hdr-sep {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: var(--line);
}
.hdr-pulse[data-tone='idle'] {
  --tone: var(--accent);
}
.hdr-pulse[data-tone='warn'] {
  --tone: var(--orange);
  color: var(--orange-ink);
}
.hdr-pulse[data-tone='error'] {
  --tone: var(--down);
  color: var(--down-ink);
}
/* A copy we hold while a read fails or is stale says nothing about it: no dot, no word, only the clock. */
.hdr-pulse[data-tone='held'] .live-dot,
.hdr-pulse[data-tone='held'] #status-text,
.hdr-pulse[data-tone='held'] .hdr-sep {
  display: none;
}
.hdr-alerts-wrap {
  position: relative;
}
.hdr-alerts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h-bar);
  padding: 0 7px 0 11px;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: var(--sh-raised);
  color: var(--ink);
  font: var(--control-font);
  white-space: nowrap;
  transition: background 150ms;
}
.hdr-alerts:hover {
  background: var(--raised-hover);
}
.hdr-alerts .i {
  color: var(--ink-2);
}
/* Pop out: the alerts button's look with nothing after its label; on while its window is open. */
.hdr-popout {
  padding: 0 11px;
}
.hdr-popout[hidden] {
  display: none;
}
.hdr-popout[aria-pressed='true'] {
  color: var(--accent-ink);
}
.hdr-state {
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--up-soft);
  color: var(--up-ink);
  font: var(--weight-bold) var(--text-sm) / 20px var(--font);
}
.hdr-state.off {
  background: rgb(255 255 255 / 7%);
  color: var(--ink-3);
}
/* Drop alerts, under the button in the header. */
.alerts {
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 8px;
}
.alerts-head {
  display: grid;
  gap: 2px;
  padding: 4px 8px 8px;
}
.alerts-head strong {
  color: var(--frame-strong);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}
.alerts-head span {
  color: var(--frame-muted);
  font-size: var(--text-md);
}
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #d6d6da;
  font-size: var(--text-body);
  cursor: pointer;
}
.alert-row:hover {
  background: #26262a;
}
.alert-row > span {
  flex: 1;
}
.alert-row .i {
  color: var(--frame-muted);
}
.alerts-note {
  margin: 6px 8px 4px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 7%);
  color: var(--frame-muted);
  font-size: var(--text-md);
  line-height: 18px;
}

/* ───────── Page ───────── */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) 0;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.page-head h1 {
  font-size: var(--text-page);
  line-height: 26px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.page-head .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.page-head .title > span {
  display: inline-flex;
  gap: 6px;
}
.page-head .sub {
  margin-top: 2px;
  font-size: var(--text-base);
  color: var(--ink-3);
}
.page-head .actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Toasts float over the page, above the ask bar. */
.toasts {
  position: absolute;
  z-index: var(--z-toast);
  left: 50%;
  bottom: 80px;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ───────── Smaller screens ───────── */

@media (max-width: 1240px) {
  :root {
    --page-pad-x: 20px;
  }
  .hdr-search {
    flex-basis: 320px;
  }
}
@media (max-width: 900px) {
  .app,
  .app.collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The sidebar becomes a drawer, always opened in full. */
  .sidebar {
    position: fixed;
    z-index: var(--z-drawer);
    inset: 0 auto 0 0;
    width: 272px;
    background: var(--frame);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 260ms var(--ease),
      visibility 0s linear 260ms;
  }
  .app.collapsed .sidebar :is(.sb-item span, .sb-label) {
    display: revert;
  }
  .app.collapsed .sidebar .sb-member {
    display: grid;
    height: auto;
    padding: 10px 10px 11px;
  }
  .app.collapsed .sidebar .sb-member-top {
    justify-content: flex-start;
  }
  .app.collapsed .sidebar .sb-member-text {
    display: grid;
  }
  .app.collapsed .sidebar :is(.sb-member-mail, .sb-member-top > .i) {
    display: flex;
  }
  .app.collapsed .sidebar .sb-brand .tb-word {
    display: block;
  }
  .app.collapsed .sidebar .sb-brand .tb-mark {
    display: none;
  }
  .app.nav-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: 20px 0 50px rgb(0 0 0 / 50%);
    transition: transform 260ms var(--ease);
  }
  .collapse-toggle {
    display: none !important;
  }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgb(0 0 0 / 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
  }
  .app.nav-open .scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .sheet {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .menu-btn,
  .search-btn {
    display: inline-grid;
  }
  .topbar {
    gap: 6px;
    padding: 0 10px;
  }
  .hdr-search {
    display: none;
  }
  .hdr-pulse :is(.hdr-sep, .i, #clock-time, small) {
    display: none;
  }
  /* Held copy: the words are gone and so is the clock here, so nothing is left to draw. */
  .hdr-pulse[data-tone='held'] {
    display: none;
  }
  /* Search opens over the header on phones. */
  .topbar.searching .hdr-search {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    top: calc((var(--hdr-h) - var(--control-h-bar)) / 2);
    display: flex;
  }
  .topbar.searching > :not(.hdr-search) {
    visibility: hidden;
  }
}
@media (max-width: 760px) {
  :root {
    --page-pad-top: 14px;
    --page-pad-x: 16px;
  }
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
  }
}
@media (max-width: 560px) {
  .hdr-alerts .lbl {
    display: none;
  }
  .hdr-pulse {
    padding: 0 10px;
  }
}
/* The smallest phones: nothing may push the page sideways. */
@media (max-width: 380px) {
  .page {
    overflow-x: clip;
  }
}
/* A finger is 44 px (LOOK-01, ship 30): on a touch screen every way to another page takes one. */
@media (pointer: coarse) {
  .sb-item,
  .sb-brand {
    min-height: 44px;
  }
  .topbar :is(.menu-btn, .search-btn) {
    width: 44px;
    height: 44px;
  }
}

/* ───────── The header's coin search: the coins a ticker, name or contract names (js/search.js) ───────── */
.hdr-search {
  position: relative;
}
.cs {
  position: absolute;
  z-index: var(--z-menu);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: min(420px, calc(100vw - 20px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--popover);
  box-shadow: var(--sh-pop);
  color: var(--frame-text);
}
.cs[hidden] {
  display: none;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #d6d6da;
  text-decoration: none;
}
.cs-row[aria-selected='true'],
.cs-row:hover {
  background: #28282c;
  color: #fff;
}
.cs-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.cs-text b {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-text small {
  color: var(--frame-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 8px;
  max-width: 55%;
  color: var(--frame-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.cs-on {
  color: var(--up);
}
.cs-mint {
  font-family: var(--mono, ui-monospace, monospace);
}
.cs-note,
.cs-none {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 8px;
  color: var(--frame-muted);
  font-size: var(--text-base);
}
.cs-none span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-none b {
  color: #d6d6da;
  font-weight: var(--weight-medium);
}
.cs-none small {
  font-size: var(--text-sm);
}
.cs-none a {
  color: #8fb2ff;
}
.cs-say {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}