/* Comfy — component library. Consumes tokens.css vars only; no raw hex. */

/* ── base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-hero); line-height: 1.02; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: var(--char-950); }

/* shared focus ring — every interactive class */
.btn:focus-visible, .pill:focus-visible, .tab:focus-visible, .chip:focus-visible,
.nav-link:focus-visible, .copy-addr:focus-visible, .trade-tab:focus-visible,
.entity:focus-visible, .m-tab:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* film grain — fixed, pointer-events-none, cheap */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── layout ───────────────────────────────────────── */
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-6); }
main.container { flex: 1; }

.ticker {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-hairline);
  overflow: hidden; white-space: nowrap;
  font: 500 var(--fs-micro)/2.2 var(--font-data);
  color: var(--text-muted);
}
.ticker__track { display: inline-block; animation: ticker-scroll 42s linear infinite; padding-left: 100%; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__item { margin-right: var(--sp-8); }
.ticker__sym { color: var(--text-secondary); }
.ticker__up { color: var(--positive); }
.ticker__down { color: var(--negative); }
@keyframes ticker-scroll { to { transform: translateX(-100%); } }

.site-nav {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: blur(12px);
}
.site-nav .container { display: flex; align-items: center; gap: var(--sp-6); }
.wordmark {
  font: 700 1.35rem var(--font-display); letter-spacing: -0.03em;
  color: var(--text-primary);
}
.wordmark em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; }
.nav-link {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  color: var(--text-secondary); font-weight: 500; font-size: var(--fs-body);
  transition: color var(--t-fast) var(--ease-settle), background var(--t-fast) var(--ease-settle);
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-elevated); }
.nav-link--active { color: var(--text-primary); background: var(--bg-elevated); }
.nav-search {
  flex: 1; max-width: 360px;
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
  color: var(--text-primary); font-size: var(--fs-body);
}
.nav-search::placeholder { color: var(--text-faint); }
.nav-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* trust strip: the concrete facts a warm aesthetic must be backed by, or it
   reads as a soft rug. Above the footer, hairline-separated. */
/* cold-start is the real launch design — an empty room should invite, not
   read as abandoned. Warm felt scene + one call to be first. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); }
.empty-state img { width: 100%; max-width: 360px; border-radius: var(--r-panel); border: 1px solid var(--border-hairline); }
.empty-state__title { font: 600 1.05rem var(--font-display); color: var(--text-primary); }
.empty-state__sub { font-size: var(--fs-micro); color: var(--text-muted); max-width: 40ch; }

.teaser-sub { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; max-width: 52ch; }
.trust-strip { border-top: 1px solid var(--border-hairline); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-6); font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted); }
.trust-item b { color: var(--text-secondary); font-weight: 600; margin-right: 6px; text-transform: uppercase; letter-spacing: .06em; }
.trust-item--link { color: var(--accent); margin-left: auto; }
:root[data-theme="light"] .trust-item--link { color: var(--accent-strong); }

.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding: var(--sp-8) 0; margin-top: var(--sp-24);
  color: var(--text-muted); font-size: var(--fs-micro);
}
.site-footer .container { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer .footer-links { display: flex; gap: var(--sp-4); margin-left: auto; flex-wrap: wrap; }
.site-footer a:hover { color: var(--text-secondary); }

/* ── buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-6);
  font: 600 var(--fs-body) var(--font-body); white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-settle),
              box-shadow var(--t-med) var(--ease-settle),
              background var(--t-fast) var(--ease-settle),
              color var(--t-fast) var(--ease-settle);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn--primary { background: var(--accent); color: var(--char-950); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn--ghost { border-color: var(--border-strong); color: var(--text-secondary); }
.btn--ghost:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--char-950); }
.btn--sm { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-micro); }

/* ── pills, badges, tiers ─────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
  font: 500 var(--fs-micro) var(--font-body);
  color: var(--text-secondary); background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  transition: background var(--t-fast) var(--ease-settle), color var(--t-fast) var(--ease-settle);
}
button.pill:hover { color: var(--text-primary); }
.pill--active { background: var(--accent); color: var(--char-950); border-color: transparent; font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 var(--fs-micro) var(--font-body);
  border-radius: var(--r-pill); padding: 2px var(--sp-2);
}
.badge--verified { color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, transparent); }
.badge--graduated { color: var(--compute); background: color-mix(in srgb, var(--compute) 12%, transparent); }

.tier {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-micro) var(--font-body);
  border-radius: var(--r-pill); padding: 3px var(--sp-3);
  border: 1px solid var(--border-hairline);
}
.tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tier--hibernating { color: var(--text-faint); }
.tier--warming { color: var(--ember-300); }
.tier--cozy { color: var(--accent); }
.tier--roaring { color: var(--accent-strong); }
.tier--roaring::before { box-shadow: 0 0 8px var(--accent-glow), 0 0 3px var(--accent); animation: flicker 2.8s var(--ease-settle) infinite; }
@keyframes flicker { 0%,100% { opacity: 1; } 42% { opacity: .68; } 58% { opacity: .92; } 74% { opacity: .74; } }

/* ── cards ────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-soft);
  padding: var(--sp-6);
}
.card--inset { background: var(--bg-inset); box-shadow: none; }
.stat-card { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat-card__label { font: 500 var(--fs-micro) var(--font-body); color: var(--text-muted); }
.stat-card__value { font: 600 1.5rem var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.stat-card__value--compute { color: var(--compute); }
.stat-card__delta { font: 500 var(--fs-micro) var(--font-data); }
.stat-card__delta--up { color: var(--positive); }
.stat-card__delta--down { color: var(--negative); }

/* ── table ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-data); }
.data-table th {
  text-align: left; font: 600 var(--fs-micro) var(--font-body);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-hairline);
}
.data-table td {
  padding: var(--sp-4); vertical-align: middle;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.data-table td.td-entity { font-family: var(--font-body); }
.data-table tbody tr { transition: background var(--t-fast) var(--ease-settle); }
.data-table tbody tr:hover { background: var(--bg-elevated); }
.data-table .num-up { color: var(--positive); }
.data-table .num-down { color: var(--negative); }
.data-table .num-compute { color: var(--compute); }
.row--gold td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row--silver td { background: color-mix(in srgb, var(--cream-500) 6%, transparent); }
.row--bronze td { background: color-mix(in srgb, var(--accent-strong) 5%, transparent); }

/* The screener carries 12 columns — more than fit at 1440, which pushed the
   buy affordance off-screen with no cue. Drop the lowest-signal columns as the
   viewport tightens so the decision unit (compute-yield / mcap / price / change
   / buy) is always visible. Column order is identical in the static and the
   live-rendered rows, so nth-child hides both. */
