/* Live class view (Stage 5). Spec: design/mila-tova-teachers/HANDOFF-design.md §3.15 */
.live { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 4px clamp(16px, 3vw, 40px) 60px; display: flex; flex-direction: column; gap: 22px; }
.live .back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; text-decoration: none; min-height: 44px; }
.summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 24px 28px; border-radius: 32px;
  background: var(--cream); box-shadow: 0 16px 36px rgba(96,128,178,.16); }
.summary .l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.summary h1 { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.1; }
.summary h1 .sep { color: #8d7f74; } .summary h1 .pin { letter-spacing: .04em; color: var(--lilac-deep); }
.livebadge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #e4f4eb; color: var(--green-text);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.livebadge i { width: 8px; height: 8px; border-radius: 50%; background: #2f8259; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.legend .sw { width: 26px; height: 10px; border-radius: 999px; }
.legend .t { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 19px; color: var(--hebrew); }
.when { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #ddf1e6; color: var(--green-text); font-size: 14px; font-weight: 800; }
.when.closed { background: #fbe3ea; color: var(--pink-text); }
.sumbtns { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--lilac-strong);
  color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; box-shadow: 0 8px 18px rgba(117,89,173,.26); }
.lbtn.close { background: #fff; color: var(--pink-text); border: 2px solid #ecb6c6; box-shadow: none; }
.lbtn:hover { filter: brightness(.97); }
.closecol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.closecol small { font-size: 13px; font-weight: 700; color: var(--text-2); }
.liverow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.counts { display: flex; flex-wrap: wrap; gap: 10px; }
.count { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border-radius: 999px; background: rgba(255,250,243,.94);
  box-shadow: 0 4px 12px rgba(96,128,178,.12); font-size: 17px; font-weight: 700; }
.count .sw { width: 28px; height: 28px; border-radius: 50%; }
.count b { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,250,243,.94); box-shadow: 0 4px 12px rgba(96,128,178,.12); }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-weight: 800; font-size: 14px; color: var(--text); }
.seg button[aria-checked="true"] { background: var(--lilac-strong); color: #fff; }
.hint { font-size: 14px; font-weight: 700; color: var(--text-2); }
.closedbanner { padding: 14px 20px; border-radius: 22px; background: #eaf2fb; border: 2px solid #c9dcf1; font-size: 17px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.flip { position: relative; display: block; height: 150px; padding: 0; border: 0; border-radius: 24px; background: transparent; text-align: left; perspective: 900px; transition: transform .15s ease; }
.cards.one .flip { height: 140px; }
.flip:hover { transform: translateY(-2px); }
.flip .inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.flip.flipped .inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border-radius: 24px; border: 2px solid #cfc3b5;
  box-shadow: 0 6px 14px rgba(96,128,178,.14); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #efe9e2; }
.face.back { transform: rotateY(180deg); background: var(--cream); }
.flip.working .face { border-color: #b49be3; } .flip.working .front { background: #efe6fc; }
.flip.completed .face { border-color: #8fc9a9; } .flip.completed .front { background: #ddf1e5; }
.flip.working .inner .face { animation: breathe 2.8s ease-in-out infinite; }
.live.closed .flip .face { animation: none; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(138,111,192,0), 0 6px 14px rgba(96,128,178,.14); } 50% { box-shadow: 0 0 0 5px rgba(138,111,192,.28), 0 6px 14px rgba(96,128,178,.14); } }
.face .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.face .nm { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sicon { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e0d7cc; color: #6f6258; }
.flip.working .sicon { background: #d9c9f2; color: #6a50a6; }
.flip.completed .sicon { background: #3a9c6b; color: #fff; }
.face .lab { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar2 { position: relative; display: block; height: 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(122,102,92,.16); overflow: hidden; }
.bar2 span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .6s ease; }
.pctrow { display: flex; align-items: baseline; gap: 8px; }
.pctrow b { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; color: var(--text); }
.pctrow b.none { color: #8d7f74; }
.pctrow span { font-size: 13px; font-weight: 700; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .flip .inner { transition: none !important; } .livebadge i, .flip .face { animation: none !important; } }