/* Shared postcard language. Every interface color follows the selected palette. */
:root{--paper-glass:color-mix(in srgb,var(--surface) 93%,transparent);--card-shadow:0 6px 24px color-mix(in srgb,var(--hero) 8%,transparent);--scene-width:min(100vw,820px)}
html{background:var(--cream)}
body{position:relative;isolation:isolate;min-height:100svh;background:var(--cream);color:var(--ink)}
.app-scenery{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--cream) url('assets/brand/crevard-alpine-backdrop.png') center top/var(--scene-width) auto no-repeat;background-blend-mode:multiply;opacity:.18}
.app-scenery:after{content:"";position:absolute;inset:auto 0 0;height:30%;background:var(--cream) url('assets/brand/crevard-alpine-backdrop.png') center bottom/var(--scene-width) auto no-repeat;background-blend-mode:multiply;mask-image:linear-gradient(transparent,#000 45%)}
.at-home .app-scenery{opacity:1}
.topbar,.at-home .topbar{background:color-mix(in srgb,var(--cream) 84%,transparent);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.at-home .topbar{background:transparent}
.topbar .brand,.header-actions{color:var(--ink)}
.brand-dot{color:var(--accent)}.brand-dot:after{display:none}
.topbar .area-trigger,.topbar .appearance-trigger,.topbar .header-history{background:var(--paper-glass);border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 10px var(--shadow)}
.topbar .nav.active{background:var(--accent);color:var(--ink)}
.shell{padding-bottom:110px}
.at-home .shell{max-width:920px;padding-top:0}
.at-home .page-footer{display:none}
.home-view.home-compact{position:relative;max-width:640px;gap:14px;padding:0 0 24px}
.postcard-hero{position:relative;height:calc(688px - 80px);max-height:58vw;margin:0}
.home-compact .postcard-hero .home-greeting{position:absolute;left:0;top:18px;margin:0;max-width:95%;font-size:clamp(34px,5.2vw,50px);line-height:1.03;font-weight:800;letter-spacing:-1.8px;color:var(--ink);text-wrap:initial}
.home-compact .home-greeting:after{content:"";display:inline-block;width:7px;height:20px;border-radius:6px;background:var(--accent);transform:rotate(30deg);margin:0 0 2px 9px;box-shadow:12px 4px 0 -1px var(--accent)}
.postcard-actions{display:grid;gap:12px;position:relative}
.home-view .postcard-scan{display:flex;align-items:center;gap:16px;width:100%;min-height:80px;padding:17px 21px;border:1px solid color-mix(in srgb,var(--on-hero) 20%,transparent);border-radius:26px;background:linear-gradient(115deg,color-mix(in srgb,var(--hero) 80%,var(--focus)),var(--hero));color:var(--on-hero);text-align:left;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-hero) 18%,transparent),0 8px 20px color-mix(in srgb,var(--hero) 18%,transparent);font-family:Manrope,sans-serif;font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.65px}
.postcard-scan>span:nth-child(2){flex:1}
.postcard-scan-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;border:1px solid color-mix(in srgb,var(--on-hero) 28%,transparent);background:color-mix(in srgb,var(--on-hero) 8%,transparent)}
.home-view .postcard-scan-icon .home-icon{width:27px;height:27px;stroke-width:1.8}
.postcard-next{display:grid;place-items:center;background:var(--accent);color:var(--ink);width:44px;height:44px;border-radius:50%;flex:none;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-hero) 40%,transparent)}
.home-view .postcard-next .home-icon{width:24px;height:24px}
.postcard-secondary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-view .postcard-secondary button{display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;background:var(--paper-glass);border:1px solid var(--line);border-radius:20px;padding:14px 16px;color:var(--ink);box-shadow:var(--card-shadow);text-align:left;font-size:14px;font-weight:750;line-height:1.3}
.home-view .postcard-secondary button>.home-icon:first-child{width:37px;height:37px;padding:8px;background:var(--accent-soft);color:var(--focus);border-radius:50%;flex:none}.postcard-secondary button>span{flex:1;min-width:0}.postcard-secondary small{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--muted)}.home-view .postcard-secondary button>.home-icon:last-child{width:14px;height:14px;flex:none}
.home-compact .home-recent{margin:0}.home-compact .home-receipt,.home-compact .home-history-shortcut{background:var(--paper-glass);border:1px solid var(--line);border-radius:20px;padding:14px 16px;color:var(--ink);box-shadow:var(--card-shadow)}
/* Lists, comparison, tickets and dialogs share the same paper, shape and depth. */
.shopping-store,.tickets-item,.flow-card.photo-comparison.coop-product,.replacement-card,.summary-card,.queue-card,.receipt-row-group,.receipt-review-row,.product-capture-summary,.tickets-empty{background:var(--paper-glass);border:1px solid var(--line);border-radius:22px;box-shadow:var(--card-shadow)}
.shopping-store>summary,.tickets-heading,.shopping-heading,.flow-heading{color:var(--ink)}
.shopping-store-picker button,.shopping-group-tabs button,.shopping-add-product,.shopping-add-actions button,.comparison-filters button{border-radius:15px;color:var(--ink)}
.shopping-store-picker button[aria-pressed="true"],.shopping-group-tabs button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-border);color:var(--ink)}
.button.primary,.tickets-open,.shopping-show-stores,.home-draft-button{background:linear-gradient(115deg,color-mix(in srgb,var(--hero) 82%,var(--focus)),var(--hero));color:var(--on-hero);border:1px solid var(--line-on-hero);border-radius:16px;box-shadow:0 4px 14px var(--shadow)}
.button.secondary,.shopping-add-product,.tickets-backup,.shopping-backup{background:var(--paper-glass);border-color:var(--line);border-radius:16px}
.shopping-savings-total,.tradeoff,.product-capture-summary{background:var(--accent-soft);color:var(--ink);border-color:var(--accent-border)}
dialog,.modal-head,.modal-body,.import-modal .modal-head,.import-modal .modal-body{background:var(--surface);color:var(--ink)}
dialog{border-color:var(--line);box-shadow:0 20px 80px color-mix(in srgb,var(--hero) 25%,transparent)}
dialog::backdrop{background:color-mix(in srgb,var(--hero) 32%,transparent);backdrop-filter:blur(5px)}
.theme-choice[aria-pressed="true"]{outline:2px solid var(--focus);outline-offset:2px;background:var(--accent-soft)}
@media(hover:hover){.home-view .postcard-scan:hover{background:var(--green-dark)}.home-view .postcard-secondary button:hover{background:var(--accent-soft)}}
@media(prefers-reduced-motion:no-preference){.postcard-next{transition:transform .18s}.postcard-scan:hover .postcard-next{transform:translateX(2px)}}
@media(max-width:680px){
:root{--scene-width:100vw}
.topbar,.at-home .topbar{height:68px;min-height:68px;padding:10px 14px;gap:8px;position:relative}.topbar .brand{font-size:24px}.topbar .brand-mascot{width:34px;height:34px}.topbar .header-actions{gap:5px}.topbar .area-trigger{max-width:98px;min-height:40px;padding:8px}.topbar .appearance-trigger,.topbar .header-history{width:38px;height:40px;min-height:40px;padding:9px}
.shell,.at-home .shell{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}.at-home .shell{max-width:540px;padding-left:22px;padding-right:22px}
.home-view.home-compact{gap:12px;padding-bottom:20px}.postcard-hero{height:clamp(200px,calc(84vw - 68px),386px);max-height:none}
.home-compact .postcard-hero .home-greeting{top:9px;font-size:clamp(30px,8.3vw,42px);letter-spacing:-1.5px;max-width:100%}
.postcard-actions{gap:11px}.home-view .postcard-scan{font-size:20px;min-height:74px;padding:15px 16px;gap:12px;border-radius:24px;letter-spacing:-.5px}.postcard-scan-icon{width:38px;height:40px;border-radius:12px}.home-view .postcard-scan-icon .home-icon{width:25px;height:25px}.postcard-next{width:38px;height:38px}
.postcard-secondary{gap:10px}.home-view .postcard-secondary button{min-height:68px;padding:12px 10px;gap:8px;font-size:12px;line-height:1.3;border-radius:19px}.home-view .postcard-secondary button>.home-icon:first-child{width:33px;height:33px;padding:7px}.home-view .postcard-secondary button>.home-icon:last-child{display:none}.postcard-secondary small{font-size:10px}
.home-compact .home-history-shortcut,.home-compact .home-receipt{min-height:54px;padding:12px}
.topbar nav{left:16px;right:16px;height:58px;padding:4px;border:1px solid var(--line);border-radius:30px;bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper-glass);box-shadow:0 5px 20px var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.topbar .nav{min-height:48px;border-radius:25px;color:var(--muted)}.topbar .nav.active{background:var(--accent);color:var(--ink)}
}
@media(max-width:360px){.topbar .brand{font-size:21px}.topbar .brand-mascot{width:29px;height:29px}.topbar .area-trigger{max-width:84px}.topbar .header-actions{gap:3px}.home-view .postcard-scan{font-size:18px;gap:9px}.postcard-next{width:34px;height:34px}.home-view .postcard-secondary button{font-size:11px;gap:6px}.home-compact .home-greeting:after{display:none}}
@media(forced-colors:active){.app-scenery{display:none}.home-view .postcard-scan,.home-view .postcard-secondary button,.topbar nav{border:1px solid ButtonText}}
/* A larger, proportional scene scrolls naturally with the home content. */
@media(max-width:680px){
 html:has(body.at-home){overflow-x:clip;overflow-y:auto}
 body.at-home{height:auto;min-height:100svh;overflow-x:clip;overflow-y:visible;display:block}
 .at-home .topbar{height:calc(64px + env(safe-area-inset-top,0px));min-height:64px;padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:8px}
 .at-home .shell{width:100%;margin:0 auto;padding:0 20px calc(90px + env(safe-area-inset-bottom,0px))}
 .at-home .home-view.home-compact{width:100%;max-width:none;margin:0;padding:0;gap:12px}
 .at-home .postcard-hero{height:calc(118vw - 64px - env(safe-area-inset-top,0px));min-height:240px;max-height:600px;aspect-ratio:auto}
 .at-home .app-scenery{position:absolute;inset:0;background-size:140% auto;background-position:center top}
 .at-home .app-scenery:after{display:block;height:24%;background-size:140% auto}
 .at-home .topbar nav{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
/* Continuous safe-area paint and restrained glass, with opaque fallback. */
@media(max-width:680px){
 html:has(body.at-home){background:var(--cream) url('assets/brand/crevard-alpine-backdrop.png') center bottom/140% auto fixed no-repeat;overscroll-behavior-y:none}
 body.at-home{min-height:100lvh;overscroll-behavior-y:none}
 .at-home .app-scenery{top:-2px;bottom:calc(-2px - env(safe-area-inset-bottom,0px));background-position:center 2px}
 body.modal-open{overflow:hidden!important}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .topbar .area-trigger,.topbar .appearance-trigger,.topbar .header-history,
 .home-view .postcard-secondary button,.home-compact .home-receipt,.home-compact .home-history-shortcut,
 .topbar nav{background:color-mix(in srgb,var(--surface) 73%,transparent);backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);border:1px solid color-mix(in srgb,var(--surface) 75%,var(--line));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 85%,transparent),0 6px 20px var(--shadow)}
 .home-view .postcard-scan{background:linear-gradient(120deg,color-mix(in srgb,var(--hero) 88%,transparent),color-mix(in srgb,var(--hero) 79%,transparent));backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);border-color:color-mix(in srgb,var(--on-hero) 32%,transparent)}
}
@media(prefers-reduced-transparency:reduce){
 .topbar .area-trigger,.topbar .appearance-trigger,.topbar .header-history,.home-view .postcard-secondary button,.home-compact .home-receipt,.home-compact .home-history-shortcut,.topbar nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
 .home-view .postcard-scan{background:var(--hero);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Fit the home to the viewport, while allowing natural document scrolling. */
@media(max-width:680px){
 html:has(body.at-home){height:100%;overflow-x:clip;overflow-y:auto;overscroll-behavior-y:auto;background:var(--cream) url('assets/brand/crevard-alpine-backdrop.png') 62% top/cover fixed no-repeat}
 body.at-home{height:auto;min-height:100dvh;overflow-x:clip;overflow-y:visible;overscroll-behavior-y:auto;display:flex;flex-direction:column}
 .at-home .topbar{flex:none;height:calc(60px + env(safe-area-inset-top,0px));min-height:0;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
 .at-home .shell{display:flex;flex-direction:column;flex:1;min-height:auto;margin:0 auto;padding:0 20px calc(78px + env(safe-area-inset-bottom,0px))}
 .at-home .home-view.home-compact{display:flex;flex-direction:column;flex:1;min-height:auto;gap:10px;padding:0}
 .at-home .postcard-hero{flex:1;min-height:94px;height:auto;max-height:none}
 .at-home .postcard-actions,.at-home .home-recent,.at-home .home-history-shortcut,.at-home .home-draft{flex:none}
 .at-home .postcard-actions{gap:10px}
 .at-home .home-view .postcard-scan{min-height:64px;padding:12px 16px}
 .at-home .home-view .postcard-secondary button{min-height:60px;padding:10px}
 .at-home .home-compact .home-receipt,.at-home .home-compact .home-history-shortcut{min-height:48px;padding:10px 12px}
 .at-home .app-scenery{position:fixed;inset:0 0 calc(-1 * env(safe-area-inset-bottom,0px));background-position:62% top;background-size:cover}
 .at-home .app-scenery:after{display:none}
 .at-home .home-compact .postcard-hero .home-greeting{top:8px}
}
@media(max-width:680px) and (max-height:480px){
 html:has(body.at-home){overflow:auto}body.at-home{height:auto;min-height:100dvh;overflow:auto;display:block}
 .at-home .shell{display:block}.at-home .postcard-hero{min-height:120px}
}

/* Shared iPhone safe areas: every screen clears the status bar and bottom dock. */
@media(max-width:680px){
 html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 body:not(.at-home){min-height:100dvh}
 body:not(.at-home) .topbar{height:calc(60px + env(safe-area-inset-top,0px));min-height:0;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px;background:transparent}
 body:not(.at-home) .shell{width:100%;max-width:540px;padding:20px 18px calc(100px + env(safe-area-inset-bottom,0px))}
 body:not(.at-home) .app-scenery{inset:0 0 calc(-1 * env(safe-area-inset-bottom,0px));background-size:cover;background-position:62% top;opacity:.09}
 body:not(.at-home) .app-scenery:after{display:none}
 body:not(.at-home) .page-footer{margin-top:24px}
 .shopping-view,.tickets-view,.flow-card{min-width:0}
 .shopping-store{scroll-margin-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* Compact secondary information; give priority to products and the next action. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}
.flow-heading.flow-heading-compact{min-height:36px;margin-bottom:8px;justify-content:space-between}
.flow-accept-all{border:0;background:transparent;color:var(--ink);padding:8px 0;font:inherit;font-size:12px;font-weight:700;min-height:36px}
.flow-accept-all:disabled{opacity:.4}
.flow-heading-compact .flow-summary-button{min-height:36px;padding:6px 10px;font-size:11px}
.flow-heading-compact + .flow-scope{position:static;display:flex;justify-content:flex-end;margin:0 0 6px}
.flow-heading-compact ~ .flow-navigation{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px}
.flow-heading-compact ~ .flow-navigation #flowPrevious{min-width:0;font-size:11px;padding:8px}
.flow-heading-compact ~ .flow-navigation #flowNext{min-height:48px;font-size:15px;min-width:0}
@media(max-width:680px){
 .at-home .home-compact .home-receipt{min-height:36px;padding:6px 10px;border-radius:12px;box-shadow:none;background:color-mix(in srgb,var(--surface) 42%,transparent);border-color:transparent}
 .at-home .home-compact .home-receipt-total{font-size:12px}
 .shopping-view .shopping-heading{margin-bottom:8px}
 .shopping-view .shopping-heading>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
 .shopping-view .shopping-heading h1{font-size:20px;letter-spacing:-.5px}
 .shopping-view .shopping-heading h1+p{margin:0;font-size:11px}
 .shopping-view .shopping-group-tabs{padding:3px;border-radius:12px;margin-bottom:8px}
 .shopping-view .shopping-group-tabs button{min-height:34px;padding:6px 10px;font-size:11px}
 .shopping-view .shopping-list-tools{margin-bottom:8px}
 .shopping-view .shopping-savings-total{padding:10px 12px;margin-bottom:10px}
}

.shopping-choice-done{display:block;width:100%;min-height:44px;margin-top:12px}
/* Give the brand more presence and let the illustration breathe. */
@media(min-width:361px) and (max-width:680px){
 .at-home .topbar .brand{font-size:27px;gap:4px;letter-spacing:-1.2px}
 .at-home .topbar .brand-mascot{width:38px;height:38px}
 .at-home .topbar{gap:6px;padding-left:14px;padding-right:12px}
 .at-home .topbar .area-trigger{max-width:90px}
}
@media(max-width:680px){
 .at-home .home-compact .postcard-hero .home-greeting{top:22px;font-size:clamp(28px,7.3vw,36px);line-height:1.08;letter-spacing:-1.2px}
 .at-home .home-view.home-compact{padding-bottom:20px}
 .at-home .home-view .postcard-scan{background:linear-gradient(120deg,color-mix(in srgb,var(--hero) 74%,transparent),color-mix(in srgb,var(--hero) 65%,transparent));border-color:color-mix(in srgb,var(--on-hero) 28%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-hero) 22%,transparent),0 5px 16px color-mix(in srgb,var(--hero) 11%,transparent)}
}
@media(prefers-reduced-transparency:reduce){.at-home .home-view .postcard-scan{background:var(--hero)}}

/* Consistent brand and concise recap across the application. */
@media(min-width:361px) and (max-width:680px){
 body .topbar .brand{font-size:27px;gap:4px;letter-spacing:-1.2px}
 body .topbar .brand-mascot{width:38px;height:38px}
 body .topbar{gap:6px;padding-left:14px;padding-right:12px}
 body .topbar .area-trigger{max-width:90px}
}
.flow-summary .flow-heading h2{font-size:22px;margin:6px 0 0}
.flow-summary .flow-heading{margin-bottom:12px}
.flow-summary .shopping-savings-total{padding:12px 14px;gap:6px;margin-bottom:12px;border-radius:18px}
.flow-summary .shopping-savings-total>strong{font-size:23px}
.flow-summary .savings-breakdown{font-size:11px;padding-top:0;gap:8px}
.flow-summary .savings-breakdown b{font-size:14px}
.flow-summary .shopping-savings-total summary{min-height:28px;padding-top:4px;font-size:10px}
.flow-summary .shopping-next-course{margin:12px 0 16px}
.flow-summary .shopping-next-course .button{min-height:42px;padding:10px 14px;font-size:13px}
.flow-summary .shopping-next-course p{font-size:11px;margin:8px 0}
.flow-summary .recap-stores{gap:9px}
.flow-summary .recap-store{min-height:62px;padding:10px 14px;gap:10px}
.flow-summary .recap-store>span{min-width:0}
.flow-summary .recap-store small{font-size:10px;margin-top:4px}
.flow-summary .recap-store>b{font-size:13px;max-width:54%;text-align:right}
.recap-store .retailer-mini-logo{width:74px;height:23px;object-fit:contain;object-position:left center}
.shopping-store-picker .retailer-mini-logo{width:64px;height:22px;object-fit:contain}