/* Populated review content only. Locked styles and SVG geometry are unchanged. */
html[data-app-snap]{scroll-snap-type:y mandatory;overscroll-behavior-y:auto}
html[data-primary-layout] .app-header{scroll-snap-align:start;scroll-snap-stop:always}
html[data-primary-layout] .home-navigation-content,html[data-primary-layout] .home-guidance-content{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}
@media(prefers-reduced-motion:reduce){html[data-app-snap]{scroll-snap-type:none}}
/* A quiet backdrop around the floating bar; its locked card stays crisp. */
.bottom-nav{isolation:isolate}
.bottom-nav::before{content:"";position:absolute;inset:-26px -14px -48px;z-index:-1;pointer-events:none;border-radius:28px 28px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.75) 38%,#fff 100%);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%);mask-image:linear-gradient(to bottom,transparent,#000 24%)}
.theme-b-dark .bottom-nav::before{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.75) 38%,#000 100%)}
/* Restore the approved compact tile arrangement; allow content-driven height. */
.account-group .account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.account-group .account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid .tile{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none}
.grid .tile strong{font-size:clamp(.9375rem,1.6vw,1rem);max-width:100%;overflow-wrap:normal;word-break:normal}
.account-grid .tile{aspect-ratio:auto;height:auto;min-height:132px}
.account-grid .tile strong{font-size:clamp(.875rem,1.6vw,1rem)}
.home-nav-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(6rem,calc((100% - 14px)/2))),1fr))}
/* Fixed to the viewport, with enough reserved space for the last content row. */
.standalone .shell .bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(600px,calc(100% - 40px));margin:0;z-index:5}
.standalone .shell .app-body{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
.companion-region .cie-assistant{width:40px;height:40px;flex:none}
/* Two Home stages: compact overview above, navigation below the first viewport.
   The overview can grow for content; nothing is clipped to force it to fit. */
html[data-primary-layout] .theme-b .app-header{min-height:64px;padding-block:8px}
html[data-primary-layout] .theme-b .app-body{padding-top:8px;gap:12px}
html[data-primary-layout] .companion-region{min-height:56px;padding:8px 12px;gap:10px}
html[data-primary-layout] .companion-region .cie-assistant{width:36px;height:36px}
html[data-primary-layout] .content-region{padding:16px}
.home-top-content{min-height:calc(100svh - var(--home-top-offset,160px));display:flow-root}
.home-top-content>h1{margin:6px 0 12px}
.home-top-content .hero{padding:14px;margin:14px 0 0}
.home-top-content .hero p{margin:0}
.home-top-content .hero h2{margin:8px 0 10px}
.home-bottom-content{display:flow-root}
:root{line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,input,select,textarea{max-width:100%}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--icon-focus,var(--accent,#1b5e20));outline-offset:4px}.skip{position:fixed;top:-80px;left:12px;z-index:20;background:#fff;color:#12381a;padding:14px}.skip:focus{top:10px}.app-header{gap:12px}.utilities{display:flex;gap:8px;align-items:center}.utility{display:grid;place-items:center;min-height:44px;min-width:44px;padding:8px;border:1px solid var(--card-outline);border-radius:9px;background:var(--card-background);color:var(--icon-fg)}.review-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--icon-fg);margin:0}.companion-region{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px 20px;gap:12px;color:var(--icon-fg)}.companion-region p{margin:0;font-size:14px}.content-region{padding:clamp(20px,4vw,36px)}h1{font-size:clamp(28px,4vw,40px);font-weight:400;letter-spacing:-1px;line-height:1.2;margin:8px 0 16px}h2{font-size:20px;font-weight:400;line-height:1.3}h3{font-size:16px;font-weight:400}.muted{opacity:.78}.eyebrow{margin:0 0 8px;color:var(--icon-fg,var(--accent));font-size:10px}.hero{border:1px solid var(--card-outline,var(--line));border-radius:18px;padding:24px;margin:24px 0}.hero h2{margin-top:8px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tile{background:var(--card-background,var(--card));color:inherit;border:1px solid var(--card-outline,var(--line));border-radius:16px;padding:20px;text-align:left;min-height:132px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;line-height:1.5;overflow-wrap:anywhere}.tile a2v-icon{color:var(--icon-fg,var(--accent))}.tile strong{font-size:16px;font-weight:400}.tile small{font-size:12px;opacity:.78}.tile:disabled{opacity:1}.badge{font-size:10px;color:var(--icon-fg,var(--accent));letter-spacing:.05em}.btn{border:1px solid var(--card-outline,var(--line));background:var(--card-background,var(--card));color:var(--icon-fg,var(--accent));min-height:44px;padding:10px 16px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}.primary{background:var(--icon-fg,var(--accent));color:#fff}.theme-b-dark .primary,.page.dark .primary{background:#d7c7a3;color:#12381a}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}.footnote{font-size:12px;margin-top:24px;opacity:.78}.bottom-nav{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:3}.nav-item[aria-disabled=true]{color:var(--icon-disabled)}.detail{--icon-fg:var(--accent);--card-background:var(--card);--card-outline:var(--line);--icon-focus:var(--accent)}.detail .content-slot{padding:clamp(20px,4vw,36px)}.detail .actions-slot{padding:16px 20px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.detail .back{cursor:pointer}.title-slot h1{margin-bottom:0}.form-row{display:block;margin:20px 0}.form-row span{display:block;margin-bottom:8px}input:not([type=checkbox]),select,textarea{padding:12px;border:1px solid var(--card-outline,var(--line));border-radius:10px;background:var(--card-background,var(--card));color:inherit;width:100%}input[type=checkbox]{width:20px;height:20px;accent-color:#1b5e20;vertical-align:middle;margin-right:8px}fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 18px}legend{padding:0 8px}details{border-top:1px solid var(--line);padding:18px 0}summary{cursor:pointer;min-height:44px;display:list-item;align-content:center}#notice:not(:empty){position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:#12381a;color:#f8f5ec;border:1px solid #d7c7a3;max-width:calc(100% - 32px);width:max-content;padding:12px 18px;border-radius:12px;z-index:10}.splash-review{height:100svh;background:#f8f5ec}.splash-review iframe{height:100%;width:100%;border:0}.splash-controls{position:fixed;bottom:24px;left:20px;right:20px;display:flex;gap:12px;justify-content:center;z-index:4}.splash-controls .btn{background:#fff;color:#1b5e20;border-color:#d7c7a3}.splash-description{position:absolute;top:16px;left:16px;right:16px;text-align:center;font-size:11px;color:#1b5e20;z-index:4}.splash-review.dark .splash-description{color:#d7c7a3}.icon-grid{padding:0;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.icon-sample{flex-direction:column;overflow-wrap:anywhere;align-items:flex-start}.icon-sample a2v-icon{width:32px;height:32px}.status-line{font-size:12px;color:var(--icon-fg,var(--accent));margin-top:20px}.welcome{padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:24px}.stack{display:grid;gap:12px}.account-group{margin-top:28px}.contact-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card-background,var(--card));padding:16px;border:1px solid var(--line);border-radius:12px}.offline-note{padding:12px 0;font-size:12px}p{overflow-wrap:anywhere}@media(min-width:760px){.account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:380px){.grid{gap:10px}.tile{padding:14px}.content-region{padding:18px}.review-label{font-size:9px}.brand{max-width:75px}.utilities{gap:4px}.app-header{padding-inline:20px}.theme-b .bottom-nav{margin-inline:12px;padding-inline:4px}.splash-controls{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Separate navigation and guidance into padded, softly snapping Home stages. */
.home-navigation-content,.home-guidance-content{min-height:var(--stage-height);padding-top:var(--stage-top);padding-bottom:var(--stage-bottom);display:flex;flex-direction:column;justify-content:center}
.home-guidance-content>.hero{margin:0}
:root{--stage-height:100svh;--stage-top:clamp(48px,8svh,80px);--stage-bottom:calc(116px + env(safe-area-inset-bottom));--content-padding:16px}
html[data-app-snap] .shell>.app-header,html[data-app-snap] .app-stage,html[data-app-snap] .page.detail,html[data-app-snap] .single-stage{scroll-snap-align:start;scroll-snap-stop:always}
html[data-app-snap] .single-stage>.app-header{scroll-snap-align:none}
html[data-app-snap] .theme-b .app-header,html[data-app-snap] .detail-header{min-height:64px;padding-block:8px}
html[data-app-snap] .theme-b .app-body{padding-top:8px;gap:12px;padding-bottom:0}
html[data-app-snap] .shell .content-region,.detail .content-slot{padding:var(--content-padding)}
html[data-app-snap] .detail-body{padding-top:8px;gap:12px}
.app-stage{min-height:var(--stage-height);padding-top:var(--stage-top);padding-bottom:var(--stage-bottom);display:flex;flex-direction:column;justify-content:center}
.account-top-content{min-height:calc(var(--stage-height) - var(--home-top-offset,88px));display:flex;flex-direction:column}
.account-top-content>h1{margin:0 0 16px}
.account-first-group{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--stage-top);padding-bottom:var(--stage-bottom)}
.account-group.account-first-group,.account-group.account-preferences-content{margin-top:0}
.account-group>h2{margin:0 0 20px}
.template-stage{padding-top:var(--stage-top);padding-bottom:var(--stage-bottom)}
.blank-card{min-height:132px;background:var(--card-background,var(--card));pointer-events:none}
.usual-empty-area{min-height:64px}
.usual-template .btn{margin-top:12px}
html[data-primary-layout] .standalone .shell .app-body{padding-bottom:0}

/* Keep section gestures and keyboard scrolling without visible scrollbar chrome. */
html[data-clean-scroll]{scrollbar-width:none;-ms-overflow-style:none}
html[data-clean-scroll]::-webkit-scrollbar{display:none;width:0;height:0}
.primary-empty-area{min-height:160px}

/* Six Home-sized empty cards per primary stage: two columns, three rows. */
.primary-card-stage .blank-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.primary-card-stage .blank-card{min-height:132px;padding:20px}
.primary-first-stage{display:flex;flex-direction:column;justify-content:center;padding-top:16px;padding-bottom:var(--stage-bottom)}

/* Reserve Home's text and icon space without displaying an assistant elsewhere. */
.companion-region p{position:relative}
.context-size-reference{visibility:hidden;display:block}
.context-page-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@media(max-width:380px){.primary-card-stage .blank-template-grid{gap:10px}.primary-card-stage .blank-card{padding:14px}}

.companion-region{position:relative}.cie-size-spacer{width:36px;height:36px;flex:none}.companion-region:has(.context-page-name) p{position:static}

html[data-primary-layout] .primary-first-stage{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--home-top-offset,160px)}

/* Browse is one padded category page; child pages and saved areas share larger cards. */
.primary-single-stage{min-height:calc(100svh - var(--home-top-offset,160px))}
.browse-template-grid,.large-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.browse-template-card{min-height:132px}
.large-template-card{min-height:168px;aspect-ratio:4/5}
@media(max-width:380px){.browse-template-grid,.large-template-grid{gap:10px}}

/* Child categories retain primary-shell widths and shared padded snap stages. */
.category-stage{scroll-snap-align:start;scroll-snap-stop:always}
.category-first-stage{min-height:calc(100svh - 88px);scroll-margin-top:88px}
.category-shell .large-template-card{aspect-ratio:auto;min-height:168px}
.category-shell .app-header .btn a2v-icon{width:20px;height:20px}

/* Consistent card-shaped Back controls across primary and detail pages. */
:root{--navigation-card-radius:16px}
.category-shell .app-header .btn,.page.detail .back{border-radius:var(--navigation-card-radius)}


/* Three primary navigation pages share one viewport and identical card geometry. */






html[data-nav-page] .blank-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
html[data-nav-page] .blank-card{min-height:132px}
@media(max-width:380px){html[data-nav-page] .blank-template-grid{gap:10px}}

/* Align root navigation tiles with Home's second-area starting level. */




/* Use the same centred-stage calculation and grid geometry as Home navigation. */



/* Page identity moves into the header; one uninterrupted content panel remains. */


html[data-nav-page] .review-label,.category-shell .review-label{font-size:12px;text-transform:none;letter-spacing:.03em}
.category-shell .app-body{gap:0}

/* Unboxed, accessible back chevron; common compact header and panel start. */
.category-shell .icon-back{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--icon-fg);padding:10px;border-radius:16px}
.category-shell .icon-back a2v-icon{width:24px;height:24px;transform:rotate(180deg)}
.category-shell .app-header{height:64px;min-height:64px;box-sizing:border-box}

