/* ==========================================================================
   File Vault — the page «Приложение для Android» (app-download.html, served at /app)
   A source file, edited in place: nothing generates it, nothing compares it with a copy (docs/UI.md, section 13).

   div.get-page
     header.get-bar > div.brand
     main.get-main
       p#loading.get-loading                             the question about the release is on its way
       section#failed.get-failed > div.alert.alert-error + button.btn.btn-secondary      no answer: «Повторить»
       section#ready.get-ready
         div.empty > span.empty-icon + h1.empty-title.page-title + p#version + div.empty-actions > a#download-link.btn.btn-primary
         ol.get-steps > li                                how to install: three steps
         p.context-help.get-address > span#address        the address to type on the phone
       section#none.get-none > div.empty                  nothing is published on this server yet

   One state is shown at a time. The page is a short reading column on the paper: the message of the system
   (.empty) with the download button, the steps under it. Phone layout: the button is as wide as the column.
   From 600px: a centred column.
   ========================================================================== */
@layer layout {
  .get-page {
    /* Page property.
       --get-column   the reading column: a message, a button and three steps */
    --get-column: 560px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .get-bar {
    display: flex;
    align-items: center;
    flex: none;
    height: calc(var(--appbar-height) + var(--safe-top));
    padding: var(--safe-top) calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));
  }

  .get-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 0 var(--safe-right) calc(var(--space-8) + var(--safe-bottom)) var(--safe-left);
  }

  .get-ready,
  .get-none {
    display: grid;
    align-content: start;
  }

  .get-ready > .empty,
  .get-none > .empty {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }

  .get-ready .empty-actions,
  .get-ready .empty-actions > .btn {
    width: 100%;
  }

  .get-failed {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding: var(--space-6) var(--gutter);
  }

  .get-failed > .alert {
    justify-self: stretch;
  }

  .get-steps {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4) var(--gutter) var(--space-4) calc(var(--gutter) + var(--space-6));
  }

  .get-address {
    padding: 0 var(--gutter);
  }

  /* A short window: the message and the button fit without scrolling */
  @media (max-height: 499px) {
    .get-ready > .empty,
    .get-none > .empty {
      padding-top: var(--space-2);
      padding-bottom: var(--space-3);
    }
  }

  @media (min-width: 600px) {
    .get-bar,
    .get-main {
      width: 100%;
      max-width: calc(var(--get-column) + 2 * var(--gutter));
      margin: 0 auto;
    }

    .get-ready .empty-actions,
    .get-ready .empty-actions > .btn {
      width: auto;
    }
  }

  @media (min-width: 900px) and (min-height: 500px) {
    .get-bar {
      height: var(--topbar-height);
    }
  }
}

@layer pages {
  .get-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--gutter);
    color: var(--text-muted);
  }

  /* The message stands on the paper, not on a sheet: there the tile is darker, and its glyph takes the muted
     text colour to stay above 3:1 */
  .get-ready .empty-icon > .icon,
  .get-none .empty-icon > .icon {
    stroke: var(--text-muted);
  }

  /* The steps are numbered: the reset of the design system takes the markers of every list away */
  .get-steps {
    color: var(--text);
    font-size: var(--body-font);
    line-height: var(--leading-md);
    list-style: decimal;
  }

  .get-steps > li::marker {
    color: var(--text-muted);
    font-weight: var(--weight-medium);
  }

  /* The address is typed by hand on a phone: it never breaks in the middle of a word where it can stay whole */
  .get-address > span {
    color: var(--text);
    overflow-wrap: anywhere;
  }
}