@media (max-width: 1500px) {
  .agents-card .data-table :is(th, td):nth-child(2),  /* category */
  .agents-card .data-table :is(th, td):nth-child(3),  /* health */
  .agents-card .data-table :is(th, td):nth-child(8) { display: none; }  /* age */
}
@media (max-width: 1180px) {
  .agents-card .data-table :is(th, td):nth-child(7),  /* status */
  .agents-card .data-table :is(th, td):nth-child(9) { display: none; }  /* volume 24h */
}
@media (max-width: 640px) {
  .agents-card .data-table :is(th, td):nth-child(6) { display: none; }  /* holders */
}

/* Sortable headers — the single move that makes a table read as software.
   The caret only appears on the active column; hover hints the affordance. */
.data-table th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.th-sortable:hover { color: var(--text-primary); }
.data-table th.th-sortable::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle; opacity: 0; transition: opacity var(--t-fast) var(--ease-settle);
  border-left: 3px solid transparent; border-right: 3px solid transparent;
}
.data-table th.th-sortable[aria-sort="ascending"]::after {
  opacity: 1; border-bottom: 4px solid var(--accent); border-top: 0;
}
.data-table th.th-sortable[aria-sort="descending"]::after {
  opacity: 1; border-top: 4px solid var(--accent); border-bottom: 0;
}
.data-table th.th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Per-row 24h sparkline sits left of the change %, one decision unit. */
.data-table td.td-change { white-space: nowrap; }
.row-spark { width: 46px; height: 18px; margin-right: var(--sp-2); vertical-align: middle; }
.td-change__val { vertical-align: middle; }

/* A price cell that just moved on a live refresh flashes once, so a refresh
   is something you see, not something you're told happened. */
@keyframes cellFlash {
  0% { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  100% { background: transparent; }
}
.data-table td.cell-flash { animation: cellFlash 1.1s var(--ease-settle); }

/* Liveness state in the toolbar. Preview = muted + still dot (honest, no
   engine yet). Live = ember dot that breathes + a real "updated Ns ago". */
.live-state {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-left: auto; padding: 6px var(--sp-3); border-radius: var(--r-pill);
  font: 600 var(--fs-micro) var(--font-data); letter-spacing: .02em;
  color: var(--text-secondary); border: 1px solid var(--border-hairline);
  background: var(--bg-inset);
}
.live-state.is-preview { color: var(--text-muted); }
.live-state__txt { white-space: nowrap; }
/* inline variant sits beside a heading/sub, not pushed to a flex edge */
.live-state--inline { margin-left: var(--sp-3); vertical-align: middle; }

/* a trending card whose price just moved on a live refresh pulses its rim */
@keyframes trendFlash {
  0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: var(--shadow-glow); }
}
.trend-card.trend-flash { animation: trendFlash 1.2s var(--ease-settle); }
@media (prefers-reduced-motion: reduce) { .trend-card.trend-flash { animation-duration: .01ms; } }

/* ---- trade path ---------------------------------------------------- */
.trade-live { margin: 0 0 var(--sp-3) 0; max-width: 100%; }
/* in the narrow trade card the liveness label may wrap rather than overflow */
.trade-live .live-state__txt { white-space: normal; }
/* the quote block is the review step — no modal, it appears under the amount */
.trade-quote { margin-top: var(--sp-4); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.trade-quote .compute-row { margin: 0; }
.trade-quote__out { font-weight: 700; color: var(--text-primary); }
.trade-quote__split {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-2); margin-top: 2px;
  border-top: 1px solid var(--border-hairline);
  font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted);
}
.trade-quote__sim { margin: var(--sp-2) 0 0 0; }
/* the always-present status line under the CTA */
.trade-status { margin-top: var(--sp-3); min-height: 1.2em; color: var(--text-secondary); }
/* honest headers on a simulated receipt */
.trade-receipt__sim {
  font: 600 var(--fs-micro) var(--font-data); letter-spacing: .04em;
  color: var(--text-muted); text-transform: lowercase;
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--sp-2);
}
/* warm session — the surface ships in v1, the machinery is v1.5 */
.warm-session { margin-top: var(--sp-4); border-top: 1px solid var(--border-hairline); padding-top: var(--sp-3); }
.warm-session__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 var(--fs-data) var(--font-data); color: var(--text-secondary);
}
.warm-session__head:hover { color: var(--text-primary); }
.warm-session__head .live-state--inline { margin-left: 0; }
.warm-session__body { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.warm-session__body p { margin: 0; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); flex: none; }
.live-state.is-preview .live-dot { background: var(--text-muted); }
.live-state:not(.is-preview) .live-dot { animation: livePulse 2s var(--ease-settle) infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 55%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .live-state:not(.is-preview) .live-dot { animation: none; }
  .data-table td.cell-flash { animation-duration: .01ms; }
}
.entity { display: flex; align-items: center; gap: var(--sp-3); }
.entity__avatar {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--bg-elevated); border: 1px solid var(--border-hairline);
  display: grid; place-items: center;
  font: 700 var(--fs-micro) var(--font-display); color: var(--accent);
}
.entity__name { font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.entity__sub { font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted); }
.price-stack { display: flex; flex-direction: column; line-height: 1.35; }
.price-stack small { color: var(--text-muted); font-size: var(--fs-micro); }

