/* Hallmark · macrostructure: Workbench · tone: quiet editorial · anchor hue: terracotta
 * approved reference: projects/web/ai-workbook-reference · shared production theme
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
body { font-size: 14px; }
h1 { font-weight: 400; line-height: 1.45; }
h2 { font-size: 18px; }
.sidebar { width: var(--rail-width); background: var(--color-paper-2); padding: 28px 16px 22px; }
.brand { font-size: 16px; gap: 8px; }
.brand svg { width: 30px; height: 30px; }
.brand svg rect { fill: var(--color-transparent); }
.brand svg path { stroke: var(--color-accent); }
.brand small { font-size: 9px; letter-spacing: .1em; }
.sidebar nav { margin: 24px 0; }
.sidebar nav > a { font-weight: 400; font-size: 13px; padding: 8px; }
.nav-label { font-size: 10px; letter-spacing: .1em; }
.page-shell { margin-left: var(--rail-width); }
.topbar { min-height: 76px; padding: 14px 34px; gap: 16px; }
.breadcrumb { font-size: 12px; flex: 1; }
.search-form { width: 240px; font-size: 12px; }
.search-form label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: clip; }
.search-form input { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); }
main { max-width: 1180px; padding: 40px 42px 48px; }
.button { font-weight: 500; }
.button.primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.button.primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); opacity: 1; }
.button.quiet { color: var(--color-accent); }
.welcome { display: block; margin-bottom: 34px; }
.welcome p { max-width: 600px; line-height: 1.9; }
.welcome-sketch { display: none; }
.workbook-eyebrow { display: block; color: var(--color-muted); font: 10px/1.6 var(--font-body); letter-spacing: .13em; margin-bottom: 12px; }
.home-start { padding: 26px; background: var(--color-paper-2); border-radius: var(--radius-md); }
.home-start h2 { font: 25px/1.5 var(--font-display); margin-bottom: 8px; }
.home-start p { max-width: 650px; color: var(--color-muted); }
.home-start .button-row { margin-top: 20px; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 34px; }
.course-pair { gap: 30px; }
.course-card { border: 0; border-top: 1px solid var(--color-rule); border-radius: 0; background: var(--color-transparent); padding: 24px 0; }
.course-card header { gap: 12px; }
.course-icon { background: var(--color-transparent); width: 36px; height: 40px; border-radius: 0; }
.go .course-icon { background: var(--color-transparent); color: var(--color-muted); }
.home-method { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--color-rule); padding: 22px 0; margin-top: 18px; }
.home-method p { margin: 7px 0 0; color: var(--color-muted); font-size: 13px; }
.callout { border: 0; border-radius: var(--radius-sm); background: var(--color-paper-2); }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 24px 42px; }
.site-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.site-footer > div:first-child { flex-basis: 100%; }
.site-footer strong { font: 14px var(--font-body); }
.site-footer p, .site-footer span { margin: 0; }
.site-footer a { min-height: 32px; display: inline-flex; align-items: center; }
.lesson-header { margin-bottom: 22px; }
.lesson-header > p { color: var(--color-muted); line-height: 1.9; }
.concept-list { gap: 8px; }
.concept-list li { background: var(--color-transparent); border: 1px solid var(--color-rule); border-radius: 4px; font-size: 11px; }
.lesson-grid { display: block; }
.workbook-tabs { display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--color-rule); margin: 24px 0 28px; }
.workbook-tabs button { color: var(--color-muted); background: var(--color-transparent); border: 0; border-bottom: 2px solid var(--color-transparent); padding: 12px 0; min-height: 44px; font-size: 13px; white-space: nowrap; }
.workbook-tabs button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.workbook-tabpanel > section { margin-bottom: 26px; }
.task-box { background: var(--color-paper-2); padding: 24px; border: 0; border-radius: var(--radius-sm); }
.task-box p { margin-top: 12px; line-height: 1.9; }
.task-box .button-row { margin-top: 18px; }
.lesson-main > section { margin-bottom: 24px; }
.lesson-aside { position: static; }
.lesson-aside .panel { padding: 24px 0; border: 0; background: var(--color-transparent); }
.lesson-bottom { margin-top: 30px; }
.code-panel { border-color: var(--color-rule); background: var(--color-paper-2); }
.code-editor { background: var(--color-code); color: var(--color-code-ink); line-height: 1.85; }
.code-tools, .preview-label { background: var(--color-paper-2); color: var(--color-muted); }
.code-tools .button-row { gap: 8px; }
.workbook-preview-status { min-height: 22px; font-size: 12px; color: var(--color-muted); margin: 10px 0; }
.workbook-inline-help { padding: 20px 0; border-top: 1px solid var(--color-rule); }
.workbook-inline-help p { margin: 8px 0; }
#course-outline { border-top: 1px solid var(--color-rule); padding-top: 14px; margin: 0 0 22px; }
#course-outline > p { font-size: 11px; color: var(--color-muted); margin: 0 8px 10px; }
#course-outline .outline-links { max-height: 270px; overflow: auto; scrollbar-width: thin; }
#course-outline a { display: flex; align-items: center; gap: 10px; color: var(--color-muted); padding: 10px 8px; font-size: 12px; line-height: 1.5; border-radius: var(--radius-sm); }
#course-outline a:hover { background: var(--color-paper); text-decoration: none; }
#course-outline a[aria-current="page"] { color: var(--color-accent); background: var(--color-tint); }
.outline-number { font: 11px var(--font-code); flex: 0 0 18px; }
.outline-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-done { margin-left: auto; }
.lesson-view .sidebar #site-nav { margin-bottom: 18px; }
.lesson-view .sidebar #site-nav .nav-label { margin-top: 12px; }
.lesson-view .sidebar #site-nav > a { min-height: 38px; }
.method-intro { max-width: 650px; }
.method-list { list-style: none; padding: 0; margin: 28px 0; }
.method-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-top: 1px solid var(--color-rule); }
.method-list .method-number { font: 12px/26px var(--font-code); color: var(--color-accent); }
.method-list h2 { margin-bottom: 8px; }
.method-list p { color: var(--color-muted); font-size: 14px; max-width: 720px; }
.method-example { white-space: pre-wrap; font: 13px/1.9 var(--font-body); padding: 16px 20px; background: var(--color-paper-2); border-radius: var(--radius-sm); }
.assistant-panel { position: fixed; inset: 0 0 0 auto; width: var(--assistant-width); height: 100dvh; z-index: 8; border-left: 1px solid var(--color-rule); background: var(--color-surface); display: flex; flex-direction: column; }
.assistant-heading { padding: 20px 20px 16px; border-bottom: 1px solid var(--color-rule); }
.assistant-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assistant-heading h2 { font-size: 14px; }
.assistant-symbol { font: 23px var(--font-display); color: var(--color-accent); margin-right: 6px; }
.assistant-close { border: 0; background: var(--color-transparent); min-width: 44px; min-height: 44px; font-size: 22px; border-radius: var(--radius-sm); }
.provider-button { width: 100%; justify-content: space-between; margin-top: 10px; font-size: 12px; background: var(--color-paper); }
.assistant-body { flex: 1; overflow: auto; padding: 24px 22px; overscroll-behavior: contain; }
.assistant-mode-note { font-size: 11px; background: var(--color-paper-2); padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.assistant-greeting { font: 24px/1.6 var(--font-display); margin: 10px 0; }
.assistant-description { color: var(--color-muted); font-size: 13px; line-height: 1.9; }
.assistant-suggestions { display: grid; margin: 20px 0; }
.assistant-suggestions button { text-align: left; border: 0; border-bottom: 1px solid var(--color-rule); background: var(--color-transparent); padding: 12px 0; min-height: 44px; font-size: 12px; color: var(--color-ink); }
.assistant-suggestions button::after { content: '↗'; float: right; color: var(--color-muted); }
.assistant-context { border-top: 1px solid var(--color-rule); padding-top: 15px; font-size: 12px; }
.assistant-context label { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.assistant-context input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.assistant-context details { margin-top: 8px; border: 0; background: var(--color-transparent); }
.assistant-context summary { padding: 8px 0; min-height: 40px; font-size: 12px; }
.assistant-context pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: 11px/1.8 var(--font-code); }
.assistant-result { margin-top: 20px; border-top: 1px solid var(--color-rule); padding-top: 16px; }
.assistant-result h3 { font-size: 12px; color: var(--color-accent); }
.assistant-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.9 var(--font-body); }
.assistant-compose-area { padding: 14px 18px; }
.assistant-compose { padding: 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); }
.assistant-compose label { font-size: 11px; color: var(--color-muted); }
.assistant-compose textarea { display: block; width: 100%; min-height: 85px; max-height: 28dvh; resize: vertical; background: var(--color-transparent); border: 0; padding: 6px 0; margin: 6px 0 10px; font-size: 13px; }
.assistant-compose small { color: var(--color-muted); font-size: 10px; }
.assistant-compose .button { font-size: 12px; padding: 8px 10px; }
.assistant-status { font-size: 12px; color: var(--color-accent); min-height: 22px; margin: 6px 0 0; }
.assistant-footnote { color: var(--color-muted); font-size: 10px; text-align: center; margin: 4px 0 0; }
.workbook-dialog { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: 26px; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: var(--color-ink); background: var(--color-paper); }
.workbook-dialog::backdrop { background: var(--color-overlay); }
.workbook-dialog h2 { font: 24px/1.5 var(--font-display); }
.workbook-dialog p, .workbook-dialog li { color: var(--color-muted); font-size: 13px; }
.workbook-dialog p { margin-top: 16px; }
.provider-options { display: grid; gap: 8px; margin: 20px 0; }
.provider-options button { justify-content: space-between; }
.provider-options button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-tint); }
.provider-options small { color: var(--color-muted); font-size: 11px; }
.assistant-backdrop { position: fixed; inset: 0; border: 0; border-radius: 0; background: var(--color-overlay); z-index: 7; }
.notice { z-index: 12; }
@media (min-width: 901px) {
  body.assistant-open .page-shell { margin-right: var(--assistant-width); }
  body.assistant-open main { padding-inline: 34px; }
  body.assistant-open .search-form { width: 185px; }
  body.assistant-open .topbar { padding-inline: 26px; }
  .assistant-backdrop { display: none !important; }
}
@media (max-width: 1279px) {
  :root { --assistant-width: 320px; }
  body.assistant-open .topbar { flex-wrap: wrap; gap: 8px; }
  body.assistant-open .breadcrumb { flex-basis: 100%; }
  body.assistant-open .ai-layout, body.assistant-open .course-pair { grid-template-columns: minmax(0, 1fr); }
  body.assistant-open main { padding-inline: 20px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  :root { --rail-width: 204px; }
  .sidebar { padding-inline: 12px; }
  .topbar { padding-inline: 24px; }
}
@media (max-width: 960px) {
  .sidebar { width: 100%; padding: 12px 20px; }
  .page-shell { margin-left: 0; }
  .side-content { max-height: calc(100dvh - 65px); overflow: auto; }
  #course-outline .outline-links { max-height: 240px; }
  #course-outline { display: block; }
  .topbar { min-height: 72px; padding: 10px 20px; }
  main { padding: 32px 28px 40px; }
  .site-footer { padding-inline: 28px; }
  .lesson-aside .panel { padding-inline: 0; }
}
@media (max-width: 640px) {
  .sidebar { padding-inline: 16px; }
  .topbar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .breadcrumb { flex-basis: 100%; }
  .search-form { flex: 1; width: auto; min-width: 0; }
  .search-form .icon-button { width: 36px; min-width: 36px; }
  #assistant-toggle { padding-inline: 10px; }
  main { padding: 26px 20px 36px; }
  .workbook-tabs { gap: 0; justify-content: space-between; }
  .workbook-tabs button { font-size: 12px; }
  .home-start { padding: 20px; }
  .home-method { display: block; }
  .home-method .button { margin-top: 12px; }
  .course-pair { gap: 8px; }
  .course-card { padding-inline: 0; }
  .task-box { padding: 20px; }
  .assistant-panel { width: min(390px, 100%); }
  .site-footer { padding-inline: 20px; }
  .method-list li { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .method-example { padding: 14px; }
}
/* The assistant reserves space; narrow screens stack it after the lesson. */
.assistant-body { min-height: 0; }
.code-tools { flex-wrap: wrap; }
@media (max-width: 900px) {
  .assistant-panel { position: relative; inset: auto; width: 100%; height: 850px; max-height: 100dvh; border-left: 0; border-top: 1px solid var(--color-rule); }
  body.assistant-open .page-shell { margin-right: 0; }
}

