/* ============================================================== wire.css ====
   mf-wire, 2026-08-31. Loaded LAST, after declutter.css, and override-only —
   same pattern as redesign.css and declutter.css. It adds no layout of its own
   and restates nothing: every rule here belongs to something this pass wired up
   for the first time, so there is nothing above it to conflict with.

   WHY A SEPARATE FILE RATHER THAN AN EDIT TO app.css. Three other passes
   (redesign, disclosure, declutter) already own regions of app.css, and one of
   them was running concurrently with this one. A new sheet cannot lose someone
   else's edit to a shared line, and it can be deleted in one command if this
   pass is ever reverted.

   Contents:
     1. the below-floor opt-in control and the rows it adds
     2. the coin page's secondary-figure blocks (fees, holder accounts)
   ========================================================================== */

/* ------------------------------------- 1. the below-floor opt-in control --- */
/* Sits in the tools row beside the count. Styled off .sel so it reads as a
   sibling control rather than as an alert: it is an option, not a warning. */
.fbtn {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.fbtn:hover { border-color: var(--faint); }
.fbtn[aria-pressed="true"] {
  border-color: var(--eq-bg);
  background: var(--eq-band);
  color: var(--eq-ink, var(--text));
}
.fbtn:focus-visible { outline: 2px solid var(--eq-bg); outline-offset: 2px; }

/* The rows it adds. Marked, never blended: a reader who opted in must be able
   to see at a glance which rows are the ones they asked for. The tint is
   deliberately weak — these are real coins with real figures, not errors. */
tr.r.is-below > td { background: var(--band, rgba(127, 127, 127, .05)); }
.tag-below { color: var(--faint); }
.bf-rank { color: var(--faint); cursor: help; }

/* On a phone the tag would push the ticker onto a second line in a 360px name
   cell, so it drops to the drawer's row instead of fighting for the width. */
@media (max-width: 760px) {
  .tag-below { display: none; }
  tr.r.is-below .c-name::after {
    content: "below floor";
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--faint);
  }
}

/* ------------------- 1a-bis. launches that have not traded yet -------------- */
/* Same treatment as a below-floor row and for the same reason: marked rather
   than blended. "No trades yet" is a different fact from "below the floor" and
   a very different fact from "dead", and a reader who cannot tell them apart is
   back to reading absence as worthlessness. */
tr.r.is-untraded > td { background: var(--band, rgba(127, 127, 127, .05)); }
.tag-untraded { color: var(--faint); cursor: help; }

/* The price cell's third state. Same shape and affordance as declutter.css's
   .px-unk — a stated absence with an explanation behind it, never a number and
   never a blank — because it answers the same question. Different words,
   though, and that is the point: "Unknown" means we tried and failed, and this
   means nobody has bought it yet. */
.px-untraded {
  color: var(--faint);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .01em;
  border-bottom: 1px dotted var(--line-2);
  cursor: help;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .tag-untraded { display: none; }
  tr.r.is-untraded .c-name::after {
    content: "no trades yet";
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--faint);
  }
}

/* ------------------------------ 1b. the native price, where no USD exists --- */
/* Same slot, same alignment and the same dotted-underline affordance as
   declutter.css's .px-unk, because it answers the same question — but it is a
   real number, so it is NOT italic and NOT the faint colour. It is quieter than
   a dollar price and louder than a stated absence, which is exactly what it is:
   an exact figure in a unit other than the one the column is headed in. */
.px-nat {
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px dotted var(--line-2);
  cursor: help;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.px-nat > i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--faint);
  margin-left: 4px;
}

/* ----------------------------------------- 2. coin page, secondary blocks --- */
/* The fee block and the holder-accounts block are new sections in the coin
   page's right-hand column. They reuse .facts for the rows themselves; what is
   here is only the heading rhythm and the one-line note under each. */
.sec-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}
.fact-sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 2px;
}
/* "Unknown", spelled out, wherever a secondary figure could not be sourced.
   A bare dash in a block of prose reads as a typo; in the table it is right,
   because every neighbouring cell is a number and the column teaches the
   convention. Same reasoning as priceCell() on the leaderboard. */
.unk {
  color: var(--faint);
  font-style: italic;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* The shipped on-chain description, under the lore body. Rendered only when the
   field actually carries text and when it differs from the lore body, and never
   generated for a coin that did not ship one. */
.lore-desc {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.lore-pairing {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--eq-bg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

/* The below-floor notice on a coin's own page. It has to be visible before the
   figures, because the figures are the thing it qualifies. */
.bf-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--faint);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}