.lab-page { padding: 6rem 0 5rem; }
.stage-bar { position: fixed; z-index: 40; inset: 0 0 auto; max-width: 100vw; overflow: hidden; background: rgb(255 255 255 / 96%); border-bottom: 1px solid rgb(73 89 101 / 12%); box-shadow: 0 4px 20px rgb(0 0 0 / 4%); backdrop-filter: blur(10px); }
.stage-bar-inner { display: flex; width: 100%; max-width: var(--content); min-height: 79px; align-items: center; gap: .65rem; margin: 0 auto; padding: .75rem 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.stage-label { flex: 0 0 auto; margin-right: .3rem; color: var(--mac-grey-80); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.lab-stage-label { margin-left: .65rem; padding-left: .85rem; border-left: 1px solid rgb(73 89 101 / 18%); }
.stage-button, .stage-home, .stage-current { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; padding: .55rem .95rem; color: var(--mac-grey); background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: .83rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.stage-button:hover, .stage-home:hover { color: var(--mac-grey); background: var(--mac-grey-20); }
.stage-current, .stage-button[aria-current="step"] { color: #fff; background: var(--mac-maroon); box-shadow: 0 5px 13px rgb(122 0 60 / 28%); }
.stage-current { cursor: default; }
.stage-button.is-complete::after { content: "\2713"; display: inline-grid; width: 22px; height: 22px; place-items: center; margin-left: .45rem; color: #16794A; background: #DDF5E7; border-radius: 50%; font-size: 1rem; font-weight: 900; line-height: 1; }
.progress-meter { flex: 0 0 auto; margin-left: auto; padding: .45rem .7rem; color: #5B3900; background: var(--mac-gold-20); border: 1px solid var(--mac-gold-60); border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.page-header { max-width: var(--lab-page-width); margin: 0 auto 2.5rem; padding: 0 1.5rem 2.2rem; }
.page-header-inner { display: flex; align-items: center; gap: 1.75rem; padding-bottom: 2rem; border-bottom: 1px solid #E5E7EB; }
.institution-mark { display: flex; min-width: 180px; flex: 0 0 auto; align-items: center; gap: .65rem; color: var(--mac-grey); }
.institution-mark__logo { display: block; width: auto; height: 4.35rem; max-width: 220px; object-fit: contain; }
.institution-mark__name { font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; line-height: .88; }
.institution-mark__seal { display: grid; width: 42px; height: 50px; place-items: center; color: #fff; background: linear-gradient(180deg,var(--mac-maroon) 0 72%,var(--mac-gold) 72%); border: 2px solid var(--mac-gold); border-radius: 4px 4px 12px 12px; font-family: Georgia,serif; font-weight: 800; }
.institution-divider { width: 1px; height: 64px; flex: 0 0 auto; background: #E5E7EB; }
.page-header-copy { min-width: 0; }
.course-kicker { margin: 0 0 .5rem; color: var(--mac-maroon); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.lab-page-title { margin: 0 0 .55rem; color: #000; font-size: clamp(2.3rem,4vw,3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.lab-title-prefix { color: #000; }
.lab-title-gradient { color: var(--mac-maroon); background: linear-gradient(90deg,var(--mac-maroon) 0%,var(--mac-maroon-80) 52%,var(--mac-gold) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.page-subtitle { max-width: 64ch; margin: 0; color: var(--mac-grey); font-size: clamp(1rem,1.7vw,1.22rem); font-weight: 300; }
.header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.25rem; }
.stage-summary-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; color: #5B3900; background: var(--mac-gold-20); border: 1px solid rgb(253 191 87 / 35%); border-radius: 999px; font-size: .82rem; font-weight: 700; }
.header-utility { margin-left: auto; }
.lab-content { width: 100%; max-width: var(--lab-page-width); margin-inline: auto; padding-inline: 1.5rem; }
.stage-panel { position: relative; display: block; padding-bottom: 2rem; scroll-margin-top: 88px; }
.js .stage-panel[hidden] { display: none; }
.stage-panel:focus { outline: none; }
.stage-panel::before { content: attr(data-checkpoint-label); position: absolute; z-index: 2; top: 0; left: -17px; display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--mac-maroon); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 5px 12px rgb(0 0 0 / 18%); font-size: .84rem; font-weight: 700; }
.stage-panel.is-locked .stage-content { opacity: .76; }
.stage-panel > .section-card > .eyebrow { margin-bottom: .7rem; }
.stage-panel > .section-card > h2 { margin: 0 0 .9rem; color: var(--mac-maroon); font-size: clamp(1.35rem,2vw,1.7rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.18; }
.stage-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #E5E7EB; }
.template-note { color: var(--mac-grey); font-style: italic; }

@media (max-width: 900px) {
  .progress-meter { margin-left: 0; }
  .header-utility { margin-left: 0; }
}

@media (max-width: 720px) {
  .lab-page { padding-top: 5.7rem; }
  .page-header { padding-inline: 1rem; }
  .page-header-inner { align-items: flex-start; flex-direction: column; gap: 1.1rem; }
  .institution-divider { display: none; }
  .institution-mark { min-width: 0; }
  .institution-mark__logo { height: 3.85rem; max-width: min(220px, 82vw); }
  .lab-page-title { font-size: clamp(2rem,10vw,2.6rem); }
  .lab-content { padding-inline: 1rem; }
  .stage-panel::before { left: -8px; top: -9px; }
}

@media (max-width: 640px) {
  .stage-bar-inner { padding-inline: .75rem; }
  .stage-label { display: none; }
  .stage-footer { align-items: stretch; flex-direction: column-reverse; }
  .stage-footer .button { width: 100%; }
}

@media print {
  .lab-page { padding-top: 0; }
  .stage-bar, .stage-footer, [data-reset-lab], [data-lab-export] { display: none!important; }
  .stage-panel[hidden] { display: block!important; }
  .stage-panel::before { display: none; }
  .card { box-shadow: none; }
  body { background: #fff; }
}

.reference-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}

.section-figure {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.section-figure figcaption,
.mini-card figcaption {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .9rem;
}

.procedure-list li + li { margin-top: .65rem; }
.vtc-table input { min-width: 7rem; }
.gate-investigation-table { table-layout: fixed; min-width: 640px; }
.gate-investigation-table th,
.gate-investigation-table td { width: 25%; }
.structural-verify-table { min-width: 1050px; }
.structural-verify-table input:not([type="checkbox"]) { min-width: 5rem; }
.structural-verify-table th:last-child,
.structural-verify-table td:last-child { width: 11rem; text-align: center; vertical-align: middle; }
.structural-verify-table input[type="checkbox"] { width: 1.2rem; min-width: 1.2rem; height: 1.2rem; margin: 0 auto; padding: 0; }

/* Keep the fixed input columns visually consistent with the A column. */
.truth-table tbody tr > th,
.truth-table tbody tr > td:nth-child(2),
.truth-table tbody tr > td:nth-child(3) {
  color: var(--mac-grey);
  background: #F3F4F6;
  font-size: 1rem;
  font-weight: 800;
}

@media (forced-colors: active) {
  .lab-title-prefix, .lab-title-gradient { color: CanvasText; background: none; -webkit-text-fill-color: CanvasText; }
}