/* account.html: the account page, on top of stall.css and link.css */

.acct { width: min(100%, 560px); }
/* buttons and lists set their own display, which would otherwise show a hidden one */
.acct [hidden] { display: none !important; }
.acct h2 { font-size: 1.35rem; margin-bottom: .5em; }
.acct__who { margin-top: -.6em; overflow-wrap: anywhere; }

.acct__part {
  margin-top: 1.4em;
  padding-top: 1.3em;
  border-top: 2px dashed var(--cream-2);
  text-align: left;
}
.acct__part > .btn { margin-top: .2em; }
.acct__part .link__form { margin: .4em 0 0; }
.acct__part .link__form .btn { justify-self: start; }
.acct__part p:last-child { margin-bottom: 0; }

/* one field with its button beside it; messages wrap underneath */
.acct__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: .6em; }
.acct__row .btn { margin-top: 0; }
.acct__row p { flex-basis: 100%; margin: 0; }
.acct__grow { flex: 1 1 200px; min-width: 0; }
.acct__row input {
  width: 100%;
  font: 700 1.05rem "Nunito", sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  padding: .6em .75em;
}
.acct__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.acct__check { display: flex !important; align-items: center; gap: 8px !important; }
.acct__check input { width: 1.15em; height: 1.15em; accent-color: var(--goblin-dark); padding: 0; }

.acct__google { --face: var(--paper); --face-hi: #fff; margin-bottom: .2em; }
.acct__text {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acct__text:hover { color: var(--ink); }

.acct__note, .acct__good { color: var(--goblin-dark); }
.acct__note { background: #d9f2c9; border: 2px solid var(--ink); border-radius: 10px; padding: .5em .8em; }
.acct__note.is-bad { background: #fbe0d8; color: var(--red-dark); }

.acct__owned { margin-top: 0; }
.acct__owned li.is-over { background: var(--cream-2); }

.acct__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.acct__foot .btn { margin-top: 0; }
.acct__foot .acct__text { color: var(--ink-soft); font-size: .95rem; }

.acct__danger {
  margin-top: 1.6em;
  padding-top: 1.1em;
  border-top: 2px dashed var(--cream-2);
  text-align: left;
  font-size: .95rem;
  color: var(--ink-soft);
}
.acct__danger summary { cursor: pointer; width: fit-content; }
.acct__danger[open] summary { color: var(--red-dark); margin-bottom: .8em; }
.acct__danger .link__form { margin-bottom: 0; }
.acct__danger .link__form .btn { justify-self: start; }