/* Microsoft Teams teaching illustration; decorative, not interactive UI. */
.teams-brand{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.teams-brand img{flex:none;width:24px;height:24px}
html[data-theme="dark"] #parent-student-guide h2{color:#edf3ef}
.teams-visual{margin:0;min-width:0;padding:16px 0;text-align:center}.teams-invite,.teams-notes{position:relative;z-index:1;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);box-shadow:0 12px 36px #102f3110;padding:18px;max-width:390px;margin:0 auto}.teams-invite strong,.teams-notes strong{display:block;font-size:14px;color:var(--ink)}.teams-invite span,.teams-notes div>span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.teams-invite .teams-invite-check{margin-left:auto;color:var(--green);font-size:22px}
.teams-phone{width:290px;max-width:90%;margin:22px auto 0;padding:10px 12px 18px;background:#f5f5fa;color:#242424;border:7px solid #252834;border-radius:36px;box-shadow:14px 18px 0 #6264a710,0 22px 45px #102f3118;text-align:left}.teams-phone-top{display:flex;justify-content:space-between;padding:1px 12px 15px;font:600 10px Arial}.teams-app-title{display:flex;align-items:center;gap:7px;font:bold 12px Arial;padding-bottom:14px;border-bottom:1px solid #dedee9}.teams-app-title img{width:24px;height:24px}.teams-app-title>span:last-child{margin-left:auto}.teams-lesson-title{font:600 12px Arial;padding:16px 2px}.teams-lesson-title small{display:block;font:10px Arial;color:#62626a;padding:5px 12px}.teams-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#398063;margin-right:4px}.teams-board{background:#fff;border:1px solid #e1e1ed;border-radius:12px;padding:18px 14px 12px}.teams-board>span{font:700 8px Arial;letter-spacing:1px;color:#6264a7}.teams-board strong{display:block;font:500 21px/1.25 Georgia;margin-top:14px;color:#243b39}.teams-board svg{display:block;width:100%;height:96px;margin-top:10px}.teams-board p{font:10px Arial;margin:6px 0 0;color:#666}.teams-participants{display:flex;gap:8px;margin-top:10px}.teams-participants div{flex:1;background:#e9e9f4;border-radius:8px;padding:10px;text-align:center;font:9px Arial}.teams-participants span{display:block;border-radius:50%;background:#d5d4ed;color:#464775;width:30px;height:30px;line-height:30px;margin:0 auto 5px;font-weight:bold}.teams-call-controls{display:flex;justify-content:space-between;padding:16px 8px 0}.teams-call-controls>span{text-align:center;font:8px Arial}.teams-call-controls svg{display:block;width:20px;height:20px;margin:0 auto 5px;stroke:#45454a;stroke-width:1.8;fill:none}.teams-call-controls .teams-leave{color:#b32935}.teams-leave svg{stroke:#b32935}.teams-notes{margin-top:18px;max-width:360px;padding:14px}.teams-notes>span{font-size:26px;color:#6264a7}.teams-visual figcaption{font-size:11px;color:var(--muted);margin-top:22px}.teams-visual figcaption small{display:block;font-size:10px;margin-top:5px}
@media(max-width:760px){.teams-visual{width:100%;max-width:440px;justify-self:center}.teams-invite,.teams-notes{max-width:100%}.teams-phone{width:280px}.footer .teams-brand{justify-content:center}}

/* One reveal system replaces earlier page-load animations on these elements. */
.reveal-managed { animation: none !important; }
.teams-visual .teams-phone { animation: teams-phone-float 7s ease-in-out infinite; }
.teams-visual .teams-invite-check { animation: teams-confirm 6s ease-in-out infinite; }
.teams-visual .teams-trend { stroke-dasharray:100; animation: teams-draw 7s ease-in-out infinite; }
.teams-visual .teams-trend-point { transform-box:fill-box;transform-origin:center;animation: teams-point 3.5s ease-in-out infinite; }
.teams-visual .teams-live-dot { animation: teams-live 2.8s ease-out infinite; }
.teams-visual .teams-participants span { animation: teams-speaking 4s ease-in-out infinite; }
.teams-visual .teams-participants div:nth-child(2) span { animation-delay:2s; }
.teams-visual .teams-phone,.teams-visual .teams-invite-check,.teams-visual .teams-trend,.teams-visual .teams-trend-point,.teams-visual .teams-live-dot,.teams-visual .teams-participants span { animation-play-state:paused; }
.teams-motion-on .teams-phone,.teams-motion-on .teams-invite-check,.teams-motion-on .teams-trend,.teams-motion-on .teams-trend-point,.teams-motion-on .teams-live-dot,.teams-motion-on .teams-participants span { animation-play-state:running; }
/* Phone float uses transform; the entrance uses the independent translate property. */
.teams-visual .teams-phone.reveal-managed { animation:teams-phone-float 7s ease-in-out infinite !important;animation-play-state:paused !important; }
.teams-motion-on .teams-phone.reveal-managed { animation-play-state:running !important; }
.teams-motion-toggle { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:12px;padding:0;background:var(--surface,#fff);border:1px solid var(--line);border-radius:50%;color:#6264a7;cursor:pointer;box-shadow:0 3px 10px #6264a710;transition:background .2s,box-shadow .2s,transform .2s; }
.teams-motion-toggle svg { width:20px;height:20px;fill:currentColor;pointer-events:none; }
.teams-motion-toggle .motion-play { display:none; }
.teams-motion-toggle[aria-pressed="true"] .motion-pause { display:none; }
.teams-motion-toggle[aria-pressed="true"] .motion-play { display:block; }
@media(hover:hover){.teams-motion-toggle:hover{background:#eeedf8;box-shadow:0 4px 14px #6264a724;transform:translateY(-1px)}}
.teams-motion-toggle:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){.teams-motion-toggle{transition:none}}
.teams-motion-toggle[hidden] { display:none; }
.teams-motion-toggle:focus-visible { outline:2px solid #6264a7;outline-offset:3px; }
@keyframes teams-phone-float { 0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-7px) rotate(.35deg)} }
@keyframes teams-draw { 0%{stroke-dashoffset:100}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:-100} }
@keyframes teams-point { 0%,100%{transform:scale(1)}50%{transform:scale(1.3)} }
@keyframes teams-confirm { 0%,75%,100%{transform:scale(1)}85%{transform:scale(1.18)} }
@keyframes teams-live { 0%,100%{box-shadow:0 0 0 0 #39806300}30%{box-shadow:0 0 0 4px #39806322}70%{box-shadow:0 0 0 8px #39806300} }
@keyframes teams-speaking { 0%,45%,100%{box-shadow:0 0 0 0 #6264a700}20%{box-shadow:0 0 0 3px #6264a744} }
@media(prefers-reduced-motion:reduce){.teams-visual *,.teams-visual .teams-phone.reveal-managed{animation:none!important}.teams-trend{stroke-dashoffset:0}.reveal-managed{translate:none!important;opacity:1!important}}


/* A seven-second ring follows the whiteboard loop and pauses with it. */
.teams-motion-toggle { position:relative; }
.teams-motion-toggle .motion-progress { position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;transform:rotate(-90deg); }
.motion-progress circle { fill:none;stroke-width:2; }
.motion-track { stroke:#6264a71c; }
.motion-ring { stroke:#6264a7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:teams-progress 7s linear infinite;animation-play-state:paused; }
.teams-motion-on .motion-ring { animation-play-state:running; }
@keyframes teams-progress { from{stroke-dashoffset:100}to{stroke-dashoffset:0} }
@media(prefers-reduced-motion:reduce){.motion-ring{animation:none!important}}

/* Compact caption and mobile lesson preview. */
.teams-visual figcaption { display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;text-align:left; }
.teams-visual figcaption small { margin-top:3px; }
.teams-motion-toggle { flex:none;width:32px;height:32px;margin:0;background:transparent;box-shadow:none;border:0; }
.teams-motion-toggle>svg:not(.motion-progress) { width:14px;height:14px; }
@media(max-width:760px){
 .teams-visual { padding:4px 0;max-width:360px; }
 .teams-invite,.teams-notes { padding:10px 12px;border-radius:12px;gap:10px;box-shadow:0 6px 20px #102f3109; }
 .teams-invite img { width:28px;height:28px; }
 .teams-invite strong,.teams-notes strong { font-size:12px; }
 .teams-invite span,.teams-notes div>span { font-size:10px;line-height:1.4;margin-top:2px; }
 .teams-phone { width:100%;max-width:100%;margin:12px auto 0;padding:12px;border-width:4px;border-radius:22px;box-shadow:7px 9px 0 #6264a710,0 10px 24px #102f3110; }
 .teams-phone-top { display:none; }
 .teams-app-title { padding-bottom:9px;font-size:11px; }
 .teams-app-title img { width:20px;height:20px; }
 .teams-lesson-title { padding:10px 2px;font-size:11px; }
 .teams-lesson-title small { display:inline;padding:0 0 0 8px;font-size:9px; }
 .teams-board { padding:12px;position:relative;min-height:118px;display:grid;grid-template-columns:1fr 1fr;column-gap:8px;align-items:center; }
 .teams-board>span { grid-column:1;font-size:7px; }
 .teams-board strong { grid-column:1;font-size:17px;margin-top:6px; }
 .teams-board svg { grid-column:2;grid-row:1 / 4;height:78px;margin:0; }
 .teams-board p { grid-column:1;font-size:9px;margin-top:8px; }
 .teams-participants { gap:6px;margin-top:8px; }
 .teams-participants div { display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;font-size:9px; }
 .teams-participants span { width:22px;height:22px;line-height:22px;margin:0; }
 .teams-call-controls { padding:10px 12px 0; }
 .teams-call-controls svg { width:16px;height:16px;margin-bottom:3px; }
 .teams-notes { margin-top:12px; }
 .teams-notes>span { font-size:22px; }
 .teams-visual figcaption { font-size:10px;margin-top:10px;gap:8px; }
 .teams-visual figcaption small { font-size:9px; }
}