/* Shared app navigation. The existing app-base.css owns the design tokens. */
.brandHome{color:var(--text);text-decoration:none}.brandHome:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.appMenu{position:relative;border:0;padding:0}.appMenu summary{list-style:none;border:1px solid var(--line);background:var(--paper);color:var(--navy);border-radius:24px;min-height:44px;padding:12px 15px;font:700 12px/18px -apple-system,BlinkMacSystemFont,Arial,sans-serif;cursor:pointer}.appMenu summary::-webkit-details-marker{display:none}.appMenu>div{position:absolute;right:0;top:50px;padding:8px;z-index:50;background:var(--paper);box-shadow:0 10px 30px #17345b18;border:1px solid var(--line);border-radius:16px;min-width:190px;max-height:75vh;overflow:auto}.appMenu a{display:block;padding:12px;min-height:44px;border-radius:10px;font-size:13px;line-height:20px;color:var(--navy);text-decoration:none}.appMenu a:hover{background:#eaf0f7}.appMenu[open] summary{background:#eaf0f7}.publicFooter a{display:inline-flex;align-items:center;min-height:44px}.publicFooter>div{display:flex;justify-content:center;flex-wrap:wrap}.app a,.app button{touch-action:manipulation}
/* Align the tagline exactly with the existing live header. */
.app header .brandtag{margin:-7px 0 0 42px}
.app .upload,.app a.miniAction{text-decoration:none}
/* The header is outside the scrolling page, so content cannot cross its edge. */
.pageBody{height:100dvh;overflow:hidden}
.pageApp{display:flex;flex-direction:column;height:100dvh;min-height:0;padding-bottom:0;isolation:isolate}
.pageApp>.previewBar{flex:0 0 auto}
.pageApp>header{flex:0 0 auto;position:relative;top:auto;z-index:20;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.pageScroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;position:relative;z-index:0;scroll-padding-top:20px;padding-bottom:env(safe-area-inset-bottom);-webkit-overflow-scrolling:touch}
.pageScroll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pageApp .pageScroll .article h2,.pageApp .pageScroll .lookItem,.pageApp .pageScroll figure[id],.pageApp .pageScroll [id$="-example"]{scroll-margin-top:20px}
.pageApp .previewChoice{display:flex;flex-direction:column;align-items:stretch;position:relative;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:9px;overflow:hidden;text-align:left;color:var(--text);min-width:0}
.pageApp .previewChoice img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#f1eee8;border-radius:10px}
.pageApp .previewChoice .choiceCopy{display:block;padding:0 0 4px}
.pageApp .previewChoice b{display:block;padding:0;margin-top:10px;font-size:13px;line-height:1.4;letter-spacing:-.1px}
.pageApp .previewChoice small{display:block;margin-top:6px;font-size:12px;line-height:1.55;color:var(--muted);font-weight:400}
.pageApp .previewChoice[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:1px;background:#f2f6fc}
.pageApp .previewChoice[aria-pressed=true]:after{content:'✓';position:absolute;top:14px;right:14px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--navy);color:white;font-size:13px;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.pageApp .styleHeader{align-items:flex-start;flex-wrap:wrap}.pageApp .styleHeader>div:first-child{flex:1 1 150px}.pageApp .styleTools{flex:0 0 auto}.pageApp .styleHeader small{line-height:1.5;margin-top:4px}
.pageApp .selectedLook{font-size:12px;line-height:1.5;margin-top:15px}
.pageApp.exploreApp .lookItem p{font-size:12px;line-height:1.55;margin:6px 0}
.pageApp.exploreApp .filterRow{flex-wrap:wrap;overflow:visible;gap:7px}
.pageApp .stylePickerCard{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:26px 0 14px}
.pageApp .stylePickerCard .expandedStyles{gap:12px}
.pageApp .appMenu>div{max-height:min(75dvh,calc(100dvh - 155px))}
.createDock{flex:0 0 auto;padding:10px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);box-shadow:0 -5px 20px #17345b08;z-index:10}
.createDock .selectedLook{margin:0 0 6px;text-align:left;font-size:11px}
.createDock .handoffNote{font-size:12px;line-height:1.4;color:var(--muted);margin:0 0 8px}
.createDock .btn{min-height:46px;margin:0;font-size:14px;padding:11px 14px}
@media(max-height:500px){.createDock{padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}.createDock .selectedLook{margin-bottom:4px}.createDock .btn{min-height:42px;padding:9px 14px}}