/* ============================================================
   Welcome / Sign-in Landing Overlay
   Extracted from main.css to reduce override churn.
   ============================================================ */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(148, 163, 184, 0.13), transparent),
    radial-gradient(ellipse 55% 48% at 88% 12%, rgba(100, 116, 139, 0.10), transparent),
    radial-gradient(ellipse 65% 50% at 78% 85%, rgba(71, 85, 105, 0.09), transparent),
    radial-gradient(ellipse 50% 42% at 20% 88%, rgba(148, 163, 184, 0.07), transparent),
    var(--bg);
  display: flex;
  /* flex-start + margin:auto on .welcome-card (NOT align-items:center):
     centered alignment makes overflow unreachable on short screens — the
     card's top AND bottom get clipped and no scroll position can show
     them (observed on iPhone SE). margin:auto centers when the card fits
     and degrades to normal scroll flow when it doesn't. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* --safe-bottom-inset honors Android nav bar via layout-sync. --safe-top-inset
     similarly carries Android status-bar height (env() is 0 there). */
  padding: max(24px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 24px)) 24px max(24px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 24px));
  opacity: 1;
  transition: opacity 0.25s ease;
}
.welcome-overlay[hidden] {
  display: none;
}

/* Ensure [hidden] is respected inside the overlay even when display is set by other rules */
.welcome-overlay [hidden] {
  display: none !important;
}

/* Cold-open account-restore indicator. The early head script adds
   html.gg-restoring when a returning SSO account opens without a join link;
   that swaps the anon/home cards for a "Restoring…" spinner so the user isn't
   staring at the welcome screen while auth restores. Cleared once auth
   resolves (showSignedInHome / the guest branch) or by an 8s failsafe. */
/* Hidden by default via the ID (specificity 1,0,0) so it beats the generic
   .welcome-card display and only appears under html.gg-restoring. */
#welcomeRestoringPanel {
  display: none;
}
.welcome-card--restoring {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
html.gg-restoring #welcomeAnonPanel,
html.gg-restoring #welcomeHomePanel {
  display: none;
}
html.gg-restoring #welcomeRestoringPanel {
  display: flex;
}
.welcome-restoring-text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  min-height: 1.4em;
}

/* Boot panel brand lockup — same brand as the anon panel but tightened
   so it sits comfortably above the progress UI without dominating. */
.welcome-brand-lockup--boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.welcome-brand-lockup--boot .welcome-brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.welcome-brand-lockup--boot .welcome-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Boot status block: phase text + progress bar. Sits below the brand,
   updates as the boot phases advance (auth → rounds → ready). */
.welcome-boot-status {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 260px;
}
.welcome-boot-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 60%, transparent);
  overflow: hidden;
}
.welcome-boot-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, #1f9d55 80%, #ffffff 20%), #1f9d55);
  border-radius: inherit;
  transition: width 280ms ease-out;
}
/* Indeterminate sweep while percent is 0 (or unset) — gives feedback
   even before any phase reports concrete progress. The fill is given a
   thin glowing band that sweeps; once width > 0 the static fill takes
   over and the sweep is hidden by overflow. */
.welcome-boot-progress[aria-valuenow="0"] .welcome-boot-progress-fill::after,
.welcome-boot-progress:not([aria-valuenow]) .welcome-boot-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #1f9d55, transparent);
  animation: gg-boot-sweep 1.4s ease-in-out infinite;
}
.welcome-boot-progress[aria-valuenow="0"] .welcome-boot-progress-fill,
.welcome-boot-progress:not([aria-valuenow]) .welcome-boot-progress-fill {
  width: 100%;
  background: transparent;
}
@keyframes gg-boot-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.welcome-overlay.is-dismissing {
  opacity: 0;
  pointer-events: none;
}

.welcome-card {
  max-width: 360px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Vertical centering lives here (paired with the overlay's
     align-items: flex-start) so tall content scrolls instead of clipping. */
  margin: auto;
}

