/* Hallmark · macrostructure: Catalogue + Long Document · tone: quiet editorial · anchor hue: terracotta
 * Existing workbook tokens and route ownership preserved; content carries the interface.
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.lab-home { margin-top: var(--space-xl); padding-block: var(--space-xl); border-block: var(--rule-width) solid var(--color-rule); }
.lab-home > div > p { color: var(--color-muted); max-width: 65ch; margin-bottom: var(--space-xl); }
.lab-home-links { display: grid; gap: var(--space-xl); }
.lab-home-links a { display: flex; flex-direction: column; gap: var(--space-sm); color: var(--color-ink); min-height: 44px; }
.lab-home-links strong { font-size: var(--text-base); }
.lab-home-links strong span { color: var(--color-accent); margin-left: var(--space-lg); }
.lab-home-links a > span { font-size: var(--text-sm); color: var(--color-muted); }
.lab-track-intro { margin-block: var(--space-xl) var(--space-2xl); }
.lab-track-intro > p { max-width: 72ch; color: var(--color-muted); }
.stage-evidence { padding-block: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); }
.stage-evidence p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.stage-evidence strong { color: var(--color-ink); font-weight: 500; }
.stage-practice-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.stage-practice-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.lab-heading { max-width: 78ch; }
.lab-catalogue-note { color: var(--color-muted); margin-bottom: var(--space-xl); max-width: 75ch; }
.lab-toolbar { display: grid; gap: var(--space-lg); align-items: end; padding-block: var(--space-lg); border-block: var(--rule-width) solid var(--color-rule); }
.lab-toolbar .field { margin: 0; min-width: 0; }
.lab-toolbar label { display: block; margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.lab-toolbar input, .lab-toolbar select { width: 100%; min-height: 44px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-sm) var(--space-md); color: var(--color-ink); }
.lab-toolbar input::placeholder { color: var(--color-muted); }
.lab-toolbar .button { min-height: 44px; }
.lab-toolbar input:disabled, .lab-toolbar select:disabled { opacity: .55; cursor: not-allowed; }
.lab-toolbar input[aria-invalid="true"] { border-color: var(--color-error); }
.lab-result-count { color: var(--color-muted); font-size: var(--text-sm); margin-block: var(--space-lg) 0; }
.knowledge-grid, .exercise-grid { display: grid; column-gap: var(--space-2xl); }
.knowledge-item, .exercise-item { padding-block: var(--space-xl); border-bottom: var(--rule-width) solid var(--color-rule); min-width: 0; }
.knowledge-item h2, .exercise-item h2 { font-size: var(--text-md); line-height: 1.6; margin-block: var(--space-sm); }
.knowledge-item h2 a, .exercise-item h2 a { color: var(--color-ink); }
.knowledge-item p, .exercise-item p { color: var(--color-muted); line-height: 1.85; margin: var(--space-sm) 0 var(--space-lg); max-width: 65ch; }
.lab-meta { display: flex; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; color: var(--color-muted); font-size: var(--text-xs); }
.lab-meta > span + span { border-left: var(--rule-width) solid var(--color-rule); padding-left: var(--space-md); }
.lab-item-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.lab-item-bottom > span { color: var(--color-muted); font-size: var(--text-xs); }
.lab-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.lab-reading-path, .lab-related, .lab-search-section { margin-top: var(--space-2xl); }
.lab-reading-path ol { padding-left: var(--space-xl); color: var(--color-muted); line-height: 2; margin-block: var(--space-lg) var(--space-xl); }
.lab-back { margin-bottom: var(--space-xl); }
.topic-article { max-width: 76ch; }
.topic-article section, .exercise-content > section { margin-top: var(--space-2xl); }
.topic-article h2, .exercise-content h2 { margin-bottom: var(--space-md); }
.topic-article p, .exercise-content p { line-height: 1.9; }
.lab-points { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0; }
.lab-points dt { font-weight: 600; margin-bottom: var(--space-xs); }
.lab-points dd { margin: 0; line-height: 1.85; color: var(--color-muted); }
.lab-code { margin-block: var(--space-lg); background: var(--color-code); border-radius: var(--radius-sm); padding: var(--space-lg); min-width: 0; }
.lab-code-language { font: var(--text-xs)/1.5 var(--font-code); color: var(--color-muted); }
.lab-code pre { margin: var(--space-sm) 0 0; padding: 0; background: var(--color-transparent); color: var(--color-code-ink); border: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-sm)/1.9 var(--font-code); }
.lab-recall { margin-top: var(--space-md); }
.lab-recall .details-body { line-height: 1.85; }
.lab-pitfall { padding-block: var(--space-lg); border-block: var(--rule-width) solid var(--color-rule); }
.lab-pitfall p { margin-bottom: 0; }
.lab-sources { padding: 0; list-style: none; display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.lab-sources li { border-bottom: var(--rule-width) solid var(--color-rule); padding-bottom: var(--space-md); }
.lab-sources a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.lab-sources p { color: var(--color-muted); font-size: var(--text-sm); margin: 0; }
.exercise-layout { display: grid; gap: var(--space-2xl); align-items: start; }
.exercise-content, .exercise-plan { min-width: 0; }
.exercise-content .lab-assignment { margin-top: var(--space-xl); }
.lab-assignment { padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-sm); }
.lab-assignment p:last-child { margin-bottom: 0; }
.lab-guidance { margin-top: var(--space-xl); }
.lab-guidance ol, .exercise-plan ol { padding-left: var(--space-xl); margin-block: var(--space-md); line-height: 1.9; }
.lab-guidance li, .exercise-plan li { margin-bottom: var(--space-md); }
.exercise-plan { padding-block: var(--space-xl); border-top: var(--rule-width) solid var(--color-rule); }
.exercise-plan > h3 { margin-top: var(--space-xl); }
.exercise-plan .button-row { gap: var(--space-sm); }
.lab-topic-links { list-style: none; padding: 0; }
.lab-topic-links a { display: inline-flex; align-items: center; min-height: 44px; }
.lab-cases { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lab-cases th, .lab-cases td { text-align: left; vertical-align: top; padding: var(--space-md); border-bottom: var(--rule-width) solid var(--color-rule); overflow-wrap: anywhere; }
.lab-cases thead { background: var(--color-paper-2); }
.lab-cases tbody th { font-weight: 500; width: 45%; }
.lab-stretch { padding-block: var(--space-lg); border-block: var(--rule-width) solid var(--color-rule); }
.lab-demo { margin-top: var(--space-lg); }
.lab-demo-frame { display: block; width: 100%; height: 300px; background: var(--color-surface); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); }
.lab-concept { margin-bottom: var(--space-md); }
.lab-concept .lab-points { gap: var(--space-md); }
.lab-concept .lab-pitfall { font-size: var(--text-sm); padding-block: var(--space-md); }
.lab-lesson-practice { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); }
.lab-lesson-practice strong { font-size: var(--text-sm); font-weight: 500; }
.lab-lesson-practice a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; font-size: var(--text-sm); }
.lab-lesson-practice a span { color: var(--color-muted); font-size: var(--text-xs); }
.lab-toolbar .button, .lab-back .button, .lab-related .button, .exercise-plan .button, .exercise-content .button { white-space: nowrap; max-width: 100%; font-size: var(--text-sm); }
.lab-search-section > h2 { padding-top: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); }
@media (hover: hover) {
  .lab-toolbar input:hover, .lab-toolbar select:hover { background: var(--color-paper-2); }
  .lab-home-links a:hover strong, .knowledge-item h2 a:hover, .exercise-item h2 a:hover { color: var(--color-accent); }
}
@media (min-width: 640px) {
  .lab-home-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-toolbar .lab-query { grid-column: 1 / -1; }
  .lab-toolbar > .button { justify-self: start; }
}
@media (min-width: 960px) {
  .knowledge-grid, .exercise-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-toolbar { grid-template-columns: 140px 120px minmax(0, 1fr) auto; }
  .lab-toolbar .lab-query { grid-column: auto; }
  .exercise-layout { grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr); }
  .exercise-plan { margin-top: var(--space-xl); }
}
@media (max-width: 639px) {
  .lab-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-toolbar .lab-query { grid-column: 1 / -1; }
  .lab-toolbar > .button { grid-column: 1 / -1; justify-self: start; }
  .lab-related .button-row, .exercise-plan .button-row { align-items: flex-start; }
  .lab-assignment { padding: var(--space-lg); }
  .stage-practice-links { gap: var(--space-xs) var(--space-lg); }
  .stage-practice-links a, .lab-sources a { overflow-wrap: anywhere; }
}

/* Shared catalogue family from DESIGN.md: scan category, topic, then action. */
.knowledge-grid, .exercise-grid { grid-template-columns: minmax(0, 1fr); }
.knowledge-item, .exercise-item { display: grid; grid-template-columns: 145px minmax(0, 1fr) auto; gap: var(--space-xl); align-items: start; }
.knowledge-item .lab-meta, .exercise-item .lab-meta { display: block; padding-top: var(--space-sm); }
.knowledge-item .lab-meta span, .exercise-item .lab-meta span { display: block; border: 0; padding: 0; margin-bottom: var(--space-xs); }
.lab-list-copy { min-width: 0; }
.lab-list-copy h2 { margin-top: 0; font-size: 19px; }
.lab-list-copy p { margin-bottom: 0; }
.lab-list-copy > .small { display: block; margin-top: var(--space-sm); }
.knowledge-item > .lab-text-link, .exercise-item > .lab-text-link { align-self: center; white-space: nowrap; }
.lab-home { padding-block: var(--space-lg); }
.lab-concept { border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; background: var(--color-transparent); }
.lab-concept > summary { padding-inline: 0; }
.lab-concept > .details-body { padding-inline: 0; }
.lab-toolbar .lab-query { order: -1; }
@media (min-width: 960px) {
  .lab-toolbar { grid-template-columns: minmax(0, 1fr) 140px 120px auto; }
  body.assistant-open .lab-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.assistant-open .lab-toolbar .lab-query { grid-column: 1 / -1; }
  body.assistant-open .knowledge-item, body.assistant-open .exercise-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}