/* Centre primary page titles independently of the logo and basket widths. */
html[data-nav-page] .app-header{position:relative}
html[data-nav-page] .app-header .review-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;white-space:nowrap;pointer-events:none}


/* AC01: retain approved stage alignment, with intrinsic height and reachable overflow. */
html[data-nav-page]{overflow-y:auto;scroll-snap-type:none}
html[data-nav-page] body{min-height:100svh;height:auto;overflow:visible}
html[data-nav-page] .shell{min-height:100svh;height:auto}
html[data-nav-page] .app-body{min-height:0;flex:1;padding-top:8px;gap:0}
html[data-nav-page] .content-region{min-height:0;overflow:visible}
html[data-nav-page] .primary-single-stage{min-height:calc(100svh - 100px);height:auto;justify-content:flex-start;padding-top:0;padding-bottom:var(--stage-bottom);margin-top:0}
html[data-nav-page] .primary-single-stage>.grid{margin-top:max(0px,calc((100svh + var(--stage-top) - var(--stage-bottom) - var(--nav-grid-height,274px))/2 - var(--nav-stage-offset,85px)))}
@media(max-height:600px){html[data-app-snap]{scroll-snap-type:y proximity}}
.grid .tile strong{overflow-wrap:anywhere}
.nav-item{white-space:normal;min-width:0;overflow-wrap:anywhere}
.skip:not(:focus){top:0;transform:translateY(calc(-100% - 20px))}
.skip:focus{transform:none}

