/* StoxCredit markets redesign v5 (Markets page, #appView).
   Colors: existing theme tokens only (--sc-brand from the live primary button, --sc-success,
   --sc-warning, --sc-danger, and currentColor with color-mix for hairlines). No new palette.
   Selectors use the same prefix as the page's own market layout rules so they win the cascade.
   Scoped to the markets route, so the home page and other routes are unaffected. */

/* ---------- Header: editorial title, live label, illustrative chart ---------- */
html[data-markets-list] body.app-mode #appView .app-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas: "title chart" "stats stats" !important;
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
  padding-top: clamp(24px, 4vw, 48px);
}
html[data-markets-list] body.app-mode #appView .app-heading > div:first-child { grid-area: title; }
html[data-markets-list] body.app-mode #appView .app-heading > .market-metrics { grid-area: stats; }
html[data-markets-list] body.app-mode #appView .app-heading > .sc-head-visual { grid-area: chart; align-self: end; justify-self: stretch; }
html[data-markets-list] body.app-mode #appView #appTitle {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(58px, 7.4vw, 104px) !important;
  line-height: .95 !important;
  letter-spacing: -0.03em !important;
  margin: 14px 0 12px !important;
  animation: sc-mk-head 1s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-markets-list] body.app-mode #appView .section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[data-markets-list] body.app-mode #appView .sc-live-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  color: var(--sc-brand, currentColor);
}
html[data-markets-list] body.app-mode #appView .sc-live-text::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-success, currentColor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-success, currentColor) 18%, transparent);
}
html[data-markets-list] body.app-mode #appView #appSubtitle { font-size: 17px; line-height: 1.55; max-width: 34em; opacity: .8; margin: 0; }
html[data-markets-list] body.app-mode #appView #feedStatus { font-family: var(--mono); font-size: 12px; opacity: .66; margin: 12px 0 0; }
.sc-head-visual { margin: 0; min-width: 0; }
.sc-head-visual svg { width: 100%; height: auto; display: block; overflow: visible; max-height: 180px; }
.sc-head-visual .sc-mk-grid { stroke: currentColor; stroke-opacity: .1; stroke-width: 1; fill: none; }
.sc-head-visual .sc-mk-area { fill: currentColor; fill-opacity: .05; }
.sc-head-visual .sc-mk-line { fill: none; stroke: var(--sc-brand, currentColor); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-head-visual .sc-mk-dot { fill: var(--sc-brand, currentColor); }
.sc-head-visual figcaption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  opacity: .6;
  text-align: right;
}
@keyframes sc-mk-head {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes sc-mk-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes sc-mk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .sc-head-visual .sc-mk-line { stroke-dasharray: 1; animation: sc-mk-draw 2.4s cubic-bezier(.22, 1, .36, 1) .2s both; }
  .sc-head-visual .sc-mk-area { animation: sc-mk-fade 1.4s ease .9s both; }
  .sc-head-visual .sc-mk-dot { transform-box: fill-box; transform-origin: 50% 50%; animation: sc-ping 2.4s ease-out 2.6s infinite; }
}

/* ---------- Stats: asymmetric analytics layout, not four identical cards ---------- */
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading #marketMetrics.market-metrics {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 28px 0 8px !important;
}
html[data-markets-list] body.app-mode #appView .market-metric {
  position: relative;
  display: grid !important;
  align-content: start;
  gap: 6px;
  padding: 22px 24px 22px 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
html[data-markets-list] body.app-mode #appView .market-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 2px;
  background: var(--sc-brand, currentColor);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  html[data-markets-list] body.app-mode #appView .market-metric:hover { transform: translateY(-3px); }
  html[data-markets-list] body.app-mode #appView .market-metric:hover::before { width: 64px; }
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric { grid-area: auto !important; grid-row: auto !important; grid-column: auto !important; }
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .liquidity-hero { padding-right: 24px !important; }
html[data-markets-list] body.app-mode #appView .market-metric > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .66;
}
html[data-markets-list] body.app-mode #appView .market-metric > strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
html[data-markets-list] body.app-mode #appView .liquidity-hero > strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 92px);
  letter-spacing: -0.02em;
  line-height: 1;
}
html[data-markets-list] body.app-mode #appView .market-metric > small { font-size: 13px; opacity: .66; line-height: 1.4; }
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric > strong {
  font-family: var(--mono) !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .liquidity-hero > strong {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 5.8vw, 88px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.sc-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--sc-brand, currentColor);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  margin-bottom: 4px;
}
@media (max-width: 720px) {
  html[data-markets-list] body.app-mode #appView .app-heading { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "title" "stats" "chart" !important; }
  html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading #marketMetrics.market-metrics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }
  html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric { grid-area: auto !important; grid-row: auto !important; grid-column: auto !important; padding-right: 16px !important; }
}

