/* Movers and buy pressure, two sections of the Market tab.
   Colours, radii and type come from the tokens in app.css, so both themes
   work. Each newer token names an older one to fall back on. */
.mv-sec, .bp-sec {
  --mv-up: var(--up, var(--volt));
  --mv-down: var(--down);
  --mv-on-bar: var(--flag-ink, var(--volt-ink));
  --mv-zero: var(--line-3, var(--line-2));
  --mv-grid: var(--hair, var(--line));
  --mv-hover: var(--hover, var(--line));
  --mv-track: var(--line);
}

/* ---------- movers: two ranked lists, a thin bar under each token ---------- */
.mv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.mv-side { display: grid; align-content: start; gap: 2px; min-width: 0; }
.mv-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: var(--t-label); color: var(--faint); }
.mv-cap b { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.mv-none { padding: 12px 8px; font-size: var(--t-small); color: var(--faint); }
/* The rows of a list that wait behind its button stand as the rows in sight do. */
.mv-more { display: grid; gap: 2px; min-width: 0; }
.mv-side > details.alt { margin: 6px 0 0 8px; }
.mv-side > details.alt[open] { margin-left: 0; }
.mv-side > details.alt[open] > summary { margin-left: 8px; }
.mv-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "rank lab val" ". bar bar"; gap: 7px 10px; align-items: center; width: 100%; min-height: 40px; padding: 9px 8px 11px; text-align: left; border-radius: 8px; }
.mv-row:hover, .mv-row:focus-visible { background: var(--mv-hover); }
.mv-rank { grid-area: rank; font-size: var(--t-label); color: var(--faint); font-variant-numeric: tabular-nums; }
.mv-lab { grid-area: lab; display: grid; gap: 1px; min-width: 0; }
.mv-sym { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mv-sym i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mv-sym small { flex: none; font-size: var(--t-tag); letter-spacing: .03em; color: var(--faint); text-decoration: none; }
.mv-sym b { font-weight: 600; font-size: var(--t-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.mv-sub { font-size: var(--t-label); color: var(--dim); max-width: 100%; line-height: 1.25; }
.mv-val { grid-area: val; font-style: normal; font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mv-row.up .mv-val { color: var(--mv-up); }
.mv-row.dn .mv-val { color: var(--mv-down); }
.mv-bar { grid-area: bar; display: block; min-width: 0; height: 6px; border-radius: 3px; background: var(--mv-track); overflow: hidden; }
.mv-bar i { display: block; height: 100%; min-width: 3px; border-radius: 3px; }
.mv-row.up .mv-bar i { background: var(--mv-up); }
.mv-row.dn .mv-bar i { background: var(--mv-down); }

/* ---------- the same numbers as a table ---------- */
.mv-alt { margin-top: 12px; }
.mv-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 5px 12px; font-size: var(--t-small); color: var(--dim); }
.mv-toggle:hover { color: var(--ink); border-color: var(--mv-zero); }
.mv-toggle[aria-expanded="true"] { margin-bottom: 12px; color: var(--ink); }

/* ---------- buy pressure: one split bar per token ---------- */
.bp-legend { margin: 0 0 6px; }
.bp-legend .b { background: var(--mv-up); }
.bp-legend .s { background: var(--mv-down); }
.bp-mid { width: 1px !important; height: 12px !important; border-radius: 0 !important; background: var(--ink); opacity: .7; }
.bp { display: grid; gap: 0; min-width: 0; }
.bp-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab share" "bars bars"; gap: 8px 12px; align-items: end; width: 100%; padding: 11px 4px 12px; text-align: left; border-radius: 8px; }
.bp-row + .bp-row::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 1px; background: var(--line); }
.bp-row:hover, .bp-row:focus-visible { background: var(--mv-hover); }
.bp-lab { grid-area: lab; display: grid; gap: 1px; min-width: 0; }
.bp-share { grid-area: share; font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.bp-share b { font-size: var(--t-num); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.bp-bars { grid-area: bars; display: grid; gap: 7px; min-width: 0; }
.bp-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "bar bar" "l r"; gap: 4px 10px; align-items: center; min-width: 0; }
.bp-line .n { font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.bp-line .n:first-child { grid-area: l; }
.bp-line .n:last-child { grid-area: r; text-align: right; }
.bp-bar { grid-area: bar; position: relative; display: flex; gap: 2px; height: 12px; min-width: 0; }
.bp-bar i { display: block; flex: 1 1 0; min-width: 0; height: 100%; }
.bp-bar i.b { background: var(--mv-up); border-radius: 4px 0 0 4px; }
.bp-bar i.s { background: var(--mv-down); border-radius: 0 4px 4px 0; }
.bp-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: var(--ink); opacity: .7; }
.bp-line.thin .bp-bar { height: 5px; }
.bp-line.thin .bp-bar i.b { border-radius: 3px 0 0 3px; }
.bp-line.thin .bp-bar i.s { border-radius: 0 3px 3px 0; }
.bp-line.thin .bp-bar::after { top: -2px; bottom: -2px; }

/* ---------- wide containers ---------- */
@container (min-width: 760px) {
  .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
  .mv-lab { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .bp-row { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 96px; grid-template-areas: "lab bars share"; align-items: center; gap: 8px 20px; padding: 12px 6px; }
  .bp-share { text-align: right; }
  .bp-bars { gap: 6px; }
  .bp-line { grid-template-columns: 104px minmax(0, 1fr) 104px; grid-template-areas: "l bar r"; gap: 0 14px; }
  .bp-line .n { font-size: var(--t-small); }
  .bp-line .n:first-child { text-align: right; }
  .bp-line .n:last-child { text-align: left; }
}