/* Module 01 is intentionally isolated from the catalogue and simulator. */

.m01-shell { min-height: 100vh; color: #172033; background: rgba(248, 250, 252, .76); }
.m01-topbar { min-height: 64px; padding: 10px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e7eb; }
.m01-brand img { height: 42px; width: auto; display: block; }
.m01-top-actions { display: flex; align-items: center; gap: 16px; }
.m01-simulation, .m01-exit { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.m01-simulation { padding: 7px 11px; color: #1e3a5f; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; }
.m01-exit { color: #1e3a5f; text-decoration: none; }
.m01-exit:hover, .m01-exit:focus-visible { color: #c2410c; text-decoration: underline; }
.m01-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 80px; }

.m01-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 42px; align-items: end; padding: clamp(30px, 5vw, 54px); color: #fff; background: linear-gradient(145deg, #081627, #1e3a5f 58%, #183b63); border-radius: 24px; box-shadow: 0 18px 48px rgba(10, 22, 40, .18); }
.m01-hero h1 { margin: 8px 0 14px; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -.025em; }
.m01-lede { max-width: 750px; margin: 0; color: rgba(255,255,255,.76); font: 16px/1.75 Inter, sans-serif; }
.m01-kicker { margin: 0; color: #f97316; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.m01-hero-action { width: fit-content; margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; color: #fff; background: #f97316; border-radius: 11px; font-size: 13px; font-weight: 700; text-decoration: none; }
.m01-hero-action:hover, .m01-hero-action:focus-visible { background: #ea580c; }

/* ---------- Shared optional Mission Next launch cards --------------------
   These projects are practice extensions, but they should still feel like
   real launch surfaces. Keep the action treatment aligned with Module 01's
   orange launch button while preserving the explanatory card layout. ------- */
.mn-additional-labs { margin-top: 28px; padding: clamp(22px, 4vw, 34px); background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 8px 24px rgba(30, 58, 95, .05); }
.mn-additional-labs-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mn-additional-labs-kicker { margin: 0; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.mn-additional-labs-heading h2 { margin: 5px 0 0; color: #1e3a5f; font-size: 22px; line-height: 1.25; }
.mn-additional-labs-heading > span { flex: 0 0 auto; padding: 5px 9px; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; font: 700 10px/1.2 Inter, sans-serif; }
.mn-additional-labs-copy { max-width: 760px; margin: 10px 0 18px; color: #64748b; font: 13px/1.65 Inter, sans-serif; }
.mn-additional-labs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.mn-additional-lab-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 16px; color: inherit; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 14px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease; }
.mn-additional-lab-card:hover, .mn-additional-lab-card:focus-visible { background: #fff; border-color: #f97316; box-shadow: 0 8px 18px rgba(249, 115, 22, .12); transform: translateY(-1px); }
.mn-additional-lab-card:focus-visible { outline: 3px solid rgba(249, 115, 22, .3); outline-offset: 2px; }
.mn-additional-lab-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #f97316; border-radius: 11px; font-size: 21px; }
.mn-additional-lab-copy { min-width: 0; }
.mn-additional-lab-copy strong, .mn-additional-lab-copy small { display: block; }
.mn-additional-lab-copy strong { color: #1e3a5f; font-size: 13px; line-height: 1.35; }
.mn-additional-lab-copy small { margin-top: 4px; color: #64748b; font: 11px/1.45 Inter, sans-serif; }
.mn-additional-lab-cta { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; color: #fff; background: #f97316; border-radius: 9px; font: 700 10px/1.2 'Space Grotesk', sans-serif; white-space: nowrap; }
.mn-additional-lab-card:hover .mn-additional-lab-cta, .mn-additional-lab-card:focus-visible .mn-additional-lab-cta { background: #ea580c; }
@media (max-width: 620px) {
  .mn-additional-labs-heading { display: block; }
  .mn-additional-labs-heading > span { display: inline-block; margin-top: 10px; }
  .mn-additional-lab-card { grid-template-columns: 38px minmax(0, 1fr); }
  .mn-additional-lab-icon { width: 38px; height: 38px; font-size: 19px; }
  .mn-additional-lab-cta { grid-column: 2; justify-self: start; }
}

/* ---------- Standardized primary Guided/Assessment launch cards ----------
   Used by every module's Guided Lab and Assessment Lab sections so the real
   imported-lab title is always visible on the card, with a consistent
   "Launch lab" action. One card per lab; multiple cards of the same kind
   (Guided or Assessment) sit side by side and are numbered via the eyebrow
   label ("Guided Lab 1" / "Guided Lab 2"). ------------------------------- */
.mn-lab-launch-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 14px 0; }
.mn-lab-launch-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; color: inherit; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 16px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease; }
.mn-lab-launch-card:hover, .mn-lab-launch-card:focus-visible { background: #fff; border-color: #f97316; box-shadow: 0 10px 22px rgba(249, 115, 22, .14); transform: translateY(-1px); }
.mn-lab-launch-card:focus-visible { outline: 3px solid rgba(249, 115, 22, .3); outline-offset: 2px; }
.mn-lab-launch-eyebrow { color: #f97316; font: 800 10px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mn-lab-launch-title { color: #1e3a5f; font: 700 15px/1.35 'Space Grotesk', sans-serif; }
.mn-lab-launch-detail { color: #64748b; font: 12px/1.5 Inter, sans-serif; }
.mn-lab-launch-cta { width: fit-content; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: #fff; background: #f97316; border-radius: 9px; font: 700 11px/1.2 'Space Grotesk', sans-serif; white-space: nowrap; }
.mn-lab-launch-card:hover .mn-lab-launch-cta, .mn-lab-launch-card:focus-visible .mn-lab-launch-cta { background: #ea580c; }
.mn-lab-launch-wrap { display: flex; flex-direction: column; min-width: 0; }
.mn-lab-launch-wrap .mn-lab-launch-card { flex: 1; }
.mn-lab-gate { margin-top: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; }
.mn-lab-gate-note { width: 100%; padding: 8px 10px; color: #1e293b; background: #fff; border: 1px solid #dbe3ed; border-radius: 8px; font: 13px/1.5 Inter, sans-serif; resize: vertical; }
.mn-lab-gate-toggle { align-self: flex-start; padding: 7px 12px; color: #b45309; background: #fff7ed; border: 1px solid #fdba74; border-radius: 999px; font: 700 11px/1.2 'Space Grotesk', sans-serif; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.mn-lab-gate-toggle:hover, .mn-lab-gate-toggle:focus-visible { background: #ffedd5; }
.mn-lab-gate-toggle.is-complete { color: #166534; background: #f0fdf4; border-color: #86efac; }
.mn-lab-gate-status { align-self: flex-start; padding: 7px 12px; color: #b45309; background: #fff7ed; border: 1px solid #fdba74; border-radius: 999px; font: 700 11px/1.2 'Space Grotesk', sans-serif; }
.mn-lab-gate-status.is-complete { color: #166534; background: #f0fdf4; border-color: #86efac; }
.m01-progress { min-width: 310px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; overflow: hidden; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; }
.m01-progress div { padding: 14px 16px; background: rgba(8,22,39,.48); }
.m01-progress dt { color: rgba(255,255,255,.56); font: 10px/1.3 Inter, sans-serif; }
.m01-progress dd { margin: 5px 0 0; font-size: 13px; font-weight: 700; white-space: nowrap; }

.m01-checklist { margin-top: 22px; padding: 28px; background: #fff; border: 1px solid #dbe3ed; border-radius: 16px; box-shadow: 0 8px 24px rgba(30,58,95,.06); }
.m01-checklist h2 { margin: 6px 0 18px; color: #1e3a5f; font-size: 20px; line-height: 1.4; }
.m01-checklist-list { display: grid; gap: 1px; margin: 0 0 18px; padding: 0; list-style: none; overflow: hidden; background: #dbe3ed; border-radius: 12px; }
.m01-checklist-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; background: #fbfdff; color: #475569; font: 14px/1.4 Inter, sans-serif; transition: background-color .2s ease; }
.m01-checklist-item.is-complete { background: #f0fdf4; }
.m01-checklist-item.is-in-progress { background: #fffbf0; }
.m01-checklist-number { width: 32px; flex: 0 0 auto; text-align: center; color: #94a3b8; font-size: 11px; font-weight: 800; }
.m01-checklist-content { display: grid; gap: 4px; }
.m01-checklist-content strong { color: #1e3a5f; font-size: 14px; font-weight: 600; }
.m01-checklist-status { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.m01-checklist-item.is-complete .m01-checklist-status { color: #166534; background: #dcfce7; }
.m01-checklist-item.is-in-progress .m01-checklist-status { color: #7c2d12; background: #fff7ed; }
.m01-checklist-item.is-not-started .m01-checklist-status { color: #64748b; background: #f1f5f9; }
.m01-checklist-duration { text-align: right; flex: 0 0 auto; color: #64748b; font-size: 13px; font-weight: 600; min-width: 100px; }
.m01-checklist-total { margin: 0; padding: 16px; color: #1e3a5f; font: 14px/1.6 Inter, sans-serif; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 10px; }
.m01-checklist-total strong { color: #1e3a5f; font-weight: 700; }

.m01-objective { margin-top: 22px; display: flex; align-items: flex-start; gap: 16px; padding: 22px; background: #fff; border: 1px solid #dbe3ed; border-radius: 16px; box-shadow: 0 8px 24px rgba(30,58,95,.06); }
.m01-objective-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #f97316; border-radius: 12px; font-size: 21px; }
.m01-objective h2 { margin: 4px 0 8px; color: #1e3a5f; font-size: 20px; line-height: 1.4; }
.m01-objective p:last-child { margin: 0; color: #64748b; font: 14px/1.65 Inter, sans-serif; }

.m01-section { scroll-margin-top: 148px; margin-top: 24px; padding: clamp(23px, 4vw, 38px); background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 8px 24px rgba(30,58,95,.05); }
.m01-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.m01-section-heading > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #1e3a5f; border-radius: 11px; font-weight: 800; }
.m01-section-heading > div { min-width: 0; }
.m01-section-heading h2 { margin: 3px 0 0; color: #1e3a5f; font-size: 23px; line-height: 1.25; }
.m01-section-collapse { width: 36px; height: 36px; margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; padding: 0; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 22px; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.m01-section-collapse:hover { color: #1e3a5f; background: #f1f5f9; border-color: #cbd5e1; }
.m01-section-collapse:focus-visible { outline: 3px solid rgba(249, 115, 22, .32); outline-offset: 2px; }

/* Sources & Further Reading: reference material, not a graded step in the
   1-4 Learn/Practice/Prove/Review sequence above — set apart with extra
   spacing, a muted dashed border, and a book icon instead of a step number. */
.m01-section-supplemental { margin-top: 44px; background: #f8fafc; border: 1px dashed #cbd5e1; box-shadow: none; }
.m01-section-supplemental .m01-section-heading > span { background: #64748b; font-size: 18px; }
.m01-section-supplemental .m01-kicker { color: #64748b; }
.m01-section-collapse[aria-expanded="true"] { transform: rotate(180deg); }
/* Main module cards use an explicit, consistent chevron affordance. Module 01
   has button chevrons in its section headers; the remaining SOC modules use
   native details summaries, so draw the matching control here. */
main[class*="m0"] > [class*="section-collapsible"] > summary::after,
main[class*="m1"] > [class*="section-collapsible"] > summary::after {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  color: #6b7280;
  background: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
main[class*="m0"] > details[class*="section-collapsible"] > summary,
main[class*="m1"] > details[class*="section-collapsible"] > summary {
  display: flex;
  align-items: center;
}
main[class*="m0"] > details[class*="section-collapsible"][open] > summary::after,
main[class*="m1"] > details[class*="section-collapsible"][open] > summary::after {
  transform: rotate(180deg);
  background-color: #eff6ff;
  border-color: #cbd5e1;
}
.m01-instruction, .m01-help, .m01-concept { color: #64748b; font: 14px/1.65 Inter, sans-serif; }
.m01-instruction { margin: -7px 0 20px; }

.m01-lesson-grid { display: grid; gap: 10px; }
.m01-lesson { overflow: hidden; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 14px; }
.m01-companion { padding: 20px; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 14px; }
.m01-companion-label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #1e3a5f; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.m01-companion-title { margin: 0 0 14px; color: #1e3a5f; font-size: 16px; }
.m01-lesson summary { min-height: 88px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.m01-lesson summary::-webkit-details-marker { display: none; }
.m01-lesson summary:hover { background: #f8fafc; }
.m01-lesson[open] { border-color: #93b4d4; background: #fff; box-shadow: 0 5px 15px rgba(30,58,95,.06); }
.m01-lesson-number { color: #94a3b8; font-size: 11px; font-weight: 800; }
.m01-lesson-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #1e3a5f; background: #eaf1f8; border-radius: 10px; font-size: 19px; }
.m01-lesson-title strong, .m01-lesson-title small { display: block; }
.m01-lesson-title strong { color: #1e3a5f; font-size: 15px; }
.m01-lesson-title small { margin-top: 4px; color: #64748b; font: 12px/1.5 Inter, sans-serif; }
/* Same collapse affordance as the curriculum module accordions in
   portal/app.js — a chevron in a 32px grey circle, rotated 180deg when open.
   Two accordion families on the same site should not look like two systems. */
.m01-lesson-chevron {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 999px; background: #f9fafb; border: 1px solid #e5e7eb;
  color: #6b7280; font-size: 20px; transition: transform .2s ease;
}
.m01-lesson[open] .m01-lesson-chevron { transform: rotate(180deg); }
.m01-lesson-body { margin: 0 18px 18px 84px; padding: 17px 19px; color: #475569; background: #f8fafc; border-radius: 11px; font: 14px/1.7 Inter, sans-serif; }
.m01-lesson-body p { margin: 0; }
.m01-lesson-body .m01-takeaway { margin-top: 12px; padding-top: 12px; color: #1e3a5f; border-top: 1px solid #dbe3ed; }
.m01-lesson-complete-badge { width: 24px; height: 24px; display: grid; place-items: center; margin-left: auto; color: #10b981; font-size: 18px; flex: 0 0 auto; }
.m01-lesson-example { margin-top: 14px; padding: 14px 16px; background: #eef6ff; border-left: 3px solid #1e3a5f; border-radius: 0 11px 11px 0; }
.m01-lesson-example-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #1e3a5f; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.m01-lesson-example-label i { font-size: 16px; }
.m01-lesson-example p { margin: 0; color: #334155; font: 13px/1.65 Inter, sans-serif; }
.m01-lesson-check { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dbe3ed; }
.m01-lesson-check h4 { margin: 0 0 14px; color: #1e3a5f; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.m01-quiz-question { margin-bottom: 18px; }
.m01-quiz-question p { margin: 0 0 10px; color: #1e3a5f; font-weight: 600; font-size: 13px; }
.m01-quiz-options { display: grid; gap: 9px; margin: 10px 0 14px; }
.m01-quiz-options label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 8px; cursor: pointer; transition: all .2s ease; }
.m01-quiz-options label:hover { background: #f1f5f9; border-color: #cbd5e1; }
.m01-quiz-options input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
.m01-quiz-options span { display: block; color: #475569; font-size: 13px; line-height: 1.5; }
.m01-quiz-feedback { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; padding: 11px 12px; border-radius: 8px; font-size: 13px; }
.m01-quiz-feedback i { margin-top: 2px; flex: 0 0 auto; font-size: 16px; }
.m01-quiz-feedback.is-correct { background: #dcfce7; border-left: 3px solid #10b981; }
.m01-quiz-feedback.is-correct i { color: #10b981; }
.m01-quiz-feedback.is-correct span { color: #166534; }
.m01-quiz-feedback.is-incorrect { background: #fee2e2; border-left: 3px solid #ef4444; }
.m01-quiz-feedback.is-incorrect i { color: #ef4444; }
.m01-quiz-feedback.is-incorrect span { color: #991b1b; }
.m01-quiz-summary { margin-top: 12px; color: #64748b; font-size: 12px; font-weight: 600; }
.m01-lesson-check-btn { display: inline-block; margin-top: 2px; padding: 9px 14px; color: #1e3a5f; background: #eaf1f8; border: 1px solid #cbd5e1; border-radius: 8px; font: 12px/1 Inter, sans-serif; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.m01-lesson-check-btn:hover { background: #dbeafe; border-color: #93b4d4; }
.m01-lesson-check-btn:focus-visible { outline: 3px solid rgba(30, 58, 95, .32); outline-offset: 2px; }
.m01-lesson-task { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dbe3ed; }
.m01-lesson-task h4 { margin: 0 0 14px; color: #1e3a5f; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.m01-lesson-task p { margin: 0 0 10px; color: #1e3a5f; font-weight: 600; font-size: 13px; }
.m01-lesson-task-input { display: block; width: 100%; min-height: 80px; padding: 10px 12px; margin: 10px 0; color: #475569; background: #fbfdff; border: 1px solid #dbe3ed; border-radius: 8px; font: 13px/1.5 Inter, sans-serif; resize: vertical; }
.m01-lesson-task-input:focus { outline: none; border-color: #cbd5e1; background: #fff; box-shadow: 0 0 0 3px rgba(30, 58, 95, .1); }
.m01-lesson-task-submit { display: inline-block; padding: 9px 14px; color: #1e3a5f; background: #eaf1f8; border: 1px solid #cbd5e1; border-radius: 8px; font: 12px/1 Inter, sans-serif; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.m01-lesson-task-submit:hover { background: #dbeafe; border-color: #93b4d4; }
.m01-lesson-task-submit:focus-visible { outline: 3px solid rgba(30, 58, 95, .32); outline-offset: 2px; }
.m01-lesson-task-complete { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 7px 11px; background: #dcfce7; color: #166534; border-radius: 6px; font: 12px/1 Inter, sans-serif; font-weight: 600; }
.m01-lesson-task-complete i { font-size: 14px; }

.m01-references { margin-top: 24px; padding: 23px; display: grid; grid-template-columns: .85fr 1.35fr; gap: 28px; color: #fff; background: #0f2741; border-radius: 16px; }
.m01-references h3 { margin: 5px 0 8px; font-size: 19px; }
.m01-references p { margin: 0; color: rgba(255,255,255,.66); font: 13px/1.65 Inter, sans-serif; }
.m01-references ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m01-references li { padding-left: 14px; border-left: 2px solid rgba(249,115,22,.75); }
.m01-references a, .m01-references span { display: block; }
.m01-references a { width: fit-content; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.m01-references a:hover, .m01-references a:focus-visible { color: #fdba74; text-decoration: underline; }
.m01-references span { margin-top: 3px; color: rgba(255,255,255,.6); font: 11px/1.5 Inter, sans-serif; }

.m01-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m01-flow article { position: relative; padding: 20px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px; }
.m01-flow article:not(:last-child)::after { content: '→'; position: absolute; z-index: 2; top: 45%; right: -17px; width: 22px; height: 22px; display: grid; place-items: center; color: #f97316; background: #fff; border: 1px solid #fed7aa; border-radius: 50%; font-size: 12px; }
.m01-flow i { color: #1e3a5f; font-size: 24px; }
.m01-flow h3 { margin: 11px 0 5px; color: #1e3a5f; font-size: 14px; }
.m01-flow p { margin: 0; color: #64748b; font: 12px/1.55 Inter, sans-serif; }
.m01-tool-translation { margin-top: 18px; padding: 18px; color: #334155; background: #fff7ed; border-left: 3px solid #f97316; border-radius: 0 12px 12px 0; }
.m01-tool-translation > strong { color: #9a3412; font-size: 13px; }
.m01-tool-translation dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.m01-tool-translation dl div { padding: 11px; background: rgba(255,255,255,.8); border-radius: 9px; }
.m01-tool-translation dt { color: #1e3a5f; font-size: 12px; font-weight: 800; }
.m01-tool-translation dd, .m01-tool-translation p { margin: 4px 0 0; color: #64748b; font: 11px/1.5 Inter, sans-serif; }
.m01-tool-translation dd strong { display: block; margin-bottom: 3px; color: #334155; font-weight: 700; }

.m01-lifecycle-wheel { position: relative; width: min(100%, 1000px); height: 650px; margin: 4px auto 0; }
.m01-wheel-track { position: absolute; z-index: 0; top: 50%; left: 50%; width: 390px; height: 390px; transform: translate(-50%, -50%); }
.m01-wheel-track::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -30deg, #1e3a5f 0deg 56deg, transparent 56deg 60deg, #f97316 60deg 116deg, transparent 116deg 120deg, #2f608e 120deg 176deg, transparent 176deg 180deg, #ea580c 180deg 236deg, transparent 236deg 240deg, #3e739f 240deg 296deg, transparent 296deg 300deg, #c2410c 300deg 356deg, transparent 356deg 360deg); -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 100%); mask: radial-gradient(circle, transparent 0 56%, #000 57% 100%); filter: drop-shadow(0 9px 15px rgba(30,58,95,.16)); transform: rotate(var(--wheel-rotation)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.m01-wheel-track > span { --wheel-angle: calc((var(--wheel-step) * 60deg) + 27deg); position: absolute; z-index: 2; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-181px); }
.m01-wheel-track > span i { width: 28px; height: 28px; display: grid; place-items: center; color: #1e3a5f; background: #fff; border: 2px solid currentColor; border-radius: 50%; font-size: 19px; box-shadow: 0 3px 8px rgba(15,39,65,.18); }
.m01-wheel-track > span:nth-child(even) i { color: #ea580c; }
.m01-wheel-hub { position: absolute; z-index: 1; inset: 25%; display: grid; place-content: center; justify-items: center; padding: 20px; color: #fff; background: linear-gradient(145deg, #0f2741, #1e3a5f); border: 7px solid #eaf1f8; border-radius: 50%; text-align: center; box-shadow: 0 10px 24px rgba(15,39,65,.22); }
.m01-wheel-hub > i { color: #fdba74; font-size: 31px; }
.m01-wheel-hub strong, .m01-wheel-hub small { display: block; }
.m01-wheel-hub strong { margin-top: 7px; font-size: 17px; line-height: 1.2; }
.m01-wheel-hub small { margin-top: 5px; color: rgba(255,255,255,.66); font: 10px/1.35 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.m01-lifecycle { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; list-style: none; }
.m01-lifecycle li { --phase-color: #1e3a5f; position: absolute; width: clamp(220px, 26%, 260px); min-height: 84px; padding: 15px 16px 16px; background: rgba(255,255,255,.98); border: 1px solid #dbe3ed; border-top: 4px solid var(--phase-color); border-radius: 13px; box-shadow: 0 8px 20px rgba(30,58,95,.09); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.m01-lifecycle li:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.m01-lifecycle li:nth-child(2) { --phase-color: #f97316; top: 105px; right: 0; border-color: #fed7aa; border-top-color: var(--phase-color); background: #fffaf5; }
.m01-lifecycle li:nth-child(3) { --phase-color: #2f608e; right: 0; bottom: 105px; }
.m01-lifecycle li:nth-child(4) { --phase-color: #ea580c; bottom: 0; left: 50%; transform: translateX(-50%); }
.m01-lifecycle li:nth-child(5) { --phase-color: #3e739f; bottom: 105px; left: 0; }
.m01-lifecycle li:nth-child(6) { --phase-color: #c2410c; top: 105px; left: 0; }
.m01-lifecycle li.is-active { border-color: var(--phase-color); background: #fff; box-shadow: 0 13px 30px rgba(30,58,95,.18), 0 0 0 3px color-mix(in srgb, var(--phase-color) 16%, transparent); }
.m01-phase-button { width: 100%; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.m01-phase-heading { display: grid; grid-template-columns: 28px 27px minmax(0, 1fr) 20px; align-items: center; gap: 8px; }
.m01-phase-heading > span { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--phase-color); border-radius: 50%; font-size: 11px; font-weight: 800; }
.m01-phase-heading > i { color: var(--phase-color); font-size: 21px; }
.m01-phase-heading > .m01-phase-title { width: auto; height: auto; display: block; color: #1e3a5f; background: transparent; border-radius: 0; font-size: 14px; line-height: 1.2; text-align: left; }
.m01-phase-heading > .m01-phase-chevron { color: #94a3b8; font-size: 19px; transition: transform .2s; }
.m01-lifecycle li.is-active .m01-phase-chevron { color: var(--phase-color); transform: rotate(180deg); }
.m01-phase-detail { animation: m01-phase-open .24s ease-out; }
.m01-phase-detail[hidden] { display: none; }
.m01-lifecycle p { margin: 9px 0 0; color: #64748b; font: 11px/1.5 Inter, sans-serif; }
@keyframes m01-phase-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .m01-wheel-track::before, .m01-phase-chevron, .m01-triage-track::before, .m01-triage-chevron { transition: none; }
  .m01-phase-detail, .m01-triage-detail { animation: none; }
}
.m01-concept { margin: 17px 0 0; padding: 15px 17px; background: #eef6ff; border-left: 3px solid #1e3a5f; border-radius: 0 11px 11px 0; }

.m01-triage-wheel { position: relative; width: min(100%, 960px); height: 620px; margin: 4px auto 0; }
.m01-triage-track { position: absolute; z-index: 0; top: 50%; left: 50%; width: 360px; height: 360px; transform: translate(-50%, -50%); }
.m01-triage-track::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -36deg, #1e3a5f 0deg 68deg, transparent 68deg 72deg, #f97316 72deg 140deg, transparent 140deg 144deg, #2f608e 144deg 212deg, transparent 212deg 216deg, #ea580c 216deg 284deg, transparent 284deg 288deg, #3e739f 288deg 356deg, transparent 356deg 360deg); -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 100%); mask: radial-gradient(circle, transparent 0 56%, #000 57% 100%); filter: drop-shadow(0 9px 15px rgba(30,58,95,.16)); transform: rotate(var(--triage-wheel-rotation)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.m01-triage-track > span { --triage-wheel-angle: calc((var(--triage-wheel-step) * 72deg) + 32deg); position: absolute; z-index: 2; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%) rotate(var(--triage-wheel-angle)) translateY(-166px); }
.m01-triage-track > span i { width: 28px; height: 28px; display: grid; place-items: center; color: #1e3a5f; background: #fff; border: 2px solid currentColor; border-radius: 50%; font-size: 19px; box-shadow: 0 3px 8px rgba(15,39,65,.18); }
.m01-triage-track > span:nth-child(even) i { color: #ea580c; }
.m01-triage-hub { position: absolute; z-index: 1; inset: 25%; display: grid; place-content: center; justify-items: center; padding: 20px; color: #fff; background: linear-gradient(145deg, #0f2741, #1e3a5f); border: 7px solid #eaf1f8; border-radius: 50%; text-align: center; box-shadow: 0 10px 24px rgba(15,39,65,.22); }
.m01-triage-hub > i { color: #fdba74; font-size: 31px; }
.m01-triage-hub strong, .m01-triage-hub small { display: block; }
.m01-triage-hub strong { margin-top: 7px; font-size: 17px; line-height: 1.2; }
.m01-triage-hub small { margin-top: 5px; color: rgba(255,255,255,.66); font: 10px/1.35 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.m01-triage-loop { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; list-style: none; }
.m01-triage-loop li { --triage-color: #1e3a5f; position: absolute; width: clamp(220px, 26%, 250px); min-height: 78px; padding: 15px 16px 16px; background: rgba(255,255,255,.98); border: 1px solid #dbe3ed; border-top: 4px solid var(--triage-color); border-radius: 13px; box-shadow: 0 8px 20px rgba(30,58,95,.09); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.m01-triage-loop li:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.m01-triage-loop li:nth-child(2) { --triage-color: #f97316; top: 118px; right: 0; border-color: #fed7aa; border-top-color: var(--triage-color); background: #fffaf5; }
.m01-triage-loop li:nth-child(3) { --triage-color: #2f608e; right: 104px; bottom: 0; }
.m01-triage-loop li:nth-child(4) { --triage-color: #ea580c; bottom: 0; left: 104px; }
.m01-triage-loop li:nth-child(5) { --triage-color: #3e739f; top: 118px; left: 0; }
.m01-triage-loop li.is-active { border-color: var(--triage-color); background: #fff; box-shadow: 0 13px 30px rgba(30,58,95,.18), 0 0 0 3px color-mix(in srgb, var(--triage-color) 16%, transparent); }
.m01-triage-button { width: 100%; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.m01-triage-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 9px; }
.m01-triage-heading > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--triage-color); border-radius: 50%; font-size: 11px; font-weight: 800; }
.m01-triage-title { color: #1e3a5f; font-size: 14px; font-weight: 800; line-height: 1.2; }
.m01-triage-chevron { color: #94a3b8; font-size: 19px; transition: transform .2s; }
.m01-triage-loop li.is-active .m01-triage-chevron { color: var(--triage-color); transform: rotate(180deg); }
.m01-triage-detail { animation: m01-phase-open .24s ease-out; }
.m01-triage-detail[hidden] { display: none; }
.m01-triage-loop p { margin: 9px 0 0; color: #64748b; font: 11px/1.5 Inter, sans-serif; }
.m01-boundary { margin-top: 17px; display: flex; align-items: flex-start; gap: 12px; padding: 16px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; }
.m01-boundary i { flex: 0 0 auto; margin-top: 1px; font-size: 19px; }
.m01-boundary p { margin: 0; font: 13px/1.6 Inter, sans-serif; }

.m01-lab-section { border-top: 4px solid #f97316; }
.m01-section-body[hidden], .m01-lab-body[hidden] { display: none; }
.m01-lab-brief { display: flex; align-items: flex-start; gap: 13px; margin: -5px 0 20px; padding: 16px; color: #1e3a5f; background: #eef6ff; border: 1px solid #cfe2f7; border-radius: 12px; }
.m01-lab-brief > i { font-size: 22px; }
.m01-lab-brief strong { font-size: 14px; }
.m01-lab-brief p { margin: 4px 0 0; color: #64748b; font: 12px/1.55 Inter, sans-serif; }
.m01-alert-window { overflow: hidden; border: 1px solid #cbd5e1; border-radius: 15px; box-shadow: 0 8px 22px rgba(30,58,95,.07); }
.m01-alert-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; color: rgba(255,255,255,.72); background: #0f2741; font: 11px Inter, sans-serif; }
.m01-alert-toolbar span { display: inline-flex; align-items: center; gap: 6px; }
.m01-single-alert { padding: 22px; background: #fff; }
.m01-alert-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.m01-alert-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #64748b; font: 11px Inter, sans-serif; }
.m01-single-alert h3 { margin: 11px 0 6px; color: #1e3a5f; font-size: 20px; }
.m01-single-alert p { margin: 0; color: #64748b; font: 13px/1.6 Inter, sans-serif; }
.m01-entity-chip { flex: 0 0 auto; padding: 10px 13px; background: #f8fafc; border: 1px solid #dbe3ed; border-radius: 10px; }
.m01-entity-chip span, .m01-entity-chip code { display: block; }
.m01-entity-chip span { color: #64748b; font: 10px Inter, sans-serif; }
.m01-entity-chip code { margin-top: 3px; color: #1e3a5f; font-size: 13px; font-weight: 700; }
.m01-severity { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.m01-severity-medium { color: #9a3412; background: #ffedd5; }
.m01-alert-facts { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 17px 0 0; }
.m01-alert-facts div { padding: 11px 12px; background: #f8fafc; border-radius: 9px; }
.m01-alert-facts dt { color: #64748b; font: 10px Inter, sans-serif; }
.m01-alert-facts dd { margin: 4px 0 0; color: #334155; font: 600 12px/1.45 Inter, sans-serif; }

.m01-coach { margin-top: 17px; display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: #fff; background: linear-gradient(135deg, #1e3a5f, #294f7c); border-radius: 13px; }
.m01-coach-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: #1e3a5f; background: #fff; border-radius: 50%; font-size: 19px; }
.m01-coach h3 { margin: 4px 0 6px; font-size: 16px; }
.m01-coach p:last-child { margin: 0; color: rgba(255,255,255,.72); font: 12px/1.6 Inter, sans-serif; }
.m01-coach p strong { color: #fff; }

.m01-evidence, .m01-worksheet, .m01-worksheet-locked { margin-top: 17px; padding: 22px; background: #f8fafc; border: 1px solid #dbe3ed; border-radius: 15px; }
.m01-panel-heading, .m01-score-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.m01-panel-heading h3, .m01-score-summary h3 { margin: 4px 0 0; color: #1e3a5f; font-size: 19px; }
.m01-evidence-count { color: #64748b; font: 11px Inter, sans-serif; }
.m01-timeline { margin: 20px 0 0; padding: 0; list-style: none; }
.m01-timeline li { position: relative; min-height: 78px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; }
.m01-timeline li:not(:last-child)::before { content: ''; position: absolute; top: 34px; bottom: 0; left: 18px; width: 2px; background: #dbe3ed; }
.m01-timeline-marker { z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: #1e3a5f; border-radius: 50%; }
.m01-timeline .is-reviewed .m01-timeline-marker { background: #15803d; }
.m01-timeline .is-locked .m01-timeline-marker { color: #94a3b8; background: #e2e8f0; }
.m01-timeline time, .m01-timeline strong, .m01-timeline p { display: block; }
.m01-timeline time { color: #f97316; font: 700 10px Inter, sans-serif; }
.m01-timeline strong { margin-top: 2px; color: #1e3a5f; font-size: 13px; }
.m01-timeline p { margin: 3px 0 15px; color: #64748b; font: 11px/1.5 Inter, sans-serif; }
.m01-timeline .is-locked strong, .m01-timeline .is-locked p, .m01-timeline .is-locked time { color: #94a3b8; }
.m01-reveal, .m01-note-starter { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.m01-reveal { min-height: 42px; padding: 10px 15px; color: #fff; background: #1e3a5f; border: 1px solid #1e3a5f; font-size: 12px; }
.m01-reveal:hover, .m01-reveal:focus-visible { background: #142d4b; }
/* Fill-in-the-blank facts. The sentence reads as prose with gaps in it, so a
   student sees the case note they are writing, not a form. */
.m01-timeline .is-active .m01-timeline-marker { background: #f97316; }
.m01-fact-form { margin: 4px 0 18px; padding: 13px 14px; background: #f8fafc; border: 1px solid #dbe3ed; border-radius: 10px; }
.m01-fact-prompt { margin: 0 0 9px; color: #64748b; font: 11px/1.5 Inter, sans-serif; }
.m01-fact-sentence { margin: 0; color: #1e3a5f; font: 13px/2.4 Inter, sans-serif; }
.m01-blank { display: inline-flex; align-items: flex-start; flex-direction: column; vertical-align: middle; max-width: 100%; margin: 0; }
.m01-mask {
  box-sizing: border-box; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
  max-width: 100%; padding: 4px; color: #1e3a5f; background: #fff;
  border: 1px solid #94a3b8; border-bottom-width: 2px; border-radius: 7px;
  line-height: 1;
}
.m01-mask-slot {
  box-sizing: border-box; width: 21px; min-width: 21px; height: 28px; padding: 0;
  color: #1e3a5f; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center; text-transform: none;
}
.m01-mask-slot::placeholder { color: #94a3b8; opacity: .7; }
.m01-mask-slot:focus-visible { position: relative; z-index: 1; outline: 2px solid #f97316; outline-offset: 1px; border-color: #f97316; background: #fff; }
.m01-mask-literal {
  min-width: 9px; color: #334155;
  font: 900 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}
.m01-mask-literal.is-space { min-width: 8px; }
.m01-blank.is-wrong .m01-mask { border-color: #dc2626; background: #fef2f2; }
.m01-blank.is-wrong .m01-mask-slot { border-color: #fca5a5; background: #fff; }
.m01-blank small { margin-top: 2px; color: #94a3b8; font: 9px/1.3 Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.m01-fact-error { margin: 10px 0 0; color: #b91c1c; font: 11px/1.5 Inter, sans-serif; }
.m01-timeline .is-just-correct > div {
  margin: 0 0 12px; padding: 10px 12px; background: #f0fdf4;
  border: 1px solid #86efac; border-radius: 10px;
  animation: m01-correct-pop .55s cubic-bezier(.2, .9, .25, 1.25) both;
}
.m01-fact-success {
  display: flex !important; align-items: center; gap: 7px; margin: 8px 0 0 !important;
  color: #166534 !important; font-weight: 700 !important;
}
.m01-fact-success i { flex: 0 0 auto; color: #16a34a; font-size: 18px; }
@keyframes m01-correct-pop {
  0% { opacity: .35; transform: scale(.96); box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  65% { opacity: 1; transform: scale(1.015); box-shadow: 0 0 0 7px rgba(34,197,94,.13); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.m01-fact-hints { margin: 9px 0 0; padding-left: 16px; color: #64748b; font: 11px/1.6 Inter, sans-serif; }
.m01-fact-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.m01-fact-reopen {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px;
  color: #1e3a5f; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px;
  font: 700 11px Inter, sans-serif; text-decoration: none; cursor: pointer;
}
.m01-fact-reopen:hover { border-color: #1e3a5f; }
.m01-evidence-complete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; font: 12px/1.45 Inter, sans-serif; }
.m01-evidence-complete i { font-size: 19px; }

.m01-worksheet-locked { display: flex; align-items: flex-start; gap: 12px; color: #64748b; background: #f8fafc; border-style: dashed; }
.m01-worksheet-locked > i { font-size: 20px; }
.m01-worksheet-locked strong { color: #1e3a5f; font-size: 13px; }
.m01-worksheet-locked p { margin: 4px 0 0; font: 12px/1.5 Inter, sans-serif; }

.m01-fieldset { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.m01-fieldset legend, .m01-note-label { display: flex; align-items: center; gap: 9px; color: #1e3a5f; font-size: 14px; font-weight: 700; }
.m01-fieldset legend > span, .m01-note-label > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #f97316; border-radius: 7px; font-size: 11px; }
.m01-help { margin: 6px 0 10px 34px; font-size: 12px; }
.m01-option-list { display: grid; gap: 8px; margin-left: 34px; }
.m01-option-list label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; background: #fff; border: 1px solid #dbe3ed; border-radius: 10px; cursor: pointer; }
.m01-option-list label:has(input:checked) { border-color: #f97316; background: #fffaf5; box-shadow: 0 0 0 1px rgba(249,115,22,.12); }
.m01-option-list input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: #f97316; }
.m01-option-list strong, .m01-option-list small { display: block; }
.m01-option-list strong { color: #334155; font: 600 12px/1.5 Inter, sans-serif; }
.m01-option-list small { margin-top: 3px; color: #64748b; font: 11px/1.45 Inter, sans-serif; }
.m01-note-starter { margin: 0 0 9px 34px; padding: 8px 11px; color: #1e3a5f; background: #eef6ff; border: 1px solid #cfe2f7; font-size: 11px; }
.m01-note-starter:hover, .m01-note-starter:focus-visible { background: #dbeafe; }
#m01-notes { width: calc(100% - 34px); margin-left: 34px; padding: 13px 14px; resize: vertical; color: #172033; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; font: 13px/1.6 Inter, sans-serif; }
#m01-notes:focus { outline: 3px solid rgba(249,115,22,.2); border-color: #f97316; }
.m01-note-count { margin: 5px 0 0 34px; color: #94a3b8; font: 10px Inter, sans-serif; text-align: right; }
.m01-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0 34px; }
.m01-actions button, .m01-ticket-actions button { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 10px; font: 700 12px 'Space Grotesk', sans-serif; cursor: pointer; }
.m01-submit { color: #fff; background: #f97316; border: 1px solid #f97316; }
.m01-submit:hover, .m01-submit:focus-visible { background: #ea580c; }
.m01-submit:disabled, .m01-submit[aria-disabled="true"] { color: #94a3b8; background: #e2e8f0; border-color: #e2e8f0; cursor: not-allowed; }
.m01-reset { color: #1e3a5f; background: #fff; border: 1px solid #cbd5e1; }
.m01-reset:hover, .m01-reset:focus-visible { background: #f8fafc; border-color: #1e3a5f; }

.m01-score-empty, .m01-score, .m01-validation { margin: 20px 0 0 34px; padding: 19px; border-radius: 13px; }
.m01-score-empty { color: #64748b; background: #fff; border: 1px dashed #cbd5e1; font: 12px/1.5 Inter, sans-serif; }
/* .m01-siem sets color:#fff / rgba(255,255,255,.82) on itself and its own <p>
 * children for text sitting directly on its dark card — but .m01-score-empty
 * (the simulator submission panel) nests a white card inside it, and that
 * descendant `p` rule was winning on specificity and turning its text
 * invisible. Re-assert dark text for anything inside the nested white card. */
.m01-siem .m01-score-empty,
.m01-siem .m01-score-empty p,
.m01-siem .m01-score-empty strong { color: #334155; }
.m01-requirements-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.m01-requirements-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #64748b; }
.m01-requirements-list li i { font-size: 16px; color: #cbd5e1; }
.m01-score-empty.is-missing { background: #fff7ed; border: 1px solid #fed7aa; }
.m01-score-empty.is-missing > strong { color: #9a3412; }
.m01-score-empty.is-missing .m01-requirements-list li { color: #9a3412; }
.m01-score-empty.is-missing .m01-requirements-list li i { color: #f97316; }
.m01-submit:disabled i { margin-right: 4px; }
.m01-redo-feedback { margin: 14px 0 0; padding: 14px 16px; color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: 11px; font: 13px/1.55 Inter, sans-serif; }
.m01-redo-feedback > strong { display: flex; align-items: center; gap: 7px; color: #991b1b; font-size: 13px; }
.m01-redo-feedback ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.m01-redo-feedback li + li { margin-top: 5px; }
.m01-redo-feedback p { margin: 6px 0 0; }
.m01-requirements-list li.is-done { color: #166534; }
.m01-requirements-list li.is-done i { color: #22c55e; }
.m01-siem .m01-requirements-list { color: #334155; }
.m01-validation { display: flex; align-items: flex-start; gap: 11px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; }
.m01-validation i { font-size: 20px; }
.m01-validation strong { font-size: 13px; }
.m01-validation p { margin: 3px 0 0; font: 12px/1.5 Inter, sans-serif; }
.m01-score { border: 1px solid; }
.m01-score.is-pass { background: #f0fdf4; border-color: #bbf7d0; }
.m01-score.is-remediate { background: #fff7ed; border-color: #fed7aa; }
.m01-score-number { width: 56px; height: 56px; display: grid; place-items: center; color: #fff; background: #1e3a5f; border-radius: 50%; font-size: 19px; font-weight: 800; }
.m01-score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 15px; }
.m01-score-grid div { padding: 10px; background: rgba(255,255,255,.78); border-radius: 8px; }
.m01-score-grid strong, .m01-score-grid span { display: block; }
.m01-score-grid strong { color: #1e3a5f; font-size: 13px; }
.m01-score-grid span { margin-top: 2px; color: #64748b; font: 10px Inter, sans-serif; }
.m01-feedback-list { margin: 14px 0 0; padding-left: 18px; color: #475569; font: 12px/1.65 Inter, sans-serif; }
.m01-model-reasoning { margin-top: 14px; padding: 13px; background: rgba(255,255,255,.72); border-radius: 9px; }
.m01-model-reasoning strong { color: #1e3a5f; font-size: 12px; }
.m01-model-reasoning p { margin: 5px 0 0; color: #64748b; font: 11px/1.55 Inter, sans-serif; }
.m01-shell :focus-visible { outline: 3px solid rgba(249,115,22,.38); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .m01-timeline .is-just-correct > div { animation: none; }
}

@media (max-width: 920px) {
  .m01-hero { grid-template-columns: 1fr; }
  .m01-progress { width: 100%; min-width: 0; }
  .m01-references { grid-template-columns: 1fr; }
  .m01-flow { grid-template-columns: repeat(2, 1fr); }
  .m01-flow article:nth-child(2)::after { display: none; }
  .m01-lifecycle-wheel { height: 700px; }
  .m01-wheel-track { width: 310px; height: 310px; }
  .m01-wheel-track > span { transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-141px); }
  .m01-lifecycle li { width: 220px; }
  .m01-triage-wheel { height: 680px; }
  .m01-triage-track { width: 300px; height: 300px; }
  .m01-triage-track > span { transform: translate(-50%, -50%) rotate(var(--triage-wheel-angle)) translateY(-136px); }
  .m01-triage-loop li { width: 220px; }
  .m01-triage-loop li:nth-child(3) { right: 44px; }
  .m01-triage-loop li:nth-child(4) { left: 44px; }
}

@media (max-width: 620px) {
  .m01-main { width: min(100% - 24px, 1180px); padding-top: 22px; }
  .m01-brand img { height: 34px; }
  .m01-topbar { padding-inline: 14px; }
  .m01-simulation { display: none; }
  .m01-exit { font-size: 0; }
  .m01-exit i { font-size: 20px; }
  .m01-hero, .m01-section { border-radius: 16px; }
  .m01-progress, .m01-flow, .m01-tool-translation dl, .m01-score-grid { grid-template-columns: 1fr; }
  .m01-lifecycle-wheel { height: auto; padding-top: 218px; }
  .m01-wheel-track { top: 0; width: 194px; height: 194px; transform: translateX(-50%); }
  .m01-wheel-track > span { width: 21px; height: 21px; transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-87px); }
  .m01-wheel-track > span i { width: 21px; height: 21px; border-width: 1px; font-size: 15px; }
  .m01-wheel-hub { inset: 23%; padding: 10px; border-width: 4px; }
  .m01-wheel-hub > i { font-size: 22px; }
  .m01-wheel-hub strong { margin-top: 3px; font-size: 12px; }
  .m01-wheel-hub small { display: none; }
  .m01-lifecycle { position: relative; display: grid; gap: 10px; }
  .m01-lifecycle li, .m01-lifecycle li:nth-child(n) { position: relative; inset: auto; width: 100%; min-height: 0; transform: none; }
  .m01-triage-wheel { height: auto; padding-top: 218px; }
  .m01-triage-track { top: 0; width: 194px; height: 194px; transform: translateX(-50%); }
  .m01-triage-track > span { width: 21px; height: 21px; transform: translate(-50%, -50%) rotate(var(--triage-wheel-angle)) translateY(-87px); }
  .m01-triage-track > span i { width: 21px; height: 21px; border-width: 1px; font-size: 15px; }
  .m01-triage-hub { inset: 23%; padding: 10px; border-width: 4px; }
  .m01-triage-hub > i { font-size: 22px; }
  .m01-triage-hub strong { margin-top: 3px; font-size: 12px; }
  .m01-triage-hub small { display: none; }
  .m01-triage-loop { position: relative; display: grid; gap: 10px; }
  .m01-triage-loop li, .m01-triage-loop li:nth-child(n) { position: relative; inset: auto; width: 100%; min-height: 0; transform: none; }
  .m01-flow article::after { display: none; }
  .m01-lesson summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .m01-lesson-number { display: none; }
  .m01-lesson-body { margin-left: 18px; }
  .m01-alert-heading, .m01-panel-heading, .m01-score-summary { flex-direction: column; }
  .m01-entity-chip { width: 100%; }
  .m01-alert-facts { grid-template-columns: 1fr; }
  .m01-option-list, .m01-help, .m01-note-starter, #m01-notes, .m01-note-count, .m01-actions, .m01-score-empty, .m01-score, .m01-validation { margin-left: 0; }
  #m01-notes { width: 100%; }
}

/* Required bridge from the module page into the scoped guided console. */
.m01-siem {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  color: #fff;
  border-radius: 18px;
  padding: 26px 28px;
  margin-top: 24px;
}
.m01-siem.is-complete { background: linear-gradient(135deg, #14532d 0%, #166534 100%); }
.m01-siem-copy { flex: 1 1 320px; }
.m01-siem .m01-kicker { color: #ffd479; }
.m01-siem h3 { margin: 4px 0 8px; font-size: 18px; font-weight: 700; }
.m01-siem p { margin: 0; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
.m01-siem-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1e3a5f;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.m01-siem-launch:hover { transform: translateY(-1px); }

.m01-rubric { margin-top: 17px; padding: 22px; background: #f8fafc; border: 1px solid #dbe3ed; border-radius: 15px; }
.m01-rubric h3 { margin: 4px 0 14px; color: #1e3a5f; font-size: 19px; }
.m01-rubric-list { margin: 0; padding-left: 20px; color: #475569; font: 13px/1.7 Inter, sans-serif; }
.m01-rubric-list li { margin-bottom: 10px; }
.m01-rubric-list li:last-child { margin-bottom: 0; }

/* Module progress/nav shell — reusable sub-header below moduleTopbar() */
.mnav-shell { position: sticky; top: 64px; z-index: 40; background: #fff; border-bottom: 1px solid #e5e7eb; }
.mnav-bar { display: flex; align-items: center; gap: 24px; padding: 16px clamp(20px, 4vw, 48px); max-width: 100%; overflow-x: auto; }
.mnav-bar::-webkit-scrollbar { height: 4px; }
.mnav-bar::-webkit-scrollbar-track { background: transparent; }
.mnav-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.mnav-progress { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.mnav-percent { display: block; font-size: 18px; font-weight: 700; color: #f97316; }
.mnav-label { display: block; font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; margin-top: 3px; }

/* No min-width: 0 override here: .mnav-chip pills are flex: 0 0 auto (never
   shrink) and .mnav-chips has no overflow clipping of its own, so letting
   this box compress below its content's natural width just makes the pills
   spill out over the .mnav-actions buttons next to them. Leaving min-width
   at its default (auto) means this box never shrinks past its content, so
   when the row doesn't fit, .mnav-bar's own overflow-x scroll (styled above)
   takes over for the whole bar instead of the chips overlapping their
   neighbor. */
.mnav-chips { display: flex; gap: 10px; flex: 1 1 auto; }
.mnav-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .2s ease; border: 1px solid #e5e7eb; }
.mnav-chip i { flex: 0 0 auto; font-size: 14px; }

.mnav-chip-complete { color: #fff; background: #10b981; border-color: #10b981; }
.mnav-chip-complete:hover { background: #059669; }

.mnav-chip-current { color: #1e3a5f; background: #fff; border-color: #f97316; box-shadow: 0 0 0 1px rgba(249, 115, 22, .2); }
.mnav-chip-current:hover { background: #fff8f4; }

.mnav-chip-locked { color: #94a3b8; background: #f1f5f9; border-color: #cbd5e1; cursor: not-allowed; }
.mnav-chip-locked:hover { background: #f1f5f9; }

.mnav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mnav-continue { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; background: #f97316; color: #fff; border-radius: 7px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.mnav-continue:hover { background: #ea580c; }

.mnav-review { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; background: #1e3a5f; color: #fff; border: 1px solid #1e3a5f; border-radius: 7px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease; cursor: pointer; }
.mnav-review:hover { background: #0f2440; }

/* Reusable Further Reading / Sources block — used across modules */
.msources-block { margin-top: 18px; padding: clamp(16px, 3vw, 22px); background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 15px; }
.msources-block > h3 { margin: 0 0 14px; color: #1e3a5f; font-size: 15px; font-weight: 700; }
.msources-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.msources-item { min-width: 0; }
.msources-link { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid #dbe3ed; border-radius: 10px; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.msources-link:hover { border-color: #f97316; box-shadow: 0 2px 8px rgba(249, 115, 22, .12); }
.msources-link:focus-visible { outline: 3px solid rgba(249, 115, 22, .32); outline-offset: 2px; }
.msources-title-text { color: #1e3a5f; font-size: 13px; font-weight: 600; line-height: 1.4; }
.msources-org { color: #f97316; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.msources-note { margin: 0; color: #64748b; font: 11px/1.5 Inter, sans-serif; }

@media (max-width: 768px) {
  .mnav-bar { gap: 16px; padding: 12px clamp(14px, 3vw, 24px); }
  .mnav-chips { gap: 8px; }
  .mnav-chip { padding: 7px 11px; font-size: 11px; }
  .mnav-chip i { font-size: 13px; }
  .mnav-percent { font-size: 16px; }
  .mnav-label { font-size: 10px; }
  .mnav-continue, .mnav-review { padding: 7px 10px; font-size: 10px; }
}

/* Wraps the rail + <main> as flex siblings. No overflow property here on
 * purpose: overflow other than visible on this ancestor disables
 * position: sticky on the rail inside it (a well-known CSS gotcha), so the
 * "persistent" rail would silently stop sticking the moment you scroll past
 * its own box. */
.mquick-nav-layout { display: flex; gap: 24px; padding: 0 clamp(20px, 4vw, 48px); max-width: 100%; }
/* Flex items default to min-width:auto, so a wide scroller inside main (the
 * Learn It card strip) widened the page past the viewport. */
.mquick-nav-layout > main { min-width: 0; }

/* Module quick-nav rail — persistent sidebar navigation across lessons and labs.
 * Desktop (≥961px): sticky left rail next to main content.
 * Mobile (≤920px): hidden overlay drawer toggled by a button. */
.mquick-nav-rail { display: flex; flex-direction: column; align-items: flex-start; }
.mquick-nav-rail::-webkit-scrollbar { width: 4px; }
.mquick-nav-rail::-webkit-scrollbar-track { background: transparent; }
.mquick-nav-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.mquick-nav-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #f0f4f8; border: 1px solid #dbe3ed; border-radius: 8px; color: #1e3a5f; font-size: 18px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.mquick-nav-toggle:hover { background: #e0e7f1; border-color: #cbd5e1; }
.mquick-nav-toggle[aria-expanded="true"] { background: #1e3a5f; color: #fff; }

.mquick-nav-drawer { display: flex; flex-direction: column; min-width: 220px; background: #fff; border: 1px solid #dbe3ed; border-radius: 12px; box-shadow: 0 4px 12px rgba(30, 58, 95, .1); overflow-y: auto; max-height: calc(100vh - 200px); }
.mquick-nav-drawer[hidden] { display: none; }

.mquick-nav-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.mquick-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid #f1f5f9; font-size: 12px; font-weight: 500; transition: background .2s ease, color .2s ease; }
.mquick-nav-link:last-child { border-bottom: none; }
.mquick-nav-link i { flex: 0 0 auto; font-size: 14px; }
.mquick-nav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mquick-nav-link.mnav-chip-complete { color: #10b981; background: #f0fdf4; }
.mquick-nav-link.mnav-chip-complete:hover { background: #e6fcf5; }

.mquick-nav-link.mnav-chip-current { color: #f97316; background: #fff8f4; border-left: 3px solid #f97316; padding-left: 11px; }
.mquick-nav-link.mnav-chip-current:hover { background: #fffaf5; }

.mquick-nav-link.mnav-chip-locked { color: #94a3b8; background: #f8fafc; cursor: not-allowed; opacity: .7; }
.mquick-nav-link.mnav-chip-locked:hover { background: #f8fafc; }

/* moduleUnifiedNav() — merged progress-bar + rail (Module 01 reference
 * implementation, 2026-09-16). Header carries what the old horizontal
 * .mnav-shell showed (overall percent, review toggle); .munified-groups
 * replaces both the old .mnav-chips bar and .mquick-nav-list with one
 * vertical list, denser than the original rail rows per owner feedback
 * ("too dense... much smaller, summarized sections are cleaner"). */
.munified-header { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #f1f5f9; }
.munified-percent { font-size: 15px; font-weight: 700; color: #f97316; }
.munified-label { font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
.munified-header .mnav-review { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: #1e3a5f; background: #f0f4f8; border: 1px solid #dbe3ed; border-radius: 999px; cursor: pointer; }
.munified-header .mnav-review:hover { background: #e0e7f1; }

.munified-groups { padding: 4px 0; }
.munified-group { border-bottom: 1px solid #f8fafc; }
.munified-phase { border-bottom: 1px solid #e2e8f0; }
.munified-phase:last-child { border-bottom: none; }
.munified-phase-row { display: flex; align-items: center; gap: 8px; padding: 9px 6px 8px 14px; color: #1e3a5f; background: #f8fafc; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.munified-phase-row > i { color: #f97316; font-size: 14px; }
.munified-phase-label { flex: 1 1 auto; }
.munified-phase-row .munified-group-toggle { margin: 0; }
/* Sources & Further Reading: reference material, not a graded phase.
   Deliberately a separate card OUTSIDE the progress drawer (`.mquick-
   nav-drawer` is its own bordered/shadowed box) — real vertical gap,
   own border/shadow, so it never touches or reads as part of the
   Learn/Practice/Prove menu above it. `hidden` by default, matching the
   drawer's own initial state; wireModuleQuickNavRail() toggles both. */
.munified-supplemental { display: flex; flex-direction: column; min-width: 220px; margin-top: 40px; background: #fff; border: 1px solid #dbe3ed; border-radius: 12px; box-shadow: 0 4px 12px rgba(30, 58, 95, .1); overflow: hidden; }
.munified-supplemental[hidden] { display: none; }
.munified-supplemental-row { display: flex; align-items: center; gap: 8px; padding: 9px 6px 8px 14px; color: #64748b; background: #f8fafc; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.munified-supplemental-row > i { color: #64748b; font-size: 14px; }
.munified-phase-body { background: #fff; overflow: hidden; max-height: 1400px; opacity: 1; transform: translateY(0); transition: max-height .22s ease, opacity .16s ease, transform .22s ease; }
.munified-phase-body.is-collapsed { max-height: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; }
.munified-group-row { display: flex; align-items: stretch; }
.munified-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; font-size: 12px; font-weight: 600; text-decoration: none; color: inherit; transition: background .2s ease, color .2s ease; }
.munified-phase-body > .munified-section > .munified-group-row .munified-row { padding-left: 30px; }
.munified-phase-body > .munified-section > .munified-group-row .munified-group-toggle { margin-right: 10px; }
.munified-row i:first-child { flex: 0 0 auto; font-size: 13px; }
.munified-row-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.munified-row-sub { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: #94a3b8; }

.munified-row.mnav-chip-complete { color: #10b981; background: #f0fdf4; }
.munified-row.mnav-chip-complete:hover { background: #e6fcf5; }
.munified-row.mnav-chip-current { color: #f97316; background: #fff8f4; }
.munified-row.mnav-chip-current:hover { background: #fffaf5; }
.munified-row.mnav-chip-locked { color: #94a3b8; background: transparent; cursor: not-allowed; opacity: .7; }
.munified-row.munified-row-ungated { color: #475569; font-weight: 500; background: transparent; }
.munified-row.munified-row-ungated:hover { background: #f8fafc; }

.munified-group-toggle { flex: 0 0 auto; width: 28px; display: grid; place-items: center; padding: 0; margin: 4px 6px 4px 0; color: #94a3b8; background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.munified-group-toggle:hover { background: #f1f5f9; color: #1e3a5f; }
.munified-group-toggle[aria-expanded="true"] { transform: rotate(180deg); }

/* Nested lesson/lab sublist — smaller than a top-level group row, indented
 * under it, same complete/current/locked color language. */
.munified-group-body { padding-left: 6px; background: #fbfdff; }
.munified-child-link { padding: 6px 10px 6px 42px; font-size: 11px; font-weight: 500; border-bottom: none; }
.munified-child-link i:first-child { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .munified-phase-body { transition: none; }
}

/* Earlier AI/ML and Help Desk pages mount the shared rail directly between
 * their header and main element. Keep it as a true desktop left pane there
 * while the newer SOC pages use it inside .mquick-nav-layout. */
@media (min-width: 961px) {
  .aim-shell > .munified-nav,
  .itss-shell > .munified-nav,
  .its01-shell > .munified-nav,
  .its02-shell > .munified-nav,
  .its12-shell > .munified-nav,
  .eee01-shell > .munified-nav {
    float: left;
    margin: 12px 24px 24px max(20px, calc((100vw - 1180px) / 2));
  }
  .m02-shell > .munified-nav, .m03-shell > .munified-nav,
  .m04-shell > .munified-nav, .m05-shell > .munified-nav,
  .m06-shell > .munified-nav, .m07-shell > .munified-nav,
  .m08-shell > .munified-nav, .m09-shell > .munified-nav,
  .m10-shell > .munified-nav, .m11-shell > .munified-nav,
  .m12-shell > .munified-nav {
    float: left;
    margin: 12px 24px 24px max(20px, calc((100vw - 1180px) / 2));
  }
}

/* Desktop: sticky left rail visible, toggle hidden */
@media (min-width: 961px) {
  .mquick-nav-toggle { display: none; }
  .mquick-nav-rail { position: sticky; top: 140px; height: fit-content; max-height: calc(100vh - 140px); margin-right: 24px; }
  /* munified-nav (moduleUnifiedNav()) replaces the horizontal .mnav-shell
     bar entirely rather than sitting below it, so it only has the 64px
     site header above it, not header + bar — reclaims the vertical space
     the horizontal bar used to cost. */
  .munified-nav.mquick-nav-rail { top: 76px; max-height: calc(100vh - 76px); }
  /* [hidden] repeated here on purpose: the <nav> always renders with the
     hidden attribute (it's the mobile drawer's closed state), and an
     attribute selector outranks a plain class selector on specificity
     regardless of media-query nesting. Without matching it here, the base
     `.mquick-nav-drawer[hidden] { display: none; }` rule wins and the
     "persistent" desktop rail never actually appears. */
  .mquick-nav-drawer, .mquick-nav-drawer[hidden] { display: flex; border: none; box-shadow: none; background: transparent; min-width: 180px; border-right: 1px solid #dbe3ed; max-height: none; overflow-y: auto; }
  /* Same [hidden]-override reasoning as .mquick-nav-drawer above: the
     detached Reference panel always renders with `hidden` (the mobile
     closed state) and must stay visible on the persistent desktop rail. */
  .munified-supplemental, .munified-supplemental[hidden] { display: flex; }
}

/* Mobile/narrow: drawer anchored under the toggle button, button visible.
 * Previously position: fixed at a hardcoded top/left unrelated to the
 * button's own position, so opening it looked like an unrelated panel
 * appearing elsewhere on screen rather than the button's own menu. Now
 * absolutely positioned against .mquick-nav-rail (the button's own
 * parent), directly under it, the way a dropdown menu anchors to its
 * trigger. */
@media (max-width: 920px) {
  .mquick-nav-toggle { display: flex; position: sticky; top: 140px; z-index: 50; margin: 12px 0 0 12px; }
  .munified-nav.mquick-nav-rail .mquick-nav-toggle { top: 76px; }
  .mquick-nav-rail { align-items: auto; position: relative; }
  /* Slide down from the toggle button on open. [hidden] normally forces
     display: none, which can't be transitioned — kept as display: flex
     here and hidden instead via opacity/transform/pointer-events, so the
     open state animates in rather than popping. */
  .mquick-nav-drawer { position: absolute; top: 64px; left: 12px; width: 260px; max-height: calc(100vh - 200px); z-index: 49; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border-radius: 12px; display: flex; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .mquick-nav-drawer:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* ---------- Module 1 case console: Alert Queue | Alert Details/Evidence |
   Case Ticket. Shared by Practice It (guided) and Prove It (independent) —
   one small, targeted interface, not a full SOC range. ---------- */
.m01-console { border: 1px solid #cbd5e1; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 22px rgba(30, 58, 95, .07); margin: 20px 0; background: #fff; }
.m01-lab-launch { margin: 20px 0 0; }
.m01-lab-launch .m01-hero-action { margin-top: 0; }
.m01-lab-launch-status { margin: 8px 0 0; color: #475569; font-size: 13px; }
.m01-shift-start { display: flex; gap: 15px; align-items: flex-start; margin: 20px 0; padding: 24px; border: 1px solid #bfdbfe; border-radius: 15px; background: linear-gradient(135deg, #eff6ff, #fff); }
.m01-shift-start > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #1e3a5f; color: #fff; font-size: 20px; }
.m01-shift-start h3 { margin: 2px 0 6px; color: #1e3a5f; }
.m01-shift-start p { margin: 0 0 14px; color: #475569; font-size: 13px; }
.m01-shift-start .m01-kicker { margin: 0; }
.m01-console-header { background: #1e3a5f; color: #fff; padding: 16px 20px; }
.m01-console-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.m01-console-header h3 { margin: 4px 0 6px; font-size: 18px; color: #fff; }
.m01-console-header p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.m01-console-body { display: grid; grid-template-columns: 190px 1fr 1fr; }
.m01-console-pane { padding: 16px; border-right: 1px solid #e2e8f0; min-width: 0; }
.m01-console-pane:last-child { border-right: 0; }
.m01-console-pane-title { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m01-console .muted { color: #94a3b8; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 11px; }
.m01-console-queue-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: #f0f7ff; border: 1px solid #bfdbfe; font-size: 12px; }
.m01-console-queue-item.is-active { border-color: #1e3a5f; }
.m01-console-queue-item strong { font-size: 13px; color: #1e3a5f; }
.m01-console-meta { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; }
.m01-console-meta div { display: flex; justify-content: space-between; gap: 8px; }
.m01-console-meta dt { color: #64748b; margin: 0; }
.m01-console-meta dd { margin: 0; font-weight: 600; color: #1e3a5f; text-align: right; }
.m01-console-summary { font-size: 13px; color: #334155; margin: 0 0 16px; }
.m01-console-evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m01-console-evidence li { border: 1px solid #e2e8f0; border-radius: 10px; }
.m01-console-evidence li.is-reviewed { border-color: #bbf7d0; background: #f0fdf4; }
.m01-console-evidence button { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; cursor: pointer; }
.m01-console-evidence button[disabled] { cursor: default; }
.m01-console-evidence time { display: block; font-size: 11px; color: #94a3b8; }
.m01-console-evidence strong { display: block; font-size: 13px; color: #1e3a5f; }
.m01-console-evidence p { margin: 2px 0 0; font-size: 12px; color: #475569; }
.m01-console-evidence > li > button > i:last-child { margin-left: auto; flex-shrink: 0; color: #cbd5e1; }
.m01-console-evidence li.is-reviewed > button > i:last-child { color: #16a34a; }
.m01-console-ticket .m01-fieldset { margin-top: 16px; }
.m01-console-ticket .m01-fieldset:first-child { margin-top: 0; }
.m01-console-note { display: block; margin: 0 0 10px; font-size: 12px; color: #334155; }
.m01-console-note span { display: block; font-weight: 700; margin-bottom: 4px; color: #1e3a5f; }
.m01-console-note textarea { width: 100%; box-sizing: border-box; font: inherit; border-radius: 8px; border: 1px solid #cbd5e1; padding: 8px; }
.m01-ticket-form { display: grid; gap: 14px; }
.m01-ticket-case { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #dbe3ed; border-radius: 8px; background: #f8fafc; font-size: 12px; color: #1e3a5f; }
.m01-ticket-id { display: grid; gap: 2px; min-width: 0; }
.m01-ticket-id span, .m01-ticket-id small { color: #64748b; font: 800 10px/1.25 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.m01-ticket-id strong { color: #1e3a5f; font: 800 18px/1.1 'Space Grotesk', sans-serif; overflow-wrap: anywhere; }
.m01-ticket-id small { font-weight: 700; letter-spacing: 0; text-transform: none; }
.m01-ticket-case .m01-ticket-field { min-width: 132px; }
.m01-ticket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.m01-ticket-field { display: grid; gap: 5px; min-width: 0; color: #475569; font-size: 11px; font-weight: 700; }
.m01-ticket-field select, .m01-ticket-field textarea, .m01-entity-control { width: 100%; min-height: 34px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #1e3a5f; padding: 7px 9px; font: 500 12px/1.35 Inter, sans-serif; }
.m01-entity-control { display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; }
.m01-entity-control.is-correct, .m01-ticket-field select.is-correct { border-color: #86efac; background: #f0fdf4; }
.m01-ticket-field textarea { resize: vertical; min-height: 116px; }
.m01-ticket-notes { grid-column: 1 / -1; }
.m01-ticket-actions { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-top: 4px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.m01-ticket-actions .m01-reset, .m01-ticket-actions .m01-submit { margin: 0; }
.m01-action-history { border-top: 1px solid #e2e8f0; padding-top: 9px; color: #64748b; font-size: 11px; }
.m01-action-history summary { cursor: pointer; font-weight: 700; }
.m01-action-history ul { margin: 7px 0 0; padding-left: 18px; }
@media (max-width: 520px) { .m01-ticket-grid { grid-template-columns: 1fr; } .m01-ticket-case { align-items: start; flex-direction: column; } }
@media (max-width: 980px) {
  .m01-console-body { grid-template-columns: 1fr; }
  .m01-console-pane { border-right: 0; border-bottom: 1px solid #e2e8f0; }
}
/* Size the panes to the console, not the viewport: inline (not maximized) the
   console sits beside the nav rail, and the six-column sign-in log needs ~500px
   or it spills over the ticket pane. */
.m01-console { container-type: inline-size; }
@container (max-width: 1259px) {
  .m01-console-body { grid-template-columns: 190px minmax(0, 1fr); }
  .m01-console-detail { border-right: 0; }
  .m01-console-ticket { grid-column: 1 / -1; border-top: 1px solid #e2e8f0; }
}
@container (max-width: 759px) {
  .m01-console-body { grid-template-columns: 1fr; }
  .m01-console-pane { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .m01-console-ticket { border-top: 0; }
}

/* LMS-side status card for the launch card (docs/specs/MODULE_01_CASE_CONSOLE_SPEC.md
   §2) — replaces the console that used to be embedded on this page. */
.m01-lab-status-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 11px 14px; border-radius: 10px; font-size: 13px; }
.m01-lab-status-row.is-not-started { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.m01-lab-status-row.is-in-progress { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.m01-lab-status-row.is-complete { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Module 1's full-bleed case console page (docs/specs/MODULE_01_CASE_CONSOLE_SPEC.md
   §2) — opened by the launch card in a new tab. No moduleTopbar/nav: the
   goal is a work application, not another LMS page. */
.m01cc-shell { min-height: 100vh; background: #eef2f7; display: flex; flex-direction: column; }
.m01cc-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: #0a1628; color: #fff; }
.m01cc-topbar-title { display: flex; align-items: center; gap: 9px; font: 700 13px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fdba74; }
.m01cc-topbar-close { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; text-decoration: none; }
.m01cc-topbar-close:hover, .m01cc-topbar-close:focus-visible { color: #fff; }
.m01cc-main { flex: 1; padding: 22px; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.m01cc-main .m01-console { margin: 0; }
.m01cc-main .m01-shift-start { margin: 0; }

/* Log table — real rows, not decorative cards. */
.m01cc-log-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0 0 12px; }
.m01cc-log-table th { text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #e2e8f0; }
.m01cc-log-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; color: #334155; overflow-wrap: anywhere; }
.m01cc-log-row { cursor: pointer; }
.m01cc-log-row:hover { background: #f8fafc; }
.m01cc-log-row.is-viewed td:first-child { color: #1e3a5f; font-weight: 700; }
.m01cc-log-row.is-expanded { background: #eff6ff; }
.m01cc-result { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.m01cc-result-failed { background: #fee2e2; color: #b91c1c; }
.m01cc-result-success { background: #dcfce7; color: #15803d; }
.m01cc-raw-row td { background: #0a1628; padding: 12px; }
.m01cc-raw { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 'JetBrains Mono', ui-monospace, monospace; color: #bfdbfe; }
.m01cc-log-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 12px; font-size: 11px; color: #64748b; }
.m01cc-log-pager button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cbd5e1; background: #fff; color: #1e3a5f; border-radius: 7px; padding: 5px 10px; font: 600 11px/1 Inter, sans-serif; cursor: pointer; }
.m01cc-log-pager button:hover:not(:disabled) { background: #f8fafc; }
.m01cc-log-pager button:disabled { opacity: .4; cursor: default; }
.m01cc-phone-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fefce8; border: 1px solid #fde68a; font-size: 12px; color: #713f12; }
.m01cc-feedback { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.m01cc-feedback.is-pass { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.m01cc-feedback.is-coaching { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f; }
.m01cc-feedback.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.m01cc-feedback-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 5px; }
.m01cc-feedback-list li { display: flex; gap: 6px; align-items: flex-start; }
.m01cc-feedback-list i { margin-top: 1px; color: currentColor; }
@media (max-width: 640px) {
  .m01cc-log-table { display: block; overflow-x: auto; }
}

/* Framed imported lab (#/program/<slug>/module/<n>/lab/<labSlug>) */
.mn-lab-view { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #0b1220; }
.mn-lab-view > header { flex: 0 0 auto; }
.mn-lab-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #0b1220; }

/* ── Standard Console Guide (docs/specs/MODULE_STANDARD.md §7.3) ─────────────────────
 * Reference: Module 02 Guided Lab console. Rendered by portal/console-guide.js.
 * Class names keep their original m02e- prefix; do not restyle per module. */
.m02e-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f97316;margin:0}
.m02e-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.m02e-learn-tip{position:absolute;z-index:8;width:min(410px,calc(100% - 24px));max-height:calc(100% - 16px);overflow:auto;box-sizing:border-box;padding:15px 17px;background:linear-gradient(145deg,#071a31f5,#123c68f5);border:1px solid #7dd3fc88;border-left:4px solid #fb923c;border-radius:12px;color:#eff6ff;box-shadow:0 14px 34px #06142688,0 0 24px #38bdf833;opacity:0;visibility:hidden;transform:translateY(7px) scale(.98);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:auto}
.m02e-learn-tip.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.console-guide-focus{position:relative;z-index:1;outline:2px solid #fb923c!important;outline-offset:3px;box-shadow:0 0 0 5px #fb923c24,0 0 20px #fb923c55!important;scroll-margin:24px;transition:outline-color .2s ease,box-shadow .2s ease}
.m02e-learn-tip::after{position:absolute;left:50%;bottom:-7px;width:12px;height:12px;content:'';background:#102b46;border-right:1px solid #7dd3fc88;border-bottom:1px solid #7dd3fc88;transform:translateX(-50%) rotate(45deg)}
.m02e-learn-tip.points-down::after{top:-7px;bottom:auto;border:0;border-left:1px solid #7dd3fc88;border-top:1px solid #7dd3fc88}
.m02e-learn-tip.points-side::after{display:none}
.m02e-learn-tip .m02e-tip-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m02e-learn-tip .m02e-label{color:#fdba74;font-size:9px}
.m02e-tip-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:26px;padding:3px 10px 3px 6px;font:700 11px/1 Inter,sans-serif;letter-spacing:.02em;white-space:nowrap;border:1px solid #7dd3fc66;border-radius:6px;background:#ffffff14;color:#eff6ff;cursor:pointer;transition:background .15s ease,transform .2s ease}
.m02e-tip-toggle:hover{background:#ffffff28;border-color:#7dd3fc}
.m02e-tip-toggle i{font-size:16px;transition:transform .2s ease}
.m02e-tip-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.m02e-learn-tip.is-collapsed .m02e-tip-toggle i{transform:rotate(180deg)}
.m02e-tip-body{max-height:600px;opacity:1;overflow:hidden;transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease}
.m02e-learn-tip.is-collapsed .m02e-tip-body{max-height:0;opacity:0;pointer-events:none}
/* Module section styles (e.g. .m04-section-body h3/p) colour every heading and
   paragraph inside them dark. :not(#_) lifts these card rules to ID
   specificity so the guide reads the same in every module. */
.m02e-learn-tip:not(#_) h3{margin:6px 0 0;color:#fff;font:700 18px/1.25 'Space Grotesk',Inter,sans-serif}
.m02e-learn-tip:not(#_) p{margin:7px 0 0;color:#eff6ff;font:500 14px/1.5 'Space Grotesk',Inter,sans-serif}
.m02e-learn-tip:not(#_) .m02e-guide-look,.m02e-learn-tip:not(#_) .m02e-guide-lab{padding:8px 10px;border:1px solid #ffffff1b;border-radius:7px;background:#ffffff0b;font:500 12px/1.45 Inter,sans-serif}
.m02e-learn-tip:not(#_) .m02e-guide-look strong,.m02e-learn-tip:not(#_) .m02e-guide-lab strong{color:#fdba74}
.m02e-guide-next{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:8px 11px;border:1px solid #7dd3fc77;border-radius:7px;background:#ffffff12;color:#fff;font:700 11px Inter,sans-serif;cursor:pointer}
.m02e-guide-next:hover{background:#ffffff24;border-color:#7dd3fc}
.guided-lab-debrief{margin-top:10px;padding:10px 12px;border:1px solid #ffffff24;border-radius:8px;background:#ffffff0b}
.guided-lab-debrief h4{margin:10px 0 0;color:#fdba74;font:800 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.guided-lab-debrief h4:first-child{margin-top:0}
.guided-lab-debrief p,.m02e-learn-tip:not(#_) .guided-lab-debrief p,.guided-lab-debrief li{font:500 12px/1.5 Inter,sans-serif}
.guided-lab-debrief ul{margin:6px 0 0;padding-left:18px}
.m02e-guide-open{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border:2px solid #fdba74;border-radius:10px;background:#f97316;color:#fff;font:800 16px/1 'Space Grotesk',Inter,sans-serif;letter-spacing:.02em;cursor:pointer;box-shadow:0 0 0 0 #f9731699,0 6px 18px #f9731655;animation:m02e-guide-cta 2s ease-in-out infinite;transition:background .15s ease,transform .15s ease}
.m02e-guide-open i{font-size:22px}
.m02e-guide-open:hover:not(:disabled){background:#ea580c;transform:translateY(-1px)}
.m02e-guide-open:focus-visible{outline:3px solid #fff;outline-offset:3px}
.m02e-guide-open:disabled{background:#ffffff14;border-color:#7dd3fc55;color:#cbd5e1;font-size:13px;box-shadow:none;animation:none;opacity:.8;cursor:not-allowed}
@keyframes m02e-guide-cta{0%,100%{box-shadow:0 0 0 0 #f9731699,0 6px 18px #f9731655}50%{box-shadow:0 0 0 8px #f9731600,0 6px 18px #f9731655}}
header .m02e-learn-tip{position:static;flex:0 1 auto;width:auto;max-height:none;overflow:visible;padding:8px 10px 8px 14px;box-shadow:none;transform:none}
header .m02e-learn-tip{opacity:1;visibility:visible}
header .m02e-learn-tip::after{display:none}
header .m02e-learn-tip .m02e-tip-body{display:none}
header .m02e-learn-tip:not(.is-collapsed) .m02e-tip-body{display:block}
header .m02e-learn-tip .m02e-label{display:inline;font-size:11px}
header .m02e-learn-tip .m02e-tip-toggle{min-height:30px}
@media(prefers-reduced-motion:reduce){.m02e-guide-open{animation:none}.m02e-learn-tip,.m02e-tip-body,.m02e-tip-toggle i{transition:none}}

/* Locked rail rows: visible lock icon, keyboard focus ring, and the shared
   explanation shown when one is activated (see showModuleNavLock()). */
.mnav-lock-icon { flex: 0 0 auto; font-size: 12px; }
.munified-row:focus-visible, .mquick-nav-link:focus-visible, .mnav-chip:focus-visible, .munified-lock-go:focus-visible { outline: 3px solid rgba(249, 115, 22, .6); outline-offset: 2px; }
.munified-lock-msg { margin: 8px 6px 0; font-size: 12px; color: #9a3412; }
.munified-lock-msg:empty { display: none; }
.munified-lock-msg { padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; }
.munified-lock-go { display: block; margin-top: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #fff; background: #ea580c; border: 0; border-radius: 6px; cursor: pointer; }
.munified-lock-go:hover { background: #c2410c; }

/* Endpoint evidence pickers (soc-m05-assessment-device-ui.js): one aligned row
 * per telemetry event or file hash instead of a run-on list of checkboxes. */
.m05-pick-label { margin: 0.75rem 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.m05-pick { max-height: 16rem; overflow: auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.m05-pick-head, .m05-pick-row { display: grid; grid-template-columns: 1.25rem 4.25rem 6.75rem 8.5rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.m05-pick-hash { grid-template-columns: 1.25rem 8.5rem minmax(0, 1fr); }
.m05-pick-head { position: sticky; top: 0; z-index: 1; background: #f3f4f6; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; }
.m05-pick-row { cursor: pointer; border-top: 1px solid #f1f5f9; color: #1e293b; }
.m05-pick-row:hover { background: #eff6ff; }
.m05-pick-row:has(input:checked) { background: #ecfdf5; }
.m05-pick-row input { margin: 0; }
.m05-pick-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: #1e3a5f; }
.m05-pick-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
html[data-mn-theme="night"] .m05-pick { background: #0f172a; border-color: #334155; }
html[data-mn-theme="night"] .m05-pick-head { background: #1e293b; color: #cbd5e1; }
html[data-mn-theme="night"] .m05-pick-row { border-color: #1e293b; color: #e2e8f0; }
html[data-mn-theme="night"] .m05-pick-row:hover { background: #172554; }
html[data-mn-theme="night"] .m05-pick-row:has(input:checked) { background: #064e3b; }
html[data-mn-theme="night"] .m05-pick-id { color: #93c5fd; }
html[data-mn-theme="night"] .m05-pick-detail, html[data-mn-theme="night"] .m05-pick-label { color: #94a3b8; }


/* M04 form controls and compact M05 endpoint profile at split-screen widths. */
.m04-checkbox-label { display: flex; align-items: center; gap: .5rem; margin: .45rem 0; }
.m04-checkbox-label input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
[data-m04-rule-form] [data-m04-rule-error]:empty { display: none; }
[data-m04-rule-form] [data-m04-rule-error] { margin: .5rem 0; padding: .55rem .7rem; border: 1px solid #fca5a5; border-radius: 8px; color: #991b1b; background: #fef2f2; }
.m05-device-profile { min-width: 0; padding: 1rem; border: 1px solid #dbe3ed; border-radius: 12px; background: #f8fafc; }
.m05-device-profile h3 { margin: 0 0 .75rem; }
.m05-device-profile dl { display: grid; grid-template-columns: minmax(5rem, .35fr) minmax(0, 1fr); gap: .35rem .75rem; margin: 0; }
.m05-device-profile dt { color: #64748b; font-weight: 700; }
.m05-device-profile dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.m05-device-inventory li button { display: flex; flex-wrap: wrap; gap: .25rem .65rem; align-items: baseline; max-width: 100%; }
.m05-device-inventory li button span { color: #64748b; }
.m05-console-extra, .m05-console-extra * { min-width: 0; }
.m05-console-extra { overflow-wrap: anywhere; }
.m05-console-extra pre, .m05-console-extra table { max-width: 100%; }
@media (max-width: 720px) { .m05-pick-head, .m05-pick-row { grid-template-columns: 1.15rem 3.6rem minmax(4rem, 1fr); } .m05-pick-head span:nth-child(n+4), .m05-pick-row > :nth-child(n+4) { display: none; } .m05-pick-hash { grid-template-columns: 1.15rem 5rem minmax(0, 1fr); } }
html[data-mn-theme="night"] .m05-device-profile { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html[data-mn-theme="night"] .m05-device-profile dt, html[data-mn-theme="night"] .m05-device-inventory li button span { color: #94a3b8; }

/* Instant Practice It score (case-record.js practiceResultHtml). */
.practice-score { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-family: Inter, sans-serif; }
.practice-score.is-pass { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.practice-score.is-fail { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.practice-score-value { font-size: 24px; font-weight: 700; line-height: 1; }
.practice-score-label { font-size: 13px; font-weight: 600; }
.m01-requirements-list li i.ri-close-circle-line { color: #dc2626; }
[data-mn-theme="night"] .practice-score.is-pass { color: #bbf7d0; background: rgba(22, 101, 52, .25); border-color: rgba(134, 239, 172, .35); }
[data-mn-theme="night"] .practice-score.is-fail { color: #fecaca; background: rgba(153, 27, 27, .25); border-color: rgba(252, 165, 165, .35); }

/* "Restart Guided Lab" sits outside .m01-ticket-actions, so it had no button
 * shape and rendered as plain text. */
button.m01-reset[data-m02e-restart], button.m01-reset[data-m03e-practice-restart],
button.m01-reset[data-m04-guided-restart], button.m01-reset[data-m05-guided-restart],
button.m01-reset[data-m06-guided-restart], button.m01-reset[data-m07-guided-restart],
button.m01-reset[data-m08-guided-restart], button.m01-reset[data-m09-guided-restart],
button.m01-reset[data-m10-guided-restart], button.m01-reset[data-m11-guided-restart] { min-height: 40px; display: inline-flex; align-items: center; margin: 14px 0 0; padding: 9px 15px; border-radius: 10px; font: 700 12px 'Space Grotesk', sans-serif; cursor: pointer; }

/* Instructor notes on an approved Prove It (case-record.js caseRecordPanel). */
.m01-graded-feedback { margin: 12px 0 0; padding: 12px 14px; color: #1e3a5f; background: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 11px; font: 13px/1.55 Inter, sans-serif; }
.m01-graded-feedback > strong { display: flex; align-items: center; gap: 7px; }
.m01-graded-feedback ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
[data-mn-theme="night"] .m01-graded-feedback { color: #dbeafe; background: rgba(30, 58, 95, .45); border-color: rgba(147, 197, 253, .35); }

/* M09 incident / response / recovery workspaces (PACKS.m09, reused by M10-M12)
* and the M10 evidence locker / reconstruction workspaces (PACKS.m10).
* Only the bare .m04-console-extra base applied: selects ran together inline
 * and the evidence review was a raw checkbox list. */
.m09-console-extra > h4, * the M10 evidence locker / reconstruction workspaces (PACKS.m10) and the
 * M11/M12 Shift Operations and Reporting tabs (.m03-console-extra).
 * Only the bare .m04-console-extra base applied: selects ran together inline
 * and the evidence review was a raw checkbox list. */
.m10-console-extra > h4, * Only the bare .m04-console-extra base applied: selects ran together inline
 * and the evidence review was a raw checkbox list. */
.m03-console-extra > h4 { margin: 4px 0 6px; font-size: 16px; }
.m09-console-extra > p, .m10-console-extra > p, .m03-console-extra > p { margin: 0 0 12px; color: #52616b; font-size: 12px; line-height: 1.5; }
.m09-console-extra > ul, .m09-console-extra > ol, .m10-console-extra > ul, .m10-console-extra > ol, .m03-console-extra > ul, .m03-console-extra > ol { margin: 0 0 14px; padding: 10px 14px 10px 30px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; line-height: 1.6; }
.m09-console-extra form, .m10-console-extra form, .m03-console-extra form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.m09-console-extra form > h5, .m10-console-extra form > h5, .m03-console-extra form > h5 { flex: 1 1 100%; margin: 0; }
.m09-console-extra form label, .m10-console-extra form label, .m03-console-extra form label { display: grid; gap: 4px; min-width: 160px; flex: 1 1 180px; color: #52616b; font-size: 11px; font-weight: 700; }
.m09-console-extra form select, .m09-console-extra form input:not([type="checkbox"]):not([type="radio"]), .m09-console-extra form textarea, .m10-console-extra form select, .m10-console-extra form input:not([type="checkbox"]):not([type="radio"]), .m10-console-extra form textarea, .m03-console-extra form select, .m03-console-extra form input:not([type="checkbox"]):not([type="radio"]), .m03-console-extra form textarea { width: 100%; min-height: 34px; padding: 6px 8px; color: #172033; background: #fff; border: 1px solid #b9c6ce; border-radius: 6px; font: 13px/1.4 Inter, sans-serif; }
.m09-console-extra form textarea, .m10-console-extra form textarea, .m03-console-extra form textarea { min-height: 64px; }
.m09-console-extra form fieldset, .m10-console-extra form fieldset, .m03-console-extra form fieldset { flex: 1 1 100%; margin: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; }
.m09-console-extra form fieldset label, .m10-console-extra form fieldset label, .m03-console-extra form fieldset label { display: flex; align-items: center; gap: 8px; min-width: 0; color: #172033; font-weight: 600; }
.m09-console-extra form > button, .m10-console-extra form > button, .m03-console-extra form > button { flex: 0 0 auto; }
.m09-console-extra .m09-evidence, .m10-console-extra .m09-evidence, .m03-console-extra .m09-evidence { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.m09-console-extra .m09-evidence li, .m10-console-extra .m09-evidence li, .m03-console-extra .m09-evidence li { padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.m09-console-extra .m09-evidence li label, .m10-console-extra .m09-evidence li label, .m03-console-extra .m09-evidence li label { display: flex; align-items: baseline; gap: 8px; color: #172033; font-size: 12px; cursor: pointer; }
.m09-console-extra .m09-evidence li input, .m10-console-extra .m09-evidence li input, .m03-console-extra .m09-evidence li input { flex: 0 0 auto; accent-color: #f97316; }
.m09-console-extra .m09-evidence li p, .m10-console-extra .m09-evidence li p, .m03-console-extra .m09-evidence li p { margin: 2px 0 0 24px; color: #52616b; font-size: 12px; }
.m09-console-extra .m09-approval, .m10-console-extra .m09-approval, .m03-console-extra .m09-approval { margin: 0 0 14px; padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; }
[data-mn-theme="night"] .m09-console-extra form, [data-mn-theme="night"] .m09-console-extra .m09-evidence li, [data-mn-theme="night"] .m10-console-extra form, [data-mn-theme="night"] .m10-console-extra .m09-evidence li, [data-mn-theme="night"] .m03-console-extra form, [data-mn-theme="night"] .m03-console-extra .m09-evidence li { background: #0f1b2d; border-color: #24364f; }
[data-mn-theme="night"] .m09-console-extra > ul, [data-mn-theme="night"] .m09-console-extra > ol, [data-mn-theme="night"] .m10-console-extra > ul, [data-mn-theme="night"] .m10-console-extra > ol, [data-mn-theme="night"] .m03-console-extra > ul, [data-mn-theme="night"] .m03-console-extra > ol { background: #0f1b2d; border-color: #24364f; }

.m10-console-extra .m10-intake { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.m10-console-extra .m10-intake > :first-child { grid-column: 1 / -1; }
.m10-console-extra form label:has(input[type="checkbox"]) { flex: 0 0 auto; min-width: 0; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
@media (max-width: 640px) { .m10-console-extra .m10-intake { grid-template-columns: 1fr; } }

/* .m03-console-extra had no base styles at all (M11/M12 Operations + Reporting). */
.m03-console-extra { color: #172b43; font-size: 13px; }
.m03-console-extra > h3 { margin: 4px 0 6px; color: #1e3a5f; font-size: 17px; }
.m03-console-extra h4, .m03-console-extra h5 { margin: 14px 0 8px; color: #1e3a5f; }
.m03-console-extra button { margin: 0; padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #1e3a5f; font: 700 12px Inter, sans-serif; cursor: pointer; }
.m03-console-extra button:hover:not(:disabled) { border-color: #f97316; }
.m03-console-extra form button[type="submit"], .m03-console-extra form > button:last-child { color: #fff; background: #1e3a5f; border-color: #1e3a5f; }

/* M11 shift-assessment submit sits outside a ticket, so it had no button shape. */
button[data-m11-submit-score] { min-height: 42px; display: inline-flex; align-items: center; padding: 10px 16px; color: #fff; background: #f97316; border: 1px solid #f97316; border-radius: 10px; font: 700 13px 'Space Grotesk', sans-serif; cursor: pointer; }
button[data-m11-submit-score]:hover, button[data-m11-submit-score]:focus-visible { background: #ea580c; }