/**
 * Prana, the interface.
 *
 * PALETTE
 *
 * The page is PURE BLACK, and the accent is THE LOGO'S ORANGE.
 *
 * The mark is a coral to amber gradient hummingbird. Sampling it gives a warm ramp running
 * hue 16 to 24, and the brand sheet's two warm swatches are that gradient's endpoints:
 * Sunrise Coral #FF7A59 at one end, Dawn Amber #FFB547 at the other. So the brand orange is
 * a GRADIENT, not a flat colour, and primary actions carry it directly.
 *
 * There is no cyan in this interface. An earlier version used Prana Cyan for actions, which
 * was a mistake: the cyan exists only on the brand sheet, never in the mark, and putting it
 * on every button gave the product a second identity that the logo did not share.
 *
 * Text on an orange fill is Night Navy, which the sheet does provide. 7.0:1 at the coral end,
 * 10.3:1 at the amber end, so it is legible across the whole gradient.
 *
 * The greys are NEUTRAL. A blue-tinted ramp on a dark page is what made the first version
 * look generic: one hue doing every job on the screen.
 *
 * COLOUR RULE, and how orange and red stay apart.
 *
 * Red is the only risk colour, and orange is only ever an action. They are 16 to 36 degrees
 * apart in hue, which is close, so they are separated by FORM rather than by hue alone:
 *
 *   actions   large, filled, rounded rectangle, gradient, dark text
 *   risk      small, uppercase, pill, flat red, never on a control
 *
 * Nothing orange is ever a verdict, and nothing red is ever a thing you press except Sell,
 * which is red deliberately, with the down candles. Green appears on price movement only.
 *
 * TYPE
 *
 * One scale, eight steps, nothing between them. The previous version had 13, 13.5, 14, 14.5,
 * 15 and 16.5px all in use, which is why nothing quite lined up: a scale with half steps is
 * not a scale. Manrope carries the interface; JetBrains Mono carries anything that must line
 * up or be read character by character.
 *
 * ALIGNMENT
 *
 * Numbers are right aligned, always. A column of market caps is read by comparing magnitudes
 * and that only works when the digits stack. Text is left aligned. There is no third option.
 * Spacing is an 8px grid with 4px as the only half step.
 */

/* --------------------------------------------------------------------- */
/* Typefaces. Self hosted, never a font CDN: a hosted font is a third      */
/* party origin given permission to load on a page holding wallet keys.    */
/* --------------------------------------------------------------------- */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===================================================================
   * SURFACES
   *
   * Instruments are dark so the readings glow. Five steps with REAL
   * separation between them, because the previous ramp had two values a
   * single point apart that nobody could tell were different, which left
   * outlines doing all the work and nothing reading as raised.
   * =================================================================== */
  --void: #000000;
  --bg: #000000;
  --sunken: #060505;
  --panel: #0c0b0b;
  --panel-2: #141212;
  --panel-3: #1d1a19;

  /* Rules, not borders. A hairline separates; a border encloses. */
  --line: #262220;
  --line-soft: #1a1716;
  --line-hot: #3a302b;

  /* ===================================================================
   * TEXT
   *
   * Warm neutrals, not pure grey. The accent is coral, and a pure grey
   * ramp beside a warm accent reads as a default that was never chosen.
   * These carry a few degrees of the brand's own hue at very low
   * saturation, so the greys belong to this product.
   * =================================================================== */
  /**
   * Ice Mist is the BRAND text colour and it is restored here. Warming it to #f2ece9 tied it
   * to the coral, which was a reason I invented; it was never asked for and it is not ours.
   */
  --ice: #e8f7fc;
  --dim: #98a1a6;
  --faint: #677075;
  --ghost: #434b4f;

  /**
   * Large text is rendered DIMMER than body text, which is the opposite of the usual instinct.
   *
   * Glare scales with lit area, so a 54px headline at near-white on pure black throws far more
   * light at the eye than a paragraph of the same colour. Headings therefore sit a step down
   * the ramp. The contrast is still far past the accessible threshold; what it loses is the
   * harshness, which is what makes a black page tiring to sit in front of.
   */
  --display: #cfdde3;

  /* ===================================================================
   * ACCENT. One, used only where you can act.
   * =================================================================== */
  --coral: #ff7a59;
  --amber: #ffb547;
  --action: linear-gradient(118deg, var(--coral), var(--amber));
  --action-hi: linear-gradient(118deg, #ff8d70, #ffc163);
  --action-flat: #ff9850;
  --action-dim: #2a1a12;
  --on-action: #1a0d06;

  /* ===================================================================
   * SEMANTIC
   *
   * Risk stays red only: that is a product rule, not a palette choice,
   * and amber is brand so it can never mean caution. These are for form
   * and system feedback, where no risk badge is involved.
   * =================================================================== */
  --down: #ef4444;
  --down-deep: #dc2626;
  --up: #22c55e;
  --error: #ff5f56;
  --success: #22c55e;

  /* ===================================================================
   * TYPE SCALE
   *
   * Wider gaps than before. Hierarchy has to be obvious at a glance, and
   * a 17px title over 13px body is not a step, it is a nudge. A label is
   * now a quarter the size of the number it labels.
   * =================================================================== */
  --t-micro: 10.5px;
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15px;
  --t-md: 18px;
  --t-lg: 23px;
  --t-xl: 30px;
  --t-2xl: 40px;
  --t-3xl: 46px;

  /* Tracking, as tokens, so it is applied with intent rather than by feel. */
  --track-label: 0.12em;
  --track-tight: -0.02em;
  --track-display: -0.045em;

  /* ===================================================================
   * SPACING, 8px grid with 4 as the only half step.
   * =================================================================== */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --measure: 72ch;

  /* ===================================================================
   * SHAPE
   *
   * Tight. Instruments are machined, not pillowy, and a 10px radius on
   * everything is the silhouette of every component library shipped in
   * the last five years.
   * =================================================================== */
  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ===================================================================
   * ELEVATION
   *
   * Expressed as VALUE and RULE, not as a soft shadow under everything.
   * Only things that genuinely float above the page get a cast shadow:
   * the palette and dropdowns. Nothing else is lifted off the surface.
   * =================================================================== */
  --lift: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  --float: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line);

  --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--action-flat);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;

  --sans: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/**
 * The hidden attribute wins over any display we set.
 *
 * It is implemented as display:none in the browser's own sheet, so ANY author rule saying
 * display:block beats it. `.dropzone img { display: block }` therefore kept an empty <img
 * hidden> on screen, filling the tile and pushing its label out of an overflow:hidden box:
 * the control rendered as an empty square and looked broken. One line here makes that whole
 * class of bug impossible rather than fixing the one instance of it.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ice);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/**
 * One warm source, low and wide. Enough that a black page is not a terminal; far too faint to
 * read as a surface colour of its own.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 480px at 50% -18%, rgba(255, 122, 89, 0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s9);
}

/**
 * Every page gets air under the bar.
 *
 * `padding-top: 0` was set when the landing hero supplied its own, which left every other
 * page starting its heading hard against the top bar with no breathing room at all.
 */
.wrap.wide { max-width: 1360px; padding-top: var(--s6); margin: 0 auto; }

/* --------------------------------------------------------------------- */
/* Type                                                                    */
/*                                                                         */
/* Headings are tight and heavy; labels are small, uppercase and tracked   */
/* out. The gap between a label and the value it labels is the single      */
/* biggest source of hierarchy in an instrument.                           */
/* --------------------------------------------------------------------- */

h1 { font-size: var(--t-xl); line-height: 1.1; margin: 0 0 var(--s3); letter-spacing: var(--track-display); font-weight: 720; color: var(--display); }
h2 { font-size: var(--t-lg); line-height: 1.2; margin: 0 0 var(--s3); letter-spacing: -0.03em; font-weight: 700; color: var(--display); }
h3 { font-size: var(--t-md); line-height: 1.3; margin: 0 0 var(--s2); letter-spacing: var(--track-tight); font-weight: 680; color: var(--display); }
h4 { font-size: var(--t-base); line-height: 1.3; margin: 0 0 var(--s2); letter-spacing: var(--track-tight); font-weight: 700; }

p { margin: 0 0 var(--s3); color: var(--dim); }
strong { color: var(--ice); font-weight: 650; }

.lede { color: var(--dim); font-size: var(--t-base); line-height: 1.6; }
.small { font-size: var(--t-sm); color: var(--faint); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/**
 * The micro label. Used everywhere a number needs naming.
 *
 * Uppercase, tracked wide, and deliberately much smaller than its value: that ratio is what
 * makes a readout read as an instrument rather than a form field.
 */
.label,
.stat .k,
.stat-inline .k,
.latest-label,
.readout-k,
.rows .head {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--faint);
}

/* --------------------------------------------------------------------- */
/* Shell                                                                   */
/* --------------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--ice);
}

/* The mark carries the brand in a bar with nothing else of its weight, so it is sized to. */
/**
 * The mark, on the page rather than on a tile.
 *
 * The full logo with its pale background was tried and reads as an app icon pasted into a
 * dark bar: the light square competes with everything beside it. The artwork on its own
 * carries the brand better here, so it is bigger instead, which is what it needed in the
 * first place.
 */
.brand .mark {
  width: 42px;
  height: 42px;
  flex: none;
  background: url('/static/prana-logo.png') center / contain no-repeat;
}

/**
 * A card is a SURFACE, not an outline.
 *
 * Every panel previously had a 1px border and a fill one point away from the page, so nothing
 * read as raised and the outline did all the work. Here the VALUE does the lifting and the
 * rule is only there to catch the light, which is how a machined panel reads.
 */
.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--lift);
}
.card + .card { margin-top: var(--s3); }

.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.stack { display: grid; gap: var(--s3); }

hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s4) 0; }

/* --------------------------------------------------------------------- */
/* Controls                                                                */
/* --------------------------------------------------------------------- */

label {
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--faint);
  margin-bottom: var(--s2);
}

/**
 * Inputs are SUNKEN, not outlined.
 *
 * A field is a place you put something into, so it reads as recessed below the surface rather
 * than as another box drawn on top of it. That is also what stops a form looking like a stack
 * of identical rectangles.
 */
input[type=password], input[type=text], input[type=email], input[type=number], textarea {
  width: 100%;
  padding: var(--s3);
  background: var(--void);
  color: var(--ice);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 16px; /* 16px exactly, or iOS zooms the page on focus */
  outline: none;
  transition: border-color var(--fast) var(--ease);
}
input:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--line); }

textarea { font-family: var(--mono); font-size: var(--t-base); line-height: 1.7; resize: vertical; min-height: 104px; }

input:focus, textarea:focus { border-color: var(--action-flat); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--faint); }

.field { margin-bottom: var(--s4); }
.field .hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--faint); }

button {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 700;
  border-radius: var(--r);
  border: 1px solid transparent;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  letter-spacing: var(--track-tight);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
/**
 * A disabled button goes FLAT, it does not just fade.
 *
 * Dimming a gradient turns coral-to-amber into mud, which reads as a broken button rather
 * than an inactive one. Replacing the fill entirely is unambiguous.
 */
button:disabled { cursor: not-allowed; opacity: 1; }
.btn:disabled, .btn.sell:disabled {
  background: var(--panel-2);
  color: var(--faint);
  border-color: var(--line);
}
.btn.ghost:disabled { background: transparent; color: var(--faint); border-color: var(--line-soft); }

/* Primary action. The logo's gradient, Night Navy text: 7.0:1 to 10.3:1. */
.btn { width: 100%; background: var(--action); color: var(--on-action); }
.btn:hover:not(:disabled) { background: var(--action-hi); }

.btn.ghost { background: transparent; color: var(--ice); border-color: var(--line); }
.btn.ghost:hover:not(:disabled) { border-color: var(--action-flat); }

.btn.quiet { background: transparent; color: var(--dim); border-color: transparent; padding: var(--s3) var(--s1); width: auto; }
.btn.quiet:hover:not(:disabled) { color: var(--ice); }

/* Sell, and anything destructive. Red, with the down candles. */
.btn.danger { background: transparent; color: var(--down); border-color: rgba(239, 68, 68, 0.4); }
.btn.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); border-color: var(--down); }

