/* Visual theme only. Paper, sage navigation and fine rules follow the read-only data reader. */
:root {
  --page:#f7f8f6; --surface:#fff; --nav:#f0f3ef; --soft:#e7f0e8;
  --brand:#35674f; --brand-hover:#28543f; --accent:#35674f; --accent-border:#9bb5a2;
  --teal:#547366; --border:#dfe5df; --subtle:#e5e9e3;
  --title:#23362e; --ink:#2f3d35; --body:#526258; --secondary:#68766c; --weak:#7a877f;
  --shadow:none;
}
body { background:var(--page); font-size:14px; line-height:1.65; }
button:focus-visible,a:focus-visible { outline:3px solid #91b49a; outline-offset:2px; }
.topbar { background:#fff; color:var(--ink); border-bottom:1px solid var(--border); box-shadow:none; }
.topbar-inner { max-width:1920px; padding:0 28px; }
.course-heading { display:flex; align-items:center; gap:16px; font-size:16px; font-weight:600; white-space:nowrap; letter-spacing:.02em; }
.course-heading>span { padding-left:16px; border-left:1px solid var(--border); font-size:12px; font-weight:400; color:var(--secondary); }
.top-actions { gap:14px; font-size:12px; }
.top-actions>a,.header-button,.current-nav { color:var(--secondary); background:transparent; border-radius:4px; padding:6px 9px; }
.top-actions>a:hover,.header-button:hover { background:var(--nav); color:var(--brand); }
.current-nav { color:var(--brand); border-right:1px solid var(--border); padding-right:22px; border-radius:0; }
.top-actions svg { width:16px; height:16px; }
.eyebrow { color:var(--secondary); font-size:11px; letter-spacing:.06em; font-weight:400; }
.page-container { max-width:1600px; padding:0 28px; }
.home-content { display:grid; grid-template-columns:242px minmax(0,1fr); gap:40px; padding-top:32px; padding-bottom:20px; }
.course-intro { background:var(--nav); border:1px solid var(--border); padding:25px 23px; border-radius:6px; align-self:start; position:sticky; top:88px; }
.course-intro h1 { font-size:25px; line-height:1.6; letter-spacing:-.5px; font-weight:600; margin:10px 0 15px; color:var(--title); }
.course-description { color:var(--secondary); font-size:12px; line-height:1.95; }
.course-stats { margin:24px 0; padding:15px 0; border-top:1px solid #d6dfd5; border-bottom:1px solid #d6dfd5; display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.course-stats div { display:flex; flex-direction:column-reverse; }
.course-stats dt { color:var(--secondary); font-size:11px; }
.course-stats dd { margin:0 0 2px; font-size:24px; font-weight:500; color:var(--title); font-variant-numeric:tabular-nums; line-height:1.35; }
.course-method h2 { font-size:13px; font-weight:600; }
.course-method ol { list-style:none; padding:0; margin:16px 0 24px; display:grid; gap:17px; counter-reset:method; }
.course-method li { position:relative; padding-left:23px; counter-increment:method; }
.course-method li:before { content:counter(method,decimal-leading-zero); position:absolute; left:0; top:1px; color:#7a897d; font-size:10px; }
.course-method strong { display:block; font-size:12px; font-weight:500; }
.course-method li>span { display:block; font-size:11px; color:var(--secondary); line-height:1.8; margin-top:4px; }
.course-intro>.text-button { padding:0; color:var(--brand); font-size:12px; }
.course-catalog { min-width:0; }
.section-heading { padding:4px 0 22px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.section-heading h2 { font-size:23px; font-weight:600; }
.section-heading p { font-size:12px; margin-top:7px; }
.catalog-count { color:var(--secondary); font-size:11px; white-space:nowrap; }
.module-grid.all-modules { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.all-modules .module-card { display:grid; grid-template-columns:40% minmax(0,1fr); gap:16px; padding:16px; border-radius:6px; border:1px solid var(--border); box-shadow:none; min-height:190px; background:var(--surface); }
.all-modules .module-card:hover { transform:none; background:#fdfefd; border-color:#9bb5a2; box-shadow:0 2px 8px #23362e08; }
.module-art { height:100%; min-height:145px; margin:0; border-radius:4px; background:#f5f7f5; overflow:hidden; }
.module-art>.source-module-cover { max-height:175px; }
.module-copy { display:flex; flex-direction:column; min-width:0; }
.module-card-heading { display:flex; align-items:baseline; gap:9px; margin:2px 0 8px; }
.module-order { font-size:11px; color:#8b978e; font-variant-numeric:tabular-nums; }
.module-card h3 { font-size:16px; font-weight:600; margin:0; color:var(--title); }
.module-card p { font-size:12px; line-height:1.85; margin-bottom:13px; color:var(--secondary); display:block; overflow:visible; }
.module-counts { gap:4px 8px; font-size:10px; margin:0 0 12px; color:#6c7c71; }
.module-counts span { padding:0; background:none; border-radius:0; white-space:nowrap; }
.all-modules .module-card-link { padding-top:9px; font-size:11px; border-color:var(--border); color:var(--brand); }
.catalog-note { font-size:11px; line-height:1.8; color:var(--secondary); padding:18px 0 3px; }
.site-footer { font-size:10px; color:var(--weak); padding:18px 0; gap:16px; }
.course-catalog>.site-footer { margin-top:15px; border-top:1px solid var(--border); }

/* The learning surface keeps the existing reference rail and interaction geometry. */
.breadcrumb { height:42px; padding:0; font-size:11px; color:var(--secondary); }
.breadcrumb strong { color:var(--body); }
.workspace:not(:has(>[data-reference-open=true])) { height:calc(100dvh - 144px); min-height:540px; align-items:stretch; }
.workspace>.menu { border:1px solid var(--border); border-radius:6px; background:var(--nav); box-shadow:none; position:static; max-height:100%; overflow:auto; scrollbar-width:thin; scrollbar-color:#c0cec1 transparent; }
.menu-title { padding:22px 20px 19px; border-color:var(--border); }
.menu-title strong { font-size:16px; font-weight:600; }
.menu-title small { color:var(--secondary); font-size:11px; }
.tabs { padding:0; margin:10px 16px 0; border-radius:0; background:transparent; border-bottom:1px solid #d6dfd5; gap:14px; }
.tab { border-radius:0; padding:12px 0 10px; font-size:12px; border-bottom:2px solid transparent; margin-bottom:-1px; gap:7px; }
.tab svg { width:15px; height:15px; }
.tab[aria-selected=true] { color:var(--brand); background:transparent; box-shadow:none; border-color:var(--brand); }
.menu-section { color:var(--secondary); }
.entry { border-radius:4px; font-size:12px; font-weight:400; color:var(--body); }
.entry:hover { background:#e7ede5; }
.entry.selected { background:#dfece0; border-color:transparent; color:#244c35; }
.entry-index,.entry svg { color:#89998a; }
.entry.selected .entry-index,.entry.selected svg { color:var(--brand); }
.menu-note { color:var(--secondary); margin:22px 17px; font-size:11px; }
.menu-footer { background:transparent; border-color:var(--border); color:var(--secondary); }
.menu-footer p { color:var(--body); }
.learning-panel { display:flex; flex-direction:column; min-height:0; border-color:var(--border); border-radius:6px; box-shadow:none; }
.panel-heading { padding:18px 24px 17px; gap:14px; flex-shrink:0; }
.panel-heading h1 { margin-top:3px; font-size:24px; font-weight:600; letter-spacing:-.3px; }
.panel-heading p { color:var(--secondary); font-size:12px; margin-top:6px; }
.status-badge,.status-badge.beta,.status-badge.online { border:1px solid #dce5db; background:#f2f6f0; color:#58715d; font-size:11px; border-radius:4px; padding:3px 8px; font-weight:400; }
.stage { background:#fafbf9; border-color:#e9ede6; flex:1; min-height:0; container-type:size; padding:10px 18px; }
.diagram-frame { width:min(100%,calc(100cqh * var(--diagram-ratio,1.72))); max-width:1060px; }
.board-toolbar { flex-shrink:0; padding:8px 18px; border-color:var(--border); color:var(--secondary); }
.board-toolbar .model-gesture-hint,.detail-model-toolbar .model-gesture-hint,.view-tools [data-model-percent] { color:var(--secondary); }
.action-dock { padding:17px 22px; border-top:0; flex-shrink:0; }
.instruction strong { font-size:13px; color:var(--ink); font-weight:500; }
.instruction p { color:var(--secondary); }
.primary { background:var(--brand); border-radius:5px; padding:11px 17px; }
.primary:hover { background:var(--brand-hover); }
.primary.active { background:#edf3eb; border-color:#bacdbd; color:var(--brand); border-radius:5px; }
.primary.active:hover { background:#e2ecdf; }
.text-button,.outline-button,.icon-button,.mute { color:var(--brand); border-radius:4px; }
.outline-button,.icon-button,.mute { background:#fff; border-color:#d5dfd4; }
.outline-button:hover,.icon-button:hover,.mute:hover { background:var(--nav); border-color:#afc2b0; }
.view-tools .model-reset-button { color:var(--brand); background:#f7f9f5; border-color:#d5dfd4; border-radius:4px; }
.mute[aria-pressed=true] { color:var(--brand); background:#e8f0e5; border-color:#b7cbb6; }
.workspace-foot { height:46px; padding-top:0; gap:18px; color:var(--secondary); }
.workspace-foot .text-button { color:var(--secondary); }
.learning-content>.site-footer { display:none; }
.phase-indicator { flex-shrink:0; padding-bottom:12px; gap:12px; }
.phase-indicator i { color:#7d8a7f; }
.phase-indicator i b { color:#6b7e6e; background:#f1f4ee; }
.phase-indicator i.on { color:#315b40; }
.phase-indicator i.on b { color:#fff; background:#52765b; }
.demo-tip { background:#f1f5ee; border-color:var(--border); color:var(--body); flex-shrink:0; padding:9px 21px; min-height:0; }
.demo-tip>span { background:#e4eddf; color:#4c6c50; border-radius:3px; }
.demo-dock { flex-shrink:0; padding:16px 22px 18px; gap:22px; }
.caption-meta { color:var(--secondary); }
.caption-origin { background:#edf1e9; color:#536e54; border-radius:3px; }
.caption-text { color:var(--ink); line-height:1.85; font-size:14px; min-height:52px; }
.progress-line { background:#e7ece3; height:3px; }
.progress-line>span { background:#7d9b7f; }

/* Tone the surrounding UI without recolouring the original model images. */
.annotation .name { background:#fff; border-color:#c6d6c7; color:#36563f; box-shadow:0 2px 6px #3047300a; border-radius:4px; }
.annotation .name small { color:#7c8e7e; }
.annotation .name:hover,.annotation.highlighted .name { background:#f1f7ef; border-color:#7a9b7f; }
.annotation .name:after { background:#b5c9b8; }
.annotation .pin { color:#fff; background:#567b5c; border-color:#fff; box-shadow:0 0 0 1px #91ae94; }
.annotation .pin:hover { background:#365d40; }
.source-leader path { stroke:#94af99; }
.source-annotation.highlighted .source-leader path { stroke:#4c7b57; }
.drive-focus { border-color:#dfe6dd; border-radius:5px; box-shadow:none; }
.drive-focus-heading,.drive-focus p,.drive-legend,.drive-source-note,.source-module-note,.source-module-caption,.source-library-caption,.source-caption { color:#748276; }
.drive-focus-heading b,.drive-source-note>span,.source-module-note strong { color:#4d6852; }
.drive-source-note small,.source-module-note span,.drive-source-limit { color:#859087; }
.drive-concepts { color:#77877a; }
.drive-concepts span { background:#f0f4ed; }
.drive-concepts span.active { color:#3c6143; background:#e3eddf; }

/* Detail, help and comparison use the same paper-like surfaces. */
dialog,#reference-dialog { border-color:var(--border); border-radius:7px; color:var(--ink); box-shadow:0 18px 60px #293b2d24; }
dialog::backdrop,#reference-dialog::backdrop { background:#26362b50; }
.dialog-header,.reference-dialog-heading { border-color:var(--border); padding:21px 25px; }
.dialog-header h2 { color:var(--title); font-weight:600; font-size:23px; }
.close-btn,.reference-close { background:#f0f4ed; color:#5b715f; border-radius:4px; }
.detail-model-panel,.detail-visual { background:#fafbf9; }
.detail-model-toolbar,.detail-info { border-color:var(--border); background:#fff; }
.detail-aside { background:var(--nav); border-color:var(--border); }
.detail-aside h3 { color:var(--ink); font-weight:600; }
.detail-aside dt,.detail-availability,.detail-info p { color:var(--secondary); }
.detail-aside dd { color:var(--body); }
.info-note { background:#e6eee2; border-color:#d0dfcb; color:#4f6a50; border-radius:4px; }
.notice-content { color:var(--body); }
.reference-panel { border-color:var(--border); border-radius:6px; box-shadow:none; }
.reference-panel[data-reference-open=false] { align-self:start; }
.reference-panel-heading,.reference-panel[data-reference-open=false] .reference-toggle { background:var(--nav); border-color:var(--border); border-radius:5px; }
.reference-panel-heading { border-radius:5px 5px 0 0; }
.reference-heading h2,.reference-context strong { color:#3d5d43; }
.reference-heading .eyebrow,.reference-count,.reference-note,.reference-image-help,.reference-current { color:var(--secondary); }
.reference-toggle,.reference-choices button,.reference-zoom-tools button,#reference-dialog [data-reference-size] { color:#4c6853; border-color:#d3dfd1; background:#fff; border-radius:4px; }
.reference-toggle:hover,.reference-zoom-tools button:hover { background:#e9f0e5; border-color:#a9bfaa; }
.reference-choices button[aria-pressed=true],#reference-dialog [data-reference-size][aria-pressed=true] { background:#e3eddf; border-color:#b3c9af; color:#315f38; }
.reference-zoom-tools output,.reference-dialog-heading span,.reference-dialog-heading p,.reference-dialog-footer { color:var(--secondary); }
.reference-canvas { background:#edf1e9; border-color:#d5dfd0; border-radius:4px; }
.reference-canvas:focus-visible,.reference-panel button:focus-visible,#reference-dialog button:focus-visible,[data-model-navigation]:focus-visible { outline-color:#91b49a; }
.reference-resize:before { background:#d8e1d3; }
.reference-resize span { border-color:#8fa889; background:#f0f4ec; }
.reference-resize:hover,.reference-resize:focus-visible,.reference-resizing .reference-resize { background:#e2ecdd; outline-color:#9bb697; }
.reference-dialog-footer { border-color:var(--border); }
.reference-image-viewport { background:#edf1e9; }
#toast { background:#354b3d; color:#fff; box-shadow:0 4px 16px #25362d20; }

@media(max-width:1350px) {
  .home-content { grid-template-columns:220px minmax(0,1fr); gap:28px; }
  .all-modules .module-card { grid-template-columns:1fr; gap:12px; padding:17px; }
  .module-art { height:130px; min-height:0; }
  .module-art>.source-module-cover { max-height:130px; }
}
@media(max-width:1050px) {
  .page-container { padding-left:20px; padding-right:20px; }
  .topbar-inner { padding:0 20px; }
  .home-content { grid-template-columns:210px minmax(0,1fr); gap:24px; padding-top:24px; }
  .course-intro { padding:22px 19px; top:80px; }
  .course-intro h1 { font-size:22px; }
  .module-grid.all-modules { grid-template-columns:1fr; gap:12px; }
  .all-modules .module-card { grid-template-columns:35% minmax(0,1fr); min-height:155px; gap:18px; padding:16px; }
  .module-art { height:100%; min-height:120px; }
  .module-art>.source-module-cover { max-height:145px; }
  .panel-heading { padding:16px 18px; }
  .panel-heading h1 { font-size:22px; }
  .panel-heading p { font-size:11px; }
  .caption-text { font-size:13px; }
  .site-footer { flex-wrap:wrap; gap:4px; }
}
@media(max-width:1279px) {
  .workspace:has(>[data-reference-open=true]) .tabs { border:0; gap:4px; }
  .workspace:has(>[data-reference-open=true]) .tab { border-bottom:0; border-left:2px solid transparent; margin:0; }
  .workspace:has(>[data-reference-open=true]) .tab[aria-selected=true] { border-left-color:var(--brand); background:#e2ecde; }
  .workspace:has(>[data-reference-open=true]) .entry { border-radius:3px; }
}
@media(max-width:850px) {
  .course-heading { font-size:14px; gap:10px; }
  .course-heading>span { display:none; }
  .home-content { grid-template-columns:185px minmax(0,1fr); gap:18px; }
  .course-intro { padding:19px 16px; }
  .course-intro h1 { font-size:20px; }
  .all-modules .module-card { gap:14px; }
  .module-card h3 { font-size:15px; }
  .module-card p { font-size:11px; }
  .module-counts { gap:3px 6px; }
}