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

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

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

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

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

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

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

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

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


/* IED Unit 2 Fusion and fabrication video help */
.video-help-card {
  overflow: hidden;
  border: 1px solid rgba(11, 31, 58, 0.16);
  box-shadow: 0 18px 40px rgba(11, 31, 58, 0.10);
}
.video-help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.75fr);
  gap: 1.35rem;
  align-items: center;
}
.video-help-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #061b31;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.video-help-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-help-copy h3 {
  margin: .45rem 0 .65rem;
  color: #0b1f3a;
}
.video-help-copy p {
  margin: 0 0 1rem;
}
.video-help-note {
  margin-top: .8rem;
  font-size: .92rem;
  color: #405469;
}
@media (max-width: 820px) {
  .video-help-grid { grid-template-columns: 1fr; }
}