/* Installable app chrome: standalone display, bottom navigation, updates feed extras.
   Loaded only while Farm Settings.enable_mobile_app is on (see templates/farm_base.html). */

/* ---------------------------------------------------------------- updates feed */
.fa-crop{font-size:.9rem;margin-top:6px;overflow-wrap:anywhere}
.fa-crop a{color:var(--farm-green-dark);font-weight:600;text-decoration:none}
.fa-crop a:hover{text-decoration:underline}
.fa-link{margin:12px 0 0;font-size:.9rem}
.fa-link a{color:var(--farm-green-dark)}
.fa-more{margin:18px 0 0;text-align:center}
.fa-more .farm-btn{min-width:180px}
#farm-install{margin-left:8px}

/* ---------------------------------------------------------------- bottom navigation
   Only in standalone mode: inside a browser tab the header nav is already visible and a fixed bar
   would fight the browser's own chrome. Both the media query and the .farm-standalone class set by
   farm_app.js are honoured, because iOS reports standalone through navigator.standalone only. */
.farm-tabbar{display:none}

@media all and (display-mode:standalone){
	.farm-tabbar{display:flex}
	body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
	.farm-footer{display:none}
}
html.farm-standalone .farm-tabbar{display:flex}
html.farm-standalone body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
html.farm-standalone .farm-footer{display:none}

.farm-tabbar{
	position:fixed;left:0;right:0;bottom:0;z-index:30;
	background:#fff;border-top:1px solid var(--farm-line);
	padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
	justify-content:space-around;align-items:stretch;gap:2px;
	box-shadow:0 -2px 10px rgba(30,42,34,.06);
}
.farm-tabbar a{
	flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:3px;padding:6px 2px;border-radius:10px;
	color:var(--farm-muted);text-decoration:none;font-size:.72rem;line-height:1.1;text-align:center;
}
.farm-tabbar a svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.farm-tabbar a.active{color:var(--farm-green);background:#eef6f0;font-weight:600}
.farm-tabbar a:focus-visible{outline:3px solid #9fd0b0;outline-offset:-3px}
.farm-tabbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------------------------------------------------------------- standalone display
   No browser chrome to lean on: respect the device's safe areas on every side, and never let a
   pull-to-refresh gesture or an overscroll bounce leave a white band behind the page. */
html.farm-standalone,
html.farm-standalone body{background:var(--farm-bg);overscroll-behavior-y:contain}

@media all and (display-mode:standalone){
	html,body{background:var(--farm-bg);overscroll-behavior-y:contain}
	.farm-nav{
		position:sticky;top:0;z-index:20;
		padding-top:calc(12px + env(safe-area-inset-top,0px));
		padding-left:calc(14px + env(safe-area-inset-left,0px));
		padding-right:calc(14px + env(safe-area-inset-right,0px));
	}
	.farm-main{
		padding-left:calc(16px + env(safe-area-inset-left,0px));
		padding-right:calc(16px + env(safe-area-inset-right,0px));
	}
}
html.farm-standalone .farm-nav{
	position:sticky;top:0;z-index:20;
	padding-top:calc(12px + env(safe-area-inset-top,0px));
	padding-left:calc(14px + env(safe-area-inset-left,0px));
	padding-right:calc(14px + env(safe-area-inset-right,0px));
}
html.farm-standalone .farm-main{
	padding-left:calc(16px + env(safe-area-inset-left,0px));
	padding-right:calc(16px + env(safe-area-inset-right,0px));
}