/* Hallmark · unified workbook assistant · quiet editorial · terracotta
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
html,body{overflow-x:clip}
#assistant-bridge-frame{display:none;width:100%;height:100%;border:0;background:var(--color-surface)}
body.assistant-connected #assistant-panel> :not(#assistant-bridge-frame){display:none}
body.assistant-connected #assistant-bridge-frame{display:block;min-height:0;flex:1}
body.assistant-connected #assistant-update:not([hidden]){display:block;flex-shrink:0}
.assistant-update{padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--color-rule);background:var(--color-warm-tint);font-size:11px;line-height:1.6}
body.assistant-connecting .assistant-mode-note{border:1px solid var(--color-rule)}
#assistant-install{margin-top:var(--space-sm)}
.connection-state{margin-block:var(--space-lg);padding:var(--space-md);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm)}
.connection-state p{margin-bottom:0;font-size:14px;line-height:1.7}
.connection-state[data-phase=failed]{border-color:var(--color-error);background:var(--color-error-tint);color:var(--color-error)}
.assistant-mode-note[data-phase=failed]{border:1px solid var(--color-error);background:var(--color-error-tint);color:var(--color-error)}
#connection-install-guide{margin-block:var(--space-lg);font-size:14px}
#connection-install-guide summary{cursor:pointer}
#connection-install-guide ol{padding-left:24px;line-height:1.8}
.assistant-compose button:active,.assistant-close:active{transform:translateY(1px)}
@media(max-width:900px){body.assistant-connected .assistant-panel{height:820px;max-height:none}}

/* Hallmark · genre: editorial · macrostructure: Workbench · design-system: DESIGN.md
 * Approved 2026-10-13 · pre-emit critique: P4 H4 E4 S5 R5 V4 */