/* ---------- Trading terminal rows (desktop table) ---------- */
html[data-markets-list] body.app-mode #appView #marketlist .table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
html[data-markets-list] body.app-mode #appView #marketlist thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  opacity: .72;
}
html[data-markets-list] body.app-mode #appView #marketlist tbody tr {
  animation: sc-mk-row .8s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
  transition: background-color .35s ease, box-shadow .35s ease;
}
html[data-markets-list] body.app-mode #appView #marketlist tbody tr td {
  padding: 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  vertical-align: middle;
}
html[data-markets-list] body.app-mode #appView #marketlist tbody tr:not(.sc-detail) td:nth-child(2),
html[data-markets-list] body.app-mode #appView #marketlist tbody tr:not(.sc-detail) td:nth-child(3) {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
html[data-markets-list] body.app-mode #appView #marketlist tbody tr:not(.sc-detail) td:nth-child(2) { font-size: 17px; font-weight: 600; }
html[data-markets-list] body.app-mode #appView #marketlist tbody tr:not(.sc-detail) td:nth-child(3) { font-size: 15px; opacity: .72; }
@media (hover: hover) and (pointer: fine) {
  html[data-markets-list] body.app-mode #appView #marketlist tbody tr:not(.sc-detail):hover {
    background: color-mix(in srgb, currentColor 3.5%, transparent);
    box-shadow: inset 2px 0 0 var(--sc-brand, currentColor);
  }
}
html[data-markets-list] body.app-mode #appView #marketlist tbody tr.is-open { background: color-mix(in srgb, currentColor 2.5%, transparent); }
@keyframes sc-mk-row {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.sc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.sc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc-status[data-state="ok"] { color: var(--sc-success); }
.sc-status[data-state="low"] { color: var(--sc-warning); }
.sc-status[data-state="none"] { color: var(--sc-danger); }
.sc-status[data-state="full"] { color: var(--sc-danger); opacity: .8; }
html[data-markets-list] body.app-mode #appView .sc-expand {
  width: 34px;
  height: 34px;
  margin-left: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}
html[data-markets-list] body.app-mode #appView tr.is-open .sc-expand { transform: rotate(180deg); border-color: var(--sc-brand, currentColor); }
html[data-markets-list] body.app-mode #appView .sc-expand:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
html[data-markets-list] body.app-mode #appView tr.sc-detail td {
  padding: 16px 12px 22px;
  background: color-mix(in srgb, currentColor 3%, transparent);
  animation: sc-mk-row .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sc-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sc-detail-cell { display: grid; gap: 4px; min-width: 0; }
.sc-detail-cell > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.sc-detail-cell > strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
html[data-markets-list] body.app-mode #appView #marketlist tbody td a,
html[data-markets-list] body.app-mode #appView #marketlist tbody td button:not(.sc-expand) {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  html[data-markets-list] body.app-mode #appView #marketlist tbody td a:hover,
  html[data-markets-list] body.app-mode #appView #marketlist tbody td button:not(.sc-expand):hover { transform: translateY(-2px); }
}

