/* install-prompt.css — the "add to home screen" banner + the iOS instruction
   screen. Same warm palette / Baloo 2 / soft-rounded language as home.css,
   gate.css and family-onboarding.css.

   Landscape-first like the rest of the app (manifest locks landscape), so the
   instruction card is scrollable and sized in vh: on a phone in landscape the
   viewport is only ~320-430px tall and five steps do not fit unscrolled. */

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

/* ---------- the banner ---------- */

/* A floating callout pinned to the TOP, above the mascot — not a bottom strip.
   A bottom bar reads as an ad and gets skipped (Oren missed it entirely on
   first look), and installing is not optional: without it the child cannot
   reach the app alone. Left/right insets keep it clear of the 3-dot parent
   menu in the top corner. */
.ip-banner {
  position:fixed;
  top: calc(1.8vh + env(safe-area-inset-top,0px)); top:calc(clamp(8px,1.8vh,16px) + env(safe-area-inset-top,0px));
  left: 9vw; left:clamp(84px,9vw,140px);
  right: 9vw; right:clamp(84px,9vw,140px);
  margin-inline:auto;
  max-width:640px;
  z-index:1500; /* above the home screen, below the family-code takeover */
  display:flex;
  align-items:center;
  gap: 2vw; gap:clamp(8px,2vw,14px);
  padding: 1.6vh 3vw; padding:clamp(8px,1.6vh,14px) clamp(12px,3vw,18px);
  border-radius:20px;
  background:linear-gradient(180deg, #FFF6E4 0%, #FFE9C2 100%);
  border:2px solid #E8A33C;
  box-shadow:0 10px 26px rgba(120,80,30,.22);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:ip-drop .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ip-drop {
  from { transform:translateY(-120%); opacity:0; }
  to { transform:none; opacity:1; }
}

.ip-banner-icon {
  width: 7vh; width:clamp(34px,7vh,46px);
  height: 7vh; height:clamp(34px,7vh,46px);
  border-radius:12px;
  flex:none;
  box-shadow:var(--ip-shadow-soft);
}

.ip-banner-text {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.2;
  color:var(--ip-ink);
}
.ip-banner-text b {
  font-weight:800;
  font-size: 3.4vh; font-size:clamp(.9rem,3.4vh,1.08rem);
  color:#8A4A0E;
}
.ip-banner-text span {
  font-weight:600;
  font-size: 2.5vh; font-size:clamp(.7rem,2.5vh,.86rem);
  color:#7A5A32;
  /* Two lines max on a short landscape phone — the sentence explains WHY the
     install is worth doing, so clipping it to one line loses the point. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

.ip-banner-cta {
  flex:none;
  border:none; cursor:pointer;
  border-radius:18px;
  padding: 1.8vh 5vw; padding:clamp(7px,1.8vh,11px) clamp(18px,5vw,28px);
  background:linear-gradient(180deg, #C9761E 0%, #A85F1E 100%);
  box-shadow:0 4px 10px rgba(120,80,30,.28);
  font-family:inherit; font-weight:800;
  font-size: 3.2vh; font-size:clamp(.85rem,3.2vh,1.05rem);
  color:#FFF7EA;
  transition:transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.ip-banner-cta:active { transform:scale(.96); }

.ip-banner-close {
  flex:none;
  border:none; background:none; cursor:pointer;
  width: 5vh; width:clamp(28px,5vh,36px); height: 5vh; height:clamp(28px,5vh,36px);
  border-radius:50%;
  font-family:inherit; font-weight:700;
  font-size: 3.6vh; font-size:clamp(1.1rem,3.6vh,1.4rem);
  line-height:1;
  color:var(--ip-ink-soft);
  -webkit-tap-highlight-color:transparent;
}
.ip-banner-close:active { background:rgba(255,255,255,.7); }

/* An app-icon glyph (Safari) rather than a UI-control glyph: no chrome, just
   the rounded-square icon the parent is looking for on their dock. */
.ip-chip.ip-chip-app {
  background:none; border:none;
  width: 4.8vh; width:clamp(28px,4.8vh,34px); height: 4.8vh; height:clamp(28px,4.8vh,34px);
  border-radius:9px; overflow:hidden;
  box-shadow:var(--ip-shadow-soft);
}
.ip-chip-app .ip-glyph { width:100%; height:100%; }

/* ---------- the iOS instruction screen ---------- */

/* While the pre-install gate is up, the "rotate your device" overlay must not
   fight it: the gate reads fine in portrait, and rotating is only needed once
   the child is actually inside the app. (rotate-lock.css uses z-index 99999,
   so hiding it is the only way to keep it off the gate.) */
.ee-install-gate .rotate-overlay { display:none !important; }

.ip-overlay {
  position:fixed; top: 0; right: 0; bottom: 0; left: 0; inset:0;
  z-index:1900;
  display:flex; align-items:center; justify-content:center;
  padding: 2.5vh; padding:clamp(8px,2.5vh,28px);
  background:#F7F1E6;
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:ip-fade .18s ease;
}
@keyframes ip-fade { from { opacity:0; } to { opacity:1; } }

/* Card = scrollable steps + a footer that never scrolls away. The pinned
   footer does double duty: the "done" button is always reachable (on a phone
   in landscape only ~3 of the 5 steps fit), and a footer that stays put while
   the text moves is itself the cue that the area above it scrolls. */
.ip-card {
  position:relative; /* anchors the corner close button */
  width:100%; max-width:560px;
  max-height:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--ip-card);
  border-radius:26px;
  box-shadow:var(--ip-shadow-lift);
}

.ip-scroll {
  flex:1 1 auto;
  min-height:0; /* without this the flex item refuses to shrink and never scrolls */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding: 3.4vh 4vw 1.4vh; padding:clamp(14px,3.4vh,28px) clamp(16px,4vw,30px) clamp(6px,1.4vh,12px);
}

.ip-foot {
  flex:none;
  border-top:1px solid #EFE8DC;
  padding: 1.6vh 4vw; padding:clamp(7px,1.6vh,13px) clamp(16px,4vw,30px);
  padding-bottom: calc(1.6vh + env(safe-area-inset-bottom,0px)); padding-bottom:calc(clamp(7px,1.6vh,13px) + env(safe-area-inset-bottom,0px));
  background:var(--ip-card);
}

.ip-title {
  margin:0 0 6px;
  font-weight:800;
  font-size: 5vh; font-size:clamp(1.1rem,5vh,1.6rem);
  color:var(--ip-wood-deep);
  line-height:1.15;
  text-align:center;
}
.ip-lead {
  margin: 0 0 2.4vh; margin:0 0 clamp(10px,2.4vh,18px);
  font-weight:600;
  font-size: 2.9vh; font-size:clamp(.78rem,2.9vh,.95rem);
  color:var(--ip-ink-soft);
  line-height:1.4;
  text-align:center;
}

.ip-steps { list-style:none; margin:0; padding:0; }

.ip-step {
  display:flex;
  align-items:flex-start;
  gap: 2vw; gap:clamp(8px,2vw,14px);
  padding: 1.8vh 0; padding:clamp(8px,1.8vh,13px) 0;
  border-bottom:1px solid #EFE8DC;
}
.ip-step:last-child { border-bottom:none; }

.ip-num {
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width: 4.6vh; width:clamp(24px,4.6vh,30px); height: 4.6vh; height:clamp(24px,4.6vh,30px);
  border-radius:50%;
  background:var(--ip-teal);
  color:var(--ip-wood-deep);
  font-weight:800;
  font-size: 2.8vh; font-size:clamp(.8rem,2.8vh,.98rem);
  line-height:1;
}

.ip-text {
  font-weight:600;
  font-size: 3vh; font-size:clamp(.8rem,3vh,.98rem);
  line-height:1.5;
  color:var(--ip-ink);
}
.ip-text b { font-weight:800; color:var(--ip-wood-deep); }

/* an inline glyph, drawn to look like the real iOS control it names */
.ip-chip {
  display:inline-flex; align-items:center; justify-content:center;
  width: 4.4vh; width:clamp(26px,4.4vh,32px); height: 4.4vh; height:clamp(26px,4.4vh,32px);
  margin:0 3px;
  vertical-align:-.35em;
  border-radius:8px;
  background:var(--ip-stage);
  border:1px solid #E4DBCB;
  color:var(--ip-ios-blue);
}
.ip-glyph { width:64%; height:64%; display:block; }

/* a miniature of the blue "הוספה" button in the iOS sheet */
.ip-btn-demo {
  display:inline-block;
  vertical-align:-.2em;
  margin:0 3px;
  padding:2px 10px;
  border-radius:14px;
  background:var(--ip-ios-blue);
  color:#fff;
  font-weight:700;
  font-size:.85em;
}

.ip-appicon {
  width: 5vh; width:clamp(30px,5vh,38px); height: 5vh; height:clamp(30px,5vh,38px);
  border-radius:9px;
  vertical-align:-.7em;
  margin:0 3px;
  box-shadow:var(--ip-shadow-soft);
}

/* The intro / success screens: plain statements, not numbered steps. */
.ip-facts { list-style:none; margin:0; padding:0; }
/* ⚠️ NOT display:flex. A flex container turns every ELEMENT child into its own
   flex item, so each <b> inside the sentence became a separate column and the
   Hebrew rendered as scrambled stripes. These lines are prose with an inline
   icon — they must stay in normal inline flow. (.ip-step gets away with flex
   because its text lives in a single nested .ip-text div.) */
.ip-facts li {
  padding: 1.6vh 0; padding:clamp(7px,1.6vh,12px) 0;
  border-bottom:1px solid #EFE8DC;
  font-weight:600;
  font-size: 3vh; font-size:clamp(.8rem,3vh,.98rem);
  line-height:1.55;
  color:var(--ip-ink);
}
.ip-facts li:last-child { border-bottom:none; }
.ip-facts b { font-weight:800; color:var(--ip-wood-deep); }

.ip-foot { display:flex; flex-direction:column; align-items:center; gap:6px; }

/* The corner exit. Quiet on purpose — installing is not presented as
   optional — but present, so the screen is never a dead end. */
.ip-x {
  position:absolute;
  left: 1.4vw; inset-inline-end:clamp(6px,1.4vw,12px);
  inset-block-start: 1vh; inset-block-start:clamp(4px,1vh,10px);
  z-index:1;
  border:none; background:none; cursor:pointer;
  width: 5vh; width:clamp(28px,5vh,34px); height: 5vh; height:clamp(28px,5vh,34px);
  border-radius:50%;
  font-family:inherit; font-weight:700; line-height:1;
  font-size: 3.6vh; font-size:clamp(1.1rem,3.6vh,1.4rem);
  color:var(--ip-ink-soft);
  -webkit-tap-highlight-color:transparent;
}
.ip-x:active { background:var(--ip-stage); }

/* The way out. Deliberately quiet next to the primary action, but present —
   a modal with no exit is a trap, and a trapped parent closes the tab. */
.ip-alt {
  border:none; background:none; cursor:pointer;
  padding:4px 12px;
  font-family:inherit; font-weight:700;
  font-size: 2.6vh; font-size:clamp(.75rem,2.6vh,.88rem);
  color:var(--ip-ink-soft);
  text-decoration:underline;
  -webkit-tap-highlight-color:transparent;
}

.ip-done {
  display:block;
  margin:0 auto;
  border:none; cursor:pointer;
  border-radius:20px;
  padding: 2.2vh 8vw; padding:clamp(8px,2.2vh,13px) clamp(28px,8vw,44px);
  background:radial-gradient(circle at 50% 34%, #E7F7F5 0%, var(--ip-teal) 100%);
  box-shadow:var(--ip-shadow-soft);
  font-family:inherit; font-weight:800;
  font-size: 3.4vh; font-size:clamp(.9rem,3.4vh,1.1rem);
  color:var(--ip-wood-deep);
  -webkit-tap-highlight-color:transparent;
}
.ip-done:active { transform:scale(.96); }