/* SOTA account menu in the top bar. The same file is in all three repos (main-website/public/assets,
   and src/assets in guide-website and checklist-website); change all three together.
   Uses the color and font tokens from sota.css. */

/* A flex box, so the button is centred in the top bar like the Discord button. As an inline box it
   sat on a text baseline, which moved up once the avatar picture appeared. */
.account {
  position: relative;
  display: flex;
  align-items: center;
}

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  max-width: 14rem;
  padding: 0 12px; /* the same height and side padding as the boxed Discord button */
  font: inherit;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.account-btn:hover,
.account-btn[aria-expanded="true"] { border-color: var(--ink); }
.account-label {
  padding-top: 3px; /* centres the letters by eye, like .box in sota.css; the avatar stays centred */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-avatar {
  display: none;
  flex: none;
  place-items: center;
  /* No taller than a line of text, so the button stays the same height as the Discord button */
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper);
  background: var(--graphite);
}
.account.is-signed-in .account-avatar { display: grid; }
/* The avatar gets the same space on its left as above and below it */
.account.is-signed-in .account-btn { padding-left: calc((var(--control-h) - 22px) / 2); }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* A small red mark on the button when changes couldn't be saved */
.account[data-sync="error"] .account-btn { border-color: var(--red); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 2px rgb(22 22 29 / .06), 0 18px 44px -12px rgb(22 22 29 / .22);
  transform-origin: top right;
}
/* A soft grey shadow disappears on a dark page; deepen it so the menu still lifts off the page. */
:root[data-theme="dark"] .account-menu { box-shadow: 0 18px 44px -8px rgb(0 0 0 / .65); }
.account-menu p { margin: 0; }
/* The display rules below would otherwise override the hidden attribute */
.account [hidden] { display: none !important; }

/* ----- logged out: a short heading, one button per service, and the fine print ----- */
.account-out { display: grid; }
.account-head { display: grid; gap: 4px; padding: 18px 18px 14px; }
.account-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.account-text { font-size: 14.5px; line-height: 1.45; color: var(--graphite); }

.account-providers { display: grid; gap: 8px; padding: 0 18px 18px; }
.account-provider {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px; /* the empty last column keeps the label centred */
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.account-provider::after { content: ""; }
.account-provider svg { width: 18px; height: 18px; }
.account-provider span { padding-top: 2px; text-align: center; } /* STIX sits a little high; see .box */
.account-provider:hover { border-color: var(--ink); background: var(--plate); }

.account-menu .account-message { margin: -4px 18px 16px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.account-message:empty { display: none; }
.account-message .sota-loader { font-size: inherit; color: inherit; }
.account-fine {
  padding: 11px 18px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--graphite);
  background: var(--plate);
  border-top: 1px solid var(--hairline);
}

/* ----- logged in: who, whether progress is saved, then the profile and logging out ----- */
.account-in { display: grid; }
.account-who {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 18px 14px;
}
.account-who .account-avatar { width: 40px; height: 40px; font-size: 17px; }
.account-who-text { display: grid; min-width: 0; line-height: 1.35; }
.account-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { font-size: 13.5px; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Saved, saving or not saved: a small dot before the words */
.account-sync {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 0 18px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--graphite);
}
.account-sync::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--graphite);
  transform: translateY(-1px);
}
.account-sync:empty { display: none; }
.account[data-sync="saved"] .account-sync::before { background: #2E8B57; }
.account[data-sync="error"] .account-sync { color: var(--red); }
.account[data-sync="error"] .account-sync::before { background: var(--red); }

.account-actions { display: grid; padding: 6px 0; border-top: 1px solid var(--hairline); }
.account-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 18px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.account-action svg { flex: none; width: 15px; height: 15px; fill: var(--graphite); transition: fill var(--dur) var(--ease); }
.account-action:hover { text-decoration: none; background: var(--plate); }
.account-action:hover svg { fill: var(--ink); }

/* The menu drops in quickly, and a saving dot breathes; both still for anyone who asks for less motion */
@media (prefers-reduced-motion: no-preference) {
  .account-menu:not([hidden]) { animation: account-in 170ms var(--ease); }
  .account[data-sync="syncing"] .account-sync::before { animation: account-pulse 1s ease-in-out infinite; }
}
@keyframes account-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes account-pulse { 50% { opacity: .3; } }

/* On phones the menu opens from the right edge of the top bar, wherever the button sits */
@media (max-width: 760px) {
  .account { position: static; }
  .account-menu { top: 52px; right: var(--gutter); }
}

@media (max-width: 640px) {
  .account.is-signed-in .account-label { display: none; }
  /* Just the avatar, in a square button */
  .account.is-signed-in .account-btn {
    justify-content: center;
    width: var(--control-h);
    padding: 0;
  }
}

@media print {
  .account { display: none; }
}