/* ---------- Borrow / Lend switch: swap transition ---------- */
@keyframes sc-mk-swap {
  from { opacity: .15; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
html[data-markets-list] body.app-mode #appView #stockListPanel.sc-swap { animation: sc-mk-swap .5s cubic-bezier(.22, 1, .36, 1) both; }
html[data-markets-list] body.app-mode #appView .explore-switch button { transition: background-color .35s ease, color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
html[data-markets-list] body.app-mode #appView .explore-switch button:active { transform: scale(.97); }

/* ---------- Loading and error states ---------- */
@keyframes sc-mk-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
html[data-markets-list] body.app-mode #appView .home-skeleton { animation: sc-mk-pulse 1.4s ease-in-out infinite; }
html[data-markets-list] body.app-mode #appView #marketError {
  border-left: 2px solid var(--sc-danger);
  padding: 14px 16px;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ---------- Phone: compact rows instead of cards ---------- */
html[data-markets-list] body.app-mode #appView .compact-market {
  display: grid;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  text-decoration: none;
  color: inherit;
  animation: sc-mk-row .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
html[data-markets-list] body.app-mode #appView .compact-market .quote-rates { font-family: var(--mono); font-variant-numeric: tabular-nums; }
html[data-markets-list] body.app-mode #appView .compact-market .quote-primary-rate { font-size: 18px; font-weight: 600; }
html[data-markets-list] body.app-mode #appView .compact-market .quote-secondary-rate { font-size: 13px; opacity: .66; margin-left: 8px; }
html[data-markets-list] body.app-mode #appView .compact-market .quote-footer { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
html[data-markets-list] body.app-mode #appView .compact-market .sc-status { margin-top: 0; }
html[data-markets-list] body.app-mode #appView .compact-market .market-utilization { height: 3px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); display: block; }
html[data-markets-list] body.app-mode #appView .compact-market .market-utilization-fill { display: block; height: 100%; background: var(--sc-brand, currentColor); transform-origin: left center; animation: sc-mk-grow 1.2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sc-mk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Compact desktop layout: header ~150px, stat row ~115px, market rows visible sooner ---------- */
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading {
  padding-top: 8px !important;
  row-gap: 14px !important;
  align-items: center !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #appTitle {
  font-size: clamp(44px, 3.3vw, 64px) !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #appSubtitle {
  font-size: 15px !important;
  line-height: 1.45 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #feedStatus {
  margin-top: 6px !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading > .sc-head-visual {
  align-self: center !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading > .sc-head-visual svg {
  height: 72px !important;
  max-height: 72px !important;
  width: 100% !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading > .sc-head-visual figcaption {
  margin-top: 2px !important;
  font-size: 10px !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics.market-metrics {
  margin: 12px 0 0 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric {
  position: relative !important;
  padding: 10px 40px 10px 0 !important;
  gap: 2px !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric > span {
  font-size: 11px !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric > strong {
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.1 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .liquidity-hero > strong {
  font-size: clamp(28px, 2.4vw, 38px) !important;
  line-height: 1.05 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric > small {
  font-size: 12px !important;
  line-height: 1.3 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics .sc-ico {
  position: absolute !important;
  top: 10px !important;
  right: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketlist tbody tr td {
  padding: 11px 12px !important;
}

/* ---------- Phone override for the compact stats: icons inline, no overlap ---------- */
@media (max-width: 720px) {
  html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics > .market-metric {
    padding: 10px 12px 10px 0 !important;
  }
  html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView #marketMetrics .sc-ico {
    position: static !important;
    margin: 0 0 4px !important;
  }
}

/* ---------- Reduced motion: keep the layout and the data, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-markets-list] body.app-mode #appView #appTitle,
  html[data-markets-list] body.app-mode #appView #marketlist tbody tr,
  html[data-markets-list] body.app-mode #appView .compact-market,
  html[data-markets-list] body.app-mode #appView .market-metric,
  html[data-markets-list] body.app-mode #appView .market-metric::before,
  html[data-markets-list] body.app-mode #appView #stockListPanel.sc-swap,
  html[data-markets-list] body.app-mode #appView .sc-expand,
  html[data-markets-list] body.app-mode #appView .home-skeleton,
  html[data-markets-list] body.app-mode #appView .compact-market .market-utilization-fill,
  html[data-markets-list] body.app-mode #appView tr.sc-detail td,
  .sc-head-visual * { animation: none !important; transition: none !important; }
  .sc-head-visual .sc-mk-line { stroke-dashoffset: 0; }
}