/* =====================================================================
   skool PWA — stilurile proprii aplicației instalabile (ce nu era în prototip):
   ecranele simple dinaintea cadrului (se deschide, neconfigurat, eroare) și,
   de la pasul 2, conectarea. Folosesc doar variabilele din tokens.css.
   ===================================================================== */

.pwa-plain-host { min-height: 100dvh; }
/* #app are și clasa .sh, care de la 768 px e grilă cu bara laterală: ecranele simple și conectarea nu au bară, deci ocupă tot */
.sh.pwa-plain-host { display: block; }

.pwa-plain {
  display: grid; align-content: center; justify-items: center; gap: var(--sp-4);
  min-height: 100dvh; box-sizing: border-box;
  padding: calc(var(--sp-6) + var(--safe-top, 0px)) calc(var(--gutter, 16px) + var(--safe-right, 0px))
           calc(var(--sp-6) + var(--safe-bottom, 0px)) calc(var(--gutter, 16px) + var(--safe-left, 0px));
  background: var(--paper); color: var(--ink);
  outline: none;
}
.pwa-plain .ui-empty { max-width: 28rem; }
.pwa-plain__brand .ui-brand__tile { width: 56px; height: 56px; border-radius: 16px; }
.pwa-plain__busy { font: var(--fw-medium, 500) var(--fs-body, 1rem) / 1.5 var(--font-ui); color: var(--muted); margin: 0; }
.pwa-plain__signout { margin-top: var(--sp-3, 12px); }

/* ---------------- conectarea (js/pwa/auth.js) ---------------- */
.pwa-auth {
  display: grid; align-content: start; justify-items: center; gap: var(--sp-5);
  min-height: 100dvh; box-sizing: border-box;
  padding: calc(var(--sp-6) + var(--safe-top, 0px)) calc(var(--gutter, 16px) + var(--safe-right, 0px))
           calc(var(--sp-8) + var(--safe-bottom, 0px)) calc(var(--gutter, 16px) + var(--safe-left, 0px));
  background: var(--paper); color: var(--ink); outline: none;
}
@media (min-height: 700px) { .pwa-auth { align-content: center; } }
.pwa-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; max-width: 28rem; }
.pwa-auth__top .ui-brand__tile { width: 48px; height: 48px; border-radius: 14px; }
.pwa-auth__lang { display: flex; gap: var(--sp-1); }
.pwa-auth__card { width: 100%; max-width: 28rem; box-sizing: border-box; display: grid; gap: var(--sp-4); }
.pwa-auth__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-title-l, 1.75rem); line-height: 1.15; font-weight: var(--fw-medium, 500); letter-spacing: var(--ls-display, -0.01em); }
.pwa-auth__subtitle { margin: var(--sp-2) 0 0; font-size: var(--fs-body, 1rem); font-weight: var(--fw-semibold, 600); }
.pwa-auth__text { margin: 0; font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.55); color: var(--ink-2); overflow-wrap: anywhere; }
.pwa-auth__meta { margin: 0; font-size: var(--fs-body-s, .875rem); color: var(--muted); }
.pwa-auth__form { display: grid; gap: var(--sp-4); }
.pwa-auth__form #auth-code { font-size: 1.75rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.pwa-auth__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }
.pwa-auth__stack { display: grid; gap: var(--sp-3); }
.pwa-auth__hint { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; font-size: var(--fs-body-s, .875rem); line-height: var(--lh-body-s, 1.5); color: var(--muted); }
.pwa-auth__hint:empty { display: none; }
.pwa-auth__hint .ui-i { flex-shrink: 0; margin-top: 2px; }
.pwa-auth__error { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: var(--danger-soft, #fbe9e7); color: var(--danger-ink, #8a1c12); font-size: var(--fs-body-s, .875rem); line-height: var(--lh-body-s, 1.5); }
.pwa-auth__error .ui-i { flex-shrink: 0; margin-top: 2px; }
.pwa-auth__busy { margin: var(--sp-6) 0; text-align: center; color: var(--muted); }
.pwa-auth__steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); line-height: var(--lh-body, 1.55); list-style: decimal; }
.pwa-auth__steps li { display: list-item; padding-left: .2em; }
.pwa-auth__steps li::marker { font-weight: var(--fw-semibold, 600); color: var(--primary-ink); }
.pwa-auth__details ul { list-style: disc; }
.pwa-auth__details li { display: list-item; }
.pwa-auth__details summary { cursor: pointer; font-weight: var(--fw-semibold, 600); color: var(--primary-ink); }
.pwa-auth__details ul { margin: var(--sp-3) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); font-size: var(--fs-body-s, .875rem); line-height: var(--lh-body-s, 1.5); color: var(--ink-2); }

/* Foaia cu un link de trimis (invitație, intrarea unui bunic): Copiază · Trimite… */
.sh-link__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sh-link__acts .ui-btn { flex: 1 1 auto; justify-content: center; }