/* ============================================================
   SkinSignal - market page

   Layers on css/style.css and borrows its tokens rather than defining
   new colours. Structure follows css/achievements.css so the two pages
   sit at the same rhythm: a head block, then a container of sections.

   ON THE TWO COLUMN LAYOUT
   Gainers and losers sit side by side on desktop, which is the whole
   point of the shape: the two lists are meant to be read against each
   other. That layout is the obvious mobile hazard, so the grid collapses
   to one column at 860px, well before it can squeeze. Below 620px the
   row itself reflows, because the real breakage is not the columns, it
   is a long market hash name fighting a percentage for the same line.
   See the two media blocks at the end.
   ============================================================ */

/* ---------- Head ---------- */

.market-head {
  padding: clamp(28px, 6vw, 56px) 0 clamp(16px, 3vw, 24px);
}

.market-head__title {
  font-family: var(--font-display);
  font-stretch: var(--display-hero);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  margin: 6px 0 18px;
}

.market-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.market-meta__coverage {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 62ch;
}

.market-meta__updated {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- The market hero ----------

   SCOPED, NOT EDITED. The five head rules above are shared: account,
   forum and leaderboard all open with the same .market-head block, and
   restyling it here would restyle their headers too. So those rules are
   left exactly as they were, and everything below hangs off the
   data-page="market" marker on this page's <body>, which no other page
   carries. A selector that does not match cannot leak.

   The glows are pseudo elements behind the content (isolation keeps the
   negative z-index inside the section), both contained: they resolve to
   transparent well inside the band rather than washing the page. */
[data-page="market"] .market-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 7vw, 76px) 0 clamp(22px, 3.5vw, 32px);
  margin-bottom: clamp(18px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(14, 17, 26, 0.82), rgba(8, 9, 13, 0.5) 72%, rgba(5, 5, 5, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-page="market"] .market-head::before,
[data-page="market"] .market-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The light the title sits in. */
[data-page="market"] .market-head::before {
  background: radial-gradient(560px 260px at 14% 0%, rgba(61, 127, 255, 0.16), transparent 70%);
}

/* Where the page once had case art: a glow with no picture behind it,
   so nothing here depends on an asset loading. */
[data-page="market"] .market-head::after {
  background:
    radial-gradient(380px 260px at 86% 58%, rgba(61, 127, 255, 0.11), transparent 70%),
    radial-gradient(260px 200px at 92% 30%, rgba(124, 92, 214, 0.08), transparent 72%);
}

[data-page="market"] .market-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #8fb0ff;
}

[data-page="market"] .market-head .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(61, 127, 255, 0.7);
}

[data-page="market"] .market-head__title {
  font-size: clamp(36px, 6.2vw, 64px);
  letter-spacing: -0.01em;
  margin: 8px 0 22px;
  background: linear-gradient(180deg, #ffffff 30%, #b9c3d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-page="market"] .market-meta {
  align-items: center;
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* The freshness line as a quiet pill. The dot is the page's accent and
   it does not pulse: nothing here loops, and a green "live" light beside
   a board that can be hours old would be claiming something the sweep
   cadence does not promise. The text beside it says exactly how old. */
[data-page="market"] .market-meta__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
}

[data-page="market"] .market-meta__updated:empty { display: none; }

[data-page="market"] .market-meta__updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(61, 127, 255, 0.85);
}

/* The shared 620 rule stacks .market-meta into a column; centring would
   then centre the pill horizontally, so the scoped rule steps aside. */
@media (max-width: 620px) {
  [data-page="market"] .market-meta { align-items: flex-start; }
}

/* ---------- Grid ---------- */

.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  padding-bottom: clamp(20px, 4vw, 36px);
}

.market-grid--single {
  grid-template-columns: 1fr;
}

.market-col {
  --edge: var(--accent);
  --edge-wash: rgba(61, 127, 255, 0.06);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The dashboard's plate, value for value: the same lit top, the same
     hairline, the same drop. dashboard.css is not loaded on this page,
     so the numbers are repeated rather than referenced. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 50px rgba(0, 0, 0, 0.42);
  padding: clamp(14px, 2.4vw, 22px);
}

/* The direction is the panel's edge. Gainers are lit green along the
   top, losers red, and the trending panel keeps the page's blue. */