/* AC03: route focus stays semantic; native main focus decoration is not a card border. Interactive keyboard focus remains unchanged. */
main[tabindex="-1"]:focus{outline:none}
.splash-review.dark,.splash-review.dark iframe{background:#1f1f1f}

/* AC06: background continuity before/during direct splash insertion; no animation changes. */
.splash-review.dark{background:linear-gradient(155deg,#1f1f1f,#000)}
.splash-review:not(.dark){background:linear-gradient(155deg,#fff,#f8f5ec)}

/* AC07: user-approved full-display navigation and persistent page headers.
   Kept outside locked foundations; intrinsic header height supports larger text. */
.standalone .shell .bottom-nav{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;margin:0;border-radius:0;border-inline:0;border-bottom:0;padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom));background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.standalone .theme-b-dark .bottom-nav{background:rgba(0,0,0,.86)}
.bottom-nav::before{inset:-26px 0 0;border-radius:0}
html[data-persistent-header] .app-header,html[data-persistent-header] .detail-header{position:sticky;top:0;z-index:6;max-width:none;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding-top:max(8px,env(safe-area-inset-top))}
html[data-persistent-header] .theme-b-dark .app-header,html[data-persistent-header] .dark .detail-header{background:rgba(31,31,31,.94)}
html[data-persistent-header]{scroll-padding-top:calc(80px + env(safe-area-inset-top))}

/* AC08: stable content snap anchors, independent of sticky header movement.
   A stage fits the snapport; enlarged content can still grow and scroll. */
html[data-review-page="home"],html[data-review-page="account"]{scroll-padding-top:0;overscroll-behavior-y:contain}
html[data-review-page="home"] .app-header,html[data-review-page="account"] .app-header{scroll-snap-align:none}
.home-top-content,.account-top-content{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--home-top-offset,160px)}
html[data-review-page="home"] .home-navigation-content,html[data-review-page="home"] .home-guidance-content{min-height:calc(100svh - var(--persistent-header-height,64px));scroll-margin-top:var(--persistent-header-height,64px)}
html[data-persistent-header] .app-header,html[data-persistent-header] .detail-header{background:rgba(255,255,255,.86)}
html[data-persistent-header] .theme-b-dark .app-header,html[data-persistent-header] .dark .detail-header{background:rgba(0,0,0,.86)}
@media(prefers-reduced-motion:reduce){html[data-app-snap]{scroll-snap-type:none}}

/* AC09: viewport-fixed chrome, translucent blur and continuous safe-area paint. */
html[data-persistent-header] .shell,html[data-persistent-header] .page.detail{padding-top:var(--persistent-header-height,64px)}
html[data-persistent-header] .app-header,html[data-persistent-header] .detail-header{position:fixed;inset:0 0 auto;width:100%;margin:0;z-index:6;padding-top:calc(8px + env(safe-area-inset-top));background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
html[data-persistent-header] .category-shell .app-header{height:auto;min-height:calc(64px + env(safe-area-inset-top))}
html[data-persistent-header] .theme-b-dark .app-header,html[data-persistent-header] .dark .detail-header{background:rgba(0,0,0,.64)}
.standalone .shell .bottom-nav{background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.standalone .theme-b-dark .bottom-nav{background:rgba(0,0,0,.64)}
.bottom-nav::before{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.theme-b-dark .bottom-nav::before{background:none}
html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]){background-image:none!important;background-color:#f8f5ec!important}
html[data-review-page][data-display="dark"]:not([data-review-page="splash"]):not([data-review-page="splash-next"]){background-color:#000!important}

/* AC10: scroll content independently of viewport chrome. Root canvas cannot bounce. */
html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]){height:100%;overflow:hidden;scroll-snap-type:none;overscroll-behavior:none}
html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]) body{position:fixed;inset:0;height:100%;min-height:0;overflow:hidden;background:#f8f5ec}
html[data-review-page][data-display="dark"]:not([data-review-page="splash"]):not([data-review-page="splash-next"]) body{background:#000}
html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]) #app{height:100%;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scrollbar-width:none}
#app::-webkit-scrollbar{display:none}
html[data-app-snap] #app{scroll-snap-type:y mandatory}
html[data-nav-page] #app{scroll-snap-type:none}
html[data-review-page="account"] #app{scroll-padding-top:0}
#viewport-chrome.shell,#viewport-chrome.page.detail{display:contents;padding:0;min-height:0;background:none;isolation:auto}
#viewport-chrome .app-header,#viewport-chrome .detail-header{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#viewport-chrome.theme-b-dark .app-header,#viewport-chrome.dark .detail-header{background:rgba(0,0,0,.5)}
@media(max-height:600px){html[data-app-snap] #app{scroll-snap-type:y proximity}}
@media(prefers-reduced-motion:reduce){html[data-app-snap] #app{scroll-snap-type:none}}

/* AC11: dark canvas is continuous through shell, scroll bounds and safe areas. */
html[data-display="dark"] .shell.theme-b-dark,html[data-display="dark"] .page.dark{background:#000}
html[data-display="dark"] #app{background:#000}
html[data-review-page]:not([data-review-page="splash"])[data-display="dark"] body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top);background:#000;z-index:7;pointer-events:none}
html[data-review-page]:not([data-review-page="splash"])[data-display="light"] body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top);background:#fff;z-index:7;pointer-events:none}
html[data-review-page="home"] #app,html[data-review-page="account"] #app{overscroll-behavior-y:none}

/* AC12: charcoal belongs to the designed frame, black to the edge/safe canvas.
   Use a real viewport layer rather than display:contents for WebKit chrome. */
html[data-display="dark"] #app>.shell.theme-b-dark,html[data-display="dark"] #app>.page.dark{background:linear-gradient(155deg,#1f1f1f,#000)}
#viewport-chrome.shell,#viewport-chrome.page.detail{display:block;position:fixed;inset:0;z-index:6;width:100%;height:100%;min-height:0;padding:0;margin:0;background:transparent;pointer-events:none;isolation:auto}
#viewport-chrome .app-header,#viewport-chrome .detail-header{position:absolute;top:env(safe-area-inset-top);left:0;right:0;padding-top:8px;padding-bottom:8px;min-height:64px;pointer-events:auto}
#viewport-chrome .bottom-nav{position:absolute;left:0;right:0;bottom:0;transform:none;pointer-events:auto;min-height:76px;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
html[data-persistent-header] #app>.shell,html[data-persistent-header] #app>.page.detail{padding-top:calc(var(--persistent-header-height,64px) + env(safe-area-inset-top))}
html[data-nav-page] #app>.shell{min-height:100dvh}
html[data-nav-page] .app-body{margin-bottom:0}
html[data-nav-page] .primary-single-stage{min-height:calc(100dvh - var(--persistent-header-height,64px) - env(safe-area-inset-top) - 42px)}

html[data-review-page="account"] #app>.shell{padding-top:env(safe-area-inset-top)}

/* AC13: unify the native standalone canvas and feather chrome edges. */
html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]),html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]) body,html[data-review-page]:not([data-review-page="splash"]):not([data-review-page="splash-next"]) #app,#viewport-chrome.shell,#viewport-chrome.page.detail{height:var(--app-viewport-height,100dvh)!important}
#viewport-chrome .app-header,#viewport-chrome .detail-header,#viewport-chrome .bottom-nav{isolation:isolate}
#viewport-chrome .app-header::after,#viewport-chrome .detail-header::after{content:"";position:absolute;inset:100% 0 auto;height:24px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,0));-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
#viewport-chrome.theme-b-dark .app-header::after,#viewport-chrome.dark .detail-header::after{background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent)}
#viewport-chrome .bottom-nav::before{content:"";position:absolute;inset:-24px 0 auto;height:24px;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(255,255,255,.64),transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
#viewport-chrome.theme-b-dark .bottom-nav::before{background:linear-gradient(to top,rgba(0,0,0,.64),transparent)}
html[data-nav-page] #app>.shell{min-height:var(--app-viewport-height,100dvh)!important}
html[data-nav-page] .primary-single-stage{min-height:calc(var(--app-viewport-height,100dvh) - var(--persistent-header-height,64px) - env(safe-area-inset-top) - 42px)}


/* AC14: splash retains its pre-AC13 viewport and direct-render animation path.
   Main-page alignment uses one common anchor instead of mixed svh/dvh maths. */
.splash-review{height:100svh;min-height:0}
html[data-review-page="splash"] #app{height:auto;min-height:0;background:transparent}
html[data-review-page="home"] .home-navigation-content,html[data-review-page="home"] .home-guidance-content{box-sizing:border-box;min-height:calc(var(--app-viewport-height,100dvh) - var(--aligned-header-bottom,64px));padding-top:calc(var(--aligned-card-top,260px) - var(--aligned-header-bottom,64px));padding-bottom:var(--navigation-height,118px);justify-content:flex-start;scroll-margin-top:var(--aligned-header-bottom,64px)}
html[data-nav-page] .primary-single-stage>.grid{margin-top:var(--aligned-grid-gap,0px)}

/* AC15: P2 is the reusable panel rule. Centre the whole placement group in
   the visible content box, excluding the overlaid nav; grow for larger text. */
html[data-nav-page] .primary-single-stage{min-height:calc(var(--layout-stage-height,calc(100dvh - 72px)) - 34px);padding:0 0 var(--navigation-height,84px);margin:0;justify-content:center}
html[data-nav-page] .primary-single-stage>.grid{margin-top:0}
html[data-review-page="home"] .app-body>.content-region{padding:0;border:0;background:transparent;border-radius:0}
html[data-review-page="home"] .home-top-content{padding:16px;border:1px solid var(--card-outline);border-radius:24px;background:var(--card-background)}
html[data-review-page="home"] .home-navigation-content,html[data-review-page="home"] .home-guidance-content{min-height:var(--layout-stage-height,calc(100dvh - 72px));padding:16px 16px calc(16px + var(--navigation-height,84px));border:1px solid var(--card-outline);border-radius:24px;background:var(--card-background);justify-content:center;scroll-margin-top:var(--layout-panel-top,72px);scroll-snap-align:start;scroll-snap-stop:always}
html[data-review-page="home"] .home-guidance-content>.hero{width:100%}

 #app{scroll-padding-top:var(--persistent-header-height,64px)}
