/* =============================================================================
   LANDING — THE MARKET SURFACE

   The world is Steam Community Market's item page, rebuilt in black and coral.
   That page is the one every skin trader already has open in another tab, and
   it is everything a crypto-DEX landing is not: square, dense, ruled, and
   completely uninterested in impressing anybody. It argues by showing the
   market.

   What that means here, concretely:

     square corners      2px, never the 18px pill. Corners are the fastest tell
                         between a utility surface and a marketing card.
     rules, not cards    a 1px hairline separates rows. Nothing floats, nothing
                         lifts on hover, nothing has its own drop shadow.
     rows, not tiles     every skin is a row: thumbnail, name, wear, price
                         right-aligned in mono, rarity colour under the image.
     mono is data        every numeral. Never a label, never a heading; this is
                         a price product, not a costume.
     one accent          coral marks the live price line, the current market and
                         the primary action. Nothing else.
     left-aligned        Steam Market never centres anything, and neither does
                         this. Centred headings over centred leads is the shape
                         the page was trying to escape.

   Deliberately absent, and not to be reintroduced: eyebrow labels above
   headings, gradient text, same-size feature cards, four stat tiles, hover
   lift, pill chips.
   ========================================================================== */

/* ---------- the deck: headline, actions, then straight into the market ----- */
.deck { position: relative; padding: calc(var(--nav-h) + 72px) 0 0; }

.deck h1 {
  font-family: var(--display);
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.02;
  max-width: 16ch;
  text-wrap: balance;
}
.deck-sub {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 17px;   /* the documented `lead` step */
  line-height: 1.6;
  color: var(--muted);
}
.deck-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.deck-note { margin-top: 16px; font-size: 13.5px; color: var(--dim); }

/* ---------- the surface ---------------------------------------------------
   One slab. Everything inside is separated by hairlines rather than by gaps,
   which is what makes it read as an instrument rather than a layout. */
.surface {
  margin-top: 52px;
  border: 1px solid var(--glass-line-2);
  border-radius: 2px;
  background: rgba(10, 10, 12, .82);
  backdrop-filter: saturate(140%) blur(24px);
  -webkit-backdrop-filter: saturate(140%) blur(24px);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* the item strip */
.srf-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-line);
}
.srf-img {
  width: 76px; height: 52px; object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7));
}
.srf-id { min-width: 0; }
.srf-skin {
  display: block; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srf-meta {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  color: var(--dim); text-transform: uppercase;
}
.srf-quote { text-align: right; }
.srf-px {
  display: block; font-family: var(--mono); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.srf-chg { display: block; margin-top: 2px; font-family: var(--mono); font-size: 13px; }

/* the market rail: the other skins, as tabs along the top of the chart */
.srf-rail {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--glass-line);
}
.srf-rail::-webkit-scrollbar { display: none; }
.srf-rail button {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 15px; border: 0; border-right: 1px solid var(--glass-line);
  background: transparent; color: var(--dim); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  transition: color .16s, background .16s;
}
.srf-rail button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.srf-rail button[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .05); }
/* the rarity colour is the only thing that identifies a skin at a glance in
   the game, so it identifies it here too */
.srf-rail i { width: 14px; height: 2px; flex: none; border-radius: 0; }

/* the chart */
.srf-chart { margin: 0; padding: 0; }
.srf-chart svg { display: block; width: 100%; height: clamp(180px, 24vw, 280px); }
/* Under the chart, not over it: the volume histogram runs along the bottom of
   the plot and an overlaid caption sat straight on top of it. */
.srf-chart figcaption {
  padding: 9px 20px; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim); text-transform: uppercase;
}

/* three columns of real numbers, ruled apart */
.srf-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--glass-line);
}
.srf-col { padding: 16px 20px 18px; border-right: 1px solid var(--glass-line); min-width: 0; }
.srf-col:last-child { border-right: 0; }
.srf-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 10px;
}
.srf-cols dl { margin: 0; }
/* `dl > div`, never a bare `div`: .srf-col is itself a div inside .srf-cols,
   and a loose selector turned each column into a single flex row, folding the
   three lists into one line. */
