/* StockAVAX — the shell every page wears.
 *
 * This file exists because the five pages each carried their own copy of the
 * tokens, header, footer and buttons. They had already drifted, and a rebrand
 * or a phone-layout fix meant editing the same rule five times and missing one.
 * Everything below is shared by two or more pages; anything used once stays in
 * that page's own <style> block.
 *
 * One committed dark world: near-black ground, Avalanche red. There is no light
 * theme on purpose — the brand is a red glow on black, and a naive inversion
 * would make the accent unreadable. Every colour is painted explicitly so the
 * page never borrows a host's background.
 */

:root {
  /* Mint on near-black -- HyperEVM's own palette, so the site reads as part of
     the chain it launches on rather than as a blue SaaS template.
     Every value below is a token; no rule outside this block should carry a
     colour literal, and the handful that still do are fallbacks for a
     stylesheet that failed to load.

     Ratios are measured against the FOUR grounds below. On a dark theme the
     hard one is --card-hi, the lightest panel; on the light palette this
     replaced it was --card, the white one. A value carried across without
     re-measuring fails on the ground nobody checked. */

  /* ground and panels */
  --bg:        #0A0E0D;
  --bg-2:      #0F1614;
  --card:      #111817;
  --card-hi:   #17201E;
  --line:      #222E2B;
  --line-hi:   #354642;

  /* text */
  --fg:        #E8F5F1;   /* 14.9 at worst */
  --muted:     #8FA8A1;   /* 6.6 */
  /* #6E8781 was the obvious pick and lands at 4.32 on --card-hi, under AA on
     every caption, label, axis figure and hint. This is the first value that
     clears 4.5 on all four grounds while staying clearly dimmer than --muted. */
  --dim:       #7C9690;   /* 5.25 */
  --fg-2:      #C9DBD5;   /* 11.6 -- long-form prose, softer than --fg */

  /* brand.
     --accent-hi is the BRIGHTER hover shade here. On the light palette it was
     the darker one, which is the way round a light theme wants it; carried
     over unchanged it would have made hover recede into the page. */
  --accent:      #97FCE4;   /* 13.8 as type; carries dark ink as a button */
  --accent-hi:   #BFFFF0;
  --accent-soft: #10241F;   /* a tint of the accent, not a wash of white */
  --accent-ink:  #97FCE4;
  --accent-2:    #5FD9BC;
  --on-accent:   #06231C;   /* 13.7 on --accent */

  --glow:        rgba(151, 252, 228, .22);
  --glow-soft:   rgba(151, 252, 228, .08);

  /* market direction. The light palette's #047857 and #C81E1E are 1.6 and 2.4
     against this ground -- they read as mud, not as numbers. */
  --up:    #5FE3B0;   /* 10.4 */
  --down:  #FF7A7A;   /* 6.6 */
  --warn:  #F2C55C;   /* 10.2 */
  --up-fill:   #5FE3B0;
  --warn-fill: #F2C55C;
  --warn-fg:   #E4D6B4;

  --r:    12px;
  --r-lg: 18px;
  --sans: Sora, "Segoe UI", system-ui, sans-serif;
  /* Four places used var(--mono) with no fallback while nothing in this fork
     ever defined it, so every hex address, function name and OHLC readout
     rendered in Sora. A proportional font is the wrong one for an address in
     particular: the digits do not align and 0/O and 1/l stop being distinct.
     Definition taken from the sibling builds, which have carried it all along. */
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Gutter and header height travel together: several pages pull elements to
     the full-bleed edge and need to know both. */
  --gut: 22px;
  --top-h: 68px;

  /* Declared, not inherited: without it a dark-OS visitor gets dark scrollbars
     and form internals on a page that is already dark, and a light-OS one gets
     LIGHT ones on this ground. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with a UA rule, and ANY author rule that sets
   display beats a UA rule whatever its specificity. .btn below sets
   display:inline-flex, which silently un-hid every button the scripts hide this
   way -- the trade panel was offering "Approve AVAX" while paying in native
   AVAX, where there is nothing to approve. Restate it as an author rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* A wide table or chart must scroll inside its own box, never take the page
     sideways with it. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 1260px; margin: 0 auto; padding: 0 var(--gut); }

/* ── header ──────────────────────────────────────────────────────────────
 * Sticky, with a red hairline under it so the page has a horizon even when
 * the content behind it is pure black. */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--glow-soft), 0 12px 30px -24px #000;
}
.top-in { display: flex; align-items: center; gap: 30px; min-height: var(--top-h); }

