/* The symbol page's shell: two columns from 1000px up, stacked below it.

   Every section owns its stylesheet; the order of the sections and the space
   between them belong to the page, which is the rule `home.css` follows for the
   landing page. */
.crypto-buy-symbol-page {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

/* The left column. The legacy builds this with `order` on five children of one
   flex column and moves the prices from below the chart to above it on a phone.
   The DOM here is the desktop reading order — trail, heading, chart, prices —
   and one rule does the phone's move, so the markup is not written in an order
   nobody reads it in. */
/* The 36px below is the legacy's, and only on a phone: with the columns side by
   side there is nothing under this one to be separated from. */
.symbol-main {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}

.symbol-main > .breadcrumb {
  margin-bottom: 24px;
}

/* On a phone the prices come before the chart: it is the tallest thing on the
   page and the numbers should not be behind it. Explicit values, not `-1`, so
   they land between the heading and the chart rather than above the trail —
   everything else stays at the default 0 and keeps DOM order among itself. */
.symbol-main > .symbol-prices {
  order: 2;
}

.symbol-main > .symbol-chart {
  order: 3;
}

/* Below 1000px the prose belongs between the calculator and the per-symbol FAQ,
   which is where the legacy puts it: there the sidebar renders its own copy of
   the about cards and the page-level copy is desktop-only. Two copies of several
   thousand words is a page-weight and duplicate-content cost this site will not
   pay, so instead the sidebar dissolves into the page's own flex column with
   `display: contents` and one copy is ordered into that slot. The reading order
   a phone gets is then the legacy's: calculator, about, FAQ, fear & greed, top
   assets. `display: contents` keeps the <aside> in the accessibility tree in
   every engine that ships it; only its box goes away.

   The row gap goes with the box, so the 24px it provided is re-hung on the
   children, and the banner gets back the 40px the prose's bottom margin used to
   give it. Above 1000px the sidebar is a box beside the chart column again. */
.symbol-aside {
  display: contents;
}

.symbol-aside > * {
  margin-bottom: 24px;
}

.symbol-main {
  order: 1;
}

.symbol-aside > .symbol-calc {
  order: 2;
}

.symbol-prose {
  order: 3;
}

.symbol-aside > .symbol-faq {
  order: 4;
}

.symbol-aside > .symbol-fear-greed {
  order: 5;
}

.symbol-aside > .symbol-latest {
  order: 6;
}

.crypto-buy-symbol-page > .download-banner {
  order: 7;
  margin-top: 16px;
}

/* The site-wide FAQ is the wide-screen half of the pair; below 1000px the
   sidebar's per-symbol one stands in its place. */
.symbol-shared-faq {
  display: none;
}

/* This page dresses the shared FAQ differently from the pages that own it: a
   larger heading, less space under it, and the tab row against the leading edge
   rather than centred. The legacy reaches in with `:deep()` from the page's own
   block; the same override, written where the page can be read to own it. */
.symbol-shared-faq .faq-title {
  margin-bottom: 16px;
  font-size: 28px;
  /* The shared stylesheet centres this because the landing page wants it
     centred; the legacy's shared component has no alignment of its own and each
     page opts in. This page does not, so the heading sits at the start edge with
     the tab row under it rather than floating in the middle of the column. */
  text-align: start;
}

.symbol-shared-faq .faq-tabs {
  justify-content: flex-start;
}

@media (min-width: 1000px) {
  /* `2fr` rather than a second fixed width: the sidebar is 380px whatever the
     viewport, and the chart column takes what is left. `start` keeps the
     sidebar's own height, so a short card does not stretch down the page. */
  .symbol-main {
    margin-bottom: 0;
  }

  .crypto-buy-symbol-page {
    display: grid;
    grid-template-columns: 2fr 380px;
    align-items: start;
    column-gap: 40px;
    margin-top: 64px;
  }

  /* Placed rather than auto-flowed: the sidebar has to span both rows of the
     left column, and auto-placement would drop the prose beside it instead. */
  .symbol-main {
    grid-column: 1;
    grid-row: 1;
  }

  /* The sidebar is a box again — beside the chart column, not dissolved into it,
     so the gap between its cards goes back to being its own. */
  .symbol-aside {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    width: 100%;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .symbol-aside > * {
    margin-bottom: 0;
  }

  .symbol-prose {
    grid-column: 1;
    grid-row: 2;
  }

  /* Across both columns: it is the page's banner, not the chart column's. */
  .crypto-buy-symbol-page > .download-banner {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
  }
}

/* 1001, not 1000, and deliberately: the legacy gates the two-column grid on
   `min-width: 1000px` but every one of its inner switches — the heading size,
   the price-box order, which of the two FAQs shows — on `max-width: 1000px`. At
   exactly 1000px both fire there, giving two columns with the phone's insides.
   Shifting these rules up by one pixel reproduces that without inverting the
   file's min-width pattern. */
@media (min-width: 1001px) {
  .symbol-shared-faq {
    display: block;
  }

  /* Back to DOM order: heading, chart, prices. */
  .symbol-main > .symbol-prices,
  .symbol-main > .symbol-chart {
    order: 0;
  }
}