/* ============================================================================
   1000 BTC — the reference ledger of the famous 2015 puzzle transaction.

   This page is a block-explorer artifact, not a challenge: 160 real wallets,
   read top to bottom. Composition follows that fact — a short explanation at
   reading measure, the standing of the hunt, then the ledger itself on fixed
   rails inside a panel, with a sunken sticky header row so the column keys
   survive the scroll.

   The ledger takes the full 1280 page while the prose above it keeps its own
   68ch. Seven machine values per record do not fit in the 960 narrow column,
   and the previous attempt to make them fit is what broke the page: the keys
   were stacked inside the address cell, which printed their tags on every one
   of 160 rows, pushed the row to 99px, and pushed the table 165px past the
   panel that was supposed to contain it.

   Colour is spent by the system's semantics only: green for solved, teal for
   a wallet still open to the hunt, and the one orange strictly on money —
   the prizes and the BTC total. Solved rows dim to tertiary ink; history is
   legible but quiet.
   ========================================================================= */

.tbtc {
  padding-block: var(--sp-8) var(--sp-16);
}

.tbtc__head {
  margin-block-end: var(--sp-6);
}

.tbtc__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
}

.tbtc__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-300);
}

.tbtc__about {
  margin-block-end: var(--sp-8);
}

/* ---------------------------------------------------------------------------
   The standing — one bordered object holding the four figures and, beneath
   them, the shape those figures leave out.

   The tally is the system's ledger strip: cells separated by a 1px gap that
   shows the rule colour through, so separators resolve on both axes and in
   both writing directions. Explicit 2/4 columns: four cells must never land
   as three-plus-one and leave a stray rule-coloured block.
   ------------------------------------------------------------------------ */

.tbtc-standing {
  margin-block-end: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tbtc-tally {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line);
}

@media (min-width: 768px) {
  .tbtc-tally {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tbtc-tally__cell {
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink-900);
}

.tbtc-tally__cell .label {
  margin-block-end: var(--sp-2);
}

/* Tracking is pulled in one step past `.num`, as display-size figures want.
   It does not close the space around the decimal comma — in the mono face
   that comma takes a full character advance, so "903,0" reads a little apart
   at 28px. That is the face's behaviour everywhere the system prints money
   (the header balance pill does the same with "0,00"), and it is left alone
   here rather than made to differ on one page. */
.tbtc-tally__value {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink-100);
}

.tbtc-tally__value--solved {
  color: var(--solved);
}

.tbtc-tally__value--open {
  color: var(--open);
}

.tbtc-tally__value--accent {
  color: var(--accent);
}

/* The unit is not the money, so it does not take the money's colour. */
.tbtc-tally__unit {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-400);
}

/* ---------------------------------------------------------------------------
   The map — one tick per wallet, #1 through #160 in order. The figures above
   say how many remain; only this says which. It is the page's one authored
   graphic and it is drawn from the real set, never from the filter.

   No legend: the two figures directly above it are the legend, which is also
   what keeps the Word-With-The-Colour rule satisfied. It is aria-hidden for
   the same reason — it restates counts already read out beside it.
   ------------------------------------------------------------------------ */

.tbtc-map {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-900);
  border-block-start: 1px solid var(--line);
  /* An ordinal axis is not prose. Same reasoning as the Isolation Rule: #1
     stays at the start of the strip and #160 at the end under dir="rtl". */
  direction: ltr;
}

