/* ============================================================
   Accounts, sign-in and billing — the same glass language as the course.

   Deliberately restrained: one control in the app bar, one card on the
   account screen, no dashboard of panels. An account is optional here, so
   it should never look more important than the lesson.
   ============================================================ */

/* ---- The app-bar control ------------------------------------------ */

.authctl { display: inline-flex; align-items: center; }

.acct-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge, rgba(255,255,255,.7));
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--ink-800, #26224a);
  font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
  transition: box-shadow var(--d-fast, .18s) var(--e-out, ease), transform var(--d-fast, .18s) var(--e-out, ease);
}
.acct-chip:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.acct-chip-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar-img,
.avatar-fallback {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(35,29,83,.14);
}
.avatar-fallback {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

/* ---- The sign-in panel -------------------------------------------- */

.signin-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--s4);
  background: rgba(24, 20, 58, .38);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: signin-fade var(--d-mid, .26s) var(--e-out, ease);
}
@keyframes signin-fade { from { opacity: 0 } to { opacity: 1 } }

.signin-card {
  position: relative;
  width: min(420px, 100%);
  text-align: center;
  border-radius: var(--r-lg, 26px);
  animation: signin-rise var(--d-mid, .26s) var(--e-out, ease);
}
@keyframes signin-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}

.signin-card h2 { margin-bottom: 6px; }
.signin-card .lede { margin-bottom: var(--s5); }
.signin-close { position: absolute; top: 10px; right: 10px; }

.signin-google { justify-content: center; gap: 10px; margin-top: var(--s2); white-space: nowrap; }
.signin-card .lede { max-width: 30ch; margin-inline: auto; }
.signin-google .gmark { background: #fff; border-radius: 4px; padding: 2px; box-sizing: content-box; }

.signin-msg {
  margin-top: var(--s4);
  font-size: var(--t-sm);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.6);
  color: var(--ink-700);
}
.signin-msg[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn-line); color: #7a4a03; }
.signin-msg[data-tone="ok"]   { background: var(--ok-soft);   border-color: var(--ok-line);   color: #0a6a48; }

.signin-guest { margin-top: var(--s4); color: var(--ink-600); }

/* ---- The account screen ------------------------------------------- */

.account-view { max-width: 680px; }
.account-card { border-radius: var(--r-lg, 26px); }

.account-head {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s5);
}
.account-id h1 { margin: 0 0 2px; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.account-id p { margin: 0; word-break: break-word; }

.account-facts {
  display: grid; gap: 2px;
  margin: 0 0 var(--s5);
  border-radius: var(--r-md, 18px);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.34);
}
.account-facts > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 14px clamp(14px, 3vw, 20px);
  background: rgba(255,255,255,.46);
}
.account-facts dt {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-600);
  letter-spacing: .01em;
}
.account-facts dd {
  margin: 0; text-align: right; color: var(--ink-800, #26224a);
  font-size: var(--t-sm); max-width: 60%;
}

.account-actions { margin-bottom: var(--s4); }

.account-note {
  margin: 0 0 var(--s4);
  font-size: var(--t-sm);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.6);
  color: var(--ink-700);
}
.account-note[data-tone="ok"]   { background: var(--ok-soft);   border-color: var(--ok-line);   color: #0a6a48; }
.account-note[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn-line); color: #7a4a03; }

@media (max-width: 520px) {
  .acct-chip-name { display: none; }
  .acct-chip { padding: 0 6px; }
  .account-head { flex-direction: column; text-align: center; }
  .account-facts > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .account-facts dd { text-align: left; max-width: 100%; }
  .account-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-overlay, .signin-card { animation: none; }
  .acct-chip { transition: none; }
}