/* The teaching panel matches the fitted image panel height, not its width. */
body[data-codex-family='library'] dialog.detail{height:fit-content;max-height:calc(100svh - 32px)}
body[data-codex-family='library'] .dgrid{height:auto;max-height:calc(100svh - 32px);grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
body[data-codex-family='library'] .viewer{height:auto}
body[data-codex-family='library'] .stage{height:var(--codex-panel-height,360px);flex:0 0 auto}
body[data-codex-family='library'] .info{height:var(--codex-panel-height,360px)}
body[data-codex-family='step1'] .md{height:var(--codex-panel-height,500px);grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr)}
body[data-codex-family='step1'] .md.dg{height:var(--codex-panel-height,500px);grid-template-columns:minmax(0,1.8fr) minmax(330px,.8fr)}
body[data-codex-family='step1'] .md .stage,body[data-codex-family='step1'] .md .side{height:var(--codex-panel-height,500px)}
body[data-codex-family='step1'] .md.dg.focus{height:calc(100svh - 32px);grid-template-columns:minmax(0,1fr)}
body[data-codex-family='step1'] .md.dg.focus .stage{height:100%}
@media(max-width:800px),(pointer:coarse) and (orientation:portrait){
 body[data-codex-family='library'] dialog.detail{height:100svh;max-height:100svh}
 body[data-codex-family='library'] .dgrid{height:100%;max-height:100%;display:block}
 body[data-codex-family='library'] .viewer{height:auto}
 body[data-codex-family='library'] .stage{height:var(--codex-panel-height,300px)}
 body[data-codex-family='library'] .info{height:auto;overflow:visible}
 body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{height:100svh;max-height:100svh}
 body[data-codex-family='step1'] .md .stage{height:var(--codex-panel-height,360px)}
 body[data-codex-family='step1'] .md .side{height:auto}
 body[data-codex-family='step1'] .md.dg.focus{height:100svh}
 body[data-codex-family='step1'] .md.dg.focus .stage{height:100%}
}
@media print{body[data-codex-family='library'] dialog.detail,body[data-codex-family='library'] .dgrid,body[data-codex-family='library'] .info,body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md .side{height:auto;max-height:none;overflow:visible}}

body[data-codex-family="library"] .dgrid{background:var(--codex-paper)}body[data-codex-family="library"] .info{border-bottom:1px solid var(--codex-line)}

body[data-codex-family='library'] .viewer-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;min-height:64px;background:#10272b;border-bottom:1px solid #ffffff18}
body[data-codex-family='library'] .viewer-tools .viewer-zoom{position:static;margin-right:auto;min-height:44px;transform:none}
body[data-codex-family='library'] .viewer-tools .navarrow{position:static;transform:none;flex:0 0 44px;min-height:44px;box-shadow:none}
body[data-codex-family='library'] .stage{height:calc(var(--codex-panel-height,360px) - var(--codex-toolbar-height,64px));padding:16px 20px}
body[data-codex-family='step1'] .md .stage>.nav{display:none}
body[data-codex-family='step1'] .md .sbar{flex-wrap:wrap}
body[data-codex-family='step1'] .md .sbar .viewer-zoom{position:static;min-height:44px;order:5;margin-left:auto}
@media(max-width:800px),(pointer:coarse) and (orientation:portrait){body[data-codex-family='library'] .viewer-tools{padding-right:68px}body[data-codex-family='library'] .stage{padding:16px}body[data-codex-family='step1'] .md .sbar .viewer-zoom{flex-basis:auto}}

body[data-codex-family='library'] .viewer-tools:empty{display:none}body[data-codex-family='library'] .stage>.soon{min-height:0;height:100%;width:100%;padding:24px;overflow-y:auto}

body[data-codex-family='library'] .stage>.soon img{width:64px;height:64px;max-height:64px;object-fit:contain;flex:none}