/* ── tabs ─────────────────────────────────────────── */
.tabs {
  display: inline-flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
.tab {
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
  font: 500 var(--fs-micro) var(--font-body); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease-settle), background var(--t-fast) var(--ease-settle);
}
.tab:hover { color: var(--text-primary); }
.tab--active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }

/* ── forms ────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font: 600 var(--fs-micro) var(--font-body); color: var(--text-secondary); }
.field__help { font-size: var(--fs-micro); color: var(--text-faint); }
.field__error { font-size: var(--fs-micro); color: var(--negative); }
.input {
  background: var(--bg-inset); border: 1px solid var(--border-strong);
  border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4);
  color: var(--text-primary); font: 400 var(--fs-body) var(--font-body);
  width: 100%;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.input--mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
textarea.input { resize: vertical; min-height: 96px; }
.input-affix { position: relative; }
.input-affix .input { padding-right: 3.2rem; }
.input-affix__suffix {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font: 600 var(--fs-micro) var(--font-data); color: var(--text-muted);
}
.chip-row { display: flex; gap: var(--sp-2); }
.chip {
  flex: 1; text-align: center; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); padding: var(--sp-2) 0;
  font: 600 var(--fs-micro) var(--font-data); color: var(--text-secondary);
  transition: background var(--t-fast) var(--ease-settle), color var(--t-fast) var(--ease-settle);
}
.chip:hover, .chip--active { background: var(--bg-elevated); color: var(--text-primary); }
.drop-zone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-panel);
  padding: var(--sp-8); text-align: center; color: var(--text-muted);
  font-size: var(--fs-micro);
  transition: border-color var(--t-fast) var(--ease-settle);
}
.drop-zone:hover { border-color: var(--accent); }

/* ── meters ───────────────────────────────────────── */
.meter { height: 10px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; }
.meter__fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ember-600), var(--ember-400));
  animation: breathe 3.2s var(--ease-settle) infinite;
}
@keyframes breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.meter-row { display: flex; align-items: center; gap: var(--sp-3); }
.meter-row .meter { flex: 1; }
.meter-row__label { font: 600 var(--fs-micro) var(--font-data); color: var(--ember-300); white-space: nowrap; }

/* hearth meter — radial warmth arc */
.hearth-meter { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.hearth-meter__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ember-600), var(--ember-400) var(--warmth, 62%), var(--bg-elevated) var(--warmth, 62%));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), var(--char-950) calc(100% - 13px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), var(--char-950) calc(100% - 13px));
  animation: breathe 3.2s var(--ease-settle) infinite;
}
.hearth-meter__value { font: 700 2rem var(--font-data); color: var(--text-primary); }
.hearth-meter__label { font: 500 var(--fs-micro) var(--font-body); color: var(--text-muted); }

/* ── misc ─────────────────────────────────────────── */
.copy-addr {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted);
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill); padding: 3px var(--sp-3);
  transition: color var(--t-fast) var(--ease-settle);
}
.copy-addr:hover { color: var(--text-secondary); }
.copy-addr svg { width: 12px; height: 12px; }

.empty-state {
  display: grid; place-items: center; gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-6); text-align: center;
  color: var(--text-muted);
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-card);
}
.empty-state__title { font: 600 var(--fs-h3) var(--font-display); color: var(--text-secondary); }

.code-block {
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--r-panel); padding: var(--sp-4);
  font: 400 var(--fs-micro)/1.8 var(--font-data); color: var(--text-secondary);
  overflow-x: auto; white-space: pre;
}
.code-block .cmd { color: var(--ember-300); }

.section { margin-top: var(--sp-16); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section__head--stack { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.section__sub { color: var(--text-muted); max-width: 56ch; }

/* page title — between hero and h2 on the ladder */
.page-title { font-size: var(--fs-title); }
.page-head { margin-top: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-2); }

/* trade side pills + tabs (token detail, portfolio, mobile sheet) */
.side-pill { font: 600 var(--fs-micro) var(--font-data); border-radius: var(--r-pill); padding: 2px 10px; }
.side-pill--buy { color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, transparent); }
.side-pill--sell { color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); }
.trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.trade-tab {
  text-align: center; padding: var(--sp-2); border-radius: var(--r-panel);
  font-weight: 600; color: var(--text-muted); border: 1px solid var(--border-hairline);
}
.trade-tab--buy { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); border-color: transparent; }
.trade-tab--sell { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); border-color: transparent; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; }
.timeline__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.timeline__item + .timeline__item { border-top: 1px solid var(--border-hairline); }
.timeline__meta { font: 500 var(--fs-micro) var(--font-data); color: var(--text-faint); }

/* grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.split { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-6); align-items: start; }
.split > *, .grid-2 > *, .grid-3 > * { min-width: 0; }

/* ── responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* nav stays reachable: links wrap to a scrollable second row instead of vanishing */
  .site-nav .container { flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { flex: none; }
  .nav-search { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-footer .footer-links { margin-left: 0; }
}

/* ── reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ticker__track, .meter__fill, .hearth-meter__ring, .tier--roaring::before { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ── scroll reveal (motion.js toggles .in) ────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity var(--t-slow) var(--ease-settle), transform var(--t-slow) var(--ease-settle);
    transition-delay: var(--reveal-delay, 0ms); }
  .reveal.in { opacity: 1; transform: none; }
}

/* token logo avatars */
.entity__avatar img, .token-head__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ── trending strip ───────────────────────────────── */
.trend-strip { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; }
.trend-strip::-webkit-scrollbar { display: none; }
.trend-card {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-width: 250px;
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--r-panel);
  transition: border-color var(--t-fast) var(--ease-settle), box-shadow var(--t-med) var(--ease-settle), transform var(--t-fast) var(--ease-settle);
}
.trend-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.trend-card__rank { font: 700 var(--fs-data) var(--font-data); color: var(--accent); white-space: nowrap; }
.trend-card__spark { width: 64px; height: 26px; flex: none; }
.trend-card__chg { font: 600 var(--fs-micro) var(--font-data); margin-left: auto; }

/* account chip */
.account-chip { gap: var(--sp-2); font-family: var(--font-body); }
.account-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); flex: none; }
.account-chip__addr { white-space: nowrap; }
.account-chip__warmth { font-family: var(--font-data); color: var(--accent); white-space: nowrap; }
/* On a phone the address is the first thing to go: the dot says you are
   connected and the warmth says who you are here. The address lives one
   tap away, on your corner. */
@media (max-width: 560px) { .account-chip__addr { display: none; } }

/* skip link — visible only on focus */
/* Visually hidden, still announced. This was used on three pages and never
   defined, so every "screen reader only" label was rendering as plain text
   above its field. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--char-950);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* touch targets: WCAG 2.5.8 — coarse pointers get 44px minimum hit areas */
@media (pointer: coarse) {
  .chip, .pill, .btn, .nav-link, .trade-tab, .side-pill, .copy-addr, .plain-tab, .tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── premium header: product nav | story nav | actions ── */
.site-nav { padding: 0; }
.site-nav .container {
  display: flex; align-items: center; gap: var(--sp-6);
  height: 68px;
}
.site-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow) 30%, var(--accent-glow) 70%, transparent);
  opacity: .5; pointer-events: none;
}
.nav-links { gap: 2px; }
.nav-link { padding: var(--sp-2) var(--sp-3); font-size: .95rem; position: relative; }
.nav-link--active { background: transparent; color: var(--text-primary); }
.nav-link--active::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
}
.nav-sep { width: 1px; height: 22px; background: var(--border-hairline); margin: 0 var(--sp-2); flex: none; }
.nav-link--story { color: var(--text-secondary); }
.nav-link--story:hover { color: var(--accent); background: transparent; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.theme-toggle {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-hairline);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  transition: color var(--t-fast) var(--ease-settle), border-color var(--t-fast) var(--ease-settle),
              transform var(--t-fast) var(--ease-settle);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-15deg); }