.tbtc-map__edge {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.tbtc-map__ticks {
  display: flex;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.tbtc-map__tick {
  flex: 1 1 0;
  min-width: 0;
  block-size: 16px;
  background: var(--open);
}

/* Claimed is history, so it sits back; what is still open reads at strength. */
.tbtc-map__tick.is-solved {
  background: var(--solved);
  opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   The wallets panel. The header row holds the title and the status filters;
   the filter is server-side, so the links are real navigation and the current
   one is drawn off aria-current with a raised fill on a sunken track — never
   the accent, which this page reserves for the prizes.
   ------------------------------------------------------------------------ */

.tbtc-wallets {
  /* Filter links land on #carteiras; clear the sticky site header. */
  scroll-margin-block-start: calc(var(--h-header) + var(--sp-4));
}

.tbtc-wallets__header {
  flex-wrap: wrap;
  row-gap: var(--sp-3);
}

.tbtc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.tbtc-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 28px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-300);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.tbtc-filter:hover {
  background: var(--ink-800);
  color: var(--ink-050);
}

.tbtc-filter[aria-current="page"] {
  background: var(--ink-750);
  color: var(--ink-050);
  box-shadow: var(--sh-1);
}

.tbtc-filter__count {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.tbtc-filter[aria-current="page"] .tbtc-filter__count {
  color: var(--ink-300);
}

/* ---------------------------------------------------------------------------
   The ledger. Fixed rails, set on the colgroup: seven columns of machine
   values want the same x in every row, and `table-layout: fixed` is also the
   only layout mode under which a long identifier cannot push the table wider
   than the panel around it. border-collapse stays separate so the sticky
   header can carry its own bottom hairline with it; the panel is not
   overflow-clipped for the same reason, so the last row rounds its own
   bottom corners.
   ------------------------------------------------------------------------ */

.tbtc-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

/* The rails are sized to the longest string each column can ever hold in any
   of the six locales, not to Portuguese. Status is the column that sets its
   own width: the Indonesian "Belum terpecahkan" chip is 161px where the
   Portuguese one is 121px and the Japanese one 54px, so 11% held the word in
   pt and sheared it in id. The two key columns give up the difference,
   because they are the only two that lose nothing by it — a 66-character
   public key is truncated at every width, so a narrower rail costs it a few
   characters of a preview whose full value is on the copy button. */
.tbtc-col--num {
  width: 5.5%;
}

.tbtc-col--range {
  width: 10%;
}

.tbtc-col--addr {
  width: 28.5%;
}

.tbtc-col--pub {
  width: 17%;
}

.tbtc-col--priv {
  width: 13%;
}

.tbtc-col--prize {
  width: 9%;
}

.tbtc-col--status {
  width: 17%;
}

.tbtc-table thead th {
  position: sticky;
  inset-block-start: var(--h-header);
  z-index: 2;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-900);
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: bottom;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-400);
  /* Headers wrap rather than ellipsise. A column key that reads "Intervalo da
     ch…" has failed, and which key is too long changes per locale — pt needs
     137px here where ja needs 48px. Wrapping is the only sizing that holds
     for all six without reserving the worst case in every one of them. The
     row is one line taller and every key is whole. */
  line-height: 1.25;
  overflow-wrap: break-word;
}

/* Qualified by the header row it has to beat: `.tbtc-table thead th` sets
   `text-align: start` at (0,1,2), which a bare class at (0,1,0) never
   outranks — which is why the PRÊMIO key has been sitting left of its own
   right-aligned figures. */
.tbtc-table thead th.tbtc-table__end,
.tbtc-table__end {
  text-align: end;
}

.tbtc-row td {
  padding: var(--sp-2) var(--sp-4);
  border-block-start: 1px solid var(--line);
  vertical-align: middle;
  overflow: hidden;
}

/* The header row already draws the rule above the first body row. */
.tbtc-table tbody tr:first-child td {
  border-block-start: 0;
}

@media (min-width: 1024px) {
  .tbtc-row:hover td {
    background: var(--ink-800);
  }

  /* The panel is not clipped (sticky needs a free ancestor), so the last
     row's hover fill rounds itself to the panel's corners. */
  .tbtc-table tr:last-child td:first-child {
    border-end-start-radius: calc(var(--r-lg) - 1px);
  }

  .tbtc-table tr:last-child td:last-child {
    border-end-end-radius: calc(var(--r-lg) - 1px);
  }
}

.tbtc-row__num {
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-200);
}

.tbtc-row__range {
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--ink-300);
}

.tbtc-row__range sup {
  font-size: 0.72em;
  line-height: 1;
}

.tbtc-row__addr .addr {
  color: var(--ink-200);
}

.tbtc-row__addr-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
}

/* An absent key and a claimed prize are the same kind of fact — nothing here.
   Disabled ink is allowed on an absence, and the dash keeps the column's rail
   visible down a row that would otherwise read as a hole. */
.tbtc-row__none {
  color: var(--ink-500);
}

