/* family-onboarding.css — recover the family code (installed-PWA fallback).
   Consistent with home.css/gate.css: warm palette, Baloo 2, soft rounded card.
   Built landscape-first (manifest orientation:landscape is the app's locked
   mode): vh-based sizing + max-height/overflow-y so it fits a real phone's
   short landscape height (~320-430px) without overflow. */

:root {
  --fo-card:#FFFFFF; --fo-stage:#FBF5EA; --fo-sec-teal:#D6F0EE;
  --fo-ink:#44403C; --fo-ink-soft:#7C746C;
  --fo-wood-deep:#A85F1E; --fo-danger:#C0503A;
  --fo-shadow-soft:0 6px 14px rgba(80,60,40,.10);
  --fo-shadow-lift:0 16px 34px rgba(80,60,40,.16);
}

.fo-overlay {
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset:0;
  z-index:2000; /* above everything — this gates the whole screen */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3vh; padding:clamp(10px,3vh,32px);
  background:#F7F1E6;
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:fo-fade .18s ease;
}
@keyframes fo-fade { from { opacity:0; } to { opacity:1; } }

.fo-card {
  width:100%;
  max-width:440px;
  max-height:100%;
  overflow-y:auto;
  background:var(--fo-card);
  border-radius:28px;
  box-shadow:var(--fo-shadow-lift);
  padding: 4vh 5vw; padding:clamp(14px,4vh,32px) clamp(22px,5vw,36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1.6vh; gap:clamp(6px,1.6vh,14px);
  text-align:center;
}

.fo-title {
  margin:0;
  font-weight:800;
  font-size: 6.5vh; font-size:clamp(1.3rem,6.5vh,2rem);
  color:var(--fo-wood-deep);
  line-height:1;
}

.fo-hint {
  margin:0;
  max-width:30ch;
  font-weight:600;
  font-size: 3.2vh; font-size:clamp(.8rem,3.2vh,1rem);
  color:var(--fo-ink-soft);
  line-height:1.35;
}

/* הפעולה הראשית — שחזור עצמאי דרך /join. מלא וכהה, בניגוד לכפתור-המשך של
   שדה-הקוד שנשאר משני: המסלול הזה עובד לכולם, ושדה-הקוד רק לוותיקים. */
.fo-rejoin {
  display:inline-block;
  text-decoration:none;
  border-radius:20px;
  padding: 2.2vh 7vw; padding:clamp(8px,2.2vh,13px) clamp(24px,7vw,40px);
  background:var(--fo-wood-deep);
  box-shadow:var(--fo-shadow-soft);
  font-family:inherit;
  font-weight:800;
  font-size: 3.8vh; font-size:clamp(.92rem,3.8vh,1.15rem);
  color:#FFF7EC;
  -webkit-tap-highlight-color:transparent;
}
.fo-rejoin:active { transform:scale(.96); }

/* מפריד "או" — קו דק משני צדדיו, כדי שיהיה ברור שאלה שני מסלולים ולא שלבים. */
.fo-or {
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size: 2.8vh; font-size:clamp(.72rem,2.8vh,.88rem);
  color:var(--fo-ink-soft);
}
.fo-or::before, .fo-or::after {
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--fo-sec-teal);
}

/* השורה השנייה — המסלול הוותיק (קוד בתוך הקישור). קטנה ומעומעמת בכוונה:
   היא רלוונטית להולכת ופוחתת של המשפחות, ואסור לה להתחרות בהוראה הראשית. */
.fo-hint--sub {
  font-size: 2.7vh; font-size:clamp(.7rem,2.7vh,.86rem);
  opacity:.75;
  margin-top: -0.6vh; margin-top:clamp(-6px,-0.6vh,-2px);
}

.fo-form {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 2vh; gap:clamp(8px,2vh,14px);
  margin-top: 1vh; margin-top:clamp(4px,1vh,8px);
}

.fo-input {
  width:100%;
  max-width:280px;
  min-height: 10vh; min-height:clamp(40px,10vh,54px);
  border:2px solid var(--fo-sec-teal);
  border-radius:14px;
  background:var(--fo-stage);
  text-align:center;
  direction:ltr; /* the code itself (F-7421) reads left-to-right */
  font-family:inherit;
  font-weight:700;
  font-size: 4.4vh; font-size:clamp(1rem,4.4vh,1.3rem);
  color:var(--fo-wood-deep);
  letter-spacing:.06em;
  padding:0 12px;
  -webkit-tap-highlight-color:transparent;
}
.fo-input:focus {
  outline:none;
  border-color:var(--fo-wood-deep);
}
.fo-input::placeholder { color:var(--fo-ink-soft); opacity:.6; }

.fo-error {
  margin:0;
  font-weight:700;
  font-size: 3vh; font-size:clamp(.75rem,3vh,.92rem);
  color:var(--fo-danger);
  line-height:1.3;
}

.fo-submit {
  border:none;
  cursor:pointer;
  border-radius:20px;
  padding: 2.4vh 8vw; padding:clamp(8px,2.4vh,14px) clamp(28px,8vw,44px);
  background:radial-gradient(circle at 50% 34%, #E7F7F5 0%, var(--fo-sec-teal) 100%);
  box-shadow:var(--fo-shadow-soft);
  font-family:inherit;
  font-weight:800;
  font-size: 4vh; font-size:clamp(.95rem,4vh,1.2rem);
  color:var(--fo-wood-deep);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.fo-submit:active { transform:scale(.96); box-shadow:var(--fo-shadow-lift); }