/* ============================================================
   Alpha Finance: DeFi yields (/defi-yields/)
   Loaded after funding.css and lsr.css, whose hero, stat tiles, filter bar
   and table it reuses, the same way Crypto Prices, RWA Perps and the Whale
   Tracker do. Only what is particular to this page lives here: the trust score
   beside the headline yield, the filter dropdowns, the protocol and chain
   marks, the way out of a row, and the methodology's weights table and
   tier ladder. Additive only.
   ============================================================ */

body.dfi .section { padding: 34px 0 36px; }
body.dfi .section-head { margin-bottom: 16px; }

/* ---------- hero tiles: the trust score rides beside the yield ---------- */

/* the yield means nothing without its score, so the two share the line */
.fnstat-v .gr { margin-left: 6px; min-width: 0; padding: 2px 5px 1px; vertical-align: 3px; }
body.dfi .fnstat-v { white-space: nowrap; }
.fnstat-v .gr:empty { display: none; }
.fnstat-s b { font-weight: 500; color: var(--text-2); }

/* the tile: the asset's coin beside its yield, the paying protocol's mark
   and name underneath, and the way out to it in the corner */
.fnstat-top { display: flex; align-items: flex-start; gap: 8px; }
.fnstat-top .fnstat-k { flex: 1; min-width: 0; }
.fnstat-go { flex: none; margin: -3px -3px 0 0; }
.fnstat-go .visit { width: 20px; height: 20px; border-radius: 5px; border-color: var(--line); }
.fnstat-go .visit svg { width: 10px; height: 10px; }
.fnstat-row, body.term.dfi .vhero .fnstat-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 9px; min-width: 0; }
/* a tile too narrow for coin, yield and score on one line gives up the coin first */
body.dfi .fnstat { container-type: inline-size; }
/* measured on the tile's inner width: coin 20 + gap 8 + a five-digit yield + the pill is about 126px */
@container (max-width: 126px) { .fnstat-coin { display: none; } }
.fnstat-coin { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2); }
body.dfi .fnstat-row .fnstat-v, body.term.dfi .vhero .fnstat-row .fnstat-v { margin-top: 0; }
/* the terminal clamps a tile's caption to two lines as a box; here it is one row: mark, then text that clips */
body.dfi .fnstat-s, body.term.dfi .vhero .fnstat-s { display: flex; align-items: center; gap: 0; min-width: 0; overflow: visible; -webkit-line-clamp: unset; }
body.dfi .fnstat-s .mk { flex: none; width: 15px; height: 15px; margin-right: 7px; border-radius: 4px; vertical-align: 0; }
body.dfi .fnstat-s > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dfi .fnstat-s a { font-weight: 500; color: var(--text-2); text-decoration: none; transition: color 0.13s; }
body.dfi .fnstat-s a:hover { color: var(--lime); }
/* the whole tile answers the pointer, and the button in its corner lights with it */
body.dfi .fnstat { transition: border-color 0.15s, background 0.15s; }
body.dfi .fnstat:hover { border-color: var(--line-2); }
body.dfi .fnstat:hover .visit { color: var(--text); border-color: var(--line-2); }

/* ---------- the filter bar ---------- */

/* the dropdowns, in the dialect of the search box beside them */
body.dfi .fr-search { height: 30px; }
body.dfi .fr-search input { width: 150px; padding: 0; }
.fr-sel {
  appearance: none;
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%236b727c'/%3E%3C/svg%3E") no-repeat right 9px center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  /* a chain or category name is allowed to be long; the control is not */
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s, color 0.15s;
}
.fr-sel:hover { border-color: var(--line-2); color: var(--text); }
.fr-sel:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.fr-sel option { background: var(--panel-2); color: var(--text); }
body.dfi .fr-bar { gap: 10px 10px; }
body.dfi .fr-count { margin-left: auto; margin-right: 8px; }

/* ---------- the table ---------- */

body.dfi .frates { min-width: 980px; }
/* the name cell is the one that gives way: it holds the width the figures
   leave it and clips, so a long pool name never spreads the row */
body.dfi .frates td.co { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
body.dfi .frates td.co small { font-size: 10.5px; }
body.dfi .frates td.ch { max-width: none; }
body.dfi .frates th.go, body.dfi .frates td.go { width: 24px; padding-left: 6px; }
body.dfi .frates td.fnone { color: var(--faint); }
/* the score cell: the tier in words, then the number in its pill */
body.dfi .frates td.sc em { margin-right: 8px; font-style: normal; font-size: 10.5px; color: var(--muted); }

/* ============================================================
   Protocol and chain marks

   A mark in front of the name is what lets you find Lido in a fifty-row
   table without reading fifty names. Logos are local files (see
   tools/fetch-defi-meta.py). Where one is missing the monogram takes its
   place at the same size, so the column keeps its rhythm.
   ============================================================ */

.mk {
  display: inline-block;
  vertical-align: -5px;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 5px;
  object-fit: contain;
  /* logos arrive on every possible ground, including white. A hairline keeps
     a pale mark from bleeding into the panel behind it. */
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
.mk-sm { width: 15px; height: 15px; margin-right: 8px; border-radius: 4px; vertical-align: -4px; }

/* the fallback: initials on a colour derived from the name itself */
.mk.is-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #0a0b0d;
  box-shadow: none;
}
.mk-sm.is-mono { font-size: 7px; }

/* ---------- the way out of a row ----------
   A link to the protocol's own front end, sized to the marks in the first
   column so the row reads as bounded by two small squares. */

.visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  color: var(--muted);
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.visit svg { width: 11px; height: 11px; }
.visit:hover {
  color: #0a0b0d;
  background: var(--lime);
  border-color: var(--lime);
}
.visit:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }

/* a protocol that publishes no homepage gets a dash, not a dead button */
.visit.is-off {
  border-style: dashed;
  border-color: var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
}

/* ---------- the weights table in the methodology ---------- */

.weights { width: 100%; border-collapse: collapse; margin: 18px 0 22px; }
.weights th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
.weights th:last-child, .weights td:last-child { text-align: right; }
.weights td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.weights td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
.weights .w {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* the tiers, laid out as the ladder they are */
.ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.ladder div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.ladder em { font-style: normal; color: var(--faint); }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  body.dfi .fr-search { flex-basis: 100%; }
  body.dfi .fr-search input { width: 100%; }
  body.dfi .fr-count { display: none; }
}