.lab-preview-page {
  margin: 0;
  color: #262220;
  background: #fff;
  font: 17px/1.55 Palatino, "Palatino Linotype", Georgia, serif;
}
.lab-preview-page main { max-width: 58rem; margin: auto; padding: 2rem 1.25rem 5rem; }
.lab-preview-page a { color: #a31f34; }
.lab-preview-page h2 { margin-top: 2.5rem; }
.lab-preview-page h3 { margin-top: 2rem; }
.lab-preview h2, .lab-preview h3, .lab-preview h4 { color: #262220; }
.lab-preview h2 { border-bottom: 1px solid #dedbd8; }
/* Embedded screenshots and excerpts read as figures, not page text: a white
   matte inside a hairline, a small radius, and a soft shadow that lifts the
   image off the page. */
.lab-preview img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0 .6rem;
  padding: .4rem;
  background: #fff;
  border: 1px solid #e3d5d8;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .07);
}
.lab-preview .lab-toc { line-height: 1.9; }
.lab-preview :focus-visible { outline: 2px solid #a31f34; outline-offset: 3px; }
/* Code blocks sit in a hairline box on the page's own ground. */
/* A long command or prompt folds at the box edge instead of running off it,
   so a block fills the width it is given. */
.lab-preview pre { padding: .8rem 1rem; background: transparent; border: 1px solid #eceae8; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; font-size: .85em; line-height: 1.45; }
.lab-preview code { font-family: "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.lab-preview pre code { overflow-wrap: normal; }
.lab-preview .copy-wrap { position: relative; }
.lab-preview .copy-wrap pre { padding-left: 2.6rem; }
/* The fence language tells a shell command (sh, powershell) from a Claude
   prompt (prompt), and each kind opens with a small grey label line. The label
   is generated content, so the copy button leaves it off the clipboard. Other
   blocks, such as expected output, have none. */
.lab-preview pre.sh::before, .lab-preview pre.powershell::before, .lab-preview pre.prompt::before { display: block; margin-bottom: .3rem; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.lab-preview pre.sh::before { content: "Shell command"; }
.lab-preview pre.powershell::before { content: "PowerShell"; }
.lab-preview pre.prompt::before { content: "Prompt"; }
/* The copy control is a quiet square button in the block's top corner: a grey
   outline glyph that takes a tinted ground under the pointer, and turns into a
   check for a moment once the text is on the clipboard. */
.lab-preview .copy-mark { position: absolute; top: .4rem; left: .4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 6px; color: #9a9a9a; cursor: pointer; line-height: 1; user-select: none; transition: color .12s ease, background-color .12s ease; }
.lab-preview .copy-mark:hover, .lab-preview .copy-mark:focus { color: #4a4a4a; background: #f4f2f0; outline: none; }
.lab-preview .copy-mark.copied { color: #567650; }
/* The label rides beside the button while the pointer is on it, so the glyph
   needs no caption of its own. */
.lab-preview .copy-mark::after { content: attr(data-label); position: absolute; top: 50%; left: calc(100% + .35rem); transform: translateY(-50%); padding: .1rem .4rem; border-radius: 4px; background: #262220; color: #fff; font-size: .62rem; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.lab-preview .copy-mark:hover::after, .lab-preview .copy-mark:focus::after { opacity: 1; }
/* The theme wraps every table in a full-width shadowed card and stretches the table
   to fill it. Lab tables are small, so the card fits the table instead, and the
   table keeps its natural width with hairline borders. */
.lab-preview .table-wrapper { display: inline-block; width: auto; max-width: 100%; margin: 1rem 0; box-shadow: none; border-radius: 0; }
.lab-preview table { min-width: 0; width: auto; border-collapse: collapse; margin: 0; font-size: .94em; }
.lab-preview th, .lab-preview td { border: 1px solid #e3d5d8; padding: .45rem .65rem; text-align: left; }
/* The theme clears the last row's bottom border to sit flush with its card; without the card the table needs it back. */
.lab-preview tbody tr:last-of-type th, .lab-preview tbody tr:last-of-type td { border-bottom: 1px solid #e3d5d8; }
.lab-preview li { margin-bottom: .35rem; }
.lab-preview details { margin: 1rem 0; padding: .55rem .75rem; border: 1px solid #e0dedc; border-radius: 3px; }
.lab-preview summary { cursor: pointer; font-size: 1em; font-weight: normal; color: #555; }
.lab-preview summary:hover { text-decoration: underline; }
.lab-preview .reading-pairs { margin: 1rem 0 1.5rem; }
.lab-preview .reading-pair-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid #e3d5d8; }
.lab-preview .reading-pair-tabs[hidden], .lab-preview .reading-pair-panel[hidden] { display: none; }
.lab-preview .reading-pair-tabs button { flex: 0 1 auto; padding: .65rem .55rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: #555; font: inherit; text-align: left; cursor: pointer; }
.lab-preview .reading-pair-tabs button[aria-selected="true"] { border-bottom-color: #a31f34; color: #a31f34; font-weight: 600; }
.lab-preview .reading-pair-tabs button:hover { color: #a31f34; }
.lab-preview .reading-pair-panel { min-width: 0; padding: .25rem 0 .75rem; }
.lab-preview .reading-pair-panel > h3:first-child { margin-top: 1rem; }
/* The active tab already shows the pair's heading; print and no-JavaScript pages keep it. */
@media screen {
  .lab-preview .reading-pair-tabs:not([hidden]) ~ .reading-pair-panel > h3:first-child { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.lab-preview .reading-pair-panel .table-wrapper { display: block; overflow-x: auto; }
.lab-preview .reading-pair-panel table { display: block; max-width: 100%; overflow-x: auto; }
.lab-preview .reading-pair-panel th:nth-child(2) { min-width: 12rem; }
.lab-preview .reading-pair-panel th:nth-child(3) { min-width: 17rem; }
.lab-preview #closing-check { padding: .85rem 1rem; }
.lab-preview #closing-check > summary { color: inherit; font-weight: 600; }
.lab-preview #closing-check > h3 { margin-top: 2rem; font-weight: 600; text-transform: none; letter-spacing: normal; }
.lab-preview [id] { scroll-margin-top: 1rem; }
/* Box the questions students prepare and staff discuss. */
/* A tip quote opens with a muted star before its bold Tip. */
.lab-preview .tip-mark { color: #8a6d73; }
.lab-preview .checkoff { margin: 1.75rem 0; }
.lab-preview .checkoff-questions { margin: 1.25rem 0; padding: 1rem 1.25rem; border: 1px solid #e2e2e2; border-radius: 5px; background: #f7f7f7; }
.lab-preview .checkoff-questions > p:first-child { margin: 0 0 .6rem; }
.lab-preview .checkoff-questions > :last-child { margin-bottom: 0; }
.lab-preview .checkoff-questions > ol, .lab-preview .checkoff-questions > ul { margin-top: 0; }
.lab-preview .checkoff-questions > ol > li:last-child { margin-bottom: 0; }
.lab-preview .checkoff > h3:first-child, .lab-preview .checkoff-questions > h3:first-child { margin: 0 0 .6rem; color: inherit; font-size: 1.125em; font-weight: 600; }
.lab-preview .checkoff > :last-child { margin-bottom: 0; }
.lab-preview .checkoff .staff-checkoff { margin: .75rem 0; padding: .5rem 0; border-width: 1px 0 0; border-radius: 0; }
.lab-preview .checkoff .staff-checkoff > summary { color: #6b6b6b; font-size: .9em; }
@media (max-width: 40rem) {
  .lab-preview #closing-check .table-wrapper { display: block; }
  .lab-preview #closing-check table { width: 100%; table-layout: fixed; }
  .lab-preview #closing-check th, .lab-preview #closing-check td { padding: .4rem; }
}
@media print {
  .lab-preview .checkoff-questions { background: transparent; border-color: currentColor; }
  .lab-preview-page main { max-width: none; padding: 0; }
  .lab-preview .lab-toc { display: none; }
  .lab-preview details { border: 0; padding: 0; }
  .lab-preview .reading-pair-tabs { display: none; }
  .lab-preview .reading-pair-panel, .lab-preview .reading-pair-panel[hidden] { display: block; border: 0; padding: 0; }
  .lab-preview .reading-pair-panel table { display: table; }
  .lab-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .lab-preview .copy-mark { display: none; }
  .lab-preview table { font-size: .8em; }
  .lab-preview h2, .lab-preview h3, .lab-preview h4, .lab-preview summary { break-after: avoid; }
}

/* Staff answer headings have a red rule and a jump list under the title. */
.lab-preview ol.lab-questions { margin: .4rem 0 1.6rem; padding-left: 1.4rem; font-size: .92em; color: #555; }
.lab-preview ol.lab-questions li { margin: .15rem 0; }
.lab-preview ul.lab-questions { margin: .4rem 0 1.6rem; padding-left: 0; list-style: none; font-size: .92em; color: #555; }
.lab-preview ul.lab-questions li { margin: .15rem 0; }
.lab-preview h2.question, .lab-preview h3.question { border-left: 3px solid #a31f34; padding-left: .6rem; }
.lab-preview h2.question .qnum, .lab-preview h3.question .qnum { display: inline-block; min-width: 1.4rem; margin-right: .25rem; color: #a31f34; font-variant-numeric: tabular-nums; }

/* Role labels. A paragraph that opens with a bold Expect., Accept., or Ask.
   is tagged by the script in head_custom.html; the tag and rule colour say
   the role at a glance: what a good answer has, what else earns credit, what
   to ask at the checkoff. */
.lab-preview p.role { padding-left: .9rem; border-left: 3px solid #d8d8d8; }
.lab-preview p.role .tag { display: inline-block; margin-right: .45rem; padding: 0 .4rem; border-radius: 3px; font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: .08em; color: #fff; background: #6b6b6b; }
.lab-preview p.role-expect { border-left-color: #6b6b6b; }
.lab-preview p.role-expect .tag { background: #6b6b6b; }
.lab-preview p.role-accept { border-left-color: #567650; }
.lab-preview p.role-accept .tag { background: #567650; }
.lab-preview p.role-ask { border-left-color: #a31f34; }
.lab-preview p.role-ask .tag { background: #a31f34; }

/* Staff-note link under the lab title, review pages only: its own line, body size. */
.lab-preview p.staff-link { margin: -.35rem 0 1.4rem; font-size: 1em; }
.lab-preview p.staff-link a { color: #a31f34; font-weight: 600; }
.lab-preview p.staff-link a:hover { text-decoration: underline; }