/* ============================================================================
   ריל למספרה — לשונית "ריל" בלוח הבקרה.
   שלושה שלבים בעמוד אחד: חומר → תבנית → סאונד → כפתור. אין אשף ואין
   מסכים — ספר בטלפון בין לקוחות צריך לראות את הכל בגלילה אחת.
   ========================================================================= */

.reel__lead{ margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }

.reel__step{
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
  font-family: var(--font-display); font-weight: 900; font-size: var(--t-md);
}
.reel__step b{
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--live-dim); color: var(--live-ink);
  font-size: var(--t-xs); font-weight: 900;
}

/* --- החומר: אריחים + כפתורי הוספה --- */
.reel__tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.reel__tile, .reel__add{
  position: relative; aspect-ratio: 9 / 14; border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.reel__tile img, .reel__tile video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__tile.is-hero{ border-color: var(--live); box-shadow: 0 0 0 2px var(--live-dim), var(--e-glow-live); }
.reel__kind{
  position: absolute; inset-inline-start: 6px; bottom: 6px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.6); color: var(--ink-2); font-size: var(--t-2xs);
}
.reel__star, .reel__x{
  position: absolute; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.62); color: var(--ink-2); font-size: 15px; line-height: 1;
}
.reel__star{ inset-inline-start: 6px; }
.reel__x{ inset-inline-end: 6px; }
.reel__star[aria-pressed="true"]{ background: var(--live); color: var(--ink-on-live); }
.reel__add{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-style: dashed; border-color: var(--line-strong); cursor: pointer; color: var(--ink-2);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.reel__add:hover{ border-color: var(--live); background: rgba(0,230,118,.05); }
.reel__add b{ font-size: 30px; line-height: 1; color: var(--live); }
.reel__add span{ font-size: var(--t-sm); font-weight: 700; color: var(--ink-1); }
.reel__add small{ font-size: var(--t-2xs); color: var(--ink-3); }

/* --- תבנית --- */
.reel__cards{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.reel__card{
  text-align: start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-1);
  cursor: pointer; transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.reel__card b{ display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 900; margin-bottom: 2px; }
.reel__card b em{ font-style: normal; font-size: var(--t-2xs); color: var(--live-ink); background: var(--live-dim); padding: 1px 7px; border-radius: var(--r-pill); margin-inline-start: 6px; vertical-align: middle; }
.reel__card span{ display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
.reel__card.is-on{ border-color: var(--live); background: rgba(0,230,118,.07); }
.reel__card:disabled{ opacity: .55; cursor: default; }

/* --- סאונד --- */
.reel__styles{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.reel__style{
  display: flex; align-items: stretch; border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.reel__style.is-on{ border-color: var(--live); background: rgba(0,230,118,.07); }
.reel__pick{
  flex: 1; min-width: 0; text-align: start; padding: var(--s-3) var(--s-3);
  background: transparent; border: 0; color: var(--ink-1); cursor: pointer;
}
.reel__pick b{ display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--t-md); }
.reel__pick span{ display: block; font-size: var(--t-2xs); color: var(--ink-3); }
.reel__play{
  flex: none; width: 44px; border: 0; border-inline-start: 1px solid var(--line);
  background: transparent; color: var(--ink-2); font-size: 14px; cursor: pointer;
}
.reel__play.is-on{ color: var(--live); }

/* --- כיתוב ומראה --- */
.reel__copies, .reel__looks{ display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reel__copyin{ margin: var(--s-2) 0 var(--s-3); }
.reel__looks .chip.is-on{ background: var(--live-dim); border-color: rgba(0,230,118,.55); color: var(--live-ink); }

/* --- כפתור + התקדמות --- */
.reel__go{ margin-top: var(--s-5); }
.reel__err{ margin: var(--s-3) 0 0; color: var(--busy); font-size: var(--t-sm); }
.reel__prog{ margin-top: var(--s-4); }
.reel__prog span{ display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); text-align: center; }
.reel__bar{ height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); overflow: hidden; }
.reel__bar i{ display: block; height: 100%; background: var(--nav); border-radius: inherit; transition: width .3s var(--ease-out); }
.reel__bar--live i{ background: var(--live); animation: reelPulse 1.4s ease-in-out infinite; }
@keyframes reelPulse{ 50%{ filter: brightness(1.35); } }

/* --- תוצאה --- */
.reel__result{ margin-top: var(--s-4); }
.reel__video{ width: 100%; max-height: 62vh; border-radius: var(--r-lg); background: #000; display: block; }
.reel__actions{ display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* --- היסטוריה --- */
.reel__hist{ display: flex; flex-direction: column; gap: var(--s-2); }
.reel__hitem{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.reel__hitem b{ display: block; font-size: var(--t-sm); }
.reel__hitem .hint{ display: block; }

@media (max-width: 380px){
  .reel__tiles{ grid-template-columns: repeat(2, 1fr); }
  .reel__cards, .reel__styles{ grid-template-columns: 1fr; }
}