/* ==========================================================================
   GP Garden Planner 2.0.0 — the "Potting shed" layout.

   Seed packets, wooden plant labels and garden twine. Kraft and paper
   grounds, ink text, moss for the one main action on a screen, and one
   colour per kind of job (water, plant, prune, harvest, protect, feed).
   Loaded after garden-planner.css: the five tabs, the full-screen garden
   and its tool bar, Today, one job at a time, My plants, Settings with
   Comfort, and the Comfort classes on <html> (garden-planner-comfort.js).
   ========================================================================== */

.gpgpl-app {
	--gp-tabs-h: calc(62px + env(safe-area-inset-bottom));
	--gp-kraft-tex:
		repeating-linear-gradient(103deg, rgba(116, 80, 47, 0.035) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(13deg, rgba(116, 80, 47, 0.03) 0 1px, transparent 1px 11px),
		radial-gradient(rgba(116, 80, 47, 0.07) 1px, transparent 1.4px);
	font-synthesis: none; /* Young Serif has one weight: never a fake bold */
	--gpgpl-glass: rgba(250, 246, 238, 0.94);
	--gpgpl-float-shadow: 0 4px 14px rgba(51, 41, 31, 0.14);
	line-height: 1.45;
}

.gpgpl-app h1, .gpgpl-app h2, .gpgpl-app h3,
.gpgpl-app .gpgpl-hub-h1, .gpgpl-app .gpgpl-hub-h2, .gpgpl-app .gpgpl-panel-title,
.gpgpl-app .gpgpl-sheet-title, .gpgpl-app .gpgpl-design-chip-name {
	font-family: var(--gpgpl-font-display);
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* Everything sits clear of the tab bar along the bottom */
.gpgpl-app .gpgpl-design-area {
	--gpgpl-pad-b: calc(var(--gp-tabs-h) + 8px);
	background-color: var(--gp-kraft);
	background-image: var(--gp-kraft-tex);
	background-size: auto, auto, 10px 10px;
}

/* ---------- Shared pieces ---------- */

.gpgpl-app .gp-where {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 22px 0 24px;
	font: 700 0.84rem/1 var(--gpgpl-font-ui);
	color: #3B2C1C;
	white-space: nowrap;
	background-color: var(--gp-wood);
	background-image: repeating-linear-gradient(90deg, rgba(90, 60, 30, 0.1) 0 1px, transparent 1px 5px, rgba(255, 240, 215, 0.12) 5px 6px, transparent 6px 13px);
	clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
	border-radius: 5px 0 0 5px;
	flex: none;
}
.gpgpl-app .gp-where::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--gp-kraft);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}
.gpgpl-app .gp-where.is-sm { height: 26px; font-size: 0.78rem; }

.gpgpl-app .gp-card {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--gp-paper);
	color: var(--gp-ink);
	border: 1px solid var(--gp-line);
	border-radius: 18px;
	box-shadow: 0 1px 0 rgba(51, 41, 31, 0.04), 0 4px 14px rgba(80, 60, 40, 0.06);
	padding: 12px 14px;
	font: inherit;
}
button.gp-card { cursor: pointer; }

.gpgpl-app .gp-packet {
	position: relative;
	background: var(--gp-paper);
	color: var(--gp-ink);
	border: 1px solid var(--gp-line);
	border-radius: 6px 6px 18px 18px;
	box-shadow: 0 1px 0 rgba(51, 41, 31, 0.04), 0 4px 14px rgba(80, 60, 40, 0.06);
	padding: 18px 14px 14px;
	overflow: hidden;
}
.gpgpl-app .gp-packet::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7px;
	z-index: 2;
	background: radial-gradient(circle at 6px 0, var(--gp-kraft) 3.4px, transparent 3.9px) repeat-x 0 0 / 12px 7px;
	pointer-events: none;
}

.gpgpl-app .gp-sec {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: 700 0.8rem/1.2 var(--gpgpl-font-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gp-ink2);
}
.gpgpl-app .gp-sec.is-clay { color: var(--gp-clay); }
.gpgpl-app .gp-muted { color: var(--gp-ink2); }
.gpgpl-app p.gp-muted { margin: 0; }
.gpgpl-app .gp-h1 { margin: 4px 0 0; font: 400 1.6rem/1.15 var(--gpgpl-font-display); color: var(--gp-ink); }
.gp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One colour, one meaning */
.gpgpl-app .gp-stamp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
}
.gpgpl-app .gp-stamp.is-lg { width: 54px; height: 54px; border-radius: 16px; }
.gpgpl-app .gp-k-water { background: var(--gp-rain-l); color: var(--gp-rain); }
.gpgpl-app .gp-k-plant { background: var(--gp-soil-l); color: var(--gp-soil); }
.gpgpl-app .gp-k-prune { background: var(--gp-clay-l); color: var(--gp-clay); }
.gpgpl-app .gp-k-harvest { background: var(--gp-straw-l); color: var(--gp-straw-d); }
.gpgpl-app .gp-k-protect { background: var(--gp-slate-l); color: var(--gp-slate); }
.gpgpl-app .gp-k-feed { background: var(--gp-moss-l); color: var(--gp-moss); }
.gpgpl-app .gp-k-flower { background: var(--gp-plum-l); color: var(--gp-plum); }
.gpgpl-app .gp-k-plain { background: var(--gp-paper2); color: var(--gp-ink2); }
.gpgpl-app .gp-kind {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 26px;
	padding: 2px 9px 2px 7px;
	border-radius: 9px;
	font: 700 0.8rem/1.2 var(--gpgpl-font-ui);
}

/* Buttons: always icon and words */
.gpgpl-app .gp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 18px;
	border: 0;
	border-radius: 16px;
	background: var(--gp-moss);
	color: #FAF6EE;
	box-shadow: 0 3px 0 var(--gp-moss-d);
	font: 700 1rem/1.2 var(--gpgpl-font-ui);
	text-decoration: none;
	cursor: pointer;
}
.gpgpl-app .gp-btn:hover { background: #527539; color: #FAF6EE; }
.gpgpl-app .gp-btn.is-ghost { background: var(--gp-paper2); color: var(--gp-ink); box-shadow: inset 0 0 0 1.5px var(--gp-line); }
.gpgpl-app .gp-btn.is-ghost:hover { background: #EDE3D2; color: var(--gp-ink); }
.gpgpl-app .gp-btn.is-ink { background: var(--gp-ink); color: var(--gp-paper); box-shadow: none; }
.gpgpl-app .gp-btn.is-sm { min-height: 42px; padding: 0 14px; border-radius: 13px; font-size: 0.92rem; }
.gpgpl-app .gp-btn.is-warn { color: var(--gp-clay); }
.gpgpl-app .gp-btn[disabled] { opacity: 0.45; cursor: default; }
.gpgpl-app .gp-btn:focus-visible, .gpgpl-app .gp-chip:focus-visible, .gpgpl-app .gp-ibtn:focus-visible,
.gpgpl-app .gpgpl-tab:focus-visible, .gpgpl-app .gpgpl-tool:focus-visible, .gpgpl-app .gp-seg button:focus-visible {
	outline: 3px solid var(--gp-straw);
	outline-offset: 2px;
}
.gpgpl-app .gp-ibtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 14px;
	border: 1px solid var(--gp-line);
	background: var(--gp-paper);
	color: var(--gp-ink);
	cursor: pointer;
}
.gpgpl-app .gp-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gp-ink2);
	font: 700 0.92rem/1.3 var(--gpgpl-font-ui);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gpgpl-app .gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gpgpl-app .gp-chips.is-even > * { flex: 1; justify-content: center; }
.gpgpl-app .gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 13px;
	border-radius: 21px;
	border: 1px solid var(--gp-line);
	background: var(--gp-paper);
	color: var(--gp-ink2);
	font: 700 0.92rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gp-chip.is-on { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-paper); }
.gpgpl-app .gp-chip-n { opacity: 0.7; }

.gpgpl-app .gp-seg { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--gp-paper2); }
.gpgpl-app .gp-seg button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 40px;
	padding: 0 10px;
	border: 0;
	border-radius: 11px;
	background: none;
	color: var(--gp-ink2);
	font: 700 0.9rem/1.1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gp-seg button.is-on { background: var(--gp-paper); color: var(--gp-ink); box-shadow: 0 1px 3px rgba(51, 41, 31, 0.15), inset 0 0 0 1.5px var(--gp-ink); }
