/* ============================================================
   Alpha Finance v2: RSI Heatmap (/crypto-rsi-heatmap/)
   Loaded after funding.css, lsr.css and rwaperps.css, whose hero, stat
   tiles, cards, mover lists, table and pager it reuses, the same way
   Crypto Prices does. Only the zone colours, the breadth bar, the heatmap chart,
   the timeframe tiles and the RSI chips live here.
   ============================================================ */

/* the five zones, one colour each, used by the bar, the chips and the map */
:root {
  --rz-ob: #ff7a66;
  --rz-st: #f2a93b;
  --rz-ne: #7d8794;
  --rz-wk: #5fb3a8;
  --rz-os: #3fd6ae;
}

/* a capture is good data with a date on it: lit, but without the live glow */
.feed.is-captured .dot { background: var(--lime); }

/* ---------- the heatmap card ---------- */

.rsi-mapcard .lsr-card-head .pick { margin-left: auto; }

/* the breadth bar is the map's legend: five zones, each as wide as its share of the board */
.rsi-breadth { padding: 14px 16px 2px; }
.breadth-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-2); }
.breadth-bar i { display: block; height: 100%; min-width: 0; transition: flex-basis 0.4s ease; }
.breadth-bar .ob { background: var(--rz-ob); }
.breadth-bar .st { background: var(--rz-st); }
.breadth-bar .ne { background: var(--rz-ne); }
.breadth-bar .wk { background: var(--rz-wk); }
.breadth-bar .os { background: var(--rz-os); }
.breadth-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.breadth-legend span { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.breadth-legend i { align-self: center; width: 8px; height: 8px; border-radius: 50%; }
.breadth-legend b { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.breadth-legend small { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--faint); }

/* the heatmap: a chart of RSI by coin size, drawn on a canvas that fills its frame */
.rsi-map { position: relative; height: 520px; margin: 8px 6px 0 2px; }
.rsi-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* a coin with no mark on file gets its initials in the table */
.rsi-ini { --c: #6b727c; font-family: var(--mono); font-size: 7.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); }

/* every timeframe: six tiles across the top, each the board's average on a
   0 to 100 track with 30 and 70 ticked. The tile is the timeframe picker. */
.rsi-tfs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.rsi-tf {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 11px 13px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, var(--panel)), var(--panel));
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rsi-tf:hover { border-color: var(--line-2); }
.rsi-tf.is-on { border-color: color-mix(in srgb, var(--lime) 55%, transparent); background: color-mix(in srgb, var(--lime) 6%, var(--panel)); }
.rsi-tf .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rsi-tf .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rsi-tf.is-on .k { color: var(--lime); }
.rsi-tf b { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rsi-tf .trk {
  position: relative; display: block; height: 6px; border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(30% - 1px), var(--line-2) calc(30% - 1px), var(--line-2) 30%, transparent 30%,
                           transparent calc(70% - 1px), var(--line-2) calc(70% - 1px), var(--line-2) 70%, transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--rz-os) 26%, transparent) 0 30%, color-mix(in srgb, var(--rz-ne) 20%, transparent) 30% 70%, color-mix(in srgb, var(--rz-ob) 26%, transparent) 70% 100%);
}
.rsi-tf .trk i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.rsi-tf small { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rsi-tf em { font-style: normal; font-weight: 600; }
.rsi-tf em.ob { color: var(--rz-ob); }
.rsi-tf em.os { color: var(--rz-os); }
@container (max-width: 176px) { .rsi-tf .w { display: none; } }

/* ---------- the board ---------- */

.rz { display: inline-block; min-width: 44px; padding: 3px 7px; border-radius: 4px; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.rz.ob { color: var(--rz-ob); background: color-mix(in srgb, var(--rz-ob) 14%, transparent); }
.rz.st { color: var(--rz-st); background: color-mix(in srgb, var(--rz-st) 14%, transparent); }
.rz.ne { color: var(--text-2); background: color-mix(in srgb, var(--rz-ne) 14%, transparent); }
.rz.wk { color: var(--rz-wk); background: color-mix(in srgb, var(--rz-wk) 14%, transparent); }
.rz.os { color: var(--rz-os); background: color-mix(in srgb, var(--rz-os) 16%, transparent); }
.rz.none { color: var(--faint); background: transparent; }

body.rsi .frates { min-width: 900px; }
body.rsi .frates th.tf, body.rsi .frates td.tf { width: 74px; padding-left: 8px; padding-right: 8px; text-align: center; }
body.rsi .frates td.co b { font-weight: 600; }
body.rsi .frates tbody tr[data-s] td { padding-top: 6px; padding-bottom: 6px; }
/* the timeframe the map is showing, lit down the column */
body.rsi .frates th.tf.on { color: var(--lime); }
body.rsi .frates td.tf.on { background: color-mix(in srgb, var(--lime) 4%, transparent); }
body.rsi .frates tbody tr:hover td.tf.on { background: color-mix(in srgb, var(--lime) 7%, transparent); }
body.rsi .fr-bar { gap: 10px 14px; }

@media (max-width: 1080px) {
  .rsi-tfs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsi-map { height: 440px; }
}
@media (max-width: 760px) {
  .rsi-tfs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsi-map { height: 400px; }
  .breadth-legend { justify-content: flex-start; }
  .breadth-legend small { display: none; }
}