/* Billionaires Digest accounts: the sign-up / log-in dialog, the post-sign-in notice (assets/v2/auth.js) and the
   account page (account.html). Uses the v2 tokens (assets/v2/tokens.css); light and dark both follow them.
   The dialog is a centered card from 601px and a bottom sheet on phones. */

html.au-lock, html.au-lock body { overflow: hidden; }

.au {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: var(--s1);
  background: rgba(11, 11, 12, .56);
  animation: au-fade var(--t-base) var(--ease) both;
}
.au__panel {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 24px 28px 26px; border-radius: 16px;
  background: var(--card); color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .12);
  animation: au-rise 260ms cubic-bezier(.16, 1, .3, 1) both;
  overscroll-behavior: contain;
}
.au__panel:focus { outline: none; }
@keyframes au-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes au-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.au__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1); }
.au__title {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 34px; line-height: .95;
  text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; padding-top: 6px;
}
.au__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -10px 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.au__close:hover { background: var(--nav-hover); color: var(--text); }
.au__desc { margin: 8px 0 20px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.45; max-width: 40ch; }

/* Continue with Google: a plain, high-contrast button (no logos on this site) */
.au-google {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 8px 20px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--text);
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.au-google:hover { border-color: var(--text); background: var(--surface-2); }
.au-google[disabled] { cursor: progress; color: var(--text-muted); }
/* The Billionaire Brief opt-in (create account only; shown while config/launch.json "briefSignup" is true) */
.au-optin {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--tap); margin: -8px 0 12px; padding: 10px 0; cursor: pointer;
}
.au-optin__box {
  flex: none; appearance: none; -webkit-appearance: none; margin: 1px 0 0;
  width: 22px; height: 22px; border: 2px solid var(--line-2); border-radius: 6px;
  background: var(--card) no-repeat center / 14px 14px; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.au-optin:hover .au-optin__box { border-color: var(--text); }
.au-optin__box:checked {
  background-color: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.au-optin__box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.au-optin__text { font-size: var(--fs-md); line-height: 1.4; color: var(--text); }
.au__desc--brief { margin-top: -10px; color: var(--text); font-weight: 600; }
@media (forced-colors: active) { .au-optin__box { appearance: auto; -webkit-appearance: auto; } }
@media (prefers-reduced-motion: reduce) { .au-optin__box { transition: none; } }

.au-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
}
.au-or::before, .au-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

/* form */
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-field { display: flex; flex-direction: column; gap: 6px; }
.au-field__label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.au-field__row { position: relative; display: flex; }
.au-input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--card); color: var(--text); caret-color: var(--brand);
  border: 1px solid var(--line-2); border-radius: 10px; font-size: 16px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.au-input:hover { border-color: var(--text); }
.au-input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.au-input[aria-invalid="true"] { border-color: var(--negative); }
.au-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--negative) 25%, transparent); }
.au-field__row .au-input[type="password"], .au-field__row .au-input[name="password"] { padding-right: 76px; }
.au-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-width: 60px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--link); font-weight: 700; font-size: 14px; cursor: pointer;
}
.au-eye:hover { background: var(--nav-hover); }
.au-eye:focus-visible { outline-offset: -2px; }
.au-field__hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.au-field__err { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--negative); }
.au-forgot { margin: -6px 0 0; text-align: right; }
.au-captcha:empty { display: none; }
.au-submit { min-height: 50px; font-size: 16px; margin-top: 4px; }
.au-submit[aria-busy="true"] { cursor: progress; }

.au-msg { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: var(--fs-md); line-height: 1.4; }
.au-msg p { margin: 0; }
.au-msg .au-link { margin-top: 6px; }
.au-msg--bad { background: var(--brand-tint); color: var(--text); }
.au-msg--bad p { font-weight: 600; }
.au-msg--ok { background: var(--positive-tint); color: var(--text); }
.au-form + .au-msg, .au-google + .au-msg { margin-top: 16px; }

