/* Early access: this page's own rules only. The shared stylesheet
   (/styles.css) carries the header, the footer, the grounds, the tiers,
   the type roles, the buttons, the limits and the layouts every section
   uses (the reading row, the columns of tiles, the accordion, the chapter);
   nothing here restyles them.

   The hero is a timeline. A solid line runs under what the early-access
   release gives, and a dashed line runs under what comes later, on past
   the right edge of the screen: the later step names the launch date, but
   what comes after it has no end, so none is drawn. The present is set at
   the page's largest size, the later part smaller. The page's own rules
   use no amber: amber means an agent is waiting for you, and nothing on
   this page waits. The exception is the mark's amber facet in the header
   and the footer, which stands for the pane where an agent waits. */

/* The hero. The dashed line is drawn wider than the screen, so the
   section clips it; clip, where supported, because it does not let a
   keyboard or a wheel scroll the section sideways. The section's padding
   is its tier, set in the markup. */
.ea-hero {
  overflow: hidden;
  overflow: clip;
}

.tl {
  display: grid;
  row-gap: var(--s8);
}

.tl-step {
  position: relative;
  padding-top: var(--s6);
}

/* The line over each step: solid, in the light ink, over the
   early-access release */
.tl-step::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 2px solid var(--night-ink);
}

/* Dashed and quieter over what comes later, and long enough to leave the
   screen at every width */
.tl-later::before {
  right: -100vw;
  border-top-style: dashed;
  border-top-color: var(--night-faint);
}

/* The node at the start of each line, centered on it: filled for the
   early-access release, open for what comes later. Flat, no shadow. The
   border keeps both nodes visible where a contrast theme drops
   backgrounds. */
.tl-step::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--night-ink);
  border-radius: var(--radius-key);
  background: var(--night-ink);
}

.tl-later::after {
  border-color: var(--night-faint);
  background: var(--night);
}

/* A heading sits 24px over its lead, as in every layout of the site */
.tl-now > * + * {
  margin-top: var(--s5);
}

.tl-now .actions {
  margin-top: var(--s6);
}

.tl-later > * + * {
  margin-top: var(--s4);
}

/* The later step's sentences are set at the lead's size, so they weigh
   as much as the lead they answer in the step beside it. The launch date
   stands under them, in the light ink, with the small label the home
   page's launch line uses; the date itself never breaks across lines.
   With the date here, the later step no longer stands as a short cell
   beside the tall one from 1024px. */
.tl-later p {
  max-width: 46ch;
  color: var(--night-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.tl-later .ea-launch {
  color: var(--night-ink);
}

.ea-launch-label {
  margin-right: 0.5em;
  color: var(--night-quiet);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ea-launch time {
  font-weight: 600;
  white-space: nowrap;
}

/* From 1024px the two steps stand side by side on one line, the
   early-access release on the wider column; its solid line crosses the
   gap and meets the open node where the dashed line starts. */
@media (min-width: 1024px) {
  .tl {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--split-gap);
    align-items: start;
  }

  .tl-now::before {
    right: calc(-1 * var(--split-gap));
  }
}

/* A lead keeps the lead's measure inside the reading row, where the
   shared rule for the row's paragraphs would widen it to the prose
   measure */
.reading-body > .lead {
  max-width: var(--measure-lead);
}

/* The short lists of links beside a heading: plain links on the
   hairlines of the shared list, so they read as a way on, not as facts */
.ea-more a {
  text-decoration-thickness: 1px;
}

.ea-more > li {
  font-size: var(--fs-meta);
}

/* What you get: twelve white tiles that share their lines. Each tile's
   limit follows its own sentence, 16px under it, so a short tile leaves
   no wide gap between what a part does and where it stops. Only the
   guide link goes to the tile's foot, so the links of the tiles in one
   row line up; 12px stays above it even in the tallest tile of a row. */
.ea-tiles > li {
  display: flex;
  flex-direction: column;
}

.ea-tiles .limit {
  margin-top: var(--s4);
}

.ea-tiles .ea-link {
  margin-top: auto;
  padding-top: var(--s3);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* The Store band: the large line on one side, the facts, the WebView2
   sentence, the two actions and the note on the other, 24px apart. The
   facts are set at the lead's size, so they keep the lead's measure; the
   WebView2 sentence is a detail of them and stays at the body size. */
.ea-store .chapter-art > * + * {
  margin-top: var(--s5);
}

.ea-store .chapter-art > p:first-child {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* Contrast themes force the borders to the system text color, which
   keeps the lines; the filled node takes the same color so it still
   reads as filled. */
@media (forced-colors: active) {
  .tl-now::after {
    background: CanvasText;
  }

  .tl-later::after {
    background: Canvas;
  }
}