/* Bounded media viewers: fit images, balanced desktop columns and reachable notes. */
body[data-codex-family='library'] dialog.detail{width:min(1440px,calc(100vw - 32px));height:min(940px,calc(100svh - 32px));max-height:calc(100svh - 32px);max-width:calc(100vw - 32px);margin:auto;overflow:hidden}
body[data-codex-family='library'] .dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%;max-height:100%;min-height:0;overflow:hidden}
body[data-codex-family='library'] .viewer{height:100%;min-height:0;min-width:0;overflow:hidden}
body[data-codex-family='library'] .stage{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:0;min-width:0;padding:62px 20px 20px;overflow:hidden}
body[data-codex-family='library'] .stage :is(img,video){display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:1}
body[data-codex-family='library'] .stage.zoom{overflow:auto;align-items:flex-start;justify-content:flex-start}
body[data-codex-family='library'] .stage.zoom img{transform:none;width:190%;height:auto;max-width:none;max-height:none;flex-shrink:0}
body[data-codex-family='library'] .strip{flex:0 0 auto}
body[data-codex-family='library'] .info{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--codex-track) var(--codex-soft);gap:14px;padding:20px 22px 24px}
body[data-codex-family='library'] .info>*{flex-shrink:0}
body[data-codex-family='library'] .info> :is(.exam,.look,.watch,.note,.related,.companions,.credit){margin:0!important}
body[data-codex-family='library'] .info .top{position:sticky;top:-20px;background:var(--codex-surface);padding:12px 0;z-index:3}
body[data-codex-family='library'] .info .top:after{content:'Scroll for more ↓';position:absolute;bottom:0;right:0;font:500 10px var(--codex-sans);color:var(--codex-muted)}
body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:min(940px,calc(100svh - 32px));max-height:calc(100svh - 32px);min-height:0}
body[data-codex-family='step1'] .md.dg.focus{grid-template-columns:minmax(0,1fr)}
body[data-codex-family='step1'] .md .stage{min-height:0;min-width:0}
body[data-codex-family='step1'] .md .side{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:var(--codex-track) var(--codex-soft)}
body[data-codex-family='step1'] .md .side>*{flex-shrink:0}
body[data-codex-family='step1'] .view:not(.zoom) img{width:100%;height:100%;max-height:100%;object-fit:contain}
@media(max-width:800px),(pointer:coarse) and (orientation:portrait){
 body[data-codex-family='library'] dialog.detail{width:100%;max-width:100%;height:100svh;max-height:100svh;margin:0;border-radius:0}
 body[data-codex-family='library'] .dgrid{display:block;height:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
 body[data-codex-family='library'] .viewer{height:clamp(260px,48svh,460px);min-height:0}
 body[data-codex-family='library'] .stage{min-height:0;padding:62px 16px 16px}
 body[data-codex-family='library'] .info{height:auto;overflow:visible;padding:20px 18px calc(24px + env(safe-area-inset-bottom));scrollbar-gutter:auto}
 body[data-codex-family='library'] .info .top{position:static;padding:0}
 body[data-codex-family='library'] .info .top:after{content:none}
 body[data-codex-family='library'] .info .x{position:fixed;right:14px;top:calc(12px + env(safe-area-inset-top));z-index:10;box-shadow:0 2px 12px #0002}
 body[data-codex-family='library'] .companions .row{grid-template-columns:1fr}
 body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{display:flex;flex-direction:column;height:100svh;max-height:100svh;overflow-y:auto;border-radius:0}
 body[data-codex-family='step1'] .md .stage{height:clamp(280px,50svh,500px);min-height:0;flex:0 0 auto}
 body[data-codex-family='step1'] .md .side{height:auto;overflow:visible;flex:0 0 auto;scrollbar-gutter:auto}
 body[data-codex-family='step1'] .md.dg.focus .stage{height:100%;flex:1 1 auto}
}
@media print{body[data-codex-family='library'] dialog.detail,body[data-codex-family='library'] .dgrid,body[data-codex-family='library'] .info{height:auto;max-height:none;overflow:visible}body[data-codex-family='library'] .info .top{position:static}body[data-codex-family='library'] .info .top:after{content:none}}

body[data-codex-family='library'] .viewer>.note{flex:0 0 auto;margin:0 12px 10px;padding:12px 16px;border-right:3px solid var(--codex-track);box-shadow:4px 2px 14px -7px #0b4a3d55}body[data-codex-family='library'] .viewer>.note{font-size:12px}

body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{grid-template-rows:minmax(0,1fr)}
@media(max-width:800px),(pointer:coarse) and (orientation:portrait){body[data-codex-family='library'] .viewer{height:auto}body[data-codex-family='library'] .stage{height:clamp(280px,45svh,440px);flex:0 0 auto}body[data-codex-family='step1'] .mb{padding:0}body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{width:100%;max-width:100%}body[data-codex-family='step1'] .md>.x{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:30}}

body[data-codex-family='library'] .info .top{backdrop-filter:none;-webkit-backdrop-filter:none}

@media(max-width:800px),(pointer:coarse) and (orientation:portrait){body[data-codex-family='step1'] .md .sbar{flex-wrap:wrap;gap:8px}body[data-codex-family='step1'] .md .sbar .hint{flex:1;min-width:0;white-space:normal;font-size:10px}body[data-codex-family='step1'] .md .sbar .zbar{order:5;flex:1 0 100%;justify-content:center;flex-wrap:wrap}body[data-codex-family='step1'] .md .sbar button,body[data-codex-family='step1'] .md>.x{min-width:44px;min-height:44px}body[data-codex-family='step1'] .md .sbar .zf-focus{display:inline-flex;align-items:center;justify-content:center}}

@media(max-width:980px){body[data-codex-family='step1'] .md .sbar{flex-wrap:wrap;gap:8px}body[data-codex-family='step1'] .md .sbar .hint{flex:1;min-width:0;white-space:normal;font-size:10px}body[data-codex-family='step1'] .md .sbar .zbar{order:5;flex:1 0 100%;justify-content:center;flex-wrap:wrap}body[data-codex-family='step1'] .md .sbar button{min-width:44px;min-height:44px}body[data-codex-family='step1'] .md .sbar .zf-focus{display:inline-flex;align-items:center;justify-content:center}}