.au-link {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.au-link:hover { text-decoration-thickness: 2px; }
.au__switch { margin: 20px 0 0; text-align: center; color: var(--text-muted); font-size: var(--fs-md); }
.au__fine { margin: 14px 0 0; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.au__fine a { color: inherit; font-weight: 600; text-underline-offset: 2px; }
.au-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

@media (max-width: 600px) {
  .au { align-items: flex-end; padding: 0; }
  .au__panel {
    width: 100%; max-height: calc(100dvh - 24px); border-radius: 16px 16px 0 0;
    padding: 18px var(--s1) calc(22px + env(safe-area-inset-bottom));
    animation-name: au-sheet;
  }
  .au__title { font-size: 30px; }
  @keyframes au-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* after a sign-in: a card at the bottom of the screen (above the phone tab bar) */
.au-notice {
  position: fixed; left: 50%; bottom: var(--s3); z-index: 85; transform: translateX(-50%);
  width: min(520px, calc(100% - 32px)); padding: 16px 16px 12px 18px; border-radius: 14px;
  background: var(--card); color: var(--text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .1);
  animation: au-notice 260ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes au-notice { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.au-notice__body p { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.4; }
.au-notice__body p:first-child { font-weight: 700; }
.au-notice__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.au-notice__acts p { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.au-notice__bad { color: var(--negative); }
.au-notice__close {
  margin-left: auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer;
}
.au-notice__close:hover { background: var(--nav-hover); color: var(--text); }
@media (max-width: 767px) { .au-notice { bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 12px); } }

/* ---------- account page (account.html) ---------- */
.ac { max-width: 720px; }
.ac-head { margin: var(--s1) 0 var(--s2); }
.ac-head h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 52px; line-height: .95; text-transform: uppercase; }
.ac-head p { margin: 10px 0 0; color: var(--text-muted); font-size: var(--fs-lg); max-width: 52ch; }
.ac-id { display: flex; align-items: center; gap: 16px; margin-bottom: var(--s2); }
.ac-id__av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink-2); color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .02em;
}
:root[data-theme="dark"] .ac-id__av { background: #F1F2F4; color: #16181B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ac-id__av { background: #F1F2F4; color: #16181B; } }
.ac-id__name { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ac-id__mail { display: block; color: var(--text-muted); overflow-wrap: anywhere; }

.ac-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.ac-sec:last-child { padding-bottom: 8px; }
.ac-sec h2 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 6px; }
.ac-sec > p { margin: 0 0 12px; color: var(--text-muted); max-width: 60ch; }
.ac-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.ac-dl dt { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; padding-top: 2px; }
.ac-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ac-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ac-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.ac-form .au-field__row { max-width: 420px; }
.ac-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ac-ok { margin: 10px 0 0; font-weight: 600; color: var(--positive); }
.ac-bad { margin: 10px 0 0; font-weight: 600; color: var(--negative); }
.ac-danger h2 { color: var(--brand-ink); }
.ac-confirm { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--brand-tint); }
.ac-confirm p { margin: 0 0 12px; font-weight: 600; }
.ac-pending { padding: 14px 16px; border-radius: 12px; background: var(--warning-tint); color: var(--text); font-weight: 600; }
/* The Billionaire Brief on/off switch (account page; shown while config/launch.json "briefSignup" is true) */
.ac-switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 0 0 0 -4px; padding: 0 10px 0 4px;
  border: 0; border-radius: 999px; background: none; color: var(--text);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md); line-height: 1.2; text-align: left; cursor: pointer;
}
.ac-switch:hover .ac-switch__track { border-color: var(--text); }
.ac-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ac-switch[aria-busy="true"] { cursor: progress; }
.ac-switch[aria-busy="true"] .ac-switch__track { opacity: .6; }
.ac-switch__track {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: 2px solid var(--line-2); background: var(--card);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.ac-switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--line-2);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.ac-switch[aria-checked="true"] .ac-switch__track { background: var(--brand); border-color: var(--brand); }
.ac-switch[aria-checked="true"] .ac-switch__knob { background: #FFFFFF; transform: translateX(22px); }
.ac-brief .ac-brief__status { margin: 8px 0 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ac-brief > .ac-bad { margin: 6px 0 0; color: var(--negative); }
@media (prefers-reduced-motion: reduce) {
  .ac-switch__track, .ac-switch__knob { transition: none; }
}
@media (forced-colors: active) {
  .ac-switch__track { border-color: ButtonText; }
  .ac-switch__knob { background: ButtonText; }
  .ac-switch[aria-checked="true"] .ac-switch__track { background: Highlight; border-color: Highlight; }
  .ac-switch[aria-checked="true"] .ac-switch__knob { background: HighlightText; }
}
.ac-card { padding: 22px 24px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.ac-card p { color: var(--text-muted); max-width: 56ch; }
.ac-card p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .ac-head h1 { font-size: 38px; }
  .ac-dl { grid-template-columns: 1fr; gap: 2px; }
  .ac-dl dd { margin-bottom: 10px; }
  .ac-card { padding: 18px var(--s1); }
}