/* ──────────────────────────────────────────────────────────────────────────
   labels.css — the site's single label layer.

   One "technical/ledger" voice for every label (JetBrains Mono, UPPERCASE,
   tracked) so the on-chain/dossier aesthetic stays cohesive. This is the ONLY
   stylesheet loaded on both the standalone /mask page and the main site, so a
   label role is defined here once and reused everywhere — change it here and it
   changes across the whole site.

   Tokens it reads (--font-*, --fs-*, --track-*, colours) come from whichever
   :root is loaded — css/tokens.css on /mask, css/style.css on the main site
   (kept in sync). New label roles go here, not in component CSS.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Canonical scrollbar ────────────────────────────────────────────────────
   One Hashmasks-styled scrollbar for EVERY scroll surface (and the page itself),
   on every page, so nothing falls back to the chunky default OS bar. A slim
   thumb (--line-strong) on a transparent track, brightening to --dim on hover —
   the same thin bar the gallery/console already used, now applied universally
   and at one consistent width. Surfaces that deliberately hide their bar
   (.filter-tabs, .vit-chips) keep their own higher-specificity rules untouched.
   Tokens resolve from whichever :root is loaded (style.css or tokens.css). */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-sm); }
*::-webkit-scrollbar-thumb:hover { background: var(--dim); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Overline / eyebrow — sits above a title ("Hashmask Nº 9331", "Minted …") */
.lbl-over {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--gold);
}

/* Section label — block heading ("TRAITS", "HISTORY", "ON-CHAIN") */
.lbl-section {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--off);
}

/* Field key — the label in a key/value pair ("Owner", "Rarity rank") */
.lbl-key {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  color: var(--dim);
}

/* Meta / caption — timestamps, "of 16,384", sub text */
.lbl-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--dim);
}

/* Activity tag / chip — Sold / Renamed / Named. Pill, mono, colour-coded:
   subtle — coloured text + a same-hue faint border, no fill. */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--faint);
  border-radius: var(--r-sm);          /* square (technical), matches the card badges */
  color: var(--dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.tag--sale  { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 32%, transparent); }
.tag--rename,
.tag--named { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 32%, transparent); }