/* Nova Markets - page styles from the Claude Design "Nova Markets" file.
 *
 * Layout and colours live inline in templates/pages/markets.html and in the
 * markup static/js/markets.js renders, exactly as in the design. This sheet
 * carries what inline styles cannot: keyframes, the design's style-hover and
 * style-focus states (which must win over the inline base style, hence
 * !important), the account menu, and the small-screen header fallback.
 */
body { background: var(--nv-f6f6fa); -webkit-font-smoothing: antialiased; }

.nm { line-height: normal; }
.nm * { box-sizing: border-box; }
.nm a { color: #DD3D4F; text-decoration: none; }
.nm a:hover { color: var(--nv-b4202f); }
.nm input::placeholder { color: var(--nv-9a9cb4); opacity: 1; }
.nm ::-webkit-scrollbar { height: 6px; width: 6px; }
.nm ::-webkit-scrollbar-thumb { background: var(--nv-dcdce6); border-radius: 9px; }
.nm-tabs::-webkit-scrollbar { display: none; }

@keyframes novaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,106,.45) } 70% { box-shadow: 0 0 0 7px rgba(22,163,106,0) } }
@keyframes novaRise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }
@keyframes novaMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes nmFade { from { opacity: 0 } to { opacity: 1 } }

/* -- hover / focus (the design's style-hover and style-focus) ------------------- */
.nm .nm-f:focus { border-color: #DD3D4F !important; box-shadow: 0 0 0 4px rgba(221,61,79,.14) !important; outline: none; }
.nm .nm-h-dark:hover { background: #DD3D4F !important; transform: translateY(-1px) !important; }
.nm .nm-h-lift:hover { border-color: var(--nv-f3c4ca) !important; transform: translateY(-3px) !important; box-shadow: 0 18px 32px -24px rgba(24,20,80,.32) !important; }
.nm .nm-h-tab:hover { color: var(--nv-0e0f1f-text) !important; }
.nm .nm-h-chip:hover { border-color: var(--nv-f3c4ca) !important; color: var(--nv-b4202f) !important; }
.nm .nm-h-col:hover { color: var(--nv-0e0f1f-text) !important; }
/* On a touch phone a tapped card would keep this hover tint and hide its live flash. */
@media (min-width: 768px), (hover: hover) {
  .nm .nm-h-row:hover { background: var(--nv-fbfafd) !important; }
}
.nm .nm-h-star:hover { color: #DD3D4F !important; }
.nm .nm-h-icon:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; color: #DD3D4F !important; transform: translateY(-1px) !important; }
.nm .nm-h-trade:hover { background: #DD3D4F !important; transform: translateY(-1px) !important; color: #fff !important; }
.nm .nm-h-reset:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; }
.nm .nm-h-pager:hover { border-color: var(--nv-f3c4ca) !important; }
.nm .nm-h-board:hover { border-color: var(--nv-f3c4ca) !important; box-shadow: 0 26px 44px -32px rgba(24,20,80,.35) !important; transform: translateY(-3px) !important; }
.nm .nm-h-bitem:hover { background: var(--nv-fbfafd) !important; }
.nm .nm-h-cta:hover { transform: translateY(-2px) !important; color: var(--nv-b4202f) !important; }

/* Keyboard focus stays visible on every control. */
.nm button:focus-visible, .nm a:focus-visible { outline: 2px solid #DD3D4F; outline-offset: 2px; }

/* Rows fade in when the listing changes (tab, filter, sort, page). */
.nm .nm-rows-in { animation: nmFade .35s cubic-bezier(.2,.7,.2,1) both; }

@media (max-width: 480px) {
  .nm .nm-main { padding: 24px 16px 56px !important; }
  .nm .nm-searchrow { width: 100%; }
  .nm .nm-searchbox { flex: 1; min-width: 0; }
  .nm #nm-search { width: 100% !important; }
}

/* -- phones: the market table becomes a list of stacked cards ------------------ */
/* Below 768px the 8-column grid (1140px wide) is restacked; 768px and up is untouched. */
@media (max-width: 767.98px) {
  .nm .nm-h-tab, .nm .nm-h-chip { min-height: 44px; }

  /* Table header bar: count and category, then Watchlist and the change window. */
  .nm .nm-bar { padding: 14px !important; gap: 12px !important; }
  .nm .nm-bar-r { width: 100%; gap: 8px !important; }
  .nm #nm-fav, .nm #nm-trad { flex: 1 1 auto; justify-content: center; min-height: 48px; border-radius: 11px !important; font-size: 13.5px !important; }
  .nm .nm-tfs { flex: 1 1 auto; border-radius: 11px !important; }
  .nm .nm-tfs [data-tf] { flex: 1 1 0; min-width: 44px; min-height: 44px; border-radius: 8px !important; font-size: 12.5px !important; }

  .nm .nm-scroll { overflow: visible !important; }
  .nm .nm-grid { min-width: 0 !important; }

  /* Column headers turn into sort chips. */
  .nm .nm-colhead { display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 12px 14px !important; }
  .nm .nm-colhead > span { display: none !important; }
  .nm .nm-colhead::before { content: 'Sort'; display: flex; align-items: center; min-height: 44px; margin-right: 2px; }
  .nm .nm-colhead [data-sort] { min-height: 44px; padding: 0 13px !important; border: 1px solid var(--nv-e6e6ef) !important; border-radius: 999px; background: var(--nv-fff-bg) !important; font-size: 12.5px !important; letter-spacing: .01em !important; text-transform: none !important; }
  .nm .nm-colhead [data-sort][aria-pressed="true"] { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; }

  /* One card per market. */
  .nm #nm-rows { display: grid; gap: 10px; padding: 12px; }
  .nm #nm-rows:empty { display: none; }
  /* Four tracks: the star keeps its own column so the sparkline never narrows the name. */
  .nm .nm-h-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-areas: "name name name star" "price price spark spark" "chg chg spark spark" "vol vol cap cap" "act act act act";
    gap: 6px 12px !important;
    padding: 14px !important;
    border: 1px solid var(--nv-eeeef4) !important;
    border-radius: 16px;
  }
  .nm .nm-c-name { grid-area: name; margin-bottom: 6px; }
  .nm .nm-c-star { grid-area: star; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 11px !important; margin-bottom: 6px; border: 1px solid var(--nv-eeeef4) !important; border-radius: 11px; font-size: 15px !important; }
  .nm .nm-c-price { grid-area: price; align-self: end; text-align: left !important; font-size: 18px !important; overflow: hidden; text-overflow: ellipsis; }
  .nm .nm-c-chg { grid-area: chg; align-self: start; justify-content: flex-start !important; }
  .nm .nm-c-spark { grid-area: spark; align-self: center; justify-content: flex-end !important; min-width: 0; }
  .nm .nm-c-spark svg { width: 100% !important; max-width: 120px; height: 40px !important; }
  .nm .nm-c-vol { grid-area: vol; text-align: left !important; }
  .nm .nm-c-cap { grid-area: cap; }
  .nm .nm-c-vol, .nm .nm-c-cap { min-width: 0; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px !important; }
  .nm .nm-c-vol::before, .nm .nm-c-cap::before { display: block; margin-bottom: 3px; font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-3a3b4f); }
  .nm .nm-c-vol::before { content: '24h volume'; }
  .nm .nm-c-cap::before { content: 'Market cap'; }
  .nm .nm-c-act { grid-area: act; gap: 8px !important; margin-top: 8px; }
  .nm .nm-c-act a { flex: 1 1 0; height: 44px !important; border-radius: 12px !important; font-size: 14px !important; }
  .nm .nm-c-act .nm-h-icon { display: flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; font-size: 15px !important; }
  .nm .nm-c-act .nm-h-icon::after { content: 'Chart'; font-size: 14px; font-weight: 700; }

  /* Pager: page numbers on one line, Previous / Next sharing the line below. */
  .nm .nm-foot { justify-content: center !important; gap: 10px !important; padding: 14px 12px !important; }
  .nm #nm-pagelabel { width: 100%; text-align: center; }
  .nm #nm-pager { width: 100%; justify-content: center; gap: 4px !important; }
  .nm #nm-pager button { height: 44px !important; min-width: 44px !important; }
  .nm #nm-pager > span { width: 16px !important; height: 44px !important; }
  .nm #nm-pager .nm-h-pager { flex: 1 1 calc(50% - 2px); order: 1; }
}

/* The narrowest phones get back a little padding for the card contents. */
@media (max-width: 360px) {
  .nm #nm-rows { padding: 10px; }
  .nm .nm-h-row { padding: 12px !important; gap: 6px 10px !important; }
}

/* Motion runs exactly as in the design, including when the OS asks for reduced
   motion (Windows "Show animations" off) - the design does not opt out, so the
   ticker, rise, pulse and row flashes must not either. */

/* Price flash: a tinted layer under the row's content that fades by opacity, so
   the GPU runs it instead of the browser repainting the whole row every frame. */
.nm .nm-h-row { position: relative; isolation: isolate; }
.nm .nm-h-row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(22,163,106,.09); opacity: 0; transition: opacity .5s; }
.nm .nm-h-row[data-flash="down"]::before { background: rgba(221,61,79,.09); }
.nm .nm-h-row[data-flash-on]::before { opacity: 1; }