/* AC16: Home retains one continuous surface. Inset the snapport rather than
   enlarging each snap area with scroll-margin (which permitted offset landings). */
html[data-review-page="home"] .app-body>.content-region{padding:16px;border:1px solid var(--card-outline);border-radius:24px;background:var(--card-background)}
html[data-review-page="home"] .home-top-content{padding:0;border:0;border-radius:0;background:transparent;scroll-margin-top:max(0px,calc(var(--home-top-offset,160px) - var(--layout-panel-top,72px) - 17px))}
html[data-review-page="home"] #app{scroll-padding-top:calc(var(--layout-panel-top,72px) + 17px)}
html[data-review-page="home"] .home-navigation-content,html[data-review-page="home"] .home-guidance-content{min-height:calc(var(--layout-stage-height,calc(100dvh - 72px)) - 34px);padding:0 0 var(--navigation-height,84px);border:0;border-radius:0;background:transparent;justify-content:center;scroll-margin:0;scroll-snap-align:start;scroll-snap-stop:always}


/* AC17: first-row alignment follows P2; extra Advice text grows downwards. */
html[data-review-page="home"] .home-navigation-content>.grid{transform:translateY(var(--home-row-adjust,0px))}

/* AC18: overscan background paint only; splash stage/animation sizing unchanged. */
html[data-review-page="splash"],html[data-review-page="splash"] body{min-height:var(--launch-paint-height,100vh)}
html[data-review-page="splash"] body::after{content:"";position:fixed;top:calc(-1 * env(safe-area-inset-top));left:0;width:100%;height:calc(var(--launch-paint-height,100vh) + env(safe-area-inset-top) + env(safe-area-inset-bottom));background:#f8f5ec;pointer-events:none;z-index:0}
html[data-review-page="splash"][data-display="dark"] body::after{background:#000}
html[data-review-page="splash"] .splash-review{position:relative;z-index:1}

/* AC19: installation instructions use ordinary scrolling, never staged snapping. */
html[data-review-page="install"] #app,html[data-review-page="install-first"] #app{scroll-snap-type:none;scroll-padding:0;overscroll-behavior:none}
.onboarding-page,.onboarding-page .detail-header,.onboarding-page .detail-body{scroll-snap-align:none;scroll-snap-stop:normal}

/* AC25 shared sizing: parent rows are equal; child rows use one larger size. */
:root{--parent-card-height:max(144px,9rem);--child-card-height:clamp(156px,18vh,176px)}
.home-nav-grid>.tile,.account-grid>.tile{box-sizing:border-box;height:var(--parent-card-height);min-height:var(--parent-card-height);aspect-ratio:auto;padding:16px;gap:8px}
.home-nav-grid,.account-grid{grid-auto-rows:var(--parent-card-height);align-items:stretch}
.large-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--child-card-height);align-content:center}
.large-template-grid>.large-template-card,.category-shell .large-template-card{box-sizing:border-box;height:var(--child-card-height);min-height:var(--child-card-height);aspect-ratio:auto}
.category-stage{height:auto;min-height:calc(var(--layout-stage-height,700px) - 34px);padding-bottom:calc(16px + var(--navigation-height,84px));justify-content:center}
.browse-search{position:absolute;top:calc(env(safe-area-inset-top) + 72px);left:22px;right:22px;z-index:4;box-sizing:border-box;justify-content:flex-start;text-align:left;padding:12px 16px;border-radius:18px;background:var(--card-background,#fff);border:1px solid var(--card-outline,#ddd);min-height:54px}
.browse-search label{display:grid;place-items:center;cursor:text}.browse-search input[type=search]{border:0;background:transparent;border-radius:4px;padding:0;min-height:30px;min-width:0;flex:1;width:auto;font-size:14px;color:inherit}.browse-search a2v-icon{width:30px;height:30px;flex-shrink:0}.search-result-status{position:absolute;top:100%;left:16px;font-size:12px}.search-unmatched{visibility:hidden}
@media(max-height:600px){.category-stage{min-height:0;padding-top:20px}.browse-search{position:relative;inset:auto;margin:0 22px 12px}.large-template-grid{align-content:start}}
@media(min-width:1000px) and (max-height:700px){.large-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:300px){.large-template-grid{grid-template-columns:1fr}}

/* AC26: distinct search and content surfaces, with the shared grid anchor retained. */
html[data-review-page="browse"] .app-body{gap:12px}
html[data-review-page="browse"] .browse-search{position:relative;inset:auto;margin:0;width:100%;min-height:56px;flex-shrink:0;padding:8px 12px}
html[data-review-page="browse"] .browse-search input[type=search]{font-size:max(16px,1rem);line-height:1.5}
html[data-review-page="browse"] .primary-single-stage{box-sizing:border-box;justify-content:flex-start;min-height:calc(var(--layout-stage-height,824px) - 34px - var(--browse-bar-space,68px));padding-top:max(16px,calc((var(--layout-stage-height,824px) - 34px - var(--navigation-height,84px) - var(--nav-grid-height,302px))/2 - var(--browse-bar-space,68px)))}
html[data-keyboard-open] #viewport-chrome .bottom-nav{visibility:hidden;pointer-events:none}
html[data-launch-mode="standalone"]{touch-action:pan-x pan-y}

/* AC27 child layout: one top-aligned eight-tile page; no entry snap offset. */
.category-shell{--child-card-height:clamp(112px,calc((var(--layout-stage-height,824px) - 34px - var(--navigation-height,84px) - 32px - 42px)/4),180px)}
.category-shell .category-stage{display:block;height:auto;min-height:0;padding:0;margin:0;scroll-margin:0;scroll-snap-align:none}
.category-shell .large-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--child-card-height);align-content:start;gap:14px;margin:0}
.category-shell .large-template-card{padding:16px;gap:8px}
.category-shell .content-region{padding:16px;min-height:calc(var(--layout-stage-height,824px) - var(--navigation-height,84px));box-sizing:border-box}
.category-shell .app-body{padding-bottom:calc(16px + var(--navigation-height,84px))}
.subchild-preview{padding:0}.subchild-preview h1{margin-top:8px}.subchild-placeholder{height:clamp(180px,40vh,420px);border:1px solid var(--card-outline);border-radius:16px;margin-top:24px}
@media(max-width:300px){.category-shell .large-template-grid{grid-template-columns:1fr}}
@media(min-width:1000px) and (max-height:600px){.category-shell .large-template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

:root{--child-card-height:clamp(112px,calc((var(--layout-stage-height,824px) - 34px - var(--navigation-height,84px) - 32px - 42px)/4),180px)}
.large-template-grid{align-content:start}

/* AC28 restores three child snap areas without changing the accepted grid inset. */
html[data-child-snap][data-app-snap] #app{scroll-padding-top:calc(var(--layout-panel-top,72px) + 17px);scroll-snap-type:y mandatory}
html[data-child-snap] .category-shell .category-stage{box-sizing:border-box;min-height:calc(var(--layout-stage-height,824px) - 34px);padding:0 0 var(--navigation-height,84px);scroll-snap-align:start;scroll-snap-stop:always;scroll-margin:0}
@media(max-height:600px){html[data-child-snap][data-app-snap] #app{scroll-snap-type:y proximity}}
@media(prefers-reduced-motion:reduce){html[data-child-snap][data-app-snap] #app{scroll-snap-type:none}}

/* AC34: dark-mode handoff keeps the approved light entrance, then transitions
   the full stage and logo variant after the 4.6s logo-settle animation. */
.splash-logo-dark{display:none}
.dark-handoff .page.splash::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(155deg,#1f1f1f,#000);opacity:0;animation:a2v-dark-background .95s ease 4.6s forwards}
.dark-handoff .page.splash .entrance{position:relative;z-index:1}
.dark-handoff .brand-final{display:grid}
.dark-handoff .brand-final>.splash-logo{grid-area:1/1}
.dark-handoff .brand-final>.splash-logo-light{animation:a2v-logo-out .95s ease 4.6s forwards}
.dark-handoff .brand-final>.splash-logo-dark{display:block;opacity:0;animation:a2v-logo-in .95s ease 4.6s forwards}
.dark-handoff .page.splash .tagline{animation:delivery-tagline 4.6s ease both,a2v-tagline-handoff .95s ease 4.6s forwards}
@keyframes a2v-dark-background{to{opacity:1}}
@keyframes a2v-logo-out{to{opacity:0}}
@keyframes a2v-logo-in{to{opacity:1}}
@keyframes a2v-tagline-handoff{from{color:#1b5e20}to{color:#d7c7a3}}
@media(prefers-reduced-motion:reduce){.dark-handoff .page.splash::before{opacity:1;animation:none}.dark-handoff .brand-final>.splash-logo-light{opacity:0;animation:none}.dark-handoff .brand-final>.splash-logo-dark{opacity:1;animation:none}.dark-handoff .page.splash .tagline{color:#d7c7a3;animation:none;opacity:1;transform:none}}
/* AC35: carry the dark handoff across the entire launch paint area, including
   iOS safe-area overscan below the animation stage. Keep all approved art above it. */
html[data-review-page="splash"] body.dark-splash-handoff::before{content:"";position:fixed;top:calc(-1 * env(safe-area-inset-top));left:0;width:100%;height:calc(var(--launch-paint-height,100vh) + env(safe-area-inset-top) + env(safe-area-inset-bottom));z-index:1;pointer-events:none;background:linear-gradient(155deg,#1f1f1f,#000);opacity:0;animation:a2v-dark-background .95s ease 4.6s forwards}
html[data-review-page="splash"] body.dark-splash-handoff #app{position:relative;z-index:2;background:transparent}
.dark-splash-handoff .splash-review,.dark-splash-handoff .page.splash{background:transparent}
.dark-splash-handoff .page.splash::before{content:none;animation:none}
@media(prefers-reduced-motion:reduce){html[data-review-page="splash"] body.dark-splash-handoff::before{opacity:1;animation:none}}