.theme-toggle svg { width: 17px; height: 17px; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
.site-nav .btn--primary { box-shadow: 0 2px 18px -4px var(--accent-glow); }
@media (max-width: 1100px) { .nav-sep { display: none; } .nav-link--story { display: none; } }

/* Light mode frames the hero — and a frame demands breathing room the dark
   theme never needed (its hero has no side edges, so flush text was
   invisible there). The inset is paired with an equal negative margin, so
   the TEXT stays aligned with the page column in both themes and the frame
   extends outward instead of the words crowding inward against the line. */
:root[data-theme="light"] .hero {
  border: 1px solid var(--border-hairline); box-shadow: var(--shadow-soft);
  padding-inline: var(--sp-12);
  margin-inline: calc(-1 * var(--sp-12));
}
/* No room to outset on a phone — the negative margin was pushing the
   hero (and v2's ember canvas with it) past a 390px viewport. Inside the
   frame the text simply indents instead. */
@media (max-width: 900px) {
  :root[data-theme="light"] .hero { padding-inline: var(--sp-6); margin-inline: 0; }
}
:root[data-theme="light"] .hero__media::after,
:root[data-theme="light"] .hero::after { opacity: .55; }
:root[data-theme="light"] .hero__content { text-shadow: 0 1px 24px rgba(250,246,239,.35); }
:root[data-theme="light"] .ticker { background: var(--bg-elevated); }
:root[data-theme="light"] .backdrop img { opacity: .28; }

/* light-mode contrast pass (WCAG AA verified against --bg-page) */
:root[data-theme="light"] {
  --text-muted: #6B5C4E;   /* 5.4:1 on paper */
  --text-faint: #7B6C5D;   /* 4.6:1 — small print stays legible */
}
:root[data-theme="light"] .btn--ghost { color: var(--text-primary); border-color: var(--border-strong); }
:root[data-theme="light"] .nav-link { color: var(--text-secondary); }
:root[data-theme="light"] .nav-link--story { color: var(--text-secondary); }
:root[data-theme="light"] .positive, :root[data-theme="light"] .num-up,
:root[data-theme="light"] .ticker__up { color: #2E6B3E; }
:root[data-theme="light"] .num-down, :root[data-theme="light"] .ticker__down { color: #A3372A; }
:root[data-theme="light"] .stat-card__value--compute, :root[data-theme="light"] .num-compute { color: #5A3FB0; }

/* tables scroll inside their own wrapper at every width — a min-width:0
   track is required or the widest cell stretches the whole page */
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.card > .table-wrap, .section > .table-wrap { min-width: 0; }
.data-table { min-width: max-content; }
/* the screener thead stays put while you scan rows — pump.fun's table feel */
.data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border-hairline); }

/* header fits every width: the search yields before the nav does */
@media (max-width: 1100px) { .nav-search { max-width: 220px; } }
@media (max-width: 1000px) { .nav-search { display: none; } }

/* tier chips: the light skin needs darker inks, and hibernating was the
   faint ramp (too quiet even on dark) */
.tier--hibernating { color: var(--text-muted); }
:root[data-theme="light"] .tier--warming { color: #9A5210; }
:root[data-theme="light"] .tier--cozy { color: var(--accent-strong); }
:root[data-theme="light"] .tier--roaring { color: #8F3D06; }

/* light: code blocks keep their dark plate, so their ink must stay light */
:root[data-theme="light"] .code-block { background: #1E1813; color: #F2EBE1; border-color: rgba(30,24,19,.25); }
:root[data-theme="light"] .code-block .cmd { color: #FFB067; }

/* light: inline text links need the strong ember to clear AA on paper */
:root[data-theme="light"] a:not(.btn):not(.nav-link):not(.wordmark):not(.pill):not(.tab):not(.skip-link),
:root[data-theme="light"] .link, :root[data-theme="light"] .section__link { color: var(--accent-strong); }

.link-accent { color: var(--accent); }
:root[data-theme="light"] .link-accent { color: var(--accent-strong); }

/* light: proof chips + tiny accent labels take the strong ember */
:root[data-theme="light"] .proof--hot, :root[data-theme="light"] .flow-pct,
:root[data-theme="light"] .act__num, :root[data-theme="light"] .kicker,
:root[data-theme="light"] .chat__gate, :root[data-theme="light"] .msg__tier--cozy { color: var(--accent-strong); }
:root[data-theme="light"] .proof--violet { color: #4B32A8; }
:root[data-theme="light"] .proof--live { color: #14603F; }

/* light: mobile bottom bar sits on the card plate — its labels need ink */
:root[data-theme="light"] .bottom-bar__item { color: var(--text-muted); }
:root[data-theme="light"] .bottom-bar__item--active { color: var(--accent-strong); }

:root[data-theme="light"] .m-tab { color: var(--text-muted); }
:root[data-theme="light"] .m-tab--active { color: var(--accent-strong); }

/* light: the meter caption sits inside a tinted plate */
:root[data-theme="light"] .meter__label, :root[data-theme="light"] .meter-cap,
:root[data-theme="light"] .m-meter__label { color: var(--text-secondary); }
/* pitch backdrops must not push the page at narrow widths */
.backdrop { max-width: 100%; }

:root[data-theme="light"] .meter-row__label { color: var(--text-secondary); }

/* the fire is a headline surface, not a hidden tab */
/* The room: one set of styles for every surface that carries talk — the token
   page, the fire, and the porch on the landing page. These lived inline in
   token.html, which is why the fire rendered its messages unstyled. */
.trades-card { margin-top: var(--sp-4); padding: 0; }
.chat-card { margin-top: var(--sp-6); }
.chat { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.chat__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.chat__title { font: 700 1.15rem var(--font-display); }
.chat__sub { font-size: var(--fs-micro); color: var(--text-muted); }
.chat__composer { display: flex; flex-direction: column; gap: var(--sp-2); }
.chat__composer textarea { width: 100%; min-height: 64px; resize: none; padding: var(--sp-3) var(--sp-4);
  border-radius: 12px; border: 1px solid var(--border-hairline); background: var(--bg-page);
  color: var(--text-primary); font: 400 .95rem var(--font-body); }
.chat__composer textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.chat__gate { font-size: var(--fs-micro); color: var(--text-muted); }
.chat__gate--warn { color: var(--accent); }
.msg { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border-hairline); }
.msg__orb { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.msg__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.msg__addr { font: 600 var(--fs-micro) var(--font-data); color: var(--text-secondary); }
.msg__tier { font: 700 10px var(--font-data); border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; }
.msg__tier--hibernating { color: var(--text-faint); }
.msg__tier--cozy { color: var(--accent); }
.msg__tier--warming { color: var(--positive); }
.msg__tier--roaring { color: #FF6B4A; }
.msg__time { font-size: 11px; color: var(--text-faint); }
.msg__body { margin-top: 4px; font-size: .95rem; line-height: 1.5; }

/* ── chat v2: the engine always had embers, replies and a holders room —
      the interface just never let anyone see them ── */
.msg__acts { display: flex; align-items: center; gap: var(--sp-3); margin-top: 6px; }
.msg__act {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px var(--font-data); color: var(--text-faint);
  padding: 2px 8px; margin-left: -8px; border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease-settle), background var(--t-fast) var(--ease-settle);
}
.msg__act:hover { color: var(--text-primary); background: var(--bg-elevated); }
.msg__act--ember:hover { color: var(--accent); }
.msg__act--lit { color: var(--accent); }
.msg__act--lit:hover { color: var(--accent); }
/* replies indent one level and hang off a hairline — threads stay readable
   because the engine flattens anything deeper */
.msg--reply { margin-left: 46px; border-top: 0; padding-top: var(--sp-2); position: relative; }
@media (max-width: 560px) { .msg--reply { margin-left: 22px; } }
.msg--reply::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0;
  width: 1px; background: var(--border-hairline); }
.msg--reply .msg__orb { width: 26px; height: 26px; }
/* the room's front door: who this room belongs to, who is in it */
.room-head { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-hairline); }
.room-head__avatar { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none;
  border: 1px solid var(--border-hairline); }
.room-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.room-head__name { font: 700 1.15rem var(--font-display); }
.room-head__meta { font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted); }
.room-head__tabs { margin-left: auto; display: flex; gap: var(--sp-1); }
/* replying state rides the composer, dismissible, never modal */
.chat__replying { display: none; align-items: center; gap: var(--sp-2);
  font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted); }
.chat__replying.is-on { display: inline-flex; }
.chat__replying b { color: var(--text-secondary); }
.chat__replying button { color: var(--text-faint); font-size: 13px; padding: 0 4px; }
.chat__replying button:hover { color: var(--accent); }

/* The porch — the room outside the rooms, on the landing page. Talk and chain
   events share one column, which is the only reason a room belongs on a
   landing page at all: it cannot read as dead, because the chain keeps
   talking when nobody does. Chain rows are set in mono and dimmed so the
   human sentences stay the thing your eye lands on. */
/* rounded card + full-width inner hairlines = the dividers kissed the curved
   border at the corners. Clip children to the radius so nothing touches the
   frame, and the scroll region stays inside clean edges. */
.porch { padding: 0; overflow: hidden; }
.porch__head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-8); border-bottom: 1px solid var(--border-hairline); }
.porch__live { display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: 700 var(--fs-micro) var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.porch__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.porch__sub { color: var(--text-muted); font-size: var(--fs-micro); max-width: 64ch; }
.porch__feed { max-height: 360px; overflow-y: auto; padding: var(--sp-2) var(--sp-8); }
.porch-row { display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--border-hairline); }
.porch-row:first-child { border-top: 0; }
.porch-row__orb { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.porch-row__mark { width: 28px; flex: none; text-align: center; line-height: 28px;
  font: 600 var(--fs-micro) var(--font-data); color: var(--text-faint); }
.porch-row__body { flex: 1; min-width: 0; }
.porch-row__line { display: block; }
.porch-row__line .porch-row__text { margin-top: 0; }
/* chips + time ride a compact line UNDER the sentence, never a side rail that
   crushes the text into a 130px column */
.porch-row__line .porch-chips, .porch-row__line .porch-row__time {
  display: inline-flex; align-items: center; vertical-align: middle; }
.porch-row__line .porch-row__time { margin-left: var(--sp-3); }
.porch-row--chain .porch-chips { margin-top: 6px; }
/* badges and addresses never wrap mid-token */
.msg__tier, .porch-row__addr { white-space: nowrap; }
/* signal → position, one tap: the chips ride the row, small and mono */
.porch-chips { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.porch-chip { padding: 1px 8px; font-family: var(--font-data); font-size: 11px; }
.porch-chip:hover { background: var(--accent); color: var(--char-950); border-color: transparent; }
.porch-chips__unit { font: 500 10px var(--font-data); color: var(--text-faint); margin-left: 2px; }
/* screener-row quick-buy: chips small enough to ride the last cell */
.buy-chips { display: inline-flex; align-items: center; gap: 3px; }
.buy-chip { padding: 1px 7px; font: 600 11px var(--font-data); }
.buy-chip:hover { background: var(--accent); color: var(--char-950); border-color: transparent; }
.buy-chips__unit { font: 500 10px var(--font-data); color: var(--text-faint); margin-left: 1px; }
.porch-row__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.porch-row__addr { font: 600 var(--fs-micro) var(--font-data); color: var(--text-secondary); }
.porch-row__time { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.porch-row__text { margin-top: 3px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.porch-row--chain .porch-row__text { font-family: var(--font-data); font-size: .84rem; color: var(--text-muted); }
.porch-row--chain .porch-row__text b { color: var(--text-secondary); font-weight: 600; }
.porch-row--chain .porch-row__text .compute { color: var(--compute); }
.porch__composer { padding: var(--sp-5) var(--sp-8); border-top: 1px solid var(--border-hairline); }
@media (prefers-reduced-motion: no-preference) {
  .porch__pulse { animation: flicker 2.8s var(--ease-settle) infinite; }
}

/* trade receipt — proof that the split happened */
.trade-receipt { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: 12px;
  background: var(--bg-inset); border: 1px solid var(--border-hairline); display: grid; gap: 6px; }
.trade-receipt__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: .92rem; }
.trade-receipt__row span { color: var(--text-secondary); }
.trade-receipt__split { display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted);
  padding-top: 6px; border-top: 1px dashed var(--border-hairline); }
.trade-receipt__warmth { font: 600 var(--fs-micro) var(--font-data); color: var(--accent); }

.is-done { background: var(--positive) !important; color: #0F1A12 !important; border-color: var(--positive) !important; }

/* light: chat tier chips + tiny footnotes */
:root[data-theme="light"] .msg__tier--roaring { color: #8F3D06; }
:root[data-theme="light"] .msg__tier--warming { color: #1F5A33; }
:root[data-theme="light"] .compute-note, :root[data-theme="light"] .card__note { color: var(--text-secondary); }

.footnote { font-size: var(--fs-micro); color: var(--text-faint); }
:root[data-theme="light"] .footnote { color: var(--text-secondary); }

/* showcase asset captions + pitch backdrop containment */
:root[data-theme="light"] .asset-card figcaption, :root[data-theme="light"] .asset-name,
:root[data-theme="light"] .showcase-label { color: var(--text-secondary); }
.backdrop, .backdrop img { max-width: 100%; overflow: hidden; }

/* light: referral code + tier percentages are accent-coloured display text */
:root[data-theme="light"] .ref-code, :root[data-theme="light"] .ref-tier__pct,
:root[data-theme="light"] .code-hero, :root[data-theme="light"] .tier-pct { color: var(--accent-strong); }

:root[data-theme="light"] .link-card__url em, :root[data-theme="light"] .tier-row__share,
:root[data-theme="light"] .ref-share { color: var(--accent-strong); }

:root[data-theme="light"] .section__sub strong, :root[data-theme="light"] p strong { color: var(--accent-strong); }

figcaption { color: var(--text-muted); }
:root[data-theme="light"] figcaption { color: var(--text-secondary); }

:root[data-theme="light"] .m-tabs span, :root[data-theme="light"] .m-pane-tab { color: var(--text-secondary); }
:root[data-theme="light"] .m-tabs .is-active, :root[data-theme="light"] .m-pane-tab--active { color: var(--accent-strong); }

:root[data-theme="light"] .m-accordion__item, :root[data-theme="light"] .m-accordion__item span { color: var(--text-secondary); }

/* discovery: cards ⇄ screener */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  border: 1px solid var(--border-hairline); background: var(--bg-inset); }
.view-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--sp-3);
  border-radius: var(--r-pill); font: 600 var(--fs-micro) var(--font-data); color: var(--text-muted);
  background: none; border: 0; cursor: pointer; transition: color var(--t-fast) var(--ease-settle),
  background var(--t-fast) var(--ease-settle); }
.view-switch__btn:hover { color: var(--text-primary); }
.view-switch__btn.is-active { color: var(--text-primary); background: var(--bg-elevated); }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-4); }
.agent-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-card, 16px); border: 1px solid var(--border-hairline); background: var(--bg-card);
  transition: transform var(--t-fast) var(--ease-settle), border-color var(--t-fast) var(--ease-settle); }
.agent-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.agent-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.agent-card__logo { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border-hairline); flex: none; }
.agent-card__name { font: 700 1.02rem var(--font-display); display: flex; align-items: center; gap: 6px; }
.agent-card__ticker { font: 500 var(--fs-micro) var(--font-data); color: var(--text-muted); }
.agent-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.agent-card__stat span { display: block; font-size: 11px; color: var(--text-muted); }
.agent-card__stat strong { font: 600 .95rem var(--font-data); }
.agent-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.agent-card__foot .btn { margin-left: auto; }

