/* Web layouts share content and state with the native app. */
html,body,#root { min-width:320px; }
#sofra-shell { max-width:1320px !important; }
#sofra-main > div,#home-layout > div { min-width:0; }
#city-dialog { width:100%; max-width:720px; align-self:center; }
[role="button"],[role="tab"],a { cursor:pointer; }
[role="button"]:focus-visible,[role="tab"]:focus-visible,a:focus-visible { outline:2px solid #9e7940; outline-offset:4px; }
#sofra-nav { padding-bottom:max(10px,env(safe-area-inset-bottom)) !important; }
@media(max-width:379px) {
 #sofra-header,#sofra-main > div { padding-left:16px; padding-right:16px; }
}
@media(min-width:700px) {
 #sofra-header { padding:24px 32px; }
 #sofra-main > div { padding:32px; }
 #recipe-grid,#favorite-grid,#home-recipes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 #recipe-grid > div,#favorite-grid > div,#home-recipes > div { min-width:0; margin-bottom:0; }
 #sofra-nav { order:-1; align-self:center; width:auto; border:0; background:transparent; padding:4px 0 20px; gap:12px; }
 #sofra-header { order:-2; }
 #sofra-nav > div { flex-direction:row; flex:none; gap:10px; padding:8px 20px; border-radius:24px; min-height:44px; }
 #sofra-nav > div[aria-selected="true"] { background:#e5eadf; }
 #sofra-nav > div > div:last-child:empty { display:none; }
}
@media(min-width:1000px) {
 #sofra-shell { padding:0 24px; }
 #sofra-header { padding:28px 8px; }
 #sofra-main > div { padding:24px 8px 40px; }
 #home-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:start; }
 #vakit-panel { padding-top:12px; }
 #verse-panel { margin-top:0; padding:24px; background:#f0ede2; border-radius:28px; }
 #verse-panel > div:last-child { margin-bottom:0; }
 #inspiration-panel { grid-column:1 / -1; }
 #inspiration-panel > div:first-child { margin-top:0; }
 #home-recipes,#recipe-grid,#favorite-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #sofra-nav { margin-top:-76px; margin-bottom:22px; padding-bottom:0 !important; }
 #sofra-nav > div { padding:10px 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }