/* ============================================================
   DihPad, variant 2. Layout and style modelled on higher.run.
   The original is untouched at /.

   What was taken from the reference, measured off the live site:
     bg #050505, text #fafafa, cards rgba(255,255,255,.03) on #0c0c0c
     borders rgba(255,255,255,.07), radii 22-24px on cards, 999px pills
     a thin full-width CA strip above a pill nav (dropped: the CA is a pill in
       the nav here, beside Connect, and there is no strip)
     one centred ~440px column of stacked cards with a small connector
     a 2-column key/value stat block
     a full-width WHITE primary button with a soft glow
     near-monochrome; almost no colour anywhere

   ⚠ higher.run uses Open Runde and Geist Mono. Geist is banned on Sam's
   sites (see reference_ai-atypical-fonts). In use here:

     display  Fraunces        (Undercase)  wght + opsz + SOFT + WONK axes
     body     Instrument Sans (Instrument)
     mono     Spline Sans Mono, which sits where Geist Mono does

   ⛔ Two sans faces were rejected here before this one, both for looking like
   AI slop: Gabarito (rounded geometric) and Bricolage Grotesque (condensed
   grotesque). Gabarito was ON the approved catalog and cleared every check.
   The pattern is the shape, not the name: a generic geometric or grotesque
   sans reads as generated whatever the file is called. Hence a serif, which
   is a different category rather than another sample from the same one.

   ⚠ This variant DOES use 999px pills and large uniform radii, which the
   house anti-AI rules normally forbid. That rule exists to avoid looking
   auto-generated; deliberately matching a specific real site is the
   opposite of that, so the reference wins here.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../vendor/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../vendor/fonts/instrument-var.woff2") format("woff2-variations");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../vendor/fonts/spline-var.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
}

:root {
  --bg: #050505;
  --card: #0c0c0c;
  --card-2: rgba(255, 255, 255, 0.03);
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --chip: rgba(255, 255, 255, 0.06);
  --chip-2: rgba(255, 255, 255, 0.1);

  --text: #fafafa;
  --muted: #7c7c7c;
  --faint: #4f4f4f;

  --accent: #ff9900;
  --green: #4ee39b;
  --red: #f04438;

  /* Every glow on the page, as an rgb triplet for rgba(). Orange, not the
     reference's white: the accent here is #ff9900, and a white pool under an
     orange brand reads as two different sites stacked.
     NOTE: the alphas are deliberately NOT white's. Orange over a pure-black
     field gains chroma far faster than it gains brightness, so carrying the
     reference's alphas straight across gives the flat saturated wash that
     already bit the classic layout. Tuned on numbers with
     `node test/glowsample.mjs <label>`, which keeps the pool a pool. */
  --glow: 255, 153, 0;

  /* ⛔ No `system-ui` in the stack, even as a fallback. It is on the banned
     list and the layouts check greps the computed family, so it fails there.
     ⛔ Clearing the banned-name list is necessary, not sufficient. Two
     approved sans faces were rejected on this headline before the serif. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, Consolas, monospace;

  --r-card: 22px;
  --r-inner: 16px;
  --r-pill: 999px;
  --col: 440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* ===== AMBIENT GLOW =====
   Measured off higher.run rather than eyeballed. Two layers:

   .app-bg-glow  their `div.app-bg-glow`: 1400x855 at top 423px / left 50% with
                 translateX(-50%) in a 1440x900 viewport. Its own centre
                 therefore lands near the BOTTOM of the screen, which is why the
                 light pools low rather than behind the card column. Expressed
                 here in % / vh so it holds at any size.
   .app-bg::after  their second, tighter wash along the bottom edge.

   ⛔ The reference puts these at z-index -10 and relies on the page background
   living on an ancestor. Using a plain 0 with the content lifted to 1 is the
   same result without depending on that stacking accident. */
.app-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.app-bg-glow {
  position: absolute;
  top: 47%; left: 50%;
  width: min(1400px, 97vw); height: 95vh;
  transform: translateX(-50%);
  background: radial-gradient(
    rgba(var(--glow), 0.22) 0%,
    rgba(var(--glow), 0.10) 32%,
    rgba(var(--glow), 0.04) 52%,
    rgba(0, 0, 0, 0) 72%);
}
.app-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 40% at 50% 100%, rgba(var(--glow), 0.075), rgba(0, 0, 0, 0) 70%);
}
/* Everything real sits above the glow. */
.nav, main, footer, .sheet { position: relative; z-index: 1; }