.btn.sell { background: var(--down); color: #fff; }
.btn.sell:hover:not(:disabled) { background: var(--down-deep); }

.btns { display: grid; gap: var(--s2); }

/* --------------------------------------------------------------------- */
/* Notices                                                                 */
/* --------------------------------------------------------------------- */

/* A notice is a margin note, so it is ruled on one edge rather than enclosed. */
.note {
  border: 0;
  border-left: 2px solid var(--line-hot);
  border-radius: 0;
  padding: var(--s1) 0 var(--s1) var(--s4);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--dim);
  background: transparent;
}
.note.warn { border-left-color: var(--down); }
.note.warn strong { color: var(--ice); }
.note strong { color: var(--ice); }

.error { color: var(--down); font-size: var(--t-sm); margin-top: var(--s3); min-height: 20px; }

/* --------------------------------------------------------------------- */
/* Password strength                                                       */
/* --------------------------------------------------------------------- */

.meter { display: flex; gap: var(--s1); margin-top: var(--s2); }
.meter i { height: 3px; flex: 1; border-radius: 2px; background: var(--line); }
.meter i.on { background: var(--action-flat); }
.meter-label { font-size: var(--t-sm); color: var(--faint); margin-top: var(--s2); }

/* --------------------------------------------------------------------- */
/* The recovery phrase                                                     */
/* --------------------------------------------------------------------- */

.phrase {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  padding: var(--s4);
}

.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s3); }

.word {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ice);
}
.word b { color: var(--faint); font-weight: 400; font-size: var(--t-xs); min-width: 14px; text-align: right; }

.phrase.hidden .words { filter: blur(7px); user-select: none; pointer-events: none; }

.phrase .cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s2);
  justify-items: center;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
  padding: var(--s4);
}
.phrase:not(.hidden) .cover { display: none; }
.phrase .cover span { font-size: var(--t-sm); color: var(--ice); font-weight: 700; }
.phrase .cover small { font-size: var(--t-sm); color: var(--dim); }

.eye { width: 26px; height: 26px; stroke: var(--action-flat); fill: none; stroke-width: 1.7; }

/* --------------------------------------------------------------------- */
/* PIN                                                                     */
/* --------------------------------------------------------------------- */

.pin { display: flex; gap: var(--s2); }
.pin input {
  width: 56px;
  height: 60px;
  text-align: center;
  font-size: var(--t-lg);
  font-family: var(--mono);
  padding: 0;
}

/* --------------------------------------------------------------------- */
/* Wallet account view                                                     */
/* --------------------------------------------------------------------- */

.addr {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--dim);
  word-break: break-all;
  background: var(--sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: var(--s3);
}

.balance {
  font-family: var(--sans);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.balance small {
  font-family: var(--sans);
  font-size: var(--t-base);
  color: var(--dim);
  font-weight: 700;
  margin-left: var(--s2);
  letter-spacing: 0;
}

.menu { display: grid; }
.menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: var(--s4) var(--s1);
  color: var(--ice);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
}
.menu button:last-child { border-bottom: 0; }
.menu button:hover { color: var(--action-flat); }
.menu button .sub { font-size: var(--t-sm); color: var(--faint); font-weight: 400; }
.menu button.danger-text { color: var(--down); }

.chev { width: 16px; height: 16px; stroke: var(--faint); fill: none; stroke-width: 2; flex: none; }

/* --------------------------------------------------------------------- */
/* Views                                                                   */
/* --------------------------------------------------------------------- */

.view { display: none; }
.view.on { display: block; }
.back { margin-bottom: var(--s3); }

/* ===================================================================== */
/* Shell: a top bar.                                                      */
/*                                                                        */
/* Horizontal is where this product has spare room; vertical is where it  */
/* does not, because every screen is a long list or a tall chart. A left  */
/* rail spent 232px of width on four links. A bar spends 56px of height,  */
/* and gives search somewhere natural to live.                            */
/* ===================================================================== */

#topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

/**
 * 68px, not 56.
 *
 * 56 is a toolbar height, and this is the product's header: it carries the identity, the
 * primary action and search. Everything in it was also scaled to the smallest step on the
 * type ramp, which made a bar that was both short and quiet.
 */
.topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 68px;
}

.topbar-inner .brand { margin: 0; flex: none; font-size: var(--t-md); gap: var(--s3); }
.brand-word { letter-spacing: -0.04em; }

.top-nav { display: flex; align-items: center; gap: var(--s1); flex: none; }

.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s3);
  min-height: 40px;
  border-radius: var(--r);
  color: var(--dim);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.top-nav a svg { color: var(--faint); flex: none; }
.top-nav a:hover { color: var(--ice); background: var(--panel); }
.top-nav a:hover svg { color: var(--ice); }

/* The active item is marked by brightness and a warm icon, never a filled block: an orange
   fill is the action colour, and a nav item is not an action. */
.top-nav a.on { color: var(--ice); background: var(--panel); }
.top-nav a.on svg { color: var(--action-flat); }

/* --------------------------------------------------------------------- */
/* Search: a trigger in the bar, a palette over the page.                  */
/*                                                                         */
/* A dropdown hanging off a field competes with the page behind it and     */
/* gets cramped at narrow widths. An overlay owns the screen for the two   */
/* seconds it is open, which is the right trade for something used in a    */
/* glance and dismissed.                                                   */
/* --------------------------------------------------------------------- */

/**
 * `min-width: 0` matters more than it looks.
 *
 * A flex item defaults to `min-width: auto`, so it refuses to shrink below its own content.
 * Without this the bar could not compress on a phone, it overflowed, and the page's scroll
 * width grew past the viewport, which made EVERY section look shifted and clipped even though
 * their own rules were correct.
 */
.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 300px;
  height: 42px;
  padding: 0 var(--s4);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--faint);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.search-trigger:hover { border-color: var(--line); color: var(--dim); }
.search-trigger span { flex: 1; }
.search-trigger kbd { color: var(--faint); background: rgba(255, 255, 255, 0.06); }
.search-trigger svg { flex: none; }

/**
 * A key, not a box.
 *
 * The outlined version read as a generic chip: hard border, wide padding, boxy corners. A key
 * cap is suggested by a soft lift off the surface, so this is a subtle fill with NO border,
 * sized to its glyph rather than padded out, and set in the interface face rather than the
 * mono, which was making it look like code.
 */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 5px;
  padding: 0 5px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.palette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  padding: 12vh var(--s4) var(--s4);
}
.palette.on { display: block; }
body.palette-open { overflow: hidden; }

.palette-panel {
  max-width: 440px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.palette-field {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

/**
 * No focus ring on the palette's input.
 *
 * The global rule puts an orange ring on every focused input, which is right on a form where
 * the field is one of several things you could be in. Here the whole overlay exists for this
 * one field and nothing else can hold focus, so the ring says nothing and the orange reads as
 * a state the user is supposed to act on.
 */
.palette-field input:focus { border-color: transparent; box-shadow: none; outline: none; }
.palette-field svg { color: var(--faint); flex: none; }
.palette-field input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ice);
  font-family: var(--sans);
  font-size: var(--t-base);
  /* 2px so the caret is not drawn touching the first glyph of the placeholder. */
  padding: 0 0 0 2px;
  min-width: 0;
  caret-color: var(--action-flat);
}
.palette-field input::placeholder { color: var(--faint); }

.palette-results { max-height: 46vh; overflow-y: auto; }

.palette-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: var(--ice);
  border-bottom: 1px solid var(--line-soft);
}
.palette-row:last-child { border-bottom: 0; }
.palette-row.on { background: var(--panel-2); }
.palette-row .coin-img { width: 36px; height: 36px; border-radius: 50%; font-size: 11px; }

.palette-names { flex: 1; min-width: 0; }
.palette-line { display: flex; align-items: center; gap: var(--s2); }
.palette-line .sym { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; }
.palette-names .nm {
  font-size: var(--t-sm);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.palette-figures { text-align: right; flex: none; }
.palette-figures .mc { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.palette-figures .chg { font-size: var(--t-sm); font-variant-numeric: tabular-nums; margin-top: 1px; }

.palette-empty { padding: var(--s5) var(--s4); color: var(--faint); font-size: var(--t-sm); text-align: center; display: grid; justify-items: center; }

/* The pasted-address answer: a statement, a reason, and a way out. */
.palette-empty strong { display: block; color: var(--ice); font-size: var(--t-sm); margin-bottom: var(--s1); }
.palette-empty span { display: block; max-width: 46ch; }
.palette-out {
  display: inline-block;
  margin-top: var(--s3);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--action-flat);
  text-decoration: none;
}
.palette-out:hover { text-decoration: underline; }

.palette-hints {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line-soft);
  background: var(--sunken);
}
.hint { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--faint); }

/* --------------------------------------------------------------------- */
/* Right side: wallet, then the one action that matters                    */
/* --------------------------------------------------------------------- */

.top-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }

.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 var(--s4);
  color: var(--dim);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.wallet-chip svg { color: var(--faint); flex: none; }
.wallet-chip:hover, .wallet-chip.on { border-color: var(--action-flat); color: var(--ice); }
.wallet-chip:hover svg, .wallet-chip.on svg { color: var(--action-flat); }
.wallet-chip .mono { font-family: var(--mono); font-size: var(--t-sm); }

.top-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 42px;
  background: var(--action);
  color: var(--on-action);
  border-radius: var(--r);
  padding: 0 var(--s5);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.top-cta:hover { background: var(--action-hi); }

.main { min-width: 0; }
.wrap.wide { max-width: 1360px; margin: 0 auto; }
/**
 * The coin page starts right under the bar, and is NARROWER than the rest of the site.
 *
 * At the full 1360 the chart column ran past 1000px against a 560px height: a letterbox, where
 * a minute of trading is spread so thin that the shape of the move disappears. Pulling the
 * page in and giving the height back is what makes a candle legible, and it is why every
 * reference screen is taller than it is wide in the plot area.
 */
body.coin .wrap.wide { max-width: 1200px; padding-top: var(--s3); padding-bottom: var(--s5); }

/* --------------------------------------------------------------------- */
/* Narrow: the bar keeps brand, search and the action; links go to icons.  */
/* --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .top-nav a span { display: none; }
  .top-nav a { padding: 7px var(--s2); }
}

/* --------------------------------------------------------------------- */
/* Phone: brand, search, menu, wallet. In that order, and nothing else.    */
/*                                                                         */
/* Five text links will not fit a 390px bar, and the previous answer, a    */
/* bar fixed to the bottom of the screen, did not work at all: #topbar     */
/* carries a backdrop-filter, which makes it the containing block for      */
/* fixed children, so the bar pinned to the bottom of the HEADER and       */
/* appeared at the top of the page with its last item cut off.             */
/*                                                                         */
/* The links move into a sheet that hangs off the body, where no filtered  */
/* ancestor can capture it.                                                */
/* --------------------------------------------------------------------- */

.menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--dim);
  cursor: pointer;
}
.menu-btn:hover { color: var(--ice); border-color: var(--line-hot); }

.nav-sheet {
  position: fixed;
  top: 60px;
  left: var(--s3);
  right: var(--s3);
  z-index: 60;
  display: grid;
  gap: 2px;
  padding: var(--s2);
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--float);
}
.nav-sheet[hidden] { display: none; }

