/* garlicoin.org: the rich list, sleeping giants and wake-ups (/rich/, rich.js).
   Loaded after site.css, stats.css and data.css by that page only. Colors are the shared variables, so dark mode
   needs nothing extra here. */

.rich-jump { margin: 6px 0 0; font-weight: 700; font-size: .95rem; }
.rich-sub { font-size: 1rem; margin: 22px 0 8px; }
.rich-more { margin: 14px 0 0; text-align: center; }

/* top 100 */
.rich-table .rich-rank { color: var(--muted); width: 2.4em; }
.rich-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rich-addr { font-family: var(--font-mono); font-size: .9em; }
.rich-addr .a-short { display: none; }
.rich-label { display: inline-block; font-size: .74rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); text-decoration: none; }
a.rich-label:hover { text-decoration: underline; }
.rich-moved .rich-when { display: block; }
.rich-cell-sub { display: none; }
@media (max-width: 1100px) {
  .rich-addr .a-full { display: none; }
  .rich-addr .a-short { display: inline; }
}
@media (max-width: 640px) {
  /* phones: rank, who (+ last moved under it), balance (+ share under it) */
  .rich-table .rich-share, .rich-table .rich-worth, .rich-table .rich-moved,
  .rich-table thead th:nth-child(4), .rich-table thead th:nth-child(5), .rich-table thead th:nth-child(6) { display: none; }
  .rich-table td, .rich-table th { white-space: normal; }
  .rich-table .num { white-space: nowrap; }
  .rich-table th.num { white-space: normal; }
  .rich-table td.num { padding-left: 6px; }
  .rich-addr { font-size: .84em; }
  .rich-cell-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
  .rich-table .rich-rank { width: 1.8em; padding-left: 0; }
  /* 2026-11-03: a long label (the burn address's) wouldn't wrap and pushed the balance column off a phone screen */
  .rich-table .rich-who, .rich-table .rich-cell-sub, .rich-table .rich-label { white-space: normal; }
  .rich-table .rich-label { max-width: 100%; border-radius: 8px; }
}

/* sleeping giants and wake-ups */
.giants, .wakeups { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.giants { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.giant, .wake { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.giant-rank { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-text); font-weight: 800; font-size: .85rem; }
.giant-body, .wake-body { min-width: 0; display: grid; gap: 4px; }
.giant-body p, .wake-body p { margin: 0; }
.giant-bal { font-family: var(--font-fun); font-weight: 600; font-size: 1.15rem; }
.giant-since { font-size: .88rem; }
.wake-icon { flex: none; font-size: 1.4rem; line-height: 1.2; }
.wake-giant { border-color: var(--gold); background: var(--gold-soft); }
.wake-head strong { font-family: var(--font-fun); font-weight: 600; font-size: 1.05rem; }

/* how coins are spread */
.rich-asleep { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rich-asleep li { display: grid; grid-template-columns: minmax(0, 15em) minmax(60px, 1fr) auto; gap: 12px; align-items: center; font-size: .92rem; }
.rich-bar { height: 10px; border-radius: 999px; background: var(--gold-soft); overflow: hidden; }
.rich-bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 999px; min-width: 3px; }
.rich-asleep-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
@media (max-width: 640px) {
  .rich-asleep li { grid-template-columns: minmax(0, 1fr) auto; }
  .rich-asleep .rich-bar { grid-column: 1 / -1; grid-row: 2; }
  .giants { grid-template-columns: minmax(0, 1fr); }
}
/* 2026-11-03: a burn address (coins nobody can spend) is labeled in gray, not gold */
.rich-label-burn { background: var(--line); color: var(--muted); }
/* the giant cards (three to a row) are too narrow for a full address: always the short form there. Wake-up cards are
   full width, so they show the whole address down to tablet width, and the short form on phones */
.giant .rich-addr .a-full { display: none; }
.giant .rich-addr .a-short { display: inline; }
.wake .rich-addr .a-full { display: inline; }
.wake .rich-addr .a-short { display: none; }
@media (max-width: 700px) {
  .wake .rich-addr .a-full { display: none; }
  .wake .rich-addr .a-short { display: inline; }
}

/* 2026-11-03: "How coins are spread" on phones: compact numbers (68.9M) and wrapping headers, so it fits the card */
.rich-spread .n-short { display: none; }
@media (max-width: 640px) {
  .rich-spread .n-full { display: none; }
  .rich-spread .n-short { display: inline; }
  table.data.rich-spread th { white-space: normal; vertical-align: bottom; }
  table.data.rich-spread td, table.data.rich-spread th { padding-left: 4px; padding-right: 4px; }
  table.data.rich-spread th { font-size: .66rem; letter-spacing: .02em; }
  table.data.rich-spread .rich-share-col, table.data.rich-spread thead th:nth-child(4) { display: none; }
  table.data.rich-spread td { font-size: .86rem; }
  table.data.rich-spread td:first-child, table.data.rich-spread th:first-child { padding-left: 0; }
  table.data.rich-spread td:last-child, table.data.rich-spread th:last-child { padding-right: 0; }
}

/* garlic face before each address */
.rich-addr { display: inline-flex; align-items: center; gap: 6px; }