/* Styles for lab pages that set `extra_css: lab.css` in their front matter. */

/* Markdown tables that should be as wide as their content, not the page. */
table.compact { width: auto; }

/* ./perflab output rendered as a table */
.perf-wrap { overflow-x: auto; margin-bottom: 1rem; }
.perf-wrap .scroll-hint { font-size: 0.7rem; color: #999; }
table.perf-out { width: auto; margin-bottom: 0; font-size: 0.75rem; white-space: nowrap; border-collapse: collapse; border: 1px solid #d5dbe1; font-variant-numeric: tabular-nums; }
.perf-out th, .perf-out td { padding: 0.3rem 0.5rem; text-align: right; border: 0; }
.perf-out tbody td { border-top: 1px solid #edf0f3; background: none; }
.perf-out tbody tr:nth-child(odd) td { background: none; }
.perf-out tbody tr:hover td { background: #f3f7fc; }
.perf-out thead th { background: #f2f5f8; color: #313131; }
.perf-out thead tr:first-child th { text-align: center; color: #5a6672; font-weight: normal; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #dde3e9; }
.perf-out thead tr:last-child th { border-bottom: 2px solid #bcc5cf; }
.perf-out colgroup.group { border-left: 1px solid #d5dbe1; }
.perf-out colgroup.result { background: #eef4fc; }
.perf-out td:nth-child(2), .perf-out td:nth-child(3), .perf-out thead tr:last-child th:nth-child(2), .perf-out thead tr:last-child th:nth-child(3) { text-align: left; }
.perf-out td:nth-child(1) { color: #8a96a3; }
.perf-out td:nth-last-child(-n+2) { font-weight: bold; color: #1f4f8f; }
.perf-summary { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1rem; }
.perf-summary > div { border: 1px solid #d5dbe1; border-radius: 6px; padding: 0.45rem 0.9rem; min-width: 9rem; }
.perf-summary .label { display: block; font-size: 0.7rem; color: #5a6672; text-transform: uppercase; letter-spacing: 0.04em; }
.perf-summary .value { display: block; font-size: 1.4rem; font-weight: bold; color: #313131; font-variant-numeric: tabular-nums; }
.perf-summary > div.key { border-color: #3b7dd8; background: #eef4fc; }
.perf-summary > div.key .value { color: #1f4f8f; }
/* Light-ruled tables: the column legend and the small .compact tables */
table.legend, table.compact { width: auto; border: 1px solid #d5dbe1; font-size: 0.9rem; }
.legend th, .legend td, .compact th, .compact td { border: 0; border-top: 1px solid #edf0f3; padding: 0.3rem 0.8rem; }
.legend thead th, .compact thead th { background: #f2f5f8; border-bottom: 2px solid #bcc5cf; }
.legend tbody tr:nth-child(odd) td, .compact tbody tr:nth-child(odd) td { background: none; }
.legend td:first-child { font-weight: bold; white-space: nowrap; }
details.terminal { margin-bottom: 1rem; }
details.terminal pre { font-size: 0.65rem; overflow-x: auto; white-space: pre; margin-top: 0.5rem; }
@media (min-width: 75em) { .perf-wrap .scroll-hint { display: none; } }   /* the table fits; no need to scroll */

/* Key facts card at the top of a lab page */
.lab-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 0.9rem 1.1rem; margin: 0.5rem 0 1.5rem; background: #fbfcfd; }
.lab-card .due { font-size: 1.25rem; font-weight: bold; color: #202b38; }
.lab-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; margin: 0.6rem 0 0; }
.lab-card dt { color: #777; font-weight: normal; }
.lab-card dd { margin: 0; }

/* Callout boxes: default (warning), .danger, .info */
.callout { border-left: 4px solid #e0a800; background: #fff8e1; padding: 0.7rem 1rem; border-radius: 0 6px 6px 0; margin: 1rem 0; }
.callout.danger { border-color: #d9534f; background: #fdf0ef; }
.callout.info { border-color: #3b7dd8; background: #eef4fc; }
.callout .title { display: block; font-weight: bold; margin-bottom: 0.3rem; }
.callout > :last-child, .callout ul:last-child { margin-bottom: 0; }

/* Numbered step headings */
.step { display: flex; gap: 0.8rem; align-items: center; margin: 1.6rem 0 0.4rem; font-size: 1.05rem; font-weight: bold; }
.step::before { content: attr(data-n); flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #202b38; color: #fff; text-align: center; line-height: 1.7rem; font-size: 0.9rem; }

/* Grade tier labels */
.tier { display: inline-block; min-width: 1.6rem; padding: 0 0.4rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; color: #fff; text-align: center; }
.tier.c { background: #8a6d3b; } .tier.b { background: #3b7dd8; } .tier.a { background: #2e8b57; } .tier.x { background: #9b59b6; }

/* Diagrams: centered, never wider than their natural size */
img.figure { display: block; max-width: 100%; height: auto; margin: 1rem auto 1.5rem; }

/* The post layout puts the page title in an <h3> after an <h1> holding page.tagline,
   which lab pages leave blank; hide the blank <h1> and show the title at <h1> size. */
.post > h1.post-title { display: none; }
.post > h1.post-title + h3 { font-size: 2rem; margin-bottom: 1rem; }

/* Collapsible hints */
details.hint { border: 1px solid #bcc5cf; border-radius: 6px; padding: 0.4rem 0.9rem; margin: 0.8rem 0; background: #f7f9fb; }
details.hint > summary { cursor: pointer; font-weight: bold; color: #313131; }
details.hint[open] > summary { margin-bottom: 0.5rem; }
details.hint > ul:last-child { margin-bottom: 0.3rem; }

/* In-page table of contents under the key facts card */
.lab-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.5rem 0 1.5rem; }
.lab-toc a { font-size: 0.85rem; padding: 0.2rem 0.7rem; border: 1px solid #bcc5cf; border-radius: 999px; color: #202b38; text-decoration: none; }
.lab-toc a:hover { background: #eef4fc; border-color: #3b7dd8; }