/* ==========================================================================
   GP Garden Planner 2.3.0 — your garden's journey (garden-planner-journey.js).

   Calm and warm: soft paper, moss for "done", slow gentle movement (none
   with Comfort → Still or reduced motion). Loaded after garden-planner-v2.css.
   ========================================================================== */

/* ---------- Planted: a small, happy moment on the plan ---------- */

.gpgpl-plant-token.is-just-planted {
	animation: gpgpl-jr-plant 1.2s cubic-bezier(.2, .9, .3, 1.2);
}
.gpgpl-plant-token.is-just-planted::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 3px solid rgba(93, 110, 80, 0.75);
	animation: gpgpl-jr-ring 1.2s ease-out forwards;
	pointer-events: none;
}
@keyframes gpgpl-jr-plant {
	0% { transform: scale(0.82); }
	45% { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@keyframes gpgpl-jr-ring {
	0% { opacity: 0.9; transform: scale(0.8); }
	100% { opacity: 0; transform: scale(1.8); }
}

/* ---------- Pins: a job, on the plant ---------- */

.gpgpl-jr-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
}
.gpgpl-jr-pins3 {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 3;
}
.gpgpl-jr-pins3.is-photo { z-index: 2; }
.gpgpl-app .gpgpl-jr-pin {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	pointer-events: auto;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	animation: gpgpl-jr-pop 0.4s ease-out;
}
/* A bigger area to tap than to see */
.gpgpl-app .gpgpl-jr-pin::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.gpgpl-app .gpgpl-jr-pin.is-three,
.gpgpl-app .gpgpl-jr-pin.is-photo { margin: 0; width: 36px; height: 36px; }
.gpgpl-app .gpgpl-jr-pin-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 0 0 2.5px #FFFDF8, 0 3px 8px rgba(51, 41, 31, 0.3);
}
.gpgpl-app .gpgpl-jr-pin.is-three .gpgpl-jr-pin-ico,
.gpgpl-app .gpgpl-jr-pin.is-photo .gpgpl-jr-pin-ico { border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); }
.gpgpl-app .gpgpl-jr-pin.is-three .gpgpl-jr-pin-ico svg,
.gpgpl-app .gpgpl-jr-pin.is-photo .gpgpl-jr-pin-ico svg { transform: rotate(45deg); }
.gpgpl-app .gpgpl-jr-pin-n {
	position: absolute;
	top: -6px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--gp-ink, #33291F);
	color: #FFFDF8;
	font: 700 0.7rem/18px var(--gpgpl-font-ui);
	text-align: center;
}
.gpgpl-app .gpgpl-jr-pin:focus-visible .gpgpl-jr-pin-ico { outline: 3px solid var(--gp-straw); outline-offset: 2px; }
.gpgpl-app .gpgpl-jr-pin:hover .gpgpl-jr-pin-ico { filter: brightness(0.97); transform-origin: center; }
@keyframes gpgpl-jr-pop {
	0% { opacity: 0; transform: scale(0.6); }
	100% { opacity: 1; transform: scale(1); }
}
.gpgpl-app .gpgpl-jr-pin.is-three,
.gpgpl-app .gpgpl-jr-pin.is-photo { animation: none; }
/* Out of the way while drawing or shaping the garden */
.gpgpl-design-area.is-feature-drawing .gpgpl-jr-pins,
.gpgpl-design-area.is-shape-editing .gpgpl-jr-pins,
.gpgpl-design-area.is-walking .gpgpl-jr-pins3 { display: none; }

/* ---------- Today: "Your garden" ---------- */

