/* collectors.mintface.art
 *
 * The design system is mintface.art's, linked from there rather than copied, so
 * the tokens, the two voices and the chrome are one thing in one place and the
 * eventual Klim swap lands on both sites at once. Only what is peculiar to
 * these two pages lives here.
 *
 * The single green stays reserved for availability, which is a thing that never
 * happens on a page about work already collected. So these pages are ink only.
 *
 * Two voices, as on the main site: Geist says who someone is, Geist Mono says
 * what they hold ... wallets, ENS, counts, dates.
 */

.page { max-width: 1180px; margin: 0 auto; padding: 0 28px }

/* ---------- heads ---------- */
.head { padding: 40px 0 0 }
.head h1 {
  font-family: var(--font-sans); font-weight: 400; margin: 0;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -.03em;
}
.head h1.mono { font-family: var(--font-mono); font-size: clamp(22px, 3.2vw, 38px); letter-spacing: -.02em }
.head .meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 14px; font-variant-numeric: tabular-nums;
}
.head .meta span + span::before { content: '·'; margin: 0 10px; color: var(--rule) }
/* the board total is a measurement, so it sits in mono with its figures
   aligned, and the movement rides along behind it rather than beside it */
.head .meta .tao-total { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
.head .meta .cap { text-transform: uppercase; letter-spacing: .12em; font-size: .92em }
/* a total nobody has recomputed for a day and a half is not today's total, and
   saying so is cheaper than being caught not saying it */
.head .meta .stale { color: var(--alert) }
/* a name that leads to the front door rather than to a profile: the same link,
   without the confidence of one */
.rows .dormant { border-bottom-color: transparent }
.rows .dormant:hover { border-bottom-color: var(--rule) }
/* TAO is a measurement, so it speaks in mono like the rest of them, one step
   up in weight from the works line because it is the thing being ranked. */
.head .tao { margin-top: 10px }
.head .tao a {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--rule);
}
.head .tao a:hover { border-color: var(--ink) }
/* Their standing, beside the figure it belongs to. Set back from the total
   because the total is the measurement and this is only where it places. */
.head .tao .rank {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 14px;
}
/* Participation is part of the patron record, so it sits with the rest of it
   ... quietly, because weighing in is not a score. */
.head .nudges { margin-top: 9px }
.head .nudges a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.head .nudges a:hover { color: var(--ink); border-color: var(--ink) }
.head .wallet {
  font-family: var(--font-mono); font-size: 12px; color: var(--faint);
  margin-top: 10px; word-break: break-all;
}

/* ---------- a collector's own name ----------
   Two voices, one person. The heading is what they are called, in Geist, and
   the .eth under it is what the chain answers with, in mono ... the measuring
   voice, because a reverse record is a fact to be checked rather than a name to
   be read. Where the heading already is the .eth, the line is not repeated. */
.head .ens {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); margin-top: 8px;
}

/* EDIT sits beside the name at the size of a label, not of a button. Setting a
   name is a rare and quiet act and the control should read as one. */
.head .rename {
  background: none; border: 0; padding: 0; margin-left: 14px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); vertical-align: middle;
}
.head .rename:hover { color: var(--ink) }
.head .claim {
  background: none; border: 0; padding: 0; cursor: pointer; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); display: block;
}
.head .claim:hover { color: var(--ink) }

/* The gap, taught once.
   Prose rather than a control, because it is a thing worth knowing rather than
   a thing to press ... and the one press in it is set as a link inside the
   sentence, where the sentence puts it. Faint: it is addressed to one person,
   on their own page, and everybody else reading over their shoulder should
   find it easy to ignore. */
.head .teach {
  margin-top: 12px; max-width: 46em;
  font-size: 12.5px; line-height: 1.7; color: var(--faint);
}
.head .teach .asLink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted); border-bottom: 1px solid var(--rule);
}
.head .teach .asLink:hover { color: var(--ink); border-color: var(--ink) }

/* Why something did not happen, wherever it did not happen.
   The claim question used to set its reason into the editor's line, which only
   exists while the editor is open ... so a wallet that connected and was
   refused said so into nothing, and the page simply asked again. The line is
   drawn here whether or not anything has been said into it. */