/* the graduated mark reads instantly in both views */
.grad-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill);
  font: 700 11px var(--font-data); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-strong); border: 1px solid var(--accent); background: transparent; }
.grad-tag::before { content: "◆"; font-size: 8px; }
.grad-tag--progress { color: var(--text-muted); border-color: var(--border-strong); background: none; }
.grad-tag--progress::before { content: "◇"; }

/* social launch: share row + the card people will see */
.share-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.announce-card { margin-top: var(--sp-2); padding: var(--sp-6); border-radius: 16px;
  background: linear-gradient(140deg, var(--bg-elevated), var(--bg-inset));
  border: 1px solid var(--border-hairline); }
.announce-card__brand { font: 700 1rem var(--font-display); }
.announce-card__brand em { font-style: normal; color: var(--accent); }
.announce-card__title { font: 700 1.6rem var(--font-display); margin-top: var(--sp-3); }
.announce-card__ticker { font: 500 .9rem var(--font-data); color: var(--text-muted); }
.announce-card__line { color: var(--text-secondary); margin-top: 4px; }
.announce-card__strip { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4);
  font: 600 var(--fs-micro) var(--font-data); color: var(--text-muted); }

/* creator fee claim */
.claim-card { margin-bottom: var(--sp-4); }
.claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.claim-grid__label { display: block; font-size: 11px; color: var(--text-muted); }
.claim-grid__value { font: 700 1.35rem var(--font-data); }
.claim-legs { margin-top: var(--sp-4); display: grid; gap: 6px; padding-top: var(--sp-3);
  border-top: 1px dashed var(--border-hairline); }