.nav-sheet-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r);
  color: var(--dim);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 600;
}
.nav-sheet-link svg { color: var(--faint); flex: none; }
.nav-sheet-link:hover { background: var(--panel-2); color: var(--ice); }
.nav-sheet-link.on { color: var(--ice); }
.nav-sheet-link.on svg { color: var(--action-flat); }
.nav-sheet-cta { margin-top: var(--s2); text-decoration: none; text-align: center; }

@media (max-width: 1080px) {
  .top-nav a span { display: none; }
  .top-nav a { padding: 7px var(--s2); }
}

@media (max-width: 860px) {
  /* Below this the links cannot fit honestly, so they go to the menu rather than shrink. */
  .top-nav { display: none; }
  .menu-btn { display: inline-flex; }
}

@media (max-width: 720px) {
  .topbar-inner { gap: var(--s2); padding-left: var(--s4); padding-right: var(--s4); height: 60px; }
  .top-cta span { display: none; }
  .wallet-chip span:not(.mono) { display: none; }
  .main { padding-bottom: var(--s7); }

  /**
   * Search becomes an icon, and joins the controls on the right.
   *
   * As a field it claimed every spare pixel and the menu button landed on top of its label.
   * There is no room on a 390px bar for a text input AND the brand AND three controls, and
   * the field was the one carrying the least: tapping it opens the same palette either way.
   *
   * It also belongs with the other controls rather than hanging off the wordmark: the left of
   * a bar is identity, the right is what you can do, and search is something you do.
   */
  /**
   * One cluster on the right, not two.
   *
   * Both the search and the controls carried `margin-left: auto`, so the free space fell
   * BETWEEN them and the bar read as three separated groups. The gap belongs before the
   * cluster, not inside it.
   */
  .top-right { order: 3; margin-left: 0; }
  .search-trigger {
    order: 2;
    margin-left: auto;
    flex: none;
    width: 38px;
    max-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .search-trigger span,
  .search-trigger kbd { display: none; }

  .menu-btn, .wallet-chip { height: 38px; }
  .top-cta { height: 38px; padding: 0 var(--s3); }
}

/* --------------------------------------------------------------------- */
/* The hero                                                                */
/*                                                                         */
/* Two lines of heading, a sentence at a readable measure, one action. The */
/* mark sits behind it on the right as part of the same composition rather */
/* than as an illustration placed beside it.                               */
/* --------------------------------------------------------------------- */

.hero { padding: var(--s6) 0 var(--s7); }

.hero h1 {
  /**
   * One line on a desktop, and balanced lines when it cannot be.
   *
   * A measure of 18ch forced the break, which left "appears" alone on a line of its own: an
   * orphan, and the shape a headline takes when a width was chosen without looking at the
   * words in it. There is room for the whole sentence at this size, so it gets it, and
   * text-wrap: balance divides the lines evenly rather than leaving one word behind when the
   * window is narrower.
   */
  font-size: clamp(32px, 3.3vw, 46px);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  font-weight: 800;
  margin: 0 0 var(--s4);
  max-width: 24ch;
  text-wrap: balance;
}

@media (min-width: 1180px) {
  /* Wide enough for the sentence to stand on one line, so it does. */
  .hero h1 { max-width: none; }
}

.hero p { font-size: var(--t-md); line-height: 1.55; max-width: 56ch; margin: 0; }

/* --------------------------------------------------------------------- */
/* The figures under the hero                                              */
/*                                                                         */
/* One ruled row, not four boxes. A label over a number with a note        */
/* underneath is the core readout of this interface, and the hairline      */
/* between them is what makes four of them read as one instrument.         */
/* --------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
  margin-top: var(--s6);
}

.stat { padding-right: var(--s5); border-right: 1px solid var(--line-soft); min-width: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }

.stat .k { display: flex; align-items: center; gap: 5px; }
.stat .k svg { opacity: 0.5; flex: none; }

.stat .v {
  font-family: var(--sans);
  font-size: var(--t-xl);
  font-weight: 620;
  color: var(--display);
  letter-spacing: var(--track-display);
  margin-top: var(--s2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Quiet, not disabled. At --ghost this read as greyed out rather than secondary. */
.stat .n { font-size: var(--t-xs); color: var(--faint); margin-top: var(--s2); }

/* --------------------------------------------------------------------- */
/* Feed                                                                    */
/* --------------------------------------------------------------------- */

/**
 * The tabs ARE the header.
 *
 * There was a "Live feed" heading with the sorts crammed to its right, which is a title that
 * says nothing the tabs do not and a control row with no room. Left aligned tabs on their own
 * line name what you are looking at AND let you change it, in one object.
 */
.feed-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.feed-head h2 { display: none; }

.list-count { font-size: var(--t-sm); color: var(--faint); margin-left: auto; }
/* With a count present the live dot no longer takes the push to the right. */
.list-count + .live { margin-left: var(--s4); }

.live { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--faint); font-weight: 600; margin-left: auto; }
/**
 * Ice Mist, deliberately colourless. Not green, because green appears only on price movement
 * and nothing green should read as Prana approving of something. Not orange either, because
 * orange means "you can act here" and this dot is not a control.
 */
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); }
.live.stale .dot { background: var(--faint); }

/**
 * Sort as underlined tabs, not pills.
 *
 * A row of pills reads as a set of buttons you could press in combination; tabs read as one
 * choice among several, which is what a sort is. The underline also costs no fill, which
 * keeps the accent reserved for things that act.
 */
.sorts { display: flex; gap: var(--s5); align-items: center; }

.sorts button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--faint);
  font-size: var(--t-base);
  font-weight: 650;
  padding: var(--s3) 0;
  margin-bottom: -1px;
  border-radius: 0;
  width: auto;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sorts button:hover { color: var(--dim); }
.sorts button.on { color: var(--ice); border-bottom-color: var(--action-flat); }

/* The feed is a readout, so it is ruled rather than boxed and sits on the page. */
.rows { border: 0; border-radius: 0; overflow: visible; background: transparent; }

/**
 * ONE grid, shared by the header and every row, so the columns cannot drift apart.
 * Text left, numbers right, fixed widths on the numeric columns so the digits stack.
 */
.rows .head,
a.coin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 140px 96px 150px;
  gap: var(--s4);
  align-items: center;
  /* Rows breathe. Cramped rows make the eye work to find the line it is on. */
  padding: var(--s5) var(--s3);
}

.rows.is-empty .head { display: none; }

.rows .head {
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--faint);
  font-weight: 800;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

/* Everything after the coin name is a number or a badge, so it aligns right. */
.rows .head > :not(:first-child),
a.coin-row > :not(:first-child) { text-align: right; justify-self: end; }

a.coin-row {
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ice);
  transition: background var(--fast) var(--ease);
}
a.coin-row:last-child { border-bottom: 0; }
a.coin-row:hover { background: var(--panel); }
/* A hairline in the accent on hover: the row is pressable and says so without a fill. */
a.coin-row:hover .coin-name .sym { color: var(--action-flat); }

.coin-id { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

/**
 * The coin's own picture, at a size worth looking at.
 *
 * 36px is an avatar beside a username. This is the only image in the row and often the only
 * thing that distinguishes two coins with similar names, so it carries real weight: 48 on a
 * desktop row and 44 on a phone, where the row is the whole screen.
 */
.coin-img {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  object-fit: cover;
  display: grid;
  place-content: center;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--faint);
}

.coin-name { min-width: 0; display: grid; gap: 3px; }

/* Ticker and name share a line; the facts that used to be columns sit under them. */
.coin-top { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.coin-top .nm {
  font-size: var(--t-sm);
  color: var(--ghost);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.coin-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--faint);
  min-width: 0;
}
.coin-meta .mono { font-family: var(--mono); font-size: 11px; }
.dot-sep { color: var(--ghost); }
/**
 * TWO anchors per row: the ticker on the left, the market cap on the right.
 *
 * The first attempt at calming this dimmed the ticker as well as the name, which left nothing
 * bright on the left at all. The eye could then only land on the value, with no way to scan
 * DOWN the list looking for a coin. A table is read in two directions and needs an anchor in
 * each: identity on the left, magnitude on the right, everything between deliberately quiet.
 */
.coin-name .sym {
  font-weight: 700;
  letter-spacing: var(--track-tight);
  font-size: var(--t-base);
  color: var(--ice);
  transition: color var(--fast) var(--ease);
}
.coin-name .nm {
  font-size: var(--t-sm);
  color: var(--ghost);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
a.coin-row:hover .coin-name .sym { color: var(--action-flat); }
.coin-name .nm {
  font-size: var(--t-sm);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/**
 * Table figures in SORA, not the mono.
 *
 * Mono guarantees alignment because every glyph is the same width, but it also makes a feed
 * read like a log file. Sora with `tabular-nums` lines the digits up while keeping the table
 * in the interface typeface. The mono is kept for the things where a HUMAN reads character by
 * character and a misread matters: addresses, mints and the recovery phrase.
 */
.cell {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--faint);
}

/* The one thing the eye is meant to land on. */
.cell.mcap { color: var(--ice); font-weight: 650; font-size: var(--t-base); }
.cell.dim { color: var(--dim); }
.cell.none { color: var(--faint); font-family: var(--sans); font-size: var(--t-sm); }

/* Price movement is the ONLY place green appears. */
/**
 * Movement is stated once, quietly.
 *
 * The sparkline beside it already carries direction in full colour, so the percentage does not
 * need to shout it a second time. Two saturated signals for one fact is what made the row
 * feel noisy.
 */
.chg.up { color: #6fbf85; }
.chg.down { color: #d1716b; }
.chg.flat { color: var(--ghost); }

/* --------------------------------------------------------------------- */
/* Risk badges.                                                            */
/*                                                                         */
/* Red is the only risk colour and severity is carried by FILL WEIGHT, not */
/* by hue: a product that signals risk cannot afford two colours that both */
/* mean caution. The ICON carries the level at a glance, which is what     */
/* lets the label stay small instead of shouting.                          */
/*                                                                         */
/*   notice    1-34    hairline outline, neutral                           */
/*   warning   35-59   red outline                                         */
/*   high      60-84   solid red                                           */
/*   critical  85-100  solid deep red, with a ring                         */
/*                                                                         */
/* A clean coin gets NO badge. Absence is the signal.                      */
/* Square-ish corners, not a pill: a pill wastes horizontal space and is   */
/* the default shape of every template on the internet.                    */
/* --------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
  font-family: var(--sans);
  letter-spacing: 0;
}

.badge svg { flex: none; opacity: 0.9; }
.badge-label { letter-spacing: 0.01em; }
.badge-score {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  padding-left: 1px;
}

.badge.notice   { color: var(--faint); border: 1px solid var(--line-soft); }
.badge.warning  { color: var(--down); border: 1px solid rgba(239, 68, 68, 0.5); }
.badge.high     { color: #fff; background: var(--down); }
.badge.critical { color: #fff; background: var(--down-deep); box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.26); }

.badge.graduated { color: var(--dim); border: 1px solid var(--line); margin-left: var(--s1); }

/* --------------------------------------------------------------------- */
/* Empty state. Designed, because on launch day it is what people see.      */
/* --------------------------------------------------------------------- */



/* --------------------------------------------------------------------- */
/* What Prana checks                                                       */
/* --------------------------------------------------------------------- */

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s6); }
.checks .c { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: var(--panel); }
.checks .c h4 { margin: 0 0 var(--s2); }
.checks .c p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }

.foot {
  /* Long lines are hard to track back. Body copy never spans the full 1100px. */
  max-width: var(--measure);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--faint);
  line-height: 1.6;
}
.foot a { color: var(--dim); }

/* --------------------------------------------------------------------- */
/* The footer                                                              */
/*                                                                         */
/* Three bands on one ruled surface: who this is, where to go, and the one  */
/* sentence that has to survive every redesign. Not a row of text links.    */
/* --------------------------------------------------------------------- */

.sitefoot {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s4);
  padding-bottom: var(--s7);
}

.sitefoot-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
}

.sitefoot-mark { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t-md); font-weight: 750; }
/* The background lives on `.brand .mark`, which is scoped to the top bar, so it is set here
   too rather than loosening that selector and changing the bar by accident. */
.sitefoot-mark .mark {
  width: 30px;
  height: 30px;
  flex: none;
  background: url('/static/prana-logo.png') center / contain no-repeat;
}

.sitefoot-says { margin: 0; max-width: 56ch; font-size: var(--t-xs); line-height: 1.6; color: var(--faint); }

/* The mark, at the size a mark is used, not a letter pretending to be one. */
.sitefoot-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--dim);
  flex: none;
}
.sitefoot-x:hover { color: var(--ice); border-color: var(--line-hot); }

.sitefoot-links,
.sitefoot-legal { display: flex; flex-wrap: wrap; gap: var(--s5); }
.sitefoot-links { padding-top: var(--s3); border-top: 1px solid var(--line-soft); }

.sitefoot-links a { color: var(--dim); text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.sitefoot-links a:hover { color: var(--ice); }

.sitefoot-legal a { color: var(--faint); text-decoration: none; font-size: var(--t-xs); }
.sitefoot-legal a:hover { color: var(--dim); }

.sitefoot-note {
  margin: 0;
  max-width: 78ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ghost);
}

@media (max-width: 720px) {
  .sitefoot-brand { grid-template-columns: auto auto; gap: var(--s3) var(--s4); }
  .sitefoot-says { grid-column: 1 / -1; }
  .sitefoot-x { justify-self: end; }
  .sitefoot-links, .sitefoot-legal { gap: var(--s4); }
}

/* A long legal page is read, not scanned, so it gets a real measure. */
.legal { max-width: 68ch; padding: var(--s6) 0 var(--s7); }
.legal h1 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.legal .legal-date { font-size: var(--t-xs); color: var(--ghost); margin-bottom: var(--s6); }
.legal h2 { font-size: var(--t-md); margin: var(--s6) 0 var(--s3); }
.legal p, .legal li { font-size: var(--t-sm); line-height: 1.7; color: var(--dim); }
.legal ul { padding-left: var(--s4); display: grid; gap: var(--s2); }
.legal strong { color: var(--ice); }

@media (max-width: 720px) {
  .sitefoot-links, .sitefoot-legal { gap: var(--s4); }
}

/* The browser self test page. */
.pass { color: var(--up); }
.fail { color: var(--down); }

/* --------------------------------------------------------------------- */
/* Narrow                                                                  */
/* --------------------------------------------------------------------- */

@media (max-width: 920px) {
  .rows .head { display: none; }
  a.coin-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s2) var(--s3);
    padding: var(--s4) var(--s2);
  }
  /* On a phone the shape and the change are enough; the figure stays with the name. */
  a.coin-row .graph { display: none; }
  .hero { padding: var(--s6) 0 var(--s5); }
  .hero h1 { font-size: var(--t-2xl); }
  .hero p { font-size: var(--t-base); }
  .wrap.wide { padding-left: var(--s4); padding-right: var(--s4); }
}

@media (max-width: 420px) {
  .words { grid-template-columns: repeat(2, 1fr); }
  .pin input { width: 48px; height: 54px; }
}

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

/* ===================================================================== */

/* ===================================================================== */
/* Launch a coin                                                          */
/* ===================================================================== */

.create-head { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.create-head h1 { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.create-head p { margin: 0; max-width: 58ch; font-size: var(--t-sm); color: var(--dim); }

.create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s3); align-items: start; }
.create-rail { position: sticky; top: var(--s3); }

/* --------------------------------------------------------------------- */
/* The steps                                                               */
/*                                                                         */
/* Numbered, and divided by rules rather than by gaps, because launching   */
/* is a sequence and the page should read as one. The number is the only   */
/* ornament on the page and it is doing a job: telling you where you are.  */
/* --------------------------------------------------------------------- */

.step { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--s5); padding: var(--s5); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }

.step-head { display: flex; gap: var(--s3); align-items: flex-start; }
.step-head h2 { margin: 0 0 4px; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; }
.step-head p { margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--faint); }

.step-n {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hot);
  border-radius: 50%;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.step-body > .field:last-child { margin-bottom: 0; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.field label .opt { color: var(--ghost); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------- */
/* The image step: a tile and its rules, side by side.                     */
/* --------------------------------------------------------------------- */

.drop-row { display: flex; gap: var(--s4); align-items: center; }

.dropzone {
  flex: none;
  width: 104px;
  height: 104px;
  border: 1px dashed var(--line-hot);
  border-radius: var(--r);
  background: var(--sunken);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dropzone:hover, .dropzone.over, .dropzone:focus-visible { border-color: var(--action-flat); background: var(--panel-2); }
.dropzone img { width: 104px; height: 104px; object-fit: cover; display: block; }
#drop-text span { font-size: var(--t-xs); color: var(--faint); font-weight: 600; }

/**
 * The rules take the room the tile leaves.
 *
 * As a flex item this defaulted to min-width:auto, so its own grid had no width to divide and
 * the text column collapsed to one word per line with the icon column on top of it. A flex
 * child that contains a grid has to be told it may shrink.
 */
.drop-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  flex: 1 1 auto;
  min-width: 0;
}
.drop-rules li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--faint);
  line-height: 1.45;
}
.drop-rules li svg { color: var(--faint); margin-top: 1px; }
.drop-rules b { color: var(--dim); font-weight: 650; }
.drop-rules b { color: var(--dim); font-weight: 650; }

/* The live meme check. Red when it would be refused, neutral when it would not. */
.check-box { font-size: var(--t-sm); line-height: 1.6; margin-top: var(--s3); }
.check-box:empty { display: none; }
.check-box.ok,
.check-box.bad {
  color: var(--dim);
  border-left: 2px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs);
}
.check-box.bad { border-left-color: var(--down); }
.check-box strong { display: block; color: var(--ice); margin-bottom: 2px; }
.check-box span { display: block; white-space: pre-line; }

/* Said once, in the flow, where it cannot be scrolled past. */
.permanent {
  margin: 0;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--sunken);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--faint);
}
.permanent strong { color: var(--ice); }

/* --------------------------------------------------------------------- */
/* The rail                                                                */
/* --------------------------------------------------------------------- */

.create-rail .kv strong { color: var(--ice); font-weight: 700; }
.create-rail .btn { margin-top: var(--s4); }
.sec-copy { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--faint); }

/* --------------------------------------------------------------------- */
/* The live preview: the feed row this coin will become.                   */
/* --------------------------------------------------------------------- */

.pv-row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pv-row .coin-img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.pv-blank {
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--ghost);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pv-names { min-width: 0; }
.pv-line { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.pv-line .sym { font-weight: 750; font-size: var(--t-base); letter-spacing: var(--track-tight); }
.pv-line .nm { color: var(--faint); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-meta { font-size: var(--t-micro); color: var(--ghost); font-family: var(--mono); margin-top: 2px; }

@media (max-width: 1020px) {
  .create-grid { grid-template-columns: minmax(0, 1fr); }
  .create-rail { position: static; }
}

@media (max-width: 720px) {
  /* The step heading stops being a column and becomes a line above its fields. */
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
  .two { grid-template-columns: 1fr; }
  .permanent { padding: var(--s4); }
}


/* --------------------------------------------------------------------- */
/* Launch, on a phone                                                      */
/*                                                                         */
/* The step column cannot survive at 390px, so the heading becomes a line  */
/* ABOVE its fields with the number inline. Everything shrinks a step:     */
/* at desktop sizes a heading, a sentence and a label stacked in a 390px   */
/* column push the first input below the fold, which is the one thing a    */
/* form must never do.                                                     */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .create-head { padding: var(--s4) 0 var(--s3); }
  .create-head h1 { font-size: var(--t-lg); }
  .create-head p { font-size: var(--t-xs); }

  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }

  /* The number sits on the heading's line rather than owning a column of its own. */
  .step-head { align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .step-head > div { flex: 1 1 100%; }
  .step-head h2 { font-size: var(--t-sm); margin-bottom: 2px; }
  .step-head p { font-size: var(--t-micro); }
  .step-n { width: 18px; height: 18px; }

  .two { grid-template-columns: 1fr; gap: var(--s2); }
  .field { margin-bottom: var(--s3); }
  .field label { font-size: var(--t-micro); }
  .step-body input, .step-body textarea { font-size: var(--t-sm); }
  .step-body textarea { min-height: 72px; }

  .drop-row { gap: var(--s3); }
  .dropzone { width: 84px; height: 84px; }
  .dropzone img { width: 84px; height: 84px; }
  .drop-rules li { font-size: var(--t-micro); }

  .permanent { padding: var(--s4); font-size: var(--t-micro); }

  /* The rail stops being a rail: price and the button come first, notes after. */
  .create-rail { position: static; }
  .create-grid { gap: var(--s3); }
}

/* ===================================================================== */
/* The coin page: one dense bar, then two ruled panels.                   */
/*                                                                        */
/* Not cards. It was four rounded boxes floating on black with 24px of    */
/* air between them, every one the same weight, which is the silhouette   */
/* of a dashboard template and which the token layer rules against: a     */
/* readout is ruled, not boxed.                                           */
/*                                                                        */
/* Identity and numbers on ONE line; the chart and the tape as their own  */
/* panels in one column; trading, curve, flow and facts as sections of    */
/* one rail. Density is the point. Nothing is padded out to look          */
/* important.                                                             */
/* ===================================================================== */

/* The coin page starts right under the bar, and is narrower than the rest
   of the site: at 1360 the plot ran past 1000px against a 560px height, a
   letterbox in which the shape of a move disappears. */
body.coin .wrap.wide { max-width: 1200px; padding-top: var(--s3); padding-bottom: var(--s5); }

.loading-strip { padding: var(--s7) 0; color: var(--faint); font-size: var(--t-sm); }

/* --------------------------------------------------------------------- */
/* The identity bar                                                        */
/* --------------------------------------------------------------------- */

.cbar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}

.cbar-id { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.cbar-id .coin-img { width: 36px; height: 36px; border-radius: 9px; font-size: var(--t-xs); }
.cbar-names { min-width: 0; }

.cbar-line { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.cbar-line h1 {
  margin: 0;
  font-size: var(--t-md);
  letter-spacing: var(--track-display);
  line-height: 1.1;
  font-weight: 750;
}
.cbar-name { color: var(--faint); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar .chiprail { margin-top: 3px; }

/**
 * The readouts: ruled apart rather than spaced apart.
 *
 * A hairline costs no width, and at six figures across a bar, space alone stops reading as
 * separation. Values take full Ice Mist and labels sit one step up from ghost, because this
 * strip is read once and then stopped reading: it has to carry at a glance.
 */
.cbar-reads { display: flex; margin-left: auto; flex-wrap: wrap; }

.read { padding: 0 var(--s4); border-right: 1px solid var(--line-soft); min-width: 86px; }
.read:first-child { border-left: 1px solid var(--line-soft); }
.read:last-child { border-right: 0; padding-right: 0; }

.read .k {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--faint);
}
.read .v {
  font-size: var(--t-md);
  font-weight: 650;
  letter-spacing: var(--track-tight);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ice);
}
.read .n { font-size: var(--t-micro); color: var(--faint); margin-top: 2px; font-family: var(--mono); }

/* --------------------------------------------------------------------- */
/* The panels                                                              */
/* --------------------------------------------------------------------- */

.coin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s3); align-items: start; }

