/* Account sign-in: GitHub / Google buttons, the "finishing sign-in" state,
 * and the Sign-in methods card in the panel (2026-10-05). Built on the
 * design system's tokens (all.css); account pages only. */

.auth-providers { display: grid; gap: 0.6rem; }

.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.78rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card-2);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-provider:hover {
  color: var(--text);
  background: #121c31;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 24px rgba(0, 229, 255, 0.10);
}
.btn-provider:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-provider::before {
  content: '';
  width: 20px;
  height: 20px;
  flex: none;
  background: center / contain no-repeat;
}
/* The marks are CSS so each button's label is plain text: one clean string
   for the translators, no inline markup to lose. */
.btn-provider[data-provider="github"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e8edf5' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E"); }
.btn-provider[data-provider="google"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); }
.btn-provider.is-busy { opacity: 0.65; pointer-events: none; }

/* The provider this browser used last time. */
.btn-provider .last-used {
  margin-left: 0.15rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
@media (max-width: 420px) { .btn-provider .last-used { display: none; } }


.auth-providers-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

/* Back from GitHub / Google: the card shows this instead of the form. */
.auth-oauth-state { text-align: center; }
.auth-oauth-state .spinner {
  width: 28px;
  height: 28px;
  margin: 0.25rem auto 1rem;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  border-top-color: var(--cyan);
  animation: authSpin 0.8s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-oauth-state .spinner { animation: none; } }
.auth-oauth-state form { text-align: left; margin-top: 1rem; }

.auth-notice {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Panel: Sign-in methods card. */
.signin-methods { display: grid; gap: 0; }
.signin-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}
.signin-row:first-child { border-top: none; padding-top: 0.2rem; }
.signin-row .mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
}
.signin-row .mark svg { width: 18px; height: 18px; }
.signin-row .what { flex: 1; min-width: 0; }
.signin-row .what strong { display: block; font-size: 0.95rem; }
.signin-row .what > span {
  display: block;
  font-size: 0.84rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.signin-row .what .on { color: var(--green); }
.signin-row .btn { font-size: 0.82rem; padding: 0.38rem 0.9rem; flex: none; }
.signin-setpw { margin: 0.4rem 0 0.6rem 50px; max-width: 340px; }

/* Panel cards hold inputs (2026-10-05, found by the brain session): the
   design system's .card is overflow:hidden with its glow pseudo-elements
   40px past the edges, so the card is scrollable sideways and focusing an
   input scrolled it, clipping the left edge ("ur memory's address").
   overflow:clip clips the glow the same way but cannot be scrolled. */
.acct-panel .card { overflow: clip; }

/* .form-input (2026-10-05): the panel's data cards — delete account, leaked
   secret, export, delete project, restore — used class="form-input", which
   the design system never defined (it styles inputs only inside .form-group),
   so they rendered as raw browser inputs. Same look as .form-group fields. */
.acct-panel .form-input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.acct-panel .form-input:focus {
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08);
}

/* A confirm row: the typed confirmation, the password, the code and the
   button on one line, wrapping on a phone. */
.confirm-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.confirm-row .form-input { flex: 1 1 180px; width: auto; }
.confirm-row .btn { flex: none; }

/* The danger card: same card, a red edge, nothing else loud. */
.acct-panel .card.danger { border-color: rgba(239, 68, 68, 0.35); }
.btn-danger { background: transparent; color: #ff6b6b; border: 1px solid rgba(239, 68, 68, 0.55); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.1); color: #ff8080; }

/* Task ledger: one switch, then only the exceptions. */
.ledger-switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 600; }
.ledger-switch input { width: auto; }
.ledger-off-list { display: grid; gap: 0.35rem; margin: 0.5rem 0 0; }
.ledger-off-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ledger-off-row .btn { font-size: 0.78rem; padding: 0.25rem 0.75rem; }