/* Account button, sign-in and sync dialogs, and the Settings account card (js/account.js).
   Colors come from the shared tokens, so light and dark both follow the theme. */

/* ---------- Header button ---------- */

#account-btn { order: 2; position: relative; }
.acct-btn.is-in {
  background: var(--acct-bg, var(--sb-grape));
  color: var(--sb-outline);
}
.acct-btn-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.acct-btn-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sb-outline);
  border-radius: 50%;
  background: var(--sb-orange);
  color: var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
.acct-btn-badge.is-error { background: var(--sb-danger); }
.acct-btn-badge.is-syncing {
  width: 12px;
  height: 12px;
  top: -3px;
  right: -3px;
  background: var(--sb-sea);
  animation: acct-pulse 1.1s ease-in-out infinite;
}
@keyframes acct-pulse { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.15); } }

/* Two header buttons now sit beside the brand: let the brand give way (and ellipsize) rather than push the sound button to a new row. */
@media (max-width: 760px) {
  body:has(#account-btn) .brand { flex-basis: 120px; }
}

/* ---------- Dialog shell ---------- */

.acct-dialog {
  width: min(30rem, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.acct-dialog::backdrop { background: color-mix(in srgb, var(--sb-deep) 72%, transparent); backdrop-filter: blur(3px); }
.acct-dialog[open] { animation: sb-pop 0.28s var(--ease-spring) both; }
.acct-card { display: block; }

.acct-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 18px;
  border-bottom: var(--sb-outline-w) solid var(--sb-outline);
  background: linear-gradient(180deg, var(--sb-sky) 0%, var(--sb-sea) 100%);
}
.acct-band-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 auto; }
.acct-title { margin: 0; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.05; }
.acct-title:focus, .acct-h3:focus, .acct-lead:focus { outline: none; }
.acct-band-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 50%;
  background: var(--sb-pink);
  color: var(--sb-outline);
  box-shadow: var(--sb-pop);
  transform: rotate(-5deg);
}
.acct-band-badge svg { width: 30px; height: 30px; }

.acct-body { padding: 18px 22px 20px; }
.acct-lead { margin: 0 0 14px; font-weight: 700; }
.acct-h3 { margin: 0 0 6px; font-size: 1.3rem; }
.acct-body .muted, .acct-dialog .muted { color: var(--sb-card-muted); }

.acct-actions { gap: 10px; margin-top: 14px; }
.acct-actions-end { justify-content: flex-end; margin-top: 14px; }
.acct-wide { width: 100%; }

/* ---------- Avatar and email ---------- */

.acct-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 50%;
  background: var(--acct-bg, var(--sb-grape));
  color: var(--sb-outline);
  box-shadow: 0 3px 0 var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
.acct-avatar.is-lg { width: 56px; height: 56px; font-size: 1.7rem; transform: rotate(-5deg); }
.acct-ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-email-pill { max-width: 100%; margin: 0; min-width: 0; }

/* ---------- Form ---------- */

.acct-form { display: grid; gap: 8px; }
.acct-label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.acct-input {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius-sm);
  background: var(--sb-card-2);
  color: var(--sb-card-ink);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--sb-outline) 14%, transparent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
}
.acct-input::placeholder { color: var(--sb-card-muted); opacity: 0.8; }
.acct-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.acct-input:disabled { opacity: 0.6; }
.acct-form .btn { margin-top: 6px; }

.acct-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 2px solid var(--bad);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bad) 12%, var(--sb-card));
  color: var(--sb-card-ink);
  font-weight: 700;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.acct-error[hidden] { display: none; }
.acct-note { margin: 10px 0 0; color: var(--good); font-weight: 700; font-size: 0.95rem; }
.acct-note:empty { display: none; }