body { font-size: 15px; }
main { width: 100%; min-width: 0; }
.learning-workspace { min-width: 0; }
.workbook-eyebrow, .nav-label { font-size: 12px; letter-spacing: .04em; }
.breadcrumb, .search-form, .sidebar nav > a { font-size: 13px; }
.welcome { margin-bottom: var(--space-xl); }
.welcome p { margin-bottom: 0; }
.start-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xl); border-block: 1px solid var(--color-rule); padding-block: var(--space-lg); margin-bottom: var(--space-xl); }
.track-choice, .track-switch { display: flex; align-items: center; gap: var(--space-sm); }
.track-choice { gap: var(--space-md); }
.track-choice > span, .start-options .audience-select { font-size: 13px; }
.track-switch .button[aria-pressed="true"] { color: var(--color-accent); background: var(--color-tint); border-color: var(--color-tint); }
.start-options .audience-select { display: flex; align-items: center; gap: var(--space-md); margin: 0; }
.start-options select { margin: 0; width: auto; min-height: 44px; }
.home-start { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2xl); padding: var(--space-xl); }
.home-start p { color: var(--color-ink); font-size: 15px; }
.session-steps { border-left: 1px solid var(--color-rule); padding-left: var(--space-xl); }
.session-steps h3 { font-size: 15px; }
.session-steps ol { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); }
.session-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); font-size: 14px; }
.session-steps li > span { font: 12px/24px var(--font-code); color: var(--color-accent); }
.session-steps small { display: block; font-size: 12px; color: var(--color-muted); }
.course-card header { justify-content: space-between; flex-wrap: wrap; }
.course-card p { font-size: 14px; }
.course-card .button { color: var(--color-accent); }
.site-navigation { margin: 0; padding: 0; background: var(--color-transparent); border: 0; border-radius: 0; }
.site-navigation > summary { min-height: 44px; font-size: 13px; padding: var(--space-sm); }
body:not(.lesson-view) .site-navigation > summary { display: none; }
.site-navigation #site-nav { margin-top: var(--space-sm); }
.lesson-view #course-outline { border-top: 0; margin-top: var(--space-xl); }
#course-outline > p, #course-outline a { font-size: 13px; }
#course-outline a { min-height: 44px; }
#course-outline .outline-links { max-height: min(50dvh, 480px); }
.lesson-view .site-navigation { border-block: 1px solid var(--color-rule); }
.lesson-view .side-progress { margin-top: var(--space-xl); }
.workbook-tabs button { font-size: 14px; }
.concept-list li, .lesson-meta { font-size: 12px; }
.lesson-header > p, .task-box p, .markdown { font-size: 15px; }
.workbook-inline-help { padding-block: var(--space-lg); }
.workbook-inline-help h2 { font-size: 17px; }
.assistant-panel { position: sticky; inset: auto; top: var(--space-lg); width: 100%; height: calc(100dvh - 32px); max-height: none; border: 1px solid var(--color-rule); border-radius: var(--radius-md); overflow: clip; scroll-margin-top: 90px; z-index: 2; }
body.assistant-open .page-shell { margin-right: 0; }
body.assistant-open main { padding-inline: 34px; }
body.assistant-open #assistant-root { min-width: 0; padding: 40px 24px 32px 0; }
body.assistant-open .learning-workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--assistant-width); align-items: stretch; }
.assistant-body { padding: var(--space-lg); }
.assistant-heading { padding: var(--space-lg); }
.assistant-mode-note, .assistant-context, .assistant-suggestions button, .assistant-compose label, .assistant-compose small, .assistant-footnote { font-size: 12px; }
.assistant-compose textarea { font-size: 14px; }
.assistant-greeting { font-size: 22px; }
.assistant-suggestions { margin-block: var(--space-md); }
.assistant-return { margin: 0 var(--space-lg) var(--space-lg); order: 99; flex-shrink: 0; font-size: 13px; }
body.assistant-connected #assistant-panel > #assistant-return { display: block; }
.assistant-compose textarea[aria-invalid="true"] { outline: 2px solid var(--color-error); outline-offset: 2px; }
.progress-overview .panel { border: 0; border-top: 1px solid var(--color-rule); background: var(--color-transparent); border-radius: 0; }
.backup-panel { background: var(--color-paper-2); border: 0; }
.progress-entry { border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; padding-block: var(--space-xl); }
.empty-state { background: var(--color-paper-2); border: 0; }
.button { white-space: nowrap; }
@media (min-width: 1200px) {
  body.assistant-open .topbar { flex-wrap: nowrap; padding-inline: 34px; }
  body.assistant-open .breadcrumb { flex-basis: auto; }
  body.assistant-open .search-form { width: 240px; }
}
@media (max-width: 1199px) {
  body.assistant-open .learning-workspace { display: block; }
  body.assistant-open #assistant-root { padding: 0 28px 32px; }
  .assistant-panel { position: relative; top: auto; max-width: 850px; margin-inline: auto; height: min(850px, 100dvh); }
  body.assistant-connected .assistant-panel { height: 920px; max-height: none; }
  body.assistant-open .topbar { flex-wrap: nowrap; }
  body.assistant-open .breadcrumb { flex-basis: auto; }
  body.assistant-open .search-form { width: 240px; }
  .home-start { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .session-steps { border-left: 0; border-top: 1px solid var(--color-rule); padding: var(--space-lg) 0 0; }
  .session-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .workbook-tabs { position: sticky; top: 65px; z-index: 3; background: var(--color-paper); }
  body.assistant-open main { padding-inline: 28px; }
  #course-outline .outline-links { max-height: 40dvh; }
  .lesson-view #course-outline { margin-top: var(--space-sm); }
}
@media (max-width: 640px) {
  .home-start { padding: var(--space-lg); }
  .session-steps ol { grid-template-columns: minmax(0, 1fr); }
  .session-steps small { display: inline; margin-left: var(--space-sm); }
  .start-options { gap: var(--space-md); }
  .track-choice { flex-wrap: wrap; }
  .home-start h2 { font-size: 23px; }
  .workbook-tabs button { font-size: 12px; }
  body.assistant-open main { padding-inline: 20px; }
  body.assistant-open #assistant-root { padding: 0 16px 24px; }
  body.assistant-open .topbar { flex-wrap: wrap; }
  body.assistant-open .breadcrumb { flex-basis: 100%; }
  body.assistant-open .search-form { width: auto; }
  .assistant-return { font-size: 12px; }
  .assistant-heading, .assistant-body { padding: var(--space-md); }
  .assistant-compose-area { padding: var(--space-md); }
  .assistant-compose .button { padding-inline: var(--space-sm); }
}