/*
 * The way in, where no one is signed in on this device: the first visit's view, Create Account, Use a Recovery Key,
 * and what follows it, and the offer to save a passkey after a phone's was used. Each is one
 * calm column on the canvas, as the box at /new is a blank sheet: the mark and what Vendondo is, then the ways in,
 * with the one tinted control of the view first among them. The editor's own controls and type, and nothing else.
 */
@layer base, editor, utilities;

@layer editor {
  /* Clear of the screen's own shape at its head and foot, as every view is. */
  .way-in {
    min-block-size: 100%;
    padding-block: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
    padding-inline: var(--side-left) var(--side-right);
  }
  /* Create Account's head: the way back, where a page's own is, in a row as tall as a control. */
  .way-top {
    display: flex;
    align-items: center;
    min-block-size: var(--control);
  }
  /* The column: as wide as a phone's, in the middle, a little way down from the head of the screen. */
  .way-col {
    inline-size: min(100%, 23rem);
    margin: max(8vh, 40px) auto 0;
    text-align: center;
  }
  /* Create Account and Use a Recovery Key read as a form does, from its leading edge. */
  .way-col.start {
    text-align: start;
  }
  /* The mark: the product's own, as the tab's icon draws it. */
  .mark {
    display: block;
    inline-size: 72px;
    block-size: 72px;
    margin: 0 auto 20px;
  }
  .mark rect {
    fill: var(--accent);
  }
  .mark path {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .way-in h1 {
    margin: 0;
    font: var(--t-large);
    overflow-wrap: anywhere;
  }
  .way-in .lede {
    margin: 8px 0 0;
    color: var(--label-2);
    font: var(--t-lede);
  }
  .way-in .foot {
    margin: 18px 0 0;
    color: var(--label-2);
    font: var(--t-subhead);
  }
  /* Where a line of words takes two, they are of a length, and the second isn't left a word or two. */
  @supports (text-wrap: balance) {
    #welcome .lede,
    #welcome .foot,
    .invite-only {
      text-wrap: balance;
    }
  }
  /*
   * The ways in: each as wide as the column, and as tall as the capsule that holds a control, one over the other.
   * Their words may take two lines where the text is very large, and the button grows to hold them.
   */
  .ways {
    display: grid;
    gap: 12px;
    margin-block-start: 36px;
  }
  .btn.wide {
    inline-size: 100%;
    min-block-size: var(--well);
    padding-block: 0.375rem;
    white-space: normal;
  }
  #create-go,
  #recover-go {
    margin-block-start: 28px;
  }
  /*
   * That Vendondo is invite-only, under the ways in: as quiet as the notes at the foot, and close to the way to the
   * waiting list over it, which it is about.
   */
  .invite-only {
    margin: 12px 0 0;
    color: var(--label-2);
    font: var(--t-subhead);
  }
  /*
   * On a device signed in on before, what Create Account says first: a new account starts empty. It stands on the
   * editor's fill, as a note does, with the way to sign in instead under it, which isn't the view's tinted control.
   */
  .before {
    margin-block-start: 24px;
    border-radius: 18px;
    padding: 14px 16px 16px;
    background: var(--fill);
  }
  .before p {
    margin: 0 0 12px;
    font: var(--t-subhead);
  }
  .before .btn.wide {
    background: var(--surface);
  }
  /*
   * What went wrong, under the ways in, with the symbol that marks it (controls.css). Until there is something to
   * say it is empty, takes no room, and is still there for a screen reader to hear from.
   */
  .way-wrong {
    margin: 0;
    color: var(--bad);
    font: var(--t-subhead);
    overflow-wrap: anywhere;
  }
  .way-wrong:not(:empty) {
    margin-block-start: 14px;
  }
  /* A recovery key is read as it is written: its letters and digits each as wide, in their groups. */
  #recovery-field {
    font-family: Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
  }
  /* The way to Use a Recovery Key, under the ways in: a link, as quiet as the notes it stands among. */
  #way-lost {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  /*
   * The name, which is optional, or the recovery key: what it is, over the field, in line with the words in the
   * field. The field is the editor's own, as wide as the column and as tall as the button under it.
   */
  .name-label {
    display: block;
    margin-block-start: 32px;
    padding-inline-start: 0.875rem;
    color: var(--label-2);
    font: var(--t-subhead);
  }
  #account-name,
  #recovery-field {
    display: block;
    inline-size: 100%;
    min-block-size: var(--well);
    margin-block-start: 8px;
    outline: none;
  }
  /*
   * As with the editor's other fields, the field wears the colour of the keyboard's ring only when it is the
   * keyboard that brought the cursor there (focus.mjs). The editor puts the cursor there itself when the view shows,
   * and then the cursor alone says where it is. Asked for more contrast, the ring goes round it whenever it is.
   */
  :where(:root[data-tabbed]) #account-name:focus-visible,
  :where(:root[data-tabbed]) #recovery-field:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }
  @media (prefers-contrast: more) {
    #account-name:focus-visible,
    #recovery-field:focus-visible {
      outline: 3px solid var(--ring);
      outline-offset: 2px;
    }
  }
}