/* ── wordmark ────────────────────────────────────────────────────────────
 * "Stock" in near-white, "AVAX" in brand red. The two halves are one word,
 * so they never wrap apart. */
.mark { display: flex; align-items: center; gap: 10px; flex: none; }
/* The mark is one file referenced everywhere rather than SVG pasted into ten
   headers, so it is cached once and only ever edited in one place. */
.mark .glyph { width: 34px; height: 34px; flex: none; display: block; border-radius: 8px;
               filter: drop-shadow(0 0 8px var(--glow)); }
.mark .word { font-weight: 800; font-size: 21px; letter-spacing: -.6px; white-space: nowrap; }
.mark .word i { font-style: normal; color: var(--fg); font-weight: 500; }
.mark .word b { font-weight: 800; color: var(--accent); }
.mark .sub {
  display: block; font-size: 7.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim); margin-top: 1px;
}

/* Scoped to .top so a future nav elsewhere on a page does not inherit a
   header's layout, and given a backstop it did not have.

   MEASURED AT FULL WIDTH, which is the only place the number is true: with six
   items the one-row header needs 1212px (mark 232 + nav 509 + wallet cluster
   367 + 2x30 gap + 2x22 gutter). Measured at 1000px instead it reads 1075,
   because the <=1024 query has already shrunk the gaps and the type -- take
   that figure and the breakpoint lands below what the wide layout costs, which
   is how the old 900 was arrived at.

   Between 901 and 1211 the header was therefore one row that did not fit, and
   the whole PAGE scrolled sideways -- on a laptop, not a phone, which is why
   nobody saw it. Raising the breakpoint closes the band; the min-width and
   overflow-x below make it impossible to reopen by adding a seventh link. */
.top nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted);
           min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
nav a { position: relative; padding: 4px 0; transition: color .15s; flex: none; white-space: nowrap; }
nav a:hover { color: var(--fg); }
nav a[aria-current] { color: var(--fg); font-weight: 600; }
nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--glow);
}
/* position:relative so the wallet picker's `position:absolute` resolves against
   the header cluster rather than the page. */
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px;
             position: relative; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  border-radius: 10px; padding: 10px 16px; font: 500 14px var(--sans); cursor: pointer;
  background: var(--card-hi); color: var(--fg); border: 1px solid var(--line-hi);
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--bg-2); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card-hi); border-color: var(--line-hi); }
.btn-primary {
  /* --accent-hi is the DARKER shade in this palette, which is the way round a
     light theme wants it -- so the gradient runs accent -> accent-hi, light at
     the top. Left as it was, the button lit from below and read as pressed. */
  background: linear-gradient(180deg, var(--accent), var(--accent-hi));
  color: var(--on-accent); border-color: var(--accent-hi); font-weight: 700;
  box-shadow: 0 8px 24px -12px var(--glow);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-ink));
  border-color: var(--accent-hi);
}
.btn-primary:disabled:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hi)); }

/* The chain switcher's closed state. The open menu is built in ui.js and uses
   the same panel as the wallet menu, so the two dropdowns in this header are
   one design. A native <select> was tried first and is why: its menu is drawn
   by the OS, so on a dark page it opens as a white panel with a blue highlight
   and the system font, and no amount of `appearance:none` reaches it. */
.chain { position: relative; display: inline-flex; }
.chain-btn {
  --ctint: var(--accent);
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--sans); color: var(--fg);
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--ctint) 70%, transparent);
  border-radius: 999px; padding: 6px 12px 6px 7px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctint) 14%, transparent);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.chain-btn:hover, .chain-btn[aria-expanded="true"] {
  background: var(--card-hi); border-color: var(--ctint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ctint) 22%, transparent);
}
.chain-btn .lbl { font-weight: 500; color: var(--dim); font-size: 12.5px; }
.chain-btn .cmark { width: 22px; height: 22px; border-radius: 50%; flex: none; object-fit: contain; }
.chain-btn i { width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; background: var(--ctint);
               box-shadow: 0 0 8px var(--ctint); flex: none; }
