/* MaeVae, the Download page: this page's own rules only. The header, the
   footer, the grounds, the tiers, the type roles, the buttons, the agents
   row and the layouts every section uses (the reading row, the band, the
   columns) come from /styles.css; the drawn window, the New profile steps,
   the panel over the window, the plate and the scene controls come from
   /mock.css.

   Five grounds, in the order a reader needs them: night for the one
   Store action, paper for what you need, the dark band one step up for
   first start (the drawn window reads best on the dark), the strip for
   the missing tool, and paper again for where to read more, ahead of the
   night footer. Amber appears only inside the drawings, where /mock.css gives it
   its meaning. */

/* The hero keeps the home page's grid. Its headline sits one step below
   the home page's, because it names a page, not the product. */
.hero.dl-hero h1 {
  font-size: var(--fs-huge);
}

@media (min-width: 1024px) {
  .dl-hero .note {
    max-width: 46ch;
  }
}

/* A command as you would type it: monospace, on a white field with a
   hairline, so it reads as something to copy, not as a link */
main code {
  padding: 0 0.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.94em;
  white-space: nowrap;
}

/* The table's caption names it for screen readers; the heading above it
   already names it on screen */
.dl-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* What you need, and why: a two-column table at the content width, the
   requirement and its one line in the first column, the reason in the
   second, on hairlines, with the header row on the strip ground. On a
   narrow screen each row becomes a block, the requirement over its
   reason; the ARIA roles in the markup keep it a table for screen readers
   when its display changes. */
.req {
  width: 100%;
  border-collapse: collapse;
  color: var(--quiet);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.req th,
.req td {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.req thead th {
  padding-block: var(--s3);
  border-bottom-color: var(--line-strong);
  background: var(--strip);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.req tbody th {
  width: 34%;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* The reason is a paragraph, so it keeps the site's reading measure in a
   wide column */
.req td > p {
  max-width: var(--measure);
}

/* A second paragraph in a reason (the WebView2 row's start-up box) stands
   a short step under the first */
.req td > p + p {
  margin-top: var(--s3);
}

/* The requirement's one line, under its name: the plain answer in ink at
   the reading size */
.req-sub {
  display: block;
  margin-top: var(--s2);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
}

@media (max-width: 719.98px) {
  .req,
  .req tbody,
  .req tr,
  .req th,
  .req td {
    display: block;
  }

  /* The header row stays for screen readers and leaves the screen */
  .req thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .req {
    border-top: 1px solid var(--line-strong);
  }

  .req tbody tr {
    padding-block: var(--s5);
    border-bottom: 1px solid var(--line);
  }

  .req tbody th,
  .req tbody td {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .req tbody td {
    margin-top: var(--s3);
  }
}

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

/* A line that points into the guide, under the text it belongs to */
.dl-link {
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* The missing tool, beside its drawing. The note on the Install button in
   Quick settings is a second place to the same end, so it stands under a
   hairline at the size of the site's notes. */
.dl-also {
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.dl-also strong {
  color: var(--ink);
}

/* New profile opens over the window, so the window must stand tall enough
   for the panel at every width; on a narrow screen the panel's lines wrap
   and it grows, so the panes grow with it */
.dl-missing-scene .mock-panes {
  --m-panes-h: 27em;
}

@media (max-width: 639.98px) {
  .dl-missing-scene .mock-panes {
    --m-panes-h: 31em;
  }
}

/* The line the step adds under the list for a missing tool: the app's
   words, then its button beside them */
.dl-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.7em;
  color: var(--m-body);
}

/* The list while the scene picks from it: framed in the drawing's ink,
   as a focused field is */
.dl-focus {
  border-color: var(--m-ink);
}

/* First start. The window must stand tall enough for the New profile
   steps that open over it, so the room is given to the terminal, and the
   agent's first setup question fills it: the options, a preview and the
   hint, as a theme picker prints them, so the finished frame is not an
   empty terminal. */
.dl-first-scene .mock-term {
  min-height: 22em;
}

/* The agent's first question sits under its greeting, near the top, the
   way a terminal prints it, not pushed to the pane's foot */
.dl-first-scene .mock-ask {
  margin-top: 0.4em;
}

/* The picker's preview of how code will look: a few lines set off by a
   hairline on their left, inside the question's frame, the second line
   indented as code is */
.dl-preview {
  display: grid;
  gap: 0.2em;
  margin-block: 0.3em;
  padding-left: 0.7em;
  border-left: 1px solid var(--m-faint);
}

.dl-indent {
  padding-left: 2ch;
}

/* The rail's two states share one place: the empty rail and the rail
   with the new profile. The stage's two states do the same. */
.dl-rail-filled {
  display: grid;
  align-content: start;
  gap: 0.15em;
}

.dl-stage-swap {
  flex: 1 1 auto;
}

/* The three steps stand in one place, so the panel keeps the size of the
   tallest from the first step to the last */
.dl-steps > .dl-step {
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  gap: 0.7em;
}

/* Next gives way to Create & open in the same place, at the foot's end */
.dl-btn-swap {
  justify-items: end;
}

/* The four steps under the band: a real sequence, so each carries its
   numeral, set light and large in the night ink: structure, not a
   signal */
.dl-n {
  display: block;
  color: var(--night-ink);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.dl-steps-list h3 {
  font-size: var(--fs-label);
  line-height: 1.35;
}

.dl-steps-list p {
  font-size: var(--fs-meta);
  line-height: 1.6;
}

/* What happens after the four steps: the agent's own first-run setup,
   a row of its own under them, so the page reads in the order it
   happens. Its paragraphs keep the reading measure across the full
   width. */
.dl-then > * + * {
  margin-top: var(--s4);
}

.dl-then p {
  max-width: var(--measure);
}

/* Windows contrast themes keep the table's lines and the code frames in
   the system text color */
@media (forced-colors: active) {
  main code,
  .req th,
  .req td {
    border-color: CanvasText;
  }
}