/* ==========================================================================
   File Vault — the page «Приложение для Linux» (linux-download.html, served at /linux)
   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
         div.get-install > p.get-install-lead + div.get-command > code#install-command + button#copy-btn + p.get-update
         div#arch.get-install.get-arch-install > h2.get-section-title + p.get-install-lead
           + div.get-command > code#arch-commands.get-command-script + button#arch-copy-btn + p.get-update
                                                          Arch: key, repository, install; only when the node serves the pacman package
         p.context-help.get-key > span#fingerprint        the fingerprint of the signing key, in groups of four
         p.context-help.get-arch#arch-soon                «Для Arch Linux — скоро.» while the node has no pacman package
       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 install command 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 the install command */
    --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;
    gap: var(--space-2);
  }

  .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-install {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--gutter);
  }

  .get-install > p {
    margin: 0;
  }

  .get-command {
    display: grid;
    gap: var(--space-3);
  }

  .get-key,
  .get-arch {
    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;
    }

    .get-command {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    /* Several lines of commands: the button stands at their top, not in the middle */
    .get-arch-install > .get-command {
      align-items: start;
    }
  }

  @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);
  }

  .get-install {
    color: var(--text);
    font-size: var(--body-font);
    line-height: var(--leading-md);
  }

  /* The command is read and selected as a whole: it wraps where it must, never scrolls sideways */
  .get-command-text,
  .get-update > code {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }

  /* The commands for Arch are several lines: the line breaks of the script stay, long lines wrap */
  .get-command-script {
    display: block;
    white-space: pre-wrap;
  }

  .get-section-title {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--leading-md);
  }

  .get-command-text {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text);
    user-select: all;
  }

  /* The fingerprint is compared by eye: groups of four stay whole, the line breaks between them */
  .get-key > span {
    color: var(--text);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }
}