/* ==========================================================================
   $VEND — the rest of the product
   --------------------------------------------------------------------------
   The machine is the page, so everything here is deliberately quieter than it:
   flat plates on black, the same chunky borders and hard shadows as the house
   style, and no glow at all. Glow belongs to the machine.

   The registry, the vendor board, the steps and the honesty panel all share one
   row language so the page reads as a single product rather than three widgets.
   ========================================================================== */

/* ==========================================================================
   The shell — sidebar + content
   --------------------------------------------------------------------------
   The machine is the page, so the shell is a frame and not a feature. The
   sidebar is a lifted black column with one active-blue nav item; everything
   that carries a word collapses away in the rail rather than wrapping.
   ========================================================================== */

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}

.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, #101014 0%, #0B0B0C 100%);
  border-right: var(--line-thin) solid var(--hairline);

  /*
   * The column holds more than fits on a short window, so it scrolls rather
   * than clipping. `min-height: 0` on the children is what lets the spacers
   * give room back first — without it a flex item refuses to shrink below its
   * content and the overflow happens anyway. `overscroll-behavior: contain`
   * stops the scroll chaining to the page behind it, which otherwise reads as
   * the whole app jumping when you reach the end of the list.
   */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sidebar > * { min-height: 0; flex-shrink: 0; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #2A2A33; border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.side-top { padding: 2px 6px 14px; }

/* The logo takes the room, the collapse control keeps its size. */
.side-head { display: flex; align-items: center; gap: 8px; }

.logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.logo-text { display: block; min-width: 0; }
/*
 * The client's mark carries its own glow — it was supplied that way — so the
 * raised tile that used to sit behind the placeholder crown is gone. A bordered,
 * shadowed box around a lit object fights it, and the glow is the whole point.
 */
.logo-mark {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-word {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.logo-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--on-ink-2);
}

/*
 * The collapse control is how you get back out of the rail, so it stays
 * reachable in both states. The chevron points the way the sidebar will go,
 * then mirrors once collapsed.
 */
.side-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: var(--line-thin) solid #2C2C36;
  border-radius: 9px;
  background: var(--ink-2);
  color: var(--on-ink-2);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.side-collapse:hover { color: var(--on-ink); border-color: var(--ui-edge); background: var(--ink-3); }
.side-collapse svg { transform: rotate(180deg); transition: transform var(--mid) var(--ease); }
html[data-side="rail"] .side-collapse svg { transform: none; }

/* When the viewport has already decided the sidebar's shape, the control has no
   job — it is hidden rather than left as a button that does nothing. A class on
   <html> rather than the `hidden` attribute, which `display: flex` would
   outrank. */
html[data-side-forced="1"] .side-collapse { display: none; }

/* ---- nav ---- */

.side-nav { display: flex; flex-direction: column; gap: 4px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: var(--line-thin) solid transparent;
  border-radius: 12px;
  color: var(--on-ink-2);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast),
              border-color var(--fast), box-shadow var(--fast);
}
.side-link:hover { background: var(--ink-3); color: var(--on-ink); }
/* The active item. It is the brightest thing in the shell and the only one with
   a filled tint — which is how it stands out now that the chrome carries no
   hue at all. */
.side-link.on {
  background: var(--ui-wash);
  border-color: var(--ui-edge);
  color: var(--ui-fg);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, .5);
}
.side-link .ic { flex: none; width: 16px; height: 16px; }
.side-link .ic svg { width: 16px; height: 16px; }

.side-link.small { padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.side-link.small:hover { color: var(--on-ink); }

.side-ca { margin: 0 6px 8px; flex: 0 1 auto; }
.side-ca-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--ink-2);
  border: var(--line-thin) solid #26262E;
  border-radius: 12px;
}
.side-ca-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--on-ink-2);
}
.side-ca-addr {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--on-ink-2);
  word-break: break-all;
}

.side-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  /*
   * Anchored to the bottom of the sidebar.
   *
   * The fee card used to sit above this with `margin: auto`, and it was what
   * pushed the footer down. With the card gone the links would ride up under the
   * nav and leave a column of empty space beneath them, which reads as something
   * failing to load rather than as a layout. This does that job instead.
   */
  margin-top: auto;
  border-top: var(--line-thin) solid var(--hairline);
}

/* ==========================================================================
   The rail
   --------------------------------------------------------------------------
   The sidebar collapses to an icon rail in two situations, and BOTH are
   expressed as the same `data-side` attribute rather than as an attribute plus
   a duplicated media query:

     1. On request — the collapse control writes the preference.
     2. Automatically, when the viewport is too narrow for a full column.

   app.js computes the two into one value, so the rules below are written once.
   The mobile breakpoint still hides the sidebar outright in CSS, because that
   one has to work even if the script never runs.
   ========================================================================== */

html[data-side="rail"] { --side-w: var(--side-w-rail); }
html[data-side="rail"] .sidebar {
  align-items: center;
  padding: 14px 10px;
  overflow-x: hidden;
}
html[data-side="rail"] .side-top { padding: 2px 0 12px; }

/*
 * Every word-bearing element, hidden together.
 *
 * `> span:not(.ic)` rather than `span`: the icons are spans too, and hiding
 * them would leave a rail of empty boxes. `overflow-x: hidden` on the sidebar
 * is the belt-and-braces guard — if a future block forgets to hide its text,
 * the rail degrades to a clipped icon rather than a broken layout.
 */
html[data-side="rail"] .side-link > span:not(.ic),
html[data-side="rail"] .logo-text,
html[data-side="rail"] .logo-word,
html[data-side="rail"] .logo-tag,
html[data-side="rail"] .side-ca { display: none !important; }

html[data-side="rail"] .side-link { justify-content: center; padding: 11px; }
html[data-side="rail"] .side-bottom { align-items: center; width: 100%; margin-top: auto; }

/*
 * The wallet button keeps its dot — it is the only state signal down here —
 * but drops to a quiet square. A full-blue 38px block in the rail reads as a
 * blob with a speck in it rather than as a control, and the machine's INSERT
 * SOL is the primary action on this page anyway.
 */
html[data-side="rail"] .wallet-btn--block {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 6px 0 10px;
  background: var(--ink-3);
  border-color: #34343F;
  box-shadow: var(--sh-ui-1);
}
html[data-side="rail"] .wallet-btn--block:hover { background: #26262F; filter: none; }
html[data-side="rail"] .wallet-btn--block .dot { width: 9px; height: 9px; }
html[data-side="rail"] .wallet-btn--block [data-wallet-label] { display: none; }

/*
 * The 78px rail has no room for a logo and a button side by side, so the head
 * becomes a column: chevron on top, mark below. `align-items: center` is
 * load-bearing — in a column the cross axis is horizontal, so without it the
 * 30px button sits at the start of the row and the 38px mark at the end.
 */
html[data-side="rail"] .side-head {
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  width: 100%;
}
html[data-side="rail"] .logo { flex: none; justify-content: center; }

/* ==========================================================================
   Top bar
   --------------------------------------------------------------------------
   Only exists when the sidebar does not — a phone. It carries the brand and
   the wallet, which is all that is left once the nav and the signage live in
   the sidebar.
   ========================================================================== */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 58px;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--line-thin) solid var(--hairline);
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: none; }
.brand-mark {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-word {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.wallet-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  background: var(--ui-fg);
  color: var(--ui-ink);
  border: var(--line-thin) solid var(--ink);
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 0 var(--ui-lo), 0 4px 0 2px var(--ink);
  transition: transform var(--fast), filter var(--fast), box-shadow var(--fast);
  white-space: nowrap;
}
.wallet-btn:hover { filter: brightness(1.06); }
.wallet-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-lo), 0 1px 0 2px var(--ink); }
.wallet-btn.is-connected {
  background: var(--ink-3);
  color: var(--on-ink);
  border-color: #34343F;
  box-shadow: var(--sh-ui-2);
}
/* The dot inverts with the button: dark on the light resting button, bright on
   the dark connected one. The connected state is legible without a green. */
.wallet-btn .dot { background: rgba(11, 11, 12, .45); }
.wallet-btn.is-connected .dot { background: var(--ui-fg); }

/* In the sidebar it is a full-width block, not a corner control. */
.wallet-btn--block {
  width: 100%;
  justify-content: center;
  margin: 6px 0 10px;
  flex: none;
}

/* ==========================================================================
   The wrap — everything below the machine
   ========================================================================== */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 46px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================================
   The price notice
   ========================================================================== */

.notice { border-color: var(--ui-line-2); }
.notice-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-ink-2);
}
.notice-body b { color: var(--on-ink); }
.notice-ic {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ui-wash);
  border: var(--line-thin) solid var(--ui-edge);
  border-radius: 8px;
  color: var(--ui-fg);
  font-family: var(--px);
  font-size: 15px;
}

/* ==========================================================================
   Shared row language
   ========================================================================== */

/* The section-header glyph. Drawn rather than an emoji, so it takes the UI's
   colour like everything else. */
.plate-ic { width: 15px; height: 15px; flex: none; color: var(--ui-fg-3); }

.board-host { min-height: 60px; }