.gpgpl-app .gpgpl-jr-hero {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px;
	border-radius: 22px;
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	box-shadow: 0 1px 0 rgba(51, 41, 31, 0.04), 0 6px 18px rgba(80, 60, 40, 0.08);
}
.gpgpl-app .gpgpl-jr-pic {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #E5DCC7;
}
.gpgpl-app .gpgpl-jr-pic-btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.gpgpl-app .gpgpl-jr-pic-btn img,
.gpgpl-app .gpgpl-jr-pic-btn canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: gpgpl-jr-fade 0.6s ease-out;
}
.gpgpl-app .gpgpl-jr-pic-btn:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: -3px; }
.gpgpl-app .gpgpl-jr-pic::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	background: linear-gradient(to top, rgba(36, 29, 22, 0.55), rgba(36, 29, 22, 0));
	pointer-events: none;
}
.gpgpl-app .gpgpl-jr-pic.is-plan::after { height: 30%; background: linear-gradient(to top, rgba(36, 29, 22, 0.38), rgba(36, 29, 22, 0)); }
.gpgpl-app .gpgpl-jr-pic-text {
	position: absolute;
	left: 12px;
	bottom: 10px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	max-width: calc(100% - 24px);
	margin: 0;
	color: #FFFDF8;
	font: 700 0.92rem/1.2 var(--gpgpl-font-ui);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.gpgpl-app .gpgpl-jr-pic-text svg { vertical-align: -3px; margin-right: 4px; }
.gpgpl-app .gpgpl-jr-dot { width: 4px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.gpgpl-app .gpgpl-jr-pic-acts {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	gap: 6px;
}
.gpgpl-app .gpgpl-jr-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 13px;
	border: 0;
	border-radius: 20px;
	background: rgba(250, 246, 238, 0.94);
	color: var(--gp-ink);
	box-shadow: 0 2px 10px rgba(36, 29, 22, 0.22);
	font: 700 0.9rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.gpgpl-app .gpgpl-jr-pill.is-cam { background: var(--gp-moss); color: #FAF6EE; }
.gpgpl-app .gpgpl-jr-pill:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

.gpgpl-app .gpgpl-jr-week {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 6px 4px;
}
.gpgpl-app .gpgpl-jr-days {
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gpgpl-app .gpgpl-jr-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font: 700 0.74rem/1 var(--gpgpl-font-ui);
	color: var(--gp-ink2);
}
.gpgpl-app .gpgpl-jr-day i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-style: normal;
	color: #FAF6EE;
}
/* A quiet day is a small dot, not a box to tick */
.gpgpl-app .gpgpl-jr-day i::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #D9CCB5;
}
.gpgpl-app .gpgpl-jr-day.is-later i::before { background: var(--gp-line); }
.gpgpl-app .gpgpl-jr-day.is-today i::before { width: 12px; height: 12px; background: none; box-shadow: inset 0 0 0 2.5px var(--gp-ink2); }
.gpgpl-app .gpgpl-jr-day.is-on i { border-radius: 50%; background: var(--gp-moss); animation: gpgpl-jr-pop 0.5s ease-out; }
.gpgpl-app .gpgpl-jr-day.is-on i::before { display: none; }
.gpgpl-app .gpgpl-jr-day.is-today span { color: var(--gp-ink); }
.gpgpl-app .gpgpl-jr-day.is-today.is-on i { box-shadow: 0 0 0 2px var(--gp-paper), 0 0 0 4px var(--gp-straw); }
.gpgpl-app .gpgpl-jr-run {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	padding: 4px 6px 5px;
	border-left: 1.5px dashed var(--gp-line);
	color: var(--gp-moss);
}
.gpgpl-app .gpgpl-jr-run b { font: 400 1.6rem/1 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-jr-run small { margin-top: 2px; font: 700 0.7rem/1.1 var(--gpgpl-font-ui); color: var(--gp-ink2); text-align: center; }
.gpgpl-app .gpgpl-jr-back {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 6px 4px;
	color: var(--gp-ink2);
	font: 700 0.92rem/1.3 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-jr-back svg { color: var(--gp-clay); flex: none; }
@keyframes gpgpl-jr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 3D: "Today" beside Growth ---------- */

.gpgpl-app .gpgpl-3d-now {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	min-height: 32px;
	padding: 0 10px;
	border-radius: 16px;
	border: 1px solid var(--gp-line, #E2D6C2);
	background: var(--gp-paper, #FAF6EE);
	color: var(--gp-ink2, #6B5D4D);
	font: 700 0.8rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gpgpl-3d-now.is-on { background: var(--gp-moss, #4A6A34); border-color: var(--gp-moss, #4A6A34); color: #FAF6EE; }
.gpgpl-app .gpgpl-scene-growth.is-now .gpgpl-3d-growth { opacity: 0.45; }

/* ---------- Milestones (Badges) ---------- */

.gpgpl-app .gpgpl-jr-ms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.gpgpl-app .gpgpl-jr-next-h { margin-top: 6px; }
.gpgpl-app .gpgpl-jr-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.gpgpl-app .gpgpl-jr-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 132px;
	padding: 14px 10px 12px;
	border-radius: 18px;
	border: 1px solid var(--gp-line);
	background: var(--gp-paper);
	color: var(--gp-ink);
	text-align: center;
	font: inherit;
	cursor: pointer;
}
.gpgpl-app .gpgpl-jr-tile[disabled] { cursor: default; background: transparent; border-style: dashed; }
.gpgpl-app .gpgpl-jr-tile b { font: 700 0.92rem/1.2 var(--gpgpl-font-ui); }
.gpgpl-app .gpgpl-jr-tile small { color: var(--gp-ink2); font: 700 0.78rem/1.2 var(--gpgpl-font-ui); }
.gpgpl-app .gpgpl-jr-tile-ico {
	--jr-p: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--gp-ink2);
	background:
		radial-gradient(closest-side, var(--gp-paper2) 80%, transparent 81%),
		conic-gradient(var(--gp-moss) calc(var(--jr-p) * 1%), #D9CCB5 0);
}
.gpgpl-app .gpgpl-jr-tile.is-got .gpgpl-jr-tile-ico {
	background: var(--gp-moss);
	color: #FAF6EE;
	box-shadow: 0 0 0 3px var(--gp-paper), 0 0 0 5px var(--gp-straw);
}
.gpgpl-app .gpgpl-jr-tile:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

/* The celebration */
.gpgpl-app .gpgpl-jr-sheet {
	position: absolute;
	inset: 0;
	z-index: 60; /* over the setup guide and toasts */
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.gpgpl-app .gpgpl-jr-sheet-back {
	position: absolute;
	inset: 0;
	background: rgba(36, 29, 22, 0.42);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.gpgpl-app .gpgpl-jr-sheet-card {
	position: relative;
	width: min(460px, 100%);
	margin: 0 auto;
	padding: 34px 22px calc(22px + env(safe-area-inset-bottom));
	border-radius: 28px 28px 0 0;
	background: var(--gp-paper);
	color: var(--gp-ink);
	text-align: center;
	overflow: hidden;
	transform: translateY(40px);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(.2, .9, .3, 1), opacity 0.35s ease;
}
@media (min-width: 700px) {
	.gpgpl-app .gpgpl-jr-sheet { align-items: center; }
	.gpgpl-app .gpgpl-jr-sheet-card { border-radius: 28px; }
}
.gpgpl-app .gpgpl-jr-sheet.is-open .gpgpl-jr-sheet-back { opacity: 1; }
.gpgpl-app .gpgpl-jr-sheet.is-open .gpgpl-jr-sheet-card { transform: none; opacity: 1; }
.gpgpl-app .gpgpl-jr-medal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--gp-moss);
	color: #FAF6EE;
	box-shadow: 0 0 0 6px var(--gp-paper), 0 0 0 9px var(--gp-straw);
}
.gpgpl-app .gpgpl-jr-sheet.is-open .gpgpl-jr-medal { animation: gpgpl-jr-medal 0.9s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes gpgpl-jr-medal {
	0% { transform: scale(0.4) rotate(-20deg); }
	60% { transform: scale(1.08) rotate(4deg); }
	100% { transform: none; }
}
.gpgpl-app .gpgpl-jr-sheet .gp-sec { justify-content: center; }
.gpgpl-app .gpgpl-jr-sheet-title { margin: 6px 0 4px; font: 400 1.65rem/1.15 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-jr-sheet-sub { margin: 0 0 4px; font: 700 1rem/1.4 var(--gpgpl-font-ui); color: var(--gp-ink2); }
.gpgpl-app .gpgpl-jr-sheet-date { margin: 0 0 18px; font-size: 0.88rem; }
.gpgpl-app .gpgpl-jr-sheet-acts { display: flex; gap: 10px; }
.gpgpl-app .gpgpl-jr-sheet-acts .gp-btn { flex: 1; }
.gpgpl-app .gpgpl-jr-petals { position: absolute; inset: 0; pointer-events: none; }
.gpgpl-app .gpgpl-jr-petals i {
	position: absolute;
	top: -14px;
	width: 10px;
	height: 14px;
	border-radius: 10px 0;
	background: var(--gp-straw);
	opacity: 0;
	animation: gpgpl-jr-fall 2.6s ease-in forwards;
}
.gpgpl-app .gpgpl-jr-petals i:nth-child(3n) { background: #D9967A; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(3n+1) { background: #A897C8; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(1) { left: 6%; animation-delay: 0.1s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(2) { left: 14%; animation-delay: 0.5s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(3) { left: 23%; animation-delay: 0.25s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(4) { left: 31%; animation-delay: 0.8s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(5) { left: 40%; animation-delay: 0.35s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(6) { left: 49%; animation-delay: 0.65s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(7) { left: 58%; animation-delay: 0.15s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(8) { left: 66%; animation-delay: 0.9s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(9) { left: 74%; animation-delay: 0.45s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(10) { left: 82%; animation-delay: 0.7s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(11) { left: 89%; animation-delay: 0.2s; }
.gpgpl-app .gpgpl-jr-petals i:nth-child(12) { left: 95%; animation-delay: 0.55s; }
@keyframes gpgpl-jr-fall {
	0% { opacity: 0; transform: translateY(0) rotate(0); }
	15% { opacity: 0.9; }
	100% { opacity: 0; transform: translateY(420px) rotate(260deg); }
}

/* ---------- Through time: the camera and the months ---------- */

.gpgpl-app .gpgpl-tl {
	position: absolute;
	inset: 0;
	z-index: 1090;
	background: #1E1812;
	color: #FAF6EE;
	font-family: var(--gpgpl-font-ui);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-tl[hidden] { display: none; }
.gpgpl-app .gpgpl-tl-stage { position: absolute; inset: 0; }
.gpgpl-app .gpgpl-tl-video,
.gpgpl-app .gpgpl-tl-img,
.gpgpl-app .gpgpl-tl-ghost {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gpgpl-app .gpgpl-tl-img { object-fit: contain; opacity: 0; transition: opacity 0.9s ease; }
.gpgpl-app .gpgpl-tl-img.is-shown { opacity: 1; }
.gpgpl-app .gpgpl-tl-ghost { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.gpgpl-app .gpgpl-tl-ghost.is-shown { opacity: 0.38; }
.gpgpl-app .gpgpl-tl-ghost.is-hidden { opacity: 0; }
.gpgpl-app .gpgpl-tl:not([data-state="cam"]) .gpgpl-tl-video,
.gpgpl-app .gpgpl-tl:not([data-state="cam"]) .gpgpl-tl-ghost,
.gpgpl-app .gpgpl-tl.is-nocam .gpgpl-tl-video { display: none; }
.gpgpl-app .gpgpl-tl.is-flash .gpgpl-tl-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #FFFDF8;
	animation: gpgpl-jr-flash 0.38s ease-out forwards;
}
@keyframes gpgpl-jr-flash { from { opacity: 0.85; } to { opacity: 0; } }
.gpgpl-app .gpgpl-tl.is-kept .gpgpl-tl-img.is-shown { animation: gpgpl-jr-kept 1.2s ease-out; }
@keyframes gpgpl-jr-kept {
	0% { transform: scale(0.94); filter: brightness(1.15); }
	100% { transform: none; filter: none; }
}
/* No live camera: a calm card in its place */
.gpgpl-app .gpgpl-tl.is-nocam[data-state="cam"] .gpgpl-tl-stage {
	background: radial-gradient(ellipse at 50% 40%, #3A3024, #1E1812 70%);
}

.gpgpl-app .gpgpl-tl-top {
	position: absolute;
	top: max(10px, env(safe-area-inset-top));
	left: max(10px, env(safe-area-inset-left));
	right: max(10px, env(safe-area-inset-right));
	display: flex;
	align-items: center;
	gap: 10px;
}
.gpgpl-app .gpgpl-tl-title {
	flex: 1;
	margin: 0;
	text-align: center;
	font: 400 1.2rem/1.2 var(--gpgpl-font-display);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.gpgpl-app .gpgpl-tl-topr { display: flex; justify-content: flex-end; min-width: 48px; }
.gpgpl-app .gpgpl-tl-ibtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: 24px;
	background: rgba(30, 24, 18, 0.55);
	color: #FAF6EE;
	font: 700 0.92rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.gpgpl-app .gpgpl-tl-ibtn.is-on { background: rgba(250, 246, 238, 0.92); color: var(--gp-ink); }
.gpgpl-app .gpgpl-tl-ibtn.is-sure { background: #A44E2E; }
.gpgpl-app .gpgpl-tl-ibtn.is-soft { width: 56px; height: 56px; border-radius: 28px; }
.gpgpl-app .gpgpl-tl-ibtn:focus-visible,
.gpgpl-app .gpgpl-tl-shutter:focus-visible,
.gpgpl-app .gpgpl-tl-thumb:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

.gpgpl-app .gpgpl-tl-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 18px max(14px, env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, rgba(20, 16, 12, 0.78), rgba(20, 16, 12, 0));
}
.gpgpl-app .gpgpl-tl-row {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 14px;
	width: min(420px, 100%);
}
.gpgpl-app .gpgpl-tl-row.is-two .gp-btn { flex: 1; }
.gpgpl-app .gpgpl-tl-row .gp-btn.is-ghost { background: rgba(250, 246, 238, 0.92); }
.gpgpl-app .gpgpl-tl-spacer { width: 56px; }
.gpgpl-app .gpgpl-tl-shutter {
	position: relative;
	width: 78px;
	height: 78px;
	padding: 0;
	border: 4px solid #FAF6EE;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}
.gpgpl-app .gpgpl-tl-shutter span {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: #FAF6EE;
	transition: transform 0.15s ease;
}
.gpgpl-app .gpgpl-tl-shutter:active span { transform: scale(0.88); }
.gpgpl-app .gpgpl-tl.is-nocam .gpgpl-tl-shutter span {
	background: #FAF6EE center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333291F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4zM12 16.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3C/svg%3E");
}
.gpgpl-app .gpgpl-tl-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: 700 0.86rem/1.2 var(--gpgpl-font-ui);
	color: rgba(250, 246, 238, 0.85);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.gpgpl-app .gpgpl-tl-hint.is-big { font-size: 1rem; }
.gpgpl-app .gpgpl-tl-spin {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid rgba(250, 246, 238, 0.35);
	border-top-color: #FAF6EE;
	animation: gpgpl-jr-spin 0.9s linear infinite;
}
@keyframes gpgpl-jr-spin { to { transform: rotate(360deg); } }

.gpgpl-app .gpgpl-tl-strip {
	display: flex;
	gap: 8px;
	max-width: 100%;
	margin: 0;
	padding: 4px 4px 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.gpgpl-app .gpgpl-tl-strip::-webkit-scrollbar { display: none; }
.gpgpl-app .gpgpl-tl-strip li { flex: none; scroll-snap-align: center; }
.gpgpl-app .gpgpl-tl-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(250, 246, 238, 0.8);
	font: 700 0.76rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gpgpl-tl-thumb-img {
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: rgba(250, 246, 238, 0.15) center / cover no-repeat;
	box-shadow: 0 0 0 2px rgba(250, 246, 238, 0.25);
	transition: box-shadow 0.2s, transform 0.2s;
}
.gpgpl-app .gpgpl-tl-thumb.is-on { color: #FAF6EE; }
.gpgpl-app .gpgpl-tl-thumb.is-on .gpgpl-tl-thumb-img { box-shadow: 0 0 0 3px #FAF6EE; transform: translateY(-2px); }

/* ---------- Comfort: Still, or reduced motion ---------- */

html.gp-still .gpgpl-app .gpgpl-jr-hero *,
html.gp-still .gpgpl-app .gpgpl-jr-sheet *,
html.gp-still .gpgpl-app .gpgpl-jr-pin,
html.gp-still .gpgpl-app .gpgpl-tl *,
html.gp-still .gpgpl-plant-token.is-just-planted,
html.gp-still .gpgpl-plant-token.is-just-planted::after {
	animation: none !important;
	transition: none !important;
}
html.gp-still .gpgpl-app .gpgpl-jr-petals { display: none; }
@media (prefers-reduced-motion: reduce) {
	.gpgpl-app .gpgpl-jr-hero *,
	.gpgpl-app .gpgpl-jr-sheet *,
	.gpgpl-app .gpgpl-jr-pin,
	.gpgpl-app .gpgpl-tl *,
	.gpgpl-plant-token.is-just-planted,
	.gpgpl-plant-token.is-just-planted::after {
		animation: none !important;
		transition: none !important;
	}
	.gpgpl-app .gpgpl-jr-petals { display: none; }
}

@media print {
	.gpgpl-jr-pins, .gpgpl-jr-pins3, .gpgpl-tl, .gpgpl-jr-sheet { display: none !important; }
}

/* Wide screens: the garden's picture a little shorter */
@media (min-width: 700px) {
	.gpgpl-app .gpgpl-jr-pic { aspect-ratio: 2 / 1; }
}

/* The garden photo's How big: four choices with Today, labels may wrap */
.gpgpl-app .gpgpl-gph-seg.is-grow button { padding: 0 6px; min-width: 0; }
.gpgpl-app .gpgpl-gph-seg.is-grow button span { white-space: normal; text-align: center; line-height: 1.1; }

/* ---------- Show jobs in my garden / Hide jobs ---------- */

.gpgpl-app .gpgpl-jr-showjobs { width: 100%; min-height: 50px; }
.gpgpl-app .gpgpl-jr-hero .gpgpl-jr-showjobs { margin-top: 2px; }
.gpgpl-app .gpgpl-hub-week .gpgpl-jr-showjobs { margin-bottom: 12px; }
.gpgpl-app .gpgpl-jr-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 12px;
	background: var(--gp-moss);
	color: #FAF6EE;
	font: 700 0.82rem/1 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-jr-hidejobs {
	position: absolute;
	top: calc(env(safe-area-inset-top) + 76px);
	left: 50%;
	z-index: 26;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 10px 0 16px;
	border: 1px solid rgba(226, 214, 194, 0.9);
	border-radius: 23px;
	background: var(--gpgpl-glass);
	color: var(--gp-ink);
	box-shadow: var(--gpgpl-float-shadow);
	font: 700 0.95rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	animation: gpgpl-jr-fade 0.3s ease-out;
}
.gpgpl-app .gpgpl-jr-hidejobs[hidden],
.gpgpl-app .gpgpl-design-area.is-hub .gpgpl-jr-hidejobs,
.gpgpl-app .gpgpl-design-area.has-gph .gpgpl-jr-hidejobs { display: none; }
.gpgpl-app .gpgpl-jr-hidejobs .gpgpl-jr-count.is-done { padding: 0; }
.gpgpl-app .gpgpl-jr-hidejobs:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

/* ---------- Jobs look the same everywhere (2.3.2) ---------- */

/* On Today: the words open the job, the square ticks it off */
.gpgpl-app .gpgpl-job.is-today { cursor: default; align-items: flex-start; }
.gpgpl-app .gpgpl-job.is-today .gpgpl-job-box { cursor: pointer; width: 32px; height: 32px; margin-top: 1px; }
.gpgpl-app .gpgpl-job.is-today .gpgpl-job-box::before { content: ""; position: absolute; inset: -6px; }
.gpgpl-app .gpgpl-job.is-today .gpgpl-job-box { position: relative; }
.gpgpl-app button.gpgpl-job-text {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.gpgpl-app button.gpgpl-job-text:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 3px; border-radius: 6px; }
.gpgpl-app .gpgpl-job.is-today .gpgpl-job-title { font-weight: 700; }
.gpgpl-app .gpgpl-job-flag.is-urgent { background: #DCE6EE; color: #2F4F6B; }
.gpgpl-app .gpgpl-jobgrp-pic.is-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--gp-rain-l, #DCE6EE);
	color: var(--gp-rain, #3B6A82);
}

/* The Now card: the job's card sits inside the seed packet */
.gpgpl-app .gpgpl-now .gpgpl-jobgrp {
	margin: 8px -14px 4px;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
.gpgpl-app .gpgpl-now .gpgpl-jobgrp-head { background: transparent; padding-top: 4px; }

/* Next, and Ready to plant: a heading, then the job cards */
.gpgpl-app .gpgpl-next:has(.gpgpl-jobgrp) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.gpgpl-app .gpgpl-next:has(.gpgpl-jobgrp) .gpgpl-next-head { padding: 4px 2px 0; }