.card { background: var(--lab-surface); border: 1px solid rgba(73,89,101,.10); border-radius: 16px; box-shadow: 0 10px 18px -8px rgb(0 0 0 / 16%), 0 4px 8px -4px rgb(0 0 0 / 8%); }
.hero { padding: clamp(1.4rem, 3vw, 2rem); }
.section-card { margin: 1rem; padding: 1.75rem; }
.mini-card { padding: 1rem; background: #fff; border: 1px solid rgba(73,89,101,.13); border-radius: 12px; }
.briefing-card { padding: 18px; background: #F8FAFC; border-left: 4px solid var(--mac-maroon); border-radius: 12px; }
.briefing-card h3 { margin-bottom: .45rem; color: var(--lab-text); font-size: 1.08rem; }
.briefing-card p:last-child, .mini-card p:last-child { margin-bottom: 0; }
.border-maroon { border-left: 4px solid var(--mac-maroon); }
.border-gold { border-left: 4px solid var(--mac-gold); }
.border-success { border-left: 4px solid var(--success); }
.warning-card, .callout { padding: 16px; color: #5B3900; background: var(--mac-gold-20); border: 1px solid var(--mac-gold-60); border-left: 5px solid var(--mac-gold); border-radius: 12px; }
.danger-card, .callout-danger { padding: 16px; color: #7A271A; background: #FFF3F2; border: 1px solid #FECACA; border-left: 5px solid var(--danger); border-radius: 12px; }
.success-card, .callout-success { padding: 16px; color: #174D2D; background: #EFFAF3; border: 1px solid #B7E4C7; border-left: 5px solid var(--success); border-radius: 12px; }
.grid-layout, .field-grid { display: grid; gap: 1rem; }
.grid-layout.two, .field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-layout.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.button-row, .section-heading, .chip-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.chip-row { justify-content: flex-start; margin: 1rem 0; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: .72rem 1rem; border-radius: 9px; cursor: pointer; font-size: .88rem; font-weight: 800; line-height: 1.2; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button.button-primary { color: #fff!important; background: var(--mac-maroon); border: 1px solid var(--mac-maroon); }
.button-primary:hover { color: #fff; background: var(--mac-maroon-80); }
.button-secondary { color: var(--mac-grey); background: #fff; border: 1px solid var(--mac-grey-40); }
.button-secondary:hover { color: var(--mac-grey); background: var(--mac-grey-20); }
.button-danger { color: var(--danger); background: #fff; border: 1px solid #D7A5AD; }
.button-danger:hover { background: #FFF3F2; }
.button:disabled { opacity: .52; cursor: not-allowed; }
.status { min-height: 1.5em; margin: .75rem 0 0; color: var(--mac-grey); font-size: .9rem; font-weight: 700; }
.status.is-error { color: #9F1239; }
.status.is-success { color: #1F623E; }
.response-field { display: grid; gap: .35rem; margin-bottom: .85rem; font-weight: 400; }
.response-field > span { color: var(--lab-text); font-weight: 700; }
.response-field.checkbox-field > span, .response-field > span:has(input[type="checkbox"]) { display: flex; align-items: flex-start; justify-content: flex-start; gap: .65rem; text-align: left; }
.response-field.checkbox-field input[type="checkbox"] { width: 1.2rem; min-width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--mac-maroon); }
.response-field.checkbox-field > .checkbox-label { display: flex; align-items: flex-start; gap: .65rem; color: var(--lab-text); font-weight: 400; line-height: 1.45; }
.response-field.checkbox-field > .checkbox-label input[type="checkbox"] { flex: 0 0 1.2rem; width: 1.2rem; min-width: 1.2rem; margin: .15rem 0 0; padding: 0; }
.response-field input, .response-field select, .response-field textarea, .search-field input, table input, table select, table textarea { width: 100%; padding: .65rem .75rem; color: var(--lab-text); background: #fff; border: 1px solid #CBD5E1; border-radius: 9px; }
.response-field textarea { min-height: 92px; resize: vertical; }
.response-field small { color: var(--mac-grey); font-size: .84rem; font-weight: 500; line-height: 1.45; }
.response-field [aria-invalid="true"] { border-color: #BE123C; }
.evidence-upload, .evidence-field { display: block; width: 100%; clear: both; padding: .85rem; background: #fff; border: 1px dashed rgb(122 0 60 / 32%); border-radius: 12px; }
.evidence-upload > span, .evidence-field > span { display: block; font-weight: 700; }
.evidence-upload input[type="file"], .evidence-field input[type="file"] { display: block; width: 100%; margin-top: .45rem; padding: .45rem; }
.evidence-upload > small, .evidence-field > small { display: block; max-width: 100%; overflow-wrap: anywhere; }
.file-name-preview { display: block; margin-top: .35rem; color: var(--mac-grey); font-size: .85rem; font-weight: 700!important; }
.file-name-preview.is-success { color: #1F623E; }
.file-name-preview.is-error { color: #9F1239; }
.evidence-upload:has(input[aria-invalid="true"]) { background: #FFF7F8; border-color: #BE123C; }
.screenshot-placeholder { position: relative; display: grid; min-height: 210px; place-items: center; padding: 1.5rem; overflow: hidden; color: var(--mac-grey); text-align: center; background: #F8FAFC; border: 1px solid rgba(73,89,101,.18); border-left: 5px solid var(--mac-gold); border-radius: 12px; }
.screenshot-placeholder::before { content: ''; position: absolute; inset: 12px; pointer-events: none; border: 1px dashed rgba(122,0,60,.24); border-radius: 8px; }
.screenshot-placeholder p { position: relative; max-width: 62ch; margin: 0; }
.screenshot-placeholder strong { display: block; margin-bottom: .35rem; color: var(--mac-maroon); font-size: 1rem; }
.completion-card { margin: 1.5rem 0 1rem; padding: clamp(1.1rem,2vw,1.65rem); background: #fff; border: 1px solid rgb(122 0 60 / 20%); border-top: 5px solid var(--mac-maroon); border-radius: 12px; box-shadow: 0 12px 28px rgb(73 89 101 / 7%); }
.completion-card h3 { margin: 0 0 .5rem; border-left: 0; padding-left: 0; color: var(--lab-text); font-size: 1.35rem; font-weight: 800; }
.completion-card .status { padding: .75rem .85rem; background: #FBF7F9; border: 1px solid rgb(122 0 60 / 20%); border-radius: 8px; color: var(--mac-maroon); }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid rgba(73,89,101,.14); border-radius: 12px; }
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th, td { padding: .75rem; border-bottom: 1px solid rgba(73,89,101,.12); text-align: left; vertical-align: top; }
th { color: var(--mac-grey); background: #F3F4F6; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.tab-shell { margin-top: 1rem; overflow: hidden; background: #fff; border: 1px solid rgba(73,89,101,.16); border-radius: 12px; }
.tab-list { display: flex; gap: .25rem; overflow-x: auto; padding: .45rem .45rem 0; background: #F3F4F6; border-bottom: 1px solid rgba(73,89,101,.16); }
.tab-button { flex: 0 0 auto; min-height: 42px; padding: .65rem .9rem; color: var(--mac-grey); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .86rem; font-weight: 800; }
.tab-button:hover { color: var(--mac-maroon); background: #fff; }
.tab-button[aria-selected="true"] { color: #fff; background: var(--mac-maroon); border-bottom-color: var(--mac-gold); }
.tab-panel { padding: 1.15rem; }
.tab-panel[hidden] { display: none!important; }
.tab-panel:focus { outline: none; }
.gate-message { display: block; min-height: 0; margin: 1rem 0 0; padding: .85rem 1rem; color: #5B3900; background: var(--mac-gold-20); border: 1px solid rgb(196 154 108 / 52%); border-radius: 10px; font-size: .9rem; font-weight: 700; }
.gate-message:empty { display: none; }

.code-reference { margin: 1rem 0; overflow: hidden; border: 1px solid rgba(73,89,101,.2); border-radius: 12px; background: #F8FAFC; }
.code-reference__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; color: var(--lab-text); background: #F3F4F6; border-bottom: 1px solid rgba(73,89,101,.16); }
.code-reference__header strong { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.code-reference__copy { flex: 0 0 auto; min-height: 2.25rem; padding: .45rem .7rem; font-size: .8rem; }
.code-reference pre { max-height: 28rem; margin: 0; overflow: auto; padding: 1rem; color: #F8FAFC; background: #27313A; font: .86rem/1.6 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.code-reference code { font: inherit; }
.code-reference__status { min-height: 1.25rem; margin: 0; padding: .45rem .9rem; color: var(--mac-grey); font-size: .82rem; font-weight: 700; }

.instructor-placeholder { margin: 1rem 0; border: 4px dashed #D0006F; border-radius: 10px; background: #FFF200; color: #000; padding: 1rem; font-weight: 700; }
.instructor-placeholder__title { display: flex; gap: .55rem; align-items: center; margin: 0 0 .35rem; color: #000; font-size: 1rem; font-weight: 900; letter-spacing: .02em; }
.instructor-placeholder p:last-child { margin-bottom: 0; }

.completion-export-card { margin: 1.5rem 0 1rem; border: 1px solid rgba(122,0,60,.2); border-top: 5px solid var(--mac-maroon); border-radius: 12px; background: #fff; padding: clamp(1.1rem,2vw,1.65rem); box-shadow: 0 12px 28px rgba(73,89,101,.07); }
.completion-export-eyebrow { margin: 0 0 .35rem; color: var(--mac-maroon); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.completion-export-title, .completion-details-title { margin: 0; color: var(--lab-text); font-size: 1.35rem; font-weight: 850; }
.completion-export-copy, .completion-details-copy, .completion-export-note { max-width: 76ch; color: var(--mac-grey); }
.completion-export-copy { }
.completion-details { margin-top: 1.15rem; border-top: 1px solid rgba(73,89,101,.14); padding-top: 1rem; }
.completion-details-copy { margin: .35rem 0 0; font-size: .92rem; }
.completion-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-top: .9rem; }
.completion-detail-field { display: grid; gap: .35rem; color: var(--lab-text); font-size: .9rem; font-weight: 750; }
.completion-detail-field input { width: 100%; min-height: 2.65rem; border: 1px solid rgba(73,89,101,.28); border-radius: 8px; background: #fff; color: var(--lab-text); padding: .55rem .65rem; font: inherit; }
.completion-detail-help { color: var(--mac-grey); font-size: .76rem; font-weight: 500; }
.completion-detail-field input:focus { outline: 3px solid rgba(253,191,87,.72); outline-offset: 2px; }
.completion-export-status { margin: 1.15rem 0 0; border: 1px solid rgba(73,89,101,.14); border-radius: 8px; background: #F5F7F8; color: var(--lab-text); padding: .75rem .85rem; font-weight: 750; }
.completion-export-status.is-ready { border-color: rgba(40,122,75,.28); background: #F1F8F3; color: #1F623E; }
.completion-export-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.completion-export-button:not(:disabled) { box-shadow: 0 8px 18px rgba(122,0,60,.2); }
.completion-export-note { margin: .85rem 0 0; font-size: .82rem; }

@media (max-width: 900px) {
  .grid-layout.two, .grid-layout.three, .field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .button-row > .button { width: 100%; }
  .section-card { padding: 1.2rem; }
  .completion-details-grid { grid-template-columns: 1fr; }
  .completion-export-actions, .completion-export-button { width: 100%; }
  .code-reference__header { align-items: flex-start; }
}

/* Keep every instructional card and table at least 1rem from surrounding content. */
body :is(
  .card,
  .lab-card,
  .topic-card,
  .section-card,
  .mini-card,
  .briefing-card,
  .warning-card,
  .danger-card,
  .success-card,
  .callout,
  .callout-danger,
  .callout-success,
  .diagram-card,
  .formula-card,
  .learning-outcome-card,
  .completion-card,
  .completion-export-card,
  .code-reference,
  .instructor-placeholder,
  .screenshot-placeholder,
  .tab-shell,
  .table-wrap
) {
  margin: 1rem;
}

/* Space controls from the field/label wrapper, not from the input itself. */
body :is(.response-field, .evidence-field, .completion-detail-field) {
  margin: 1rem;
}