.rowline {
  display: grid;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border-bottom: var(--line-thin) dashed #24242C;
  transition: background var(--fast);
}
.rowline:last-child { border-bottom: none; }
.rowline:hover { background: #17171C; }
/* The platform row is marked by a faint light wash rather than a gold one. */
.rowline.is-platform { background: var(--ui-wash); }
.rowline.is-platform:hover { background: rgba(242, 239, 230, .13); }

/* registry: rank | avatar | who | mcap | link */
.r-registry { grid-template-columns: 30px 38px minmax(0, 1fr) auto auto; }

/* vendors: rank | wallet | launches | mcap */
.r-vendor { grid-template-columns: 30px minmax(0, 1fr) auto auto; }

.rank {
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: var(--px);
  font-size: 13px;
  font-weight: 700;
  background: var(--ink-3);
  border: var(--line-thin) solid #30303A;
  color: var(--on-ink-2);
}
/* Rank 1 is the brightest badge rather than a coloured one. */
.rank-1 { background: var(--ui-fg); border-color: var(--ui-fg); color: var(--ui-ink); }
.rank-2 { background: #22222A; border-color: #3A3A46; color: #C9C5DA; }
.rank-3 { background: rgba(255,140,60,.13); border-color: rgba(255,140,60,.4); color: #F0A371; }

.avatar {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 9px;
  background: var(--ink-3);
  border: var(--line-thin) solid #2C2C36;
  object-fit: cover;
  image-rendering: pixelated;
  overflow: hidden;
}
.avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--px);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-ink-2);
}

.rl-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rl-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13.5px;
  min-width: 0;
}
.rl-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--on-ink-2);
  min-width: 0;
  flex-wrap: wrap;
}
.rl-sub .mono { font-size: 11px; }

.rl-val {
  text-align: right;
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.rl-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--on-ink-2); }
.rl-val .dash { color: #5A5750; }

.rl-link {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: var(--line-thin) solid #30303A;
  border-radius: 8px;
  color: var(--on-ink-2);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.rl-link:hover { color: var(--ui-fg); border-color: var(--ui-edge); background: var(--ui-wash); }

/* ==========================================================================
   Empty states — designed, not an afterthought
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 34px 22px;
  text-align: center;
  color: var(--on-ink-2);
}
.empty .empty-ic { opacity: .8; }
.empty .empty-title { font-family: var(--px); font-size: 16px; color: var(--on-ink); }
.empty p { font-size: 13px; max-width: 46ch; line-height: 1.55; }

/* ==========================================================================
   Vendor metric note
   ========================================================================== */

.metric-note {
  border-top: var(--line-thin) dashed #24242C;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-ink-2);
}
.metric-note b { color: var(--on-ink); }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { display: grid; gap: 10px; margin-bottom: 18px; }
.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  background: #17171C;
  border: var(--line-thin) solid #26262E;
  border-radius: 13px;
}
.step-n {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--ui-wash);
  border: var(--line-thin) solid var(--ui-edge);
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ui-fg);
}
.step-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.step-text { font-size: 13px; color: var(--on-ink-2); line-height: 1.55; }
.step-text b { color: var(--on-ink); }

/* ==========================================================================
   The honesty panel
   ========================================================================== */

.honesty {
  background: #14141A;
  border: var(--line-thin) dashed #30303A;
  border-radius: 14px;
  overflow: hidden;
}
.honesty-head {
  padding: 11px 14px;
  border-bottom: var(--line-thin) dashed #30303A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--on-ink-2);
}
.honesty-list { display: grid; }
.honesty-list li {
  padding: 12px 14px;
  border-bottom: var(--line-thin) dashed #26262E;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-ink-2);
}
.honesty-list li:last-child { border-bottom: none; }
.honesty-list b { color: var(--on-ink); }
.honesty-list code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--ink-3);
  border: 1px solid #2E2E38;
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ui-fg-2);
}

/* ==========================================================================
   The sidebar's social row
   ========================================================================== */

.side-social {
  display: flex;
  gap: 6px;
  margin: 4px 6px 2px;
}

.side-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink-2);
  border: var(--line-thin) solid var(--hairline);
  color: var(--on-ink-2);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.side-ic svg { width: 16px; height: 16px; }
.side-ic:hover { color: var(--ui-fg); border-color: var(--ui-edge); background: var(--ink-3); }

/* Not ready yet. It stays in place rather than disappearing, so the row does not
   reflow the moment a mint is set — and it cannot be clicked or tabbed to, so it
   is never a link that goes nowhere. */
