/* AO Foundations practice labs — scoped to avoid changing existing lessons. */
.ao-has-lab #topbar { flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; row-gap:10px; }
.ao-has-lab #topbar .module-title { white-space:normal; flex:1; min-width:200px; }
.ao-has-lab .tab-nav { width:100%; margin-left:0; overflow-x:auto; flex-shrink:0; }
.ao-has-lab .tab-btn { flex-shrink:0; }
#practice-view { overflow-y:auto; display:none; }
#practice-view.active { display:block; }
.ao-lab { --cyan:#68d6f6; --orange:#ffba70; --ink:#e5eff8; --muted:#abc1d4; --line:#294660; color:var(--ink); font-family:'Segoe UI',Arial,sans-serif; max-width:1240px; margin:auto; padding:30px 28px 70px; line-height:1.55; }
.ao-lab * { box-sizing:border-box; }
.ao-lab .ao-eyebrow { color:var(--orange); font-size:11px; letter-spacing:2px; font-weight:800; text-transform:uppercase; }
.ao-lab h1 { font-size:clamp(25px,3vw,36px); letter-spacing:-.7px; margin:6px 0 10px; color:#f3f8fc; line-height:1.15; }
.ao-lab h2 { font-size:19px; margin:0 0 10px; color:#f3f8fc; }
.ao-lab h3 { font-size:15px; color:var(--cyan); margin:0 0 7px; }
.ao-lab p { margin:0 0 12px; font-size:14px; }
.ao-lab .ao-intro { color:var(--muted); max-width:800px; font-size:15px; }
.ao-lab button { font:600 13px/1.4 'Segoe UI',Arial,sans-serif; color:var(--ink); border:1px solid #40617e; background:#132d47; border-radius:7px; padding:11px 14px; min-height:44px; cursor:pointer; text-align:left; }
.ao-lab button:hover { border-color:var(--cyan); background:#1a3b57; }
.ao-lab button:focus-visible,.ao-lab a:focus-visible,.ao-lab summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.ao-lab button[aria-pressed=true] { border-color:var(--cyan); background:#194963; color:white; box-shadow:inset 3px 0 var(--cyan); }
.ao-lab button:disabled { opacity:.58; cursor:default; }
.ao-lab .ao-primary { background:#15619b; border-color:#68c8ed; }
.ao-lab .ao-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 16px; align-items:center; }
.ao-lab .ao-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:18px; align-items:start; }
.ao-lab .ao-card { background:#0e2238; border:1px solid var(--line); border-radius:12px; padding:20px; min-width:0; }
.ao-lab .ao-canvas { background:radial-gradient(ellipse at 45% 30%,#16324b,#0a1b2e); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ao-lab .ao-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
.ao-lab svg { width:100%; min-width:650px; height:auto; display:block; }
.ao-lab svg text { font-family:'Segoe UI',Arial,sans-serif; fill:#e5eff8; font-size:15px; }
.ao-lab svg .ao-svg-small { font-size:12px; fill:#adc7d9; }
.ao-lab svg .ao-svg-title { font-size:11px; letter-spacing:2px; fill:#9bb9ce; font-weight:700; }
.ao-lab .ao-caption { padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; margin:0; }
.ao-lab .ao-mobile-hint { display:none; font-size:12px; color:var(--muted); margin:0 0 8px; }
.ao-lab .ao-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.ao-lab .ao-chip { font-size:12px; padding:9px 12px; }
.ao-lab .ao-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.ao-lab .ao-note { background:#142c42; border-left:3px solid var(--orange); border-radius:0 7px 7px 0; padding:12px 14px; margin-top:16px; font-size:13px; }
.ao-lab .ao-feedback { border-left:3px solid var(--cyan); background:#123149; padding:12px 14px; margin-top:14px; font-size:14px; min-height:58px; border-radius:0 7px 7px 0; }
.ao-lab .ao-feedback.good { border-color:#7dddb3; background:#123b34; }
.ao-lab .ao-feedback.retry { border-color:var(--orange); background:#3b2c20; }
.ao-lab .ao-check { margin-top:22px; }
.ao-lab .ao-options { display:grid; gap:8px; margin-top:12px; }
.ao-lab .ao-status { display:inline-block; border:1px solid #477083; color:#a8dff1; border-radius:20px; font-size:11px; padding:4px 10px; margin-bottom:12px; font-weight:700; }
.ao-lab .ao-muted { color:var(--muted); font-size:12px; }
.ao-lab .ao-number { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#254a65; margin-right:6px; color:white; }
.ao-lab .ao-progress { height:5px; background:#28465c; border-radius:6px; margin:12px 0 16px; overflow:hidden; }
.ao-lab .ao-progress i { height:100%; display:block; background:var(--cyan); width:0; transition:width .2s; }
.ao-lab .ao-steps { list-style:none; padding:0; margin:14px 0; font-size:13px; }
.ao-lab .ao-steps li { padding:8px 0; border-bottom:1px solid var(--line); }
.ao-lab .ao-steps li.done { color:#86dfb4; }
.ao-lab .ao-steps li.current { color:var(--orange); font-weight:700; }
.ao-lab .ao-sources { border-top:1px solid var(--line); margin-top:28px; padding-top:16px; font-size:12px; color:var(--muted); }
.ao-lab .ao-sources summary { cursor:pointer; padding:8px 0; }
.ao-lab .ao-sources ul { padding-left:20px; }
.ao-lab a { color:var(--cyan); }
.ao-lab [hidden] { display:none!important; }
.ao-lab .ao-hotspot { cursor:pointer; }
.ao-lab .ao-hotspot:focus-visible { outline:none; }
.ao-lab .ao-hotspot:focus-visible .ao-hit,.ao-lab .ao-hotspot.selected .ao-hit { stroke:var(--orange); stroke-width:3; }
.ao-lab .ao-hit { fill:transparent; stroke:transparent; stroke-width:2; }
.ao-lab .ao-flow { stroke:#67d9ff; stroke-width:5; stroke-dasharray:10 9; fill:none; animation:ao-flow 1.5s linear infinite; animation-play-state:paused; }
.ao-lab.ao-animate .ao-flow { animation-play-state:running; }
.ao-lab .ao-bubble { fill:#ffcb84; stroke:#ffedcf; transform-box:fill-box; transform-origin:center; animation:ao-bubble 2.4s linear infinite; animation-play-state:paused; }
.ao-lab.ao-animate .ao-bubble { animation-play-state:running; }
.view:not(.active) .ao-lab .ao-flow,.view:not(.active) .ao-lab .ao-bubble { animation-play-state:paused; }
.ao-lab .ao-traced { stroke:#7cdeb5!important; }
.ao-lab .ao-target.done .ao-hit { fill:#79dfb516; stroke:#7cdeb5; }
.ao-lab .ao-hotspot circle.ao-pin { fill:#163b58; stroke:#72d2f3; stroke-width:2; }
.ao-lab .ao-hotspot.selected circle.ao-pin { fill:#75502b; stroke:#ffc27e; }
.ao-lab .ao-hotspot.done circle.ao-pin { fill:#225940; stroke:#8be9ba; }
.ao-lab .ao-report { white-space:normal; border:1px solid #46728a; padding:18px; border-radius:8px; background:#122f43; margin-top:14px; }
.ao-lab .ao-report p { margin-bottom:10px; }
@keyframes ao-flow { to { stroke-dashoffset:-38; } }
@keyframes ao-bubble { 0% { transform:translate(0,0) scale(.4); opacity:.25; } 55% { transform:translate(32px,-25px) scale(1.2); opacity:1; } 85%,100% { transform:translate(68px,-64px) scale(.1); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .ao-lab .ao-flow,.ao-lab .ao-bubble { animation:none!important; } .ao-lab .ao-progress i { transition:none; } }
@media(max-width:950px) { .ao-lab .ao-layout { grid-template-columns:1fr; } .ao-lab .ao-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) { .ao-lab { padding:22px 16px 50px; } .ao-lab .ao-card { padding:16px; } .ao-lab .ao-mobile-hint { display:block; } .ao-lab .ao-toolbar { margin-top:16px; } .ao-lab .ao-grid { grid-template-columns:1fr 1fr; } }