/* Shared presentation layer. Same bytes must be imported by the PWA adapter.
   No studio rules, routing, state or business logic. Namespace inherited: mp-ui. */
@import url("../brand.css");
.mp-ui-app-shell{container-type:inline-size;--mp-ui-page-gutter:18px;color:var(--mp-ui-ink);font-family:var(--mp-ui-font-body)}
.mp-ui-screen-header{padding:calc(14px + env(safe-area-inset-top,0px)) var(--mp-ui-page-gutter) 8px}
.mp-ui-screen-content{padding:10px var(--mp-ui-page-gutter) 20px;scrollbar-width:thin}
.mp-ui-screen-footer{padding:12px var(--mp-ui-page-gutter) calc(12px + env(safe-area-inset-bottom,0px))}
.mp-ui-screen-heading{margin-bottom:24px}
.mp-ui-screen-heading h1{font:700 33px/1.05 var(--mp-ui-font-display);letter-spacing:-.045em;margin:0}
.mp-ui-screen-heading p{font-size:15px;line-height:1.35;margin-top:8px}
.mp-ui-brand .home-a4-brand-image{width:31px;height:31px}
.mp-ui-brand .home-a4-brand-wordmark{font:700 21px/1 var(--mp-ui-font-display);letter-spacing:-.025em}
.mp-ui-brand .home-a4-brand-mark{width:31px;height:31px}
.mp-ui-stack{gap:12px}
.mp-ui-surface{border-color:var(--mp-ui-stroke);box-shadow:none}
.mp-ui-surface--flat{background:var(--mp-ui-surface);border-radius:20px}
.mp-ui-action{min-height:48px;border-radius:var(--mp-ui-action-radius);font-size:14px;font-weight:600;letter-spacing:-.015em;background:var(--mp-ui-action-surface);border-color:var(--mp-ui-action-stroke);color:var(--mp-ui-action-ink);box-shadow:none}
.mp-ui-action--icon{min-height:44px;min-width:44px;width:44px;height:44px;border-radius:12px}
.mp-ui-action--quiet{background:transparent;border-color:transparent;color:var(--mp-ui-action-accent)}
.mp-ui-action--accent,.mp-ui-action--coral{background:var(--mp-ui-action-accent);border-color:var(--mp-ui-action-accent);color:#fff;box-shadow:0 2px 5px rgb(8 127 104 / 12%)}
.mp-ui-action--danger{background:transparent;border-color:transparent;color:var(--mp-ui-danger);box-shadow:none;font-weight:500}
.mp-ui-action[aria-pressed="true"]{background:var(--mp-ui-action-soft);color:var(--mp-ui-action-hover);border-color:#a7d6c3;box-shadow:none}
.mp-ui-action:disabled:not([aria-busy="true"]),.mp-ui-action[aria-disabled="true"]:not([aria-busy="true"]){opacity:1;background:#f4f5f3;border-color:#ebede9;color:#8a918e;box-shadow:none}
.mp-ui-action[aria-busy="true"]{opacity:1;cursor:progress}
.mp-ui-action[aria-busy="true"]::before{content:"";flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mp-ui-busy-turn .75s linear infinite}
.mp-ui-action:focus-visible{outline:2px solid var(--mp-ui-action-accent);outline-offset:3px;box-shadow:0 0 0 4px var(--mp-ui-action-soft)}
@media(hover:hover){.mp-ui-action--accent:not(:disabled):hover,.mp-ui-action--coral:not(:disabled):hover{background:var(--mp-ui-action-hover);border-color:var(--mp-ui-action-hover)}.mp-ui-action--quiet:not(:disabled):hover{background:#f4f8f6}}
@keyframes mp-ui-busy-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mp-ui-action[aria-busy="true"]::before{animation:none}}
.mp-ui-input{min-height:48px;background:var(--mp-ui-surface);border-radius:14px}
.mp-ui-tabs{border-radius:16px;background:var(--mp-ui-mint);padding:4px;gap:2px}
.mp-ui-tab{min-height:44px;font-size:12px;padding:8px;flex:1;border-radius:12px;white-space:normal}
.mp-ui-tab[aria-selected=true]{background:var(--mp-ui-surface);color:var(--mp-ui-green)}
.mp-ui-grid{gap:14px 12px}
.mp-ui-recipe{border-radius:20px;box-shadow:0 3px 9px rgb(68 57 33 / 5%);border:0;overflow:hidden;background:var(--mp-ui-surface)}
.mp-ui-recipe-photo{aspect-ratio:4/3;object-fit:cover;width:100%}
.mp-ui-recipe-title{font:700 20px/1.12 var(--mp-ui-font-display);letter-spacing:-.025em}
.mp-ui-recipe-copy{padding:12px}
.mp-ui-recipe-meta{font-size:11px;line-height:1.45;margin-top:8px;color:var(--mp-ui-muted)}
.mp-ui-recipe-favorite{background:var(--mp-ui-surface);border:0;right:5px;top:5px;width:44px;height:44px;min-width:44px;min-height:44px;box-shadow:none}
.mp-ui-recipe-more{background:var(--mp-ui-surface)}
.mp-ui-recipe-provenance{width:30px;height:30px;left:8px;top:8px;border-radius:50%}
.mp-ui-screen-hero{aspect-ratio:4/3;max-height:320px;object-fit:cover;border-radius:24px}
.mp-ui-screen-detail-body{padding:22px 0 0}
.mp-ui-screen-detail-body h1{font:700 31px/1.08 var(--mp-ui-font-display);letter-spacing:-.04em;margin:0 0 12px}
.mp-ui-screen-section h2{font:700 23px/1.15 var(--mp-ui-font-display);letter-spacing:-.025em}
.mp-ui-screen-meta{display:flex;gap:16px;color:var(--mp-ui-muted);font-size:13px;margin-bottom:20px}
.mp-ui-ingredient{min-height:66px;gap:12px;border-color:var(--mp-ui-stroke)}
.mp-ui-ingredient-amount{font-size:13px;color:var(--mp-ui-muted)}
.mp-ui-ingredient-copy{font-size:14px}
.mp-ui-ingredient .mp-ui-tile{border-radius:14px;background:var(--mp-ui-surface)}
.mp-ui-stepper{background:var(--mp-ui-mint);border-radius:14px;border:0}
.mp-ui-screen-recipe-line{grid-template-columns:70px minmax(0,1fr) 44px;gap:12px;padding:12px}
.mp-ui-screen-recipe-line>img{width:70px;height:70px;border-radius:16px}
.mp-ui-screen-recipe-line strong{font-size:19px;letter-spacing:-.02em}
.mp-ui-screen-recipe-controls{padding:0 12px 12px}
.mp-ui-choice{border:1px solid var(--mp-ui-stroke);border-radius:22px;background:var(--mp-ui-surface);box-shadow:none;min-height:88px;padding:16px;gap:14px}
.mp-ui-choice-copy strong{font:700 22px/1.1 var(--mp-ui-font-display);letter-spacing:-.025em}
.mp-ui-choice-copy small{font-size:12px;line-height:1.4;color:var(--mp-ui-muted);margin-top:7px}
.mp-ui-photo-choice{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;min-height:180px;display:block;border:0;padding:24px 20px;background:var(--mp-ui-peach)}
.mp-ui-photo-choice>.mp-ui-choice-copy{position:relative;z-index:2;display:block;width:51%;min-width:0}
.mp-ui-photo-choice .mp-ui-choice-copy strong{font-size:clamp(22px,6.8cqi,27px);line-height:1.08;overflow-wrap:normal}
.mp-ui-photo-choice .mp-ui-choice-copy small{color:inherit}
.mp-ui-photo-choice>.mp-ui-art-photo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mp-ui-photo-choice>.mp-ui-art-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.mp-ui-photo-choice--week-plan>.mp-ui-art-photo,.mp-ui-photo-choice--plate-scan>.mp-ui-art-photo{mask-image:linear-gradient(to right,transparent 35%,#000 61%);-webkit-mask-image:linear-gradient(to right,transparent 35%,#000 61%)}
.mp-ui-photo-choice--fridge-scan{background:var(--forest);color:var(--on-forest)}
.mp-ui-photo-choice--fridge-scan>.mp-ui-art-photo img{width:114%}
.mp-ui-photo-choice--social-import{background:var(--mp-ui-coral-soft)}
.mp-ui-photo-choice--social-import>.mp-ui-art-photo img{width:112%}
.mp-ui-photo-choice>.mp-ui-art-advance{position:absolute;right:13px;bottom:13px;width:44px;height:44px;color:var(--mp-ui-ink);background:var(--mp-ui-surface)}
.mp-ui-photo-choice>.mp-ui-art-advance svg{width:20px;height:20px}
.mp-ui-art-photo{display:block;width:100%;height:100%}
.mp-ui-art-photo img{display:block;width:100%;height:100%;object-fit:cover}
.mp-ui-art-intro{width:100%;height:154px;border-radius:24px;overflow:hidden;margin:0 0 18px;display:grid;place-items:center;background:var(--mp-ui-mint)}
.mp-ui-art-intro>.mp-ui-icon{width:44px;height:44px;color:var(--mp-ui-green)}
.mp-ui-screen-camera{min-height:330px;border-radius:24px;background:var(--mp-ui-camera-bg);padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mp-ui-on-accent)}
.mp-ui-screen-camera .mp-ui-screen-frame{border:1px solid rgb(255 255 255 / 55%);border-radius:24px;width:100%;height:230px;display:grid;place-items:center;overflow:hidden;margin-bottom:20px}
.mp-ui-screen-camera .mp-ui-screen-frame>.mp-ui-icon{width:54px;height:54px;color:var(--mp-ui-on-accent)}
.mp-ui-screen-camera .mp-ui-art-photo{opacity:.55;filter:blur(3px)}
.mp-ui-screen-camera p{font-size:12px;color:var(--mp-ui-on-accent);opacity:.8}
.mp-ui-screen-photo-empty{min-height:170px;border:1px dashed var(--mp-ui-control-stroke);border-radius:24px;background:var(--mp-ui-mint)}
.mp-ui-screen-photo-empty svg{width:34px;height:34px}
.mp-ui-notice{border-radius:18px;padding:16px;font-size:13px;line-height:1.5}
.mp-ui-screen-step{min-height:56px;font-size:14px}
.mp-ui-screen-timer{background:var(--mp-ui-peach);border-radius:24px;padding:24px;display:grid;gap:20px}
.mp-ui-screen-timer output{font:700 52px/1 var(--mp-ui-font-display);text-align:center}
.mp-ui-nav{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--mp-ui-bg);border-color:var(--mp-ui-stroke);gap:2px}
.mp-ui-nav .nav-item{min-height:52px;font-size:11px;gap:5px;position:relative;isolation:isolate;color:var(--mp-ui-muted)}
.mp-ui-nav .nav-item.active{color:var(--mp-ui-green);background:transparent}
.mp-ui-nav .nav-item svg{width:22px;height:22px}
.mp-ui-nav .nav-item.active:before{content:"";position:absolute;z-index:-1;top:1px;width:52px;height:31px;border-radius:99px;background:var(--mp-ui-mint)}
.mp-ui-nav .badge-count{right:calc(50% - 25px);font-size:9px}
.mp-ui-option-list{display:grid;gap:8px}
.mp-ui-option-list button{display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:52px;width:100%;padding:14px 16px;border:1px solid var(--mp-ui-stroke);border-radius:16px;background:var(--mp-ui-surface);color:var(--mp-ui-ink);font-size:14px;gap:12px}
.mp-ui-option-list button[aria-pressed=true]{background:var(--mp-ui-mint);border-color:var(--mp-ui-green)}
.mp-ui-option-list button[aria-pressed=true]:after{content:"✓";color:var(--mp-ui-green)}
.mp-ui-demo-caption{font-size:12px;color:var(--mp-ui-muted);line-height:1.5}
.mp-ui-demo-photo{position:relative;border-radius:24px;overflow:hidden}
.mp-ui-demo-photo>img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.mp-ui-demo-photo>button{position:absolute;top:8px;right:8px}
.mp-ui-onboarding-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:24px;overflow:hidden}
.mp-ui-onboarding-mosaic img{width:100%;aspect-ratio:1;object-fit:cover}
.mp-ui-dialog{border-radius:26px;max-width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--mp-ui-bg)}
@container(max-width:350px){
 .mp-ui-screen-content,.mp-ui-screen-header,.mp-ui-screen-footer{padding-left:14px;padding-right:14px}
 .mp-ui-screen-heading h1{font-size:30px}
 .mp-ui-photo-choice{padding-left:16px;min-height:172px}
 .mp-ui-photo-choice>.mp-ui-choice-copy{width:51%}
 .mp-ui-photo-choice .mp-ui-choice-copy strong{font-size:22px}
 .mp-ui-photo-choice .mp-ui-choice-copy small{font-size:12px}
 .mp-ui-photo-choice:not(.mp-ui-photo-choice--fridge-scan)>.mp-ui-art-photo img{object-fit:contain;mask-image:linear-gradient(to bottom,transparent 8%,#000 16%,#000 84%,transparent 92%)}
 .mp-ui-recipe-title{font-size:18px}
 .mp-ui-recipe-copy{padding:10px}
 .mp-ui-screen-recipe-line{grid-template-columns:58px minmax(0,1fr) 44px;gap:10px}
 .mp-ui-screen-recipe-line>img{width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){.mp-ui-app-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}