/* The sign-in control, shared by every page with a header (web/core/auth.mjs builds it).
   One file rather than the same six rules copied into five pages - and the same six colours
   as everything else: dark, one accent, no error red. */
.auth {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .35rem .5rem; align-items: baseline; margin-left: auto;
}
/* `contents` so the form's fields lay out in this row rather than in a box of their own. */
.auth form { display: contents; }
.auth input {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: .3rem .5rem; font: inherit; font-size: 13px; width: 8rem;
}
.auth input:focus { outline: none; border-color: var(--accent); }
/* The row has to survive a 46rem header with the variant links already in it. */
.auth button, .auth .who { white-space: nowrap; }
.auth button {
  background: none; border: 1px solid transparent; border-radius: 4px; padding: .1rem .4rem;
  font: inherit; font-size: 12px; color: var(--dim); cursor: pointer;
}
.auth button:hover { color: var(--text); }
.auth .who { color: var(--dim); font-size: 12px; }
.auth .who b { color: var(--text); font-weight: 400; }
/* Whatever the last attempt had to say, on its own line under the row it belongs to. */
/* `width: 0` so a long message cannot widen the control and squeeze the title beside it;
   flex-basis puts it on its own line under the row anyway. */
.auth .msg { flex: 0 0 100%; width: 0; margin: 0; color: var(--dim); font-size: 12px; text-align: right; }
.auth .msg:empty { display: none; }

/* On a phone the header is one column, and this control has five things in it. Left to the
   desktop rules it right-aligns into a ragged stack with the email field hanging off the
   edge - which is what it did on a 390pt screen.
   Presentation only: web/core/auth.mjs builds the same nodes either way, and its session
   pinning is not something a stylesheet can reach. */
@media (max-width: 34rem) {
  /* The control declares what its container has to do, so the rule lives here rather than
     being copied into index.html, share.html and both variants. Without the wrap the 100%
     below cannot move it onto its own line - a flex item in a nowrap row just squashes. */
  :is(header, .header):has(> .auth) { flex-wrap: wrap; }
  .auth {
    justify-content: stretch;
    margin-left: 0;
    width: 100%;
    gap: .5rem;
  }
  /* The fields go full width and share a row with nothing; the three buttons share the next. */
  .auth input { flex: 1 1 100%; width: auto; font-size: 16px; padding: .55rem .65rem; }
  /* 16px, deliberately: iOS Safari zooms the whole page when a focused input is smaller. */
  .auth button { flex: 0 0 auto; font-size: 13px; padding: .35rem .5rem; }
  .auth form { gap: .5rem; }
  .auth .msg { text-align: left; }
  .auth .who { flex: 1 1 100%; }
}