.srf-cols dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 6px 0; border-top: 1px solid var(--glass-line);
}
.srf-cols dl > div:first-child { border-top: 0; }
.srf-cols dt { font-size: 13.5px; color: var(--muted); }
.srf-cols dd {
  margin: 0; font-family: var(--mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.srf-foot {
  padding: 11px 20px; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--dim); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.srf-foot b { color: var(--muted); font-weight: 500; }
.srf-foot .live { color: var(--accent); }

/* ---------- section rhythm ------------------------------------------------
   More space above a heading than below it, one rhythm the whole way down. */
.block { position: relative; padding: clamp(96px, 11vw, 152px) 0 0; }
.block:last-of-type { padding-bottom: clamp(84px, 9vw, 128px); }

.block h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.06; max-width: 18ch; text-wrap: balance;
}
.lead {
  font-size: 17px; color: var(--muted); margin-top: 14px;
  max-width: 68ch; line-height: 1.65;
}
.block h2 + .lead { margin-top: 16px; }
.lead + * { margin-top: clamp(36px, 4vw, 54px); }
.block h2 + .desks,
.block h2 + .steps,
.block h2 + .ledger,
.block h2 + .kit,
.block h2 + .faq { margin-top: clamp(36px, 4vw, 54px); }

/* Only hidden once the script is running and has said it will reveal them.
   If the module fails to load, if IntersectionObserver never fires, or if the
   tab is throttled, the content is simply visible instead of blank. */
/* No per-section entrance at all. Six sections each doing the same thing on
   scroll is one identical entrance repeated, whether it travels or blurs, and
   recasting the effect does not change the pattern. The page has exactly one
   authored moment and it is below: the market drawing itself, once.

   The .reveal class stays in the markup and does nothing, so the JS that adds
   `js-reveal` and `in` keeps working and can be given a real job later. */
.js-reveal .reveal { opacity: 1; }

/* The authored moment: the market arrives once, on load. The chart draws
   itself along its own length and the price counts up from the day's low,
   which is the one thing on the page that had to be earned. */
@keyframes srf-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes srf-in { from { opacity: 0; } to { opacity: 1; } }

.srf-chart .c-line.draw {
  stroke-dasharray: var(--len);
  animation: srf-draw 1.5s cubic-bezier(.22, .9, .24, 1) both;
}
.srf-chart .c-area.draw,
.srf-chart .c-vol.draw { animation: srf-in .9s .55s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .srf-chart .c-line.draw,
  .srf-chart .c-area.draw,
  .srf-chart .c-vol.draw { animation: none; stroke-dasharray: none; }
}

/* ---------- two desks: two spec sheets, one rule between ------------------ */
.desks {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--glass-line-2);
}
.desk { padding: 26px 30px 30px; border-right: 1px solid var(--glass-line); }
.desk:last-child { border-right: 0; padding-right: 0; }
.desk:first-child { padding-left: 0; }
.desk h3 { font-family: var(--display); font-size: 21px; letter-spacing: -.02em; }
.desk > p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 46ch; }

.spec { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; }
.spec dt {
  padding: 9px 0; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim); padding-right: 22px; white-space: nowrap;
}
.spec dd {
  margin: 0; padding: 9px 0; border-top: 1px solid var(--glass-line);
  font-size: 14.5px; color: var(--text);
}
.desk .btn { margin-top: 26px; }

/* ---------- markets: a listings table, not a card grid ------------------- */
.mk-filters { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--glass-line-2); }
.mk-filters button {
  height: 38px; padding: 0 18px; border: 0; border-right: 1px solid var(--glass-line);
  background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); transition: color .16s, background .16s;
}
.mk-filters button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.mk-filters button.on { color: var(--text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 -2px 0 var(--accent); }

.markets { display: block; }
.mk {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 110px 78px 62px 84px;
  align-items: center; gap: 16px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--glass-line);
  transition: background .14s;
}
.mk:hover { background: rgba(255, 255, 255, .04); }
.mk-img { position: relative; height: 38px; display: flex; align-items: center; }
.mk-img img { max-height: 34px; max-width: 56px; width: auto; }
/* the rarity bar sits under the item, exactly where the game puts it */
.mk .rare { position: absolute; left: 0; right: 6px; bottom: 0; height: 2px; }
.mk-nm { font-size: 14.5px; font-weight: 550; letter-spacing: -.015em; }
.mk-wep { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; margin-top: 2px; }
.mk .p { font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; text-align: right; }
.mk .c { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.mk .v { font-family: var(--mono); font-size: 12.5px; color: var(--dim); text-align: right; }
.mk-links { display: flex; gap: 0; justify-content: flex-end; }
.mk-links a {
  padding: 5px 10px; border: 1px solid var(--glass-line-2); border-radius: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); transition: .16s;
}
.mk-links a + a { border-left: 0; }
.mk-links a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

.mk-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 110px 78px 62px 84px;
  gap: 16px; padding: 10px 12px;
  border-bottom: 1px solid var(--glass-line-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}
.mk-head span:nth-child(n+3) { text-align: right; }

