/* SnowFun — 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 light world: snow-white ground, Avalanche red. There is no
 * dark theme on purpose. Every colour is painted explicitly so the page never
 * borrows a host's background.
 */

:root {
  /* ground and panels: white with a cold blue cast, like snow in shade */
  --bg:        #F5F8FC;
  --bg-2:      #EEF3F9;
  --card:      #FFFFFF;
  --card-hi:   #F7F9FC;
  --line:      #E4E9F1;
  --line-hi:   #D3DAE5;

  /* text */
  --fg:        #101828;
  --muted:     #475467;
  /* Measured, not chosen by eye: 4.97:1 on card, 4.67 on bg, 4.46 on bg-2.
     The dimmest text colour that still clears WCAG AA on the grounds text
     actually sits on. */
  --dim:       #667085;
  /* long-form prose */
  --fg-2:      #344054;
  /* body text inside a warm callout */
  --warn-fg:   #7A4D0B;

  /* brand: Avalanche red. --accent is for anything clickable or branded.
     4.72:1 on white, so it is also safe as link text. */
  --accent:      #E31B23;
  --accent-hi:   #F0353C;
  --accent-deep: #B4141B;
  --accent-soft: #FDECEC;
  --on-accent:   #FFFFFF;
  --glow:        rgba(227, 27, 35, .30);
  --glow-soft:   rgba(227, 27, 35, .10);
  --shadow:      0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -14px rgba(16, 24, 40, .16);
  --shadow-hi:   0 2px 4px rgba(16, 24, 40, .05), 0 22px 44px -18px rgba(16, 24, 40, .22);

  /* market direction, both >= 5:1 on white */
  --up:    #067647;
  --down:  #D92D20;
  --warn:  #B54708;

  --r:    14px;
  --r-lg: 22px;
  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --brand: Fredoka, "Plus Jakarta Sans", system-ui, sans-serif;

  /* 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;
}

* { 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 ──────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -22px rgba(16, 24, 40, .35);
}
.top-in { display: flex; align-items: center; gap: 30px; min-height: var(--top-h); }

/* ── wordmark ────────────────────────────────────────────────────────────
 * "Snow" in ink, "Fun" in brand red, in the logo's rounded face. 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: 42px; height: 42px; flex: none; display: block; border-radius: 50%;
               background: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 12px -4px var(--glow); }
.mark .word { font: 700 25px/1 var(--brand); letter-spacing: -.3px; white-space: nowrap; }
.mark .word i { font-style: normal; color: var(--fg); }
.mark .word b { font-weight: 700; color: var(--accent); }
.mark .sub {
  display: block; font-size: 8px; font-weight: 700; letter-spacing: 1.9px;
  text-transform: uppercase; color: var(--fg-2); margin-top: 3px;
}

nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted); }
nav a { position: relative; padding: 4px 0; transition: color .15s; }
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: 50%; width: 28px; margin-left: -14px; bottom: -20px; height: 3px;
  background: var(--accent); border-radius: 3px;
}
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  border-radius: 12px; padding: 10px 18px; font: 600 14px var(--sans); cursor: pointer;
  background: var(--card); color: var(--fg); border: 1px solid var(--line-hi);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--card-hi); border-color: #BFC8D6; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card); border-color: var(--line-hi); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent); border-color: var(--accent); font-weight: 700;
  box-shadow: 0 10px 22px -10px var(--glow);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #F54A50, var(--accent-hi));
  border-color: var(--accent-hi); box-shadow: 0 12px 26px -10px var(--glow);
}
.btn-primary:disabled:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* 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: 1px solid var(--line-hi);
  border-radius: 12px; padding: 8px 14px 8px 10px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.chain-btn:hover, .chain-btn[aria-expanded="true"] {
  background: var(--card-hi); border-color: #BFC8D6;
}
.chain-btn .lbl { font-weight: 500; color: var(--dim); font-size: 12.5px; }
.chain-btn .cmark { width: 26px; height: 26px; 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); box-shadow: var(--shadow); }

.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 transparent; background: #EDF1F7; border-radius: 999px; padding: 8px 17px;
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.chip:hover { background: #E3E9F2; 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: #EDF1F7; border: 1px solid transparent; border-radius: 999px; padding: 8px 17px;
  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: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 19px; color: var(--accent); background: var(--accent-soft); border: 1px solid #F8D3D5; 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: #FEF3E2;
  border: 1px solid #F8D9A8; 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: 22px 0 40px; background: rgba(255, 255, 255, .7); }
.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: 30px; height: 30px; }
.foot-mark .word { font-size: 19px; }
.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, .foot a:hover { color: var(--accent); }
.foot .tagline { color: var(--dim); }
.foot .sp { gap: 20px; }
.foot .dot { color: var(--line-hi); }


/* ── 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; 1120px is where that collision starts with this wordmark. */
@media (max-width: 1120px) {
  .top-in { min-height: 0; height: auto; flex-wrap: wrap; padding-top: 11px; gap: 12px 16px; }
  nav {
    order: 3; width: 100%; 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; }
  /* 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; }
  /* One chain: the header picker has nothing to switch to, and it is what
     pushed the wallet button onto a second row. Explore keeps its own. */
  .top .chain { 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%; }
}

@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 {
    min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* 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; }
}