/* ===== NAV ===== */
.nav {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 22px;
}
.brand {
  display: flex; align-items: center; gap: 9px; margin-right: 10px;
  font-family: var(--display);
  font-variation-settings: "wght" 900, "SOFT" 90, "WONK" 1, "opsz" 20;
  font-weight: 900; font-size: 18px; letter-spacing: -0.005em;
}
.brand .mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(150deg, var(--accent), #a35f00);
  display: grid; place-items: center;
}
.brand .mark svg { width: 12px; height: 12px; display: block; }
.tab {
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  padding: 7px 15px; border-radius: var(--r-pill);
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--chip); color: var(--text); }
.nav .spacer { flex: 1; }
.pillbtn {
  background: #fff; color: #000; font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-pill); padding: 9px 17px;
  transition: opacity 0.14s ease;
  /* "Connect wallet" wrapped to two lines at 390px and the pill ballooned. */
  white-space: nowrap;
}
.pillbtn:hover { opacity: 0.86; }
.pillbtn.ghost { background: var(--chip); color: var(--text); }
.pillbtn.ghost:hover { background: var(--chip-2); opacity: 1; }

/* The CA, sitting in the nav beside Connect rather than in a full-width strip
   across the top of the page. Disabled until there is a real address, because
   until then there is nothing to put on the clipboard. */