@media (max-width: 800px) {
  .knowledge-item, .exercise-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .knowledge-item .lab-meta, .exercise-item .lab-meta { display: flex; padding: 0; }
  .lab-meta > span { margin: 0; }
}

/* Setup tutorials use the same long-document typography and local-only forms. */
.tutorial-image { display:block; margin:1.5rem 0; max-width:100%; }
.tutorial-image img { display:block; width:100%; height:auto; border:1px solid var(--color-rule); border-radius:8px; }
.tutorial-image span { display:block; margin-top:.55rem; font-size:.9rem; line-height:1.7; color:var(--color-muted); }
.setup-entry { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); font-size: 13px; margin-block: var(--space-md) var(--space-xl); color: var(--color-muted); }
.setup-entry a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.setup-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); border-block: 1px solid var(--color-rule); padding-block: var(--space-md); margin-block: var(--space-xl); }
.setup-nav a { min-height: 44px; padding: var(--space-sm) var(--space-md); color: var(--color-muted); white-space: nowrap; border-radius: var(--radius-sm); }
.setup-nav a[aria-current="page"] { background: var(--color-tint); color: var(--color-accent); }
.setup-article { max-width: 80ch; }
.setup-layout { min-width: 0; }
.setup-layout > * { min-width: 0; }
.setup-route-hint { max-width: 80ch; color: var(--color-muted); font-size: 14px; }
.setup-toc { max-width: 80ch; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-xl); }
.setup-toc p { flex-basis: 100%; margin: 0; color: var(--color-muted); font-size: 13px; }
.setup-toc button { border: 0; background: transparent; color: var(--color-accent); padding: var(--space-sm) 0; min-height: 44px; text-align: left; font: inherit; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
@media (min-width: 1440px) {
  .setup-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .setup-toc { position: sticky; top: 90px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; max-height: calc(100dvh - 110px); overflow-y: auto; padding-right: var(--space-md); border-right: 1px solid var(--color-rule); }
  .setup-toc p { flex-basis: auto; padding-block: var(--space-sm); }
  .setup-toc button { flex-shrink: 0; width: 100%; font-size: 13px; }
}
.setup-article h2, #question-workshop, #setup-question-result { scroll-margin-top: 100px; }
.setup-code { margin-block: var(--space-lg); }
.setup-code > .button { margin-bottom: var(--space-xs); }
.setup-code pre { margin-top: 0; }
.setup-code-label { margin: 0 0 var(--space-sm); font-size: 13px; color: var(--color-muted); }
.knowledge-guide { margin-block: var(--space-lg) var(--space-xl); min-width: 0; }
.knowledge-toc { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-block: 1px solid var(--color-rule); }
.knowledge-toc p { flex-basis: 100%; margin: 0; color: var(--color-muted); font-size: 13px; }
.knowledge-toc button { min-height: 44px; padding: var(--space-sm) 0; text-align: left; border: 0; color: var(--color-accent); background: transparent; font: inherit; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.knowledge-prose { max-width: 85ch; font-size: 15px; line-height: 1.95; }
.knowledge-prose h2, .knowledge-prose h3, .knowledge-answer { scroll-margin-top: 100px; }
.knowledge-prose h2 { font-size: 21px; margin-top: var(--space-2xl); }
.knowledge-prose h3 { font-size: 17px; margin-top: var(--space-xl); }
.knowledge-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.knowledge-prose table { table-layout: fixed; width: 100%; }
.knowledge-prose th, .knowledge-prose td { overflow-wrap: anywhere; }
.knowledge-code { margin-block: var(--space-lg); }
.knowledge-code-label { color: var(--color-muted); font-size: 13px; margin-block: 0 var(--space-sm); }
.knowledge-code > .button { margin-bottom: var(--space-xs); }
.knowledge-code pre { margin-top: 0; }
.knowledge-answer, .lab-short-reference { margin-block: var(--space-lg); border-block: 1px solid var(--color-rule); }
.followup-start { margin-block: var(--space-xl); padding-block: var(--space-lg); border-block: 1px solid var(--color-rule); max-width: 85ch; }
.followup-start h2 { margin-top: 0; }
.followup-guide { margin-top: 0; }
.followup-next { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.followup-original { margin-top: var(--space-xl); }
@media(max-width:600px) { .knowledge-prose h2 { font-size: 19px; }.knowledge-prose th,.knowledge-prose td { padding: var(--space-sm); font-size: 13px; } }
.setup-article h2 { margin-top: var(--space-2xl); font-size: 22px; }
.setup-article pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.setup-article table { table-layout: fixed; width: 100%; }
.setup-article td, .setup-article th { overflow-wrap: anywhere; }
.setup-next { margin-top: var(--space-2xl); }
.go-first-run { margin-block:var(--space-lg); padding:var(--space-lg); border:1px solid var(--color-rule); border-left:3px solid var(--color-accent); background:var(--color-paper-2); }
.go-first-run h2 { font-size:20px; margin:0 0 var(--space-sm); }
.go-first-run > p { margin:0 0 var(--space-md); }
.go-first-run ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md) var(--space-xl); padding-left:1.4em; }
.go-first-run li strong,.go-first-run li span { display:block; }
.go-first-run li span { color:var(--color-muted); font-size:13px; line-height:1.8; margin-top:4px; }
.go-init-command { margin-block:var(--space-lg); }
.go-init-command p { font-size:13px; margin-bottom:var(--space-sm); }
.go-init-command pre { font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; margin-block:var(--space-sm); }
.go-first-run .button { white-space:normal; max-width:100%; }
@media(max-width:600px) { .go-first-run { padding:var(--space-md); }.go-first-run ol { grid-template-columns:minmax(0,1fr); }.go-first-run .button-row { align-items:flex-start; } }
.setup-worksheet { margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); max-width: 80ch; }
.setup-worksheet .field { margin-top: var(--space-xl); }
.setup-worksheet label { display: block; margin-bottom: var(--space-sm); }
.setup-worksheet textarea { display: block; width: 100%; min-height: 90px; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: 14px/1.8 var(--font-body); resize: vertical; }
.setup-worksheet textarea[aria-invalid="true"] { border-color: var(--color-error); }
.setup-worksheet [type="submit"] { margin-top: var(--space-lg); }
.setup-worksheet pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.8 var(--font-body); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-lg); }
.setup-search-result { padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
#setup-question-status { min-height: 24px; font-size: 13px; color: var(--color-muted); }
@media (max-width: 640px) {
  .setup-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-nav a { padding-inline: var(--space-sm); font-size: 13px; }
  .setup-article h2 { font-size: 19px; }
  .setup-article td, .setup-article th { padding: var(--space-sm); font-size: 13px; }
}