/* ---------------------------------------------------------------------------
   The value lines. Each is its own clipboard controller scope, which is what
   lets three copy buttons live in one row without any change to the shared
   controller. The keys are annotations on the address, so they are drawn as
   such — dimmer, one notch smaller — and their tag is said once in the
   column header rather than on all 160 rows. The tag markup survives for the
   record layout below 1024px, where there is no header row to say it.
   ------------------------------------------------------------------------ */

.tbtc-key {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.tbtc-key__tag {
  display: none;
}

.tbtc-key__value {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* Both key previews are clipped by `text-overflow: ellipsis`, which cuts at a
   whole glyph inside a box whose width is fractional — so the ellipsis stops
   up to one character short of the tail and the column reads as though it
   were misaligned, eighty-eight rows deep. Capping the head at a whole number
   of `ch` closes it: in a monospaced face 1ch is exactly one advance, so the
   box holds precisely the characters drawn into it and the ellipsis lands on
   its edge. The cap also makes every preview in the column the same width,
   which puts every copy button on the same rail.

   Values shorter than the cap (most private keys here — #1 is "1") are under
   it and print whole, untouched. Between 1024px and roughly 1240px the column
   is narrower than the cap, the cap stops binding, and the previews fall back
   to fractional clipping — no worse than they were, just not quantised. */
.tbtc-key--pub .tbtc-key__value .addr__head {
  max-width: 13ch;
}

.tbtc-key--priv .tbtc-key__value .addr__head {
  max-width: 7ch;
}

.tbtc-row:hover .tbtc-key__value {
  color: var(--ink-300);
}

/* ---------------------------------------------------------------------------
   The copy button. Icon-only, and invisible until the row is pointed at — the
   same bargain the mempool arrow already makes, so 480 buttons never read as
   480 buttons. Keyboard users get it back on focus, and coarse pointers, which
   have no hover to offer, get it always.
   ------------------------------------------------------------------------ */

.tbtc-key__copy {
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: var(--sp-1);
  margin-inline-start: calc(var(--sp-1) * -1);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.tbtc-row:hover .tbtc-key__copy,
.tbtc-key__copy:focus-visible,
.tbtc-key__copy.copied {
  opacity: 1;
}

.tbtc-key__copy:hover {
  background: var(--ink-700);
  color: var(--ink-050);
}

/* Nothing to hover with, so the affordance cannot be spent on hover. Coarse
   pointers are asked for as well as hover:none — a touch laptop answers
   hover:hover and would otherwise be left with buttons it can never reveal. */
@media (hover: none), (pointer: coarse) {
  .tbtc-key__copy {
    opacity: 1;
  }
}

/* The confirmation: the drawn check replaces the drawn clipboard in place, both
   at the system's stroke weight. The controller only toggles .copied. */
.tbtc-key__copy-done {
  display: none;
}

.tbtc-key__copy.copied {
  color: var(--ink-050);
}

.tbtc-key__copy.copied .tbtc-key__copy-idle {
  display: none;
}

.tbtc-key__copy.copied .tbtc-key__copy-done {
  display: block;
}

/* The mempool.space affordance: quiet until the row is pointed at. */
.tbtc-row__ext {
  flex: none;
  color: var(--ink-300);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}

.tbtc-row:hover .tbtc-row__ext,
.tbtc-row__addr-link:focus-visible .tbtc-row__ext {
  opacity: 1;
}

.tbtc-row__prize {
  text-align: end;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.tbtc-row__prize .num {
  color: var(--accent);
}

/* The figure is the money; the ticker is not. Seventy-seven rows of orange
   "BTC" would spend the accent on a word that never changes. */
.tbtc-row__unit {
  margin-inline-start: 0.35em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-400);
}

/* The chip starts where its column starts. The rail is sized for the longest
   status word in any locale, and right-aligning the chip would spend that
   reserve as a gap between the prize and the chip in every locale that needs
   less than Indonesian. Started, the slack falls at the table's outer edge,
   where it reads as ordinary trailing padding. Figures still end-align; a
   badge is not a figure. */
.tbtc-row__status {
  white-space: nowrap;
}

/* Solved rows are history: dimmed to tertiary ink at rest, lifted back to
   secondary when pointed at — the row equivalent of a solved card's media
   restoring on hover. */
.tbtc-row--solved .tbtc-row__num,
.tbtc-row--solved .tbtc-row__range,
.tbtc-row--solved .tbtc-row__addr .addr {
  color: var(--ink-400);
}

.tbtc-row--solved:hover .tbtc-row__num,
.tbtc-row--solved:hover .tbtc-row__range,
.tbtc-row--solved:hover .tbtc-row__addr .addr {
  color: var(--ink-300);
}

/* After the solved rules, so the pointed-at address always reads brightest. */
.tbtc-row .tbtc-row__addr-link:hover .addr {
  color: var(--ink-050);
}

/* ---------------------------------------------------------------------------
   Provenance — small print under the ledger, the tx id at machine face.
   ------------------------------------------------------------------------ */

.tbtc__source {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

.tbtc__source-link {
  color: var(--ink-300);
  text-decoration: underline;
  transition: color var(--dur-1) var(--ease);
}

.tbtc__source-link:hover {
  color: var(--ink-050);
}

/* ---------------------------------------------------------------------------
   The Isolation Rule, applied to this surface's machine values. `.mono` and
   `.addr` already isolate; the tally figures, filter counts and prizes are
   isolated here so a signed or spaced figure never reorders under dir="rtl".
   ------------------------------------------------------------------------ */

.tbtc-tally__value,
.tbtc-filter__count,
.tbtc-key__value,
.tbtc-row__prize .num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Below 1024px the table stops being a table: each wallet becomes a compact
   record — number and prize, then the address, then whichever keys exist,
   then range and status. Seven columns of hex do not survive a tablet, let
   alone a phone.

   The record is a wrapping flex row rather than a grid of named areas, and
   that is load-bearing: most wallets have no public key, many have no private
   key, and a flex gap is only drawn between items that exist. Named grid rows
   would have left each absent key a stray gap, so cards would have breathed
   differently depending on data they are not showing.
   ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
  .tbtc-table,
  .tbtc-table tbody,
  .tbtc-table tr,
  .tbtc-table td {
    display: block;
  }

  .tbtc-table thead,
  .tbtc-table colgroup {
    display: none;
  }

  /* Qualified by the table so it outranks the block reset above. */
  .tbtc-table tr.tbtc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-block-start: 1px solid var(--line);
  }

  .tbtc-table tbody tr.tbtc-row:first-child {
    border-block-start: 0;
  }

  .tbtc-row td {
    padding: 0;
    border-block-start: 0;
  }

  /* An em-dash is a column-rail device. There are no rails here, so a missing
     key is simply a line the record does not print. */
  .tbtc-row td:has(> .tbtc-row__none) {
    display: none;
  }

  /* The record opens on the number and the status and closes on the range and
     the prize. Status rides the top line rather than the prize because a
     solved wallet has no prize to print — pairing the two would have left the
     opening line of eighty-three records with the number alone on it. */
  .tbtc-row__num {
    order: 1;
    flex: 1 1 auto;
  }

  .tbtc-row__status {
    order: 2;
    flex: none;
  }

  .tbtc-row__addr {
    order: 3;
    flex: 1 0 100%;
  }

  /* Public then private, by document order. */
  .tbtc-row__key {
    order: 4;
    flex: 1 0 100%;
  }

  .tbtc-row__range {
    order: 5;
    flex: 1 1 auto;
  }

  .tbtc-row__prize {
    order: 6;
    flex: none;
  }

  /* No header row to name the keys, so the tags come back. A floor width
     lines the two values up with each other down the record. */
  .tbtc-key__tag {
    display: block;
    flex: none;
    min-width: 3.75rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--ink-400);
  }

  .tbtc-key__copy {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .tbtc {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .tbtc__head {
    margin-block-end: var(--sp-5);
  }

  .tbtc__title {
    font-size: var(--fs-2xl);
  }

  .tbtc__about {
    margin-block-end: var(--sp-6);
  }

  .tbtc-standing {
    margin-block-end: var(--sp-6);
  }

  .tbtc-tally__cell {
    padding: var(--sp-3) var(--sp-4);
  }

  .tbtc-tally__value {
    font-size: var(--fs-xl);
  }

  .tbtc-map {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }

  /* At phone width a tick is barely a pixel and the 1px gaps would eat most
     of the strip. Dropping them keeps the shape — solid, comb, solid. */
  .tbtc-map__ticks {
    gap: 0;
  }

  .tbtc-map__tick {
    block-size: 12px;
  }
}