.chain-btn .caret { width: 14px; height: 14px; flex: none; opacity: .75; margin-left: 2px; transition: transform .15s; }
.chain-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ── shared atoms ────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }

.badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  border: 1px solid var(--line-hi); border-radius: 5px; padding: 3px 6px; color: var(--muted);
}
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--card);
}
.pill {
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--muted); font-weight: 500;
}
.chip {
  border: 1px solid var(--line); background: transparent; border-radius: 9px; padding: 7px 14px;
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--line-hi); color: var(--fg); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
  box-shadow: 0 6px 18px -10px var(--glow);
}
.seg {
  background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 13px;
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.seg:hover { color: var(--fg); }
.seg[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
  box-shadow: 0 6px 18px -10px var(--glow);
}

.av {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-size: 17px; background: var(--card-hi); border: 1px solid var(--line-hi); overflow: hidden;
}
/* A pair asset's logo, wherever one is shown. */
.sk-pair { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }

.up { color: var(--up); }
.down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; }

/* Marks a figure derived from DEX prices rather than an oracle. */
.est {
  font-size: 9.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--warn); margin-left: 5px; vertical-align: middle;
}
.demo {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 5px; padding: 2px 7px; vertical-align: 2px;
}

.note { margin: 30px 0 10px; font-size: 12.5px; color: var(--dim); line-height: 1.7; max-width: 88ch; }
.empty { margin: 8px 0; font-size: 14px; color: var(--dim); }

.ca {
  font: 600 10px var(--sans); letter-spacing: .6px; color: var(--dim);
  border: 1px solid var(--line-hi); border-radius: 6px; padding: 4px 8px;
  background: transparent; cursor: pointer;
}
.ca:hover { color: var(--fg); border-color: var(--accent); }
.ca.done { color: var(--up); border-color: var(--up); }

/* Any table wide enough to overflow scrolls inside its own box.
 *
 * That keeps the page from moving sideways, but it also hides the fact that
 * there is more table: on a phone the right-hand columns simply are not there
 * and nothing says to swipe. The mask fades the right edge while the box is
 * scrollable and disappears once it is scrolled to the end, so the affordance
 * is the content itself rather than a caption nobody reads. */
.tblwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  --edge: 28px;
  mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), transparent);
}
.tblwrap.at-end { --edge: 0px; }
@media (min-width: 900px) { .tblwrap { --edge: 0px; } }

/* A contract address is 42 characters with no break opportunity anywhere in it.
   Every place one is printed has to be allowed to break: at 375px a single
   unbroken address drags the whole page sideways, which is how the docs page
   was scrolling to 434px on a phone. */
code, .kv .v, .addr, .mono { overflow-wrap: anywhere; }

/* The same rule, for the same reason, wherever a coin's own name or ticker is
   printed — and this one is hostile input, not just long input. The contract
   takes any 32 characters, so a coin can be named with no space in it at all,
   and one launched that way pushed a 375px phone out to 800px on every page
   that showed it. Nobody has to be attacked for this to happen, but anybody
   could do it deliberately, which puts it in the same class as the escaping in
   js/ui.js: chain text is untrusted, in layout as well as in markup.

   break-word, NOT anywhere. The two break a long word identically; they differ
   in whether those break opportunities count towards the element's min-content
   width. `anywhere` says they do, which inside a table lets the column collapse
   to one character wide: "Avalanche Doge" came out as a vertical stack of
   single letters in the portfolio. `break-word` breaks the word that would
   overflow and leaves the column sized by its longest word, which is what a
   name column wants. */
#tName, #tTick, #pNm, #pTk,
.tick, .nm, .sym, .coin .nm, .coin .tk, .asset .sub {
  overflow-wrap: break-word;
}

/* ── page head, shared by create / docs / portfolio ──────────────────── */
.phead { margin: 34px 0 26px; }
.phead h1 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -2px;
            line-height: 1.05; text-wrap: balance; }
