.cs267-workbook .page { max-width: 1120px; }
.assignment-kicker { margin: 0 0 6px; color: var(--accent, #166534); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.assignment-source-notice { display: flex; justify-content: space-between; gap: 24px; margin: 24px 0 12px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--paper-raised); }
.assignment-source-notice p { margin: 3px 0; }
.assignment-source-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.assignment-source-actions a, .official-source-grid a { text-decoration: none; }
.assignment-primary-nav { position: sticky; top: 8px; z-index: 12; display: flex; gap: 8px; width: max-content; max-width: 100%; margin: 12px 0 30px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper-raised) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.assignment-primary-nav a { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; color: var(--ink); font-size: .82rem; font-weight: 750; text-decoration: none; }
.assignment-primary-nav a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.assignment-workbook { scroll-margin-top: 82px; }
.workbook-header { max-width: 800px; margin: 52px 0 20px; }
.workbook-header h2, .chinese-task-intro > h2, .official-sources > h2 { margin: 0 0 10px; }
.workbook-header > p:last-child, .chinese-task-intro > p { font: 1.04rem/1.7 ui-serif, Georgia, serif; color: var(--muted); }
.workbook-mission { max-width: 840px; padding: 18px 20px; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); }
.workbook-mission p { margin: 5px 0; }
.workbook-facts { margin-bottom: 0; }
.stage-strip { display: flex; gap: 8px; margin: 24px 0; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
.stage-strip a { min-width: 148px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); font-size: .82rem; font-weight: 750; text-decoration: none; }
.stage-strip a span { display: block; color: var(--muted); font: 700 .67rem/1.2 ui-monospace, monospace; }
.stage-strip a.is-active { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.workbook-shell { display: grid; grid-template-columns: minmax(0, 850px) 220px; gap: 34px; align-items: start; }
.workbook-side { position: sticky; top: 82px; padding: 14px 0 14px 18px; border-left: 1px solid var(--line); }
.workbook-side nav { display: grid; gap: 3px; }
.workbook-side a { padding: 8px 10px; border-radius: 7px; color: var(--muted); font-size: .79rem; text-decoration: none; }
.workbook-side a.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 750; }
.workbook-stage { scroll-margin-top: 86px; margin: 0 0 58px; }
.workbook-stage > header { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.stage-number { margin: 0; color: var(--accent); font: 800 .72rem/1.3 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.workbook-stage h3 { margin: 5px 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); }
.stage-build { margin: 0; color: var(--muted); }
.stage-label { margin: 0 0 9px; color: var(--accent-dark); font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.stage-depends { margin: 18px 0; }
.stage-depends h4 { margin: 0 0 8px; font-size: .86rem; }
.stage-dep-links { display: flex; flex-wrap: wrap; gap: 7px; }
.stage-dep-links a, .stage-problem-link { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); font-size: .79rem; font-weight: 700; text-decoration: none; }
.stage-readiness { margin: 16px 0; padding: 12px 15px; border: 1px dashed var(--line); border-radius: 9px; }
.stage-readiness summary, .stage-hints summary { cursor: pointer; font-weight: 750; }
.stage-contract { margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.contract-grid strong { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.contract-grid p, .contract-grid ul { margin-bottom: 0; }
.stage-sanity { margin: 18px 0; padding: 17px 19px; border-left: 4px solid #4fd8b8; border-radius: 0 10px 10px 0; background: color-mix(in srgb, #4fd8b8 10%, var(--paper-raised)); }
.stage-sanity p:last-child { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .87rem; }
.stage-failures { margin: 22px 0; }
.failure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.failure-grid > div { padding: 14px; border-top: 3px solid var(--warn, #a16207); border-radius: 8px; background: var(--warn-soft, #fff7ed); }
.failure-grid strong { font-size: .86rem; }
.failure-grid p { margin: 5px 0 0; font-size: .8rem; color: var(--muted); }
.stage-hints { display: grid; gap: 7px; margin: 20px 0; }
.stage-hints details { padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); }
.stage-hints p { margin-bottom: 0; }
.stage-experiment { margin: 22px 0; padding: 19px 20px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 12px; }
.stage-experiment ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: experiment; }
.stage-experiment li { counter-increment: experiment; padding: 12px; background: var(--accent-soft); border-radius: 8px; }
.stage-experiment li::before { content: counter(experiment, decimal-leading-zero); display: block; margin-bottom: 5px; color: var(--accent); font: 800 .7rem/1 ui-monospace, monospace; }
.stage-experiment p { margin: 5px 0 0; font-size: .82rem; }
.stage-gate { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; padding: 20px; border: 1px solid rgba(99,230,140,.35); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--paper-raised)); }
.stage-gate p { margin: 4px 0; }
.gate-checklist { margin: 0; padding: 0; list-style: none; }
.gate-checklist li { margin: 6px 0; }
.gate-checklist label { display: flex; gap: 9px; align-items: start; font-size: .84rem; }
.gate-checklist input { margin-top: .25em; accent-color: var(--accent); }
.stage-problem-link { grid-column: 1 / -1; width: max-content; }
.capability-summary, .assignment-retrospective { margin: 58px 0; padding-top: 26px; border-top: 1px solid var(--line); }
.capability-summary h3, .assignment-retrospective h3 { margin: 0 0 18px; }
.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.capability-grid > div { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.capability-grid > div.is-complete { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.chinese-task-intro { scroll-margin-top: 82px; margin: 76px 0 24px; padding-top: 30px; border-top: 2px solid var(--ink); }
.problem-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 24px 0; }
.problem-index a { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: .84rem; font-weight: 720; text-decoration: none; }
.problem-index span { color: var(--accent); font-family: ui-monospace, monospace; }
.translated-problems { display: grid; gap: 8px; }
.problem-row { scroll-margin-top: 88px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); }
.problem-row:target { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.problem-row summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 15px 17px; cursor: pointer; }
.problem-row summary > span:last-child { grid-column: 2; color: var(--muted); font-size: .8rem; }
.problem-number { color: var(--accent); font: 800 .7rem/1.4 ui-monospace, monospace; }
.problem-body { padding: 2px 20px 20px; border-top: 1px solid var(--line); }
.problem-body h3 { margin-top: 20px; font-size: 1rem; }
.problem-back { display: inline-block; margin-top: 14px; font-size: .8rem; font-weight: 700; }
.problem-source { margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.original-guide-marker { margin: 42px 0 10px; padding-top: 28px; border-top: 1px solid var(--line); }
.official-sources { scroll-margin-top: 82px; margin: 70px 0 30px; padding-top: 30px; border-top: 2px solid var(--ink); }
.official-source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.official-source-grid a { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); }
.official-source-grid span { color: var(--muted); font-size: .8rem; }
@media (max-width: 960px) {
  .workbook-shell { grid-template-columns: minmax(0, 1fr); }
  .workbook-side { display: none; }
  .assignment-primary-nav { top: 4px; }
}
@media (max-width: 680px) {
  .cs267-workbook .page { overflow-x: clip; }
  .assignment-source-notice { display: grid; padding: 15px; }
  .assignment-source-actions { align-items: start; flex-wrap: wrap; }
  .assignment-primary-nav { width: calc(100% - 2px); border-radius: 10px; }
  .contract-grid, .failure-grid, .stage-experiment ol, .stage-gate, .capability-grid, .problem-index, .official-source-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-problem-link { grid-column: 1; max-width: 100%; }
  .problem-row summary { grid-template-columns: 1fr; }
  .problem-row summary > span:last-child { grid-column: 1; }
  .workbook-stage { margin-bottom: 44px; }
  .workbook-header { margin-top: 38px; }
}
/* Assignment stages are the useful navigation here; the shared heading TOC is
   redundant and used to produce a second sticky rail. */
body.cs267-workbook > .pb-toc {
  display: none !important;
}