.claim-leg { display: flex; justify-content: space-between; font-size: .88rem; color: var(--text-secondary); }
.claim-leg strong { font-family: var(--font-data); color: var(--text-primary); }
.claim-leg--compute strong { color: var(--compute); }

/* ═══════════ Ashlar component moves ═══════════
   The serif is display-only: anything under 28px stays sans, so bold
   small text can never render as a wonky serif. */
h1, .page-title, .hero__title, .doc-hero h1, .slide h1, .scene__head h2 {
  font-family: var(--font-editorial);
  font-weight: 300;
  letter-spacing: -.02em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
}
h2, .section__title { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.015em; }
h3, .card h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; }

/* numbers are the other display voice: mono, tabular, quiet */
.stat-card__value, .claim-grid__value, .hearth-meter__value, .price-stack,
.flow-pct, .trade-receipt__row strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* structure is cut, not shaded: hairlines instead of soft shadows */
.card, .panel, .agent-card, .announce-card {
  border-radius: var(--r-card);
  box-shadow: none;
  border: 1px solid var(--border-hairline);
}
.card:hover, .agent-card:hover { transform: none; border-color: var(--border-strong); }

/* the accent budget: one chromatic event per viewport. Everything that
   used to be filled ember becomes ink with an accent edge. */
.pill, .chip, .tab, .tier, .grad-tag {
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
}
.pill--active, .chip--active, .tab--active, .view-switch__btn.is-active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: transparent;
  box-shadow: inset 2px 0 0 var(--accent);
}
.grad-tag { color: var(--accent-strong); border-color: var(--accent); background: transparent; }

/* accent-as-state, one mechanic everywhere something is live or yours */
tr[aria-current="true"], .msg--own, .feed__item--new, .porch-row--new, .docs-nav a.is-current {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--bg-inset);
}

/* buttons: one filled action per screen, the rest are cut outlines */
.btn { border-radius: var(--r-ctl); font-weight: 600; letter-spacing: .01em; }
.btn--primary { background: var(--accent); color: var(--on-accent, #0B0B0A); border: 0; box-shadow: none; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* focus is the light moving around the room */
a:focus-visible, button:focus-visible, .input:focus-visible, .nav-search:focus-visible,
textarea:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--shadow-glow);
}

/* tables read as a ledger: rules, not stripes */
.data-table th { font: 600 var(--fs-micro) var(--font-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong); }
.data-table td { border-bottom: 1px solid var(--border-hairline); }
.data-table tr:hover td { background: var(--bg-inset); }