.market-col--up   { --edge: var(--gain); --edge-wash: rgba(31, 214, 125, 0.06); }
.market-col--down { --edge: var(--risk); --edge-wash: rgba(229, 72, 77, 0.06); }

.market-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
  box-shadow: 0 0 14px 0 var(--edge);
  opacity: 0.85;
  pointer-events: none;
}

.market-col::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  z-index: -1;
  background: radial-gradient(70% 180px at 50% 0%, var(--edge-wash), transparent 75%);
  pointer-events: none;
}

.market-col__title {
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 4px;
}

/* Inside a panel the title carries the panel's colour as a dot, so the
   direction is stated before the first row is read. */
.market-col .market-col__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.market-col .market-col__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--edge);
  box-shadow: 0 0 10px var(--edge);
}

.market-col__note {
  margin: 0 0 14px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- Rows ---------- */

.mv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* FIVE NAMED AREAS, so every child is placed by name rather than by
   order. That matters for the trending rows, which are built by their
   own function with no thumbnail and no bar: they fall into the same
   rank, body and change columns and simply leave the other two empty,
   so both kinds of row stay on one grid. */
.mv {
  display: grid;
  grid-template-columns: 20px 36px minmax(0, 1fr) auto 58px;
  grid-template-areas: "rank thumb body change mom";
  align-items: center;
  column-gap: 11px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.mv:last-child { border-bottom: 0; }
.mv:hover { background: rgba(255, 255, 255, 0.028); }

.mv__rank   { grid-area: rank; }
.mv__thumb  { grid-area: thumb; }
.mv__body   { grid-area: body; }
.mv__change { grid-area: change; }
.mv__mom    { grid-area: mom; }

.mv__rank {
  color: var(--faint);
  font-size: 11px;
  text-align: right;
}

/* THE THUMBNAIL. A dark plate the same size with or without a picture,
   so a row whose image is null, or an artefact built before images
   existed, keeps the column and the rhythm. Uncoloured on purpose: the
   market rows carry no rarity, and inventing one from the name would be
   a guess dressed as a fact. */
.mv__thumb {
  display: block;
  width: 36px;
  height: 27px;
  border-radius: 5px;
  background:
    radial-gradient(90% 90% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
    #0b0c10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.mv__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}

.mv__body { min-width: 0; }

/* A market hash name is long and must not push the percentage off the
   row. It gets the ellipsis, the number never does. */
.mv__name {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv__secs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
}

.mv__sec {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.mv__sec-key {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mv__sec-val { font-size: 11px; }

.mv__change {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* ---------- The momentum bar ----------

   The real change, drawn against a FIXED reference (MOMENTUM_REF_PCT in
   js/market.js, 25%), never against the largest move on the board. A
   gainer fills in from the right, a loser from the left, so direction is
   carried by position as well as by colour. A move at or past the
   reference fills the track and is drawn solid rather than faded, which
   is how "off the scale" is said without printing a second number: the
   exact figure is the one beside it. */
.mv__mom {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.mv__mom i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  border-radius: 3px;
}

.mv.is-up .mv__mom i {
  right: 0;
  background: linear-gradient(90deg, rgba(31, 214, 125, 0.28), var(--gain));
  box-shadow: 0 0 10px -2px rgba(31, 214, 125, 0.75);
}

.mv.is-down .mv__mom i {
  left: 0;
  background: linear-gradient(270deg, rgba(229, 72, 77, 0.28), var(--risk));
  box-shadow: 0 0 10px -2px rgba(229, 72, 77, 0.75);
}

.mv.is-up   .mv__mom--max i { background: var(--gain); box-shadow: 0 0 12px -1px rgba(31, 214, 125, 0.9); }
.mv.is-down .mv__mom--max i { background: var(--risk); box-shadow: 0 0 12px -1px rgba(229, 72, 77, 0.9); }

.mv__arrow {
  display: inline-block;
  font-size: 9px;
  margin-right: 4px;
  vertical-align: 1px;
}

/* ---------- Direction ----------

   COLOUR IS NEVER THE ONLY SIGNAL. Every change carries a sign from
   pct() and an arrow from arrow() as well, so the direction survives a
   colourblind reader, greyscale and a screenshot. The colour is the
   third cue, not the first. */

.is-up   .mv__change,
.mv__sec-val.is-up   { color: var(--gain); }

.is-down .mv__change,
.mv__sec-val.is-down { color: var(--risk); }

.is-flat .mv__change,
.mv__sec-val.is-flat { color: var(--muted); }

/* A left edge that carries the same information as the colour, for the
   same reason. Softened now the panel edge and the bar carry it too. */
.mv.is-up   { box-shadow: inset 2px 0 0 -1px rgba(31, 214, 125, 0.55); }
.mv.is-down { box-shadow: inset 2px 0 0 -1px rgba(229, 72, 77, 0.55); }

/* ---------- States ---------- */

.market-empty,
.market-state {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.market-empty { padding: 10px 6px 4px; }

.market-state {
  padding: clamp(24px, 6vw, 48px) 0;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- Narrow screens ----------

   860: the two columns stop being two. Gainers above losers reads fine
   stacked, and squeezing two lists of long item names into a phone width
   does not.

   620: the row itself. At this width the name and the percentage were
   competing for the same line and the name won, pushing the number
   ragged. The name now wraps inside its own column instead, which the
   number's column can never be pushed by; the bar drops to a second
   line under both; and the rank column goes because a number you can
   count is not worth the width on a phone. */

@media (max-width: 860px) {
  .market-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .mv {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb body change"
      "thumb mom  mom";
    row-gap: 8px;
    padding: 11px 4px;
  }

  .mv__rank { display: none; }

  .mv__name { white-space: normal; }

  .mv__thumb { align-self: start; }

  .market-meta { flex-direction: column; gap: 0; }
  .market-meta__updated { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv,
  .rv,
  .mv__mom i,
  .idx,
  .idx__spark,
  .idx-tab { transition: none; }
}

/* ============================================================
   CATEGORY INDEXES

   An index card is still quieter than a mover row. A mover is an event
   and earns an arrow, a bar and a lit panel; an index is a level, and
   most days it moves a fraction of a percent. So the cards get depth and
   a direction dot, the glow sits UNDER the line as a faint wash rather
   than on the card, and the card itself only lights up on hover, where
   the reader has asked. Shouting a 0.12% day at the volume of a 66%
   mover would still be a lie of emphasis.

   Collections are drawn by the same indexCard into the same grid, so
   everything here styles both families at once.
   ============================================================ */

.idx-section { margin-top: 34px; }

.idx-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.idx-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.idx-tab {
  min-height: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.idx-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); }

.idx-tab.is-on {
  color: var(--text);
  background: rgba(61, 127, 255, 0.16);
  border-color: rgba(61, 127, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px -3px rgba(61, 127, 255, 0.65);
}

.idx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.idx-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.idx {
  --tone: var(--faint);
  --tone-wash: rgba(130, 130, 125, 0.07);
  --tone-glow: rgba(130, 130, 125, 0.2);

  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px -18px rgba(0, 0, 0, 0.8);
}

.idx.is-up   { --tone: var(--gain); --tone-wash: rgba(31, 214, 125, 0.09); --tone-glow: rgba(31, 214, 125, 0.32); }
.idx.is-down { --tone: var(--risk); --tone-wash: rgba(229, 72, 77, 0.09); --tone-glow: rgba(229, 72, 77, 0.32); }

/* Lit on hover only. The lift that goes with it is motion, so it lives
   in the no-preference block at the end; the light is a state change
   and holds for everybody. */
.idx:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--tone-wash),
    0 16px 36px -14px var(--tone-glow);
}

.idx__head,
.idx__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.idx__label {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
}

/* The direction as a dot, beside the name rather than on the card. */
.idx__label::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 8px var(--tone);
}

.idx__basket { font-size: 10px; color: var(--faint); white-space: nowrap; }
.idx__value  { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.idx__change { font-size: 12px; font-weight: 600; color: var(--muted); }

/* The frame around the line. sparkline() is untouched and still draws
   the real series; this only gives it a floor to glow from. */
.idx__plot {
  display: block;
  margin: 0 -5px;
  padding: 5px 5px 3px;
  border-radius: 8px;
  background: linear-gradient(180deg, transparent 20%, var(--tone-wash));
}

.idx.is-up   .idx__change { color: var(--gain); }
.idx.is-down .idx__change { color: var(--risk); }

/* The sparkline colour is carried by currentColor on the path, so the
   card's direction sets it without a second rule per state. */
.idx__spark {
  width: 100%;
  height: 32px;
  display: block;
  color: var(--faint);
  overflow: visible;
}

.idx__spark path { filter: drop-shadow(0 0 2.5px currentColor); }

.idx.is-up   .idx__spark { color: var(--gain); }
.idx.is-down .idx__spark { color: var(--risk); }

.idx__spark--empty { height: 32px; }

.idx--empty { opacity: 0.55; }
.idx__note { font-size: 11px; color: var(--faint); }

@media (max-width: 560px) {
  .idx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================
   MOTION

   ALL OF IT LIVES HERE, inside no-preference, and none of it loops.
   Under reduced motion none of the hidden starting states exist, so
   every element simply renders where it ends up.

   A ONE SHOT REVEAL. js/market.js puts .rv on each panel and section
   and adds .is-in when it scrolls into view, once. Rows and cards step
   in behind it on their own --i, and the bars fill after their row.
   A section that has already revealed is rewritten with .is-in on it,
   so switching the index tab redraws the cards at rest instead of
   hiding and replaying them.

   THE REVEAL MOVES translate, THE HOVER MOVES transform. They are two
   different properties, so the card's staggered entrance delay can
   never be inherited by its hover lift: a card deep in the cascade
   would otherwise wait half a second before responding to the pointer.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    transition: opacity 620ms var(--ease), translate 620ms var(--ease);
  }
  .rv:not(.is-in) { opacity: 0; translate: 0 16px; }

  .rv .mv {
    --rd: calc(160ms + min(var(--i, 0), 19) * 32ms);
    transition:
      opacity 460ms var(--ease) var(--rd),
      translate 460ms var(--ease) var(--rd),
      background-color 160ms ease;
  }
  .rv:not(.is-in) .mv { opacity: 0; translate: 0 8px; }

  .rv .mv__mom i {
    transition: width 900ms var(--ease) calc(var(--rd, 0ms) + 180ms);
  }
  .rv:not(.is-in) .mv__mom i { width: 0; }

  .rv .idx {
    --rd: calc(120ms + min(var(--i, 0), 16) * 36ms);
    transition:
      opacity 480ms var(--ease) var(--rd),
      translate 480ms var(--ease) var(--rd),
      transform 220ms var(--ease),
      box-shadow 220ms ease,
      border-color 220ms ease;
  }
  .rv:not(.is-in) .idx { opacity: 0; translate: 0 12px; }

  /* The line draws in left to right. The clip is widened past the box on
     every side so the glow and the stroke at the extremes are never
     trimmed once it has finished. */
  .rv .idx__spark {
    clip-path: inset(-8px -8px -8px -8px);
    transition: clip-path 1000ms var(--ease) calc(var(--rd, 0ms) + 140ms);
  }
  .rv:not(.is-in) .idx__spark { clip-path: inset(-8px 100% -8px -8px); }

  .idx:hover { transform: translateY(-2px); }

  .idx-tab {
    transition: color 160ms ease, background-color 160ms ease,
      border-color 160ms ease, box-shadow 220ms ease;
  }
}

/* ============================================================
   THE LOCKED PREVIEW (js/market.js renderLockedBoard / renderLockedIndexes)

   A visitor or a free reader is sent the tease: counts, the biggest move
   each way, the index labels. The board keeps its real shape, the lit
   panels and the row grid, and every place a name or a level would sit
   is a ghost bar or a blurred glyph block with no digit in it. The ask
   is gold, like every other upgrade ask on the site.
   ============================================================ */
.mk-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 0 0 clamp(16px, 3vw, 24px);
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(228, 174, 57, 0.06);
  box-shadow: inset 0 0 0 1px rgba(228, 174, 57, 0.22);
}

.mk-lock__lede {
  margin: 0;
  max-width: 70ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.mk-lock__lede b,
.mk-lock__line b { color: var(--text); font-weight: 600; }
.mk-lock__pct.is-up   { color: var(--gain) !important; }
.mk-lock__pct.is-down { color: var(--risk) !important; }

.mk-lock__icon {
  flex: none;
  margin-right: 7px;
  vertical-align: -1px;
  color: #d4a353;
}

.mk-lock__line {
  margin: 0 0 8px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- The locked rows: frosted, not skeletal ----------

   The dashboard's locked change tiles set the language (css/shell.css
   .stats__tile-skel): a soft steel bar, a gentle fixed sheen across it,
   a faint ring. It reads as data behind glass. Every locked placeholder
   on this page uses it: the movers, trending and the index cards, so the
   three are one design rather than three states.

   STATIC. A placeholder that shimmers forever is a loop, and the frosted
   finish reads as locked without one; nothing here animates, so reduced
   motion has nothing to switch off. */
.mk-lockrow { pointer-events: none; }
.mk-lockrow:hover { background: none; }
.mk-lockrow .mv__rank { opacity: 0.45; }

.mk-skel {
  display: block;
  height: 11px;
  border-radius: 999px;
  background:
    linear-gradient(100deg,
      rgba(168, 186, 214, 0.07) 0%,
      rgba(168, 186, 214, 0.16) 45%,
      rgba(168, 186, 214, 0.07) 90%);
  box-shadow: inset 0 0 0 1px rgba(168, 186, 214, 0.07);
}

.mk-skel--name { width: 64%; }
.mk-skel--sub  { width: 34%; height: 7px; margin-top: 7px; opacity: 0.7; }
.mk-lockrow:nth-child(2) .mk-skel--name { width: 50%; }
.mk-lockrow:nth-child(3) .mk-skel--name { width: 72%; }
.mk-lockrow:nth-child(4) .mk-skel--name { width: 44%; }
.mk-lockrow:nth-child(5) .mk-skel--name { width: 58%; }
.mk-lockrow:nth-child(2) .mk-skel--sub { width: 28%; }
.mk-lockrow:nth-child(3) .mk-skel--sub { width: 38%; }
.mk-lockrow:nth-child(4) .mk-skel--sub { width: 24%; }

/* Where the change figure goes: a short bar carrying the panel's own
   direction, faintly, so gainers still read green and losers red. */
.mk-skel--fig {
  width: 52px;
  height: 12px;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--edge, #a8bad6) 10%, transparent) 0%,
      color-mix(in srgb, var(--edge, #a8bad6) 24%, transparent) 45%,
      color-mix(in srgb, var(--edge, #a8bad6) 10%, transparent) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge, #a8bad6) 16%, transparent);
}
.mv__change .mk-skel--fig { margin-left: auto; }

/* The frosted plate: where a picture or a line would be. The same steel,
   a touch of sheen from the top, no pattern. */
.mk-frost {
  display: block;
  background:
    linear-gradient(160deg, rgba(168, 186, 214, 0.12), rgba(168, 186, 214, 0.035) 60%),
    rgba(12, 14, 20, 0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(168, 186, 214, 0.08) !important;
}

/* The locked rows carry no momentum bar, so the fifth column is empty
   and the figure bar sits where the real figure does. */
.mk-lockcol .mv { grid-template-columns: 20px 36px minmax(0, 1fr) 60px 0; column-gap: 11px; }

/* Index tiles: the real label, the level locked. */
.idx--locked { gap: 8px; }
.idx--locked:hover {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px -18px rgba(0, 0, 0, 0.8);
}
.idx--locked .idx__label::before { background: rgba(212, 163, 83, 0.6); box-shadow: none; }
.mk-lock__tag { color: rgba(212, 163, 83, 0.7); display: inline-flex; }
.mk-lock__tag .mk-lock__icon { margin: 0; }

/* The index card's locked line and level: a frosted plate the height of
   the real sparkline, and the same steel bars as the rows. */
.mk-frost--plot { height: 32px; border-radius: 7px; }
.idx--locked .idx__plot { background: none; padding: 5px 0 3px; margin: 0; }
.idx--locked .idx__foot { align-items: center; }
.mk-skel--level { width: 56px; height: 13px; }
.idx--locked .mk-skel--fig { width: 40px; height: 10px; }

.mk-lock__cta { margin-top: 16px; }

/* Signed out: the shared plate (css/signin.css) under the header. */
.market-signin { margin-top: clamp(18px, 3vw, 26px); }

@media (max-width: 620px) {
  .mk-lockcol .mv { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "thumb body change"; }
}