/* V4.1 — retractable navigation without moving a card sideways. */
:root{--nav-fold-speed:.34s}
.header{grid-template-columns:66px minmax(0,1fr) 156px;gap:14px;transition:height var(--nav-fold-speed) cubic-bezier(.22,.8,.2,1),padding var(--nav-fold-speed),background .25s}
.header-actions{gap:4px}
.nav-summary{display:none;grid-column:2;grid-row:1;min-width:0;text-align:left;justify-content:center;flex-direction:column;gap:3px;padding:4px 7px;border-radius:12px;height:48px;overflow:hidden}
.nav-summary strong{font:600 15px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-summary>span{font-size:11px;line-height:1.4;color:#607961;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-summary:hover{background:#e8eee1}
.nav-collapse svg{width:20px;height:20px;transition:transform var(--nav-fold-speed) cubic-bezier(.2,.8,.2,1)}
.main-nav{grid-column:2;grid-row:1;transition:opacity .2s ease,transform var(--nav-fold-speed);transform-origin:50% 0}
.context-bar{max-height:76px;transition:max-height var(--nav-fold-speed),min-height var(--nav-fold-speed),padding var(--nav-fold-speed),opacity .22s,top var(--nav-fold-speed);overflow:clip}
main{transition:padding-top var(--nav-fold-speed) cubic-bezier(.22,.8,.2,1)}
:root[data-nav=folded]{--header:62px}
[data-nav=folded] .header{padding-block:5px}
[data-nav=folded] .brand,[data-nav=folded] .brand img{width:46px;height:46px}
[data-nav=folded] .nav-summary{display:flex}
[data-nav=folded] .main-nav{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-9px);max-height:0;overflow:hidden;padding-block:0}
[data-nav=folded] .context-bar{max-height:0;min-height:0;height:0;padding-block:0;opacity:0;pointer-events:none;border-bottom-width:0}
[data-nav=folded] .nav-collapse svg{transform:rotate(180deg)}
[data-nav=folded] .header-actions{grid-column:3;grid-row:1}
[data-nav=folded] .nav-collapse{background:#e4ecdd}
/* Prevent first-touch image dragging / text selection / hidden focus scrolling. */
.gallery-viewport:not(.is-grid),.detail-viewport,.lesson-viewport{overflow:clip}
.photo-open,.photo h2,.photo .tag,.detail-hero,.lesson-photo,.home-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
.detail-hero img,.home-card img{-webkit-user-drag:none;pointer-events:none}
.gesture-zone.dragging *{-webkit-user-select:none;user-select:none}
.gesture-zone>div{backface-visibility:hidden}
.search-result strong{font-weight:650}
@media(max-width:1050px){
 .header{grid-template-columns:53px minmax(0,1fr) 152px;gap:3px 7px}
 .nav-summary{display:flex}
 .main-nav{grid-column:1/-1;grid-row:2}
 :root[data-nav=folded]{--header:62px}
 [data-nav=folded] .header{grid-template-rows:50px 0;row-gap:0;padding-bottom:6px}
 [data-nav=folded] .main-nav{min-height:0;height:0;margin:0}
}
@media(max-width:540px){
 .header{grid-template-columns:46px minmax(0,1fr) 136px;padding-inline:12px;gap:3px 3px}
 .header-actions{gap:2px}
 .header-actions .round{width:43px;height:43px}
 .nav-summary{height:43px;padding-inline:4px}
 .nav-summary strong{font-size:14px}
 .nav-summary>span{font-size:10px}
 :root[data-nav=folded]{--header:calc(58px + env(safe-area-inset-top))}
 [data-nav=folded] .header{grid-template-rows:47px 0;padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:6px}
 [data-nav=folded] .brand,[data-nav=folded] .brand img{width:43px;height:43px}
 .context-bar{max-height:72px}
}
@media(prefers-reduced-motion:reduce){.header,.nav-collapse svg,.main-nav,.context-bar,main{transition:none!important}}