.gpgpl-app .gp-seg button[hidden] { display: none; }
.gpgpl-app .gp-seg.is-compact button { min-height: 36px; min-width: 40px; padding: 0 9px; font-size: 0.86rem; }

.gpgpl-app .gp-switch {
	position: relative;
	width: 52px;
	height: 32px;
	flex: none;
	border: 0;
	border-radius: 16px;
	background: #D6CAB5;
	cursor: pointer;
	transition: background 0.2s;
}
.gpgpl-app .gp-switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #FFFDF8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.2s; }
.gpgpl-app .gp-switch.is-on { background: var(--gp-moss); }
.gpgpl-app .gp-switch.is-on span { left: 23px; }

.gpgpl-app .gp-tick-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gpgpl-app .gp-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 22px;
	border: 2.5px solid #C9BBA3;
	background: var(--gp-paper);
	color: transparent;
	cursor: pointer;
}
.gpgpl-app .gp-tick-input:checked + .gp-tick, .gpgpl-app .gp-tick.is-on { background: var(--gp-moss); border-color: var(--gp-moss); color: #FAF6EE; }
.gpgpl-app .gp-tick-input:focus-visible + .gp-tick { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

.gpgpl-app .gp-search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 12px;
	border-radius: 14px;
	border: 1px solid var(--gp-line);
	background: var(--gp-paper);
	color: var(--gp-ink2);
}
.gpgpl-app .gp-search input, .gpgpl-app .gp-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--gp-ink);
	font: 700 1rem/1.3 var(--gpgpl-font-ui);
	outline: none;
}
.gpgpl-app .gp-input { width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--gp-line); border-radius: 12px; background: #FFFDF8; }

.gpgpl-app .gp-av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--gp-paper2);
	box-shadow: 0 0 0 2px #FAF6EE, 0 3px 8px rgba(30, 20, 10, 0.15);
}
.gpgpl-app .gp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpgpl-app .gp-av.is-letter { color: #FAF6EE; font: 400 1.4rem/1 var(--gpgpl-font-display); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* ---------- The five tabs ---------- */

.gpgpl-app .gpgpl-tabs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 28;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	height: var(--gp-tabs-h);
	padding: 5px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
	box-sizing: border-box;
	background: var(--gp-paper);
	border-top: 1px solid var(--gp-line);
}
.gpgpl-app .gpgpl-tab {
	position: relative;
	flex: 1;
	max-width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gp-ink2);
	font: 700 0.78rem/1.2 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-tab[hidden] { display: none; }
.gpgpl-app .gpgpl-tab-pip { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; transition: background 0.2s; }
.gpgpl-app .gpgpl-tab.is-on { color: var(--gp-moss-d); }
.gpgpl-app .gpgpl-tab.is-on .gpgpl-tab-pip { background: var(--gp-moss-l); }
.gpgpl-app .gpgpl-tab .gpgpl-hub-badge { top: -2px; left: calc(50% + 10px); background: var(--gp-clay); }
.gpgpl-app .gpgpl-design-area.has-focus .gpgpl-tabs,
.gpgpl-app .gpgpl-design-area.has-plantpage .gpgpl-tabs,
.gpgpl-app .gpgpl-design-area.is-shape-editing .gpgpl-tabs { display: none; }

/* ---------- The garden: full screen, one slim bar on top, one below ---------- */

.gpgpl-app .gpgpl-score-bar,
.gpgpl-app .gpgpl-dock > .gpgpl-dock-btn:not(.gpgpl-undo-btn),
.gpgpl-app .gpgpl-dock > .gpgpl-fab,
.gpgpl-app .gpgpl-dock-home { display: none !important; }

