/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Orbitron';
  src: url('assets/fonts/orbitron500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ─────────────────────────────────────────── */
:root {
  --navy:      #151B26;
  --purple:    #5F3A8B;        /* glow only */
  --purple-text: #B08CF5;      /* readable purple for vote states */
  --green:     #10F05F;
  --offwhite:  #F2F0E6;

  --outline:   rgba(242, 240, 230, 0.15);

  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--offwhite);
  background: var(--navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }

/* ── Outline utility ──────────────────────────────────── */
.outline {
  border: 1px solid var(--outline);
  border-radius: 4px;
}

/* ── Typography ───────────────────────────────────────── */
.heading {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Background board ────────────────────────────────── */
/* A canvas positioned around the prompt bar in document coordinates, so it
   scrolls with the page. Desktop only; app.js leaves it empty below 1024px. */
.bg-board {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .bg-board { display: block; } }

/* The bar's frame glows for a moment as each pulse leaves it */
.prompt-bar { transition: border-color 0.5s ease-out, box-shadow 0.5s ease-out; }
.prompt-bar--pulse {
  border-color: rgba(16, 240, 95, 0.36);
  box-shadow: 0 0 12px 0 rgba(16, 240, 95, 0.13);
  transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

/* ── Header ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--outline);
  background: var(--navy);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-header__mark {
  height: 48px;
  width: auto;
}
.site-header__wordmark {
  height: 13px;
  width: auto;
}

/* "How it Works" anchor – desktop only */
.site-header__hiw {
  display: none;
  font-size: 12px;
  color: var(--offwhite);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.site-header__hiw:hover {
  opacity: 1;
  color: var(--green);
  text-decoration: none;
}

/* Desktop nav */
.site-header__nav {
  display: none;
  align-items: center;
  gap: 24px;
}
.site-header__nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--offwhite);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.site-header__nav a:hover,
.site-header__nav a.active {
  opacity: 1;
  color: var(--green);
  text-decoration: none;
}
/* Contract address: copyable pill, far right of the header on desktop; a row in the mobile menu */
.site-header__ca {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 5px 8px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--offwhite);
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.site-header__ca:hover { opacity: 1; }
.site-header__ca-label { font-size: 9px; letter-spacing: 0.12em; opacity: 0.6; }
.site-header__ca--copied { color: var(--green); border-color: var(--green); opacity: 1; }
.site-header__ca--mobile {
  display: inline-flex;
  align-self: flex-start;
  margin-left: 0;
  font-size: 12px;
  padding: 8px 12px;
}
.site-header__ca--mobile svg { width: 14px; height: 14px; }

/* Mobile menu button */
.site-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.site-header__menu-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--offwhite);
}

/* Mobile panel */
.site-header__mobile-panel {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--navy);
  border-top: 1px solid var(--outline);
  padding: 32px 24px;
  flex-direction: column;
  gap: 24px;
}
.site-header__mobile-panel.open {
  display: flex;
}
.site-header__mobile-panel a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--offwhite);
  opacity: 0.7;
}
.site-header__mobile-panel a:hover,
.site-header__mobile-panel a.active {
  opacity: 1;
  color: var(--green);
  text-decoration: none;
}
.menu-links {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--outline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.site-header__mobile-panel .account {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--outline);
  font-size: 14px;
  color: var(--offwhite);
  opacity: 0.5;
}

/* ── Hero slot ────────────────────────────────────────── */
/* Fills the viewport below the header; no line at the bottom. */
.hero {
  position: relative;
  height: calc(100svh - 56px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(95, 58, 139, 0.08) 0%,
    transparent 100%
  );
}

/* ── Home panel ───────────────────────────────────────── */
/* Mobile: cards → takes (fills) → bar pinned at the bottom.
   Desktop: cards → takes → bar stacked as one block, centered vertically,
   so an empty takes list never leaves a hole. */
.home-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
  padding: 24px 16px 12px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Filter tags ──────────────────────────────────────── */
