/* Anmelde-Dialog fuer gorounds.app.
 *
 * Liegt in einer eigenen Datei, weil ihn zwei Seiten brauchen: die Round-Seite
 * aus _worker.js und die Startseite aus index.html. Als Kopie in beiden waere
 * er nach der ersten Aenderung auseinander.
 *
 * Farben stehen hier als feste Werte, nicht als var(). Die beiden Seiten
 * bringen verschiedene :root-Definitionen mit; geerbte Variablen waeren auf
 * einer von beiden leer.
 */
  /* Anmelde-Dialog: auf dem Telefon ein Blatt von unten, auf dem Desktop
     mittig. Gleiche Bausteine wie die Karte, damit es nicht wie ein
     Fremdkoerper wirkt. */
  .jsheet { position: fixed; inset: 0; z-index: 50; background: rgba(44,36,32,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: jfade .18s ease-out; }
  @keyframes jfade { from { opacity: 0; } to { opacity: 1; } }
  .jbox { background: #fff; width: 100%; max-width: 460px; border-radius: 24px 24px 0 0; padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); max-height: 92svh; overflow-y: auto; animation: jrise .24s cubic-bezier(.2,.8,.3,1); }
  @keyframes jrise { from { transform: translateY(26px); } to { transform: translateY(0); } }
  @media (min-width: 560px) {
    .jsheet { align-items: center; padding: 20px; }
    .jbox { border-radius: 24px; }
  }
  .jbox h2 { font-size: 21px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 7px; }
  .jsub { color: #7a7068; font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
  .jsub.jcenter { text-align: center; }
  .jicon { font-size: 38px; text-align: center; margin-bottom: 10px; }
  .jerr { display: none; background: #fff1f4; color: #c2325c; border-radius: 11px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 13px; line-height: 1.45; }
  .jinput { width: 100%; border: 1.5px solid #ece4de; border-radius: 13px; padding: 13px 14px; font-size: 16px; font-family: inherit; color: #2c2c2c; background: #fff; margin-bottom: 10px; }
  .jinput:focus { outline: none; border-color: #ff9f66; }
  .jlabel { display: block; font-size: 13px; color: #7a7068; margin: 4px 0 6px; font-weight: 600; }
  .jbtn { display: block; width: 100%; text-align: center; border: 1.5px solid #ece4de; background: #fff; color: #2c2c2c; border-radius: 13px; padding: 14px 16px; font-size: 15.5px; font-weight: 700; font-family: inherit; cursor: pointer; margin-bottom: 10px; text-decoration: none; }
  .jbtn:disabled { opacity: .55; cursor: default; }
  .jbtn.jprimary { background: #ff729f; color: #fff; border-color: #ff729f; font-weight: 800; box-shadow: 0 8px 18px rgba(255,114,159,.3); }
  .jor { display: flex; align-items: center; gap: 12px; color: #b9aea6; font-size: 12.5px; margin: 6px 0 14px; }
  .jor::before, .jor::after { content: ''; flex: 1; height: 1px; background: #f0e8e2; }
  .jlink { display: block; width: 100%; background: none; border: 0; color: #ff7a55; font-size: 14.5px; font-weight: 700; font-family: inherit; padding: 9px; cursor: pointer; }
  .jlink.jmuted { color: #b0a59d; font-weight: 600; }
  .jcheck { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #5c554f; line-height: 1.5; margin: 6px 0 16px; cursor: pointer; }
  .jcheck input { margin-top: 2px; width: 17px; height: 17px; accent-color: #ff729f; flex: none; }
  .jcheck a { color: #ff7a55; }
  .jwarn { background: #fff7f0; border: 1px solid #ffe3cf; color: #8a5a34; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
  .jspin { width: 30px; height: 30px; margin: 10px auto 14px; border-radius: 50%; border: 3px solid #f2e9e3; border-top-color: #ff729f; animation: jspin .8s linear infinite; }
  @keyframes jspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .jsheet, .jbox, .jspin { animation-duration: .01ms !important; } }