.side-ic[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

html[data-side="rail"] .side-social {
  flex-direction: column;
  align-items: center;
  margin-inline: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 20px 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: var(--line-thin) solid #1E1E24;
  font-size: 12.5px;
}
.foot-word { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.foot-right { margin-left: auto; display: flex; gap: 14px; }
.foot-right a:hover { color: var(--ui-fg); }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 36px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  background: var(--ink-2);
  border: var(--line-thin) solid #30303A;
  border-radius: 13px;
  box-shadow: var(--sh-ui-3);
  font-size: 13px;
  font-weight: 600;
  animation: toast-in .2s var(--ease);
}
/*
 * Toasts, distinguished by weight and by the glyph they already lead with
 * (! for a failure, ✓ for a success, • for a note) rather than by hue.
 */
.toast-err { border-color: rgba(242,239,230,.7); color: var(--ui-fg); border-left-width: 4px; }
.toast-ok  { border-color: var(--ui-edge); color: var(--ui-fg); }
.toast-info { border-color: var(--ui-line-2); color: var(--ui-fg-2); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   The pack sheet — a pack's real odds, opened from the case
   ========================================================================== */

.pack-sheet-back {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 6, 8, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sheet-fade .16s ease;
}
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }

.pack-sheet {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ink-2);
  border: var(--line-thin) solid #34343F;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ui-3);
  animation: sheet-rise .2s var(--ease);
}
@keyframes sheet-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.ps-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: var(--line-thin) solid #26262E;
}
.ps-art {
  width: 54px;
  height: 64px;
  flex: none;
  object-fit: cover;
  image-rendering: pixelated;
  background: var(--ink-3);
  border: var(--line-thin) solid #30303A;
  border-radius: 8px;
}
.ps-meta { min-width: 0; flex: 1; }
.ps-name { font-size: 21px; font-weight: 700; line-height: 1.1; }
.ps-ticker { font-size: 12.5px; color: var(--on-ink-2); }
.ps-close {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: var(--line-thin) solid #30303A;
  border-radius: 8px;
  color: var(--on-ink-2);
  font-size: 18px;
  line-height: 1;
  transition: background var(--fast), color var(--fast);
}
.ps-close:hover { background: #23232B; color: var(--on-ink); }

.ps-body { padding: 15px; }
.ps-blurb {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-ink-2);
  margin-bottom: 13px;
}

.ps-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.ps-stat {
  padding: 10px 11px;
  background: #17171C;
  border: var(--line-thin) solid #26262E;
  border-radius: 11px;
}
.ps-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  margin-bottom: 4px;
}
.ps-stat-value { font-size: 19px; font-weight: 700; line-height: 1.1; }
.ps-stat-sub { font-size: 10.5px; color: #6E6A5E; margin-top: 2px; }

.ps-note {
  margin-top: 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--on-ink-2);
  padding: 10px 11px;
  background: var(--ui-wash);
  border-left: 3px solid var(--ui-edge);
  border-radius: 0 9px 9px 0;
}

.ps-actions { margin-top: 13px; }
.ps-actions .btn { width: 100%; }

/* The empty slot a sold-out shelf leaves behind. */
/* ==========================================================================
   Responsive
   ========================================================================== */

/*
 * Below 860px the sidebar leaves the flow entirely and becomes a drawer.
 *
 * It is not turned into a rail here, the way a dashboard would: a 78px rail
 * beside a 3:4 object crushes the one thing this site exists to show, and the
 * brief is explicit that the phone layout is the best version of the design.
 * So the machine gets the whole width, and the sidebar is one tap away — the
 * same markup, off-canvas, so the nav is never lost.
 */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100dvh;
    width: min(84vw, 300px);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--mid) var(--ease);
    box-shadow: 8px 0 28px rgba(0, 0, 0, .6);
    /* The drawer is always the full column, never the rail. */
    align-items: stretch;
  }
  .sidebar.is-open { transform: none; }

  .side-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .58);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mid) var(--ease);
  }
  .side-scrim.is-open { opacity: 1; pointer-events: auto; }

  .wrap { padding: 26px 14px 40px; gap: 14px; }
  .r-registry { grid-template-columns: 26px 34px minmax(0, 1fr) auto; }
  .r-vendor { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .rl-link { display: none; }
  .avatar { width: 34px; height: 34px; }
}

/* The drawer handle, and the scrim that closes it. Both are phone-only. */
.side-open { display: none; }
.side-scrim { display: none; }

@media (max-width: 860px) {
  .side-open {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: var(--line-thin) solid #2C2C36;
    border-radius: 10px;
    background: var(--ink-2);
    color: var(--on-ink-2);
  }
  .side-open:hover { color: var(--on-ink); border-color: var(--ui-edge); }
  .side-scrim { display: block; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .brand-word { font-size: 20px; }
  .wallet-btn { font-size: 12px; padding: 0 10px; height: 34px; }
  .rowline { padding: 9px 12px; gap: 9px; }
  .r-registry { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .r-registry .avatar { display: none; }
  .r-vendor { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .rl-name { font-size: 13px; }
  .foot { padding: 18px 12px 36px; }
  .foot-right { margin-left: 0; width: 100%; }
}