.gpgpl-app .gpgpl-view-bar .gpgpl-design-chip,
.gpgpl-app .gpgpl-view-bar .gpgpl-weather-chip,
.gpgpl-app .gpgpl-top-actions .gpgpl-dock-btn,
.gpgpl-app .gpgpl-top-actions .gpgpl-view-switch {
	background: var(--gpgpl-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(226, 214, 194, 0.9);
	box-shadow: var(--gpgpl-float-shadow);
}
.gpgpl-app .gpgpl-design-chip-name { font-size: 1.05rem; }

.gpgpl-app .gpgpl-design-area .gpgpl-dock,
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock {
	display: flex;
	height: auto;
	padding: 4px;
	border-radius: 18px;
	background: var(--gpgpl-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(226, 214, 194, 0.9);
	box-shadow: var(--gpgpl-float-shadow);
}
.gpgpl-app .gpgpl-tools { display: flex; flex: 1; gap: 2px; min-width: 0; }
.gpgpl-app .gpgpl-tool {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 52px;
	padding: 0 2px;
	border: 0;
	border-radius: 14px;
	background: none;
	color: var(--gp-ink2);
	font: 700 0.74rem/1.1 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gpgpl-app .gpgpl-tool:hover { color: var(--gp-ink); }
.gpgpl-app .gpgpl-tool.is-on { background: var(--gp-ink); color: var(--gp-paper); }
.gpgpl-app .gpgpl-design-area.is-view-plan .gpgpl-tool.is-3d-only,
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-tool.is-plan-only { display: none; }

/* Furniture: until the site adds models */
.gpgpl-app .gpgpl-add-pane[data-pane="furniture"]:has(.gpgpl-model-step) .gpgpl-furniture-none { display: none; }

/* Sheets and panels: paper, a plant label for a title */
.gpgpl-app .gpgpl-pop.gpgpl-sheet,
.gpgpl-app .gpgpl-panel {
	background-color: var(--gp-kraft);
	background-image: var(--gp-kraft-tex);
	background-size: auto, auto, 10px 10px;
}

/* ---------- Hub screens ---------- */

.gpgpl-app .gpgpl-hub {
	z-index: 27;
	bottom: var(--gp-tabs-h);
	background-color: var(--gp-kraft);
	background-image: var(--gp-kraft-tex);
	background-size: auto, auto, 10px 10px;
	font-size: 1rem;
}
.gpgpl-app .gpgpl-hub-screen { padding-bottom: 28px; }
.gpgpl-app .gpgpl-hub-inner { gap: 12px; }
.gpgpl-app .gpgpl-hub-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.gpgpl-app .gpgpl-hub-top-gap { flex: 1; }
.gpgpl-app .gpgpl-hub-date { font-weight: 700; font-size: 0.92rem; }
.gpgpl-app .gpgpl-hub-label { margin: 6px 2px 0; font: 700 0.8rem/1.2 var(--gpgpl-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-hub-card {
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 18px;
	box-shadow: 0 1px 0 rgba(51, 41, 31, 0.04), 0 4px 14px rgba(80, 60, 40, 0.06);
}

/* Today */
.gpgpl-app .gpgpl-today-info { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-today-info > span, .gpgpl-app .gpgpl-today-info .gp-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.gpgpl-app .gpgpl-today-info svg { color: var(--gp-straw-d); }
.gpgpl-app .gpgpl-alert, .gpgpl-app .gpgpl-later { display: flex; align-items: center; gap: 10px; }
.gpgpl-app .gpgpl-alert > span:nth-child(2), .gpgpl-app .gpgpl-later > span:nth-child(2) { flex: 1; min-width: 0; }
.gpgpl-app .gpgpl-alert b, .gpgpl-app .gpgpl-later b { display: block; font-size: 0.98rem; }
.gpgpl-app .gpgpl-alert small, .gpgpl-app .gpgpl-later small { display: block; color: var(--gp-ink2); font-size: 0.86rem; }
.gpgpl-app .gpgpl-now { display: flex; flex-direction: column; gap: 10px; background: #FBF7EF; }
.gpgpl-app .gpgpl-now-head { display: flex; align-items: center; justify-content: space-between; }
.gpgpl-app .gpgpl-now-main { display: flex; gap: 12px; align-items: center; }
.gpgpl-app .gpgpl-now-title { margin: 0; font: 400 1.3rem/1.15 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-now-need { margin: 0; font-size: 0.95rem; }
.gpgpl-app .gpgpl-now-actions { display: flex; gap: 8px; }
.gpgpl-app .gpgpl-now-actions .gp-btn:first-child { flex: 1.4; }
.gpgpl-app .gpgpl-now-actions .gp-btn:last-child { flex: 1; }
.gpgpl-app .gpgpl-now-moved { margin: 0; padding: 8px 10px; border-radius: 12px; background: var(--gp-moss-l); font-weight: 700; font-size: 0.92rem; }
.gpgpl-app .gpgpl-next { padding: 4px 12px; }
.gpgpl-app .gpgpl-next-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; font-size: 0.88rem; font-weight: 700; }
.gpgpl-app .gpgpl-trow { display: flex; align-items: center; gap: 10px; min-height: 62px; border-top: 1px solid var(--gp-line); }
.gpgpl-app .gpgpl-trow-text { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: none; text-align: left; color: var(--gp-ink); font: inherit; cursor: pointer; }
.gpgpl-app .gpgpl-trow-text b { display: block; font-size: 0.98rem; }
.gpgpl-app .gpgpl-trow-text small { display: block; font-size: 0.85rem; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-trow.is-done .gpgpl-trow-text b { text-decoration: line-through; color: var(--gp-ink3); }
.gpgpl-app .gpgpl-trow.is-done .gp-stamp { opacity: 0.5; }
.gpgpl-app .gpgpl-today-empty b { display: inline-flex; align-items: center; gap: 6px; }
.gpgpl-app .gpgpl-today-empty p { margin: 0 0 8px; }
.gpgpl-app .gpgpl-today-fits { margin: 0 4px; font-size: 0.92rem; }

/* Jobs: this week */
.gpgpl-app .gpgpl-week { display: flex; gap: 4px; margin-top: 10px; }
.gpgpl-app .gpgpl-day {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 0;
	border-radius: 14px;
	border: 1px solid var(--gp-line);
	background: var(--gp-paper);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gp-ink2);
}
.gpgpl-app .gpgpl-day b { font-size: 0.82rem; }
.gpgpl-app .gpgpl-day.is-garden { background: #F3E6CF; border-color: var(--gp-wood-d); color: #3B2C1C; }
.gpgpl-app .gpgpl-day.is-today { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-paper); }
.gpgpl-app .gpgpl-day-tag { position: absolute; top: -10px; padding: 1px 5px; border-radius: 5px; background: var(--gp-wood); color: #3B2C1C; font-style: normal; font-size: 0.62rem; white-space: nowrap; }

/* Plants */
.gpgpl-app .gpgpl-plants-pane[hidden] { display: none; }
.gpgpl-app .gpgpl-plants-pane { display: flex; flex-direction: column; gap: 10px; }
.gpgpl-app .gpgpl-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .gpgpl-app .gpgpl-col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gpgpl-app .gpgpl-col-card { display: flex; flex-direction: column; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.gpgpl-app .gpgpl-col-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	background: color-mix(in srgb, var(--tint) 22%, #F6F0E4);
}
.gpgpl-app .gpgpl-col-place {
	position: absolute;
	left: 8px;
	top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 7px;
	background: rgba(250, 246, 238, 0.9);
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--gp-ink2);
}
.gpgpl-app .gpgpl-col-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px 11px; }
.gpgpl-app .gpgpl-col-name { font: 400 1.02rem/1.2 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-col-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	padding: 12px;
	border: 2px dashed #C9BBA3;
	border-radius: 6px 6px 18px 18px;
	background: none;
	color: var(--gp-ink2);
	text-align: center;
	font: inherit;
	cursor: pointer;
}
.gpgpl-app .gpgpl-col-add small { font-size: 0.82rem; }
.gpgpl-app .gpgpl-col-empty p { margin: 0 0 10px; }

/* The plant page and one job: whole screen, nothing else showing */
.gpgpl-app .gpgpl-plantpage,
.gpgpl-app .gpgpl-focus {
	position: absolute;
	inset: 0;
	z-index: 29;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background-color: var(--gp-kraft);
	background-image: var(--gp-kraft-tex);
	background-size: auto, auto, 10px 10px;
	color: var(--gp-ink);
	font-family: var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-plantpage[hidden], .gpgpl-app .gpgpl-focus[hidden] { display: none; }
.gpgpl-app .gpgpl-pp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 190px;
	padding-bottom: 18px;
	background: color-mix(in srgb, var(--tint) 24%, #F3EDE0);
}
.gpgpl-app .gpgpl-pp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gpgpl-app .gpgpl-pp-hero .gpgpl-pp-top { position: absolute; left: 14px; right: 14px; top: max(12px, env(safe-area-inset-top)); }
.gpgpl-app .gpgpl-pp-inner { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; padding: 14px 16px 40px; }
.gpgpl-app .gpgpl-pp-inner > .gpgpl-pp-top { padding-top: max(0px, env(safe-area-inset-top)); }
.gpgpl-app .gpgpl-pp-bot { margin-top: -4px !important; }
.gpgpl-app .gpgpl-pp-tabs { margin-top: 4px; }
.gpgpl-app .gpgpl-pp-body { display: flex; flex-direction: column; gap: 10px; }
.gpgpl-app .gpgpl-care-rows { padding: 2px 12px; }
.gpgpl-app .gpgpl-care-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--gp-line); }
.gpgpl-app .gpgpl-care-row:last-child { border-bottom: 0; }
.gpgpl-app .gpgpl-care-row b { display: block; font-size: 0.98rem; }
.gpgpl-app .gpgpl-care-row small { display: block; font-size: 0.92rem; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-col-results { padding: 2px 10px; }
.gpgpl-app .gpgpl-col-res { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--gp-line); background: none; text-align: left; font: inherit; color: var(--gp-ink); cursor: pointer; }
.gpgpl-app .gpgpl-col-res:last-child { border-bottom: 0; }
.gpgpl-app .gpgpl-col-res > span:nth-child(2) { flex: 1; min-width: 0; }
.gpgpl-app .gpgpl-col-res b { display: block; }
.gpgpl-app .gpgpl-col-res small { display: block; color: var(--gp-ink2); font-size: 0.86rem; }
.gpgpl-app .gpgpl-col-hint { padding: 12px 2px; }
.gpgpl-app .gpgpl-note-new { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-app .gpgpl-note-text { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--gp-line); border-radius: 12px; background: #FFFDF8; color: var(--gp-ink); font: 1rem/1.4 var(--gpgpl-font-ui); resize: vertical; }
.gpgpl-app .gpgpl-notes { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-app .gpgpl-note { position: relative; padding: 10px 48px 10px 12px; border-left: 3px solid var(--gp-twine); background: var(--gp-paper); border-radius: 0 12px 12px 0; }
.gpgpl-app .gpgpl-note p { margin: 4px 0 0; }
.gpgpl-app .gpgpl-note-del { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; background: none; color: var(--gp-ink3); cursor: pointer; }
.gpgpl-app .gpgpl-year { display: flex; flex-direction: column; gap: 6px; }
.gpgpl-app .gpgpl-year-row { display: grid; grid-template-columns: 76px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.gpgpl-app .gpgpl-year-m { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--gp-ink3); }
.gpgpl-app .gpgpl-year-m.is-now { color: var(--gp-clay); }
.gpgpl-app .gpgpl-year-l { font-size: 0.84rem; font-weight: 700; }
.gpgpl-app .gpgpl-year-c { height: 16px; border-radius: 4px; background: var(--gp-paper2); }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-flower { background: #A897C8; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-prune { background: #D9967A; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-plant { background: #CDB497; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-harvest { background: #E8C980; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-water { background: #8EB2C4; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-protect { background: #9AA8B6; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-feed { background: #A9BC8A; }
.gpgpl-app .gpgpl-year-c.is-on.gp-k-plain { background: #C9BBA3; }
.gpgpl-app .gpgpl-year-c.is-now { box-shadow: 0 0 0 2px var(--gp-clay); }

/* One job at a time */
.gpgpl-app .gpgpl-focus-inner { display: flex; flex-direction: column; gap: 12px; max-width: 560px; min-height: 100%; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.gpgpl-app .gpgpl-focus-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gpgpl-app .gpgpl-focus-head { display: flex; gap: 12px; align-items: center; }
.gpgpl-app .gpgpl-focus-title { margin: 0; font: 400 1.5rem/1.15 var(--gpgpl-font-display); outline: none; }
.gpgpl-app .gpgpl-focus-meta { margin: 2px 0 0; font-weight: 700; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-focus-need .gp-sec { margin-bottom: 8px; }
.gpgpl-app .gpgpl-focus-tools { display: flex; flex-wrap: wrap; gap: 14px; }
.gpgpl-app .gpgpl-focus-tool { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.86rem; font-weight: 700; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-focus-tool-ico { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--gp-paper2); color: var(--gp-ink); }
.gpgpl-app .gpgpl-focus-step { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 210px; }
.gpgpl-app .gpgpl-focus-step-head { display: flex; align-items: center; justify-content: space-between; }
.gpgpl-app .gpgpl-focus-dots { display: flex; gap: 4px; }
.gpgpl-app .gpgpl-focus-dot { width: 24px; height: 6px; border-radius: 3px; background: #D6CAB5; }
.gpgpl-app .gpgpl-focus-dot.is-done { background: var(--gp-moss); }
.gpgpl-app .gpgpl-focus-dot.is-now { background: var(--gp-ink); }
.gpgpl-app .gpgpl-focus-step-text { flex: 1; margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.gpgpl-app .gpgpl-focus-list { margin: 0; padding-left: 1.3em; font-size: 1.08rem; line-height: 1.5; }
.gpgpl-app .gpgpl-focus-list li { margin: 4px 0; }
.gpgpl-app .gpgpl-focus-row { display: flex; gap: 8px; }
.gpgpl-app .gpgpl-focus-row > .gp-btn { flex: 1; }
.gpgpl-app .gpgpl-focus-actions > .gp-btn:last-child { flex: 1.5; }
.gpgpl-app .gpgpl-focus-timer { display: flex; align-items: center; gap: 12px; }
.gpgpl-app .gpgpl-focus-clock { flex: 1; }
.gpgpl-app .gpgpl-focus-clock b { display: block; font: 400 1.5rem/1 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-focus-clock small { display: block; margin-top: 3px; font-size: 0.88rem; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-focus-moved { display: flex; align-items: center; gap: 10px; background: var(--gp-moss-l); border-color: #C9D4B4; font-weight: 700; }
.gpgpl-app .gpgpl-focus-moved span { flex: 1; }

/* Settings and Comfort */
.gpgpl-app .gpgpl-hub-comfort { display: flex; flex-direction: column; gap: 10px; }
.gpgpl-app .gpgpl-set-card { padding: 2px 12px; }
.gpgpl-app .gpgpl-set-row { display: flex; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--gp-line); }
.gpgpl-app .gpgpl-set-row:last-child { border-bottom: 0; }
.gpgpl-app .gpgpl-set-text { flex: 1; min-width: 0; }
.gpgpl-app .gpgpl-set-text b { display: block; font-size: 0.98rem; }
.gpgpl-app .gpgpl-set-text small { display: block; font-size: 0.86rem; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-comfort-preview { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-app .gpgpl-cp-row { display: flex; align-items: center; gap: 10px; }
.gpgpl-app .gpgpl-cp-row > span:nth-child(2) { flex: 1; }
.gpgpl-app .gpgpl-cp-row b { display: block; }
.gpgpl-app .gpgpl-cp-row small { display: block; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-days { display: flex; gap: 5px; padding: 12px 0 8px; }
.gpgpl-app .gpgpl-daypick { flex: 1; min-height: 44px; border-radius: 12px; border: 2px solid transparent; background: var(--gp-paper2); color: var(--gp-ink2); font: 700 0.95rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-app .gpgpl-daypick.is-on { background: var(--gp-moss-l); border-color: var(--gp-moss); color: var(--gp-moss-d); }
.gpgpl-app .gpgpl-set-card > .gp-muted { padding-bottom: 12px; font-size: 0.9rem; }

/* Badges: the scores panel, at home in its tab */
.gpgpl-app .gpgpl-hub .gpgpl-score-panel.is-in-hub {
	position: static;
	inset: auto;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	transform: none;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	border: 0;
	background: none;
	overflow: visible;
	z-index: auto;
}
.gpgpl-app .gpgpl-hub .gpgpl-score-panel.is-in-hub > .gpgpl-panel-header { display: none; }
.gpgpl-app .gpgpl-hub .gpgpl-score-panel.is-in-hub .gpgpl-panel-body { overflow: visible; padding: 0; }

/* ---------- Comfort (classes on <html>) ---------- */

html.gp-text-l .gpgpl-app .gpgpl-hub-screens,
html.gp-text-l .gpgpl-app .gpgpl-focus,
html.gp-text-l .gpgpl-app .gpgpl-plantpage,
html.gp-text-l .gpgpl-app .gpgpl-panel-body,
html.gp-text-l .gpgpl-app .gpgpl-sheet { zoom: 1.1; }
html.gp-text-xl .gpgpl-app .gpgpl-hub-screens,
html.gp-text-xl .gpgpl-app .gpgpl-focus,
html.gp-text-xl .gpgpl-app .gpgpl-plantpage,
html.gp-text-xl .gpgpl-app .gpgpl-panel-body,
html.gp-text-xl .gpgpl-app .gpgpl-sheet { zoom: 1.2; }
html.gp-text-l .gpgpl-app .gpgpl-tabs { font-size: 1.05em; }
html.gp-text-xl .gpgpl-app .gpgpl-tabs .gpgpl-tab { font-size: 0.86rem; }

/* Soft: calmer colours throughout */
html.gp-soft {
	--gp-moss: #5D6E50; --gp-moss-d: #4A5940; --gp-moss-l: #E5E8DD;
	--gp-clay: #8E5E4A; --gp-clay-l: #EFE3DC;
	--gp-rain: #4E6C7A; --gp-rain-l: #E1E7EA;
	--gp-straw: #CDB070; --gp-straw-d: #6E5A2A; --gp-straw-l: #F1E8D2;
	--gp-plum: #6C6380; --gp-plum-l: #E8E5EC;
	--gp-soil: #6E5A44; --gp-soil-l: #ECE4D9;
	--gpgpl-leaf: #5D6E50; --gpgpl-leaf-dark: #4A5940; --gpgpl-clay: #8E5E4A; --gpgpl-gold: #CDB070;
}

/* Still: nothing moves on its own */
html.gp-still .gpgpl-app *,
html.gp-still .gpgpl-app *::before,
html.gp-still .gpgpl-app *::after {
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
	scroll-behavior: auto !important;
}

/* Celebrations: smaller, or none */
html.gp-party-small .gpgpl-burst,
html.gp-party-small .gpgpl-score-spark { transform: scale(0.6); opacity: 0.8; }
html.gp-party-none .gpgpl-burst,
html.gp-party-none .gpgpl-score-float,
html.gp-party-none .gpgpl-score-spark { display: none !important; }

/* Scores off: a simpler planner */
html.gp-no-scores .gpgpl-app .gpgpl-score-toast,
html.gp-no-scores .gpgpl-app .gpgpl-score-float,
html.gp-no-scores .gpgpl-app .gpgpl-score-spark { display: none !important; }

/* Wide screens: a comfortable column */
@media (min-width: 760px) {
	.gpgpl-app .gpgpl-tabs { justify-content: center; gap: 16px; }
	.gpgpl-app .gpgpl-tab { max-width: 110px; }
}

/* Sheets stop at the tab bar, so the tabs are never hidden */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-pop.gpgpl-sheet {
		/* sits on top of the tool bar, which stays in view to switch tools */
		left: 8px;
		right: 8px;
		width: auto;
		bottom: calc(var(--gpgpl-pad-b) + 74px);
		padding-bottom: 1rem;
		max-height: calc(100% - var(--gpgpl-pad-b) - 74px - 70px);
		border-radius: 24px;
		box-shadow: 0 10px 30px rgba(51, 41, 31, 0.22);
	}
}
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-panel {
		bottom: var(--gp-tabs-h);
		height: calc(100% - var(--gp-tabs-h) - 56px);
		max-height: none;
		padding-bottom: 0;
	}
	.gpgpl-app .gpgpl-add-panel { height: calc(80% - var(--gp-tabs-h)); }
}

/* Bigger text never squeezes a row: controls drop below their label */
.gpgpl-app .gpgpl-set-row { flex-wrap: wrap; padding: 6px 0; }
.gpgpl-app .gpgpl-set-row .gp-seg { margin-left: auto; }
.gpgpl-app .gpgpl-today-chips .gp-chip, .gpgpl-app .gp-chip { white-space: nowrap; }
.gpgpl-app .gpgpl-plantpage .gp-seg { flex-wrap: wrap; }
.gpgpl-app .gpgpl-plantpage .gp-seg button { flex: 1 1 auto; }
html.gp-text-xl .gpgpl-app .gpgpl-now-actions { flex-wrap: wrap; }
html.gp-text-xl .gpgpl-app .gpgpl-now-actions .gp-btn { flex: 1 1 100%; }

/* Badges: everything that looks tappable is */
.gpgpl-app button.gpgpl-score-visitor,
.gpgpl-app button.gpgpl-badge,
.gpgpl-app .gpgpl-score-medal-stats > button {
	border: 0;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app button.gpgpl-score-visitor { padding: 0; }
.gpgpl-app button.gpgpl-score-visitor.is-off { border: 2px dashed #E2D6C2; }
.gpgpl-app button.gpgpl-badge { width: 100%; color: var(--gp-ink); }
.gpgpl-app button.gpgpl-badge.is-picked { box-shadow: inset 0 0 0 2.5px var(--gp-ink); }
.gpgpl-app .gpgpl-badge-detail { border: 1.5px solid var(--gp-ink); }
.gpgpl-app .gpgpl-badge-detail .gpgpl-score-sub { margin: 6px 0 0; }
.gpgpl-app .gpgpl-score-medal-stats > button {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
	padding: 0.6rem 0.75rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	text-align: left;
}
.gpgpl-app .gpgpl-score-medal-stats > button:hover { background: rgba(255, 255, 255, 0.14); }
.gpgpl-app .gpgpl-score-row.is-flash { animation: gp-flash 1.6s ease-out 1; border-radius: 14px; }
@keyframes gp-flash { 0%, 40% { background: var(--gp-straw-l); box-shadow: 0 0 0 6px var(--gp-straw-l); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
html.gp-still .gpgpl-app .gpgpl-score-row.is-flash { animation: none; background: var(--gp-straw-l); box-shadow: 0 0 0 6px var(--gp-straw-l); }

/* Plant page: the plant through the seasons */
.gpgpl-app .gpgpl-pp-hero.has-seasons { height: 250px; padding-bottom: 0; transition: background-color 0.3s; overflow: hidden; }
.gpgpl-app .gpgpl-pp-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 230px; }
.gpgpl-app .gpgpl-pp-sprite {
	position: absolute;
	left: 50%;
	bottom: 46px;
	transform: translateX(-50%);
	max-width: min(240px, 70%);
	max-height: 168px;
	object-fit: contain;
	filter: drop-shadow(0 4px 6px rgba(51, 41, 31, 0.2));
}
.gpgpl-app .gpgpl-pp-photo { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; }
.gpgpl-app .gpgpl-pp-resting { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 12px; background: rgba(250, 246, 238, 0.85); color: var(--gp-ink2); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.gpgpl-app .gpgpl-pp-seasons { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; padding: 0 10px; }
.gpgpl-app .gpgpl-pp-seasons button {
	min-height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 18px;
	background: rgba(250, 246, 238, 0.82);
	color: var(--gp-ink);
	font: 700 0.86rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gpgpl-pp-seasons button.is-on { background: var(--gp-ink); color: var(--gp-paper); }
.gpgpl-app .gpgpl-pp-hero .gpgpl-pp-top { z-index: 2; }
.gpgpl-app .gpgpl-pp-hero.has-seasons .gpgpl-pp-photo { top: auto; bottom: 58px; }

/* ---------- Selected plant or feature: a card, and the tool bar becomes its tools ---------- */
.gpgpl-app .gpgpl-action-bar.is-docked {
	left: 10px;
	right: 10px;
	width: auto;
	max-width: 560px;
	margin: 0 auto;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--gp-ink);
}
.gpgpl-app .gpgpl-sel-card,
.gpgpl-app .gpgpl-sel-tools {
	background: var(--gpgpl-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(226, 214, 194, 0.9);
	box-shadow: var(--gpgpl-float-shadow);
}
.gpgpl-app .gpgpl-sel-card {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 66px;
	padding: 8px 8px 8px 10px;
	border-radius: 18px;
	box-sizing: border-box;
}
.gpgpl-app .gpgpl-sel-card .gp-stamp { width: 44px; height: 44px; }
.gpgpl-app .gpgpl-sel-text { flex: 1; min-width: 0; }
.gpgpl-app .gpgpl-sel-text b {
	display: block;
	font: 400 1.05rem/1.2 var(--gpgpl-font-display);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gpgpl-app .gpgpl-sel-text small {
	display: block;
	margin-top: 1px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--gp-ink2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gpgpl-app .gpgpl-sel-mini { width: 40px; height: 40px; border-radius: 12px; background: transparent; border-color: transparent; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-sel-mini.is-on { background: var(--gp-slate-l); color: var(--gp-slate); }
.gpgpl-app .gpgpl-sel-details { flex: none; gap: 2px; padding: 0 8px 0 12px; }
.gpgpl-app .gpgpl-sel-tools { display: flex; gap: 2px; padding: 4px; border-radius: 18px; }
.gpgpl-app .gpgpl-sel-tools .gpgpl-tool.is-warn { color: var(--gp-clay); }
.gpgpl-app .gpgpl-sel-tools .gpgpl-tool.is-done { background: var(--gp-moss); color: #FAF6EE; box-shadow: 0 2px 0 var(--gp-moss-d); }
.gpgpl-app .gpgpl-sel-tools .gpgpl-tool.is-done:hover { background: #527539; color: #FAF6EE; }
@media (max-width: 380px) {
	.gpgpl-app .gpgpl-sel-mini { width: 34px; }
	.gpgpl-app .gpgpl-sel-details { padding: 0 6px 0 10px; }
}

/* Move: the handle that does it gives a little wave */
.gpgpl-app .gpgpl-move-handle.is-pointing { animation: gp-point 0.9s ease-out 2; }
@keyframes gp-point { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 176, 74, 0.7); } 50% { box-shadow: 0 0 0 12px rgba(224, 176, 74, 0); } }
.gpgpl-app .gpgpl-sel-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.gpgpl-app .gpgpl-sel-mini { width: 36px; height: 40px; }
.gpgpl-app .gpgpl-sel-card .gp-stamp { width: 40px; height: 40px; }
.gpgpl-app .gpgpl-pp-sprite { max-height: 150px; bottom: 50px; }

/* One job: the plant's feature image as a header */
.gpgpl-app .gpgpl-focus-hero {
	position: relative;
	height: 210px;
	background: var(--gp-paper2);
	overflow: hidden;
}
.gpgpl-app .gpgpl-focus-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gpgpl-app .gpgpl-focus-hero.is-broken img { display: none; }
.gpgpl-app .gpgpl-focus-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 90px;
	background: linear-gradient(rgba(51, 41, 31, 0.28), transparent);
	pointer-events: none;
}
.gpgpl-app .gpgpl-focus-hero .gpgpl-focus-top {
	position: absolute;
	z-index: 1;
	left: 16px;
	right: 16px;
	top: max(12px, env(safe-area-inset-top));
}
.gpgpl-app .gpgpl-focus-hero .gp-btn.is-ghost { background: rgba(250, 246, 238, 0.94); }
.gpgpl-app .gpgpl-focus.has-pic .gpgpl-focus-inner {
	position: relative;
	min-height: 0;
	margin-top: -22px;
	padding-top: 16px;
	border-radius: 22px 22px 0 0;
	background-color: var(--gp-kraft);
	background-image: var(--gp-kraft-tex);
	background-size: auto, auto, 10px 10px;
}
@media (min-width: 600px) { .gpgpl-app .gpgpl-focus-hero { height: 260px; } }

/* ---------- Explore (2.0.4): a compact strip, not a sheet ----------
   Row 1: [☀|☾]  ▶ ──── month ──── Oct   [Done]
   Row 2: [⋯ ▶ Walk ✎ ✕]   [👁 Pick a spot · 1 2 ✕]
   Everything keeps its label for screen readers. */
.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "dn seas done" "tiles tiles tiles";
	align-items: center;
	gap: 6px 8px;
	min-height: 0;
	height: auto;
	padding: 8px 10px;
}
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
		padding: 8px 10px;
		border-radius: 20px;
	}
}
@media (min-width: 701px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore { max-width: 520px; }
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-head { display: contents; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-title,
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-name,
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile > small {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-daynight { grid-area: dn; flex: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-seasons { grid-area: seas; gap: 4px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-pop-done { grid-area: done; min-height: 34px; padding: 0 12px; font-size: 0.82rem; }

/* Day / night: just the sun and moon */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight { padding: 2px; gap: 2px; border-radius: 10px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 0;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day::before,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night::before { margin: 0; font-size: 0.95rem; }

/* Month: small play button, short month name */
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month { gap: 6px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-play { width: 30px; height: 30px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-month-value {
	width: auto; min-width: 2em; font-size: 0; white-space: nowrap;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-month-value::after { content: attr(data-short); font-size: 0.9rem; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting { padding: 2px 8px; font-size: 0.72rem; }

/* The two tools: one row of buttons each */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tiles {
	grid-area: tiles;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-ico svg { width: 16px; height: 16px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts { flex: 1 1 auto; flex-wrap: nowrap; gap: 4px; margin: 0; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts button { min-height: 30px; padding: 0 9px; border-radius: 8px; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-x,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-alt { width: 30px; padding: 0; flex: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-alt b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-view-chip { min-width: 30px; min-height: 30px; padding: 0 4px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-view-chip svg { display: none; }
/* Viewpoints saved: the pin button drops its words to make room */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .is-look:has(.gpgpl-view-chips:not([hidden])) .gpgpl-xp-go { flex: none; width: 30px; padding: 0; }
.gpgpl-app .gpgpl-pop-explore .is-look:has(.gpgpl-view-chips:not([hidden])) .gpgpl-xp-go b {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
@media (max-width: 440px) {
	.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-ico { display: none; }
}
/* Seasons locked (free plan): two small one-line buttons */
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month.is-locked { flex-wrap: nowrap; gap: 4px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month.is-locked > :not(.gpgpl-scene-lock) { display: none; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-scene-lock {
	display: inline-flex; align-items: center; gap: 4px;
	min-width: 0; min-height: 30px; margin: 0; padding: 0 9px; border-radius: 8px;
	font: 700 0.76rem/1 var(--gpgpl-font-ui); white-space: nowrap;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock span { overflow: hidden; text-overflow: ellipsis; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock svg { flex: none; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-scene-preview { flex: 1 1 auto; justify-content: center; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) { flex: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) span { font-size: 0; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) span::after { content: "Premium"; font-size: 0.76rem; }

.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile .gpgpl-view-chips { gap: 4px; margin: 0; }
@media (max-width: 360px) {
	.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) span { display: none; }
	.gpgpl-app .gpgpl-pop-explore .gpgpl-pop-done { padding: 0 10px; }
}

/* ---------- Explore (2.0.5): right down by the tabs ---------- */
.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	top: auto;
	bottom: calc(var(--gp-tabs-h) + 8px);
	max-height: none;
}
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore { bottom: calc(var(--gp-tabs-h) + 8px); }
}

/* Plants resting: one short note, never more than one line */
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting,
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting.is-open {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 4px 3px 10px;
	white-space: nowrap;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting[hidden] { display: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting span { overflow: hidden; text-overflow: ellipsis; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting b {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(74, 106, 52, 0.14);
	color: #38522A;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-scene-resting b { background: rgba(255, 255, 255, 0.14); color: #E8EEF7; }

/* The full list, a small card above the strip */
.gpgpl-app .gpgpl-rest-list {
	position: absolute;
	z-index: 26;
	left: 8px;
	right: 8px;
	max-width: 420px;
	max-height: 50%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	padding: 10px 10px 8px 14px;
	border-radius: 18px;
	background: var(--gp-paper, #FCF9F3);
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.25);
	color: var(--gpgpl-ink);
}
.gpgpl-app .gpgpl-rest-list[hidden] { display: none; }
.gpgpl-app .gpgpl-rest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gpgpl-app .gpgpl-rest-head > b { font: 700 1rem var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-rest-close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border: none; border-radius: 10px;
	background: rgba(51, 41, 31, 0.07); color: inherit; cursor: pointer;
}
.gpgpl-app .gpgpl-rest-note { margin: 2px 0 6px; font-size: 0.78rem; line-height: 1.35; color: var(--gpgpl-ink-soft); }
.gpgpl-app .gpgpl-rest-rows { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.gpgpl-app .gpgpl-rest-row {
	display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
	width: 100%; padding: 7px 10px; border: none; border-radius: 10px;
	background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.gpgpl-app .gpgpl-rest-row:hover, .gpgpl-app .gpgpl-rest-row:focus-visible { background: rgba(74, 106, 52, 0.1); }
.gpgpl-app .gpgpl-rest-row b { font-size: 0.9rem; }
.gpgpl-app .gpgpl-rest-row b span { font-weight: 600; color: var(--gpgpl-ink-soft); }
.gpgpl-app .gpgpl-rest-row small { font-size: 0.76rem; color: var(--gpgpl-ink-soft); }

/* ---------- Your account, easy to find (2.0.6) ---------- */
/* Top right of every screen: your initial, or Log in */
.gpgpl-app .gpgpl-hub-me-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	margin-right: 8px;
	padding: 0;
	border: 2px solid var(--gp-moss);
	border-radius: 50%;
	background: var(--gp-moss-l);
	color: var(--gp-moss-d);
	font: 700 1.05rem/1 var(--gpgpl-font-display);
	cursor: pointer;
}
.gpgpl-app .gpgpl-hub-me-btn.is-premium { border-color: var(--gp-straw); background: var(--gp-straw-l); color: var(--gp-straw-d); }
.gpgpl-app .gpgpl-hub-me-star {
	position: absolute;
	right: -4px;
	bottom: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gp-straw);
	color: #fff;
	box-shadow: 0 0 0 2px var(--gp-paper);
}
.gpgpl-app .gpgpl-hub-me-star svg { fill: currentColor; }
.gpgpl-app .gpgpl-hub-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	flex: none;
	margin-right: 8px;
	padding: 0 14px;
	border-radius: 14px;
	background: var(--gp-moss);
	color: #fff;
	font: 700 0.92rem/1 var(--gpgpl-font-ui);
	text-decoration: none;
	white-space: nowrap;
}
.gpgpl-app .gpgpl-hub-login-btn:hover { background: var(--gp-moss-d); color: #fff; }
.gpgpl-app .gpgpl-hub-me-btn:focus-visible, .gpgpl-app .gpgpl-hub-login-btn:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }

/* Settings: the account card first */
.gpgpl-app .gpgpl-hub-acc-top { padding: 14px; }
.gpgpl-app .gpgpl-hub-acc-top .gpgpl-acc-section { margin: 0; padding: 0; border: 0; }
.gpgpl-app .gpgpl-hub-acc-top .gpgpl-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gpgpl-app .gpgpl-hub-acc-top .gpgpl-acc-actions > * { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.gpgpl-app .gpgpl-hub-guest { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.gpgpl-app .gpgpl-hub-guest .gpgpl-hub-me { padding: 0; background: none; border: 0; box-shadow: none; }
.gpgpl-app .gpgpl-hub-guest .gpgpl-hub-actions { display: flex; gap: 8px; margin: 0; }
.gpgpl-app .gpgpl-hub-guest .gpgpl-hub-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; }
.gpgpl-app .gpgpl-hub-more-body + .gpgpl-hub-comfort { margin-top: 6px; }

/* Which gardens the email and the calendar cover */
.gpgpl-app .gpgpl-acc-rem { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.gpgpl-app .gpgpl-acc-cal .gpgpl-acc-rem { margin: 12px 0 0; }
.gpgpl-app .gpgpl-acc-rem-label { font-weight: 700; font-size: 0.86rem; }
.gpgpl-app .gpgpl-acc-rem-label small { margin-left: 4px; font-weight: 600; color: var(--gp-ink3); }
.gpgpl-app .gpgpl-acc-rem-list { display: flex; flex-wrap: wrap; gap: 6px; }
.gpgpl-app .gpgpl-acc-rem-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	max-width: 100%;
	padding: 0 12px 0 6px;
	border: 1px solid var(--gp-line);
	border-radius: 999px;
	background: var(--gp-paper);
	color: var(--gp-ink2);
	font: 600 0.86rem/1.1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-app .gpgpl-acc-rem-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	border: 1.5px solid var(--gp-line);
	border-radius: 50%;
	font-size: 0.8rem;
}
.gpgpl-app .gpgpl-acc-rem-chip.is-on { border-color: var(--gp-moss); background: var(--gp-moss-l); color: var(--gp-moss-d); }
.gpgpl-app .gpgpl-acc-rem-chip.is-on .gpgpl-acc-rem-tick { border-color: var(--gp-moss); background: var(--gp-moss); color: #fff; }
.gpgpl-app .gpgpl-acc-rem-chip:disabled { opacity: 0.6; }

/* =====================================================================
   Explore (2.0.7): styled like the bottom bar. Paper, line icons over
   short labels, the green pip for what's on. Two slim rows:
     [☀ Day] [🚶 Walk] [⋯ Route] │ [📍 Look] ①② │ [✓ Done]
     ▶ ──●── Oct                     [🌱 3 resting ›]
   ===================================================================== */
.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "dn tiles done" "seas seas seas";
	gap: 2px 2px;
	padding: 4px 6px 6px;
	border: 1px solid var(--gp-line);
	border-radius: 18px;
	background: rgba(250, 246, 238, 0.97);
	background-image: none;
	box-shadow: 0 6px 22px rgba(51, 41, 31, 0.16);
	color: var(--gp-ink2);
}
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
		left: 8px;
		right: 8px;
		padding: 4px 6px 6px;
		border-radius: 18px;
	}
}

/* Every control: a tab, like the bar below */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts > button:not(.gpgpl-xp-x),
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-done {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: auto;
	min-width: 0;
	min-height: 52px;
	height: auto;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 14px;
	background: none;
	box-shadow: none;
	color: var(--gp-ink2);
	font: 700 0.74rem/1.1 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts > button:not(.gpgpl-xp-x) svg,
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-done svg,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight svg { width: 22px; height: 22px; flex: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts > button b,
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-done b {
	position: static; width: auto; height: auto; clip: auto;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font: inherit;
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts > button:not(.gpgpl-xp-x):hover,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight:hover { color: var(--gp-ink); background: rgba(51, 41, 31, 0.04); }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts > button:disabled { opacity: 0.4; cursor: default; background: none; }
/* Undo the old coloured buttons */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-go,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .is-look .gpgpl-xp-go,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-go:disabled,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-alt { background: none; color: var(--gp-ink2); }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-alt b { position: static; width: auto; height: auto; clip: auto; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .is-look:has(.gpgpl-view-chips:not([hidden])) .gpgpl-xp-go { flex: 1 1 0; width: auto; padding: 0 2px; }
.gpgpl-app .gpgpl-pop-explore .is-look:has(.gpgpl-view-chips:not([hidden])) .gpgpl-xp-go b { position: static; width: auto; height: auto; clip: auto; }

/* The two groups sit in the middle, a hairline between them */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tiles { gap: 0; flex-wrap: nowrap; align-items: stretch; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile.is-look { border-left: 1px solid var(--gp-line); padding-left: 2px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile.is-walk { padding-right: 2px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-ico { display: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts { flex: 1 1 auto; align-items: center; gap: 0; min-width: 0; }

/* Delete: a small ✕ on the group's corner */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-x {
	position: absolute;
	top: 1px;
	right: 1px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	min-width: 0;
	height: 22px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--gp-line);
	border-radius: 50%;
	background: var(--gp-paper);
	color: var(--gp-clay);
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-x svg { width: 10px; height: 10px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-x::after { content: ""; position: absolute; inset: -11px; } /* a bigger target */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-x[hidden] { display: none; }

/* Saved viewpoints: small numbered dots, two rows */
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile .gpgpl-view-chips { flex: none; margin: 0 22px 0 2px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile .gpgpl-view-chip-list {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 22px);
	gap: 3px;
	max-width: 76px;
	overflow-x: auto;
	scrollbar-width: none;
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-view-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	min-width: 22px;
	height: 22px;
	min-height: 22px;
	padding: 0;
	border: 1px solid var(--gp-line);
	border-radius: 50%;
	background: var(--gp-paper2);
	color: var(--gp-ink);
	font: 700 0.7rem/1 var(--gpgpl-font-ui);
}

/* Day / night: the sun by day, the moon at night */
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-daynight { display: flex; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight { flex: none; width: 56px; padding: 0; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight .gpgpl-night-moon { display: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight .gpgpl-night-sun { display: block; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-night-sun { display: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-night-moon { display: block; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night {
	display: block; width: auto; height: auto; padding: 0; border-radius: 0;
	background: none; color: inherit; font: inherit;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day::before,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night::before { content: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight .gpgpl-daynight-night,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-daynight-day { display: none; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-daynight-night { display: block; }

/* Done: the green pip, like the tab you're on */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-done { flex: none; width: 60px; color: var(--gp-moss-d); }
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-pip {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 30px; border-radius: 15px;
	background: var(--gp-moss-l);
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-done:hover .gpgpl-xp-pip { background: #D3DDBF; }

/* Row two: the months, and who's resting */
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-seasons {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 0;
	border-top: 1px solid var(--gp-line);
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month { flex: 1 1 auto; min-width: 0; gap: 6px; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-3d-play {
	width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
	background: var(--gp-moss-l); color: var(--gp-moss-d); box-shadow: none;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-play svg { width: 14px; height: 14px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month input[type="range"] {
	--gpgpl-thumb: 20px;
	height: 28px;
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month input[type="range"]::-webkit-slider-runnable-track { height: 6px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month input[type="range"]::-webkit-slider-thumb {
	margin-top: -7px; border-width: 2px; background: var(--gp-moss); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month input[type="range"]::-moz-range-thumb { background: var(--gp-moss); border-width: 2px; }
.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-month-value::after { font: 700 0.8rem var(--gpgpl-font-ui); color: var(--gp-ink); }

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-scene-lock {
	min-height: 28px; padding: 0 10px; border: 0; border-radius: 14px;
	background: var(--gp-paper2); color: var(--gp-ink2); box-shadow: none;
	font: 700 0.74rem/1 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) { background: var(--gp-straw-l); color: var(--gp-straw-d); }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-lock:not(.gpgpl-scene-preview) span::after { font-size: 0.74rem; }

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting,
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting.is-open {
	flex: none;
	gap: 4px;
	min-height: 28px;
	margin: 0;
	padding: 0 8px 0 7px;
	border-radius: 14px;
	background: var(--gp-paper2);
	color: var(--gp-ink2);
	font: 700 0.74rem/1 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting svg { flex: none; color: var(--gp-moss); }
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting b,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-scene-resting b {
	padding: 0; background: none; color: inherit; text-decoration: none; font-size: 1rem; line-height: 1;
}

/* Night: the strip goes dark with the garden */
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop.gpgpl-pop-explore {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(22, 35, 58, 0.94);
	color: #C9D4E3;
}
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile-acts > button:not(.gpgpl-xp-x),
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-daynight,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-go,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-alt { color: #C9D4E3 !important; background: none !important; }
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-night-moon { color: #F2D27A; }
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile.is-look,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-seasons { border-color: rgba(255, 255, 255, 0.12); }
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-x,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-view-chip,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-scene-resting,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-scene-lock.gpgpl-scene-preview { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); color: #E8EEF7; }
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-x { color: #F0A898; }

/* Very narrow phones: a little tighter */
@media (max-width: 360px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight { width: 46px; }
	.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-done { width: 50px; }
	.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-pip { width: 44px; }
	.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts > button b { font-size: 0.68rem; }
}
/* (2.0.7) beat the older, more specific button rules */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts > button.gpgpl-xp-x {
	position: absolute; top: 1px; right: 1px; z-index: 1;
	width: 20px; min-width: 0; height: 20px; min-height: 0; padding: 0;
	border: 1px solid var(--gp-line); border-radius: 50%;
	background: var(--gp-paper); color: var(--gp-clay);
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts > button.gpgpl-xp-x[hidden] { display: none; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts .gpgpl-view-chip-list > button.gpgpl-view-chip {
	width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0;
	border: 1px solid var(--gp-line); border-radius: 50%;
	background: var(--gp-paper2); color: var(--gp-ink); font: 700 0.7rem/1 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile .gpgpl-view-chips { margin-right: 20px; }
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight.is-on .gpgpl-daynight-night,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight .gpgpl-daynight-day { background: none; color: inherit; box-shadow: none; }
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-3d-month-value::after { color: #E8EEF7; }
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-done { color: #CFE0B4; }
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-pip { background: rgba(207, 224, 180, 0.2); }
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile-acts > button.gpgpl-xp-x,
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile-acts .gpgpl-view-chip-list > button.gpgpl-view-chip { background: #2A3B58; border-color: rgba(255, 255, 255, 0.18); color: #E8EEF7; }
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-xp-tile-acts > button.gpgpl-xp-x { color: #F0A898; }
@media (max-width: 360px) {
	.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile .gpgpl-view-chip-list { max-width: 22px; }
	.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-tile-acts > button b { font-size: 0.66rem; }
}
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .is-walk .gpgpl-xp-tile-acts > button.gpgpl-xp-x { top: -2px; right: -3px; }

/* ==========================================================================
   2.7.0: designing has the whole screen (garden-planner-hub.js)

   While the garden is open, in 2D, 3D or Photo, the five tabs step aside:
   the tool bar's "Add plants" is the one way to add plants, so the My
   plants tab is never tapped by mistake. Done (top left) goes back to
   where you were, Badges sits with Settings and Undo, and More starts with
   Explore, Badges, Today, My plants and Jobs.
   ========================================================================== */

/* No tab bar: everything that sat above it moves down to the edge */
.gpgpl-app .gpgpl-design-area.is-designing { --gp-tabs-h: env(safe-area-inset-bottom, 0px); }
.gpgpl-app .gpgpl-design-area.is-designing > .gpgpl-tabs { display: none; }

/* Done, top left */
.gpgpl-app .gpgpl-design-done { display: none; }
.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-design-done {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: var(--gpgpl-ctl, 44px);
	min-width: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--gp-ink);
	color: var(--gp-paper);
	font: 700 0.95rem/1 var(--gpgpl-font-ui);
	box-shadow: var(--gpgpl-float-shadow);
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-design-done:hover { background: #4A3D2E; }
.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-design-done:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }
.gpgpl-app .gpgpl-design-done .gpgpl-home-dot { top: 3px; right: 3px; }
.gpgpl-app .gpgpl-design-area.is-shape-editing .gpgpl-design-done,
.gpgpl-app .gpgpl-design-area.is-feature-drawing .gpgpl-design-done { visibility: hidden; pointer-events: none; }
/* Room for Done beside the design name on a phone */
@media (max-width: 520px) {
	.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-view-row .gpgpl-design-chip { max-width: 38vw; min-width: 0; }
	.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-design-done { padding: 0 13px; }
}

/* Badges, with Settings and Undo (and on the garden photo) */
.gpgpl-app .gpgpl-badges-btn { position: relative; }
.gpgpl-app .gpgpl-badges-btn[hidden] { display: none !important; }
.gpgpl-app .gpgpl-badges-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 10px;
	height: 10px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gp-clay, #D9622B);
}
.gpgpl-app .gpgpl-badges-dot[hidden] { display: none; }
html.gp-no-scores .gpgpl-app .gpgpl-badges-btn,
html.gp-no-scores .gpgpl-app .gpgpl-more-go-tile.is-badges { display: none !important; }

/* Add plants: the one main action on the garden, in moss */
/* The same button in the garden photo's bar (2.7.0) */
.gpgpl-app .gpgpl-dock .gpgpl-tools > .gpgpl-tool[data-tool="plants"],
.gpgpl-app .gpgpl-gph-dock .gpgpl-tools > .gpgpl-tool[data-gph-tool="plants"] {
	flex: 1.12;
	background: var(--gp-moss);
	color: #FAF6EE;
	box-shadow: 0 2px 0 var(--gp-moss-d);
}
/* Two short lines on a phone, so the other tools keep their whole names */
@media (max-width: 520px) {
	.gpgpl-app .gpgpl-dock .gpgpl-tools > .gpgpl-tool[data-tool="plants"] span,
	.gpgpl-app .gpgpl-gph-dock .gpgpl-tools > .gpgpl-tool[data-gph-tool="plants"] span { white-space: normal; line-height: 1.05; text-align: center; overflow: visible; }
}
.gpgpl-app .gpgpl-dock .gpgpl-tools > .gpgpl-tool[data-tool="plants"]:hover,
.gpgpl-app .gpgpl-gph-dock .gpgpl-tools > .gpgpl-tool[data-gph-tool="plants"]:hover { background: #527539; color: #FAF6EE; }
.gpgpl-app .gpgpl-dock .gpgpl-tools > .gpgpl-tool[data-tool="plants"].is-on,
.gpgpl-app .gpgpl-gph-dock .gpgpl-tools > .gpgpl-tool[data-gph-tool="plants"].is-on { background: var(--gp-moss-d); color: #FAF6EE; box-shadow: none; }

/* More: Explore and Badges first, then Today, My plants and Jobs */
.gpgpl-app .gpgpl-more-go { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.gpgpl-app .gpgpl-more-go-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.gpgpl-app .gpgpl-more-go-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gpgpl-app .gpgpl-more-go button {
	position: relative;
	border: 0;
	color: var(--gp-ink);
	font-family: var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gpgpl-app .gpgpl-more-go button[hidden] { display: none; }
.gpgpl-app .gpgpl-more-go button:focus-visible { outline: 3px solid var(--gp-straw); outline-offset: 2px; }
.gpgpl-app .gpgpl-more-go-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 108px;
	padding: 14px;
	border-radius: 18px;
	text-align: left;
}
.gpgpl-app .gpgpl-more-go-tile b { font: 400 1.12rem/1.1 var(--gpgpl-font-display); }
.gpgpl-app .gpgpl-more-go-tile small { font-size: 0.8rem; line-height: 1.3; color: inherit; opacity: 0.85; }
.gpgpl-app .gpgpl-more-go-tile.is-explore { background: var(--gp-moss-l); color: var(--gp-moss-d); }
.gpgpl-app .gpgpl-more-go-tile.is-badges { background: #F3E2C0; color: #5E3E14; }
.gpgpl-app .gpgpl-more-go-new {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 3px 8px;
	border-radius: 10px;
	background: var(--gp-ink);
	color: var(--gp-paper);
	font: 700 0.72rem/1.2 var(--gpgpl-font-ui);
}
.gpgpl-app .gpgpl-more-go-new[hidden] { display: none; }
.gpgpl-app .gpgpl-more-go-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 68px;
	padding: 6px 4px;
	border-radius: 16px;
	background: var(--gp-paper);
	box-shadow: inset 0 0 0 1px var(--gp-line);
	font-size: 0.84rem;
	font-weight: 700;
}
.gpgpl-app .gpgpl-more-go-chip .gpgpl-hub-badge { top: 6px; left: calc(50% + 8px); background: var(--gp-clay); }

/* The garden photo: Done where its back arrow was, Badges with Undo */
.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-gph .gpgpl-gph-done {
	height: 44px;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	color: var(--gp-ink);
	border: 1px solid rgba(226, 214, 194, 0.9); /* light on the photo's dark ground */
}
.gpgpl-app .gpgpl-design-area.is-designing .gpgpl-gph .gpgpl-gph-done:hover { background: var(--gp-paper); }

/* Turn the whole garden shape (2.7.0): ↺ · how far · ↻ */
.gpgpl-app .gpgpl-shape-rotate {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--gpgpl-border, var(--gp-line));
	border-radius: 999px;
	background: var(--gpgpl-paper, #FCF9F3);
}
.gpgpl-app .gpgpl-design-area .gpgpl-shape-toolbar .gpgpl-shape-rotate .gpgpl-shape-rotate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.gpgpl-app .gpgpl-shape-rotate-btn:active { background: var(--gp-ink); color: var(--gp-paper); }
.gpgpl-app .gpgpl-shape-rotate-label {
	min-width: 3.4em;
	text-align: center;
	font: 700 0.82rem/1 var(--gpgpl-font-ui);
	color: var(--gp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "My Collection" (2.7.0): one line, with a little more room than the others */
.gpgpl-app .gpgpl-tab > span:not(.gpgpl-tab-pip):not(.gpgpl-hub-badge) { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gpgpl-app .gpgpl-tab[data-hub-go="plants"] { flex: 1.3; max-width: 124px; }
@media (min-width: 760px) {
	.gpgpl-app .gpgpl-tab[data-hub-go="plants"] { max-width: 130px; }
}