/* ---------- how it works: three ruled steps ------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--glass-line-2); }
.steps li {
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--glass-line);
}
.steps h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.018em; }
.steps p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 68ch; }

/* ---------- the ledger --------------------------------------------------- */
/* The measure lives on the grid column, not on the dd. Putting max-width on
   the dd shrank its box, and the rule is the dd's own border-bottom, so every
   row ended in a ragged short line instead of a flush one. */
.ledger {
  margin: 0; display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 66ch);
  border-top: 1px solid var(--glass-line-2);
}
.ledger dt {
  padding: 20px 30px 20px 0; border-bottom: 1px solid var(--glass-line);
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;   /* the `lead` step */
}
.ledger dd {
  margin: 0; padding: 20px 0; border-bottom: 1px solid var(--glass-line);
  color: var(--muted); font-size: 15px; line-height: 1.7;
}

/* ---------- the kit: a dense list, not a pill cloud ---------------------- */
.kit {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--glass-line-2);
}
.kit li {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--glass-line);
  font-size: 14px; color: var(--muted);
}
.kit li::before { content: '·'; color: var(--accent); margin-right: 10px; }
.kit + .lead { margin-top: 26px; }

/* ---------- faq ---------------------------------------------------------- */
.faq { border-top: 1px solid var(--glass-line-2); max-width: 84ch; }
.faq details { border-bottom: 1px solid var(--glass-line); padding: 20px 0; }
.faq summary {
  cursor: pointer; font-size: 16.5px; font-weight: 550; letter-spacing: -.02em; list-style: none;
  display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); margin-top: 12px; font-size: 15px; line-height: 1.7; max-width: 72ch; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1040px) {
  .mk, .mk-head { grid-template-columns: 54px minmax(0, 1fr) 96px 70px 78px; }
  .mk .v, .mk-head span:nth-child(5) { display: none; }
  .kit { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .deck { padding-top: calc(var(--nav-h) + 48px); }
  .surface { margin-top: 40px; }
  .srf-cols { grid-template-columns: 1fr; }
  .srf-col { border-right: 0; border-bottom: 1px solid var(--glass-line); }
  .srf-col:last-child { border-bottom: 0; }
  .desks { grid-template-columns: 1fr; }
  .desk { border-right: 0; border-bottom: 1px solid var(--glass-line); padding: 26px 0 30px; }
  .desk:last-child { border-bottom: 0; }
  .steps li, .ledger { grid-template-columns: 1fr; gap: 8px; }
  .ledger dt { padding-bottom: 0; border-bottom: 0; }
  .kit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .srf-bar { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 14px; }
  .srf-quote { grid-column: 1 / -1; text-align: left; }
  .srf-img { width: 58px; height: 40px; }
  .mk, .mk-head { grid-template-columns: 46px minmax(0, 1fr) 88px 64px; }
  .mk .c, .mk-head span:nth-child(4) { display: none; }
  .mk-links { display: none; }
  .kit { grid-template-columns: 1fr; }
  .srf-col, .srf-foot, .srf-chart figcaption { padding-left: 14px; padding-right: 14px; }
}

/* ---------- shader background ----------
   Committed in one region rather than spread thin over the whole page. At half
   opacity under a scrim reaching rgba(6,6,8,.84) it read as flat black
   everywhere, which is a shipped material nobody can see.

   So: full strength behind the deck, where the page is meant to be loud and
   there is no long-form text to fight, and gone by the time the surface starts.
   The scrim is now a single top-anchored gradient that finishes the fade
   instead of a wash sitting over everything. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: -2; opacity: .92; pointer-events: none;
  /* the field itself fades out down the viewport, so the reading half of the
     page is clean without dimming the half that carries the headline */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 62%);
}

