/* /movers: the market's scoreboard with the why under every score (2026-10-18).
   Built on radar-record.css's tokens (--rd-*): the same ground, numbers,
   colours as direction, hairlines and dots, so the two pages read as one. */

.mv-wrap { padding-bottom: 48px; }
.mv-others { margin-top: 14px; }
.mv-row--other { padding: 9px 0 10px; }
.mv-rec--none { display: none; }
@media (min-width: 900px) { .mv-rec--none { display: inline; } }

/* The window switch: two plain tabs, the active one underlined in the accent. */
.mv-tabs { display: flex; gap: 4px; margin: 6px 0 14px; border-bottom: 1px solid var(--rd-hair); }
.mv-tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--rd-mut); cursor: pointer;
    transition: color 0.18s var(--rd-ease), border-color 0.18s var(--rd-ease);
}
.mv-tab:hover { color: var(--rd-ink); }
.mv-tab[aria-selected="true"] { color: var(--rd-ink); border-bottom-color: var(--rd-accent-text); }
.mv-tab:focus-visible { outline: 2px solid var(--tt-focus-ring, #EE5A2C); outline-offset: -2px; border-radius: 4px; }

/* The market strip: up count, a two-tone bar, down count, the typical coin. */
.mv-market { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "l bar r" "med med med"; align-items: center; gap: 6px 10px; margin: 0 0 18px; font-size: 13px; color: var(--rd-mut); }
.mv-market-l { grid-area: l; } .mv-market-r { grid-area: r; }
.mv-market-l b, .mv-market-r b, .mv-market-med b { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-market-bar { grid-area: bar; display: block; height: 6px; border-radius: 3px; background: var(--rd-down); overflow: hidden; }
.mv-market-up { display: block; height: 100%; background: var(--rd-up); border-radius: 3px 0 0 3px; }
.mv-market-med { grid-area: med; font-size: 12.5px; color: var(--rd-dim); }
.is-up { color: var(--rd-up); } .is-down { color: var(--rd-down-text); } .is-flat { color: var(--rd-mut); }

/* Column names, a wide list only. */
.mv-cols { display: none; }

/* One coin, one row. Phone: five short lines. */
.mv-list { list-style: none; margin: 0; padding: 0; }
.mv-row {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "who act" "move move" "why why" "past past";
    gap: 6px 12px; padding: 13px 0 14px; border-bottom: 1px solid var(--rd-hair);
    font-size: 14px; line-height: 1.35; color: var(--rd-mut);
    transition: background-color 1.4s var(--rd-ease);
}
.mv-row:hover { background-color: rgba(244,241,236,0.025); transition-duration: 0.15s; }
.mv-who { grid-area: who; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.mv-coin { font-family: var(--rd-mono); font-size: 15px; font-weight: 700; color: var(--rd-ink); text-decoration: none; }
.mv-coin::after { content: ""; position: absolute; inset: 0; }
.mv-row:hover .mv-coin { color: var(--rd-accent-text); }
.mv-coin:focus-visible { outline: none; }
.mv-coin:focus-visible::after { outline: 2px solid var(--tt-focus-ring, #EE5A2C); outline-offset: -2px; border-radius: 4px; }
.mv-name { font-size: 12.5px; color: var(--rd-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.mv-price { font-family: var(--rd-mono); font-size: 12.5px; color: var(--rd-dim); font-variant-numeric: tabular-nums; }

/* The move: a diverging bar, the figure at the bar's end, the normal beside it. */
.mv-move { grid-area: move; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar pct" "norm norm"; align-items: center; gap: 2px 10px; }
.mv-bar { grid-area: bar; position: relative; display: block; height: 10px; border-radius: 2px; background: rgba(244,241,236,0.05); overflow: hidden; }
.mv-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rd-hair); }
.mv-fill { position: absolute; top: 0; bottom: 0; display: block; border-radius: 2px; }
.is-up .mv-fill { left: 50%; background: var(--rd-up); }
.is-down .mv-fill { right: 50%; background: var(--rd-down); }
.is-flat .mv-fill { left: 50%; background: var(--rd-mut); }
.mv-pct { grid-area: pct; display: inline-flex; align-items: center; gap: 1px; font-family: var(--rd-mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-pct i { font-size: 15px; }
.mv-norm { grid-area: norm; font-size: 12.5px; color: var(--rd-dim); }
.mv-norm b, .mv-x { font-family: var(--rd-mono); font-weight: 700; color: var(--rd-gold); font-variant-numeric: tabular-nums; }
.mv-norm--none { color: var(--rd-dim); opacity: .8; }

/* What was behind it: quiet outlined chips, colour only where it means a side. */
.mv-why { grid-area: why; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mv-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--rd-hair); font-size: 12.5px; line-height: 1.3; color: var(--rd-mut); text-decoration: none; white-space: nowrap;
}
.mv-chip b { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rd-ink); }
.mv-chip i { font-size: 13px; }
.mv-chip.is-buy { color: var(--rd-up); border-color: rgba(55,217,138,0.3); }
.mv-chip.is-sell { color: var(--rd-down-text); border-color: rgba(250,87,114,0.3); }
.mv-chip.is-both { color: var(--rd-mut); }
.mv-chip--dim { color: var(--rd-dim); border-style: dashed; }
.mv-chip--lock { color: var(--rd-dim); }
.mv-chip--fee { position: relative; z-index: 1; }
.mv-chip--fee:hover { color: var(--rd-accent-text); border-color: var(--rd-accent-text); }
.mv-chip--mkt { color: var(--rd-dim); }

/* The last times: the radar's own line and dots. */
.mv-past { grid-area: past; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.mv-u { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mv-u.is-buy { color: var(--rd-up); } .mv-u.is-sell { color: var(--rd-down-text); }
.mv-ago { color: var(--rd-dim); font-size: 12.5px; }
.mv-rec b { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-rec--none { color: var(--rd-dim); font-size: 12.5px; }
.mv-past .rd-dots { margin-left: 0; }

.mv-act { grid-area: act; justify-self: end; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.mv-of { margin: 10px 0 0; font-size: 12.5px; color: var(--rd-dim); }
.mv-of b { font-family: var(--rd-mono); font-weight: 700; }
.mv-none { margin: 12px 0; color: var(--rd-mut); }

/* Wide: one line per coin, five columns, the bar in its own column. */
@media (min-width: 900px) {
    .mv-cols { display: grid; grid-template-columns: 150px minmax(200px, 1.2fr) minmax(220px, 1.4fr) minmax(200px, 1fr) 44px; gap: 0 16px; padding: 6px 0; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--rd-dim); border-bottom: 1px solid var(--rd-hair); }
    .mv-row { grid-template-columns: 150px minmax(200px, 1.2fr) minmax(220px, 1.4fr) minmax(200px, 1fr) 44px; grid-template-areas: "who move why past act"; gap: 0 16px; padding: 11px 0; }
    .mv-who { flex-direction: column; align-items: flex-start; gap: 1px; }
    .mv-name { max-width: 100%; }
    .mv-move { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "bar pct" "norm norm"; }
    .mv-pct { justify-self: end; }
    .mv-why { align-content: center; }
    .mv-market { grid-template-columns: auto minmax(180px, 320px) auto auto; grid-template-areas: "l bar r med"; }
    .mv-market-med { margin-left: 8px; }
}

@media (prefers-reduced-motion: reduce) { .mv-row, .mv-tab { transition: none; } }