.welcome-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.welcome-brand-logo {
  width: min(112px, 32vw);
  height: min(112px, 32vw);
  min-width: 84px;
  min-height: 84px;
  border-radius: 26px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.welcome-home-brand-logo {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.welcome-home-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-width: 0;
}

.welcome-home-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.welcome-home-brand-name {
  font-size: var(--text-lg, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
}

.welcome-home-brand-tag {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, #888);
  line-height: 1.35;
  min-width: 0;
}

.welcome-title {
  margin: 0;
  font-size: calc(var(--text-2xl) + 4px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-subtitle {
  margin: 0;
  color: var(--text-muted, #888);
  font-size: var(--text-md);
  line-height: 1.4;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.welcome-btn {
  width: 100%;
  padding: 13px 16px;
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  cursor: pointer;
}

.google-signin-btn,
.apple-signin-btn {
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}

.google-signin-btn:hover,
.google-signin-btn:focus-visible,
.apple-signin-btn:hover,
.apple-signin-btn:focus-visible {
  background: #f8f9fa;
  border-color: #c6c6c6;
}

.google-signin-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.google-signin-btn__label,
.apple-signin-btn__label {
  letter-spacing: 0.01em;
}

:root:not([data-theme="light"]) .google-signin-btn {
  color: #ffffff;
}

.welcome-btn.google-signin-btn,
.welcome-btn.apple-signin-btn {
  width: 100%;
}

/* Phone sign-in preview — intentionally hidden until ?phoneAuth=1. */
.phone-signin-btn {
  background: linear-gradient(180deg, #2b8bd9, #176dc6);
  color: #ffffff;
  border: 1px solid #65b4f0;
  box-shadow: 0 4px 12px rgba(23, 109, 198, 0.22);
}

.phone-signin-btn:hover,
.phone-signin-btn:focus-visible {
  background: linear-gradient(180deg, #3899e5, #1b78d3);
  border-color: #8acbfa;
}

.phone-signin-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
}

.welcome-card--phone {
  max-width: 460px;
  align-items: stretch;
  text-align: left;
  gap: 18px;
  padding-bottom: 8px;
}

/* Keep the phone flow's supporting copy readable on the light sign-in card. */
:root[data-theme="light"] .welcome-card--phone {
  --text-muted: #3f5365;
}

.welcome-phone-topbar,
.welcome-phone-heading,
.phone-auth-code-intro,
.phone-auth-secondary-actions {
  display: flex;
  align-items: center;
}

.welcome-phone-topbar {
  justify-content: space-between;
  gap: 12px;
}

.welcome-phone-back,
.phone-auth-link-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted, #8aa0b1);
  padding: 4px 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.welcome-phone-back:hover,
.welcome-phone-back:focus-visible,
.phone-auth-link-btn:hover,
.phone-auth-link-btn:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.welcome-phone-preview-pill {
  border: 1px solid color-mix(in srgb, #4a9eff 45%, var(--line));
  border-radius: 999px;
  color: #5caeff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 9px;
  text-transform: uppercase;
}

.welcome-phone-heading {
  align-items: flex-start;
  gap: 13px;
}

.welcome-phone-icon,
.phone-auth-code-icon,
.phone-auth-success-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #2b8bd9, #176dc6);
  box-shadow: 0 7px 18px rgba(23, 109, 198, 0.2);
}

.welcome-phone-icon {
  width: 48px;
  height: 48px;
}

.welcome-phone-title,
.phone-auth-code-intro h3,
.phone-auth-success-view h3 {
  margin: 0;
  font-size: calc(var(--text-xl) + 1px);
  line-height: 1.2;
}

.welcome-phone-subtitle,
.phone-auth-code-intro p,
.phone-auth-success-lead {
  margin: 5px 0 0;
  color: var(--text-muted, #8aa0b1);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.phone-auth-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--text-muted, #8aa0b1);
}

.phone-auth-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.phone-auth-step span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 50%;
  font-size: 11px;
}

.phone-auth-step.is-active,
.phone-auth-step.is-complete {
  color: #5caeff;
}

.phone-auth-step.is-active span,
.phone-auth-step.is-complete span {
  border-color: #4a9eff;
  background: #4a9eff;
  color: #ffffff;
}

.phone-auth-step.is-complete span::before {
  content: "✓";
}

.phone-auth-step.is-complete span {
  font-size: 0;
}

.phone-auth-step-line {
  height: 1px;
  flex: 1 1 auto;
  margin: 0 9px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}

.phone-auth-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phone-auth-preview-note,
.phone-auth-success-note {
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, #4a9eff 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, #4a9eff 9%, var(--panel));
  color: var(--text-muted, #8aa0b1);
  font-size: 12px;
  line-height: 1.5;
}

.phone-auth-preview-note strong,
.phone-auth-success-note strong {
  color: var(--ink);
}

.phone-auth-preview-note code {
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, #4a9eff 16%, var(--panel));
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: .08em;
}

.phone-auth-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 10px;
}

.phone-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phone-auth-field label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.phone-auth-field input,
.phone-auth-field select {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
}

.phone-auth-field input:focus,
.phone-auth-field select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #4a9eff 20%, transparent);
}

.phone-auth-field-hint {
  margin: -7px 0 0;
  color: var(--text-muted, #8aa0b1);
  font-size: 11px;
  line-height: 1.4;
}

.phone-auth-consent {
  display: block;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  color: var(--text-muted, #8aa0b1);
  font-size: 12px;
  line-height: 1.55;
}

.phone-auth-consent a {
  color: #5caeff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.phone-auth-consent strong {
  color: var(--ink);
}

.phone-auth-consent-auth {
  display: block;
  margin: 9px 0;
  padding: 8px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, #4a9eff 8%, transparent);
  font-style: italic;
}

.phone-auth-primary-btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid #65b4f0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b8bd9, #176dc6);
  color: #ffffff;
  font-size: var(--text-md);
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(23, 109, 198, 0.2);
}

.phone-auth-primary-btn:hover:not(:disabled),
.phone-auth-primary-btn:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, #3899e5, #1b78d3);
}

.phone-auth-primary-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.phone-auth-error {
  margin: -3px 0 0;
  color: #ef7d8b;
  font-size: 12px;
  line-height: 1.45;
}

.phone-auth-code-intro {
  align-items: flex-start;
  gap: 12px;
}

.phone-auth-code-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
}

.phone-auth-carrier-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, #2ecf9f 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, #2ecf9f 8%, var(--panel));
  color: var(--text-muted, #8aa0b1);
  font-size: 12px;
  line-height: 1.45;
}

.phone-auth-carrier-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2ecf9f;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.phone-auth-carrier-card strong {
  color: var(--ink);
}

.phone-auth-carrier-card p {
  margin: 3px 0 0;
}

.phone-auth-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-auth-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 9px;
  color: var(--text-muted, #8aa0b1);
  font-size: 12px;
  line-height: 1.35;
}

.phone-auth-check-list li.is-current,
.phone-auth-check-list li.is-running {
  border-color: color-mix(in srgb, #4a9eff 44%, var(--line));
  background: color-mix(in srgb, #4a9eff 7%, transparent);
}

.phone-auth-check-list li.is-complete {
  border-color: color-mix(in srgb, #2ecf9f 40%, var(--line));
  background: color-mix(in srgb, #2ecf9f 7%, transparent);
}

.phone-auth-check-list li.is-error {
  border-color: color-mix(in srgb, #ef7d8b 50%, var(--line));
  background: color-mix(in srgb, #ef7d8b 7%, transparent);
}

.phone-auth-check-mark {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 50%;
  color: var(--text-muted, #8aa0b1);
  font-size: 11px;
  font-weight: 700;
}

.phone-auth-check-list li.is-running .phone-auth-check-mark {
  border-color: #4a9eff;
  color: #4a9eff;
  animation: phone-auth-pulse 1s ease-in-out infinite;
}

.phone-auth-check-list li.is-complete .phone-auth-check-mark {
  border-color: #2ecf9f;
  background: #2ecf9f;
  color: #ffffff;
}

.phone-auth-check-list li.is-error .phone-auth-check-mark {
  border-color: #ef7d8b;
  background: #ef7d8b;
  color: #ffffff;
}

.phone-auth-check-list li strong,
.phone-auth-check-list li small {
  display: block;
}

.phone-auth-check-list li strong {
  color: var(--ink);
}

.phone-auth-check-list li small {
  margin-top: 2px;
  color: var(--text-muted, #8aa0b1);
}

@keyframes phone-auth-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #4a9eff 26%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, #4a9eff 16%, transparent); }
}

.phone-auth-code-field input {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .28em;
  padding-left: 18px;
}

.phone-auth-secondary-actions {
  justify-content: space-between;
  gap: 12px;
}

.phone-auth-resend-status {
  min-height: 1.35em;
  margin: -7px 0 0;
  color: var(--text-muted, #8aa0b1);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.phone-auth-success-view {
  align-items: center;
  padding: 12px 0 4px;
  text-align: center;
}

.phone-auth-success-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2ecf9f, #159a82);
  font-size: 34px;
  box-shadow: 0 10px 24px rgba(21, 154, 130, 0.24);
}

.phone-auth-success-lead {
  max-width: 340px;
  margin-top: -4px;
  font-size: var(--text-md);
}

.phone-auth-success-note {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

@media (max-width: 420px) {
  .phone-auth-field-row {
    grid-template-columns: 1fr;
  }

  .phone-auth-country-field {
    max-width: 220px;
  }

  .phone-auth-step b {
    display: none;
  }
}
/* Hide ALL Apple Sign-In affordances when running inside the Android
   native shell. Driven by the .is-android-native class on <html>, set
   by an inline <head> script that runs before first paint — so users
   never see the button flash in and out. */
.is-android-native .apple-signin-btn,
.is-android-native #welcomeAppleSignInBtn {
  display: none;
}

/* Apple Sign-In — styled as filled-white (matching Google) so the two
   primary SSO buttons read as a sibling pair. Apple's brand guidelines
   permit this layout as long as the Apple logo + label are dark on
   light backgrounds. The icon container is a black square containing
   the white apple glyph — the same visual treatment Apple uses on
   white-background sign-in buttons in its own apps. */
.apple-signin-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffffff;
}

/* Dark-theme variant: Apple button keeps a darker fill so it sits well
   on the dark welcome card, but still mirrors the Google button's
   treatment in this theme (which is also a dark panel). */
:root:not([data-theme="light"]) .apple-signin-btn {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #2a2a2a;
}

:root:not([data-theme="light"]) .apple-signin-btn:hover,
:root:not([data-theme="light"]) .apple-signin-btn:focus-visible {
  background: #242424;
  border-color: #3a3a3a;
}

.account-auth-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.account-auth-btn:hover,
.account-auth-btn:focus-visible {
  border-color: var(--accent, #4a9eff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4a9eff) 20%, transparent);
}

.account-auth-btn.is-signed-in {
  border-color: color-mix(in srgb, var(--accent, #4a9eff) 35%, var(--line));
  background: color-mix(in srgb, var(--accent, #4a9eff) 8%, var(--panel));
}

.account-auth-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.account-auth-btn__label {
  letter-spacing: 0.01em;
}

#cloudAuthStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.account-auth-status__icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.apple-signin-btn__icon img,
.account-auth-btn__icon img,
.account-auth-status__icon img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Continue as Guest — visually secondary so SSO buttons read as the
   primary path. Transparent fill, slightly de-emphasized text color, and
   a noticeably more visible border so the "outlined" treatment registers
   even against a light-tinted card. Same height as SSO buttons so the
   stack layout stays uniform. */
.welcome-btn-guest {
  background: transparent;
  color: var(--text-muted, #62788b);
  border: 1.5px solid color-mix(in srgb, var(--text-muted, #62788b) 35%, transparent);
  font-weight: 500;
  box-shadow: none;
}

.welcome-btn-guest:hover,
.welcome-btn-guest:focus-visible {
  background: color-mix(in srgb, var(--text-muted, #62788b) 8%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--text-muted, #62788b) 55%, transparent);
}

.welcome-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted, #888);
  line-height: 1.5;
}

.welcome-card--anon {
  min-height: min(82dvh, 620px);
}

/* Anonymous-user device-local round history (shown above the legal links).
   Rendered as a soft card so "your history" reads as its own surface,
   separate from the auth stack above it. The list scrolls inside the card;
   the label and the Start New Round button stay pinned. */
.welcome-anon-rounds-section[hidden] { display: none; }
.welcome-anon-rounds-section {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 30vh;
  overflow: hidden;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  text-align: left;
}
.welcome-anon-rounds-section .welcome-home-rounds-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.welcome-anon-rounds-section .welcome-home-rounds-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.welcome-anon-save-current {
  width: 100%;
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2384dc, #176dc6);
  border-color: #4a9eff;
  color: #ffffff;
}
.welcome-anon-save-current:hover {
  background: linear-gradient(180deg, #2f93eb, #1e7ad2);
}
#welcomeAnonRoundsEmpty {
  padding: 0;
  opacity: 0.75;
  line-height: 1.4;
}

.welcome-legal-links {
  width: 100%;
  display: flex;
  /* stretch (not center) so both buttons match the taller one when a label
     wraps to two lines — e.g. "Terms of Service" vs "Privacy Policy". */
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}

.welcome-legal-btn {
  flex: 1 1 0;
  max-width: 154px;
  min-height: 34px;
  padding: 7px 10px;
  /* Center the label so single- and double-line buttons look balanced once
     they share a height via the stretch above. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-xs, 12px);
  line-height: 1.25;
  font-weight: 600;
  border-radius: 9px;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted, #888);
}

.welcome-legal-btn:hover,
.welcome-legal-btn:focus-visible {
  background: var(--panel);
  color: var(--ink);
}

/* ============================================================
   Anon panel: rounds-first mode (opened from menu → "My Rounds").
   The overlay gets .welcome-overlay--rounds-first; the same panel
   reorders so the device-local rounds lead and the sign-in stack
   compacts to a footnote with a one-line pitch. Plain CSS classes
   (not [hidden]) drive the swaps so the markup stays identical.
   ============================================================ */

/* Header row with the back-to-scorecard close. Hidden outside rounds-first. */
.welcome-anon-panel-header {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.welcome-anon-panel-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-anon-close-btn {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: var(--text-md);
  font-weight: 600;
}

/* One-line sign-in pitch above the SSO buttons. Rounds-first only. */
.welcome-signin-note {
  display: none;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted, #888);
  line-height: 1.4;
}

.welcome-overlay--rounds-first .welcome-anon-panel-header { display: flex; }
.welcome-overlay--rounds-first .welcome-signin-note { display: block; }

.welcome-overlay--rounds-first .welcome-brand-lockup,
.welcome-overlay--rounds-first .welcome-hint,
.welcome-overlay--rounds-first #welcomeGuestBtn,
.welcome-overlay--rounds-first .welcome-legal-links {
  display: none;
}

/* Reorder: header (0) → rounds (1) → sign-in stack (2) → version (3). */
.welcome-overlay--rounds-first .welcome-anon-rounds-section {
  order: 1;
  margin-top: 0;
  max-height: 56vh;
}
.welcome-overlay--rounds-first .welcome-actions { order: 2; }
.welcome-overlay--rounds-first .welcome-card--anon { min-height: 0; }

/* Signed-in home panel */
.welcome-card--home {
  max-width: 440px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90dvh;
  /* Card itself does NOT scroll — only the rounds list does. The fixed
     header (brand, sign in/out, primary actions, default course button)
     stays in place while the rounds list scrolls below it. The desktop
     layout in the >=1024px media query already follows this pattern. */
  overflow: hidden;
  overscroll-behavior-x: none;
}

.welcome-home-top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.welcome-home-top-actions .welcome-home-brand {
  flex: 1 1 auto;
}

.welcome-home-top-actions .welcome-home-brand-name,
.welcome-home-top-actions .welcome-home-brand-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.welcome-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}

.welcome-home-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.welcome-home-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.welcome-home-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Neutral grey initials circle (was a blue→cyan gradient) so the account
     row has no blue accent. */
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.welcome-home-userinfo {
  min-width: 0;
}

.welcome-home-name {
  font-weight: 600;
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.welcome-home-email {
  font-size: var(--text-sm);
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign out — tertiary action. Same visual family as the Terms / Privacy
   links in the welcome screen footer: small outlined pill, muted text,
   transparent background, subtle border. Sized to fit inline next to the
   user info card without competing with the primary CTAs below. */
.welcome-home-signout {
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  padding: 7px 12px;
  min-height: 34px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-muted, #62788b) 35%, transparent);
  border-radius: 9px;
  color: var(--text-muted, #62788b);
  flex-shrink: 0;
  box-shadow: none;
}

.welcome-home-signout:hover,
.welcome-home-signout:focus-visible {
  background: color-mix(in srgb, var(--text-muted, #62788b) 8%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--text-muted, #62788b) 55%, transparent);
}

.welcome-home-new-round {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--text-md);
  font-weight: 600;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
}

.welcome-home-new-round:hover,
.welcome-home-new-round:focus-visible {
  filter: brightness(1.08);
}

/* Return to Scorecard — secondary action paired with the primary
   "Start New Round" above. Same outlined-transparent treatment as the
   anon screen's "Continue as Guest" so secondary actions across the two
   screens read as siblings. */
.welcome-home-return-btn {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-size: var(--text-md);
  font-weight: 500;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--text-muted, #62788b) 35%, transparent);
  background: transparent;
  color: var(--text-muted, #62788b);
  box-shadow: none;
}

.welcome-home-return-btn:hover,
.welcome-home-return-btn:focus-visible {
  border-color: color-mix(in srgb, var(--text-muted, #62788b) 55%, transparent);
  background: color-mix(in srgb, var(--text-muted, #62788b) 8%, transparent);
  color: var(--ink);
}

.welcome-home-primary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.welcome-home-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.welcome-home-quick-start {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.welcome-home-section-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.welcome-home-section-heading h2 {
  margin: 0;
  font-size: var(--text-lg, 18px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.welcome-home-section-heading p {
  margin: 0;
  color: var(--text-muted, #888);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.welcome-home-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.welcome-home-capability-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.welcome-home-capability-card:hover,
.welcome-home-capability-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #1f9d55) 55%, var(--line));
  background: color-mix(in srgb, var(--accent, #1f9d55) 7%, var(--panel));
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.welcome-home-capability-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--ok-bg, #d7f8e6);
  color: var(--accent, #1f9d55);
}

.welcome-home-capability-icon svg {
  width: 19px;
  height: 19px;
}

.welcome-home-capability-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.welcome-home-capability-copy strong {
  font-size: var(--text-md);
  line-height: 1.25;
}

.welcome-home-capability-cta {
  margin-top: auto;
  color: var(--accent, #1f9d55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.welcome-home-plan-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.welcome-home-plan-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--ok-bg, #d7f8e6);
  color: var(--accent, #1f9d55);
}

.welcome-home-plan-icon svg {
  width: 20px;
  height: 20px;
}

.welcome-home-plan-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.welcome-home-plan-label {
  color: var(--text-muted, #888);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.welcome-home-plan-copy strong {
  font-size: var(--text-lg, 18px);
  line-height: 1.2;
}

.welcome-home-plan-description {
  color: var(--text-muted, #888);
  font-size: var(--text-sm);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.welcome-home-manage-plan-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--ink));
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}

.welcome-home-manage-plan-btn:hover,
.welcome-home-manage-plan-btn:focus-visible {
  border-color: var(--accent, #1f9d55);
  background: color-mix(in srgb, var(--accent, #1f9d55) 8%, transparent);
  color: var(--ink);
}

.welcome-home-rounds-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;        /* lets the wrap shrink inside the flex card */
  flex: 1 1 auto;       /* claim the remaining vertical space */
  overflow: hidden;     /* contain the scrollable child */
}

.welcome-home-rounds-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;     /* THIS is the scrollable region */
  width: 100%;
}

/* Default Course row — reads as a setting/preference, not a round card */
.welcome-home-default-course-btn {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-sizing: border-box;
  text-align: left;
  min-width: 0;
  flex-wrap: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.welcome-home-default-course-btn::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74, 158, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

.welcome-home-default-course-btn:hover,
.welcome-home-default-course-btn:focus-visible {
  border-color: rgba(74, 158, 255, 0.85);
  background: rgba(74, 158, 255, 0.05);
}

.welcome-home-default-course-btn__title {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #888);
}

.welcome-home-default-course-btn__value {
  flex: 1 1 100px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.welcome-home-default-course-btn__cta {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #2563eb);
  margin-left: auto;
}

/* Narrow widths: title + value + CTA can't all fit on one line at the
   large font-size scale (~19px for --text-xs). Stack the title above the
   value, keep CTA on the right of the value row — keeps the pill compact
   without clipping any of the three labels off-screen. */
@media (max-width: 380px) {
  .welcome-home-default-course-btn {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .welcome-home-default-course-btn__title {
    order: 1;
    flex: 1 1 100%;
    padding-left: 18px;
  }

  .welcome-home-default-course-btn::before {
    order: 2;
  }

  .welcome-home-default-course-btn__value {
    order: 3;
    flex: 1 1 auto;
  }

  .welcome-home-default-course-btn__cta {
    order: 4;
    align-self: center;
  }
}

.welcome-home-rounds-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.welcome-home-rounds-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  opacity: 0.7;
}

.welcome-home-rounds-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-x: hidden;
  width: 100%;
}

.welcome-home-rounds-empty,
.welcome-home-rounds-loading {
  font-size: var(--text-sm);
  color: var(--text-muted, #888);
  padding: 16px 0;
  text-align: center;
}

.home-round-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  /* DO NOT add overflow:hidden here — flex items with overflow:hidden get
     min-height:0 (instead of content-based auto), so a wrapped 2-line round
     name collapses to 1 line and the second line is clipped. The horizontal
     overflow is already handled by .home-round-card__info below. */
  flex-shrink: 0;
  /* Skip layout + paint for cards scrolled out of view. Each card is
     a fully independent flex item; the engine can short-circuit
     work for off-screen ones. contain-intrinsic-size feeds the
     placeholder height when not measured yet so the scrollbar
     doesn't jitter; `auto` re-uses the actual measured height once
     it has been painted once. Big win on long rounds lists. */
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

.home-round-card:hover,
.home-round-card:focus-visible {
  background: var(--panel-alt);
  border-color: var(--accent, #1f9d55);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.home-round-card:active {
  transform: translateY(0);
}

.home-round-card__info {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.home-round-card__name {
  font-weight: 700;
  font-size: var(--text-md);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
  text-align: left;
}

.home-round-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-muted, #888);
  margin-top: 3px;
  line-height: 1.35;
  text-align: left;
  min-width: 0;
  overflow: visible;
}

.home-round-card__course,
.home-round-card__date {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}

.home-round-card__course {
  color: color-mix(in srgb, var(--ink) 65%, var(--text-muted, #888) 35%);
  font-weight: 500;
}

.home-round-card__dot {
  opacity: 0.5;
  flex: 0 0 auto;
}

.home-round-card__chevron {
  color: var(--text-muted, #888);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}

.home-round-card:hover .home-round-card__chevron,
.home-round-card:focus-visible .home-round-card__chevron {
  opacity: 1;
  transform: translateX(2px);
  color: var(--accent, #1f9d55);
}

/* ---- Round-card remove affordances ---- */
/* Content wrapper holds the previous flex layout (info + chevron); the card is
   now position:relative so the swipe Remove button can be revealed behind it. */
.home-round-card { position: relative; }
.home-round-card__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
/* Desktop: red "−" delete button (mirrors the player remove button). */
.home-round-card__delete {
  flex: 0 0 auto;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(220, 53, 69, 0.5);
  background: transparent;
  color: #ff6b6b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}
.home-round-card__delete:hover {
  background: rgba(220, 53, 69, 0.14);
  color: #ff8585;
}
:root[data-theme="light"] .home-round-card__delete { color: var(--danger-strong); }
:root[data-theme="light"] .home-round-card__delete:hover { background: rgba(220, 53, 69, 0.1); }

/* Hidden by default; each pointer type shows only its own affordance. */
.home-round-card__swipe-remove { display: none; }
@media (pointer: coarse) {
  /* Scoped here (not on the base rule) because overflow:hidden on the flex-item
     card would otherwise risk collapsing a wrapped 2-line name; flex-shrink:0
     on the card prevents that. */
  .home-round-card { overflow: hidden; }
  .home-round-card__delete { display: none; }
  .home-round-card__content {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .home-round-card.swipe-open .home-round-card__content { transform: translateX(-88px); }
  .home-round-card__swipe-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 88px;
    background: #ff3b30;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transform: translateX(calc(100% + 2px));
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    touch-action: manipulation;
  }
  .home-round-card.swipe-open .home-round-card__swipe-remove { transform: translateX(0); }
  .home-round-card__swipe-remove:active { background: #c0392b; }
}
:root[data-theme="light"] .home-round-card__swipe-remove { background: var(--danger-strong); }

.welcome-home-theme-toggle {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  flex: 0 0 auto;
  max-width: 100%;
}
.welcome-home-theme-toggle .icon-theme-moon {
  display: none;
}

:root[data-theme="light"] .welcome-home-theme-toggle .icon-theme-sun {
  display: none;
}

:root[data-theme="light"] .welcome-home-theme-toggle .icon-theme-moon {
  display: inline-block;
}
#cloudDefaultCourseLabel {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--ink) 70%, var(--text-muted, #888) 30%);
}

.welcome-home-theme-toggle:hover,
.welcome-home-theme-toggle:focus-visible {
  filter: brightness(1.04);
}

@media (min-width: 1024px) {
  .welcome-card--home {
    max-width: min(1440px, calc(100vw - 80px));
    width: min(1440px, calc(100vw - 80px));
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-height: 90dvh;
    min-height: min(72dvh, 780px);
    padding: 24px;
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  }

  .welcome-card--home .welcome-home-top-actions {
    padding: 0 2px;
  }

  .welcome-card--home .welcome-home-header {
    padding: 14px 16px;
    border-radius: 12px;
  }

  .welcome-card--home .welcome-home-workspace {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: stretch;
  }

  .welcome-card--home .welcome-home-quick-start {
    min-height: 0;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
  }

  .welcome-card--home .welcome-home-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .welcome-card--home .welcome-home-new-round {
    min-height: 64px;
  }

  .welcome-card--home .welcome-home-return-btn {
    min-height: 60px;
  }

  .welcome-card--home .welcome-home-capabilities {
    gap: 14px;
  }

  .welcome-card--home .welcome-home-capability-card {
    min-height: 144px;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
  }

  .welcome-card--home .welcome-home-capability-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .welcome-card--home .welcome-home-capability-icon svg {
    width: 22px;
    height: 22px;
  }

  .welcome-card--home .welcome-home-capability-copy strong {
    font-size: var(--text-lg, 18px);
  }

  .welcome-card--home .welcome-home-capability-cta {
    font-size: 12px;
  }

  .welcome-card--home .welcome-home-plan-card {
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 84%, transparent);
  }

  .welcome-card--home .welcome-home-plan-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .welcome-card--home .welcome-home-plan-icon svg {
    width: 22px;
    height: 22px;
  }

  .welcome-card--home .welcome-home-plan-copy strong {
    font-size: var(--text-lg, 18px);
  }

  .welcome-card--home .welcome-home-plan-description {
    font-size: var(--text-md, 15px);
  }

  .welcome-card--home .welcome-home-manage-plan-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--text-sm);
  }

  .welcome-card--home .welcome-home-rounds-wrap {
    min-height: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 62%, transparent);
  }

  .welcome-card--home .welcome-home-rounds-scroll {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
  }

  .welcome-card--home .home-round-card {
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: none;
  }

  .welcome-card--home .welcome-home-rounds-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 2px 2px 10px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--panel) 62%, transparent) 78%, transparent);
  }

  .welcome-card--home .welcome-home-rounds-list {
    gap: 10px;
  }

  .welcome-card--home .welcome-home-new-round {
    justify-content: flex-start;
    text-align: left;
    padding-left: 16px;
  }

  .welcome-card--home .welcome-home-return-btn {
    justify-content: flex-start;
    text-align: left;
    padding-left: 16px;
  }
}

@media (max-width: 560px) {
  .welcome-home-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .welcome-home-capability-card {
    min-height: 104px;
    gap: 7px;
    padding: 10px;
    border-radius: 10px;
  }

  .welcome-home-capability-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .welcome-home-capability-icon svg {
    width: 17px;
    height: 17px;
  }

  .welcome-home-capability-copy {
    gap: 0;
  }

  .welcome-home-capability-copy strong {
    font-size: var(--text-sm, 14px);
  }

  .welcome-home-capability-cta {
    font-size: 9px;
    letter-spacing: 0.035em;
  }

  .welcome-home-plan-card {
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
  }

  .welcome-home-plan-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .welcome-home-plan-icon svg {
    width: 17px;
    height: 17px;
  }

  .welcome-home-plan-label {
    font-size: 9px;
  }

  .welcome-home-plan-copy strong {
    font-size: var(--text-sm, 14px);
  }

  .welcome-home-plan-description {
    font-size: 10px;
    line-height: 1.2;
  }

  .welcome-home-manage-plan-btn {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .welcome-home-top-actions {
    align-items: flex-start;
  }

  .welcome-home-theme-toggle {
    flex-shrink: 1;
  }
}

@media (prefers-color-scheme: dark) {
  .home-round-card {
    background: var(--surface, #1e1e1e);
  }

  .home-round-card:hover,
  .home-round-card:focus-visible {
    background: var(--panel, #2a2a2a);
  }
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] .welcome-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(100, 116, 139, 0.12), transparent),
    radial-gradient(ellipse 55% 48% at 88% 12%, rgba(71, 85, 105, 0.09), transparent),
    radial-gradient(ellipse 65% 50% at 78% 85%, rgba(148, 163, 184, 0.10), transparent),
    radial-gradient(ellipse 50% 42% at 20% 88%, rgba(100, 116, 139, 0.08), transparent),
    var(--bg);
}

/* Light mode: the browser's default focus ring is blue (rgb(0,95,204)) and is
   glaring on the white welcome buttons — the Google CTA auto-focuses on load,
   so the page opens with a blue accent. Replace it with a neutral grey ring so
   the welcome page has no blue accents in light mode. */
:root[data-theme="light"] .welcome-overlay a:focus-visible,
:root[data-theme="light"] .welcome-overlay button:focus-visible {
  outline: 2px solid rgba(120, 128, 138, 0.9);
  outline-offset: 2px;
}

:root[data-theme="light"] .home-round-card {
  background: #ffffff;
}

:root[data-theme="light"] .home-round-card:hover,
:root[data-theme="light"] .home-round-card:focus-visible {
  background: #f5f8ff;
  border-color: var(--accent, #1f9d55);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
}

/* In app light mode, always use white cards regardless of system dark preference */
:root[data-theme="light"] .home-round-card {
  background: #ffffff;
  color: var(--ink, #212529);
  border-color: var(--line, #b7c2cd);
}

:root[data-theme="light"] .home-round-card:hover,
:root[data-theme="light"] .home-round-card:focus-visible {
  background: #f5f7f9;
  border-color: var(--accent, #1f9d55);
}

/* Light mode: neutral tinted shells; no blue accent lines. */

:root[data-theme="light"] .welcome-home-header {
  background: #eef2f8;
  border-color: var(--line);
}

:root[data-theme="light"] .welcome-home-default-course-btn {
  background: #eef2f8;
  border-color: rgba(29, 78, 216, 0.18);
}

/* Darker grey-blue shells for round cards so they don't read as flat white
   on the light gradient bg. Dark-grey left-edge keeps the accent rhythm. */
:root[data-theme="light"] .home-round-card {
  background: #eef2f8;
  border-color: rgba(29, 78, 216, 0.16);
}

:root[data-theme="light"] .home-round-card:hover,
:root[data-theme="light"] .home-round-card:focus-visible {
  background: #e4ebf4;
  border-color: rgba(29, 78, 216, 0.35);
}

/* Desktop: column divider stays the same neutral grey as dark mode. */
@media (min-width: 1024px) {
  :root[data-theme="light"] .welcome-card--home .welcome-home-header,
  :root[data-theme="light"] .welcome-card--home .welcome-home-rounds-wrap {
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--line) 75%, transparent);
  }
}

/* ============================================================
   First-launch legal consent gate (Terms + Privacy + EULA)

   A blocking dialog shown on the very first launch (per device)
   until the user accepts the legal documents. Lives here (rather
   than its own stylesheet) because it is precached via this file
   and adjacent to the welcome overlay.

   THEMING: unlike the rest of the app (data-theme driven), the gate
   follows the SYSTEM light/dark setting via prefers-color-scheme,
   using its own --cg-* tokens. It appears before the app's deferred
   theme JS runs, so a media query (evaluated at parse time) is the
   only way to render the correct theme with no flash — and matches
   the standalone legal pages it links to. The palette mirrors
   terms/privacy/eula.html for a cohesive first-run experience.

   VISIBILITY is owned by html.sm-needs-consent — set synchronously
   by the early <head> script so the gate paints before the welcome
   screen, then cleared by js/init/consent-gate.js on accept. The
   z-index sits above .welcome-overlay (20000). The bare #consentGate
   rule keeps it hidden when the class is absent even if the [hidden]
   attribute has been removed by JS.
   ============================================================ */
#consentGate {
  display: none;
}
html.sm-needs-consent #consentGate {
  display: flex;
}
.consent-gate {
  /* Dark by default; the prefers-color-scheme:light block below overrides
     only these token VALUES, so every rule recolors automatically. */
  --cg-bg: #07141f;
  --cg-card: rgba(13, 26, 39, 0.92);
  --cg-ink: #eff8ff;
  --cg-body: #cad8e6;
  --cg-muted: #93a9bb;
  --cg-accent: #1f9d55;
  --cg-accent-ink: #052c27;
  --cg-line: rgba(143, 170, 192, 0.22);
  --cg-doc-bg: rgba(18, 36, 54, 0.55);
  --cg-doc-bg-hover: rgba(28, 50, 72, 0.8);
  color-scheme: light dark;
  position: fixed;
  inset: 0;
  z-index: 30000;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--cg-ink);
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(148, 163, 184, 0.13), transparent),
    radial-gradient(ellipse 55% 48% at 88% 12%, rgba(100, 116, 139, 0.10), transparent),
    radial-gradient(ellipse 65% 50% at 78% 85%, rgba(71, 85, 105, 0.09), transparent),
    radial-gradient(ellipse 50% 42% at 20% 88%, rgba(148, 163, 184, 0.07), transparent),
    var(--cg-bg);
  /* --safe-*-inset carry the Android status/nav bar heights (env() is 0 there);
     mirrors the welcome overlay's padding so the card clears notches & bars. */
  padding:
    max(24px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 24px))
    24px
    max(24px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 24px));
}
@media (prefers-color-scheme: light) {
  .consent-gate {
    --cg-bg: #f4f7f9;
    --cg-card: rgba(255, 255, 255, 0.94);
    --cg-ink: #0e1c26;
    --cg-body: #2c3c48;
    --cg-muted: #566570;
    --cg-accent: #1a8a49;
    --cg-accent-ink: #ffffff;
    --cg-line: rgba(14, 28, 38, 0.14);
    --cg-doc-bg: rgba(236, 242, 246, 0.92);
    --cg-doc-bg-hover: rgba(224, 232, 238, 0.98);
  }
}
.consent-gate-card {
  max-width: 400px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* margin:auto centers when the card fits and degrades to scroll flow when it
     doesn't (paired with the overlay's align-items: flex-start). */
  margin: auto;
  background: var(--cg-card);
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  padding: clamp(22px, 5vw, 32px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}
.consent-gate-logo {
  width: min(84px, 24vw);
  height: min(84px, 24vw);
  min-width: 64px;
  min-height: 64px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}
.consent-gate-title {
  margin: 0;
  font-size: calc(var(--text-2xl, 22px) + 2px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cg-ink);
}
.consent-gate-lead {
  margin: 0;
  color: var(--cg-muted);
  font-size: var(--text-md, 15px);
  line-height: 1.45;
}
/* The three document buttons (plain in-page <a> navigations). */
.consent-gate-docs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 4px 0 2px;
}
.consent-gate-doc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  min-height: 50px;
  border: 1px solid var(--cg-line);
  border-radius: 12px;
  background: var(--cg-doc-bg);
  color: var(--cg-ink);
  font-size: var(--text-md, 15px);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.consent-gate-doc-btn:hover,
.consent-gate-doc-btn:focus-visible {
  background: var(--cg-doc-bg-hover);
  border-color: color-mix(in srgb, var(--cg-accent) 50%, var(--cg-line));
  outline: none;
}
.consent-gate-doc-btn__label { min-width: 0; }
.consent-gate-doc-btn__chevron { flex: 0 0 auto; color: var(--cg-accent); }
.consent-gate-accept {
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--text-md, 15px);
  font-weight: 700;
  border: none;
  border-radius: 12px;
  min-height: 52px;
  color: var(--cg-accent-ink);
  background: var(--cg-accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cg-accent) 32%, transparent);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.consent-gate-accept:hover,
.consent-gate-accept:focus-visible { filter: brightness(1.06); outline: none; }
.consent-gate-accept:active { transform: translateY(1px); }
.consent-gate-fineprint {
  margin: 2px 0 0;
  color: var(--cg-muted);
  font-size: var(--text-sm, 12.5px);
  line-height: 1.45;
}