/* ============================================================
   Alpha Finance: funding rates page
   Page-scoped skin, loaded after alpha.css. Additive only: nothing in here
   changes a rule the rest of the site relies on.
   ============================================================ */

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

/* ---------- hero ---------- */

.fnhero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--lime) 4%, transparent), transparent),
    var(--bg);
  overflow: hidden;
}
.fnhero .wrap { position: relative; }
.fnhero-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px 56px;
  align-items: center;
}
.fnhero-inner { padding: 26px 0 0; max-width: 720px; }

/* the two prints worth lifting out of the table: the most crowded trade on
   each side, sitting beside the headline rather than in a rail of their own */
.fnhero-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 0 22px;
}
.fnstat {
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.fnstat-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.fnstat-v {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fnstat-v i { font-style: normal; }
.fnstat-v .up { color: var(--pos-text); }
.fnstat-v .down { color: var(--neg-text); }
.fnstat-s {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.fr-tic {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: -2px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
@media (max-width: 860px) {
  .fnhero-grid { grid-template-columns: 1fr; gap: 0; }
  .fnhero-side { flex-direction: row; padding: 18px 0 22px; }
  .fnhero-side .fnstat { flex: 1; }
}
@media (max-width: 480px) {
  .fnhero-side { flex-direction: column; }
}

.fnhero h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text);
}
.fnhero .dek {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

/* live-state line: reports what the page actually did. Never decorative. */
.feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding-bottom: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.feed b { font-weight: 500; color: var(--text-2); }
.feed .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: 1px;
}
.feed.is-live .dot { background: var(--pos-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-text) 18%, transparent); }
.feed.is-down .dot { background: var(--neg); }

/* ---------- shared control primitives (same dialect as the other skins) --- */

.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button {
  padding: 6px 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--text-2); background: var(--panel-2); }
.seg button[aria-pressed="true"] { color: #0a0b0d; background: var(--lime); }

.pick { display: flex; align-items: center; gap: 9px; }
.pick-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

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

.frwrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.fr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.fr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
}
.fr-search svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.fr-search input {
  width: 170px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
}
.fr-search input::placeholder { color: var(--faint); }
.fr-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.fr-scroll { overflow-x: auto; }
table.frates {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.frates th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.frates th.l { text-align: left; }
.frates th[data-k] { cursor: pointer; }
.frates th[data-k]:hover { color: var(--text-2); }
.frates th[aria-sort] { color: var(--lime); }
.frates th[aria-sort]::after { content: " \2193"; }
.frates th[aria-sort="ascending"]::after { content: " \2191"; }

.frates td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}
.frates tbody tr:last-child td { border-bottom: 0; }
.frates tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }

.frates td.co { text-align: left; }
/* marks arrive on every possible ground; the ring keeps them legible on ours */
.fr-cic {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: -4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
/* a venue's mark and its name read as one label wherever the pair appears:
   a table header, or a card's heading */
.fr-ex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fr-ex img {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
.frates td.co b {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.frates td.co small {
  margin-left: 8px;
  font-size: 10px;
  color: var(--faint);
}
.frates td.px { color: var(--text); }
.frates td.fav { font-weight: 600; color: var(--text); }

/* funding semantics: negative prints (shorts paying) read green because they
   are the anomaly worth noticing; an elevated positive print runs hot */
.frates td.fneg, .frates td.fav.fneg { color: var(--pos-text); }
.frates td.fhot, .frates td.fav.fhot { color: var(--neg-text); }
.frates td.fnone { color: var(--faint); }
.frates td.none {
  text-align: center;
  padding: 26px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

/* the foot under a table: a sentence or two naming what the columns mean.
   It reads as prose, so the terms in it sit in the line rather than being
   laid out as items: a flex container puts its gap around every <b>, which
   opens a hole mid-sentence. A foot that really is a row of separate notes
   says so with .is-notes, and wraps each note in its own element. */
.fr-foot {
  padding: 11px 16px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.fr-foot.is-notes { display: flex; flex-wrap: wrap; gap: 6px 18px; line-height: 1.5; }
.fr-foot b { font-weight: 500; color: var(--muted); }

/* ---------- the heatmap panel ---------- */

.frmap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.frmap-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.frmap-head h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-right: auto;
}
.frmap-head h2 small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.frmap-body {
  position: relative;
  padding: 14px 16px 10px;
  background: var(--bg-2);
}
#fr-map { display: block; width: 100%; }
.frmap-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.frmap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px 16px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.fr-scale { display: flex; align-items: center; gap: 8px; }
.fr-scale i {
  display: inline-block;
  width: 120px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neg), var(--bg-2) 50%, var(--lime));
  border: 1px solid var(--line);
}

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

@media (max-width: 720px) {
  .fr-search input { width: 110px; }
  .fr-count { display: none; }
}

/* hero tiles as one board: hairlines between cells, no separate cards */
.fnhero-side { gap: 1px; }
.fnhero-side .fnstat { border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2); }

/* status line: one quiet sentence in grey, not a row of mono chips.
   The dot still carries feed state; the words just read as words. */
.feed, .liqshero .feed {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  gap: 6px 0;
}
.feed > span + span::before, .liqshero .feed > span + span::before {
  content: "\00b7";
  margin: 0 9px;
  color: var(--faint);
}
.feed b, .liqshero .feed b { color: var(--text-2); font-weight: 500; }