/* IED Unit 3 lesson-specific assembly, prototyping, and drawing interactives */
body.immersive-lesson-page .u3-interactive {
  --u3-navy: #0b1f3a;
  --u3-blue: #0c5a91;
  --u3-blue-dark: #073f66;
  --u3-gold: #f3c95c;
  --u3-green: #17653a;
  --u3-red: #9a2f2f;
  --u3-surface: #f7fafc;
  --u3-border: #9db2c4;
  color: var(--u3-navy) !important;
  -webkit-text-fill-color: var(--u3-navy) !important;
}

body.immersive-lesson-page .u3-interactive :is(h2,h3,h4,p,li,label,legend,th,td,span,strong,small,output) {
  color: var(--u3-navy) !important;
  -webkit-text-fill-color: var(--u3-navy) !important;
  opacity: 1 !important;
}

.u3-interactive .u3-intro { max-width: 900px; margin-bottom: 1.25rem; }
.u3-interactive .u3-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr); gap:1.25rem; align-items:start; }
.u3-interactive .u3-workspace.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.u3-interactive .u3-panel { background:#fff; border:2px solid var(--u3-border); border-radius:16px; padding:1rem; min-width:0; }
.u3-interactive .u3-panel.soft { background:var(--u3-surface); }
.u3-interactive .u3-panel h3 { margin-top:0; }
.u3-interactive .u3-visual { background:#fff; border:2px solid #bfd0dc; border-radius:14px; padding:.75rem; min-height:240px; display:grid; place-items:center; overflow:hidden; }
.u3-interactive svg { width:100%; height:auto; max-height:420px; }
.u3-interactive .u3-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.u3-interactive .u3-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.u3-interactive .u3-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.u3-interactive .u3-card { background:#fff; border:2px solid #aebfcc; border-radius:12px; padding:.8rem; min-width:0; }
.u3-interactive .u3-card strong { display:block; margin-bottom:.35rem; }
.u3-interactive .u3-stack { display:grid; gap:.7rem; }
.u3-interactive .u3-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.65fr); gap:.75rem; align-items:center; }
.u3-interactive .u3-note { margin-top:.9rem; background:#fff8da; border:2px solid #e2bf4f; padding:.8rem 1rem; border-radius:12px; }
.u3-interactive .u3-feedback { margin-top:1rem; border-left:6px solid var(--u3-blue); background:#eaf4fb; padding:.85rem 1rem; border-radius:10px; min-height:3rem; }
.u3-interactive .u3-feedback[data-state="success"] { border-left-color:var(--u3-green); background:#e6f5ec; }
.u3-interactive .u3-feedback[data-state="error"] { border-left-color:var(--u3-red); background:#faeaea; }
.u3-interactive .u3-button-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }

body.immersive-lesson-page .u3-interactive button {
  min-height:44px; border:2px solid var(--u3-blue-dark); border-radius:10px; padding:.65rem .95rem;
  background:var(--u3-blue); color:#fff !important; -webkit-text-fill-color:#fff !important;
  font:inherit; font-weight:800; cursor:pointer;
}
body.immersive-lesson-page .u3-interactive button * { color:inherit !important; -webkit-text-fill-color:inherit !important; }
body.immersive-lesson-page .u3-interactive button.secondary,
body.immersive-lesson-page .u3-interactive button.choice-button {
  background:#fff; color:var(--u3-navy) !important; -webkit-text-fill-color:var(--u3-navy) !important; border-color:#aebfcc;
}
body.immersive-lesson-page .u3-interactive button.choice-button { width:100%; text-align:left; }
body.immersive-lesson-page .u3-interactive button.choice-button[aria-pressed="true"],
body.immersive-lesson-page .u3-interactive button.selected { background:#dcecf8; border-color:var(--u3-blue); }
body.immersive-lesson-page .u3-interactive button:hover { filter:brightness(.95); }
body.immersive-lesson-page .u3-interactive :is(button,input,select,textarea):focus-visible { outline:4px solid #ffbf47 !important; outline-offset:2px; }

.u3-interactive label { display:grid; gap:.35rem; font-weight:700; }
.u3-interactive select,
.u3-interactive input[type="text"],
.u3-interactive input[type="number"],
.u3-interactive textarea {
  width:100%; min-height:44px; border:2px solid #879dac; border-radius:10px; padding:.6rem .7rem; background:#fff; color:#0b1f3a; font:inherit;
}
.u3-interactive input[type="range"] { width:100%; accent-color:var(--u3-blue); }
.u3-interactive input[type="checkbox"], .u3-interactive input[type="radio"] { width:1.15rem; height:1.15rem; accent-color:var(--u3-blue); }
.u3-interactive fieldset { border:0; padding:0; margin:0; min-width:0; }
.u3-interactive legend { font-weight:800; margin-bottom:.7rem; }
.u3-interactive .u3-option-list { display:grid; gap:.65rem; }
.u3-interactive .u3-option { display:flex; gap:.65rem; align-items:flex-start; border:2px solid #c9d5de; border-radius:12px; padding:.75rem; background:#fff; }
.u3-interactive .u3-option:hover { border-color:var(--u3-blue); }

.u3-interactive .u3-table-wrap { overflow-x:auto; }
.u3-interactive table { border-collapse:collapse; width:100%; background:#fff; }
.u3-interactive th,.u3-interactive td { border:1px solid #aebfcc; padding:.7rem; text-align:left; vertical-align:middle; }
.u3-interactive th { background:#e8f0f5; font-weight:800; }
.u3-interactive tr[data-state="correct"] { background:#e6f5ec; }
.u3-interactive tr[data-state="incorrect"] { background:#faeaea; }

.u3-interactive .u3-hotspot-layout { position:relative; aspect-ratio:16/9; background:#e9eef2; border:2px solid #8fa4b3; border-radius:12px; overflow:hidden; }
.u3-interactive .u3-hotspot-layout .toolbar { position:absolute; left:0; right:0; top:0; height:20%; background:#d4dee5; border-bottom:2px solid #8fa4b3; }
.u3-interactive .u3-hotspot-layout .browser { position:absolute; left:0; top:20%; bottom:16%; width:23%; background:#f7fafc; border-right:2px solid #8fa4b3; }
.u3-interactive .u3-hotspot-layout .canvas { position:absolute; left:23%; right:0; top:20%; bottom:16%; background:linear-gradient(135deg,#fff,#e9f1f6); }
.u3-interactive .u3-hotspot-layout .timeline { position:absolute; left:0; right:0; bottom:0; height:16%; background:#d4dee5; border-top:2px solid #8fa4b3; }
.u3-interactive .u3-hotspot-layout .viewcube { position:absolute; right:4%; top:28%; width:14%; aspect-ratio:1; background:#fff; border:2px solid #617b8d; transform:rotate(30deg); }
.u3-interactive .u3-hotspot { position:absolute; z-index:4; padding:.45rem .55rem !important; min-height:36px !important; font-size:.85rem; background:#0c5a91 !important; }
.u3-interactive .u3-hotspot[data-hit="true"] { background:#17653a !important; }
.u3-interactive .hot-toolbar { left:42%; top:6%; }
.u3-interactive .hot-browser { left:5%; top:43%; }
.u3-interactive .hot-timeline { left:42%; bottom:3%; }
.u3-interactive .hot-viewcube { right:2%; top:43%; }

.u3-interactive .u3-model-stage { position:relative; min-height:300px; background:linear-gradient(#fff,#eef3f6); border:2px solid #aebfcc; border-radius:14px; overflow:hidden; }
.u3-interactive .u3-model-stage svg { position:absolute; inset:0; width:100%; height:100%; }
.u3-interactive .u3-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.u3-interactive .u3-metric { border:2px solid #b8c8d3; border-radius:12px; padding:.7rem; background:#fff; text-align:center; }
.u3-interactive .u3-metric output { display:block; font-size:1.35rem; font-weight:900; }
.u3-interactive .u3-sort-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.u3-interactive .u3-sort-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem; align-items:center; border:2px solid #aebfcc; border-radius:12px; background:#fff; padding:.7rem; }
.u3-interactive .u3-sort-controls { display:flex; gap:.35rem; }
.u3-interactive .u3-sort-controls button { min-width:44px; padding:.4rem !important; }
.u3-interactive .u3-status-chip { display:inline-block; border-radius:999px; padding:.25rem .55rem; background:#e8f0f5; border:1px solid #9db2c4; font-weight:800; }
.u3-interactive .u3-clearance-list { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem; }
.u3-interactive .u3-clearance-list span { background:#e8f0f5; border:2px solid #9db2c4; border-radius:999px; padding:.4rem .65rem; font-weight:800; }

@media (max-width:900px) {
  .u3-interactive .u3-workspace,.u3-interactive .u3-workspace.equal { grid-template-columns:1fr; }
  .u3-interactive .u3-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .u3-interactive .u3-grid,.u3-interactive .u3-grid.two,.u3-interactive .u3-grid.four { grid-template-columns:1fr; }
  .u3-interactive .u3-row { grid-template-columns:1fr; }
  .u3-interactive .u3-metric-grid { grid-template-columns:1fr; }
  .u3-interactive .u3-hotspot { font-size:.72rem; padding:.3rem .4rem !important; }
}
@media (prefers-reduced-motion:reduce) {
  .u3-interactive * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.u3-interactive .u3-assembly-stage { position:relative; min-height:320px; background:linear-gradient(#fff,#edf3f7); border:2px solid #aebfcc; border-radius:14px; overflow:hidden; }
.u3-interactive .u3-assembly-stage svg { position:absolute; inset:0; width:100%; height:100%; }
.u3-interactive .u3-part { transition:transform .2s ease; }
.u3-interactive .u3-status-good { color:#17653a !important; font-weight:900; }
.u3-interactive .u3-status-bad { color:#9a2f2f !important; font-weight:900; }
.u3-interactive .u3-sheet { aspect-ratio:11/8.5; background:#fff; border:3px solid #0b1f3a; position:relative; border-radius:4px; overflow:hidden; }
.u3-interactive .u3-sheet-zone { position:absolute; border:2px dashed #7c94a5; display:grid; place-items:center; font-weight:800; background:#f7fafc; }
.u3-interactive .u3-sheet-zone[data-hit="true"] { border-style:solid; border-color:#17653a; background:#e6f5ec; }
.u3-interactive .u3-balloon { display:inline-grid; place-items:center; width:2rem; height:2rem; border:2px solid #0b1f3a; border-radius:50%; font-weight:900; background:#fff; }
body.immersive-lesson-page .u3-interactive button.u3-sheet-zone {
  position:absolute; min-height:0; padding:.35rem; background:#f7fafc; color:#0b1f3a !important;
  -webkit-text-fill-color:#0b1f3a !important; border:2px dashed #7c94a5; border-radius:4px;
}
body.immersive-lesson-page .u3-interactive button.u3-sheet-zone[data-hit="true"] { background:#e6f5ec; border-style:solid; border-color:#17653a; }
html body.immersive-lesson-page main#main .u3-interactive button:not(.choice-button):not(.u3-sheet-zone) {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.immersive-lesson-page main#main .u3-interactive button.choice-button {
  color:#0b1f3a !important;
  -webkit-text-fill-color:#0b1f3a !important;
}
body.immersive-lesson-page .u3-interactive button.u3-sheet-zone {
  font-size:.76rem;
  line-height:1.15;
  overflow-wrap:anywhere;
  white-space:normal;
}