body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 52% at 22% 0%, transparent 0%, rgba(6, 6, 8, .34) 62%, rgba(6, 6, 8, .74) 100%),
    linear-gradient(180deg, transparent 0%, transparent 34%, var(--bg, #08080a) 78%);
}

@media (prefers-reduced-motion: reduce) { #bg { opacity: .7; } }

/* ---------- the chart ----------------------------------------------------
   Drawn as SVG from the real daily sale history. The line is the price, the
   histogram along the bottom is the real number of sales that day, and the
   rules are at real prices. Nothing here is generated to fill space. */
.srf-chart .c-rules line { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.srf-chart .c-line {
  fill: none; stroke: var(--accent); stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.srf-chart .c-vol rect { fill: rgba(255, 255, 255, .16); }
.srf-chart .c-lab text {
  fill: var(--dim); font-family: var(--mono); font-size: 11px;
  text-anchor: end; letter-spacing: .04em;
}
.srf-cols dd .dim { color: var(--dim); margin-left: 6px; }


/* =============================================================================
   CHROME, IN THE SURFACE'S GEOMETRY

   The buttons and the nav arrived from the old page at 12-18px radius and a
   999px pill, sitting next to a 2px-square world. Two geometries on one page,
   and the rounder one is the generic-DEX one. Scoped to this page so the desks
   keep the chrome they were built and tested with.

   The primary action takes the accent. The contract reserves coral for "the
   live line and the action", and the action was white.
   ========================================================================== */
body:has(.deck) .btn,
body:has(.deck) .btn-lg,
body:has(.deck) .nav-burger,
body:has(.deck) .nav-menu,
body:has(.deck) .chip,
body:has(.deck) .kbd { border-radius: 2px; }

/* Near-black on coral, the same pairing css/terminal.css:66 already uses:
   6.7:1 against white's 2.91:1, on the one control that matters most. */
body:has(.deck) .btn-primary {
  background: var(--accent);
  color: #1a0707;
  border-color: var(--accent);
}
body:has(.deck) .btn-primary:hover { background: #ff7a7a; border-color: #ff7a7a; }

/* the live dot is drawn, not a bullet glyph */
.srf-foot .live { display: inline-flex; align-items: center; gap: 7px; }
.srf-foot .live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 99, 99, .18);
}

/* the FAQ disclosure is drawn from two rules, not a + and a hyphen */
.faq summary::after {
  content: ''; flex: none; position: relative; width: 11px; height: 11px;
  margin-top: 6px;
  background:
    linear-gradient(var(--dim), var(--dim)) center/11px 1px no-repeat,
    linear-gradient(var(--dim), var(--dim)) center/1px 11px no-repeat;
  transition: background-size .2s, transform .2s;
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center/11px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/1px 0 no-repeat;
}

/* ---------- section heads on the same rail as the content ------------------
   Below the surface every section opened with a heading and a lead in a narrow
   column with the right half empty, six times over: the generic rhythm the
   page set out to refuse, in a different costume. The head now sits in the
   left rail of the same two-column rule the ledger and the steps already use,
   so the whole page below the fold reads on one grid. */
@media (min-width: 900px) {
  .block > .wrap > h2 { grid-column: 1; margin: 0; }
  .block > .wrap:has(> h2) {
    display: grid;
    /* 26ch at 42px set one word per line. The rail is wider and the display
       step inside it is smaller, so a heading breaks into phrases. */
    grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 72px);
    align-items: start;
  }
  .block > .wrap:has(> h2) > h2 { font-size: clamp(26px, 2.5vw, 33px); max-width: none; }
  .block > .wrap:has(> h2) > .lead { grid-column: 1; margin-top: 18px; }
  .block > .wrap:has(> h2) > .desks,
  .block > .wrap:has(> h2) > .steps,
  .block > .wrap:has(> h2) > .ledger,
  .block > .wrap:has(> h2) > .kit,
  .block > .wrap:has(> h2) > .faq,
  /* The one block that wants full width gets it: a 32-row table with an empty
     2,000px rail beside it is worse than no rail at all. */
  #listed > .wrap:has(> h2) { display: block; }
  #listed > .wrap:has(> h2) > h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 18ch; }
  .block > .wrap:has(> h2) > .mk-filters { grid-column: 1 / -1; margin-top: clamp(32px, 3.5vw, 46px); }
  .block > .wrap:has(> h2) > .markets { grid-column: 1 / -1; margin-top: 0; }
  .block > .wrap:has(> h2) > .lead:last-of-type ~ .lead { grid-column: 2; }
  /* the ledger and steps already carry their own rail, so flatten theirs */
  .block > .wrap:has(> h2) > .ledger,
  .block > .wrap:has(> h2) > .steps li { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); }
}

/* the closing line under the kit belongs with the kit, not in the rail */
.kit + .lead { grid-column: 2 !important; margin-top: 24px; }

/* the chart's readout and crosshair */
.srf-chart { position: relative; }
.srf-read {
  position: absolute; top: 12px; left: 20px;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);   /* the `micro` step */
  pointer-events: none; letter-spacing: .02em;
}
.srf-read b { color: var(--text); font-weight: 500; }
.srf-chart svg { touch-action: pan-y; }
.srf-chart .c-cross line { stroke: rgba(255, 255, 255, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.srf-chart .c-cross, .srf-chart .c-dot { opacity: 0; transition: opacity .12s; }
.srf-chart svg.on .c-cross, .srf-chart svg.on .c-dot { opacity: 1; }
.srf-chart .c-dot { fill: #0a0a0c; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }