/* ==========================================================================
   MARSCOIN — styles
   ========================================================================== */

:root {
  /* Brand */
  --orange:      #ff5c2b;   /* marks, icons, sparklines */
  --orange-ink:  #ff7043;   /* text on the dark ground */
  --orange-dim:  rgba(255, 92, 43, .12);
  --orange-line: rgba(255, 92, 43, .34);

  --blue:        #2c6ef2;   /* the Base mark */
  --blue-ink:    #5b93ff;   /* text on the dark ground (6.3:1) */
  --blue-dim:    rgba(44, 110, 242, .16);
  --blue-line:   rgba(91, 147, 255, .34);

  /* Surfaces & ink */
  --page:        #05060a;
  --surface:     #0b0d13;
  --tile:        #0e1017;
  --ink:         #f2f4f8;
  --ink-2:       #c3c9d6;
  --muted:       #8a91a1;   /* 5.9:1 on --surface */
  --line:        rgba(255, 255, 255, .085);
  --line-soft:   rgba(255, 255, 255, .055);

  /* Type */
  --font-sans:   Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --r-pill:      999px;
  --r-lg:        20px;
  --r-md:        14px;

  --shadow-md:   0 2px 4px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.45);

  --wrap:        1000px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* A single warm glow behind the hero, so the page reads as a continuation of
   the planet rather than a black box under it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 92, 43, .14) 0%, rgba(255, 92, 43, .03) 42%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* The <symbol> definitions at the top of the document */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:where(a, button):focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* The plate has its own radius — a pill outline round it looks wrong */
.partner__brand:focus-visible { border-radius: 15px; }

.t-orange { color: var(--orange-ink); font-weight: 700; }
.t-blue   { color: var(--blue-ink);   font-weight: 700; }

/* ==========================================================================
   Top link bar
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 3;
  padding: 18px 20px 6px;
}

.topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.pill:hover {
  transform: translateY(-1px);
  border-color: var(--orange-line);
  background: #11141c;
}

.pill:active { transform: translateY(0); }

.pill__icon { width: 16px; height: 16px; flex: none; color: currentColor; }
.pill__icon--accent { color: var(--orange); }

/* X and CHART are icon-only — the glyphs say it, the words repeated it.
   Both carry an aria-label, so nothing is lost to a screen reader. */
.pill--icon {
  width: 46px;
  padding: 0;
  justify-content: center;
}

.pill--icon .pill__icon { width: 18px; height: 18px; }

/* No contract address configured yet — the pill has nowhere to point */
.pill.is-off {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.pill--ca { padding-right: 15px; letter-spacing: 0; }

.pill__tag {
  color: var(--muted);
  letter-spacing: .14em;
  font-size: 12px;
}

.pill__addr {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.pill__icon--copy { color: var(--muted); }
.pill--ca:hover .pill__icon--copy { color: var(--orange); }

/* Copied toast */
.ca-wrap { position: relative; }

.toast {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #14181f;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-on { opacity: 1; transform: translateY(0) scale(1); }

.toast__check { width: 15px; height: 15px; color: #46d16a; flex: none; }
.toast.is-error .toast__check { color: #ff7a5e; }

/* ==========================================================================
   Page shell
   ========================================================================== */

.page {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px 20px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #000;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* The overlay copy is sized in cqw against this box, not against the
     viewport — see .hero__overlay. */
  container-type: inline-size;
}

.hero__media {
  display: block;
  width: 100%;
  height: auto;          /* beats the element's height attribute */
  aspect-ratio: 2 / 1;   /* the clip and its poster share this ratio */
  object-fit: cover;
  background: #000;
}

/* Everything in this block is sized in em off a single font-size, and that
   font-size is a share of the hero's own width. So the copy keeps a constant
   share of the 2:1 frame at every width — which is what keeps it clear of the
   SPACEX wordmark whatever the window is doing. Sizing it against the viewport
   was the bug: the copy stayed put while the frame shrank around it. */
.hero__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(10px, 2.7cqw, 13px);   /* stacked-under-the-clip sizing */
  gap: 1.5em;
  padding: 1.9em 1.2em 2em;
  text-align: center;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: .26em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.62em;       /* 2.7em once the copy moves onto the clip */
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: .16em;
  text-indent: .16em;      /* re-centre against the trailing letter-space */
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}

/* The copy sits on the planet from here up. Because it is sized in cqw it
   holds the same share of the frame at every width, so this threshold is only
   about the floor of the clamp below: under roughly 800px the copy would have
   to shrink past legibility to keep clearing the wordmark, so it drops beneath
   the clip instead. */
@media (min-width: 800px) {
  /* The hero breaks out past the page's 1000px measure, up to 140px each side.
     The clamp only spends the room the viewport actually has — it resolves to
     0 before the wrap, so the hero can never push the page into a sideways
     scroll. Wider means taller too: the ratio is fixed at 2:1. */
  .hero {
    margin-inline: calc(-1 * clamp(0px, (100vw - 1000px) / 2 - 20px, 140px));
  }

  .hero__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* A share of the hero's width, like everything else here, so the block
       lands on the same part of the planet at every size. */
    font-size: clamp(9px, 1.16cqw, 15px);
    padding-bottom: 3.7em;
  }

  .hero__title { font-size: 2.7em; }

  /* Scrim, so the copy holds contrast over whatever frame is playing */
  .hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 38% 0 0;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(4, 5, 9, .35) 38%,
      rgba(4, 5, 9, .72) 72%,
      rgba(4, 5, 9, .88) 100%);
    pointer-events: none;
  }
}

/* ==========================================================================
   Chips (hero pills)
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  margin: 0;
  padding: .8em 1.45em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(9, 11, 16, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 1em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.chip__icon { width: 1.34em; height: 1.34em; flex: none; }

.chip__fact {
  display: inline-flex;
  align-items: center;
  gap: .78em;
}

.chip__fact b { color: var(--orange-ink); font-weight: 700; }

.chip--facts { gap: 1.2em; }

.chip__sep {
  width: 1px;
  height: 1.25em;
  background: var(--line);
  flex: none;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dashboard { padding: 20px clamp(12px, 2.2vw, 22px) 20px; }

.dashboard__head { margin-bottom: 16px; }

.dashboard__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.live-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 92, 43, .55);
  animation: live-pulse 2.2s infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 92, 43, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 92, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 92, 43, 0); }
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--tile);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

/* The bottom band is reserved only once a tile has enough history to draw a
   line — an empty tile would otherwise carry a hole where the line goes. */
.stat.has-spark { padding-bottom: 58px; }

.stat:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  background: #11141c;
}

.stat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.stat__icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange-line);
  border-radius: 50%;
  background: var(--orange-dim);
  color: var(--orange);
}

.stat__icon svg { width: 17px; height: 17px; }

.stat__icon--blue {
  border-color: var(--blue-line);
  background: var(--blue-dim);
  color: var(--blue-ink);
}

/* The Base mark carries its own colours */
.stat__icon--blue svg { width: 21px; height: 21px; }

.stat__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-2);
}

.stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
  word-break: break-word;
}

.stat__value--blue { color: var(--blue-ink); }

/* No source for this metric yet — don't dress a dash up as a figure */
.stat__value.is-empty { color: var(--muted); }

.stat__chip {
  align-self: flex-start;
  margin: 10px 0 0;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .028);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.stat__chip b { color: var(--ink-2); font-weight: 500; }

.stat__chip--usd b::before { content: "$"; }

/* Values are numeric strings that swap in — keep them from reflowing */
.stat__value, .stat__chip b { font-variant-numeric: tabular-nums; }

/* --- Sparklines ---------------------------------------------------------
   Drawn from this browser's own record of the figures across refreshes, so a
   tile stays blank until enough real points exist. See app.js. */

.stat__spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 54px;
  pointer-events: none;
}

.stat__spark-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat__spark-area { fill: rgba(255, 92, 43, .10); stroke: none; }

.stat__spark--blue .stat__spark-line { stroke: var(--blue-ink); }
.stat__spark--blue .stat__spark-area { fill: rgba(91, 147, 255, .12); }

/* Blinking "…" placeholder, shown until the first data load resolves */
.dots {
  display: inline-flex;
  align-items: flex-end;
  gap: .18em;
  padding-bottom: .12em;
}

.dots i {
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: dot-blink 1.25s infinite ease-in-out;
}

