/* Account page (/account), in the site's "Broadcast" look: builds on broadcast.css (tokens, site header and mode
   menu, section headers, panels, buttons, toast, footer, the age question) and adds the page's own parts: the
   sign-in buttons, and the signed-in account (name, sign-ins, saves, sign out, delete). One centered column on
   every screen size; the page scrolls like a document (the builder's fit-the-window layout isn't used here). */

/* a short page keeps the footer at the bottom of the window */
.acct-page { display: flex; flex-direction: column; }
.acct-page .app { flex: 1 0 auto; }
.acct-main { grid-area: main; min-width: 0; padding: 0 var(--gutter) 8px; }
.acct-main > * { width: 100%; max-width: 560px; margin-inline: auto; }
.acct-view:not([hidden]) { display: flex; flex-direction: column; }
.acct-loading { margin-top: 60px; margin-bottom: 60px; text-align: center; color: var(--muted); }
.acct-back {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 44px;
  margin-top: 6px;
  margin-bottom: -6px;
  font-family: var(--rc);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.acct-back:hover { color: var(--text); }
.acct-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acct-h1 {
  margin: 22px 0 0;
  font-family: var(--rc);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.acct-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--nav); text-wrap: pretty; }
.acct-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.acct-hint.bad { color: var(--red-light); }
.acct-msg { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--red-light); }
.acct-msg:empty { display: none; }
.acct-msg.ok { color: var(--win); }
.acct-fine { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--subtle); }
.acct-fine a, .acct-points a { color: var(--text); font-weight: 600; }
.acct-cta { align-self: flex-start; margin-top: 18px; padding: 0 20px; }

/* ---------- Signing in: one button per sign-in this site has keys for (the providers' own colors) ---------- */
.acct-providers { display: grid; gap: 10px; margin-top: 22px; }
.acct-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.acct-provider:active { transform: translateY(1px); }
.acct-provider svg { width: 22px; height: 22px; flex: none; }
.acct-provider.google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.acct-provider.google:hover { background: #f1f3f4; }
.acct-provider.discord { background: #5865f2; color: #fff; }
.acct-provider.discord:hover { background: #4752c4; }
.acct-provider.x { background: #000; border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.acct-provider.x:hover { background: #16181c; border-color: rgba(255, 255, 255, 0.5); }
.acct-points { margin: 22px 0 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.acct-points li + li { margin-top: 6px; }

/* ---------- The age question ---------- */
.acct-box { margin-top: 20px; padding: 16px; }
.acct-age-out { align-self: flex-start; margin-top: 16px; }

/* ---------- Signed in ---------- */
.acct-who { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.acct-who .acct-h1 { margin: 0; }
.acct-who-text { min-width: 0; }
.acct-pic {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--tag-border);
  border-radius: 50%;
  background: var(--hover);
  font-family: var(--rc);
  font-size: 26px;
  font-weight: 800;
  color: var(--muted);
}
.acct-pic img { width: 100%; height: 100%; object-fit: cover; }
.acct-sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.acct-rename { display: flex; gap: 8px; }
.acct-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  background: var(--tag);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px; /* iPhones zoom in on anything smaller */
  font-weight: 500;
}
.acct-input:focus { outline: none; border-color: var(--gold); }
.acct-rename .btn { flex: none; padding: 0 18px; }

.acct-links { margin: 0; padding: 0; list-style: none; }
.acct-links li { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 10px 8px 12px; }
.acct-links li + li { border-top: 1px solid var(--line); }
.lk-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; }
.lk-icon svg { width: 20px; height: 20px; }
.lk-icon.google { background: #fff; }
.lk-icon.discord { background: #5865f2; color: #fff; }
.lk-icon.x { background: #000; border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; }
.lk-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.lk-text b { font-size: 15px; font-weight: 700; }
.lk-text small { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.lk-text small.on { color: var(--win); }
.acct-links .btn { flex: none; height: 38px; padding: 0 14px; font-size: 14px; }

.acct-saves { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.acct-saves .acct-hint { margin: 0; }
.acct-saves .btn { align-self: flex-start; padding: 0 16px; }
.acct-sync { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; }
.acct-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--subtle); }
.acct-dot.ok { background: var(--win); }
.acct-dot.busy { background: var(--gold); }
.acct-dot.bad { background: var(--red); }

.acct-row { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-row .btn { flex: 1 1 180px; }
.acct-delete { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-color: rgba(248, 113, 113, 0.35); }
.acct-delete p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.acct-confirm { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.acct-confirm b { color: var(--text); }
.acct-confirm .acct-input { flex: none; } /* in a column, flex: 1 would squash it */
.acct-delete .btn { align-self: flex-start; padding: 0 18px; }
.acct-main > .acct-view:last-child { padding-bottom: 12px; }

/* ---------- Wide screens: the page scrolls like a document, under the site header ---------- */
@media (min-width: 1000px) and (min-height: 560px) {
  .acct-page .app { height: auto; }
  .acct-main { padding: 12px 28px 28px; }
  .acct-h1 { font-size: 36px; }
}