/* the header loses its glow and becomes a printed masthead */
.site-nav::after { display: none; }
.site-nav { border-bottom: 1px solid var(--border-strong); }
.wordmark { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.01em; }
.nav-link--active::after { box-shadow: none; }

/* motion settles; nothing bounces */
.reveal { transition-timing-function: var(--ease-settle); }

/* light: docs rail labels and the pinned device buttons need Ashlar's
   darker ink — the shared rules assume the v1 ramp */
:root[data-theme="light"] .docs-nav__title, :root[data-theme="light"] .docs-toc__title { color: var(--text-secondary); }
/* the phone comp shows the dark app, so its filled button keeps dark-mode ink */
.device[data-theme="dark"] .btn--primary, .device[data-theme="dark"] .m-buy {
  background: #FBAE76; color: #0B0B0A;
}

/* switch between the three design directions */
.skin-switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px;
  border: 1px solid var(--border-hairline); border-radius: var(--r-pill); }
.skin-switch__link { padding: 4px 10px; border-radius: var(--r-pill);
  font: 600 var(--fs-micro) var(--font-data); color: var(--text-muted); letter-spacing: .06em; }
.skin-switch__link:hover { color: var(--text-primary); }
.skin-switch__link.is-current { color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); }
.nav-actions { margin-left: var(--sp-3); }
@media (max-width: 900px) { .skin-switch { display: none; } }

/* The header is one line at every width, in every account state.
   Two things never give: the wordmark on the left and the account control
   on the right. Everything between them yields in a fixed order — search,
   then the skin switch, then the story link — and the nav links absorb
   whatever squeeze is left by scrolling, rather than shoving the wallet
   past the right edge. That last part is the safety net: the thresholds
   below are tuned by eye, so something has to be structurally incapable
   of pushing the wallet off-screen when a threshold is off. */
/* The bar is wider than the text column. It has to be: .container caps at
   1200px, so above ~1250px the nav's available width stops growing while the
   viewport keeps going — which means a viewport-width media query cannot
   relieve any pressure on a wide screen. Before this, 1920px showed the
   search AND every link AND the skin switch inside 1200px and quietly
   scroll-clipped 220px of navigation. Wider screens were the worst case,
   which is the opposite of what every breakpoint below assumes. */
.site-nav .container { flex-wrap: nowrap; min-width: 0; max-width: 1440px; }
.wordmark { flex: none; }
/* Exactly one elastic part, and it is the search: it can give up its width
   down to nothing without losing a destination. Everything else is fixed, so
   nothing can be silently clipped — if it does not fit, it is hidden by a
   rule below, deliberately. */
.nav-links { flex: none; flex-wrap: nowrap; }
.nav-link { white-space: nowrap; }
.skin-switch { flex: none; white-space: nowrap; }
.nav-actions { flex: none; }
.nav-search { flex: 0 1 260px; min-width: 0; }
@media (max-width: 1600px) { .nav-search { max-width: 170px; } }
@media (max-width: 1460px) { .nav-search { display: none; } }
@media (max-width: 1240px) { .skin-switch { display: none; } }
@media (max-width: 1100px) { .nav-link--story { display: none; } }

/* Below here the ladder has hidden everything it can, and the links still
   will not fit on a phone. So they become a scroller: reachable with a
   thumb, which is the one honest way to lose width. Above this width the
   links stay rigid, because a silent scroll-clip on a desktop reads as a
   missing feature — nobody swipes a desktop nav bar. */
@media (max-width: 1100px) {
  .nav-links { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* Connected, the account chip carries an address and a warmth number, so it
   runs ~130px wider than "connect wallet". Every threshold above was set
   against the narrow button, which is why the header only ever cut once a
   wallet was attached. Connected drops one step earlier. */
@media (max-width: 1600px) { body.is-connected .nav-search { display: none; } }
@media (max-width: 1380px) { body.is-connected .skin-switch { display: none; } }
@media (max-width: 1240px) { body.is-connected .nav-link--story { display: none; } }

/* ---------------------------------------------------------------------------
   Mobile density pass (Kimi K3 review). The "spaces between agents" complaint
   is the whole stack reading loose on a 390px phone: big section margins, card
   padding, container gutters, and a 2-column agent-grid squeeze at 560-640px.
   This tightens all of them at once and moves toward trader-tool density.
   (Kimi suggested --sp-10 for the section margin; that token does not exist and
   would void the rule, so --sp-8 is used.)
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
  .section { margin-top: var(--sp-8); }
  .section__head { margin-bottom: var(--sp-4); }
  .card { padding: var(--sp-4); }
  .agent-card { padding: var(--sp-4); gap: var(--sp-2); }
  /* one tight column — the auto-fill minmax produced an awkward 2-col squeeze */
  .agent-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* trader density: 16px all-sides td padding made ~52px rows; tighten to ~40px */
  .data-table th { padding: var(--sp-2) var(--sp-3); }
  .data-table td { padding: var(--sp-2) var(--sp-3); }
  /* the trend strip bleeds to the screen edge and snaps, so card #2 peeks and
     the strip reads as scrollable (the Binance/OKX mobile pattern) */
  .trend-strip {
    gap: var(--sp-2);
    margin-inline: calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .trend-card { min-width: 208px; padding: var(--sp-2) var(--sp-3); scroll-snap-align: start; }
  .porch__feed { padding: var(--sp-2) var(--sp-4); }
  .porch__composer { padding: var(--sp-4); }
}
/* on touch, :hover sticks after a tap — kill the lift so cards don't sit raised */
@media (hover: none) {
  .agent-card:hover, .trend-card:hover { transform: none; }
}
/* protect the 11px stat labels from iOS landscape auto-inflation */
html { -webkit-text-size-adjust: 100%; }
/* clear the home-indicator on safe-area phones */
.site-footer { padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-4)); }