/* RealFloat-only styles. Tokens, chrome and most components come from
   base.css and app.css, which are shared with LaunchHalflife — anything here
   is either new to this site or a deliberate override.

   Loaded LAST, so it wins on specificity ties. */

/* --- the two-colour split ------------------------------------------------- */

/* The whole page is one comparison, so the two categories get one pair of
   colours and use it everywhere: chart, table, legend, stat band.

   Real equity is deliberately the QUIET one — a neutral ink — and memecoin
   collateral gets the accent. That is the opposite of the usual instinct
   (highlight the good number), and it is the right way round here: the accent
   should mark the thing the reader came to find, which is the churn. */
.bar-real { fill: var(--ink-3); opacity: 0.55; }
.bar-meme { fill: var(--accent); }

:root[data-theme='dark'] .bar-real { fill: var(--ink-3); opacity: 0.7; }

/* The trailing bar covers a partial UTC day, because the scan runs whenever
   launchd fires rather than at midnight. Left solid it reads as a collapse on
   every single scan. Hatched instead of hidden — dropping it would silently
   lose the most recent reading, which is the one people look at. */
.bar.partial .bar-real,
.bar.partial .bar-meme { opacity: 0.35; }

.bar { transition: opacity 0.14s ease; }
.chart-svg:hover .bar { opacity: 0.45; }
.chart-svg:hover .bar:hover { opacity: 1; }

.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- legend --------------------------------------------------------------- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.chart-legend .lg { display: inline-flex; align-items: center; gap: 8px; }

.sw {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
  display: inline-block;
}
.sw-real { background: var(--ink-3); opacity: 0.55; }
.sw-meme { background: var(--accent); }
.sw-partial { background: var(--accent); opacity: 0.35; }

/* --- table ---------------------------------------------------------------- */

/* `table` itself is styled in app.css; these are the bits this page adds. */
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }

td .sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
  /* Company names are long and the ticker is the thing being scanned for. */
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accent { color: var(--accent-text); font-weight: 700; }
.stat-v.accent { color: var(--accent-text); }

/* --- memecoin cards ------------------------------------------------------- */

.meme-card { display: flex; flex-direction: column; }

/* A memecoin can name itself anything, including something long enough to
   blow out the grid. app.js puts symbols in via textContent, which stops
   markup but not a 200-character name. */
.meme-card h3 {
  overflow-wrap: anywhere;
  max-height: 2.6em;
  overflow: hidden;
}

.meme-card p { flex: 1; }

.card-link {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
  align-self: flex-start;
}
.card-link:hover { text-decoration: underline; }

/* --- inner-page header ---------------------------------------------------- */

/* Smaller than the home hero on purpose. Repeating the full hero on all six
   pages would put the headline figure in the largest type six times and make
   every page look like the front door. */
.page-head { padding: 56px 0 8px; }
.page-head .eyebrow { margin: 0 0 16px; }

.page-head h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  max-width: 20ch;
  margin: 0 0 18px;
}

.page-sub {
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0;
}

/* The inner pages open with a header rather than a section heading, so the
   first section under one does not need its usual top padding. */
.page-head + main > .sec:first-child { padding-top: 40px; }

/* --- home nav cards ------------------------------------------------------- */

/* The card grid on the home page is navigation, so the whole card is the hit
   target, not just the heading. */
.nav-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.nav-card h3 { color: var(--accent-text); }

/* --- next link ------------------------------------------------------------ */

/* Each inner page points at the next one. Without it a multi-page site is a
   set of dead ends reachable only from the nav. */
.next-link { margin: 34px 0 0; font-size: 15px; font-weight: 700; }
.next-link a { color: var(--accent-text); text-decoration: none; }
.next-link a:hover { text-decoration: underline; }

/* --- active nav item ------------------------------------------------------ */

/* Driven off aria-current so the accessible state and the visible state are
   the same attribute and cannot drift apart. */
.nav-links a[aria-current='page'] {
  color: var(--accent-text);
  font-weight: 700;
}

/* --- hero ----------------------------------------------------------------- */

/* The headline figure wraps a percentage rather than a duration, so it needs
   less width than LaunchHalflife's but the same serif treatment. */
.hero h1 { max-width: 20ch; }

.hl-ci {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 70ch;
  margin: -8px 0 26px;
}

@media (max-width: 720px) {
  /* Four stats do not fit across a phone; two rows of two do. */
  .stat-band { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .stat:nth-child(3) { border-left: none; }
}