.phead p { margin: 12px 0 0; color: var(--muted); max-width: 62ch; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 26px 0 46px; }
.foot { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.foot a:hover { color: var(--fg); }
.foot-mark .glyph { width: 24px; height: 24px; border-radius: 6px; }
.foot-mark .word { font-size: 16px; }
.foot-mark .sub { display: none; }
.foot .sp { margin-left: auto; }
/* The X account sits with the chain line rather than in its own row: one
   social account does not need a strip of icons, and a lone icon with no
   label reads as decoration. */
.foot .sp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot .x { display: inline-flex; align-items: center; gap: 6px; }
.foot .x:hover { color: var(--accent); }
/* --line-hi is a BORDER colour: on this ground it measures 2.11 against the
   footer, which is fine for a hairline and not for a glyph somebody reads
   between two links. --dim is the dimmest token meant for type. */
.foot .dot { color: var(--dim); }


/* ── responsive ──────────────────────────────────────────────────────────
 * Three real layouts, not one design squeezed: desktop, tablet (<=1024) and
 * phone (<=640). The nav never disappears — a site you cannot navigate on a
 * phone is broken, not minimal. */

/* tablet */
@media (max-width: 1024px) {
  :root { --gut: 18px; }
  .top-in { gap: 20px; }
  nav { gap: 20px; font-size: 14px; }
  .phead h1 { font-size: 34px; letter-spacing: -1.4px; }
}

/* the nav drops to its own scrollable row before it can collide with the
   wallet button; 900px is where that collision starts. */
@media (max-width: 1240px) {
  .top-in { min-height: 0; height: auto; flex-wrap: wrap; padding-top: 11px; gap: 12px 16px; }
  /* Full-bleed: the negative margins pull the row out to both screen edges, so
     it must also be two gutters WIDER. At width:100% it stopped two gutters
     short of the right edge -- 28px on a phone -- and that lost strip is what
     cut "Docs" off at 360 and 375. */
  nav {
    order: 3; width: calc(100% + 2 * var(--gut)); gap: 20px; overflow-x: auto; scrollbar-width: none;
    padding: 4px var(--gut) 10px; margin: 0 calc(-1 * var(--gut));
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; }
  nav a[aria-current]::after { bottom: -4px; }

  /* Scrolling down drops the nav row; scrolling up brings it straight back.
     The nav is the row to lose, not the wordmark and the wallet button.

     display:none rather than a transform or an animated height. A transform
     would move the whole header, taking the row worth keeping off screen
     instead; an animated height fights nav's own overflow-x, which is what
     makes it scroll sideways when the links do not fit. And because the header
     is sticky, its place in the flow is at the very top of the document — by
     the time this fires the page has scrolled past it, so nothing below moves
     when it shrinks. */
  .top.tucked nav { display: none; }
}

/* phone */
@media (max-width: 640px) {
  :root { --gut: 14px; }
  body { font-size: 14.5px; }
  /* The nav scrolls sideways and its scrollbar is hidden, so anything past the
     edge is invisible AND silent. At 26px gaps the six items wanted 450px of a
     347px bar: "AI" was sliced in half and "Docs" was off-screen entirely, with
     nothing on the page suggesting either existed.
     The six labels are only 292px of text, so tightening the gaps fits all of
     them on a 375px phone rather than hiding a whole page behind a gesture
     nobody knows to make. */
  .top nav {
    gap: 10px; font-size: 14px;
    /* Six labels are 292px of text in a bar that is 347px at 375px and 292px
       at 320px, so the fit is genuinely marginal: tight gaps put all six on a
       375px phone, and a 320px one still has to scroll. Fade the right edge
       rather than cutting a word in half -- a hard clip reads as the end of
       the list, a fade reads as "there is more this way". */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  /* Kept on phones now that it is a control rather than a label: the switcher
     is the only way off a chain, and the header already wraps at this width. */
  .chain-btn { padding: 5px 10px 5px 6px; font-size: 13px; }
  .top .chain-btn .lbl { display: none; }   /* the logo and name say it; the header has no room
                                            for a label on a phone */
  .mark .glyph { width: 30px; height: 30px; }
  .mark .word { font-size: 19px; }
  .mark .sub { display: none; }
  .btn { padding: 9px 14px; font-size: 13.5px; }
  .phead { margin: 24px 0 20px; }
  .phead h1 { font-size: 28px; letter-spacing: -1.1px; }
  footer { margin-top: 38px; padding: 22px 0 34px; }
  .foot { gap: 14px; font-size: 12.5px; }
  .foot .sp { margin-left: 0; width: 100%; }
}

/* Measured with the full-bleed row above: six items need 360px at 14px/10px
   gaps (zero slack at 360) and the claim page's seven need 411px. At 13px/7px
   they need 325 and 375, so every page fits from 360 up, the claim page from
   375 up, and only a 320px phone (and the claim page at 360) still scrolls
   behind the fade. */
@media (max-width: 414px) {
  .top nav { gap: 7px; font-size: 13px; }
}

@media (max-width: 380px) {
  .mark .word { font-size: 17px; }
  .btn { padding: 8px 12px; font-size: 13px; }
}

/* ── touch targets ───────────────────────────────────────────────────────
 * A fingertip is about 9mm; a mouse pointer is one pixel. Measured at 390px,
 * this site had 28 controls under 40px on the coin page alone and a cluster
 * at 24px — the chart timeframes, the buy/sell slippage buttons and the
 * custom-slippage input among them. Mis-tapping a slippage button on a trade
 * panel costs money, so this is not only a comfort question.
 *
 * min-height rather than padding, so a control grows to a thumb-sized box
 * without its text moving off the baseline it shares with its neighbours.
 *
 * The width fallback goes to 1024, not 640: pointer:coarse is the honest
 * predicate but a tablet at 820px matched neither it (in testing) nor a
 * 640px phone rule, so every iPad-sized viewport fell through the gap and
 * got 26 sub-40px controls. A narrow desktop window picking up thumb-sized
 * buttons is the cheaper mistake of the two. */
@media (pointer: coarse), (max-width: 1024px) {
  /* min-height does nothing to a non-replaced inline box, and most of these are
     <a> or <button> that some page left inline — so each one is given a box
     before it is given a height. */
  .btn, .chip, .cat, .seg, .ca,
  .tf button, .tabs button, .pw-opts button, .slip-opts button,
  /* Buy and Sell are the two most consequential controls on the site. They
     were 33px. */
  .swaptabs button,
  /* The chain switcher was missed by the first pass and measured 34px on a
     phone. It is worth naming because the phone rule SHRINKS it on purpose --
     the "Network" label is hidden and the padding cut to buy header room --
     and that is exactly what took it under a thumb. It is also the only way
     off a chain, so a mis-tap has nowhere else to go. */
  .chain-btn {
    min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* Height was only half of it. "1%" and "2%" came out 37 and 39px WIDE with
     5px between them, and this file already says a finger needs 44 -- a miss
     lands on the neighbouring slippage, which is the one mistake on this panel
     that costs money. Both rows have the width to spare: four slippage chips
     at 44px use 176 of a 314px panel. */
  .slip-opts button, .tf button { min-width: 44px; }
  /* A link sitting on its own in a panel row, not inside a sentence: it has a
     line box and nothing else, which left "Pharaoh" at 15px.

     34px was the first pass and still missed — a finger needs 44. Growing
     the link grows the row, which is what keeps two stacked rows from handing
     a tap near their shared edge to the wrong one; a 44px hit-area
     pseudo-element would overlap the neighbour instead.

     #lockProof's link is deliberately NOT here any more. It sits mid-sentence,
     where WCAG exempts it and where a 44px inline-flex box prises apart the
     line it lives on. */
  .kv a, .steps a, #tradeOut {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .tf button, .slip-opts button, .pw-opts button, .cat { padding-inline: 14px; }
  .tabs button { padding-block: 10px; }
  nav a, .foot a, .back {
    min-height: 42px; display: inline-flex; align-items: center;
  }
  /* The wordmark is the way back to Explore from every page. */
  .mark { min-height: 42px; }
  nav a[aria-current]::after { bottom: 0; }
  input[type="text"], input[type="search"], input[type="number"], select { min-height: 42px; }
  /* A transaction link in a dense table cannot be 42px without doubling the
     height of the table it sits in, but 12px is not a target either. Padding
     inside the cell buys a usable box without moving the text off its row. */
  /* Padding was the wrong lever here: 12px gave 38.7px and 13px gave 39.7px,
     because the line box under a 12px font is 13.7px and the total is padding
     plus that, not padding plus a round number. Stating the height directly
     lands on 44 — what Apple and WCAG AAA both name — and matches how every
     other target in this block is written. Rows tile without gaps, so no tap
     falls between two links. */
  td a, td button {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ── the iOS zoom guard ──────────────────────────────────────────────────
 * Safari on iPhone zooms the entire page when a focused form control has a
 * font smaller than 16px, and it does not zoom back out. The launch form had
 * nine such fields at 13-14.5px, so every tap on a name, ticker or link field
 * threw the page out of scale, and the trade panel did it on the custom
 * slippage box.
 *
 * !important is deliberate and is the narrowest tool that works: each page
 * sets its own input font with the `font:` shorthand, which is more specific
 * than anything this file can say from outside without it. A page may choose
 * the family and the weight; it may not choose a size that breaks the
 * viewport. 16px is the threshold, not a preference — below it the bug
 * returns. */
@media (pointer: coarse), (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}

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

/* A resolved social account, shown before anything is signed or launched.
 * Used by the launch form and the claim page. The name and handle are
 * somebody else's strings, so they are clipped: a 50-character name with no
 * spaces must not push the page sideways on a phone. */
.acct { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 11px 13px;
        background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.acct.busy { color: var(--dim); font-size: 13px; }
/* The initial sits under the picture, so a slow or blocked avatar still shows a letter. */
.acct-av { position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--card-hi);
           display: grid; place-items: center; font-weight: 700; color: var(--muted); overflow: hidden; }
.acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct-who { min-width: 0; flex: 1; }
.acct-who b, .acct-who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-who b { font-size: 14px; font-weight: 600; }
.acct-who span { font-size: 12px; color: var(--dim); margin-top: 2px; }
.acct a { flex: none; font-size: 12.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.acct-ok { flex: none; color: var(--up); font-weight: 700; }
.tag-beta { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn);
            border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); border-radius: 4px; padding: 1px 5px;
            margin-left: 6px; vertical-align: 1px; }
.acct-who span.acct-warn { white-space: normal; overflow: visible; color: var(--warn); }
/* Launching for several accounts: the looked-up card offers "Add", the added
 * ones stack below it, each with its own remove button. */
.acct-head { display: flex; align-items: baseline; gap: 8px; }
.acct-of { font-weight: 500; color: var(--dim); }
.acct-list { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 8px; }
.acct-list:empty { display: none; }
.acct-list .acct { margin-top: 0; }
/* The tick means "found"; in the list every account was found, so it is noise there. */
.acct-list .acct-ok { display: none; }
/* Looked up but not added: dashed, and it carries the Add button itself. */
.acct.pending { border-style: dashed; background: transparent; }
.acct-addbtn { flex: none; min-height: 32px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
               background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
               font: 600 13px var(--sans); }
.acct-addbtn:hover { background: var(--accent); color: var(--on-accent); }
.acct-addbtn:disabled { opacity: .45; cursor: not-allowed; }
.acct-rm { flex: none; min-height: 32px; background: none; border-radius: 8px; color: var(--muted);
           border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
           font: 500 12.5px var(--sans); padding: 5px 10px; cursor: pointer; }
.launch-links { margin-top: 18px; }
.launch-links:focus { outline: none; }
.claim-links { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.claim-links li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.claim-links .cl-who { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.claim-links a { color: var(--accent); font-size: 13px; }
.acct-rm:hover { color: var(--fg); border-color: var(--accent); }
.acct-rm:disabled { opacity: .45; cursor: not-allowed; }
.acct-rm .rm-x { display: none; }
/* A phone has no room for the name, View, the tick and a worded button:
 * the button becomes a cross (its aria-label still says Remove @handle). */
@media (max-width: 520px) {
  .acct-rm:not(.cl-copy) { width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
  .acct-rm .rm-t { display: none; }
  .acct-rm .rm-x { display: inline; }
  /* The id is what goes on chain: let the second line wrap rather than lose it. */
  .acct-who span { white-space: normal; overflow-wrap: anywhere; }
  /* "View" as a 32px arrow, not an 18px line of text beside the cross. */
  .acct > a { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; font-size: 0; text-decoration: none; }
  .acct > a::after { content: "\2197" / ""; font-size: 16px; }
  /* Room for the handle beside the arrow and Add: the tick says nothing the Add does not. */
  .acct.pending .acct-ok { display: none; }
}

/* Seven nav items do not fit a phone. Claim is the one reached from elsewhere
 * (the coin page, the launch toast, My coins, Docs), so it leaves the top bar
 * first -- except on its own page, where it is the "you are here" marker. */
@media (max-width: 480px) {
  nav a[href="/claim"]:not([aria-current]) { display: none; }
}