/* Google button: the "G" sits on a white disc so its colors read on light and dark. */
.acct-google-block .acct-error { margin: 10px 0 0; }
.acct-google { gap: 10px; }
.acct-g {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.acct-g svg { width: 16px; height: 16px; }
.acct-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: var(--sb-card-muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.acct-or::before, .acct-or::after { content: ''; flex: 1; border-top: 2px dashed var(--sb-card-line); }

/* Link-looking button ("Use a different email"). */
.acct-link {
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Check your inbox ---------- */

.acct-sent { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.acct-sent-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 50%;
  background: var(--sb-sun);
  color: var(--sb-outline);
  box-shadow: 0 3px 0 var(--sb-outline);
}
.acct-sent-ico svg { width: 26px; height: 26px; }
.acct-sent .acct-lead { margin: 0; }
.acct-sent-email {
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 2px dashed var(--sb-card-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

/* ---------- Sync status ---------- */

.acct-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 700; line-height: 1.3; }
.acct-dot { flex: none; margin-top: 0.3em; width: 12px; height: 12px; border: 2px solid var(--sb-outline); border-radius: 50%; background: var(--pending); }
.acct-dot[data-tone="ok"] { background: var(--good); }
.acct-dot[data-tone="busy"] { background: var(--sb-sea); }
.acct-dot[data-tone="warn"] { background: var(--sb-orange); }
.acct-dot[data-tone="bad"] { background: var(--sb-danger); }

.acct-confirm .acct-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 2px solid var(--sb-card-line);
  border-radius: var(--radius-sm);
  background: var(--sb-card-2);
  cursor: pointer;
}
.acct-check input { flex: none; margin: 1px 0 0; }

/* ---------- Which progress? ---------- */

.acct-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.acct-side {
  min-width: 0;
  padding: 10px 12px 12px;
  border: 2px solid var(--sb-outline);
  border-radius: var(--radius-sm);
  background: var(--sb-card-2);
  box-shadow: 0 3px 0 var(--sb-outline);
}
.acct-side p { margin: 0; }
.acct-side-h { margin: 0 0 4px; font-size: 1rem; color: var(--sb-card-muted); }
.acct-side-words { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acct-side-unit { font-size: 0.95rem; font-weight: 600; color: var(--sb-card-muted); }
.acct-side-line { font-weight: 700; font-size: 0.95rem; }

.acct-choices { display: grid; gap: 12px; }
.acct-choice-wrap { position: relative; padding-top: 4px; }
.acct-reco { position: absolute; top: -12px; right: 14px; z-index: 1; padding: 2px 16px; font-size: 0.85rem; }
.acct-choice { flex-direction: column; gap: 2px; width: 100%; padding: 10px 20px; text-align: center; }
.acct-choice-label { font-size: 1.1rem; }
.acct-choice-hint { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; opacity: 0.85; }

/* ---------- Danger buttons ---------- */

.acct-danger-ghost { color: var(--bad); }
.acct-danger { background: var(--sb-danger); color: var(--sb-primary-ink); }

/* ---------- Settings card ---------- */

.acct-set { display: block; }
.acct-set-h { margin: 0 0 8px; font-size: 1.5rem; }
.acct-set-lead { margin: 0 0 14px; }
.acct-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acct-who-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.acct-who-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.acct-set .acct-status { font-size: 0.95rem; color: var(--ink-muted); }
.acct-set .acct-dot { border-color: var(--sb-outline); }
.acct-set .acct-error { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--ink); }
.acct-set .acct-input { background: var(--surface-2); color: var(--ink); }
.acct-set .acct-label { display: block; margin: 12px 0 6px; }
.acct-set .acct-confirm .acct-check { background: var(--surface-2); border-color: var(--border); }
.acct-set .acct-confirm { margin-top: 4px; }
.acct-set .acct-link { color: var(--accent); }
.acct-set .muted { color: var(--ink-muted); }
.acct-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed var(--border);
}
.acct-row strong { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.acct-set .acct-delete { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--border); }
.acct-delete .acct-input { max-width: 16rem; }

/* ---------- Title screen invite ---------- */

.title-account { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 20px; }
.title-account:empty { display: none; }
.acct-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(100%, 28rem);
  min-width: 0;
  padding: 8px 8px 8px 10px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  box-shadow: var(--sb-pop);
  text-align: left;
}
.acct-invite-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 50%;
  background: var(--sb-sea);
  color: var(--sb-outline);
  transform: rotate(-6deg);
}
.acct-invite-icon svg { width: 24px; height: 24px; }
.acct-avatar.is-sm { width: 42px; height: 42px; font-size: 1.3rem; }
.acct-invite-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.acct-invite-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.acct-invite-sub, .acct-invite .acct-status { font-size: 0.88rem; color: var(--sb-card-muted); }
.acct-invite .acct-dot { width: 10px; height: 10px; }
.acct-invite-btn { flex: none; min-height: 44px; padding: 8px 20px; border-radius: 999px; }

/* ---------- Narrow screens ---------- */

@media (max-width: 480px) {
  .acct-band { padding: 16px; }
  .acct-body { padding: 16px; }
  .acct-compare { gap: 8px; }
  .acct-side { padding: 8px 10px 10px; }
  .acct-side-words { font-size: 1.4rem; }
  .acct-actions .btn { flex: 1 1 auto; }
  .acct-actions .acct-link { flex: 1 1 100%; }
  .acct-actions-end .btn { flex: 0 0 auto; }
  .acct-band-badge { width: 48px; height: 48px; }
}

/* Motion is decoration. */
@media (prefers-reduced-motion: reduce) {
  .acct-dialog[open], .acct-btn-badge.is-syncing { animation: none; }
}
.reduced-motion .acct-dialog[open], .reduced-motion .acct-btn-badge.is-syncing { animation: none; }

@media (max-width: 400px) {
  body:has(#account-btn) .brand { gap: 6px; }
  body:has(#account-btn) .brand-mark { width: 34px; height: 23px; }
  body:has(#account-btn) .brand-text { font-size: 1rem; }
}