/* ============================================================
   PeenPad, 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

   ⭐ 2026-09-22: the accent went from orange to a cool pearl white
   (#f4f6f8) at Sam's instruction, "no orange shall be present". That moves
   this layout CLOSER to the reference rather than further from it, because
   the reference is monochrome too. Two consequences worth knowing before
   anyone reaches for a colour here: the only accent left is luminance, so
   emphasis has to come from brightness and size, not hue; and green and red
   are now the ONLY chromatic things on the page, which is what makes the
   verification marks read instantly.

   ⚠ 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;

  /* ⛔ The accent is a WHITE, not a colour. Anything reintroducing a hue
     here has to answer "no orange shall be present" (2026-09-22). */
  --accent: #f4f6f8;
  /* Ink for text sitting ON the accent. Near-black and slightly cool, so it
     does not read as a warm cast against a cool white face. */
  --accent-ink: #14171a;
  --green: #4ee39b;
  --red: #f04438;

  /* Every glow on the page, as an rgb triplet for rgba().
     ⛔ The alphas below are NOT the ones the orange build used. The note that
     used to live here is worth keeping as history: orange over a pure-black
     field gains chroma far faster than it gains brightness, so it had to be
     held down hard or it became a flat saturated wash. A near-neutral white
     has no chroma to gain: at the SAME alphas it is BRIGHTER, not dimmer, so
     nothing needed raising and nothing was raised. Measured rather than
     assumed, with `node test/glowsample.mjs <label>`, which prints luminance
     and chroma at eight points plus the pool depth. White at these alphas reads
     55.8 luminance at the low centre against 7.9 in the top corners, a pool
     depth of 47.9 and a chroma of 5. The orange build measured 33 with a depth
     of 20 and a chroma of 39. The top corners staying untouched is what keeps
     it a POOL rather than a wash, and that is the property to re-measure after
     any change here, not the alpha numbers themselves. */
  --glow: 226, 232, 238;

  /* ⛔ 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), #aab4bd);
  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(244, 246, 248, 0.5); background: rgba(244, 246, 248, 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(244, 246, 248, 0.09); color: #dee4ea; }
.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, #23262a, #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); }
.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); }
/* UNUSED since 2026-09-21. The flagship used to wear a FLAGSHIP tag beside its
   verified one, and Sam asked for it gone: the flagship should wear the same
   verified tag as every other row rather than a label of its own. (He said it
   in the brand's old spelling, so it is paraphrased here; the instruction is
   unchanged.) Kept because the style is the only thing that would have to be
   written again if it comes back, and it costs nothing while no markup emits
   the class. */
.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(244, 246, 248, 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, #23262a, #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: var(--accent-ink);
}
.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; } }