/* Right comparison rail; learning and playback remain independent. */
.workspace:has(>[data-reference-panel]){grid-template-columns:220px minmax(0,1fr) 46px;gap:16px}
.menu-hidden .workspace:has(>[data-reference-panel]){grid-template-columns:minmax(0,1fr) 46px}
.reference-panel{min-width:0;border:1px solid #d9e4f1;border-radius:12px;background:#fff;font-size:13px;box-shadow:var(--shadow);overflow:hidden;position:sticky;top:76px}
.reference-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 16px;border-bottom:1px solid #e4ebf5;background:#f7faff}
.reference-heading h2{font-size:15px;color:#275c93;margin:6px 0 0;font-weight:600}
.reference-heading .eyebrow{font-size:9px;letter-spacing:.1em;color:#7892ae}
.reference-toggle{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dbe6f3;border-radius:6px;padding:7px 9px;background:#fff;color:#396d9f;font-size:12px;white-space:nowrap}
.reference-toggle:hover{background:#edf5ff;border-color:#b0ccee}
.reference-panel button:focus-visible,#reference-dialog button:focus-visible{outline:2px solid #287bd0;outline-offset:-3px}
.reference-expand{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:3px}
.reference-panel[data-reference-open=false] .reference-heading{display:none}
.reference-panel[data-reference-open=false] .reference-panel-heading{padding:0;border:0}
.reference-panel[data-reference-open=false] .reference-toggle{width:44px;min-height:150px;border:0;border-radius:0;flex-direction:column;background:#f7faff;padding:15px 0;gap:14px}
.reference-panel[data-reference-open=false] .reference-toggle-label{writing-mode:vertical-rl;letter-spacing:.13em}
.reference-panel[data-reference-open=false] .reference-expand{transform:rotate(135deg);margin-left:5px}
.reference-content{padding:18px 16px;overflow:auto;overscroll-behavior:contain;min-height:0}
.reference-context{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.reference-context strong{width:100%;font-size:14px;line-height:1.6;color:#2c5279;font-weight:600}
.reference-current{font-size:11px;color:#5f80a3;background:#edf4fd;border-radius:4px;padding:4px 7px}
.reference-count{margin-left:auto;font-size:11px;color:#7a90a9;white-space:nowrap}
.reference-content [data-reference-figure]{margin-top:16px}
/* Expanded desktop workspace fits the screen so the source image stays beside the controls. */
.learning-content:has([data-reference-open=true]){max-width:1920px;padding:0 20px}
.learning-content:has([data-reference-open=true])>.breadcrumb{height:42px;padding:0}
.workspace:has(>[data-reference-open=true]){grid-template-columns:205px minmax(0,1fr) var(--reference-width,clamp(300px,29vw,490px));height:calc(100dvh - 144px);min-height:510px;align-items:stretch}
.menu-hidden .workspace:has(>[data-reference-open=true]){grid-template-columns:minmax(0,1fr) var(--reference-width,clamp(300px,32vw,540px))}
.workspace:has(>[data-reference-open=true])>.menu{position:static;max-height:100%;overflow:auto}
.workspace:has(>[data-reference-open=true])>.learning-panel{display:flex;flex-direction:column;min-height:0}
.workspace:has(>[data-reference-open=true])>.reference-panel{position:relative;top:auto;display:flex;flex-direction:column;min-height:0}
.workspace:has(>[data-reference-open=true]) .reference-panel-heading{flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .panel-heading{padding:17px 20px 15px;flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .panel-heading h1{font-size:21px}
.workspace:has(>[data-reference-open=true]) .panel-heading p{margin-top:5px}
.workspace:has(>[data-reference-open=true]) .stage{flex:1;min-height:0;container-type:size;padding:12px 18px}
.workspace:has(>[data-reference-open=true]) .diagram-frame{width:min(100%,calc(100cqh * var(--diagram-ratio,1.72)));max-width:1060px}
.workspace:has(>[data-reference-open=true]) .board-toolbar{padding:6px 14px;flex-shrink:0;gap:8px}
.workspace:has(>[data-reference-open=true]) .board-toolbar>span{font-size:9px;flex-wrap:wrap}
.workspace:has(>[data-reference-open=true]) .view-tools{flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .action-dock{padding:14px 17px;gap:10px;flex-shrink:0;flex-wrap:wrap}
.workspace:has(>[data-reference-open=true]) .phase-indicator{padding:0 18px 12px;gap:7px;flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .demo-tip{padding:9px 15px;min-height:0;flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .demo-dock{padding:13px 16px;gap:12px;flex-shrink:0}
.workspace:has(>[data-reference-open=true]) .caption-text{font-size:13px;min-height:48px;line-height:1.75}
.workspace:has(>[data-reference-open=true]) .caption-meta{margin-bottom:7px;gap:8px;flex-wrap:wrap}
.learning-content:has([data-reference-open=true])>.workspace-foot{height:46px;padding-top:0;gap:12px}
.learning-content:has([data-reference-open=true])>.site-footer{display:none}
@media(max-width:1279px){
 .workspace:has(>[data-reference-panel]){grid-template-columns:190px minmax(0,1fr) 44px;gap:12px}
 .learning-content:has([data-reference-open=true]){padding:0 14px}
 .workspace:has(>[data-reference-open=true]){grid-template-columns:minmax(0,1fr) var(--reference-width,clamp(270px,32vw,390px));grid-template-rows:auto minmax(0,1fr);gap:12px}
 .workspace:has(>[data-reference-open=true])>.menu{grid-column:1;grid-row:1;display:flex;align-items:stretch;min-width:0;overflow:hidden;max-height:84px}
 .workspace:has(>[data-reference-open=true])>.learning-panel{grid-column:1;grid-row:2}
 .workspace:has(>[data-reference-open=true])>.reference-panel{grid-column:2;grid-row:1 / 3}
 .workspace:has(>[data-reference-open=true]) .menu-title,.workspace:has(>[data-reference-open=true]) .menu-section,.workspace:has(>[data-reference-open=true]) .menu-note,.workspace:has(>[data-reference-open=true]) .menu-footer{display:none}
 .workspace:has(>[data-reference-open=true]) .tabs{margin:7px;width:65px;flex-shrink:0;display:flex;flex-direction:column;gap:3px}
 .workspace:has(>[data-reference-open=true]) .tab{font-size:11px;padding:6px 5px;gap:4px}
 .workspace:has(>[data-reference-open=true]) .entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;max-height:82px;overflow:auto;padding:7px 7px 7px 0;gap:4px;width:100%}
 .workspace:has(>[data-reference-open=true]) .entry{min-height:31px;font-size:11px;padding:5px 6px;gap:5px}
 .workspace:has(>[data-reference-open=true]) .entry svg{display:none}
 .menu-hidden .workspace:has(>[data-reference-open=true]){grid-template-columns:minmax(0,1fr) var(--reference-width,clamp(270px,32vw,390px));grid-template-rows:minmax(0,1fr)}
 .menu-hidden .workspace:has(>[data-reference-open=true])>.menu{display:none}
 .menu-hidden .workspace:has(>[data-reference-open=true])>.learning-panel,.menu-hidden .workspace:has(>[data-reference-open=true])>.reference-panel{grid-row:1}
 .workspace:has(>[data-reference-open=true]) .panel-heading{padding:12px 14px;gap:8px}
 .workspace:has(>[data-reference-open=true]) .panel-heading h1{font-size:19px}
 .workspace:has(>[data-reference-open=true]) .panel-heading .eyebrow{font-size:9px}
 .workspace:has(>[data-reference-open=true]) .board-toolbar>span{display:none}
 .workspace:has(>[data-reference-open=true]) .board-toolbar{justify-content:flex-end}
 .workspace:has(>[data-reference-open=true]) .demo-dock{padding:10px 13px}
 .workspace:has(>[data-reference-open=true]) .demo-controls{min-width:125px}
 .workspace:has(>[data-reference-open=true]) .caption-text{min-height:45px;font-size:12px}
 .workspace:has(>[data-reference-open=true]) .progress-line{margin-top:7px}
 .workspace:has(>[data-reference-open=true]) .demo-tip{font-size:10px}
 .reference-panel-heading{padding:16px 12px}
 .reference-heading h2{font-size:14px}
 .reference-content{padding:15px 12px}
}
.reference-choices{display:flex;gap:8px;flex-wrap:wrap}
.reference-choices button,#reference-dialog [data-reference-size]{background:#fff;border:1px solid #d6e2f0;border-radius:6px;color:#526b85;padding:7px 12px;font:inherit;cursor:pointer}
.reference-choices button[aria-pressed=true],#reference-dialog [data-reference-size][aria-pressed=true]{background:#eaf3ff;border-color:#afccef;color:#1c5ca7}
.reference-note{color:#75879b;font-size:12px;line-height:1.7;margin:12px 0}
.reference-content figure{margin:0}
.reference-content figcaption{font-size:11px;color:#4d6e91;margin-top:9px;line-height:1.6}
.reference-content figcaption span{color:#8396ab}
.reference-load-status{color:#75879b;font-size:12px}.reference-load-status.is-error{color:#a74646}
#reference-dialog{width:min(1380px,94vw);max-width:94vw;max-height:94vh;padding:0;border:1px solid #d9e4f1;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 70px #17345135;color:#253e59}
#reference-dialog::backdrop{background:rgba(21,39,65,.52)}
.reference-dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:17px 22px;border-bottom:1px solid #e4ebf5;gap:20px}
.reference-dialog-heading span{font-size:11px;color:#7190ae}
.reference-dialog-heading h2{font-size:18px;margin:4px 0;line-height:1.45}
.reference-dialog-heading p{font-size:11px;color:#7f93a9;margin:4px 0 0}
.reference-close{border:0;border-radius:7px;background:#edf3fa;color:#456a90;font-size:25px;line-height:32px;width:34px;cursor:pointer;flex-shrink:0}
.reference-image-viewport{max-height:calc(94vh - 178px);overflow:auto;background:#eef2f7;text-align:center;overscroll-behavior:contain}
.reference-image-viewport>img{display:block;width:100%;height:auto;max-height:calc(94vh - 178px);object-fit:contain}
.reference-image-viewport.is-original{text-align:left}
.reference-image-viewport.is-original>img{width:auto;height:auto;max-height:none;max-width:none}
.reference-dialog-footer{padding:12px 22px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;border-top:1px solid #e4ebf5;color:#7b8da1}

/* The grip sits in the existing column gap; screenshot pan/zoom never covers the learning pane. */
.reference-panel{overflow:visible}
.reference-panel-heading{border-radius:11px 11px 0 0}
.reference-panel[data-reference-open=false] .reference-panel-heading{border-radius:11px;overflow:hidden}
.reference-resize{position:absolute;left:-15px;top:0;bottom:0;width:14px;cursor:col-resize;z-index:10;touch-action:none;display:flex;align-items:center;justify-content:center;border-radius:7px;outline-offset:-2px}
.reference-resize:before{content:'';width:2px;height:100%;background:#dce6f3;border-radius:2px}
.reference-resize span{position:absolute;width:6px;height:35px;border-left:2px solid #91add0;border-right:2px solid #91add0;border-radius:2px;background:#f2f7fd}
.reference-resize:hover,.reference-resize:focus-visible,.reference-resizing .reference-resize{background:#dceafb;outline:2px solid #75a4df}
.reference-panel[data-reference-open=false] .reference-resize{display:none}
.reference-resizing,.reference-resizing *{cursor:col-resize!important;user-select:none!important}
.reference-panel[data-reference-open=true] .reference-panel-heading{padding:12px 14px}
.reference-panel[data-reference-open=true] .reference-content{display:flex;flex-direction:column;flex:1;gap:0;padding:12px 14px;min-height:0;border-radius:0 0 11px 11px}
.reference-panel[data-reference-open=true] .reference-context{margin-bottom:10px;gap:6px}
.reference-panel[data-reference-open=true] .reference-context strong{width:auto;font-size:13px;flex:1}
.reference-panel[data-reference-open=true] .reference-current{display:none}
.reference-panel[data-reference-open=true] .reference-choices{flex-shrink:0}
.reference-panel[data-reference-open=true] .reference-choices button{font-size:12px;padding:6px 10px}
.reference-panel[data-reference-open=true] [data-reference-figure]{margin-top:10px;min-height:190px;flex:1;display:flex}
.reference-panel[data-reference-open=true] figure{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.reference-zoom-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex-shrink:0}
.reference-zoom-tools button{border:1px solid #d6e2f0;border-radius:5px;background:#fff;color:#416b96;padding:5px 8px;font-size:11px;min-height:29px;line-height:17px}
.reference-zoom-tools button:hover{background:#edf5ff;border-color:#a7c7eb}
.reference-zoom-tools [data-reference-zoom=in],.reference-zoom-tools [data-reference-zoom=out]{font-size:17px;width:29px;padding:3px}
.reference-zoom-tools output{font-variant-numeric:tabular-nums;color:#4c6c8e;font-size:11px;min-width:34px;text-align:center}
.reference-zoom-tools [data-reference-enlarge]{margin-left:auto}
.reference-canvas{position:relative;flex:1;min-height:130px;min-width:0;border:1px solid #d4e0ef;border-radius:8px;background:#e7edf5;overflow:hidden;touch-action:none;overscroll-behavior:contain;user-select:none;cursor:default}
.reference-canvas:focus-visible{outline:2px solid #397fc9;outline-offset:-2px}
.reference-canvas.can-pan{cursor:grab}.reference-canvas.is-dragging{cursor:grabbing}
.reference-canvas img{position:absolute;left:0;top:0;max-width:none;max-height:none;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:0 0}
.reference-canvas .reference-load-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffefc;border:1px solid #d4e0ef;padding:9px 13px;border-radius:7px;white-space:nowrap;margin:0;pointer-events:none}
.reference-image-help{color:#7d91aa;font-size:10px;text-align:center;flex-shrink:0;line-height:1.5}
/* The same title/state is already visible above the image. Keep the caption for assistive reading. */
.reference-content figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reference-panel[data-reference-open=true] .reference-note{font-size:11px;line-height:1.6;margin:8px 0 0;flex-shrink:0}
@media(max-width:1279px){.reference-resize{left:-12px;width:11px}}