.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }

@keyframes dot-blink {
  0%, 65%, 100% { opacity: .22; }
  32%           { opacity: 1; }
}

.dashboard__note {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ==========================================================================
   Partners
   ========================================================================== */

.partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.partner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 188px;
  padding: 0 24px 0 0;
  overflow: hidden;
}

/* The art is a panel, not a full-bleed background. The photographs are square,
   so covering the whole card cropped them to a thin strip — this keeps them
   close to their own aspect and readable. Masked on the right so the panel
   dissolves into the card instead of ending on a hard edge. */
.partner__art {
  width: clamp(150px, 36%, 215px);
  height: 100%;
  flex: none;
  align-self: stretch;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 58%, transparent 100%);
}

.partner__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
  text-align: right;
}

.partner__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

/* The lockups sit on a plate of their own, at a matched width — the two
   artworks have very different proportions and would otherwise read as one
   large logo beside one small one. Each plate is the link to its partner. */
.partner__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 226px;
  max-width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.partner__brand:hover {
  transform: translateY(-2px);
  border-color: var(--orange-line);
  background: rgba(255, 255, 255, .06);
}

.partner__brand:active { transform: translateY(0); }

.partner__brand img { height: 22px; width: auto; max-width: 100%; }

/* Stockify's lockup carries a tall badge, so it needs more height to match
   the Stonks.Exchange wordmark optically. */
.partner__brand--tall img { height: 32px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 17px 18px;
  text-align: center;
}

.foot__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.foot__built {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.foot__icon { width: 17px; height: 17px; flex: none; }

.foot__sep { width: 1px; height: 14px; background: var(--line); }

.foot__tag { color: var(--muted); }

.foot__fine {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  opacity: .85;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .partners { grid-template-columns: 1fr; }
  .partner { min-height: 156px; }
}

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .topbar { padding: 14px 14px 4px; }
  .topbar__inner { gap: 9px; }
  .pill { min-height: 38px; padding: 0 13px; font-size: 11.5px; gap: 8px; }
  .pill--icon { width: 40px; padding: 0; }
  .pill__icon { width: 14px; height: 14px; }
  .pill__addr, .pill__tag { font-size: 11.5px; }

  /* The page drops its side padding so the hero can run edge to edge;
     the cards carry their own inset instead. */
  .page { padding: 6px 0 30px; gap: 12px; }
  .card, .foot, .partners { margin: 0 14px; }

  .hero { border-radius: 0; border-left: 0; border-right: 0; }

  .hero__title { letter-spacing: .12em; text-indent: .12em; }

  /* The two-fact chip is the widest thing on the page at this size — tighten
     it so it fits a 360px screen rather than being clipped by the hero. */
  .chip { padding: .7em 1.05em; gap: .7em; }
  .chip--facts { gap: .8em; }
  .chip__fact { gap: .6em; }

  .dashboard { padding: 16px 11px 16px; }
  .dashboard__title { font-size: 11.5px; letter-spacing: .14em; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

  .stat { padding: 11px; border-radius: 12px; }
  .stat.has-spark { padding-bottom: 46px; }
  .stat__head { flex-direction: column; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
  .stat__icon { width: 28px; height: 28px; }
  .stat__icon svg { width: 15px; height: 15px; }
  .stat__icon--blue svg { width: 18px; height: 18px; }
  .stat__label { font-size: 9.5px; letter-spacing: .07em; }
  .stat__value { font-size: 15px; }
  .stat__chip { margin-top: 8px; padding: 3px 8px; font-size: 10px; }
  .stat__spark { height: 42px; }

  .partner { min-height: 132px; gap: 12px; padding: 0 16px 0 0; }
  .partner__art { width: clamp(110px, 34%, 150px); }
  .partner__copy { gap: 9px; }
  .partner__kicker { font-size: 10px; }
  .partner__brand { min-width: 0; padding: 9px 13px; border-radius: 12px; }
  .partner__brand img { height: 17px; }
  .partner__brand--tall img { height: 25px; }

  .foot__line { flex-direction: column; gap: 7px; font-size: 10.5px; letter-spacing: .12em; }
  .foot__sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  /* …but the loading placeholder still needs to be visible */
  .dots i { opacity: .55; }
}