/* The left column holds two panels of its own: the chart, then the tape.
   They were one frame; a chart is watched and a tape is scanned, and sharing
   a frame made the table read as a footer to the chart. */
.coin-main { display: grid; gap: var(--s3); min-width: 0; }

/**
 * A panel is a SURFACE things are divided on, not a box things sit in. Its children are
 * separated by rules and reach the edges, so there is one frame per column.
 */
.panel {
  background: var(--panel);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift);
}

/* A bar across a panel: controls left, a quiet reading right. */
.pbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 34px;
  padding: 0 var(--s2);
  border-bottom: 1px solid var(--line);
}
.pbar .live { margin-left: auto; }

/* The bar under the chart. A footer to the plot, so it is quieter than the bar above it. */
.pbar-foot { border-bottom: 0; border-top: 1px solid var(--line); height: 30px; }
.pbar-foot .tabs button { font-size: var(--t-micro); padding: 2px var(--s2); }
.pbar-foot #scalemodes { margin-left: var(--s3); }
.pbar-note { margin-left: auto; font-size: var(--t-micro); color: var(--ghost); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 700; }
.pbar-unit { font-size: var(--t-micro); color: var(--ghost); letter-spacing: var(--track-label); font-weight: 700; }

.chart-clock {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ghost);
  font-variant-numeric: tabular-nums;
}

.chart-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ghost);
  cursor: pointer;
}
.chart-jump:hover { color: var(--ice); background: var(--panel-2); }

.tabs { display: flex; gap: var(--s1); }
.tabs button {
  background: transparent;
  border: 0;
  color: var(--faint);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s1) var(--s3);
  border-radius: var(--r);
  width: auto;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tabs button:hover { color: var(--dim); }
.tabs button.on { color: var(--ice); background: var(--panel-2); }

/* A second tab set in the same bar must not compete with the first. */
.tabs-quiet button { font-size: var(--t-xs); }
.tabs-quiet button.on { background: transparent; color: var(--ice); box-shadow: inset 0 -2px 0 var(--action-flat); border-radius: 0; }

/**
 * The chart is sized to the VIEWPORT, not to a number someone picked.
 *
 * At a fixed height the page needed scrolling before the rail was visible, which is the one
 * thing every reference screen gets right: chart, numbers and buy box on the first screen,
 * with only the tape below the fold. The subtraction counts the bar BELOW the chart too, or
 * its own controls fall off the bottom.
 */
#chart {
  width: 100%;
  height: clamp(320px, calc(100dvh - 350px), 760px);
}

/* --------------------------------------------------------------------- */
/* The tape                                                                */
/*                                                                         */
/* One grid shared by the heading row and every row, so columns cannot     */
/* drift. Rows are short: a tape is scanned, not read.                     */
/* --------------------------------------------------------------------- */

/**
 * The list scrolls INSIDE the panel, at a fixed height.
 *
 * Unbounded it ran for a thousand rows and pushed the page into an endless scroll, and the
 * rail beside it ended long before the table did. A capped box keeps the page a page, and the
 * heading row stays stuck to the top so columns are still labelled fifty rows down.
 */
#tape {
  max-height: 336px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hot) transparent;
}
#tape::-webkit-scrollbar { width: 8px; }
#tape::-webkit-scrollbar-track { background: transparent; }
#tape::-webkit-scrollbar-thumb { background: var(--line-hot); border-radius: var(--r-pill); }
#tape::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* Counts the rows against the whole, so a truncated list cannot read as a complete one. */
.tp-foot {
  position: sticky;
  bottom: 0;
  padding: var(--s2) var(--s3);
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--ghost);
}

.tp-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 92px 104px 52px 24px;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s3);
  height: 27px;
  font-size: var(--t-xs);
  border-bottom: 1px solid var(--line-soft);
}
.tp-row:last-child { border-bottom: 0; }
.tp-row:hover { background: var(--panel-2); }

.tp-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  height: 24px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--ghost);
  border-bottom: 1px solid var(--line);
}
.tp-head:hover { background: var(--panel); }

.tp-side { font-weight: 700; font-size: var(--t-xs); }
.tp-row.buy .tp-side { color: var(--up); }
.tp-row.sell .tp-side { color: var(--down); }
.tp-rank { color: var(--ghost); font-family: var(--mono); font-weight: 500; }

.tp-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.tp-who a { color: var(--dim); text-decoration: none; font-size: var(--t-micro); font-family: var(--mono); }
.tp-who a:hover { color: var(--ice); }

/**
 * The marks that make this ours.
 *
 * A wallet named by a flag is named here too, in the row where someone is reading what it
 * did. The words come from the flag's own evidence, so a tag can never claim something the
 * flag above does not say.
 */
.tp-tag {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  white-space: nowrap;
}
.tp-tag.dev { color: var(--action-flat); border-color: var(--line-hot); }

.tp-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ice); font-size: var(--t-xs); }
.tp-age { color: var(--ghost); }
.tp-link { display: flex; justify-content: flex-end; color: var(--ghost); }
.tp-link:hover { color: var(--ice); }
.tp-none { padding: var(--s7) var(--s4); text-align: center; color: var(--faint); font-size: var(--t-sm); }

/* --------------------------------------------------------------------- */
/* Identity chips                                                          */
/* --------------------------------------------------------------------- */

.chiprail { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 2px 6px;
  text-decoration: none;
  white-space: nowrap;
}
a.chip:hover { border-color: var(--action-flat); color: var(--ice); }
.chip svg { opacity: 0.55; flex: none; }
.chip.mono { font-family: var(--mono); }

/* --------------------------------------------------------------------- */
/* The rail                                                                */
/* --------------------------------------------------------------------- */

.sec { padding: var(--s3); border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; }

.sec-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.sec-head h3 { margin: 0; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; }
.sec-head .tabs { margin-left: auto; }
.sec-head b { margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--t-base); }
.sec-note { margin-top: var(--s3); }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); background: var(--sunken); border-radius: var(--r); padding: 3px; }
/* Two words, centred. The colour and the segment carry the direction; an arrow did not. */
.sides .side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--faint);
  font-weight: 700;
  font-size: var(--t-sm);
  padding: 5px var(--s2);
  border-radius: var(--r-sm);
  width: auto;
}
/* Buy takes the brand orange, Sell takes the red of the down candles. */
.sides .side[data-side=buy].on { background: var(--action); color: var(--on-action); }
.sides .side[data-side=sell].on { background: var(--down); color: #fff; }

.sec-trade .field { margin-top: var(--s3); }
.sec-trade .btn { margin-top: var(--s3); }

.presets { display: flex; gap: var(--s1); margin-top: var(--s2); }
.presets button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 4px 0;
  border-radius: var(--r);
  width: auto;
}
.presets button:hover { border-color: var(--action-flat); color: var(--ice); }

.quote { margin-top: var(--s3); border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
.q-row { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-xs); padding: 3px 0; color: var(--faint); }
.q-row b { font-family: var(--mono); color: var(--ice); font-weight: 600; font-variant-numeric: tabular-nums; }

.kv { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-xs); color: var(--faint); }
.kv:last-child { border-bottom: 0; }
.kv a, .kv span:last-child { color: var(--dim); text-decoration: none; }
.kv a:hover { color: var(--action-flat); }

/* The receipt after a trade lands. */
.done {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  color: var(--dim);
  border-left: 2px solid var(--up);
  padding: var(--s2) var(--s3);
  background: var(--panel-2);
  border-radius: var(--r-sm);
}
.done a { color: var(--ice); }

/* --------------------------------------------------------------------- */
/* The curve: a bar, then the two SOL figures that give it meaning.        */
/* --------------------------------------------------------------------- */

.curve-bar { height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.curve-bar i { display: block; height: 100%; background: var(--action); border-radius: var(--r-pill); transition: width 400ms var(--ease); }
.curve-bar i.full { background: var(--up); }

.curve-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s2);
  font-size: var(--t-xs);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Activity: proportions, drawn.                                           */
/*                                                                         */
/* The bar is the point. Whether buying or selling is winning is a         */
/* question about ratio, and a ratio reads instantly as a proportion and   */
/* slowly as arithmetic.                                                   */
/* --------------------------------------------------------------------- */

.split { margin-bottom: var(--s3); }
.split:last-child { margin-bottom: 0; }

.split-top { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-xs); margin-bottom: 4px; }
.split-l, .split-r { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.split-top b { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.split-l b { color: var(--up); }
.split-r b { color: var(--down); }
.split-top span { color: var(--faint); }

.split-bar { height: 3px; border-radius: 2px; background: var(--down); overflow: hidden; }
.split-bar i { display: block; height: 100%; background: var(--up); }

/* ===================================================================== */
/* The risk strip, above the chart.                                       */
/*                                                                        */
/* Placement is architectural, not cosmetic: the whole product is risk    */
/* signalling, so the signal cannot sit below the chart where a trader    */
/* scrolls past what they came for to reach what matters.                 */
/*                                                                        */
/* Dense on purpose. A risk notice padded out like a marketing card reads */
/* as decoration; this is a readout, so it is built like one.             */
/* ===================================================================== */

.risk-strip {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}

.risk-strip.notice   { border-left-color: var(--faint); }
.risk-strip.warning  { border-left-color: var(--down); }
.risk-strip.high     { border-left-color: var(--down); background: rgba(239, 68, 68, 0.04); }
.risk-strip.critical { border-left-color: var(--down-deep); background: rgba(220, 38, 38, 0.07); }

/* Badge, time and the sentence on ONE line. Stacking them was most of the wasted space. */
.risk-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  row-gap: var(--s1);
}

.risk-text {
  margin: 0;
  color: var(--ice);
  font-size: var(--t-sm);
  line-height: 1.4;
  flex: 1 1 32ch;
  min-width: 0;
}

.risk-when { font-family: var(--mono); font-size: 10px; color: var(--ghost); flex: none; }
.risk-count { font-size: var(--t-micro); color: var(--faint); margin-left: auto; white-space: nowrap; flex: none; }

.risk-strip.quiet { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.risk-strip.quiet strong { font-size: var(--t-sm); }
.risk-strip.quiet span { font-size: var(--t-sm); color: var(--faint); flex: 1 1 36ch; }

/* --------------------------------------------------------------------- */
/* Evidence: every claim with the wallet and the transaction behind it.    */
/* A number with no evidence is an accusation; with the transaction it is  */
/* a fact. Laid out as a table so the columns line up down the page.       */
/* --------------------------------------------------------------------- */

.evidence {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 2px;
}

.ev-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  gap: var(--s3);
  align-items: center;
  font-size: var(--t-xs);
  line-height: 1.4;
}

.ev-what { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; color: var(--faint); }
.ev-num { font-family: var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.ev-proof { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

.proof {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  line-height: 1.3;
}
.proof:hover { border-color: var(--action-flat); color: var(--ice); }
.proof svg { opacity: 0.6; }

.ev-tag {
  font-size: 10px;
  color: var(--faint);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
.ev-tag.fresh { color: var(--down); border-color: rgba(239, 68, 68, 0.38); }

/**
 * The history lives INSIDE the strip, at the strip's own padding and width.
 *
 * It is a disclosure on the same surface, not a second panel: an earlier flag can never be
 * wider, taller or louder than the flag the page is currently about.
 */
.risk-more { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 5px; }
.risk-more summary {
  cursor: pointer;
  font-size: var(--t-micro);
  color: var(--ghost);
  font-weight: 700;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.risk-more summary:hover { color: var(--dim); }
.risk-more summary::-webkit-details-marker { display: none; }
.risk-more summary::before { content: '+ '; }
.risk-more[open] summary::before { content: '\2212 '; }

.risk-older {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2);
  padding: 4px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--faint);
}
.risk-older:first-of-type { margin-top: 4px; }
.risk-older:last-child { border-bottom: 0; padding-bottom: 0; }
/* One line each. A history that wraps is a history that grows past what it is a history of. */
.risk-older-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-older .ev-proof { flex: none; }

/* --------------------------------------------------------------------- */
/* Flags, as a list                                                        */
/* --------------------------------------------------------------------- */

.flag {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--dim);
}
.flag:last-child { border-bottom: 0; }
.flag time { font-family: var(--mono); color: var(--faint); flex: none; font-size: var(--t-xs); padding-top: 3px; }

.risk-none { font-size: var(--t-sm); color: var(--dim); line-height: 1.6; }
.risk-none strong { display: block; margin-bottom: var(--s1); }

/* --------------------------------------------------------------------- */
/* Narrower                                                                */
/* --------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cbar-reads { margin-left: 0; width: 100%; }
  .read:first-child { border-left: 0; padding-left: 0; }
}

@media (max-width: 980px) {
  .coin-grid { grid-template-columns: minmax(0, 1fr); }
  #chart { height: clamp(280px, 52dvh, 420px); }
  /* The tape loses its token column before it loses its trader. */
  .tp-row { grid-template-columns: 48px minmax(0, 1fr) 80px 48px 24px; }
  .tp-row > .tp-n:nth-of-type(2) { display: none; }
}

@media (max-width: 760px) {
  .ev-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ev-proof { justify-content: flex-start; }
  /* Narrow enough that one line per old flag would be one word per old flag. */
  .risk-older { flex-wrap: wrap; }
  .risk-older-text { white-space: normal; flex-basis: 100%; }
}

@media (max-width: 720px) {
  .cbar-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) 0; }
  .read { padding: 0 var(--s3); min-width: 0; }
  .read:first-child, .read:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .read:nth-child(3n) { border-right: 0; }
  .read .v { font-size: var(--t-base); }

  /* The unit chip goes first: the axis labels already carry the dollar sign. */
  .pbar-unit { display: none; }
  .pbar { padding: 0 var(--s2); gap: var(--s2); }
  .pbar .tabs button { padding: var(--s1) var(--s2); }
  #live-text { display: none; }
}

/* ===================================================================== */
/* STATES                                                                 */
/*                                                                        */
/* Every interactive thing gets hover, focus, active, disabled and        */
/* loading. Empty and error states are designed rather than left to       */
/* whatever the browser does, because those are the screens people meet   */
/* on their worst day with the product.                                   */
/* ===================================================================== */

/**
 * Focus is visible, always, and never removed.
 *
 * Two rings: a dark one to separate the control from whatever is behind it, then the accent.
 * That reads on both a panel and the page, which a single ring does not.
 */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

/* A press should be felt. 1px is enough and costs nothing. */
.btn:active:not(:disabled),
.btn-lg:active,
.top-cta:active { transform: translateY(1px); }

/**
 * Loading.
 *
 * A control that is working says so and stops accepting input. The bar travels rather than
 * pulsing, because travel reads as progress and a pulse reads as a decoration.
 */
.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.is-loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--on-action);
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/**
 * Skeletons, for content that is on its way.
 *
 * A dim sweep on a block the same size as the thing arriving, so the layout does not jump
 * when it lands. An empty box followed by a reflow is worse than a moment of nothing.
 */
.skeleton {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: sweep 1.4s var(--ease) infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.skeleton-row { height: 14px; margin-bottom: var(--s2); }
.skeleton-row:nth-child(2) { width: 70%; }
.skeleton-row:nth-child(3) { width: 45%; }

/**
 * Empty states.
 *
 * Designed, because on launch day the empty feed IS the product. Says what will appear here,
 * and offers the one action that changes it.
 */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s9) var(--s5);
  text-align: center;
}
.empty svg { color: var(--ghost); }
.empty h3 { margin: 0; font-size: var(--t-md); }
.empty p { margin: 0; max-width: 42ch; font-size: var(--t-sm); color: var(--faint); }
/* The one action that changes an empty list. Sized here rather than by five inline styles. */
.empty-cta { margin-top: var(--s2); padding: 11px var(--s5); width: auto; text-decoration: none; }

/* Errors speak in the semantic red, never the brand orange. */
.error { color: var(--error); font-size: var(--t-sm); margin-top: var(--s3); min-height: 18px; }

.field-error input,
.field-error textarea { border-color: var(--error); }
.field-error .hint { color: var(--error); }

/* --------------------------------------------------------------------- */
/* Rules over boxes                                                        */
/*                                                                         */
/* A hairline separates; a border encloses. Most of this interface is a     */
/* readout, and a readout is ruled, not boxed.                             */
/* --------------------------------------------------------------------- */

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s5) 0; }
hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s4) 0; }

/* --------------------------------------------------------------------- */
/* Readout: a label over a number, the core unit of this interface.         */
/* --------------------------------------------------------------------- */

.readout-pair { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.readout-pair .v {
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.readout-pair .n { font-size: var(--t-xs); color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--panel-2); }
  .is-loading::after { animation-duration: 2s; }
  .btn:active:not(:disabled) { transform: none; }
}

/* ===================================================================== */
/* The hero figure.                                                       */
/*                                                                        */
/* The mark used as a WINDOW rather than as a logo: a fine measurement    */
/* mesh shows through the silhouette, with hairline guides running off to */
/* the left. It pictures looking through something, which is what this    */
/* product does, and it is cut from our own mark so it cannot belong to   */
/* anyone else.                                                           */
/*                                                                        */
/* Static. No sweep, no drift, nothing moving. A supporting figure that   */
/* animates stops supporting and starts competing.                       */
/* ===================================================================== */

.hero { position: relative; }

.hero-figure {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 26vw, 340px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}

.hero-figure span {
  position: absolute;
  inset: 0;
  -webkit-mask: url('/static/prana-logo.png') center / contain no-repeat;
  mask: url('/static/prana-logo.png') center / contain no-repeat;
}

/* The body, nearly black and warm, so it reads as an object cut out of the page. */
.hf-form { background: linear-gradient(145deg, #241309 0%, #120a06 58%, #0a0605 100%); }

/**
 * The mesh. Two repeating hairlines, so the figure has fine internal structure instead of a
 * flat fill: texture at a scale you feel rather than read.
 */
.hf-mesh {
  background:
    repeating-linear-gradient(0deg, rgba(255, 152, 80, 0.5) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255, 152, 80, 0.5) 0 1px, transparent 1px 10px);
  opacity: 0.4;
}

/* A rim on the lit edge, which is what stops a silhouette looking like a hole. */
.hf-edge {
  background: linear-gradient(145deg, rgba(255, 152, 80, 0.85) 0%, rgba(255, 181, 71, 0.18) 26%, transparent 46%);
  mix-blend-mode: screen;
}


@media (max-width: 980px) {
  /* Below the headline's measure the figure would sit under the text, so it goes. */
  .hero-figure { display: none; }
}

/* --------------------------------------------------------------------- */
/* Hero action                                                             */
/*                                                                         */
/* One button. The aside beside it answers the question a launch button    */
/* always raises before anyone presses it, which is what it costs.         */
/* --------------------------------------------------------------------- */

.hero-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }

.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  color: var(--on-action);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 13px 24px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn-lg:hover { background: var(--action-hi); }
.btn-lg.ghost { background: transparent; color: var(--ice); border-color: var(--line); }
.btn-lg.ghost:hover { border-color: var(--action-flat); background: transparent; }

.hero-aside { font-size: var(--t-xs); color: var(--faint); }

/* --------------------------------------------------------------------- */
/* The figure joins the composition                                        */
/*                                                                         */
/* Larger, pushed past the right edge and allowed to sit behind the text   */
/* column. A figure with clear air on all four sides reads as a sticker    */
/* placed on the page rather than as part of it.                           */
/* --------------------------------------------------------------------- */

.hero { overflow: hidden; }

/**
 * Bigger and pulled in, so the figure and the headline share one frame.
 *
 * At 560px on the far right there was a dead column of black between the text and the figure,
 * which reads as two things placed on a page rather than one composition. It now reaches back
 * under the paragraph; the text sits above it on z-index, so the overlap is layering rather
 * than collision.
 */
.hero-figure {
  right: -8%;
  width: clamp(260px, 50vw, 680px);
}

/* It sits behind the words, so the frame is shared rather than divided. */
.hero h1, .hero p, .hero-actions { position: relative; z-index: 1; }

/* Texture you feel rather than a pattern you read. */
.hf-mesh { opacity: 0.26; }


/* --------------------------------------------------------------------- */
/* Sparkline                                                               */
/*                                                                         */
/* Coloured by DIRECTION, not by brand: it is price movement, which is the  */
/* one place green is allowed to appear. Drawn as SVG so it stays crisp at  */
/* any density and costs no image request.                                 */
/* --------------------------------------------------------------------- */

.cell.graph { display: flex; align-items: center; justify-content: flex-end; }
.spark { display: block; }
.spark { opacity: 0.9; }
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }
.spark-none { color: var(--ghost); font-size: var(--t-sm); }

/* --------------------------------------------------------------------- */
/* List controls: ordering and the risk filter, beside the tabs            */
/*                                                                         */
/* Deliberately NOT tabs. Reordering a list and changing what is in it are  */
/* different actions, and giving them the same shape is what made the old   */
/* row of four read as arbitrary.                                          */
/* --------------------------------------------------------------------- */

.list-controls { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }

.chip-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  width: auto;
  white-space: nowrap;
}
.chip-toggle:hover { color: var(--dim); border-color: var(--line-hot); }
.chip-toggle.on { color: var(--down); border-color: rgba(239, 68, 68, 0.5); }

/**
 * The sort menu.
 *
 * The trigger is a label and a value, the same readout shape used everywhere else on the page,
 * so the control reads as part of the instrument rather than as a form field dropped into it.
 * It is quiet by default: an ordering is not an action, so it never takes the accent.
 */
.pick { position: relative; }

.pick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  width: auto;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pick-btn:hover { border-color: var(--line-hot); }
.pick-btn svg { color: var(--ghost); flex: none; }
.pick-btn[aria-expanded='true'] { border-color: var(--line-hot); }
.pick-btn[aria-expanded='true'] svg { transform: rotate(180deg); }

.pick-k {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--ghost);
}
.pick-v { font-size: var(--t-sm); font-weight: 600; color: var(--dim); }
.pick-btn:hover .pick-v { color: var(--ice); }

/**
 * The list genuinely floats above the page, so it is the one place besides the search palette
 * that gets a cast shadow. Everything else in this interface is lifted by value and a rule.
 */
.pick-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 212px;
  padding: var(--s1);
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--float);
  display: grid;
  gap: 1px;
}
.pick-menu[hidden] { display: none; }

.pick-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
  cursor: pointer;
}
.pick-menu button:hover { background: var(--panel-2); color: var(--ice); }

/* The chosen order is marked by a rule down its left edge, not by a fill. */
.pick-menu button.on {
  color: var(--ice);
  box-shadow: inset 2px 0 0 var(--action-flat);
}

@media (max-width: 920px) {
  .feed-head { flex-wrap: wrap; gap: var(--s3); }
  .sorts { gap: var(--s4); overflow-x: auto; }
  .list-controls { margin-left: 0; width: 100%; }
}

/* A second tab set in the same bar must not compete with the first. */
.tabs-quiet button { font-size: var(--t-xs); }
.tabs-quiet button.on { background: transparent; color: var(--ice); box-shadow: inset 0 -2px 0 var(--action-flat); border-radius: 0; }
.pbar-unit { font-size: var(--t-micro); color: var(--ghost); letter-spacing: var(--track-label); font-weight: 700; }

/**
 * Phone: the readouts become an even grid, and the chart bar stops competing for width.
 *
 * Flex-wrapped they came out three on one line and one orphaned on the next, with a vertical
 * rule hanging off the end of the short row. A grid cannot do that.
 */
/* --------------------------------------------------------------------- */
/* Phone: the hero reads as one thing, not three competing for the fold.   */
/*                                                                         */
/* The heading was running at desktop size against a 390px measure, which  */
/* left it four lines tall and pushed the sentence and the action off the  */
/* screen. Smaller heading, tighter leading, and the figures below it      */
/* become two even columns instead of a ragged grid.                       */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .hero { padding: var(--s5) 0 var(--s5); }
  .hero h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; }
  .hero p { font-size: var(--t-sm); line-height: 1.55; max-width: none; }
  .hero-actions { margin-top: var(--s4); gap: var(--s3); justify-content: center; }
  .hero-aside { font-size: var(--t-micro); }

  /**
   * The mark stays on a phone, behind the words.
   *
   * Hiding it was the lazy answer: it is the only thing on the page that is ours rather than
   * typographic, and a phone screen is exactly where a page most needs something to look at.
   * It sits centred and well back, so the heading still has the contrast it needs.
   */
  .hero { position: relative; text-align: center; }
  .hero-figure {
    display: block;
    right: auto;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    /* Large enough to read as a backdrop. At 78vw it was a smudge behind a paragraph. */
    width: min(104vw, 460px);
    opacity: 0.38;
  }
  .hero h1, .hero p, .hero-actions { position: relative; z-index: 1; }
  .hero p { margin-left: auto; margin-right: auto; }

  /* Figures centre in their own column, so two columns read as a pair rather than a ledger. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) 0; }
  .stat { padding: 0 var(--s3); text-align: center; }
  .stat .k { justify-content: center; }
  .stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat .v { font-size: var(--t-lg); }

  /* The lifecycle tabs scroll rather than clip: "Graduated" was cut in half. */
  .feed-head { flex-wrap: wrap; row-gap: var(--s2); }
  .sorts {
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    gap: var(--s4);
    -webkit-overflow-scrolling: touch;
  }
  .sorts::-webkit-scrollbar { display: none; }
  .sorts button { flex: none; }
  .list-controls { margin-left: 0; width: 100%; }
}

@media (max-width: 720px) {
  .cbar-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) 0; }
  .read { padding: 0 var(--s3); min-width: 0; }
  .read:first-child, .read:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .read:nth-child(3n) { border-right: 0; }
  .read .v { font-size: var(--t-base); }

  /* The unit chip is the first thing to go: the axis labels already carry the dollar sign. */
  .pbar-unit { display: none; }
  .pbar { padding: 0 var(--s2); gap: var(--s2); }
  .pbar .tabs button { padding: var(--s1) var(--s2); }
  #live-text { display: none; }
}

/* --------------------------------------------------------------------- */
/* Paging                                                                  */
/*                                                                         */
/* The three controls are ONE group, centred, as the reference has it.      */
/* Spread edge to edge they stop being a pager and become two unrelated     */
/* buttons with a label stranded between them.                             */
/*                                                                         */
/* Both keep their outline, including the one that cannot be pressed: the   */
/* shape of the control is what makes the pair legible, and dimming it is   */
/* enough to say it is unavailable.                                        */
/* --------------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s5) var(--s3);
}
.pager[hidden] { display: none; }

.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 9px var(--s4);
  border-radius: var(--r);
  width: auto;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pager-btn:hover:not(:disabled) { border-color: var(--line-hot); color: var(--ice); }
.pager-btn:disabled { color: var(--ghost); border-color: var(--line-soft); cursor: default; }

.pager-at {
  font-size: var(--t-sm);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pager-arrow { color: var(--ghost); }
.pager-btn:hover:not(:disabled) .pager-arrow { color: var(--action-flat); }

/* The picture is the row's anchor on a phone, where there is no graph column beside it. */
@media (max-width: 720px) {
  a.coin-row .coin-img { width: 44px; height: 44px; border-radius: 11px; }
}

/* --------------------------------------------------------------------- */
/* $PRANA: a holding page                                                  */
/*                                                                         */
/* Centred, short, and sized to the screen rather than to a column, because */
/* there is nothing to put beside it and nothing more to say.               */
/* --------------------------------------------------------------------- */

.soon {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s4);
  padding: clamp(var(--s7), 12vh, var(--s9)) var(--s4);
  max-width: 60ch;
  margin: 0 auto;
}

.soon-state {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px var(--s4);
}

.soon h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--display);
}

.soon-lede { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--dim); }

/* --------------------------------------------------------------------- */
/* Footer alignment                                                        */
/*                                                                         */
/* The bands below the brand row are centred so the footer reads as one     */
/* block rather than a left edge with a paragraph hanging off it.           */
/* --------------------------------------------------------------------- */

.sitefoot-links,
.sitefoot-legal { justify-content: center; }
.sitefoot-note { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 720px) {
  /**
   * Phone: the footer stacks and centres as one column.
   *
   * The three column brand row collapsed badly, leaving the mark, the sentence and the X in
   * an arrangement that read as three unrelated things. Stacked and centred, it is one block.
   */
  .sitefoot { gap: var(--s3); text-align: center; }
  .sitefoot-brand {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s3);
  }
  .sitefoot-says { grid-column: auto; max-width: 42ch; }
  .sitefoot-x { justify-self: center; }
  .sitefoot-links, .sitefoot-legal { gap: var(--s3) var(--s4); }
  .sitefoot-note { font-size: var(--t-micro); }
}

/* --------------------------------------------------------------------- */
/* Your coins                                                              */
/*                                                                         */
/* A creator's own view, answering four questions in the order they are    */
/* asked: what have I launched, is it visible, what has it earned, can I   */
/* take that now.                                                          */
/* --------------------------------------------------------------------- */

.me-head { padding: var(--s6) 0 var(--s4); border-bottom: 1px solid var(--line); }
.me-head h1 { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.me-head p { margin: 0; font-size: var(--t-sm); color: var(--faint); font-family: var(--mono); }

/* The three readouts reuse the coin page's bar, so a figure looks the same everywhere. */
.me-reads { margin: var(--s4) 0 var(--s3); }
.me-reads .read:first-child { border-left: 0; padding-left: 0; }

.me-panel { margin-bottom: var(--s3); }
.pbar-title { font-size: var(--t-sm); font-weight: 700; color: var(--ice); }

/**
 * ONE grid, declared once, used by the heading and every row.
 *
 * The previous version declared six columns in the markup against a five column grid defined
 * for the main feed, so the columns could not line up and the last one sat outside its track.
 */
.me-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 92px 120px 132px;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  height: 62px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}
.me-row:last-child { border-bottom: 0; }
a.me-row:hover { background: var(--panel-2); }

.me-head-row {
  height: 30px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--ghost);
  border-bottom: 1px solid var(--line);
}
.me-head-row:hover { background: transparent; }

.me-coin { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.me-names { min-width: 0; }
.me-line { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.me-line .sym { font-weight: 750; font-size: var(--t-base); letter-spacing: var(--track-tight); }
.me-line .nm { color: var(--faint); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-age { font-size: var(--t-micro); color: var(--ghost); margin-top: 2px; }

.me-row .num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--ice); }
.me-row .num.quiet { color: var(--ghost); }
.me-row .num.up { color: var(--up); }
.me-row .num.down { color: var(--down); }
.me-head-row .num { color: var(--ghost); font-size: var(--t-micro); }

.badge.live { color: var(--up); border-color: rgba(34, 197, 94, 0.4); }

.me-fees { padding: var(--s4); }
.me-quiet { margin: 0; font-size: var(--t-sm); color: var(--faint); }

.me-empty {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s9) var(--s5);
  text-align: center;
}
.me-empty p { margin: 0; color: var(--faint); font-size: var(--t-sm); }
.me-empty-cta { width: auto; padding: 11px var(--s5); text-decoration: none; }

@media (max-width: 860px) {
  /* The 24h column goes first: it is the one figure a creator can get from the coin page. */
  .me-row { grid-template-columns: minmax(0, 1fr) 110px 110px; height: 58px; padding: 0 var(--s3); }
  .me-row > .num:nth-of-type(2),
  .me-head-row > .num:nth-of-type(2) { display: none; }
}

@media (max-width: 560px) {
  .me-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .me-row > .num:nth-of-type(3),
  .me-head-row > .num:nth-of-type(3) { display: none; }
}

/* --------------------------------------------------------------------- */
/* Revenue                                                                 */
/*                                                                         */
/* Panel headers carry the explanation AND the figure the panel is about,  */
/* so it is read before the chart rather than discovered after it.         */
/* --------------------------------------------------------------------- */

.rev-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s6) 0 var(--s5);
}
.rev-head-text h1 { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.rev-head-text p { margin: 0; max-width: 72ch; font-size: var(--t-sm); line-height: 1.6; color: var(--faint); }

/* Period controls, grouped as one object rather than five loose buttons. */
.pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--sunken);
  border-radius: var(--r-pill);
  flex: none;
}
.pills button {
  background: transparent;
  border: 0;
  color: var(--faint);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 5px var(--s3);
  border-radius: var(--r-pill);
  width: auto;
  cursor: pointer;
}
.pills button:hover { color: var(--dim); }
.pills button.on { background: var(--panel-2); color: var(--ice); }

/* The headline figures: large, with the label beneath, at full precision. */
.rev-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.fig { min-width: 0; }
.fig-v {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
/* No accent on a figure: the brand colour marks what you can act on, not what is large. */
.fig-v.accent { color: var(--ice); }
.fig-k { margin-top: 6px; font-size: var(--t-sm); color: var(--dim); }
.fig-n { margin-top: 2px; font-size: var(--t-micro); color: var(--ghost); font-family: var(--mono); }

.rev-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.rev-panel { margin-top: var(--s3); }

/* A panel header: what this is, why, and the one figure it is about. */
.phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}
.phead h2 { margin: 0 0 4px; font-size: var(--t-base); font-weight: 700; letter-spacing: var(--track-tight); }
.phead p { margin: 0; max-width: 64ch; font-size: var(--t-micro); line-height: 1.6; color: var(--ghost); }
.phead-right { flex: none; display: flex; align-items: center; gap: var(--s3); }
.phead-stat {
  font-size: var(--t-xs);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rev-chart { height: 230px; padding: var(--s5) var(--s4) var(--s4); }
.rev-chart-bars { height: 210px; }

.rev-none { padding: var(--s6) var(--s4); margin: 0; text-align: center; color: var(--faint); font-size: var(--t-sm); }

/* --------------------------------------------------------------------- */
/* Where the fees went: one bar, split, with the values beside the labels. */
/* --------------------------------------------------------------------- */

.rev-split { padding: var(--s5) var(--s4); display: grid; gap: var(--s4); }

.split-bar-wide {
  display: flex;
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--sunken);
  gap: 2px;
}
.split-bar-wide i { display: block; height: 100%; }

