/* The accounts (docs/specs/accounts.md, item A2.13): the entry of the sidebar and the pages
   /login, /signup, /reset, /account and /welcome. Only the tokens of style.css (docs/style_guide.md):
   no colour, size, font or shadow of its own but the four colours of the G of Google, which are
   Google's mark, in the markup. Loaded by _account.html with the flag on only, so with the flag off
   the site is that of main. */

/* hidden is hidden, also on elements whose class sets a display (.side-link is flex) */
#acc [hidden],
.acc-page [hidden] {
  display: none !important;
}

/* -- the entry of the sidebar, under Settings ---------------------------------------------------
   Settings and the entry are one sticky end of the sidebar: a long list of the day scrolls under
   both, both stay in view. The entry takes the bottom of the end (its padding of 12 px under it,
   over the padding of the sidebar, as .side-end did alone); Settings sticks right above it, 4 px
   apart. -20 px: the gap of the column of the sidebar between them, taken back */
.side-end:has(~ #acc:not([hidden])) {
  bottom: 36px;
  margin-bottom: 0;
  padding-bottom: 0;
}

#acc {
  position: sticky;
  bottom: -12px;
  margin: -20px 0 -12px;
  padding: 4px 0 12px;
  background: var(--ground);
}

/* -- the pages ---------------------------------------------------------------------------------- */

.acc-page > .acc-form,
.acc-page > .acc-out,
.acc-page > .acc-load-error,
.acc-page > #acc-already {
  margin-top: var(--gap-block);
}

/* a column of fields, at most 400 px: inside a field 4 px, between fields 16 px, between the
   blocks of a page --gap-block */
.acc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 0;
}

.acc-form h2 {
  margin: 0;
}

.acc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acc-field label {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.acc-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

/* 16 px: a phone does not zoom into the field */
.acc-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line-ground);
  border-radius: var(--r-badge);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-16);
}

.acc-field input[aria-invalid="true"] {
  border-color: var(--no-ink);
}

/* the code: about 10 characters wide, its digits tabular */
.acc-field .acc-code {
  box-sizing: content-box;
  width: 9ch;
  font-size: var(--fs-20);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* the eye: 40 x 40 inside the right end of the field */
.acc-pw {
  position: relative;
}

.acc-pw input {
  padding-right: 44px;
}

.acc-eye {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-badge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.acc-eye[aria-pressed="true"] {
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .acc-eye:hover {
    color: var(--text);
  }
}

/* the error of a field under it, the message of a form under its button */
.acc-err {
  margin: 0;
  color: var(--no-ink);
  font-size: var(--fs-12);
  font-weight: 500;
}

.acc-msg {
  margin: 0;
  font-size: var(--fs-14);
}

.acc-msg.is-error {
  color: var(--no-ink);
}

.acc-msg:empty {
  display: none;
}

.acc-page > .acc-msg {
  max-width: 400px;
  margin-top: 16px;
}

/* the main buttons of a form fill its column; the others keep their width, in a row */
.acc-form .acc-submit,
.acc-google {
  width: 100%;
}

.acc-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.acc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sib);
  margin: 0;
}

.acc-forgot {
  margin: -8px 0 0;
  font-size: var(--fs-14);
}

/* a link alone on its line: a target of 24 px */
.acc-forgot a,
.acc-other a {
  display: inline-block;
  padding: 2px 0;
}

/* the box of updates: the whole line its target */
.acc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sib);
  min-height: 24px;
  font-size: var(--fs-14);
  cursor: pointer;
}

.acc-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.acc-sent,
.acc-already,
.acc-text {
  margin: 0;
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

/* "or", between two lines, then Google and the line of the browsers inside apps */
.acc-or {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  margin: var(--gap-block) 0 16px;
  color: var(--muted);
  font-size: var(--fs-12);
}

.acc-or::before,
.acc-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.acc-google {
  max-width: 400px;
  font-weight: 500;
}

.acc-g {
  flex: none;
  width: 18px;
  height: 18px;
}

.acc-inapp {
  max-width: 400px;
  margin: var(--gap-sib) 0 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

.acc-other {
  margin: var(--gap-block) 0 0;
  font-size: var(--fs-14);
}

/* /account: the address, then sections apart by --gap-section as in Settings */
.acc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--gap-block) 0 0;
}

.acc-row-label {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 500;
}

.acc-row-value {
  font-size: var(--fs-14);
  font-weight: 500;
  overflow-wrap: anywhere;
}

#acc-signed-in > section {
  margin-top: var(--gap-section);
}

#acc-signed-in .ask-switch {
  align-items: flex-start;
  margin: 0 0 var(--gap-sib);
}

#acc-signed-in .set-actions {
  margin: 12px 0 0;
}

.acc-after {
  margin-top: var(--gap-sib);
}

.acc-confirm {
  margin-top: 16px;
}

.acc-out p {
  margin: 0 0 12px;
  font-size: var(--fs-14);
}

@media (max-width: 640px) {
  .acc-actions .btn {
    flex: 1 1 auto;
  }
}

/* pass A3 (item A3.5): "I already have a code" under the button of step 1, a button that reads as
   a link of the site (the colour of the text, an underline of --outline), 14 px, a target of 24 px */
.acc-have {
  margin: -8px 0 0;
}

.acc-linkbtn {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.acc-linkbtn:hover {
  text-decoration-color: currentColor;
}

/* pass A3 (item A3.11): the block Sync of Settings, over the sections of #set-app and apart from
   them as they are from each other */
#sync {
  margin-bottom: var(--gap-section);
}