.capill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--chip); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 13px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.capill:hover:not(:disabled) { background: var(--chip-2); color: var(--text); }
.capill:disabled { cursor: default; }
.capill .k { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.capill .v { font-family: var(--mono); font-size: 10.5px; }

/* ===== COLUMN ===== */
main { flex: 1; padding: 10px 16px 60px; }
.col { width: 100%; max-width: var(--col); margin: 0 auto; }

/* The reference has no hero; it opens straight into the app with a short
   welcome. This keeps that proportion: a small title, one line, then the cards. */
/* ⚠ `WONK` 1 is the whole point of Fraunces here: it swaps in the odd, canted
   terminals that make it read as drawn rather than generated. `SOFT` rounds the
   joins so a 900 weight does not go slabby, and `opsz` is set near the rendered
   size, which is what tightens the display proportions. */
.hl {
  font-family: var(--display);
  font-variation-settings: "wght" 900, "SOFT" 90, "WONK" 1, "opsz" 48;
  font-size: 29px; font-weight: 900; letter-spacing: -0.015em;
  text-align: center; margin: 18px 0 7px;
}
.hl span { color: var(--accent); }
.intro {
  font-size: 13px; color: var(--muted); text-align: center;
  margin: 0 auto 20px; max-width: 380px; line-height: 1.5;
}

.colhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; padding: 0 4px;
}
.statepill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--chip); border-radius: var(--r-pill);
  padding: 6px 13px; font-size: 12px; font-weight: 600;
}
.statepill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--faint); }
.statepill.ok { background: rgba(78, 227, 155, 0.12); color: var(--green); }
.statepill.ok .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.statepill.bad { background: rgba(240, 68, 56, 0.12); color: var(--red); }
.statepill.bad .dot { background: var(--red); }
.colhead .side { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ===== CARDS ===== */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px;
}
.card + .card { margin-top: 8px; }
.card .lbl { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* The small arrow between two stacked cards, straight from the reference. */
.link { display: grid; place-items: center; height: 22px; color: var(--faint); font-size: 13px; }

/* dropzone lives inside a card */
.drop {
  border: 1px dashed var(--line-2); border-radius: var(--r-inner);
  background: rgba(255, 255, 255, 0.02);
  padding: 26px 18px; text-align: center; cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.drop:hover, .drop.hot { border-color: rgba(255, 153, 0, 0.5); background: rgba(255, 153, 0, 0.045); }
.drop.busy { cursor: progress; }
.drop .dt { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; }
.drop .dh { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.drop input[type=file] { display: none; }

.gate { display: flex; gap: 9px; align-items: center; margin-top: 13px; font-size: 12.5px; color: var(--muted); }
.gate input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }

.verdict { display: none; margin-top: 9px; padding: 11px 14px; border-radius: var(--r-inner); font-size: 12.5px; line-height: 1.45; }
.verdict.show { display: block; }
.verdict b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; margin-bottom: 3px; }
.verdict.pass { background: rgba(78, 227, 155, 0.09); color: #cfeede; }
.verdict.pass b { color: var(--green); }
.verdict.fail { background: rgba(240, 68, 56, 0.08); color: #f0cdca; }
.verdict.fail b { color: var(--red); }
.verdict.warn { background: rgba(255, 153, 0, 0.09); color: #f0dcbc; }
.verdict.warn b { color: var(--accent); }

.skiprow { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.skiprow .note { font-size: 11.5px; color: var(--faint); }
.linkbtn { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--text); }

/* ===== FORM ===== */
.formwrap.locked { opacity: 0.4; pointer-events: none; }
.fields { display: grid; gap: 7px; }
.fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fields input, .fields textarea {
  width: 100%; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: 13px 15px;
  color: var(--text); font-size: 14.5px; outline: none;
  transition: border-color 0.14s ease;
}
.fields input:focus, .fields textarea:focus { border-color: var(--line-2); }
.fields input::placeholder, .fields textarea::placeholder { color: var(--faint); }
.fields textarea { resize: vertical; min-height: 44px; }

/* ===== STATS, the reference's 2-column key/value block ===== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 22px; margin-top: 14px; padding: 0 4px; }
.srow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.srow span { color: var(--muted); }
.srow b { font-weight: 600; font-family: var(--mono); font-size: 10.5px; }
.srow.good b { color: var(--green); }
.srow.bad b { color: var(--red); }
.srow.warn b { color: var(--accent); }
.srow.wide { grid-column: 1 / -1; }
.srow.wide b { color: var(--accent); font-size: 10px; }
.bar { grid-column: 1 / -1; height: 2px; background: var(--chip); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }

/* ===== PRIMARY ACTION ===== */
/* The lit button, copied exactly from the reference's `button.btn-long`:
     background  linear-gradient(#fff 0%, #e8e8e8 100%)
     box-shadow  0 0 0 1px rgba(255,255,255,.35)      a hairline white ring
                 0 8px 32px -6px rgba(255,255,255,.45) glow thrown downward
                 inset 0 2px 0 rgba(255,255,255,.8)    bright top specular edge
   A single flat blur (what this was before) loses the ring and the specular,
   which are what make it read as lit rather than just white.

   The thrown glow is --glow, not the reference's white. Only that middle layer
   changes colour: the hairline ring and the inset specular are the button's own
   white material catching light, so tinting those just fringes the edge. The
   face stays white. The light it casts is warm. */
.cta {
  width: 100%; margin-top: 14px;
  background: linear-gradient(#ffffff 0%, #e8e8e8 100%);
  color: #000;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--r-inner); padding: 16px 20px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 8px 32px -6px rgba(var(--glow), 0.45),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.8);
  transition: opacity 0.14s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.cta:hover:not(:disabled) {
  background: linear-gradient(#ffffff 0%, #f2f2f2 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 10px 42px -6px rgba(var(--glow), 0.6),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.9);
}
.cta:active:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 4px 16px -6px rgba(var(--glow), 0.35),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.7);
}
.cta:disabled {
  opacity: 0.3; cursor: not-allowed;
  background: linear-gradient(#ffffff 0%, #e8e8e8 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.err { color: var(--red); font-size: 12.5px; margin-top: 9px; min-height: 16px; text-align: center; }
.launchlog { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-height: 14px; margin-top: 7px; text-align: center; }

/* ===== BOARD ===== */
.board { margin-top: 46px; }
.boardhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; padding: 0 4px; }
.boardhead h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.boardhead .count { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* A vertical list rather than a grid: the reference is a narrow column.

   ⛔⛔ `minmax(0, 1fr)`, NOT the implicit `auto` track. An `auto` track takes
   its item's MAX-CONTENT width as its growth limit, so one long coin name sized
   this single column to 347px inside a 284px container and pushed the entire
   page sideways: 45px of horizontal overflow at 320px, from the board alone.
   It was invisible for as long as the board held only the stock demo rows,
   whose names were short enough to fit. Any real launch called something like
   "Fixture Flagship" brings it straight back.
   ⛔ `.tok` also needs `min-width: 0`. Without it the row is a flex container
   with the default `auto` minimum, which refuses to go below its content. */
.grid { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr); }
.tok {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: 11px 13px;
  cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease;
}
.tok:hover { border-color: var(--line-2); background: #101010; }
.tok .av { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.tok .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tok .tile {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: var(--accent);
  background: linear-gradient(150deg, #241703, #0d0d0d);
}
.tok .mid { flex: 1; min-width: 0; }
/* ⛔ The NAME truncates, never the chip. With the whole line as one
   text-overflow box, a long coin name pushed the VERIFIED chip past the clip
   and it vanished on a phone: the row silently lost the one mark that says the
   coin passed a check. The chips are flex items that do not shrink, and only
   the name text is allowed to ellipsize. */
.tok .nm {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13.5px; font-weight: 600;
}
.tok .nm-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tok .nm .chip-v, .tok .nm .chip-f { flex: none; margin-left: 0; }
/* The address line has to clip too. Left to wrap it re-inflates the row on a
   phone, which is the same overflow by a different route. */
.tok .sy {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok .rt { text-align: right; flex-shrink: 0; }
.tok .mc { font-size: 13.5px; font-weight: 700; font-family: var(--mono); }
.tok .pg { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
/* The flagship while its mint does not exist. Warm rather than grey: it is the
   site's own coin and the one row a visitor should read, but it carries no
   figures because there are none to carry. */
.tok .pg.soon { color: #ffb648; white-space: nowrap; }
.chip-v {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  font-size: 9px; font-family: var(--mono); letter-spacing: 0.03em;
  border-radius: var(--r-pill); padding: 2px 7px;
  background: rgba(78, 227, 155, 0.12); color: var(--green);
}
/* See the note on .vbadge .vmark in the classic sheet: em-sized, flex: none,
   and ALWAYS green because green is what signifies verification. */
.chip-v .vmark { width: 1.85em; height: 1.85em; flex: none; margin-left: -1px; color: var(--green); }
.chip-v.demo { background: var(--chip); color: var(--faint); }
/* The site's own coin, so it is findable on a board of strangers' coins. */
.chip-f {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 9px; font-family: var(--mono); letter-spacing: 0.03em;
  border-radius: var(--r-pill); padding: 2px 7px; margin-left: 4px;
  background: rgba(255, 153, 0, 0.14); color: var(--accent);
}
.empty { text-align: center; padding: 30px; font-size: 12.5px; color: var(--faint); font-family: var(--mono); }

/* The tape is not part of this layout, but app.js drives it. */
#tape { display: none !important; }

/* ===== SHEET ===== */
.sheet {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: none; align-items: center; justify-content: center; padding: 18px;
}
.sheet.show { display: flex; }
.sheet-inner {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px;
  max-width: var(--col); width: 100%; max-height: 88vh; overflow-y: auto;
}
.sheet-top { display: flex; gap: 13px; align-items: center; margin-bottom: 16px; }
.sheet-top .av { width: 52px; height: 52px; border-radius: 13px; overflow: hidden; flex-shrink: 0; }
.sheet-top .av img { width: 100%; height: 100%; object-fit: cover; }
.sheet-top .tile { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--accent); background: linear-gradient(150deg, #241703, #0d0d0d); }
.sheet-top h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.sheet-top .s-sym { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.sheet .desc { font-size: 13.5px; color: var(--muted); margin-bottom: 15px; }
.sheet .stats { margin: 0 0 14px; padding: 0; gap: 7px; }
.stat { background: var(--card-2); border-radius: var(--r-inner); padding: 11px 13px; }
.stat .k { font-size: 10.5px; color: var(--faint); margin-bottom: 2px; }
.stat .v { font-size: 15px; font-weight: 700; font-family: var(--mono); }
.ca {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: 10px 13px; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  margin-bottom: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Where the numbers came from and when. A figure with no timestamp beside it
   reads as live, which after an RPC outage is a confident lie. */
.sheet-meta {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  font-family: var(--mono); font-size: 10px; color: var(--faint);
  margin-bottom: 12px;
}

/* The creator fee claim. Only rendered when the connected wallet IS the
   creator, so it is never a tease shown to someone who cannot use it. */
.feeclaim {
  background: rgba(78, 227, 155, 0.08);
  border: 1px solid rgba(78, 227, 155, 0.26);
  border-radius: var(--r-inner); padding: 12px 13px; margin-bottom: 13px;
}
.feeclaim .fc-head {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--green); margin-bottom: 7px;
}
.feeclaim .fc-body { display: flex; align-items: center; gap: 10px; }
.feeclaim .fc-amount {
  flex: 1; font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feeclaim .btn {
  border: 0; cursor: pointer; border-radius: var(--r-pill);
  padding: 8px 15px; font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--accent); color: #241000;
}
.feeclaim .btn[disabled] { opacity: 0.55; cursor: default; }
.feeclaim .fc-note { font-size: 10.5px; color: var(--faint); margin-top: 8px; }

.sheet-actions { display: flex; gap: 7px; }
.sheet-actions .cta { margin: 0; flex: 1; padding: 14px; font-size: 14px; }
/* The secondary action must drop the whole lit treatment, gradient included. */
.sheet-actions .cta.sec {
  background: var(--chip); background-image: none; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sheet-actions .cta.sec:hover { background: var(--chip-2); background-image: none; box-shadow: inset 0 0 0 1px var(--line-2); }

footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-size: 11.5px; color: var(--faint);
  border-top: 1px solid var(--line);
}
footer .r { display: flex; gap: 16px; }
footer a:hover { color: var(--text); }

/* The reference collapses its own nav on a phone (it swaps to a Menu button).
   These are in-page anchors and the layout is a single column, so they are
   dropped entirely rather than squeezed: at 320px the full row ran 43px off the
   right edge.
   ⛔ 680px, not 420px. The nav carries the CA pill AND a wordmark set in
   Fraunces, which is a good deal wider than the condensed sans it replaced.
   Measured across 320 to 1440, the tabs are what push the row over: 79px at
   430, 29px at 480, still 30px at 600. They only earn their place once the row
   is wide enough to hold everything else first. Re-measure after any change to
   the wordmark, the CA pill or the Connect label. */
@media (max-width: 679px) {
  .nav .tab { display: none; }
}

@media (max-width: 420px) {
  /* The nav is brand + CA + Connect at this width. The ticker label goes first,
     leaving the address itself, which is the part worth having. */
  .capill .k { display: none; }
}

@media (max-width: 560px) {
  .nav { padding: 13px 14px; gap: 6px; }
  .brand { font-size: 15px; margin-right: 4px; }
  .tab { padding: 6px 10px; font-size: 12.5px; }
  .pillbtn { font-size: 11.5px; padding: 8px 13px; }
  .capill { padding: 7px 11px; gap: 5px; }
  .capill .v { font-size: 10px; }
  .hl { font-size: 22px; }
  main { padding: 8px 12px 40px; }
  .stats { grid-template-columns: 1fr; }
  footer { padding: 16px 14px; }
}

/* 320px is the tightest real phone. brand + CA + Connect is 291px of content,
   so the nav's own padding and gaps are what tip it over.
   ⛔ This block must come AFTER the 560px one. Both match at 320px and they set
   the same properties at the same specificity, so source order decides. Written
   above it, every rule here is silently overridden and 320px still overflows. */
@media (max-width: 360px) {
  .nav { padding: 12px 10px; gap: 5px; }
  .capill { padding: 6px 9px; }
  .pillbtn { padding: 8px 11px; }
  /* ⚠ Fraunces sets wider than the condensed sans that was here before, so the
     wordmark alone put the row 11px over at 320px. */
  .brand { font-size: 15px; gap: 6px; margin-right: 0; }
  .brand .mark { width: 18px; height: 18px; border-radius: 6px; }
  .capill { padding: 6px 8px; gap: 4px; }
  .capill .v { font-size: 9.5px; }
  /* With both chips on the row at 320px the coin name truncates to two
     letters. FLAGSHIP is a label; VERIFIED is the claim. Drop the label and
     give the name its width back. */
  .tok .chip-f { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }