/* ============================================================
   Alpha Finance v2: Crypto Prices (/crypto-prices/)
   Loaded after rwaperps.css, whose market map, mover lists, asset picker
   and chart it reuses. Only the sparkline column, the monogram chip and
   the terminal's top-50 grid live here.
   ============================================================ */

.prc-ini { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); --c: #6b727c; }
body.prc .frates td.co { max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.prc .frates td.co b { font-weight: 600; }
body.prc .frates td.px { white-space: nowrap; }
body.prc .frates td.prc-sp { padding-top: 4px; padding-bottom: 4px; }
.prc-spark { display: block; }
body.prc .rp-tile .rp-chip { width: 26px; height: 26px; margin: 0 0 3px; }
body.prc .rp-tile.is-more { pointer-events: none; }

/* the terminal's top 50: equal tiles in market-cap order, coloured by change */
.prc-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.prc-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; height: 52px; padding: 0 4px; border-radius: 3px;
  color: #fff; text-decoration: none; line-height: 1;
  transition: filter 0.12s;
}
.prc-cell:hover { filter: brightness(1.18); }
.prc-cell .rp-logo, .prc-cell .rp-chip { width: 16px; height: 16px; margin: 0; border-radius: 50%; }
.prc-cell .rp-chip { font-size: 7px; }
.prc-cell b { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prc-cell span { font-family: var(--mono); font-size: 9.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 1400px) { .prc-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 900px) { .prc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .prc-cell { height: 48px; } .prc-cell .rp-logo, .prc-cell .rp-chip { display: none; } }

/* the chart's compare picker: a second menu beside the asset picker, a
   legend row that names every line, and nothing else */
.prc-cmpbtn { gap: 7px; padding: 0 12px 0 9px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.prc-cmpbtn:hover, .prc-cmpbtn.is-on { color: var(--text); }
.prc-cmpbtn.is-on { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent); }
.prc-cmpmenu li { grid-template-columns: 16px 20px auto minmax(0, 1fr) 62px; }
.prc-cmpmenu li > i { width: 14px; height: 14px; border: 1px solid var(--line-2); border-radius: 3px; background: none; }
.prc-cmpmenu li[aria-selected="true"] > i { border-color: var(--lime); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230a0b0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.4 2.6 2.6L11 4.4'/%3E%3C/svg%3E") center / 12px no-repeat; }
.prc-cmpmenu li.is-full { opacity: 0.4; cursor: default; }
.prc-cmpmenu li.is-full:hover { background: none; }
.prc-cmpfoot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-top: 1px solid var(--line); }
.prc-cmpfoot span { margin-right: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.prc-cmpfoot button { height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 5px; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.prc-cmpfoot button:hover { color: var(--text); background: var(--panel-2); }
.prc-cmpfoot button.is-go { border-color: var(--lime); color: var(--text); }
.prc-legend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.prc-legend[hidden] { display: none; }
.prc-lg { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; color: var(--text); }
.prc-lg > i { flex: none; width: 10px; height: 3px; border-radius: 2px; }
.prc-lg .rp-logo, .prc-lg .rp-chip { width: 16px; height: 16px; margin: 0; }
.prc-lg b { font-weight: 600; }
.prc-lg em { font-family: var(--mono); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-2); }
.prc-lg em.up { color: var(--pos-text); }
.prc-lg em.down { color: var(--neg-text); }
.prc-lg button { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 1px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.prc-lg button:hover { color: var(--text); background: var(--panel-2); }
.prc-lg.is-base { padding-right: 10px; }

/* the chart's headline: the price, its change over the window, and the four
   figures a reader looks for next, in one quiet row under the pickers */
body.prc .lsr-detail-head { gap: 12px 16px; padding: 14px 16px 14px; }
.prc-quote { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 36px; min-width: 0; }
/* the window picker closes the row, right above the chart it sets and beside
   the change and the high and low it decides */
.prc-win { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.prc-q-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.prc-q-main b { font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.prc-q-chg { padding: 3px 7px; border-radius: 5px; font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--panel-2); }
.prc-q-chg.up { color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 12%, transparent); }
.prc-q-chg.down { color: var(--neg-text); background: color-mix(in srgb, var(--neg-text) 12%, transparent); }
.prc-q-main small { font-size: 12px; color: var(--muted); }
.prc-q-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.prc-q-stats div { display: flex; flex-direction: column; gap: 3px; }
.prc-q-stats dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.prc-q-stats dd { margin: 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
body.prc .rp-chart { height: 360px; }
body.prc .rp-chart canvas { cursor: crosshair; }
body.prc .lsr-detail-foot { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; color: var(--muted); }
@media (max-width: 760px) { .prc-q-main b { font-size: 24px; } .prc-q-stats { gap: 6px 20px; } body.prc .rp-chart { height: 280px; } }

/* the TradingView view: the same panel and the same controls. The window
   picker and Compare drive the widget, so nothing in the head changes but one
   extra button for the drawing tools. The widget sits flush in the panel on the
   panel's own colour, and its outer frame line is cropped away. */
.prc-mode { margin-right: 0; }
.prc-mode button:disabled { opacity: .4; cursor: not-allowed; }
body.prc .lsr-detail-head .seg button:focus { outline: none; }
body.prc .lsr-detail-head .seg button:focus-visible { outline: 1px solid var(--lime-dim); outline-offset: -1px; }
.prc-draw { display: none; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-right: 0; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--text-2); font-family: var(--sans); font-size: 12px; cursor: pointer; }
.prc-draw svg { width: 13px; height: 13px; }
.prc-draw:hover { color: var(--text); }
.prc-draw[aria-pressed="true"] { color: var(--lime); border-color: var(--lime-dim); }
body.prc .lsr-detail.is-tv .prc-draw { display: inline-flex; }
body.prc .rp-chart.is-tv { height: 540px; padding: 0; overflow: hidden; }
.prc-tv { width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; }
.prc-tv[hidden], body.prc .rp-chart canvas[hidden] { display: none; }
.prc-tv iframe { display: block; }
@media (max-width: 760px) { body.prc .rp-chart.is-tv { height: 440px; } }
@media (max-width: 760px) { .prc-win { margin-left: 0; flex-basis: 100%; } }

/* ---------- the chart head, in two rows ----------
   Row one is the headline: which asset, its price, its change, then the four
   figures in a quieter voice, with the chart type at the far end. Row two is
   every control that changes the chart, all one height and one weight, so
   none of them competes with the price. */
.prc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.prc .lsr-detail-head.prc-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 12px; }
.prc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-width: 0; }
.prc-top .pick { margin-left: auto; }
/* the asset picker reads as the title, not as a form field */
.prc-top .rp-pick { height: 36px; padding: 0 8px 0 6px; border-color: transparent; background: none; gap: 6px; }
.prc-top .rp-pick:hover, .prc-top .rp-pick[aria-expanded="true"] { border-color: var(--line-2); background: var(--panel-2); }
.prc-top .rp-pick b { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.prc-top .rp-pick small { margin-left: 7px; font-size: 13px; }
.prc-top .rp-pick .rp-logo, .prc-top .rp-pick .rp-chip { width: 22px; height: 22px; margin-right: 9px; }
/* the headline mixes a 24px number with 12px text, and a shared baseline
   makes the big number ride high: its weight sits above everything beside it.
   Here the price, its change chip and the window centre on each other, so the
   row reads level. */
.prc-top .prc-q-main { align-items: center; gap: 9px; padding-left: 22px; border-left: 1px solid var(--line); }
.prc-top .prc-q-main b { font-size: 24px; }
/* the ticker and the coin's name sit on one baseline, not centred against each
   other; the coin's mark stays centred on the pair */
.prc-top .rp-pick > span { align-items: baseline; }
.prc-top .rp-pick > span .rp-logo, .prc-top .rp-pick > span .rp-chip { align-self: center; }
/* the four figures: the label leads its figure on one line, and the group
   centres on the row like everything else. Stacked, the pair straddled the
   price, the labels riding above it and the figures sitting below. */
.prc-top .prc-q-stats { gap: 4px 24px; padding-left: 22px; border-left: 1px solid var(--line); }
.prc-top .prc-q-stats div { flex-direction: row; align-items: baseline; gap: 7px; }
.prc-top .prc-q-stats dt { font-size: 9px; }
.prc-top .prc-q-stats dd { font-size: 12.5px; color: var(--text-2); }

.prc-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prc-bar .rp-quick { gap: 2px; flex: 0 1 auto; }
/* chips that do not fit fade out at the edge, never cut through a ticker */
.prc-bar .rp-quick.is-clip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.prc-bar .rp-quick button { height: 26px; padding: 0 9px 0 6px; border: 0; border-radius: 5px; font-size: 12px; color: var(--text-2); }
.prc-bar .rp-quick button:hover { background: var(--panel-2); color: var(--text); }
.prc-bar .rp-quick button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.prc-bar .rp-quick .rp-logo, .prc-bar .rp-quick .rp-chip { width: 14px; height: 14px; margin-right: 6px; }
.prc-bar .rp-pick.prc-cmpbtn { height: 26px; padding: 0 9px 0 7px; gap: 5px; border-color: var(--line); background: none; font-size: 12px; border-radius: 5px; }
.prc-bar .rp-pick.prc-cmpbtn svg { width: 11px; height: 11px; }
.prc-bar .prc-win { margin-left: auto; }
.prc-bar .prc-draw { height: 26px; }
body.prc .prc-head .prc-legend { flex-basis: auto; }
/* where the four figures no longer fit beside the price, they take their own
   line and the chart type keeps its place at the end of the headline */
@media (max-width: 1560px) {
  .prc-top .pick { order: 2; }
  .prc-top .prc-q-stats { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; gap: 4px 28px; }
}
@media (max-width: 760px) {
  .prc-top .prc-q-main { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .prc-top .pick { margin-left: 0; }
  .prc-bar { flex-wrap: wrap; }
  .prc-bar .rp-quick { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .prc-bar .prc-win { margin-left: 0; flex-basis: 100%; }
}