/* Shared visual-lesson system. Keep artwork neutral; controls use the existing VBS palette. */
body.principle-mode.is-file-drag::after{content:'Drop images into this visual lesson'}
.site-header .main-nav{display:flex}
@media(max-width:1400px){.site-header{height:auto}.site-header .main-nav{grid-column:1/-1;grid-row:2;overflow-x:auto}.site-header .account-actions{grid-column:2;grid-row:1}}
.lesson-topline,.lesson-tools,.lesson-view-switch,.lesson-section-actions,.lesson-upload-controls,.lesson-image-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lesson-topline{justify-content:space-between;margin:0 0 28px}
.lesson-header{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:0 0 24px}
.lesson-header h1{font:500 clamp(42px,6vw,80px)/1 var(--serif,Georgia);letter-spacing:-.035em;margin:0 0 16px}
.lesson-header p{max-width:680px;line-height:1.6;margin:0;color:#56574f}
.lesson-tools{flex-shrink:0}.lesson-view-switch{padding:14px 0 22px;border-bottom:1px solid #d7d5ca}
.lesson-section{padding:34px 0;border-bottom:1px solid #d7d5ca;scroll-margin-top:110px}
.lesson-section-heading{display:flex;align-items:baseline;gap:18px;margin-bottom:20px}
.lesson-section-heading h2{font:500 clamp(25px,3vw,38px)/1.14 var(--serif,Georgia);margin:0;flex:1}
.lesson-number{font:12px var(--mono,monospace);color:#626654}
.lesson-description{white-space:pre-wrap;max-width:900px;font-size:17px;line-height:1.7;margin:22px 0 8px}
.lesson-image-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.lesson-image-group figure{margin:0;min-width:0}.lesson-image-button{padding:0;background:#e8e5dc;border:1px solid #d8d5cd;width:100%;cursor:zoom-in;display:grid;place-items:center;overflow:hidden;border-radius:5px}
.lesson-image-button img{width:100%;height:auto;max-height:420px;object-fit:contain;display:block}
.lesson-image-group:has(>figure:only-child){grid-template-columns:minmax(0,1fr);max-width:1060px}
.lesson-image-group:has(>figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.lesson-image-group:has(>figure:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.lesson-image-group figcaption{font-size:13px;line-height:1.5;margin-top:8px}.lesson-credit{display:block;font-size:10px;line-height:1.6;color:#676a60;margin-top:5px}.lesson-credit a{color:inherit;text-decoration:underline}
.lesson-notes{margin:16px 0;font-size:13px;color:#5e6158}.lesson-notes summary{cursor:pointer}.lesson-notes p{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere;max-width:850px}
.lesson-inline-drop,.lesson-editor-drop{border:1px dashed #8e9989;border-radius:6px;padding:16px;margin-top:24px;color:#53634f}.lesson-inline-drop{display:flex;justify-content:space-between;gap:12px;align-items:center}.lesson-inline-drop.is-over{background:#dfe9d8}.lesson-inline-drop small{font-size:11px}
.lesson-add-section{padding:28px 0}.lesson-status{font-size:12px;line-height:1.5;color:#616659}.lesson-authoring-guide{margin-top:35px;border-top:1px solid #d9d9d0;padding:15px 0;color:#777;font-size:11px}.lesson-authoring-guide p{max-width:700px}
.lesson-contact-sheet{padding-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.lesson-contact-group{padding:20px;background:#f7f5ee;border:1px solid #dedbd1;border-radius:8px}.lesson-contact-title{border:0;background:none;padding:0;margin:0 0 15px;font:500 24px var(--serif,Georgia);cursor:pointer;text-align:left}.lesson-contact-text{font-size:14px;line-height:1.5;max-width:700px}
.lesson-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.lesson-related-card{border:0;background:none;padding:0;cursor:pointer;text-align:left;min-width:0}.lesson-related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#e9e7df;border-radius:3px}.lesson-related-card span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;margin-top:5px}#work-related{margin:24px 0}
.lesson-player,.lesson-lightbox{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;margin:0;border:0;background:#171916;color:#f7f4e9;overflow:hidden}
.lesson-player[open],.lesson-lightbox[open]{display:flex;flex-direction:column}.lesson-player::backdrop,.lesson-lightbox::backdrop{background:#000e}
.lesson-player-toolbar{display:flex;align-items:center;gap:14px;padding:14px 24px;flex:none;background:#20231e;font-size:12px}.lesson-player-toolbar>span:first-child{flex:1}.lesson-player-toolbar .button{min-height:34px}.lesson-player-toolbar button:disabled{opacity:.3}
.lesson-slide{flex:1;min-height:0;overflow:auto;padding:20px clamp(20px,6vw,90px);display:flex;flex-direction:column;justify-content:safe center}
.lesson-slide h2{font:500 clamp(28px,4vw,62px)/1.1 var(--serif,Georgia);margin:10px 0 24px;letter-spacing:-.02em}.lesson-slide .eyebrow{color:#b3bfab}
.lesson-slide .lesson-image-group{max-width:none;gap:18px;flex-shrink:0}.lesson-slide .lesson-image-button{background:#242820;border-color:#42483c}.lesson-slide .lesson-image-button img{max-height:min(40vh,calc(100dvh - 320px));object-fit:contain}.lesson-slide .lesson-image-group:has(>figure:nth-child(5)) img{max-height:calc((100dvh - 360px)/3)}.lesson-slide .lesson-credit{color:#b3b6ac}.lesson-slide-description{max-width:1100px;white-space:pre-wrap;font-size:clamp(16px,1.55vw,23px);line-height:1.5;margin:20px 0 0;color:#deded4}
.lesson-lightbox-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:16px;overflow:auto;gap:8px}.lesson-lightbox-body>img{max-width:100%;max-height:75vh;object-fit:contain}.lesson-lightbox-body>p{margin:0;max-width:900px;font-size:15px}.lesson-lightbox .lesson-credit{color:#c7cbbc}
.lesson-lightbox-body{flex-direction:row;gap:24px;align-items:center;padding:24px}.lesson-lightbox-main{flex:1;min-width:0;text-align:center}.lesson-lightbox-main>img{max-width:100%;max-height:68vh;object-fit:contain}.lesson-lightbox-main>p{font-size:14px;line-height:1.5}.lesson-lightbox-aside{width:280px;flex-shrink:0}.lesson-lightbox-aside h3{font-size:12px;font-weight:500;color:#cdd4c6}.lesson-lightbox-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.lesson-thumb{padding:2px;border:1px solid #555;background:#282c25;cursor:pointer}.lesson-thumb[aria-current=true]{border:2px solid #e3edcf}.lesson-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
@media(max-width:800px){.lesson-lightbox-body{flex-direction:column;padding:16px}.lesson-lightbox-aside{width:min(320px,100%)}.lesson-lightbox-main>img{max-height:52vh}}
.lesson-editor-dialog,.lesson-picker-dialog{width:min(1250px,96vw);height:92dvh;max-width:96vw;max-height:96dvh;padding:0;border:1px solid #b7baaf;border-radius:12px;background:#f8f7f0;color:#20231d}
.lesson-editor-dialog[open]{display:flex;flex-direction:column}.lesson-editor-top{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #d8dace;flex-wrap:wrap;position:sticky;top:0;background:#f8f7f0;z-index:1}.lesson-editor-status{font-size:11px;line-height:1.4;flex:1;min-width:180px;color:#56614c}.lesson-editor-top strong{font-size:16px}
.lesson-editor-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;flex:1}.lesson-editor-nav{padding:16px;border-right:1px solid #d8dace;overflow:auto;display:flex;flex-direction:column;gap:8px}.lesson-section-select{padding:12px;background:none;border:1px solid transparent;border-radius:5px;text-align:left;font:inherit;font-size:13px;cursor:pointer}.lesson-section-select[aria-current=step]{background:#e5e9db;border-color:#bdc7aa}.lesson-editor-fields{padding:24px;overflow:auto}.lesson-editor-fields>label{margin:18px 0;display:grid;gap:7px;font-size:13px;font-weight:600}
.lesson-editor-fields input:not([type=checkbox]),.lesson-editor-fields textarea,.lesson-picker-dialog>input{width:100%;padding:11px;border:1px solid #c5cbbd;border-radius:5px;font:inherit;background:white;color:#222}.lesson-section-actions{justify-content:flex-start;margin-bottom:20px}.lesson-section-actions .button{font-size:10px;padding:6px 10px;min-height:30px}
.lesson-editor-drop{display:grid;gap:6px;text-align:center;padding:28px;margin:16px 0}.lesson-editor-drop span{font-size:12px}.lesson-ai-option{display:flex;align-items:center;gap:7px;font-size:12px;margin:0}
.lesson-edit-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.lesson-edit-image{padding:10px;border:1px solid #d4d9ca;border-radius:6px;background:#fff}.lesson-edit-image>img{width:100%;height:130px;object-fit:contain;background:#ecefe6}.lesson-edit-image label{display:grid;gap:5px;margin:10px 0;font-size:11px}.lesson-edit-image summary{font-size:11px;cursor:pointer}.lesson-image-actions{gap:3px;margin-top:12px}.lesson-image-actions .button{padding:5px 8px;min-height:28px;font-size:11px}
.lesson-picker-dialog>input{margin:20px;width:calc(100% - 40px)}.lesson-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px}.lesson-picker-card{padding:8px;background:#fff;border:1px solid #d5d9ce;cursor:pointer;text-align:left}.lesson-picker-card img{width:100%;height:140px;object-fit:contain}.lesson-picker-card span{display:block;font-size:12px;padding:8px 0}.lesson-picker-card small{color:#48763d}.lesson-picker-dialog>button{margin:20px}
.lesson-upload-controls select{font:inherit;border:1px solid #c5cbbd;padding:8px;background:white;border-radius:4px}.lesson-upload-controls>label{font-size:12px}
.lesson-ai-draft{padding:14px;border:1px solid #a5b990;background:#f0f5e9;border-radius:6px;margin:12px 0;overflow-wrap:anywhere}.lesson-ai-draft p{font-size:13px;line-height:1.6;white-space:pre-line}.lesson-ai-draft small{display:block;margin-bottom:12px}.lesson-ai-draft .button{margin:4px 4px 0 0;white-space:normal}
.lesson-export-actions{display:inline-flex;gap:12px;flex-wrap:wrap;margin:8px 0}.lesson-ai-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#ecefdf;border:1px solid #c5cbbd;padding:14px;margin:14px 0}.lesson-ai-actions small{flex-basis:100%}.lesson-merge-options,.lesson-expansion-fields{padding:22px;overflow:auto}.lesson-merge-options label{display:flex;gap:12px;align-items:center;padding:12px 0}.lesson-merge-options input{width:18px;height:18px}.lesson-expansion-fields label{display:block;margin:14px 0}.lesson-expansion-fields input,.lesson-expansion-fields textarea{display:block;box-sizing:border-box;width:100%;padding:10px;margin-top:7px;font:inherit}.lesson-expansion-fields .button{margin:5px}.lesson-notes a{overflow-wrap:anywhere;text-decoration:underline}.lesson-player-toolbar{flex-wrap:wrap}
.lesson-export-dialog{padding:0;border:0;max-width:95vw;width:900px;max-height:94vh;background:#efede5}.lesson-export-dialog>img{display:block;width:auto;max-width:100%;max-height:76vh;margin:12px auto;object-fit:contain}.lesson-export-dialog .lesson-editor-top{position:sticky;top:0;background:#f7f5ef}.lesson-export-dialog::backdrop{background:#0009}
@media(max-width:600px){.lesson-contact-sheet{grid-template-columns:1fr}}
.lesson-player button:focus-visible,.lesson-lightbox button:focus-visible{outline:3px solid #d5e9ba;outline-offset:3px}
@media(max-width:800px){.lesson-header{align-items:flex-start;flex-direction:column;gap:15px}.lesson-section-heading{gap:10px}.lesson-section-heading .text-button{font-size:10px}.lesson-image-group{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-image-group:has(>figure:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-inline-drop{flex-direction:column;align-items:flex-start}.lesson-editor-shell{grid-template-columns:1fr}.lesson-editor-nav{max-height:110px;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #ccc;flex-shrink:0}.lesson-editor-fields{padding:16px}.lesson-edit-images{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-editor-top{padding:12px}.lesson-editor-top .button{font-size:10px;padding:7px 9px;min-height:32px}.lesson-player-toolbar{padding:10px;gap:8px}.lesson-player-toolbar>span{font-size:10px}.lesson-slide{padding:22px}.lesson-slide .lesson-image-button img{max-height:34vh}.lesson-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.lesson-player *,.lesson-editor-dialog *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}