/* LastCommit-specific styles.
 *
 * base.css and app.css carry the shared chassis — type scale, .glass, .stat-band,
 * .card-grid, .m-card, .pill, .seg, .table-card, .sec-head, nav, reveal,
 * background. Everything here is either the staleness colour language or a
 * component this site alone has. Do not redefine a chassis component here; if
 * something looks wrong, use the chassis class rather than replacing it. */

/* --- staleness colour language --------------------------------------------
   One scale used identically in tables, buckets, the quadrant and the legends,
   so a colour means the same thing everywhere. Runs green → red with two steps
   between; the middle steps are desaturated so "slowing" doesn't read as alarm.

   NOT the accent variables: brand.js owns those and swaps them per theme.
   Staleness is its own axis and must stay legible on either background, so both
   themes are declared explicitly. */
:root {
  --st-active: #16A34A;
  --st-slowing: #A16207;
  --st-dormant: #B45309;
  --st-abandoned: #C2334A;
  --st-none: #8B8F98;
}
:root[data-theme='dark'] {
  --st-active: #4ADE80;
  --st-slowing: #FCD34D;
  --st-dormant: #FDBA74;
  --st-abandoned: #FF6B7F;
  --st-none: #8A8F9A;
}
[data-bucket='active'] { --st: var(--st-active); }
[data-bucket='slowing'] { --st: var(--st-slowing); }
[data-bucket='dormant'] { --st: var(--st-dormant); }
[data-bucket='abandoned'] { --st: var(--st-abandoned); }
[data-bucket='none'] { --st: var(--st-none); }

.accent { color: var(--accent-text); }
/* Deliberately NOT the chassis's .good, which is an alias for the accent — fine
   for RealFloat's teal, wrong for an orange brand where it would sit beside the
   figure it contrasts with in the same hue. Green here matches "active" in the
   staleness legend, so one colour carries one meaning across the whole site. */
.ships { color: var(--st-active); }

/* Secondary pages don't need the full hero drop. */
.hero-sm { padding-bottom: 4px; }
.hero-sm h1 { font-size: clamp(32px, 5vw, 58px); max-width: 18ch; }

/* --- two populations ------------------------------------------------------ */

.pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 14px;
}
.pop-card { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pop-pill { font-size: 11.5px; }
.pop-fig {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: var(--accent-text);
}
.pop-sub { font-size: 13.5px; color: var(--ink-2); margin-top: -4px; }
.pop-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 10px 0 2px;
}
.pop-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pop-meta { display: grid; gap: 7px; margin: 8px 0 0; }
.pop-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.pop-meta dt { color: var(--ink-2); margin: 0; }
.pop-meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- quadrant ------------------------------------------------------------- */

.chart-card { padding: 22px 22px 18px; }
.chart-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; }

.quad {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 132px;
  grid-template-rows: 300px auto;
  gap: 0 14px;
  padding-left: 18px;
}
.quad-ylab {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.quad-plot, .quad-band {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(to top, var(--line) 1px, transparent 1px) 0 100% / 100% 25%;
  border: 1px solid var(--line);
}
.quad-band {
  background: color-mix(in srgb, var(--st-none) 8%, transparent);
  border-style: dashed;
}
.quad-band-lab {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--st-none);
  pointer-events: none;
}
.quad-dot {
  position: absolute;
  width: var(--r, 8px);
  height: var(--r, 8px);
  margin: calc(var(--r, 8px) / -2);
  border-radius: 50%;
  background: var(--st, var(--st-none));
  opacity: 0.62;
  border: 1px solid color-mix(in srgb, var(--st) 60%, transparent);
  transition: opacity 0.15s, transform 0.15s;
}
a.quad-dot:hover { opacity: 1; transform: scale(1.35); z-index: 3; }
.quad-axis { position: relative; height: 20px; margin-top: 7px; }
.quad-axis span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quad-legend { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .quad { grid-template-columns: 1fr 84px; grid-template-rows: 230px auto; }
  .quad-band-lab { font-size: 9px; }
}

/* --- distribution --------------------------------------------------------- */

.dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 14px;
}
.buckets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; }
.bucket { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bucket-n {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--st, var(--ink));
  text-align: center;
}
/* The track carries the DEFINITE height. Without it the bar's percentage
   resolves against an auto-height flex item, computes to zero, and the chart
   renders as labels floating under nothing. */