.head .said {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--muted); margin-top: 10px; max-width: 34em;
}
.head .said.bad { color: var(--alert) }

.namer { margin-top: 16px; max-width: 30em }
.namer input {
  width: 100%; background: transparent; border: 1px solid var(--rule); color: var(--ink);
  padding: 10px 12px; font-family: var(--font-sans); font-size: 17px;
}
.namer input:focus { outline: none; border-color: var(--mark) }
.namer .row {
  display: flex; align-items: center; gap: 18px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.namer .row .count { margin-left: auto; font-variant-numeric: tabular-nums }
.namer .row .count.over { color: var(--alert) }
.namer button.go {
  background: none; border: 1px solid var(--rule); color: var(--muted); cursor: pointer;
  padding: 8px 15px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.namer button.go:hover:not(:disabled) { border-color: var(--ink); color: var(--ink) }
.namer button.go:disabled { opacity: .45; cursor: default }
.namer button.plain { background: none; border: 0; padding: 0; cursor: pointer; color: var(--faint);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase }
.namer button.plain:hover { color: var(--ink) }
.namer .said { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 10px }
.namer .said.bad { color: var(--alert) }

/* ---------- the index table ---------- */
.sorts { display: flex; gap: 20px; margin: 34px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--rule) }
.sorts button {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 0;
  cursor: pointer;
}
.sorts button[aria-pressed="true"] { color: var(--ink) }
.sorts button:hover { color: var(--ink) }

/* The search sits on the sort row because it asks the same table a question,
   just a different one: not how shall I order this, but where am I in it. */
.find { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative }
.find input {
  width: 232px; max-width: 46vw; background: transparent; border: 0;
  border-bottom: 1px solid var(--rule); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  padding: 2px 18px 5px 0; -webkit-appearance: none; appearance: none;
}
.find input::placeholder { color: var(--faint); letter-spacing: .1em; text-transform: uppercase }
.find input:focus { outline: none; border-bottom-color: var(--ink) }
.find input::-webkit-search-cancel-button { display: none }
.find button {
  position: absolute; right: 0; bottom: 3px; background: none; border: 0; padding: 0;
  font-family: var(--font-mono); font-size: 14px; line-height: 1; color: var(--faint); cursor: pointer;
}
.find button:hover { color: var(--ink) }

@media (max-width: 640px) {
  .sorts { flex-wrap: wrap; gap: 16px }
  .find { margin-left: 0; width: 100%; order: 3; padding-top: 4px }
  .find input { width: 100%; max-width: none }
}

.rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
/* Column spacing is a gap between cells, not each cell's own right padding.
   The old rule gave every cell padding-right and then took it away again for
   the numeric ones, so any two adjacent numeric columns ran together:
   "1,491,771Aug 2026" in the body and "TAOLAST COLLECTED" in the header. The
   gap lives on the adjacent sibling now, so it holds for whatever column is
   added next instead of needing a patch per column. */
.rows th {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; text-align: left; padding: 14px 0 10px;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.rows td { padding: 13px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline }
.rows th + th, .rows td + td { padding-left: 26px }
.rows th.n, .rows td.n { text-align: right; white-space: nowrap }
/* The position. Quiet on purpose: it is an index, not a score, and the eye
   should land on the name. Tabular so the column stays a column at 3,679
   rows, and right-aligned so the digits agree with each other. */
.rows th.pos, .rows td.pos {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
  width: 1%; padding-right: 0;
}
.rows th.pos { color: var(--faint) }
/* the collector name takes the slack so the figures never have to compress */
/* The name column takes the slack, and yields when there is none. max-width 0
   on a full-width cell is what lets it shrink instead of forcing the table
   wider than the page: a truncated 1,491,843 would be the leaderboard failing
   at the one thing it is for, so the figure never gives way, the name does. */
.rows th.who, .rows td.who, .rows th:nth-child(2), .rows td:nth-child(2) {
  width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Narrow screens drop columns rather than cropping them. The three that
   survive everywhere are the position, who it is, and the figure they are
   ranked by; the rest return as the room appears. */
.rows .c-works, .rows .c-unique, .rows .c-last { display: none }
@media (min-width: 560px) { .rows .c-works { display: table-cell } }
@media (min-width: 760px) { .rows .c-unique { display: table-cell } }
@media (min-width: 900px) { .rows .c-last { display: table-cell } }
.rows tr:last-child td { border-bottom: 0 }
.rows a { text-decoration: none; color: var(--ink) }
.rows a:hover { text-decoration: underline; text-underline-offset: 3px }
.who { font-family: var(--font-mono); font-size: 13.5px }
.who.named { font-family: var(--font-sans); font-size: 15px }
.who.quiet { color: var(--faint) }
.rows td.n, .rows td.when { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap }
.rows td.n strong { font-weight: 400; color: var(--ink) }
.more { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding: 22px 0 0 }

/* The register explains itself in prose, once, under the heading. It changes
   with the sort because each sort is a different question, and it changes
   instantly ... a sentence that fades in reads as a tooltip. */
.explain {
  font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65;
  color: var(--ink-4); max-width: 34em; margin: 22px 0 0;
}

/* ---------- a collector's wall ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px; margin: 40px 0 0 }
.card { text-decoration: none; display: block }
.card .frame {
  background: var(--sunk); border: 1px solid var(--rule); overflow: hidden;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block }
/* what one work has contributed, over the image on hover. It is supplementary,
   so it stays out of the way until asked for ... and on a touch screen, where
   there is no hover, a tap on the card goes to the work anyway. */
.card .frame { position: relative }
.card .wtao {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 10px;
  background: var(--scrim); color: var(--scrim-ink);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .14s ease;
}
.card:hover .wtao, .card:focus-visible .wtao { opacity: 1 }
@media (hover: none) { .card .wtao { opacity: 1 } }
.card .t { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); margin-top: 10px; line-height: 1.35 }
.card .s {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.card:hover .t { text-decoration: underline; text-underline-offset: 3px }

.section { margin-top: 56px }
.section h2 {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 4px;
}

.loading { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 60px 0 }

@media (max-width: 640px) {
  .page { padding: 0 20px }
  /* the gap between columns comes down with the room, so the figure keeps its
     margin from the edge instead of being pushed through it */
  .rows th + th, .rows td + td { padding-left: 16px }
  .rows .tao, .rows td.n { font-size: 12px }
  .wall { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px }
}

/* ---------- set meters ----------
   A survey strip, not a chart. One segment per collection in the set, inked
   when the collector holds something from it and left as an outline when not.
   An empty segment is a link: it is the only selling this register does, and
   it does it by pointing at a gap rather than saying anything. */
/* Two up on a wide screen, so Geodetic reads beside AI and Painting beside
   Photography ... the two pairs that share works belong on the same line.
   One column once there is no room for two. */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 52px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--rule) }
/* the bar column is fixed so the labels line up down the strip whatever the
   set's length ... five segments and three should read as one survey, not two */
.meter { display: grid; grid-template-columns: 190px auto auto; justify-content: start; align-items: center; gap: 0 16px; line-height: 1 }
/* line-height:0 so the bar contributes no line box of its own, whatever the
   engine decides a display:flex span is */
.bar { display: flex; gap: 3px; line-height: 0 }
.seg {
  width: 34px; height: 10px; border: 1px solid var(--rule); background: transparent;
  display: block; text-decoration: none; transition: background .18s ease, border-color .18s ease;
}
.seg.on { background: var(--ink); border-color: var(--ink) }
a.seg:hover, a.seg:focus-visible { border-color: var(--ink) }
.meter .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.meter .lbl b { font-weight: 400; color: var(--ink) }
.meter.done .lbl { color: var(--ink) }
.meter .done-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--ink) }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 30px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule) }
.filters .set { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline }
.filters .cap {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-right: 2px;
}
.filters button {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 2px; cursor: pointer;
}
.filters button:hover { color: var(--ink) }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink) }
.filters .count { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); margin-left: auto }
.empty-wall { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 40px 0 }

@media (max-width: 900px) {
  .meters { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .seg { width: 18px }
  .meter { grid-template-columns: 110px auto auto; gap: 0 10px }
}

/* TAO is the widest number in the table, so it gets tabular figures and a
   little room. It is a leaderboard column: it should line up and be scanned. */
.rows .tao { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap }