:root{--reader-width:680px;--atlas-top:80px;--atlas-side:254px}
body .app{grid-template-columns:var(--atlas-side) minmax(0,1fr);height:auto;min-height:calc(100dvh - var(--atlas-top));align-items:stretch}
body.reader-open .app{grid-template-columns:var(--atlas-side) minmax(0,1fr) var(--reader-width)}
body .workspace,body.graph-page .workspace{height:auto;min-height:calc(100dvh - var(--atlas-top));padding:10px 28px 12px}
body .workspace .workspace-head,body.graph-page .workspace .workspace-head{height:38px;min-height:38px;flex-direction:row;align-items:center}
body .workspace .eyebrow{display:none}
body .workspace h2,body.graph-page .workspace h2{font-size:23px;letter-spacing:1px}
body .workspace .selection-bar,body.graph-page .workspace .selection-bar{height:42px;min-height:42px;max-height:42px;margin-bottom:8px}
body .workspace .views,body.graph-page .workspace .views{margin-top:6px;padding-bottom:6px;flex-wrap:wrap;overflow:visible}
body .workspace .scope,body.graph-page .workspace .scope{height:24px;min-height:24px;max-height:24px;margin:5px 0}
body .content-scroll{min-height:380px;max-height:calc(100dvh - 160px);height:calc(100dvh - 410px)}
body .period-track{flex-wrap:wrap;overflow:visible;padding-bottom:2px;align-content:flex-start}
body .period-track button{flex:0 0 auto;min-height:50px;padding:7px 11px}
body .period-nav{position:relative;flex-shrink:0}
body .content-scroll>footer{display:none}
.layout-controls{display:flex;gap:6px;align-items:center;min-height:29px;flex-shrink:0;margin-bottom:5px}
.layout-controls button{font-size:12px;padding:2px 7px;border:0;color:#555;background:none}
.reader-slot{position:sticky;top:0;align-self:start;height:calc(100dvh - var(--atlas-top));min-height:500px;min-width:0;border-left:1px solid #ddd;padding-left:10px;overflow:hidden;background:#fff}
#reader.unified-reader{position:relative;inset:auto;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;box-shadow:none;overflow:auto;z-index:5}
.reader-resizer{position:absolute;inset:0 auto 0 0;width:12px;cursor:ew-resize;touch-action:none;z-index:15;display:flex;align-items:center;justify-content:center}
.reader-resizer span{background:white;border:1px solid #ccc;border-radius:3px;font-size:13px;padding:10px 0;line-height:1;opacity:0;transition:opacity .15s}
.reader-resizer:hover span,.reader-resizer:focus-visible span,.reader-resizer:active span{opacity:1}
.reader-resizer:hover,.reader-resizer:focus-visible{background:#eee}
body.top-collapsed{--atlas-top:0px}
body.top-collapsed>header{display:none}
body.side-collapsed{--atlas-side:0px}
body.side-collapsed .filters{display:none}
body.side-collapsed .workspace{grid-column:2}
body .filters{height:calc(100dvh - var(--atlas-top));position:sticky;top:0;align-self:start}
body.graph-expanded .workspace{height:100dvh;min-height:0;padding:8px 20px}
body.graph-expanded.reader-open .workspace{right:var(--reader-width)}
body.graph-expanded .reader-slot{position:fixed;top:0;right:0;width:var(--reader-width);height:100dvh;z-index:40}
body.graph-expanded .content-scroll{height:auto;min-height:0;max-height:none;flex:1}
body.graph-expanded .layout-controls{display:none}
.map-zoom button[data-camera=home],.map-zoom button[data-camera=fit]{font-size:12px;white-space:nowrap}
@media(max-width:850px){:root{--atlas-side:210px}body .workspace,body.graph-page .workspace{padding-left:16px;padding-right:16px}.graph-context{display:none}}
@media(max-width:700px){:root{--atlas-top:58px}body>header{height:58px;flex-basis:58px}body .app,body.reader-open .app{display:flex;flex-direction:column;min-height:0}body .filters{position:relative;height:auto;max-height:170px}body .workspace,body.graph-page .workspace{min-height:0;padding:8px 12px 16px}body .content-scroll{height:72svh;min-height:400px;max-height:none}body .reader-slot{position:relative;top:auto;order:3;height:75svh;min-height:420px;width:100%;padding-left:0;border-top:1px solid #ddd}body .reader-resizer{display:none}body .workspace h2,body.graph-page .workspace h2{font-size:21px}body .period-track button{font-size:12px;padding:6px 8px;min-height:46px}body.graph-expanded.reader-open .workspace{right:0;height:50dvh}body.graph-expanded.reader-open .reader-slot{top:50dvh;width:100%;height:50dvh;min-height:0}body.graph-expanded .workspace{height:100dvh}body.graph-expanded .content-scroll{min-height:0;height:auto}}
body .app{overflow:visible}
/* Compact panel switches share the filter bar instead of taking another row. */
.selection-bar .layout-controls{display:flex;flex:0 0 auto;gap:3px;min-height:32px;margin:0;padding-right:10px;border-right:1px solid #ddd}
.selection-bar .layout-controls button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:5px;border:1px solid transparent;border-radius:4px;color:#555;background:#fff;cursor:pointer}
.selection-bar .layout-controls svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.selection-bar .layout-controls button:hover{color:#111;background:#f1f1f1;border-color:#d7d7d7}
.selection-bar .layout-controls button[aria-expanded=false]{color:#fff;background:#222;border-color:#222}
.selection-bar .layout-controls button:focus-visible{outline:2px solid #555;outline-offset:-2px}
@media(max-width:600px){.selection-bar .layout-controls{gap:0;padding-right:6px}.selection-bar .layout-controls button{width:30px;height:30px}}

body>header .search{width:360px;max-width:45%;margin-left:auto;flex-shrink:1}body>header .brand{flex-shrink:0}@media(max-width:600px){body>header{gap:12px;padding:0 12px}body>header .brand{gap:8px;font-size:17px}body>header .brand small{font-size:8px;letter-spacing:1px}body>header .symbol{padding-right:8px}body>header .search{max-width:none;min-width:0;flex:1;gap:6px}body>header .search input{font-size:12px}body>header .search>span{font-size:12px}}

/* Keep the page scroll independent of the genealogy camera. */
body.graph-page .content-scroll{flex:0 0 auto;height:78svh;min-height:500px;max-height:none}body.graph-page .workspace{overflow:visible}body.graph-page .app{min-height:calc(100dvh + 100px)}
.map-stage.node-layout .graph-label{width:fit-content;max-width:100%;cursor:pointer}.map-stage.node-layout .graph-label small{cursor:pointer}
@media(max-width:700px){body.graph-page .content-scroll{height:78svh;min-height:400px}}

/* Remove secondary interface notes without leaving empty rows. */
body .workspace .scope,body.graph-page .workspace .scope,.canvas-hint,#reader-kind,.source-method,.graph-help,#content>.period-note{display:none!important}
.reader-tools #close{margin-left:auto}
.graph-context{display:none!important}

/* Reserve navigation space so wrapping never moves the reading surface. */
body .period-nav{height:136px;min-height:136px;max-height:136px;overflow:hidden}
body .period-track{height:114px;max-height:114px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;align-content:flex-start;align-items:flex-start}
body .period-track button{height:50px;min-height:50px;max-height:50px}
/* Cards keep their dimensions as the adjacent reader changes width. */
.workspace .cards{grid-template-columns:repeat(auto-fill,255px);justify-content:start;align-items:start}
.workspace .person-card{width:255px;min-width:255px;max-width:255px}
.workspace .term-grid{grid-template-columns:repeat(auto-fill,215px);justify-content:start;align-items:start}
.workspace .term-tile{width:215px;min-width:215px;max-width:215px}
body .content-scroll{overflow-anchor:none}
@media(max-width:600px){.workspace .term-grid{grid-template-columns:repeat(auto-fill,150px)}.workspace .term-tile{width:150px;min-width:150px;max-width:150px}}
body .workspace .views,body.graph-page .workspace .views{flex-wrap:nowrap;height:46px;min-height:46px;max-height:46px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}body .workspace .views button{flex-shrink:0;white-space:nowrap}body .app{overflow-anchor:none}

.workspace .term-tile{height:160px;min-height:160px;max-height:160px;overflow:hidden}.workspace .term-tile strong,.workspace .term-tile span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}@media(max-width:600px){.workspace .term-tile{height:160px;min-height:160px;max-height:160px}}

.map-zoom button[data-camera="out"]{font-size:17px}

/* Shared card dimensions in the school directory and chronology. */
.workspace .person-card{height:19rem;min-height:19rem;display:block;align-content:start}