.filters {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.filters__tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  color: var(--offwhite);
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.filters__tag:hover { opacity: 1; }
.filters__tag--on { opacity: 1; border-color: rgba(242, 240, 230, 0.6); }

/* ── Carousel ─────────────────────────────────────────── */
.carousel {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* Arrows: desktop only; mobile swipes */
.carousel__arrow {
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline);
  border-radius: 4px;
  color: var(--offwhite);
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.carousel__arrow:hover { opacity: 1; color: var(--green); }

.carousel__card {
  position: relative;           /* anchors the Buy link on open-vote cards */
  flex: 0 0 calc(100% - 32px);
  height: 200px;               /* fixed: cards never change size */
  overflow: hidden;
  scroll-snap-align: start;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.carousel__card:hover { border-color: rgba(242, 240, 230, 0.3); }
.carousel__card--active,
.carousel__card--active:hover {
  border-color: rgba(242, 240, 230, 0.7);
}

.carousel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.carousel__img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--outline);
  background: rgba(242, 240, 230, 0.04);
}

.carousel__question {
  font-size: 15px;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carousel__yes {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  font-size: 36px;
  line-height: 1;
  color: var(--green);
}
.carousel__yes small {
  font-size: 13px;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.carousel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11px;
  opacity: 0.55;
}
.carousel__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.carousel__meta .ico {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex: 0 0 auto;
}
.carousel__meta .ico--stroke {
  fill: none;
  stroke: currentColor;
}
.carousel__card.is-hidden { display: none; }

/* State badge, top-right of the card; only rendered for vote / called */
.carousel__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-top: 2px;
  text-align: right;
}
.carousel__state--vote { color: var(--purple-text); }
.carousel__state--called { color: rgba(242, 240, 230, 0.85); }   /* gray via colour, so the purple star inside stays full strength */
.conviction { display: inline-flex; align-items: center; gap: 2px; color: var(--purple-text); }
.conviction .ico { width: 11px; height: 11px; fill: currentColor; }
.tally { font-weight: 500; }
/* vote tallies read "62% Yes"; timers read "2d left" */
.carousel__state--vote .tally, .prow__state--vote .tally, .thesis__state--vote .tally { text-transform: capitalize; }
.timer { text-transform: none; }
/* In the vote badge only the icons are purple; the counts and text stay gray. */
.votes, .timer { display: inline-flex; align-items: center; gap: 3px; color: rgba(242, 240, 230, 0.55); }   /* gray via colour, not opacity, so the purple icons stay full strength */
.votes .ico, .timer .ico { width: 11px; height: 11px; fill: none; stroke: var(--purple-text); opacity: 1; }   /* the same purple as VOTE OPEN and the conviction */
.timer { text-transform: none; }
.tally--yes { color: var(--green); }
.tally--no  { color: #e53935; }
.carousel__state:empty { display: none; }

/* Buy $PROPHET on an open-vote card: floats over the bottom-right corner, centred on
   the meta row's line, so the card's own layout is identical to every other card */
.carousel__buy {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}
.carousel__buy:hover { opacity: 1; border-color: currentColor; text-decoration: none; }


/* Logout: gray like its neighbours, red on hover / press, in the desktop nav and the phone menu alike */
.site-header__nav .site-header__logout:hover, .site-header__nav .site-header__logout:focus-visible,
.site-header__mobile-panel .site-header__logout:hover, .site-header__mobile-panel .site-header__logout:focus-visible, .site-header__mobile-panel .site-header__logout:active { color: #e53935; }

/* ── Modals: Vote, Take sent ───────────────────────────── */
/* Mobile first: full width, height from content, centred; 44px buttons; scroll locked behind. */
.mdl { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; }
.mdl[hidden] { display: none; }
.mdl__backdrop { position: absolute; inset: 0; background: rgba(21, 27, 38, 0.84); }
.mdl__panel { position: relative; width: 100%; max-width: 520px; background: var(--navy); padding: 44px 16px 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: thin; }
.mdl__panel.mdl__panel--wide { max-width: 730px; }
.mdl__panel.mdl__panel--take { max-width: 640px; }
.mdl__panel.mdl__panel--small { max-width: 380px; padding-bottom: 22px; }   /* the prompt bar's notices */
.nt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.nt__title { font-size: 15px; letter-spacing: 0.12em; }
.nt__line { font-size: 14px; line-height: 1.5; opacity: 0.85; }
.nt__sub { font-size: 13px; opacity: 0.6; }
.nt .mdl__cta { min-width: 160px; margin-top: 6px; }   /* the Vote modal: as wide as How it Works */
.mdl__close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; font-size: 22px; line-height: 1; opacity: 0.6; }
.mdl__close:hover { opacity: 1; }
.mdl__cta { min-height: 44px; padding: 0 16px; border: 1px solid var(--green); border-radius: 4px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mdl__cta:hover { opacity: 0.85; }
.mdl__cta--no { color: #e53935; border-color: #e53935; }   /* Vote NO reads red */
.mdl__actions { display: flex; gap: 10px; width: 100%; }
.mdl__actions button { flex: 1 1 0; min-height: 44px; border: 1px solid var(--outline); border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.mdl__actions button:hover { opacity: 1; }
.mdl__actions .is-primary { color: var(--green); border-color: var(--green); }

.vm { display: flex; flex-direction: column; gap: 14px; }
.vm[hidden] { display: none; }
/* Ballot and voted state: same width (the panel's), each its own height */
.vm__stack { width: 100%; }
.vm__head { display: flex; align-items: center; gap: 12px; }
.vm__img { flex: 0 0 auto; }
.vm__headmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vm__q { font-size: 16px; line-height: 1.35; margin: 0; }
.vm__meta { font-size: 11px; }
.vm__pct { flex: 0 0 auto; margin-top: 0; font-size: 26px; align-self: center; }
.vm__pct small { font-size: 11px; }
.vm__thesis { margin-bottom: 0; width: 100%; }      /* the page's thesis block, box and all, unchanged */
.vm__more { display: none; }                                          /* phones only */
.vm__side { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 500; }
.vm__act { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.vm__tally { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.vm__tallyrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.vm__left { opacity: 0.55; white-space: nowrap; }
.bar { height: 6px; background: #e53935; overflow: hidden; }   /* same red as the NO text */
.bar__yes { display: block; height: 100%; background: var(--green); transition: width 0.6s ease; }
.vm__you { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.vm__you div { border: 1px solid var(--outline); padding: 10px 12px; min-width: 0; }
.vm__you dt { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }
.vm__you dd { margin: 4px 0 0; font-size: 14px; font-weight: 500; }
.vm__seg { display: flex; width: 100%; }
.vm__seg .seg__opt { flex: 1 1 0; min-height: 44px; font-size: 12px; font-weight: 700; }
.vm__seg .seg__opt--no.seg__opt--on { color: #e53935; }

/* the reward for voting */
.vm--done { align-items: center; text-align: center; gap: 22px; padding: 10px 0 4px; }   /* roomier than the ballot */
.vm--done .vm__act { margin-top: 10px; }   /* air between the bar and the button */
.vm__check { width: 64px; height: 64px; border: 2px solid var(--green); border-radius: 4px; display: flex; align-items: center; justify-content: center; animation: mdl-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.vm__check svg { width: 34px; height: 34px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: mdl-draw 0.45s 0.3s ease-out forwards; }
.vm__check svg.is-hidden { display: none; }
.vm__check--no { border-color: #e53935; }
.vm__check--no svg { stroke: #e53935; }
.mdl__panel--glow-no { animation: mdl-glow-no 1.4s ease-out; }
@keyframes mdl-glow-no { 0% { border-color: #e53935; box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } 30% { border-color: #e53935; box-shadow: 0 0 32px 0 rgba(229, 57, 53, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }
.vm__voted { font-size: 22px; letter-spacing: 0.12em; }
.vm__weightline { font-size: 13px; opacity: 0.8; }
.mdl__panel--glow { animation: mdl-glow 1.4s ease-out; }
@keyframes mdl-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mdl-draw { to { stroke-dashoffset: 0; } }
@keyframes mdl-glow { 0% { border-color: var(--green); box-shadow: 0 0 0 0 rgba(16, 240, 95, 0); } 30% { border-color: var(--green); box-shadow: 0 0 32px 0 rgba(16, 240, 95, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(16, 240, 95, 0); } }

.tm { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0 0; }
.tm[hidden] { display: none; }
.spinner { width: 64px; height: 64px; border: 3px solid rgba(16, 240, 95, 0.2); border-top-color: var(--green); border-radius: 50%; animation: mdl-spin 0.8s linear infinite; }   /* as big as the check */
@keyframes mdl-spin { to { transform: rotate(360deg); } }
.tm__label { font-size: 16px; opacity: 0.85; }
.tm__title { font-size: 18px; letter-spacing: 0.12em; }
.tm__ev { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); opacity: 0.85; }
.tm__ev[hidden] { display: none; }
.tm__ev svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tm .tm__card { width: 100%; text-align: left; padding: 12px 16px; margin: 2px 0; }   /* the feed's take row, shortened and outlined; padding wins over the row's own */
.tm .vm__head { width: 100%; text-align: left; margin-top: 10px; }   /* air under "Take received" */
.tm__card .takes__claim { opacity: 0.7;
  line-height: 1.4; }   /* the feed's claim rule, mirrored: it is scoped to the feed there */
.tm__stack { display: grid; width: 100%; }
.tm__stack .tm { grid-area: 1 / 1; }
.tm__stack .tm[hidden] { display: flex; visibility: hidden; pointer-events: none; }   /* hidden state keeps its height, so the box never resizes */
.tm--loading { justify-content: center; }
.tm__xp { font-size: 13px; opacity: 0.85; margin: 2px 0 6px; }
.tm__xp .takes__xp { font-size: inherit; }   /* the +1 XP in the line is green, the rest plain */

/* ── Onboarding modal ─────────────────────────────────── */
.onb { position: fixed; inset: 0; z-index: 1000;   /* above the header and the mobile menu */ display: flex; align-items: center; justify-content: center; padding: 16px; }
.onb[hidden] { display: none; }
.onb__backdrop { position: absolute; inset: 0; background: rgba(21, 27, 38, 0.84); }
.onb__panel {
  position: relative;
  width: 100%;
  max-width: 730px;            /* the narrowest that keeps every slide's line on one line */
  /* On a short screen the 16:9 video would push the box off the top, so the width also
     follows the viewport height: 240px is everything in the panel that is not the video. */
  width: min(100%, 730px, calc((100vh - 240px) * 16 / 9));
  background: var(--navy);
  padding: 44px 20px 20px;     /* room above the video for the X in the panel's own corner */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onb__close {
  position: absolute; top: 5px; right: 5px; z-index: 1;   /* top-right of the whole panel, not the video */
  width: 34px; height: 34px;
  font-size: 22px; line-height: 1; opacity: 0.6;
}
.onb__close:hover { opacity: 1; }
.onb__slide[hidden] { display: none; }
.onb__media { aspect-ratio: 16 / 9; overflow: hidden; background: rgba(242, 240, 230, 0.03); }
.onb__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Copy block has a fixed height so the panel never resizes; the slack falls under the
   text, never between title and line. Desktop: one title line + one text line. */
.onb__copy { height: 62px; margin-top: 14px; overflow: hidden; }
.onb__title { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb__line { font-size: 14px; line-height: 1.5; opacity: 0.8; margin-top: 8px; }
.onb__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onb__back, .onb__next {
  width: 128px; text-align: center;   /* fixed width: "Get Started" is wider than "Next", and the dots must not move */
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 0; border: 1px solid var(--outline); border-radius: 4px;
  transition: opacity 0.15s, border-color 0.15s;
}
.onb__back { opacity: 0.7; }
.onb__back:hover { opacity: 1; }
.onb__back.is-off { visibility: hidden; }        /* slide 1: keeps the dots centred */
.onb__next { color: var(--green); border-color: var(--green); }
.onb__next:hover { opacity: 0.85; }
.onb__dots { display: flex; gap: 8px; }
.onb__dot { width: 6px; height: 6px; background: rgba(242, 240, 230, 0.25); }   /* square, like the roadmap */
.onb__dot--on { background: var(--green); }
html.onb-lock, html.onb-lock body { overflow: hidden; }   /* shared by every modal */

/* Short desktop windows: the panel is narrower, so a long line may wrap; give the copy
   block a second line so nothing is clipped. */
@media (min-width: 768px) and (max-height: 720px) {
  .onb__copy { height: 83px; }
}
@media (min-width: 768px) {
  /* The Vote button is taller than the head's text; let it overhang the row rather than stretch it,
     so the label sits at the same offset whether or not a button is there. */
  .thesis__head { align-items: flex-start; }
  .thesis__stateline { align-items: center; margin: -5px 0; }
  .mdl__panel { padding: 44px 24px 24px; }
  .vm__q { font-size: 17px; }
}

/* ── Feed (thesis + takes) ────────────────────────────── */
.feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 16px;
}
.thesis {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-color: rgba(242, 240, 230, 0.7);   /* same highlight as a selected card */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.thesis[hidden] { display: none; }
.thesis__head { display: flex; align-items: center; gap: 10px; }
.thesis__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thesis__stateline { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.thesis__label { font-size: 11px; opacity: 0.9; }
.thesis__stance { font-size: 11px; }
.thesis__stance--yes { color: var(--green); }
.thesis__stance--no  { color: #e53935; }
/* Position · estimated probability · conviction, in a row after the label */
.thesis__est { font-size: 11px; color: var(--purple-text); white-space: nowrap; }   /* The Prophet's number: a plain purple percentage, no label, no box */
.thesis__est:empty, .thesis__conv:empty { display: none; }
.thesis__conv { font-size: 11px; }
.thesis__outcome { font-size: 12px; opacity: 0.8; }
.thesis__outcome[hidden] { display: none; }
.carousel__state .prow__outcome { padding: 1px 5px; font-size: 9px; margin-left: 2px; }
.thesis__state { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(242, 240, 230, 0.85); }   /* same: no opacity, so VOTE OPEN and the star match the cards */
.thesis__state--vote { color: var(--purple-text); }
.thesis__text { font-size: 13px; line-height: 1.45; }
/* Vote call to action, top-right of the thesis block; opens a small popup */
.vote { position: relative; display: flex; align-items: center; }
.vote[hidden] { display: none; }
.vote__btn {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border: 1px solid var(--purple-text);
  border-radius: 4px;
  color: var(--purple-text);
}
.vote__btn:hover { opacity: 0.85; }
.thesis__list { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px solid var(--outline); }
.thesis--none .thesis__list { display: none; }   /* no credits row in the no-thesis box */
.thesis__list:empty { display: none; }   /* no credits yet: nothing shows, not even the hairline */
.thesis__row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.thesis__user { flex: 0 0 auto; font-weight: 500; opacity: 0.85; }
.thesis__claim { flex: 1 1 auto; min-width: 0; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thesis__xp { flex: 0 0 auto; font-size: 11px; color: var(--green); opacity: 0.8; }
.vote-btn {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s;
}
.vote-btn:hover { opacity: 1; }
.vote-btn--yes { color: var(--green); }
.vote-btn--no  { color: #e53935; }
.vote-btn--chosen { opacity: 1; border-color: currentColor; }


.takes__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--outline);
}
.takes__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.takes__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.takes__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.takes__user {
  font-size: 12px;
  font-weight: 500;
  color: var(--offwhite);
  opacity: 0.85;
}
.takes__stance {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 }   /* the word alone, coloured; no box */
.takes__stance--yes { color: var(--green); }
.takes__stance--no  { color: #e53935; }
.takes__ago {
  font-size: 11px;
  opacity: 0.35;
  white-space: nowrap;
}
.takes__xp {
  font-size: 11px;
  color: var(--green);
  opacity: 0.8;
  white-space: nowrap;
}
.takes__claim {
  opacity: 0.7;
  line-height: 1.4;
}
.takes__empty {
  font-size: 13px;
  opacity: 0.5;
  padding: 8px 0;
  line-height: 1.45;
}

/* ── Prompt bar ───────────────────────────────────────── */
.prompt-bar-wrap {
  flex: 0 0 auto;
  width: 100%;
  margin: 12px auto 0;
}
.prompt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.prompt-bar__input {
  flex: 1 1 auto;
  background: none;
  border: none;
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
}
.prompt-bar__input::placeholder {
  color: var(--offwhite);
  opacity: 0.6;
}

/* Joint YES | NO switch, far left of the bar: the stance for what you type, never the vote.
   Chosen YES reads green, chosen NO red. */
.prompt-bar__vote { flex: 0 0 auto; }
.prompt-bar__vote .seg__opt { font-size: 10px; padding: 5px 10px; font-weight: 700; }
.prompt-bar__vote .seg__opt--no.seg__opt--on { color: #e53935; }

.prompt-bar__send {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  padding: 4px;
}
.prompt-bar__send:hover { opacity: 0.8; }

/* Row under the bar: status left, future tool buttons right */
.prompt-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 0;
}
.prompt-bar__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Status line ──────────────────────────────────────── */
.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--offwhite);
  opacity: 0.8;
  cursor: default;
}
.status-line__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  /* default = up: green with a pulsing glow; server sets --down when the feed is out */
  background: var(--green);
  animation: glow-dot 2s ease-in-out infinite;
}
.status-line__dot--down {
  background: #e53935;
  animation: none;
  box-shadow: none;
}
@keyframes glow-dot {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 0 0 rgba(16, 240, 95, 0.0); }
  50%      { opacity: 1;    box-shadow: 0 0 7px 3px rgba(16, 240, 95, 0.55); }
}

/* ── Walkthrough ──────────────────────────────────────── */

/* ── List panels (Prophecies, Record) ─────────────────── */
/* Filter tags on top; each group's list scrolls on its own. */
.panel {
  height: 100%;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.panel .filters { margin-bottom: 0; flex: 0 0 auto; }
/* Groups share the hero's height; a group shrinks to fit and its list scrolls.
   When other groups are hidden or empty, the remaining list gets the room. */
.pgroup { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.pgroup.is-hidden { display: none; }
.pgroup__title { font-size: 13px; opacity: 0.8; margin-bottom: 8px; flex: 0 0 auto; }
.pgroup__list { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.explainer { font-size: 14px; line-height: 1.5; opacity: 0.75; margin-bottom: 12px; flex: 0 0 auto; }
.explainer--center { text-align: center; margin-bottom: 0; }
.pgroup__empty { font-size: 13px; opacity: 0.5; padding: 8px 0; }
.pgroup__empty[hidden] { display: none; }

.prow {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.prow:hover { border-color: rgba(242, 240, 230, 0.3); }
.prow--open { border-color: rgba(242, 240, 230, 0.7); }
.prow__img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--outline); }
.prow__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prow__q { font-size: 14px; line-height: 1.35; }
.prow__q .tally { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-left: 6px; vertical-align: 1px; }
.prow__thesis { font-size: 12px; line-height: 1.45; opacity: 0.75; }
.prow__label { font-size: 9px; opacity: 0.6; margin-right: 4px; }
.prow__num { color: var(--offwhite); opacity: 1; font-weight: 500; }
/* column-reverse: the meta row sits on top, the badge row underneath */
.prow__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* bottom-right meta row: parent not dimmed so the green reads at full strength */
.prow__bottom { justify-content: flex-end; opacity: 1; }
.prow__bottom > span { opacity: 0.55; }
.prow__bottom > .prow__live { opacity: 1; color: var(--green); }
.prow__state { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.prow__state--vote { color: var(--purple-text); }
.prow__meta { font-size: 11px; opacity: 0.45; white-space: nowrap; }
.prow__row { display: flex; align-items: center; gap: 10px; }
.prow__side .vote { margin-left: auto; }
.prow__side .vote__pop { right: 0; }
.prow__outcome { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border: 1px solid currentColor; border-radius: 2px; }
.prow__outcome--won { color: var(--green); }
.prow__outcome--lost { color: #e53935; }

/* Dropdown: contributions under a clicked row, scrolls on its own */
.prow__drop { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid var(--outline); cursor: default; }
.prow__drop[hidden] { display: none; }
.prow__takes { max-height: 180px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.prow__takes .takes__item:last-child { border-bottom: none; }

/* ── Record ───────────────────────────────────────────── */
.pnl { width: 100%; max-width: 1000px; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pnl__title { position: absolute; left: 0; bottom: 100%; margin-bottom: 14px; font-size: 14px; opacity: 0.9; display: inline-flex; align-items: center; gap: 5px; }

/* Bars grow up (won) or hang down (lost) from a hairline baseline */
.edge {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 150px;
  margin-top: 34px;
  margin-bottom: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.edge::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(242, 240, 230, 0.25); }
.edge__col { position: relative; display: grid; grid-template-rows: 1fr 1fr; width: 18px; }
/* Time range tabs, top-right of the chart; the selected one is underlined */
.edge__axis { position: absolute; top: calc(50% + 10px); font-size: 10px; opacity: 0.45; white-space: nowrap; }
.edge__axis--l { left: 0; }
.edge__axis--r { right: 0; }
.range { position: absolute; right: 0; bottom: 100%; margin-bottom: 12px; display: flex; gap: 14px; }
.range__tab { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; color: var(--offwhite); opacity: 0.45; padding: 2px 0 5px; border-bottom: 1px solid transparent; transition: opacity 0.15s; }
.range__tab:hover { opacity: 0.85; }
.range__tab--on { opacity: 1; color: var(--green); border-bottom-color: var(--green); }
.edge__bar {
  position: relative;
  width: 18px;
  height: calc(var(--v, 0) * 1.3px);   /* 65px ≈ 50 pts each way */
  max-height: 70px;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: rgba(16, 240, 95, 0.12);
}
.edge__bar--won  { grid-row: 1; align-self: end; }
.edge__bar--lost { grid-row: 2; align-self: start; border-color: #e53935; background: rgba(229, 57, 53, 0.12); }
.edge__val {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--green);
  white-space: nowrap;
}
.edge__bar--won  .edge__val { bottom: calc(100% + 5px); }
.edge__bar--lost .edge__val { top: calc(100% + 5px); color: #e53935; }

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.stats__item { display: flex; align-items: baseline; gap: 8px; }
.stats__label { font-size: 11px; opacity: 0.6; }
.stats__num { font-family: var(--font-display); font-size: 20px; }
.stats__unit { font-size: 12px; opacity: 0.6; margin-left: 4px; }
.stats__num--win { color: var(--green); }
.stats__num--loss { color: #e53935; }
.pnl__explain { font-size: 13.5px; opacity: 0.75; text-align: center; line-height: 1.6; }

/* Chain: call → updates → resolution → lesson, one hairline column */
.chain { display: flex; flex-direction: column; padding: 6px 0 4px 14px; border-left: 1px solid var(--outline); margin-left: 4px; }
.chain__step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 2px 12px; padding: 8px 0; }
.chain__step::before { content: ''; position: absolute; left: -18px; top: 13px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--outline); background: var(--navy); }
.chain__step--call::before, .chain__step--resolution::before { border-color: var(--green); }
.chain__step--lesson::before { border-color: var(--purple-text); }
.chain__label { font-size: 9px; opacity: 0.55; padding-top: 3px; }
.chain__step--lesson .chain__label { color: var(--purple-text); opacity: 1; }
.chain__body { font-size: 13px; line-height: 1.45; opacity: 0.85; }
.chain__meta { grid-column: 2; font-size: 11px; opacity: 0.4; }
.chain__meta:empty { display: none; }

/* ── $PROPHET ─────────────────────────────────────────── */
.panel--token { overflow-y: auto; scrollbar-width: none; gap: 10px; }
.panel--token .pgroup__title { margin-bottom: 0; }
.panel--token .explainer { margin-bottom: 0; }
.panel--token::-webkit-scrollbar { display: none; }

/* Stat strip */
.tstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--outline); border: 1px solid var(--outline); border-radius: 4px; }
.tstat { background: var(--navy); padding: 9px 14px; display: flex; flex-direction: column; gap: 3px; }
.tstat__label { font-size: 9px; opacity: 0.5; }
.tstat__row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
/* body font here: the display face is hard to read at data sizes */
.tstat__val { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.tstat__val--green { color: var(--green); }
.tstat__chg { font-size: 11px; }
.tstat__chg--up { color: var(--green); }
.tstat__chg--down { color: #e53935; }

/* Chart + swap */
.token__grid { display: grid; gap: 12px; }
.tchart { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.tchart__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tchart__now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.tchart__price { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.tchart__change { font-size: 13px; }
.tchart__pair { flex-basis: 100%; font-size: 9px; opacity: 0.45; margin-top: -3px; }
.tchart__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tchart__controls .range { position: static; margin: 0; gap: 12px; }
.tchart__plot { height: 190px; }
.tchart__plot svg { width: 100%; height: 100%; display: block; }
.tchart__line { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linejoin: round; }

.tchart__fill { fill: url(#pfade); }
.tchart__last { fill: var(--green); }
.tchart__axis { fill: var(--offwhite); opacity: 0.4; font-family: var(--font-body); font-size: 9px; }
.tchart__tag { fill: var(--green); font-family: var(--font-body); font-size: 10px; font-weight: 500; }
.tchart__tagbox { fill: var(--navy); stroke: var(--green); stroke-width: 1; }
.tchart__guide { stroke: rgba(16, 240, 95, 0.35); stroke-width: 1; stroke-dasharray: 3 4; }

/* Price / MCap segmented control */
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 4px; overflow: hidden; }
.seg__opt { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; color: var(--offwhite); opacity: 0.5; }
.seg__opt + .seg__opt { border-left: 1px solid var(--outline); }
.seg__opt:hover { opacity: 0.85; }
.seg__opt--on { opacity: 1; color: var(--green); }

/* Swap */
.swap { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 14px; position: relative; }
.swap__title { font-size: 10px; opacity: 0.5; }
.swap__field { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--outline); border-radius: 4px; }
.swap__field--out { opacity: 0.7; }
.swap__input { flex: 1 1 auto; min-width: 0; background: none; border: none; outline: none; color: var(--offwhite); font-size: 17px; font-weight: 500; }
.swap__unit { font-size: 10px; opacity: 0.6; white-space: nowrap; }
.swap__flip { align-self: center; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--outline); border-radius: 4px; color: var(--offwhite); opacity: 0.6; margin: -4px 0; background: var(--navy); }
.swap__flip:hover { opacity: 1; color: var(--green); }
.swap__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; opacity: 0.5; }
.swap__cta { margin-top: 2px; padding: 11px; border: 1px solid var(--green); border-radius: 4px; color: var(--green); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.swap__cta:hover { background: rgba(16, 240, 95, 0.08); }

/* Live trades */
.trades { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--outline); border-radius: 4px; overflow: hidden; }
.trades__label { display: inline-flex; align-items: center; gap: 8px; font-size: 9px; opacity: 0.8; white-space: nowrap; }   /* opacity + gap match .status-line so the dot reads identically */
.trades__strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.trades__strip::-webkit-scrollbar { display: none; }
.trade { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--outline); border-radius: 3px; font-size: 11px; white-space: nowrap; }
.trade__side { font-size: 9px; }
.trade--buy .trade__side { color: var(--green); }
.trade--sell .trade__side { color: #e53935; }

/* Wallets */
.wallets { display: grid; gap: 8px; }
.wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--offwhite); }
.wallet:hover { text-decoration: none; border-color: rgba(242, 240, 230, 0.35); }
.wallet__main { display: flex; flex-direction: column; gap: 3px; }
.wallet__name { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.wallet__ext { display: inline-block; width: 12px; height: 12px; opacity: 0.55; flex: 0 0 auto; }   /* link-out icon beside the name, gray */
.wallet__label { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; opacity: 0.45; }
.wallet__num { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 500; line-height: 1; }
.wallet__num--up { color: var(--green); }
.wallet__num--burn { color: #e53935; }
.wallet__ticker { color: var(--offwhite); opacity: 0.55; }
.wallet__fire { display: inline-block; width: 19px; height: 19px; color: #e53935; margin-left: -4px; position: relative; top: -2px; flex: 0 0 auto; }
.token__line { font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.token__line-label { font-size: 10px; opacity: 0.55; }
.token__line .stats__num { font-size: 18px; }
.token__line-note { opacity: 0.6; }
.token__line--custody { display: block; opacity: 0.7; }

/* ── Below the fold ───────────────────────────────────── */
.below {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 16px;
  border-top: 1px solid var(--outline);
}
.below__title {
  font-size: 14px;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Shared sub-heading */

/* How it Works: numbered steps on a hairline, no boxes */
.steps { display: grid; gap: 0; }
.steps__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--outline);
}
.steps__num { font-size: 16px; color: var(--green); line-height: 1.3; }
.steps__text { font-size: 14px; line-height: 1.5; opacity: 0.85; }

/* Tokenomics: intro + table + notes */
.flow__intro { font-size: 14px; line-height: 1.5; opacity: 0.85; margin-bottom: 14px; }
@media (min-width: 768px) { .flow__intro { white-space: nowrap; } }
@media (min-width: 768px) and (max-width: 1080px) { .flow__intro { font-size: 13px; } }
.doors { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; }
.doors th, .doors td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--outline); line-height: 1.45; }
.doors th { font-size: 10px; opacity: 0.55; border-bottom-color: rgba(242, 240, 230, 0.3); }
.doors__name { font-weight: 500; white-space: nowrap; }
.doors__share { color: var(--green); white-space: nowrap; font-family: var(--font-display); }
.notes { display: grid; gap: 6px; margin-bottom: 24px; }
.notes li { font-size: 12px; opacity: 0.6; line-height: 1.5; padding-left: 14px; position: relative; }
.notes li::before { content: '—'; position: absolute; left: 0; }
.buy {
  display: inline-block;
  font-size: 12px;
  color: var(--green);
  padding: 10px 18px;
  border: 1px solid var(--green);
  border-radius: 4px;
}
.buy:hover { text-decoration: none; opacity: 0.85; }

/* Roadmap timeline: vertical on mobile, horizontal on desktop */
.timeline { position: relative; padding-left: 28px; overflow: hidden; }
.timeline__track {
  position: absolute;
  z-index: 1;
  top: 4px; bottom: 4px; left: 4px;
  width: 1px;
  background: var(--outline);
}
.timeline__light {
  position: absolute;
  left: -1px; top: 0;
  width: 3px; height: 160px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(16, 240, 95, 0.9), transparent);
  box-shadow: 0 0 10px 1px rgba(16, 240, 95, 0.25);
  will-change: transform;
}
.phase { position: relative; }
.timeline__dot {
  position: absolute;
  z-index: 2;
  left: -28px; top: 3px;
  width: 10px; height: 10px;
  border-radius: 1px;
  border: 1px solid var(--green);
  background: var(--navy);        /* covers the line so the streak is never seen inside */
  box-shadow: 0 0 0 0 rgba(16, 240, 95, 0);
  transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.timeline__dot--full {
  background: var(--green);
  box-shadow: 0 0 10px 2px rgba(16, 240, 95, 0.45);
}
.phases { display: grid; gap: 28px; }
.phase__title { font-size: 11px; color: var(--green); margin-bottom: 6px; }
.phase li { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--outline); }
.phase__word { font-size: 13px; font-weight: 500; }
.phase__line { font-size: 12px; opacity: 0.6; line-height: 1.45; }

/* ── Footer (under the Roadmap only) ─────────────────── */
.site-footer { border-top: 1px solid var(--outline); }
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-footer__label { font-size: 9px; color: var(--offwhite); opacity: 0.5; }
.site-footer__by { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__by:hover { text-decoration: none; }
.site-footer__tl { height: 16px; width: auto; }
.site-footer__mark { height: 20px; width: auto; }
.site-footer__mark--tl { height: 16px; }
.site-footer__ticker { font-size: 10px; opacity: 0.6; }
.site-footer__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.site-footer__group { display: flex; align-items: center; gap: 12px; }
.site-footer__group a { display: flex; color: var(--offwhite); opacity: 0.55; transition: opacity 0.15s; }
.site-footer__group a:hover { opacity: 1; }
.site-footer__group svg { fill: currentColor; }
.site-footer__logo { width: 16px; height: 16px; border-radius: 50%; filter: grayscale(1) brightness(1.6); }
.site-footer__sep { width: 1px; height: 16px; background: var(--outline); }

/* ── Breakpoint: desktop ──────────────────────────────── */
@media (min-width: 768px) {
  .site-header {
    padding: 0 32px;
    height: 64px;
  }
  .site-header__mark { height: 58px; }
  .site-header__wordmark { height: 16px; }
  .site-header__hiw { display: inline; }
  .site-header__nav { display: flex; }
  .site-header__nav .site-header__ca { display: inline-flex; margin-left: 8px; }
  .site-header__menu-btn { display: none; }

  .hero { height: calc(100vh - 64px); }

  .home-panel {
    padding: 24px 48px 24px;
  }
  .filters { margin-bottom: 10px; }

  .carousel { gap: 16px; }
  .carousel__arrow { display: flex; }
  .carousel__track {
    gap: 16px;
    overflow: hidden;              /* desktop: arrows rotate the deck; no native scroll */
    scroll-snap-type: none;
  }
  .carousel__track--sliding { transition: transform 0.3s ease; }
  .carousel__card {
    flex: 0 0 calc(33.333% - 11px);
    height: 220px;
    padding: 20px;
  }
  .carousel__buy { right: 20px; bottom: 16px; }

  .feed {
    flex: 1 1 auto;         /* fills the space between cards and bar; feed scrolls */
    min-height: 0;
    margin: 24px 52px 0;
  }

  .prompt-bar-wrap {
    width: 46vw;
    min-width: 560px;
    max-width: 760px;
    margin: 24px auto 0;
  }
  .prompt-bar { padding: 12px 14px; }

  .panel { padding: 24px 48px 24px; gap: 20px; }
  .prow { grid-template-columns: 40px 1fr auto; align-items: start; padding: 14px 16px; }
  .prow__img { width: 40px; height: 40px; }
  .prow__side { grid-column: auto; flex-direction: column-reverse; align-items: flex-end; gap: 6px; min-width: 200px; }
  .prow__side:has(.vote) { gap: 12px; }
  .prow__side .vote { margin-left: 0; }

  .tstats { grid-template-columns: repeat(6, 1fr); }
  .token__grid { grid-template-columns: 1fr 320px; }
  .tchart__plot { height: 210px; }
  .wallets { grid-template-columns: repeat(3, 1fr); }   /* three wallets in one row */

  .below { padding: 72px 48px; }
  .site-footer__inner { padding: 16px 48px; }
  .site-footer__tl { height: 18px; }
  .below__title { font-size: 16px; margin-bottom: 28px; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .steps__item { grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 18px 0 0; }
  .steps__num { font-size: 20px; }
  .timeline { padding-left: 0; padding-top: 40px; }
  .timeline__track { top: 12px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .timeline__light {
    top: -1px; left: 0;
    width: 220px; height: 3px;
    background: linear-gradient(to right, transparent, rgba(16, 240, 95, 0.9), transparent);
  }
  .phases { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .timeline__dot { left: 0; top: -33px; }   /* centred on the line at top:12px + 0.5px */
}


/* ══ MOBILE PASS ═══════════════════════════════════════════
   Everything below 768px. Desktop is untouched: this block is
   the last in the file and every rule is scoped to the query. */
@media (max-width: 767px) {

  /* ── Header ── */
  .site-header { padding: 0 12px; }
  .site-header__hiw { display: none; }
  .site-header__wordmark { height: 11px; }
  .site-header__nav { display: flex; margin-left: auto; }
  .site-header__nav > a { display: none; }
  .site-header__ca { display: inline-flex; margin-right: 4px; min-height: 38px; padding: 6px 7px; font-size: 10px; }
  .site-header__menu-btn { width: 40px; height: 40px; margin-right: -6px; }
  .site-header__mobile-panel a { min-height: 40px; display: flex; align-items: center; }
  .menu-links { justify-content: center; }

  /* ── Page scrolls normally; a little more gutter than desktop ── */
  .hero { height: auto; min-height: 0; overflow: visible; }
  .home-panel { height: calc(100svh - 56px); padding: 16px 20px 14px; }
  .panel { height: auto; overflow: visible; padding: 16px 20px 28px; }
  .panel--token { overflow: visible; padding-bottom: 44px; }
  .feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 14px 0 16px; }   /* 16px of air between the takes and the bar */
  .pgroup { flex: 0 0 auto; }
  .pgroup__list { max-height: none; overflow: visible; padding-right: 0; }
  .prow__takes { max-height: none; overflow: visible; }
  .panel__scroll { height: auto; overflow: visible; }

  /* ── Chips and small controls: shorter than the desktop-era 44px ── */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px 12px;
    padding: 0 20px;
  }
  /* The block head carries label · position · estimate · conviction plus the badge
     and Vote; on a phone that is one line too many, so the badge and Vote wrap to a
     second line, right-aligned, instead of running off the edge. */
  .thesis__head { flex-wrap: wrap; row-gap: 6px; }
  .thesis__label { white-space: nowrap; }
  /* Open vote on a phone: the state line (badge + Vote) is too long for the head, so it
     moves under the reasoning, where a resolved market shows its outcome line. */
  .thesis--vote .thesis__head { display: contents; }
  .thesis--vote .thesis__top { order: 1; }
  .thesis--vote .thesis__text { order: 2; }
  .thesis--vote .thesis__stateline { order: 3; margin-left: 0; justify-content: flex-start; }   /* Vote sits beside the badge */
  .thesis--vote .thesis__outcome { order: 4; }
  .thesis--vote .thesis__list { order: 5; }
  /* Onboarding on a phone: a modal, not a sheet. Full width, height from its content,
     centred; the video keeps 16:9; Back / Next are thumb-height and equal width. */
  .onb { padding: 12px; }
  .onb__panel { padding: 46px 16px 16px; gap: 10px; }
  .onb__close { top: 0; right: 0; width: 44px; height: 44px; }
  .onb__copy { height: 112px; margin-top: 10px; }   /* two title lines + two text lines; slack sits under the text */
  .onb__title { font-size: 16px; white-space: normal; }
  .onb__line { font-size: 14px; }
  .onb__foot { padding-top: 2px; }
  .onb__back, .onb__next { min-height: 44px; flex: 1 1 0; width: auto; max-width: 160px; padding: 0 12px; }   /* capped so they never balloon on a wide phone or a small notebook */
  /* Nothing shows above the header while the page scrolls (Telegram's browser paints the
     overscroll region): a navy strip extends the header upward without touching layout. */
  .site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; background: var(--navy); }
  /* Rule: inside the user menu the links are always two rows — TradeLeague and The Prophet on the
     first with one separator, the $PROPHET ticker and its icons alone on the second. */
  .site-header__mobile-panel .menu-links { flex-wrap: wrap; row-gap: 12px; }
  .site-header__mobile-panel .menu-links .site-footer__group:last-of-type { flex-basis: 100%; justify-content: center; }
  .site-header__mobile-panel .menu-links .site-footer__sep:last-of-type { display: none; }
  /* Vote modal on a phone: the reasoning is clamped with a More / Less toggle */
  .vm__thesis .thesis__text:not(.vm__text--open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vm__more { display: inline-block; align-self: flex-start; padding: 8px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); opacity: 0.8; }
  /* Four chips have to fit a 390px screen without scrolling: 10px type, tighter gap */
  .filters { gap: 6px; }
  .filters__tag { font-size: 10px; }
  /* Resolved cards carry four meta items; keep them on one line inside the fixed card */
  .carousel__meta { gap: 4px 8px; font-size: 10px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters__tag { flex: 0 0 auto; min-height: 34px; padding: 0 8px; display: inline-flex; align-items: center; }   /* 8px so four chips fit 390 */
  /* same height as desktop: padding only, no min-height */
  .vote-btn, .vote__btn { min-height: 0; padding: 4px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  /* An open-vote card's meta row also carries Buy $PROPHET; at 390px that only fits
     on one line with a smaller Buy and a tighter gap. */
  .carousel__buy { padding: 1px 5px; line-height: 1.4; font-size: 8px; letter-spacing: 0.02em; right: 8px; bottom: 16px; }   /* bottom-right on the stats line; small and tucked into the corner so it never touches the stats */
  .range__tab, .seg__opt { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .range { gap: 6px; }
  .range__tab { padding: 0 6px; }

  /* ── Carousel: desktop-sized arrows with room around them ── */
  .carousel { gap: 12px; }
  .carousel__arrow { display: flex; width: 36px; height: 36px; }
  .carousel__track { padding: 2px 0; gap: 12px; }
  .carousel__card { flex: 0 0 100%; scroll-snap-align: start; }

  .takes__item { padding: 10px 0; }
  .takes__ago, .takes__xp { font-size: 10px; }

  /* ── Prompt bar ── */
  .prompt-bar-wrap { margin-top: auto; }
  .prompt-bar__input { font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .prompt-bar__send { width: 40px; height: 40px; margin: -6px -6px -6px 0; }

  /* ── List rows: right column beside the text, meta row on top ── */
  .prow__img { width: 34px; height: 34px; }
  .prow__main { gap: 2px; }
  .prow__q { line-height: 1.3; }
  .prow__thesis { line-height: 1.35; }
  /* Two rows. Row 1: image + text. Row 2: the vote block on the left,
     the live meta on the right. */
  .prow { grid-template-columns: 34px minmax(0, 1fr); padding: 9px 10px; gap: 6px 8px; margin-bottom: 6px; }
  .prow__main { grid-column: 2; grid-row: 1; }
  .prow__side {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .prow__row { flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
  .prow__state { white-space: normal; }      /* may wrap so the meta keeps its place */
  .prow__bottom { flex: 0 0 auto; white-space: nowrap; }
  .prow__drop { grid-column: 1 / -1; }

  /* Record: question + timestamp on row 1; the market stats and the called
     badge share row 2, stats left and badge right. Both wrappers dissolve
     into the grid so their children can be placed independently. */
  .panel--record .prow { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 6px; }
  .panel--record .prow__main { display: contents; }
  .panel--record .prow__q { grid-column: 2; grid-row: 1; }
  .panel--record .prow__main > .carousel__meta { grid-column: 2; grid-row: 2; align-self: center; font-size: 10px; gap: 2px 8px; }
  .panel--record .prow__side { display: contents; }
  .panel--record .prow__side > .prow__meta { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; white-space: nowrap; }
  .panel--record .prow__row { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
  .prow__bottom, .prow__side > .prow__meta { justify-content: flex-end; text-align: right; }
  .prow__state, .prow__bottom { font-size: 8.5px; }
  .prow__state { gap: 3px; }
  .prow__side .vote__btn { font-size: 9px; padding: 4px 10px; }
  .prow__bottom { gap: 3px 8px; }
  .prow__q { font-size: 13px; }
  .prow__thesis { font-size: 11px; }

  /* ── Tokenomics table: one block per stream ── */
  .doors thead { display: none; }
  .doors, .doors tbody, .doors tr, .doors td { display: block; width: 100%; }
  .doors tr { padding: 12px 0; border-bottom: 1px solid var(--outline); }
  .doors tr:last-child { border-bottom: none; }
  .doors td { border: none; padding: 0; }
  .doors .doors__name { font-size: 14px; }
  .doors .doors__share { margin: 2px 0 4px; }

  /* ── Below the fold and footer ── */
  .below { padding: 40px 20px; }
  .buy { min-height: 40px; display: inline-flex; align-items: center; }
  .site-footer__inner { padding: 16px; justify-content: center; }
  .site-footer__right { display: none; }

  /* ── Record ── */
  .panel--record { padding-top: 28px; }
  .pnl { gap: 18px; }
  /* No vertical padding here: .edge::before sits at 50% of this box, so any
     padding-bottom would push the baseline below the bars' own centre line. */
  .edge { margin: 44px 0 34px; gap: 14px; padding: 0 6px; }
  .edge__col { width: 14px; }
  .edge__bar { width: 14px; }
  .edge__val { font-size: 9px; }
  .edge__axis { top: auto; bottom: -20px; }   /* dates below the bars, never colliding */
  .edge__axis--l { left: 6px; }
  .edge__axis--r { right: 6px; }
  /* Calls · Wins · Losses centred on one row, Win rate · Edge centred under it */
  .stats { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; gap: 12px 12px; }
  .stats__label { white-space: nowrap; }
  .stats__item { gap: 6px; }
  .stats__item { grid-column: span 2; justify-self: center; }
  .stats__item:nth-child(4) { grid-column: 2 / span 2; }
  .stats__item:nth-child(5) { grid-column: 4 / span 2; }
  .info::after { left: auto; right: 0; width: 240px; }

  /* ── $PROPHET: chart, then live trades, then swap, then wallets ── */
  .panel--token { display: flex; flex-direction: column; gap: 12px; }
  .token__grid { display: contents; }
  .tstats { order: 1; grid-template-columns: repeat(2, 1fr); }
  .tchart  { order: 2; }
  .trades  { order: 3; }
  .swap    { order: 4; }
  .panel--token .pgroup__title { order: 5; }
  .wallets { order: 6; }
  .token__line { order: 7; justify-content: center; margin-top: 10px; }

  .tstat { padding: 7px 12px; gap: 1px; }
  .tstat__val { font-size: 15px; }
  /* price, Price/MCap and the ranges all on one row */
  .tchart { padding: 12px 10px; }
  .tchart__head { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .tchart__now { flex: 0 0 auto; gap: 5px; }
  .tchart__price { font-size: 17px; }
  .tchart__change { font-size: 10px; }
  .tchart__pair { display: none; }
  .tchart__controls { flex: 1 1 auto; min-width: 0; flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; }
  .seg__opt { font-size: 8px; padding: 0 4px; letter-spacing: 0.02em; }
  .tchart__controls .range { gap: 4px; }
  .tchart__controls .range__tab { padding: 0 3px; font-size: 10px; letter-spacing: 0.04em; }
  .tchart__plot { height: 180px; }

  .swap__field { min-height: 46px; }
  .swap__flip { width: 40px; height: 40px; }
  .swap__cta { min-height: 44px; }
  .swap__input { font-size: 16px; }
  .wallet { min-height: 54px; }
}

/* ── Prophecies: two rows each for Open votes and Prophecies, the rest to History ──
   Open votes and Prophecies are capped at exactly two rows so History gets
   whatever the hero has left. The caps are two rows plus their 8px gaps at
   this page's row heights (88px vote rows, 70px thesis rows); adjust them if
   a row's content grows past one draft line. With one filter tag on there is
   only one group on screen, so the caps come off and it takes the whole hero. */
@media (min-width: 768px) {
  .panel--prophecies .pgroup[data-group="votes"],
  .panel--prophecies .pgroup[data-group="theses"] { flex: 0 0 auto; }
  .panel--prophecies .pgroup[data-group="votes"] .pgroup__list { max-height: 192px; }
  .panel--prophecies .pgroup[data-group="theses"] .pgroup__list { max-height: 156px; }
  .panel--prophecies .pgroup[data-group="record"] { flex: 1 1 auto; }
  .panel--prophecies .pgroup[data-group="record"] .pgroup__list { flex: 1 1 auto; }

  .panel--prophecies.is-filtered .pgroup { flex: 1 1 auto; }
  .panel--prophecies.is-filtered .pgroup__list { max-height: none; }
}

/* server additions */
.takes__stance--unsure { color: var(--muted, #8a93a6); }
.tm--error p { color: #e53935; }
.carousel__qlink { color: inherit; text-decoration: none; }
.carousel__qlink:hover { text-decoration: underline; }
.share__btn { margin-left: auto; }
.vm__headmain .share__btn { margin: 6px 0 0; }
.share__notice { text-align: center; margin: 12px auto; max-width: 720px; color: var(--muted, #8a93a6); }
.share__toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #111; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; transition: opacity .2s; pointer-events: none; }
.share__toast.is-on { opacity: 1; }