.bucket-track { height: 118px; display: flex; align-items: flex-end; }
.bucket-bar {
  width: 100%;
  /* The floor keeps a count of 1 visible in a chart scaled to 28. A count of
     ZERO gets no floor — see [data-n='0'] below. A 3px bar under a "0" label
     draws something where nothing was measured, which is the sort of small lie
     this whole site is about. */
  height: max(3px, var(--h));
  background: var(--st, var(--st-none));
  border-radius: 5px 5px 2px 2px;
  opacity: 0.85;
  transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bucket[data-n='0'] .bucket-bar { height: 0; }
.bucket[data-n='0'] .bucket-n { color: var(--ink-3); }
.bucket-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bucket-val {
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--st, var(--st-none)); flex: none; }

/* --- comparison ----------------------------------------------------------- */

.split-compare { padding: 6px 22px 14px; }
.sc-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  align-items: baseline;
}
.sc-row:last-child { border-bottom: 0; }
.sc-row > div:first-child { color: var(--ink-2); }
.sc-row > div:not(:first-child) {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 16px;
}
.sc-head > div:not(:first-child) { font-weight: 700; color: var(--ink-3); }
/* The memecoin column is the argument, so it carries the accent. */
.sc-row > div:last-child { color: var(--accent-text); }
.sc-head > div:last-child { color: var(--accent-text); }

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

.table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.srch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  background: var(--bg);
  min-width: 0;
  flex: 1 1 210px;
  max-width: 320px;
}
.srch input {
  font: inherit;
  font-size: 13.5px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.srch input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); }
.srch:focus-within { border-color: var(--accent); color: var(--accent-text); }

table.tokens { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 40rem; }
table.tokens th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 700;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ink); }
/* The caret is always in the box, transparent until the column is active, so
   sorting doesn't shift every other header sideways. */
.th-sort::after {
  content: '▾';
  margin-left: 5px;
  font-size: 9px;
  opacity: 0;
  display: inline-block;
}
.th-sort[data-dir='desc']::after { opacity: 1; }
.th-sort[data-dir='asc']::after { opacity: 1; transform: rotate(180deg); }
.th-sort[data-dir]:not([data-dir='']) { color: var(--accent-text); }

table.tokens td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.tokens tbody tr:last-child td { border-bottom: 0; }
table.tokens tbody tr:hover { background: var(--accent-soft); }

.c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-dim { color: var(--ink-3); }
.c-name { min-width: 12rem; }
.tok-name { font-weight: 700; }
.tok-sym { color: var(--ink-3); margin-left: 7px; font-size: 12px; }
.c-stale { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--st, var(--ink-3)); font-weight: 700; }
.repo-link {
  color: var(--accent-text);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.repo-link:hover { text-decoration: underline; }
.no-repo { color: var(--ink-3); font-size: 12.5px; font-style: italic; }

.tag {
  display: inline-block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.tag-meme { background: var(--accent-soft); color: var(--accent-text); }
.tag-archived { background: color-mix(in srgb, var(--st-abandoned) 15%, transparent); color: var(--st-abandoned); }
.tag-owner { background: color-mix(in srgb, var(--st-none) 17%, transparent); color: var(--ink-3); cursor: help; }

/* --- boards --------------------------------------------------------------- */

.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
}
.board-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.board-main { min-width: 0; }
.board-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.board-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; flex-wrap: wrap; }
.board-figs { display: flex; gap: 26px; text-align: right; }
.board-fig { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.board-fig-2 { color: var(--st, var(--ink)); }
.board-fig-quiet { font-size: 12.5px; font-weight: 700; font-style: italic; color: var(--ink-3); }
.board-key { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; }

@media (max-width: 620px) {
  .board-row { grid-template-columns: 26px 1fr; gap: 10px; }
  .board-figs { grid-column: 2; justify-content: flex-start; text-align: left; gap: 20px; margin-top: 6px; }
  .board-key { white-space: normal; }
}

/* --- caveats -------------------------------------------------------------- */

/* Deliberately not styled as fine print. The coverage disclosure and the audit
   caveat are load-bearing claims about what the numbers mean, and shrinking
   them to 11px grey is how a site implies coverage it does not have. */
.caveat {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 15px 18px;
  max-width: 68ch;
}
.caveat-lg { font-size: 14.5px; max-width: none; }
.caveat + .caveat { margin-top: 10px; }
.caveat strong { font-weight: 800; }

/* Audited absence reads differently from an unaudited one: a solid underline
   marks "somebody looked and found nothing", which is a stronger claim than
   "the listing was empty" and should not look identical to it. */
.no-repo-audited {
  font-style: normal;
  border-bottom: 1px dotted var(--ink-3);
  cursor: help;
}