.split-legend { display: grid; gap: var(--s3); }
.split-legend-row { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-sm); }
.rev-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
.split-legend-k { color: var(--dim); flex: 1 1 auto; }
.split-legend-v { color: var(--ice); font-weight: 700; font-variant-numeric: tabular-nums; }
.split-legend-p { color: var(--ghost); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

/* --------------------------------------------------------------------- */
/* By coin                                                                 */
/* --------------------------------------------------------------------- */

.rev-ranks { padding: var(--s4); display: grid; gap: var(--s4); }

.rev-rank { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.rev-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.rev-rank-sym { font-size: var(--t-sm); font-weight: 700; color: var(--ice); }
.rev-rank-v { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; }

.rev-rank-bar { height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.rev-rank-bar i { display: block; height: 100%; background: var(--dim); opacity: 0.6; border-radius: var(--r-pill); }
.rev-rank:hover .rev-rank-bar i { opacity: 1; }
.rev-rank:hover .rev-rank-sym { color: var(--action-flat); }

.rev-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 130px 100px;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  height: 40px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  text-decoration: none;
  color: inherit;
}
.rev-row:last-child { border-bottom: 0; }
a.rev-row:hover { background: var(--panel-2); }

.rev-row-head {
  height: 32px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--ghost);
  border-bottom: 1px solid var(--line);
}
.rev-row-head:hover { background: transparent; }

.rev-coin { font-weight: 700; color: var(--ice); }
.rev-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ice); }
.rev-row .num.quiet { color: var(--ghost); }
.rev-row-head .num { color: var(--ghost); font-weight: 700; }

.rev-rates { padding: var(--s3) var(--s4) var(--s4); }

@media (max-width: 980px) {
  .rev-grid { grid-template-columns: minmax(0, 1fr); }
  .rev-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
}

@media (max-width: 720px) {
  .rev-head { padding: var(--s5) 0 var(--s4); }
  .rev-head-text h1 { font-size: var(--t-lg); }
  .phead { flex-direction: column; gap: var(--s2); padding: var(--s3); }
  .phead-right { align-self: flex-start; }
  .rev-chart { padding: var(--s4) var(--s3) var(--s3); height: 190px; }
  .rev-row { grid-template-columns: minmax(0, 1fr) 110px 96px; padding: 0 var(--s3); }
  .rev-row > .num:last-child, .rev-row-head > .num:last-child { display: none; }
}

/* --------------------------------------------------------------------- */
/* The analytics charts                                                    */
/*                                                                         */
/* One frame for the area and the bars: a plot, values down the right and  */
/* dates along the bottom. A chart you cannot read a number off is a       */
/* picture of data rather than data, which is what the first version was.  */
/* --------------------------------------------------------------------- */

.ch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 var(--s3);
  height: 100%;
}

.ch-plot { position: relative; min-width: 0; }
.ch-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Gridlines, evenly spaced, quiet enough to read through. */
.ch-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ch-line { border-top: 1px solid var(--line-soft); }

.ch-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ghost);
  font-variant-numeric: tabular-nums;
}
.ch-ytick { line-height: 1; transform: translateY(-0.4em); }

.ch-xaxis {
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ghost);
}

/* The number the chart is about, where the line ends. */
.ch-callout {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--line-hot);
  color: var(--ice);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ch-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.ch-slot { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.ch-bar { width: 100%; max-width: 22px; background: var(--dim); opacity: 0.55; border-radius: 2px 2px 0 0; }
.ch-slot:hover .ch-bar { opacity: 1; }

/* The line that turns a row of bars into a comparison. */
.ch-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-hot); }
.ch-avg-label {
  position: absolute;
  right: 0;
  top: -0.9em;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--faint);
  background: var(--panel);
  padding-left: 6px;
}

.ch-empty .ch-plot::after {
  content: 'No activity in this period';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ghost);
}

/* --------------------------------------------------------------------- */
/* Locked panels                                                           */
/*                                                                         */
/* A feature that is designed but not live. Shown rather than hidden,       */
/* because the panel states what Prana intends to do, and empty rather     */
/* than filled, because a chart of plausible looking activity is the one   */
/* thing this site can never show. A dash says "no value"; a zero would    */
/* say "we did this and the answer was none", and they are different       */
/* claims.                                                                 */
/* --------------------------------------------------------------------- */

.lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px var(--s3);
  white-space: nowrap;
}
.lock-chip::before {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  background: currentColor;
  /* The lock, drawn as a mask so it takes the chip's own colour. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.locked-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

/* Unavailable, not zero. */
.locked-v { color: var(--ghost); }

.locked-chart { position: relative; padding: 0; }

.locked-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  text-align: center;
  padding: var(--s5);
  color: var(--ghost);
  /* A faint grid, so the shape of the chart that will live here is visible behind the lock. */
  background-image:
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px);
  background-position: center;
}
.locked-veil p { margin: 0; max-width: 46ch; font-size: var(--t-xs); line-height: 1.6; color: var(--ghost); }

@media (max-width: 720px) {
  .locked-figures { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .lock-chip { white-space: normal; }
}

/* --------------------------------------------------------------------- */
/* Today                                                                   */
/*                                                                         */
/* Separate from the period figures on purpose: a 24 hour window ending    */
/* now is not the same as the calendar day, and a page showing one while   */
/* a reader assumes the other is wrong without ever being incorrect.       */
/* --------------------------------------------------------------------- */

.rev-today {
  display: flex;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}

.today-k { display: grid; gap: 2px; flex: none; min-width: 150px; }
.today-k > span:first-child { font-size: var(--t-base); font-weight: 700; color: var(--ice); }
.today-at { font-family: var(--mono); font-size: var(--t-micro); color: var(--ghost); }

.today-figs { display: flex; gap: var(--s7); flex-wrap: wrap; flex: 1 1 auto; }
.today-fig { display: grid; gap: 2px; }
.today-fig b { font-size: var(--t-md); font-weight: 700; color: var(--ice); font-variant-numeric: tabular-nums; }
.today-fig span { font-size: var(--t-micro); color: var(--ghost); }

/* The month table carries two more columns than the coin table did. */
#months-body .rev-row { grid-template-columns: minmax(0, 1fr) 120px 110px 120px 110px 90px; }

@media (max-width: 980px) {
  #months-body .rev-row { grid-template-columns: minmax(0, 1fr) 110px 100px 90px; }
  #months-body .rev-row > :nth-child(4),
  #months-body .rev-row > :nth-child(6) { display: none; }
}

@media (max-width: 720px) {
  .rev-today { gap: var(--s4); }
  .today-figs { gap: var(--s5); }
  #months-body .rev-row { grid-template-columns: minmax(0, 1fr) 100px 92px; }
  #months-body .rev-row > :nth-child(5) { display: none; }
}

/* --------------------------------------------------------------------- */
/* Revenue, on a phone                                                     */
/*                                                                         */
/* The figures become two even columns, the Today strip stacks under its   */
/* own label, and the period pills get a line of their own rather than     */
/* being squeezed beside a heading. Nothing is hidden: a revenue page that */
/* drops a column on a phone is a revenue page that reports differently    */
/* depending on where it is read.                                          */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .rev-head { flex-direction: column; align-items: stretch; gap: var(--s4); }
  .pills { align-self: flex-start; flex-wrap: wrap; }

  /* Today: the label on its own line, then the figures as an even pair of columns. */
  .rev-today { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .today-k { min-width: 0; }
  .today-figs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s3);
  }
  .today-fig b { font-size: var(--t-base); }

  .rev-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s3);
    padding: var(--s4) 0;
  }

  /* The split legend keeps its three parts on one line by letting the label shrink. */
  .split-legend-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .split-legend-v { font-size: var(--t-sm); }

  .rev-split { padding: var(--s4) var(--s3); gap: var(--s3); }
  .locked-figures { gap: var(--s4); }

  /* A chart needs height more than it needs width on a phone. */
  .rev-chart { height: 200px; }
  .rev-chart-bars { height: 180px; }
  .ch-yaxis { font-size: 9.5px; }
}

@media (max-width: 420px) {
  /* Two columns all the way down: stacking four figures turns a glance into a scroll. */
  .rev-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
}

/* --------------------------------------------------------------------- */
/* Revenue on a phone: centred                                             */
/*                                                                         */
/* A phone column has no second axis to align against, so a left edge      */
/* with short figures beside it reads as a list that lost its table.       */
/* Centred, the page reads as one column of statements.                    */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .rev-head-text { text-align: center; }
  .rev-head-text p { margin-left: auto; margin-right: auto; }
  .pills { align-self: center; justify-content: center; }

  .rev-today { text-align: center; }
  .today-k { justify-items: center; }
  .today-fig { justify-items: center; }

  .rev-figures { text-align: center; }
  .fig { display: grid; justify-items: center; }

  .locked-figures { text-align: center; }
  .locked-figures .fig { justify-items: center; }

  /* Panel headers follow, so a panel does not start left while its figures sit centred. */
  .phead { text-align: center; align-items: center; }
  .phead > div:first-child { display: grid; justify-items: center; }
  .phead p { margin-left: auto; margin-right: auto; }
  .phead-right { align-self: center; }
}

/* --------------------------------------------------------------------- */
/* Two phone layouts that only break once there is something real in them  */
/*                                                                         */
/* Both were invisible until the page carried its actual content: the bar  */
/* fitted while the wallet chip said "Wallet" and overflowed once it held  */
/* an address, and the chart bar fitted until the scale toggle was read in */
/* full. Neither is fixed here by choosing smaller numbers. Each one is    */
/* given a part that is allowed to absorb the squeeze, so the layout fits  */
/* by construction at any width rather than at the widths I tested.        */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  /**
   * THE HEADER, WITH A WALLET CONNECTED.
   *
   * `.top-right` was `flex: none`, so the cluster holding the wallet and the Launch button
   * could not give up a single pixel. Connect a wallet, the chip grows from the word "Wallet"
   * to an address, and the row becomes wider than the screen: the orange Launch button, the
   * primary action on the site, was pushed off the right edge entirely.
   *
   * The cluster may now shrink, and the shrinking lands on the WALLET ADDRESS, which is the
   * one thing here that is still useful when abbreviated. The Launch button keeps its full
   * width because an action that is half visible is not an action.
   */
  .topbar-inner { min-width: 0; }
  .topbar-inner > * { min-width: 0; }

  .top-right { flex: 0 1 auto; min-width: 0; }
  .wallet-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0 var(--s3); }
  .wallet-chip .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .top-cta { flex: none; }

  /**
   * THE CHART BAR.
   *
   * "Market cap" broke onto two lines inside a 34px bar and "Price" was cut in half at the
   * edge, so the control for what the chart is plotting could neither be read nor reached.
   *
   * The timeframes are the part that can absorb it: there are seven of them, they are all the
   * same shape, and a reader who wants 4h can scroll to 4h. So they get the leftover width and
   * scroll inside it, while the scale toggle and the live dot keep theirs. Nothing wraps,
   * because this bar is one line high by design.
   */
  .pbar { flex-wrap: nowrap; min-width: 0; }
  .pbar .tabs button { white-space: nowrap; flex: none; }

  #intervals {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* The rail scrolls; it does not advertise that it scrolls inside a 34px bar. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #intervals::-webkit-scrollbar { display: none; }

  #scale { flex: none; }
  .pbar .live { flex: none; margin-left: var(--s2); }
}

@media (max-width: 520px) {
  /**
   * The wordmark goes, the mark stays.
   *
   * On the narrowest phones there is no honest way to carry the word, an address and two
   * controls, and of those the word is the one already said by the mark beside it.
   */
  .brand-word { display: none; }
}

/* --------------------------------------------------------------------- */
/* A coin Prana cannot trade                                               */
/*                                                                         */
/* The imported coins are here so the chart, the tape and the holder list  */
/* could be read against real volume. They trade on the launchpad that     */
/* created them, against a pool Prana has no part in. The trade controls   */
/* stay in the document, because the wallet and quote code reach for them  */
/* by id, and are hidden behind a panel that says why.                     */
/* --------------------------------------------------------------------- */

.sec-trade.locked > :not(.trade-locked) { display: none; }

.trade-locked { display: grid; gap: var(--s3); }

.trade-locked-k {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ghost);
}

.trade-locked p { margin: 0; color: var(--dim); line-height: 1.5; }
.trade-locked .btn { text-decoration: none; text-align: center; }